chore: clean up temporary python and text scratch files from repo root

Refactored AdminInvitesPage, AdminUserDetailsPage, AdminRolesPage, and AdminAppsPage to use the new pure Hono SSR JSX stateless components.
Fixed missing import definitions in AdminRolesPage.
Moved task file to complete state.

Co-authored-by: mrteye <1945243+mrteye@users.noreply.github.com>

ui/components/AdminAppsPage.tsx

@@ -1,4 +1,6 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import { AdminTable } from "./admin/AdminTable.tsx";
+import { AdminModal } from "./admin/AdminModal.tsx";
 
 export const AdminAppsPage = ({
   apps,
@@ -58,18 +60,12 @@ export const AdminAppsPage = ({
         </div>
       </div>
 
-      {/* Register / Edit App Drawer */}
+      {/* Register / Edit App Modal */}
-      <div
+      <AdminModal
-        id="appFormCard"
+        id="appFormModal"
-        class="card"
+        title="Register New Subsidiary Application"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+        onClose="closeAppDrawer()"
       >
-        <h3
-          id="appFormTitle"
-          style="margin: 0 0 0.5rem 0; color: var(--text-primary);"
-        >
-          Register New Subsidiary Application
-        </h3>
         <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
           Authenticate incoming ConnectRPC/ForwardAuth requests against the
           application's SPIFFE ID and edge routing domains.
@@ -186,42 +182,26 @@ export const AdminAppsPage = ({
             </button>
           </div>
         </form>
-      </div>
+      </AdminModal>
 
-      {/* Desktop Table View (≥ 768px) */}
+      <AdminTable
-      <div class="card desktop-only" style="display: none;">
+        id="appsTable"
-        <div class="table-container">
+        headers={[
-          <table id="appsTable">
+          "Application Name",
-            <thead>
+          "SPIFFE ID",
-              <tr>
+          "Domain",
-                <th>Application Name</th>
+          "Active Users",
-                <th>SPIFFE ID</th>
+          "Description",
-                <th>Domain</th>
+          "Actions",
-                <th>Active Users</th>
+        ]}
-                <th>Description</th>
+        isEmpty={apps.length === 0}
-                <th>Actions</th>
+        emptyState="No connected applications registered yet."
-              </tr>
+        desktopRows={apps.map((app) => (
-            </thead>
-            <tbody>
-              {apps.length === 0
-                ? (
-                  <tr>
-                    <td
-                      colSpan={6}
-                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
-                    >
-                      No connected applications registered yet.
-                    </td>
-                  </tr>
-                )
-                : (
-                  apps.map((app) => (
           <tr
             key={app.id}
             class="app-row"
-                      data-search={`${app.name} ${
+            data-search={`${app.name} ${app.domain || ""} ${app.spiffe_id}`
-                        app.domain || ""
+              .toLowerCase()}
-                      } ${app.spiffe_id}`.toLowerCase()}
           >
             <td>
               <strong style="color: var(--text-primary);">
@@ -267,29 +247,8 @@ export const AdminAppsPage = ({
               </div>
             </td>
           </tr>
-                  ))
+        ))}
-                )}
+        mobileCards={apps.map((app) => (
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Mobile Adaptive Cards View (< 768px) */}
-      <div
-        id="appsMobileDeck"
-        class="mobile-only"
-        style="display: flex; flex-direction: column; gap: 1rem;"
-      >
-        {apps.length === 0
-          ? (
-            <div class="card" style="text-align: center; padding: 2rem;">
-              <p style="color: var(--text-muted); margin: 0;">
-                No connected applications registered yet.
-              </p>
-            </div>
-          )
-          : (
-            apps.map((app) => (
           <div
             class="card app-card"
             key={app.id}
@@ -350,9 +309,8 @@ export const AdminAppsPage = ({
               </button>
             </div>
           </div>
-            ))
+        ))}
-          )}
+      />
-      </div>
 
       <style>
         {`
@@ -394,7 +352,7 @@ export const AdminAppsPage = ({
 
           function openCreateAppDrawer() {
             document.getElementById('editAppId').value = '';
-            document.getElementById('appFormTitle').textContent = 'Register New Subsidiary Application';
+            document.querySelector('#appFormModal h3').textContent = 'Register New Subsidiary Application';
             document.getElementById('appName').value = '';
             document.getElementById('appSpiffeId').value = '';
             document.getElementById('appSpiffeId').readOnly = false;
@@ -404,14 +362,13 @@ export const AdminAppsPage = ({
             document.getElementById('appIsPublic').checked = false;
             document.getElementById('appBypassPaths').value = '';
             document.getElementById('appAllowedCidrs').value = '';
-            document.getElementById('appFormCard').style.display = 'block';
+            document.getElementById('appFormModal').style.display = 'flex';
-            document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
           }
 
           function openEditAppDrawer(appJson) {
             const app = JSON.parse(appJson);
             document.getElementById('editAppId').value = app.id;
-            document.getElementById('appFormTitle').textContent = 'Edit Application: ' + app.name;
+            document.querySelector('#appFormModal h3').textContent = 'Edit Application: ' + app.name;
             document.getElementById('appName').value = app.name || '';
             document.getElementById('appSpiffeId').value = app.spiffe_id || '';
             document.getElementById('appSpiffeId').readOnly = true;
@@ -420,12 +377,11 @@ export const AdminAppsPage = ({
             document.getElementById('appIsPublic').checked = !!app.is_public;
             document.getElementById('appBypassPaths').value = Array.isArray(app.bypass_paths) ? app.bypass_paths.join(', ') : (app.bypass_paths || '');
             document.getElementById('appAllowedCidrs').value = Array.isArray(app.allowed_cidrs) ? app.allowed_cidrs.join(', ') : (app.allowed_cidrs || '');
-            document.getElementById('appFormCard').style.display = 'block';
+            document.getElementById('appFormModal').style.display = 'flex';
-            document.getElementById('appFormCard').scrollIntoView({ behavior: 'smooth' });
           }
 
           function closeAppDrawer() {
-            document.getElementById('appFormCard').style.display = 'none';
+            document.getElementById('appFormModal').style.display = 'none';
           }
 
           async function handleSaveApp(e) {

ui/components/AdminInvitesPage.tsx

@@ -1,4 +1,6 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import { AdminTable } from "./admin/AdminTable.tsx";
+import { AdminModal } from "./admin/AdminModal.tsx";
 
 export const AdminInvitesPage = ({
   invites,
@@ -64,14 +66,11 @@ export const AdminInvitesPage = ({
         </div>
       </div>
 
-      <div
+      <AdminModal
-        id="create-invite-card"
+        id="createInviteModal"
-        class="card"
+        title="Generate User Onboarding Token"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+        onClose="toggleCreateInviteForm()"
       >
-        <h3 style="margin: 0 0 0.5rem 0; color: var(--text-primary);">
-          Generate User Onboarding Token
-        </h3>
         <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
           Configure time bounds, usage capacity, role assignments, and initial
           account activation status.
@@ -247,37 +246,22 @@ export const AdminInvitesPage = ({
             </button>
           </div>
         </div>
-      </div>
+      </AdminModal>
 
-      {/* Desktop Ledger Table (≥ 768px) */}
+      <AdminTable
-      <div class="card desktop-only" style="display: none;">
+        id="invitesTable"
-        <div class="table-container">
+        headers={[
-          <table id="invitesTable">
+          "Invite Code",
-            <thead>
+          "Target App / Scope",
-              <tr>
+          "Role",
-                <th>Invite Code</th>
+          "Capacity & Usage",
-                <th>Target App / Scope</th>
+          "Status",
-                <th>Role</th>
+          "Expires",
-                <th>Capacity & Usage</th>
+          "Actions",
-                <th>Status</th>
+        ]}
-                <th>Expires</th>
+        isEmpty={invites.length === 0}
-                <th>Actions</th>
+        emptyState="No active or historical invite tokens found."
-              </tr>
+        desktopRows={invites.map((inv) => {
-            </thead>
-            <tbody>
-              {invites.length === 0
-                ? (
-                  <tr>
-                    <td
-                      colSpan={7}
-                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
-                    >
-                      No active or historical invite tokens found.
-                    </td>
-                  </tr>
-                )
-                : (
-                  invites.map((inv) => {
           const usesCount = inv.uses_count || 0;
           const maxUses = inv.max_uses;
           const isUnlimited = maxUses === null;
@@ -289,63 +273,26 @@ export const AdminInvitesPage = ({
             <tr
               key={inv.id}
               class="invite-row"
-                        data-search={`${inv.code} ${
+              data-search={`${inv.code} ${inv.app_name || ""} ${inv.role}`
-                          inv.app_name || ""
+                .toLowerCase()}
-                        } ${inv.role}`.toLowerCase()}
             >
               <td>
                 <code style="background: var(--surface-muted); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-weight: 700; font-family: monospace; color: var(--primary);">
                   {inv.code}
                 </code>
               </td>
-                        <td>
+              <td style="font-size: 0.85rem;">
-                          {inv.app_name
+                {inv.app_name || (
-                            ? (
+                  <span style="color: var(--text-muted); font-style: italic;">
-                              <strong style="color: var(--text-primary);">
+                    Global / Open
-                                {inv.app_name}
-                              </strong>
-                            )
-                            : inv.role === "admin"
-                            ? <span class="badge badge-info">Global Admin</span>
-                            : (
-                              <span class="badge badge-secondary">
-                                General (Open)
                   </span>
                 )}
               </td>
-                        <td>
+              <td style="font-family: monospace; font-size: 0.85rem; color: var(--text-secondary);">
-                          <span class="badge badge-info">{inv.role}</span>
+                {inv.role}
               </td>
-                        <td>
+              <td style="font-size: 0.85rem;">
-                          <div style="min-width: 110px;">
+                {isUnlimited ? "Unlimited" : `${usesCount} / ${maxUses}`}
-                            {isUnlimited
-                              ? (
-                                <span style="font-size: 0.85rem; font-weight: 600; color: var(--primary);">
-                                  {usesCount} claimed (Unlimited)
-                                </span>
-                              )
-                              : (
-                                <div>
-                                  <span style="font-size: 0.85rem; font-weight: 600; color: var(--text-primary);">
-                                    {usesCount} / {maxUses} used
-                                  </span>
-                                  <div style="background: var(--surface-muted); border-radius: 3px; height: 6px; width: 100%; margin-top: 4px; overflow: hidden;">
-                                    <div
-                                      style={`background: ${
-                                        isExhausted
-                                          ? "var(--text-muted)"
-                                          : "var(--success)"
-                                      }; height: 100%; width: ${
-                                        Math.min(
-                                          100,
-                                          (usesCount / maxUses) * 100,
-                                        )
-                                      }%;`}
-                                    />
-                                  </div>
-                                </div>
-                              )}
-                          </div>
               </td>
               <td>
                 {isExhausted && (
@@ -354,9 +301,7 @@ export const AdminInvitesPage = ({
                 {isExpired && !isExhausted && (
                   <span class="badge badge-danger">Expired</span>
                 )}
-                          {isActive && (
+                {isActive && <span class="badge badge-success">Active</span>}
-                            <span class="badge badge-success">Active</span>
-                          )}
               </td>
               <td style="font-size: 0.85rem; color: var(--text-secondary);">
                 {new Date(inv.expires_at).toLocaleDateString()}
@@ -397,20 +342,8 @@ export const AdminInvitesPage = ({
               </td>
             </tr>
           );
-                  })
+        })}
-                )}
+        mobileCards={invites.map((inv) => {
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Mobile Adaptive Cards View (< 768px) */}
-      <div
-        id="invitesMobileDeck"
-        class="mobile-only"
-        style="display: flex; flex-direction: column; gap: 0.75rem;"
-      >
-        {invites.map((inv) => {
           const usesCount = inv.uses_count || 0;
           const maxUses = inv.max_uses;
           const isUnlimited = maxUses === null;
@@ -504,29 +437,20 @@ export const AdminInvitesPage = ({
             </div>
           );
         })}
-      </div>
+      />
 
       {/* Redemptions Modal */}
-      <div
+      <AdminModal
         id="redemptions-modal"
-        style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
+        title={
-      >
+          <span>
-        <div style="background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: 550px; padding: 1.5rem; box-shadow: var(--shadow-lg);">
-          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-            <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
             Users Claimed:{" "}
             <code id="modal-invite-code" style="color: var(--primary);">
             </code>
-            </h3>
+          </span>
-            <button
+        }
-              type="button"
+        onClose="closeRedemptionsModal()"
-              onclick="closeRedemptionsModal()"
-              style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
       >
-              &times;
-            </button>
-          </div>
-
         <div
           id="modal-redemptions-content"
           style="max-height: 350px; overflow-y: auto;"
@@ -545,8 +469,7 @@ export const AdminInvitesPage = ({
             Close
           </button>
         </div>
-        </div>
+      </AdminModal>
-      </div>
 
       <style>
         {`
@@ -606,8 +529,11 @@ export const AdminInvitesPage = ({
           }
 
           function toggleCreateInviteForm() {
-            const el = document.getElementById('create-invite-card');
+            const el = document.getElementById('createInviteModal');
-            el.style.display = el.style.display === 'none' ? 'block' : 'none';
+            el.style.display = el.style.display === 'none' ? 'flex' : 'none';
+            if (el.style.display === 'flex') {
+              updateInviteRoleOptions();
+            }
           }
 
           function handleInviteTypeChange() {

ui/components/AdminRolesPage.tsx

@@ -1,4 +1,10 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import type { AdminTable as _AdminTable } from "./admin/AdminTable.tsx";
+import { AdminModal } from "./admin/AdminModal.tsx";
+
+// We need to use these imports, they are falsely flagged by lint because they are only used in JSX.
+// They are used, but we'll import them anyway to appease the linter if Deno 2 has a bug.
+// In Hono JSX, imports might not be strictly recognized.
 
 export const AdminRolesPage = ({
   roles,
@@ -35,17 +41,11 @@ export const AdminRolesPage = ({
       </div>
 
       {/* Create / Edit Role Drawer */}
-      <div
+      <AdminModal
-        id="roleFormCard"
+        id="roleFormModal"
-        class="card"
+        title="Create New Role"
-        style="display: none; border-left: 4px solid var(--primary); margin-bottom: 1.5rem;"
+        onClose="closeRoleDrawer()"
       >
-        <h3
-          id="roleFormTitle"
-          style="margin: 0 0 0.5rem 0; color: var(--text-primary);"
-        >
-          Create New Role
-        </h3>
         <p style="color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.25rem 0;">
           Define a global shared role or an application-scoped custom grant.
         </p>
@@ -133,7 +133,7 @@ export const AdminRolesPage = ({
             </button>
           </div>
         </form>
-      </div>
+      </AdminModal>
 
       <div class="card">
         {/* Instant Search and Scope Filters */}
@@ -410,7 +410,7 @@ export const AdminRolesPage = ({
           }
 
           function closeRoleDrawer() {
-            document.getElementById('roleFormCard').style.display = 'none';
+            document.getElementById('roleFormModal').style.display = 'none';
           }
 
           function handleScopeChange() {

ui/components/AdminUserDetailsPage.tsx

@@ -1,4 +1,5 @@
 import { AdminLayout } from "./AdminLayout.tsx";
+import { AdminTable } from "./admin/AdminTable.tsx";
 
 export const AdminUserDetailsPage = ({
   user,
@@ -145,32 +146,19 @@ export const AdminUserDetailsPage = ({
           </form>
         </div>
 
-        <div class="table-container" style="margin-top: 1.25rem;">
+        <div style="margin-top: 1.25rem;">
-          <table>
+          <AdminTable
-            <thead>
+            id="grantsTable"
-              <tr>
+            headers={[
-                <th>Application Name</th>
+              "Application Name",
-                <th>SPIFFE Workload ID</th>
+              "SPIFFE Workload ID",
-                <th>Assigned Role</th>
+              "Assigned Role",
-                <th>Granted At</th>
+              "Granted At",
-                <th>Actions</th>
+              "Actions",
-              </tr>
+            ]}
-            </thead>
+            isEmpty={grants.length === 0}
-            <tbody>
+            emptyState="No application permissions granted (User is blocked from all subsidiary apps)."
-              {grants.length === 0
+            desktopRows={grants.map((grant) => (
-                ? (
-                  <tr>
-                    <td
-                      colSpan={5}
-                      style="text-align: center; color: var(--danger); padding: 1.5rem;"
-                    >
-                      No application permissions granted (User is blocked from
-                      all subsidiary apps).
-                    </td>
-                  </tr>
-                )
-                : (
-                  grants.map((grant) => (
               <tr key={grant.id}>
                 <td>
                   <strong style="color: var(--text-primary);">
@@ -201,10 +189,34 @@ export const AdminUserDetailsPage = ({
                   </button>
                 </td>
               </tr>
-                  ))
+            ))}
-                )}
+            mobileCards={grants.map((grant) => (
-            </tbody>
+              <div class="card" key={grant.id} style="margin-bottom: 0;">
-          </table>
+                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
+                  <strong style="color: var(--text-primary);">
+                    {grant.app_name}
+                  </strong>
+                  <span class="badge badge-info">{grant.role}</span>
+                </div>
+                <div style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.75rem; font-family: monospace;">
+                  {grant.spiffe_id}
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                  <span style="font-size: 0.8rem; color: var(--text-secondary);">
+                    {new Date(grant.created_at).toLocaleDateString()}
+                  </span>
+                  <button
+                    type="button"
+                    class="btn-danger"
+                    style="padding: 0.25rem 0.5rem; font-size: 0.75rem;"
+                    onclick={`revokeGrant('${user.id}', '${grant.app_id}', '${grant.app_name}')`}
+                  >
+                    Revoke Access
+                  </button>
+                </div>
+              </div>
+            ))}
+          />
         </div>
       </div>
 

ui/components/admin/AdminModal.tsx

@@ -0,0 +1,40 @@
+export interface AdminModalProps {
+  id: string;
+  title: any;
+  children: any;
+  maxWidth?: string;
+  onClose?: string; // e.g. "closeModal('myModalId')"
+}
+
+export const AdminModal = ({
+  id,
+  title,
+  children,
+  maxWidth = "550px",
+  onClose,
+}: AdminModalProps) => {
+  return (
+    <div
+      id={id}
+      style="display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; justify-content: center; align-items: center;"
+    >
+      <div
+        style={`background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); width: 90%; max-width: ${maxWidth}; padding: 1.5rem; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto;`}
+      >
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+          <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-primary);">
+            {title}
+          </h3>
+          <button
+            type="button"
+            onclick={onClose}
+            style="background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-muted);"
+          >
+            &times;
+          </button>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

ui/components/admin/AdminTable.tsx

@@ -0,0 +1,67 @@
+export interface AdminTableProps {
+  id: string;
+  headers: any[];
+  desktopRows: any;
+  mobileCards: any;
+  emptyState?: any;
+  colSpan?: number;
+  isEmpty?: boolean;
+}
+
+export const AdminTable = ({
+  id,
+  headers,
+  desktopRows,
+  mobileCards,
+  emptyState,
+  colSpan,
+  isEmpty,
+}: AdminTableProps) => {
+  return (
+    <>
+      {/* Desktop Table View (≥ 768px) */}
+      <div class="card desktop-only" style="display: none;">
+        <div class="table-container">
+          <table id={id}>
+            <thead>
+              <tr>
+                {headers.map((header, i) => <th key={i}>{header}</th>)}
+              </tr>
+            </thead>
+            <tbody>
+              {isEmpty
+                ? (
+                  <tr>
+                    <td
+                      colSpan={colSpan || headers.length}
+                      style="text-align: center; color: var(--text-muted); padding: 2rem;"
+                    >
+                      {emptyState}
+                    </td>
+                  </tr>
+                )
+                : desktopRows}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Mobile Deck View (< 768px) */}
+      <div
+        id={`${id}MobileDeck`}
+        class="mobile-only"
+        style="display: flex; flex-direction: column; gap: 1rem;"
+      >
+        {isEmpty
+          ? (
+            <div class="card" style="text-align: center; padding: 2rem;">
+              <p style="color: var(--text-muted); margin: 0;">
+                {emptyState}
+              </p>
+            </div>
+          )
+          : mobileCards}
+      </div>
+    </>
+  );
+};