From 762c22608c968d1ca93916b24aa112a581620e1e Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 17:15:10 +1000
Subject: [PATCH 1/8] refactor: update authentication error handling in
 SessionProvider

---
 frontend/src/contexts/SessionProvider.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/contexts/SessionProvider.tsx b/frontend/src/contexts/SessionProvider.tsx
index e66f51f..2210688 100644
--- a/frontend/src/contexts/SessionProvider.tsx
+++ b/frontend/src/contexts/SessionProvider.tsx
@@ -163,9 +163,8 @@ export const SessionProvider = ({ children }: SessionProviderProps) => {
         dispatch({ type: "START_AUTH" });
         try {
           if (!browserSupportsPasskeys()) {
-            dispatch({ type: "SET_ERROR", payload: "Passkey sign-in is unavailable on this browser." });
             dispatch({ type: "SET_UNAUTHENTICATED" });
-            return "failed";
+            return "password_required";
           }
 
           const begin = await AuthenticationService.beginPasskeyAuthenticationApiV1AuthPasskeysAuthenticateOptionsPost({

From 9057c3511681ff4f66565ce197e2ebda95960eac Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 17:15:23 +1000
Subject: [PATCH 2/8] Update CORS for debugging

---
 dev/docker-compose.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dev/docker-compose.yml b/dev/docker-compose.yml
index 7d165c6..9d9b726 100644
--- a/dev/docker-compose.yml
+++ b/dev/docker-compose.yml
@@ -58,6 +58,7 @@ services:
       LANGFLOW__BASE_URL: http://localhost:7860/api/v1
       LANGFLOW__API_KEY: ${LANGFLOW_API_KEY:-dev-langflow-api-key}
       SECRET_KEY: dev-secret-key-change-in-production
+      CORS_ORIGINS: '["*"]'
     volumes:
       - ../backend:/app
     depends_on:

From fa47087a8ec2d6ceed02554e8c0f10a4ac902223 Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 18:49:11 +1000
Subject: [PATCH 3/8] Added specific origins

---
 dev/docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev/docker-compose.yml b/dev/docker-compose.yml
index 9d9b726..ea5327e 100644
--- a/dev/docker-compose.yml
+++ b/dev/docker-compose.yml
@@ -58,7 +58,7 @@ services:
       LANGFLOW__BASE_URL: http://localhost:7860/api/v1
       LANGFLOW__API_KEY: ${LANGFLOW_API_KEY:-dev-langflow-api-key}
       SECRET_KEY: dev-secret-key-change-in-production
-      CORS_ORIGINS: '["*"]'
+      CORS_ORIGINS: '["http://localhost:5173", "http://localhost:8000"]'
     volumes:
       - ../backend:/app
     depends_on:

From 3b4ed7c231821f4cac59c7e6bb66234259b79014 Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 18:49:34 +1000
Subject: [PATCH 4/8] Mobile fixes

---
 frontend/src/pages/Reports.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Reports.tsx b/frontend/src/pages/Reports.tsx
index f2fd570..72364a3 100644
--- a/frontend/src/pages/Reports.tsx
+++ b/frontend/src/pages/Reports.tsx
@@ -1149,15 +1149,30 @@ function Reports() {
           />
         </div>
 
-        {/* Tab Navigation */}
-        <div className="flex w-full border-b border-neutral-border">
+        {/* Tab Navigation — mobile: select dropdown, desktop: tab bar */}
+        <div className="w-full lg:hidden">
+          <Select
+            value={activeTab}
+            onValueChange={(val) => setActiveTab(val as TabType)}
+          >
+            {tabs.map((tab) => {
+              if (tab.adminOnly && !isAdmin) return null;
+              return (
+                <Select.Item key={tab.id} value={tab.id}>
+                  {tab.label}{tab.adminOnly ? ' (Admin)' : ''}
+                </Select.Item>
+              );
+            })}
+          </Select>
+        </div>
+        <div className="hidden lg:flex w-full border-b border-neutral-border">
           {tabs.map((tab) => {
             if (tab.adminOnly && !isAdmin) return null;
             return (
               <button
                 key={tab.id}
                 onClick={() => setActiveTab(tab.id)}
-                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
+                className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
                   activeTab === tab.id
                     ? `border-brand-primary ${isDarkTheme ? 'text-brand-primary' : 'text-brand-700'}`
                     : 'border-transparent text-subtext-color hover:text-default-font hover:border-neutral-300'

From 3e3f557db92e2571918f19495cfbfd538f3a471c Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 19:37:33 +1000
Subject: [PATCH 5/8] langflow secret must be a valid fernet key

---
 dev/docker-compose.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dev/docker-compose.yml b/dev/docker-compose.yml
index ea5327e..082c4ed 100644
--- a/dev/docker-compose.yml
+++ b/dev/docker-compose.yml
@@ -126,7 +126,7 @@ services:
       LANGFLOW_AUTO_LOGIN: "false"
       LANGFLOW_SUPERUSER: ${LANGFLOW_SUPERUSER:-admin}
       LANGFLOW_SUPERUSER_PASSWORD: ${LANGFLOW_SUPERUSER_PASSWORD:-admin}
-      LANGFLOW_SECRET_KEY: ${LANGFLOW_SECRET_KEY:-dev-langflow-secret-change-in-production}
+      LANGFLOW_SECRET_KEY: ${LANGFLOW_SECRET_KEY:-3R1HFctPJZ_MDJg-GQe2Z_TaEyZyXQZtbcCR5l8S0E4=}
       LANGFLOW_NEW_USER_IS_ACTIVE: "false"
       LANGFLOW_ENABLE_SUPERUSER_CLI: "false"
       LANGFLOW_API_KEY_SOURCE: env

From 8bdf10e4dd85054a6ce93ee6b3d6bb15a8d0895a Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 19:38:20 +1000
Subject: [PATCH 6/8] Update ModalShell to use Dialog component. Title and
 Descriptions added for accessibility.

---
 .../src/components/overlays/ModalShell.tsx    | 33 ++++++++++--
 frontend/src/pages/AdminLinkTemplates.tsx     | 14 ++---
 frontend/src/pages/AdminSettings.tsx          | 53 +++++++++++--------
 frontend/src/pages/AdminUsers.tsx             | 10 ++--
 frontend/src/pages/ProfileManagement.tsx      | 10 ++--
 5 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/overlays/ModalShell.tsx b/frontend/src/components/overlays/ModalShell.tsx
index ba91c96..204f3bd 100644
--- a/frontend/src/components/overlays/ModalShell.tsx
+++ b/frontend/src/components/overlays/ModalShell.tsx
@@ -1,26 +1,49 @@
 import React from "react";
 
+import { Dialog } from "@tidemark-security/ux";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+
 import { cn } from "@/utils/cn";
 
 interface ModalShellProps {
   children: React.ReactNode;
+  title: string;
+  description?: string;
   panelClassName?: string;
   contentClassName?: string;
+  onClose?: () => void;
 }
 
 export function ModalShell({
   children,
+  title,
+  description,
   panelClassName,
   contentClassName,
+  onClose,
 }: ModalShellProps) {
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black bg-opacity-50 p-4">
-      <div
+    <Dialog
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) onClose?.();
+      }}
+      className="p-4"
+    >
+      <Dialog.Content
         className={cn(
-          "flex max-h-full w-full flex-col rounded-md bg-neutral-100 px-6 py-6",
+          "w-full bg-neutral-100 px-6 py-6",
           panelClassName,
         )}
       >
+        <VisuallyHidden.Root asChild>
+          <Dialog.Title>{title}</Dialog.Title>
+        </VisuallyHidden.Root>
+        {description && (
+          <VisuallyHidden.Root asChild>
+            <Dialog.Description>{description}</Dialog.Description>
+          </VisuallyHidden.Root>
+        )}
         <div
           className={cn(
             "flex min-h-0 w-full flex-col items-start gap-6",
@@ -29,7 +52,7 @@ export function ModalShell({
         >
           {children}
         </div>
-      </div>
-    </div>
+      </Dialog.Content>
+    </Dialog>
   );
 }
diff --git a/frontend/src/pages/AdminLinkTemplates.tsx b/frontend/src/pages/AdminLinkTemplates.tsx
index fa4b072..da9e0a9 100644
--- a/frontend/src/pages/AdminLinkTemplates.tsx
+++ b/frontend/src/pages/AdminLinkTemplates.tsx
@@ -3,6 +3,7 @@ import { Badge } from "@/components/data-display/Badge";
 import { Button } from "@/components/buttons/Button";
 import { DropdownMenu } from "@/components/overlays/DropdownMenu";
 import { IconButton } from "@/components/buttons/IconButton";
+import { ModalShell } from "@/components/overlays";
 import { Table } from "@/components/data-display/Table";
 import { TextField } from "@/components/forms/TextField";
 import { Toast } from "@/components/feedback/Toast";
@@ -388,9 +389,12 @@ function AdminLinkTemplates() {
 
       {/* Create/Edit Modal */}
       {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-md bg-neutral-100 px-6 py-6">
-            <div className="flex w-full flex-col items-start gap-6">
+        <ModalShell
+          title={isEditing ? "Edit Link Template" : "Create Link Template"}
+          description="Configure contextual action links for timeline items"
+          panelClassName="max-w-2xl max-h-[90vh] overflow-y-auto"
+          onClose={closeModal}
+        >
               {/* Modal Header */}
               <div className="flex w-full items-center gap-2">
                 <div className="flex grow shrink-0 basis-0 flex-col items-start gap-1">
@@ -597,9 +601,7 @@ function AdminLinkTemplates() {
                   {isEditing ? "Save Changes" : "Create Template"}
                 </Button>
               </div>
-            </div>
-          </div>
-        </div>
+        </ModalShell>
       )}
 
       {/* Toast Notifications */}
diff --git a/frontend/src/pages/AdminSettings.tsx b/frontend/src/pages/AdminSettings.tsx
index 522ffd6..b6c6a59 100644
--- a/frontend/src/pages/AdminSettings.tsx
+++ b/frontend/src/pages/AdminSettings.tsx
@@ -1110,7 +1110,7 @@ function AdminSettings() {
                 </div>
               ) : null}
 
-              <div className="min-w-0 flex-1 flex flex-col gap-8">
+              <div className="min-w-0 w-full flex-1 flex flex-col gap-8">
                 <div
                   id="case-closure-settings"
                   className="scroll-mt-24 flex flex-col gap-6"
@@ -1118,7 +1118,7 @@ function AdminSettings() {
                   <h2 className="text-heading-2 font-heading-2 text-default-font">
                     General
                   </h2>
-                  <section className="flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-6">
+                  <section className="flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6">
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
                       <Settings className="text-[20px] text-subtext-color" />
                       <h3 className="text-heading-3 font-heading-3 text-default-font">
@@ -1158,7 +1158,7 @@ function AdminSettings() {
                   <h2 className="text-heading-2 font-heading-2 text-default-font">
                     System
                   </h2>
-                  <section className="flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-6">
+                  <section className="flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6">
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
                       <Upload className="text-[20px] text-subtext-color" />
                       <h3 className="text-heading-3 font-heading-3 text-default-font">
@@ -1229,7 +1229,7 @@ function AdminSettings() {
                   <h2 className="text-heading-2 font-heading-2 text-default-font">
                     Identity Providers
                   </h2>
-                  <section className="flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-6">
+                  <section className="flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6">
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
                       <Settings className="text-[20px] text-subtext-color" />
                       <h3 className="text-heading-3 font-heading-3 text-default-font">
@@ -1435,7 +1435,7 @@ function AdminSettings() {
                   {/* LangFlow Settings Section */}
                   <section
                     id="langflow-settings"
-                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-6"
+                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6"
                   >
                     {/* LangFlow Setup Wizard */}
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
@@ -1446,7 +1446,7 @@ function AdminSettings() {
                     </div>
 
                     <div className="flex flex-col gap-3 rounded-md border border-neutral-border bg-default-background p-4">
-                      <div className="flex items-start justify-between gap-4">
+                      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                         <div className="flex flex-col gap-1">
                           <span className="text-body-bold font-body-bold text-default-font">
                             Setup Langflow for Intercept
@@ -1457,6 +1457,7 @@ function AdminSettings() {
                           </p>
                         </div>
                         <Button
+                          className="w-full sm:w-auto"
                           variant="neutral-secondary"
                           onClick={openLangflowSetupModal}
                         >
@@ -1467,7 +1468,7 @@ function AdminSettings() {
 
                     {/* Test Connection */}
                     <div className="flex flex-col gap-3 rounded-md border border-neutral-border bg-default-background p-4">
-                      <div className="flex items-start justify-between gap-4">
+                      <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
                         <div className="flex flex-col gap-1">
                           <span className="text-body-bold font-body-bold text-default-font">
                             Test Connection
@@ -1478,6 +1479,7 @@ function AdminSettings() {
                           </p>
                         </div>
                         <Button
+                          className="w-full sm:w-auto"
                           variant="neutral-secondary"
                           onClick={testConnection}
                           disabled={testingConnection}
@@ -1570,7 +1572,7 @@ function AdminSettings() {
 
                   <section
                     id="ai-triage-settings"
-                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-6"
+                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6"
                   >
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
                       <Sparkles className="text-[20px] text-subtext-color" />
@@ -1637,7 +1639,7 @@ function AdminSettings() {
 
                   <section
                     id="directory-enrichment-settings"
-                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-6"
+                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6"
                   >
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
                       <Globe2 className="text-[20px] text-subtext-color" />
@@ -2204,7 +2206,7 @@ function AdminSettings() {
 
                   <section
                     id="maxmind-geoip-settings"
-                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-6"
+                    className="scroll-mt-24 flex flex-col gap-6 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6"
                   >
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
                       <Globe2 className="text-[20px] text-subtext-color" />
@@ -2451,7 +2453,7 @@ function AdminSettings() {
                     />
 
                     <div className="flex flex-col gap-4 border-t border-neutral-border pt-4">
-                      <div className="flex items-center justify-between gap-4">
+                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4">
                         <div>
                           <span className="text-body-bold font-body-bold text-default-font">
                             Database Status
@@ -2462,6 +2464,7 @@ function AdminSettings() {
                           </p>
                         </div>
                         <Button
+                          className="w-full sm:w-auto"
                           variant="neutral-tertiary"
                           onClick={() => maxMindUpdateMutation.mutate()}
                           disabled={
@@ -2494,22 +2497,22 @@ function AdminSettings() {
                       )}
 
                       <div className="overflow-x-auto rounded-md border border-neutral-border">
-                        <table className="min-w-full divide-y divide-neutral-border">
+                        <table className="w-full divide-y divide-neutral-border text-sm">
                           <thead className="bg-neutral-50">
                             <tr>
-                              <th className="px-4 py-3 text-left text-caption-bold font-caption-bold text-default-font">
+                              <th className="px-2 sm:px-4 py-2 sm:py-3 text-left text-caption-bold font-caption-bold text-default-font">
                                 Edition
                               </th>
-                              <th className="px-4 py-3 text-left text-caption-bold font-caption-bold text-default-font">
+                              <th className="px-2 sm:px-4 py-2 sm:py-3 text-left text-caption-bold font-caption-bold text-default-font">
                                 Storage
                               </th>
-                              <th className="px-4 py-3 text-left text-caption-bold font-caption-bold text-default-font">
+                              <th className="px-2 sm:px-4 py-2 sm:py-3 text-left text-caption-bold font-caption-bold text-default-font">
                                 Loaded
                               </th>
-                              <th className="px-4 py-3 text-left text-caption-bold font-caption-bold text-default-font">
+                              <th className="px-2 sm:px-4 py-2 sm:py-3 text-left text-caption-bold font-caption-bold text-default-font">
                                 Size
                               </th>
-                              <th className="px-4 py-3 text-left text-caption-bold font-caption-bold text-default-font">
+                              <th className="px-2 sm:px-4 py-2 sm:py-3 text-left text-caption-bold font-caption-bold text-default-font whitespace-nowrap">
                                 Last Updated
                               </th>
                             </tr>
@@ -2537,27 +2540,27 @@ function AdminSettings() {
                               maxMindDatabases.map(
                                 (database: MaxMindDatabaseStatus) => (
                                   <tr key={database.edition_id}>
-                                    <td className="px-4 py-3 text-body text-default-font">
+                                    <td className="px-2 sm:px-4 py-2 sm:py-3 text-body text-default-font">
                                       {database.edition_id}
                                     </td>
-                                    <td className="px-4 py-3 text-body text-default-font">
+                                    <td className="px-2 sm:px-4 py-2 sm:py-3 text-body text-default-font">
                                       <StatusPill
                                         active={!!database.available_in_storage}
                                         activeLabel="Stored"
                                         inactiveLabel="Missing"
                                       />
                                     </td>
-                                    <td className="px-4 py-3 text-body text-default-font">
+                                    <td className="px-2 sm:px-4 py-2 sm:py-3 text-body text-default-font">
                                       <StatusPill
                                         active={!!database.loaded}
                                         activeLabel="Loaded"
                                         inactiveLabel="Idle"
                                       />
                                     </td>
-                                    <td className="px-4 py-3 text-body text-subtext-color">
+                                    <td className="px-2 sm:px-4 py-2 sm:py-3 text-body text-subtext-color">
                                       {formatFileSize(database.file_size_bytes)}
                                     </td>
-                                    <td className="px-4 py-3 text-body text-subtext-color">
+                                    <td className="px-2 sm:px-4 py-2 sm:py-3 text-body text-subtext-color whitespace-nowrap">
                                       {formatTimestamp(database.last_updated)}
                                     </td>
                                   </tr>
@@ -2576,7 +2579,7 @@ function AdminSettings() {
                 {advancedByCategory.length > 0 && (
                   <section
                     id="advanced-settings"
-                    className="scroll-mt-24 flex flex-col gap-4 rounded-lg border border-neutral-border bg-default-background p-6"
+                    className="scroll-mt-24 flex flex-col gap-4 rounded-lg border border-neutral-border bg-default-background p-4 sm:p-6"
                   >
                     <div className="flex items-center gap-2 border-b border-neutral-border pb-4">
                       <Settings className="text-[20px] text-subtext-color" />
@@ -2603,8 +2606,11 @@ function AdminSettings() {
 
       {showLangflowSetupModal && (
         <ModalShell
+          title="Setup Langflow for Intercept"
+          description="Wizard to configure Langflow integration with Intercept"
           panelClassName="max-w-3xl max-h-[calc(100vh-2rem)] overflow-hidden"
           contentClassName="h-full min-h-0"
+          onClose={closeLangflowSetupModal}
         >
           <div className="flex w-full items-start justify-between gap-3">
             <div className="flex grow flex-col gap-1">
@@ -3495,6 +3501,7 @@ function BooleanSettingField({
         </p>
       </div>
       <Switch
+        className="shrink-0"
         checked={value}
         onCheckedChange={handleChange}
         disabled={isDisabled}
diff --git a/frontend/src/pages/AdminUsers.tsx b/frontend/src/pages/AdminUsers.tsx
index f61c213..2cd4c13 100644
--- a/frontend/src/pages/AdminUsers.tsx
+++ b/frontend/src/pages/AdminUsers.tsx
@@ -688,7 +688,7 @@ function AdminUsers() {
   };
 
   const renderCreatedKeyModal = ({ key, onDone }: UnifiedCreatedKeyData) => (
-    <ModalShell>
+    <ModalShell title="API Key Created" description="Copy your new API key before closing this dialog" onClose={onDone}>
       <ApiKeyCreatedContent
         createdApiKey={key}
         showValue={showKeyValue}
@@ -1187,7 +1187,7 @@ function AdminUsers() {
 
       {/* Create User Modal */}
       {showCreateModal && !createdNhiResponse && !resetLinkModalData && (
-        <ModalShell>
+        <ModalShell title="Create New User" description="Create a new user or service account" onClose={closeCreateUserModal}>
           {/* Modal Header */}
           <div className="flex w-full items-center gap-2">
             <div className="flex grow shrink-0 basis-0 flex-col items-start gap-1">
@@ -1378,7 +1378,7 @@ function AdminUsers() {
 
       {/* Edit User Modal */}
       {editingUser && (
-        <ModalShell>
+        <ModalShell title="Edit User" description="Update user account details and role" onClose={closeEditUserModal}>
           <div className="flex w-full items-center gap-2">
             <div className="flex grow shrink-0 basis-0 flex-col items-start gap-1">
               <span className="text-heading-2 font-heading-2 text-default-font">
@@ -1504,7 +1504,7 @@ function AdminUsers() {
 
       {/* Create API Key Modal */}
       {showCreateApiKeyModal && !newlyCreatedKey && (
-        <ModalShell>
+        <ModalShell title="Create API Key" description="Generate a new API key for programmatic access" onClose={closeCreateApiKeyModal}>
           <CreateApiKeyModalContent
             keyName={createApiKeyFormData.name}
             expiresAt={createApiKeyFormData.expiresAt}
@@ -1522,7 +1522,7 @@ function AdminUsers() {
       {createdKeyModalData && renderCreatedKeyModal(createdKeyModalData)}
 
       {resetLinkModalData && (
-        <ModalShell>
+        <ModalShell title={resetLinkModalData.title} description="Copy this URL now — it will not be shown again" onClose={closeResetLinkModal}>
           <div className="flex w-full items-center gap-2">
             <div className="flex grow shrink-0 basis-0 flex-col items-start gap-1">
               <span className="text-heading-2 font-heading-2 text-default-font flex items-center gap-2">
diff --git a/frontend/src/pages/ProfileManagement.tsx b/frontend/src/pages/ProfileManagement.tsx
index 3a3c333..53a4e7a 100644
--- a/frontend/src/pages/ProfileManagement.tsx
+++ b/frontend/src/pages/ProfileManagement.tsx
@@ -828,7 +828,11 @@ function ProfileManagement() {
       </div>
 
       {showPasskeyModal && (
-        <ModalShell>
+        <ModalShell
+          title={passkeyModalMode === "register" ? "Register Passkey" : "Rename Passkey"}
+          description={passkeyModalMode === "register" ? "Choose a descriptive name for your new passkey" : "Update the display name for this passkey"}
+          onClose={closePasskeyModal}
+        >
           <div className="flex w-full items-center gap-2">
             <div className="flex grow shrink-0 basis-0 flex-col items-start gap-1">
               <span className="text-heading-2 font-heading-2 text-default-font">
@@ -899,7 +903,7 @@ function ProfileManagement() {
       )}
 
       {showCreateApiKeyModal && (
-        <ModalShell>
+        <ModalShell title="Create API Key" description="Generate a new API key for programmatic access" onClose={closeCreateApiKeyModal}>
           <CreateApiKeyModalContent
             keyName={apiKeyNameInput}
             expiresAt={apiKeyExpiresAtInput}
@@ -914,7 +918,7 @@ function ProfileManagement() {
       )}
 
       {createdApiKey && (
-        <ModalShell>
+        <ModalShell title="API Key Created" description="Copy your new API key before closing this dialog" onClose={closeCreatedApiKeyModal}>
           <ApiKeyCreatedContent
             createdApiKey={createdApiKey}
             showValue={showCreatedApiKeyValue}

From aa0f01bc91ee07376f56219f79d7000ee5346a8e Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 21:10:03 +1000
Subject: [PATCH 7/8] Refactor to use ezported CSS tokens from the ux library
 for consistency + remove duplication.

---
 dev/docker-compose.yml |   2 +
 frontend/src/index.css | 352 +----------------------------------------
 frontend/src/main.tsx  |   1 +
 3 files changed, 6 insertions(+), 349 deletions(-)

diff --git a/dev/docker-compose.yml b/dev/docker-compose.yml
index 082c4ed..e60a508 100644
--- a/dev/docker-compose.yml
+++ b/dev/docker-compose.yml
@@ -80,6 +80,8 @@ services:
     volumes:
       - ../frontend:/app
       - /app/node_modules
+      # Comment the following line out if you don't want to mount the local UX package - this requires cloning the UX repository.
+      - ../../ux:/app/node_modules/@tidemark-security/ux 
     depends_on:
       - backend
     command: ["npm", "run", "dev", "--", "--host", "0.0.0.0"]
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 564e0a2..ebcb136 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3,148 +3,17 @@
 @tailwind utilities;
 
 /**
- * Z-Index Layering System
- * 
- * Defines a consistent z-index hierarchy for the application:
- * - Dropdowns and popovers inside modals appear above modal content
- * - Modals obscure page-level dropdowns
- * - Tooltips always appear on top
+ * App-specific styles for Tidemark Intercept.
+ * Shared tokens (CSS variables, animations, bevels) come from
+ * @tidemark-security/ux/tokens.css — imported in main.tsx before index.css.
  */
-:root {
-  --z-dropdown: 50;
-  --z-sticky: 100;
-  --z-modal-backdrop: 1000;
-  --z-modal: 1001;
-  --z-popover: 1002;
-  --z-tooltip: 2000;
-
-  --color-default-font: 200 200 200;
-  --color-subtext-color: 165 165 165;
-  --color-neutral-border: 65 65 65;
-  --color-focus-border: 208 255 0;
-  --color-default-shadow: 208 255 0;
-  --color-scrollbar-thumb: 208 255 0;
-  --color-default-background: 10 10 10;
-  --color-page-background: 25 25 25;
-  --color-brand-secondary: 10 15 13;
-  --color-brand-secondary-blush: 5 12 9;
-  --color-brand-primary-blush: 208 255 0;
-  --color-accent-3-primary-blush: 42 30 92;
-  --color-accent-2-primary-blush: 255 0 85;
-  --color-accent-1-primary-blush: 0 255 217;
-
-  --color-neutral-0: 10 10 10;
-  --color-neutral-50: 23 23 23;
-  --color-neutral-100: 38 38 38;
-  --color-neutral-200: 64 64 64;
-  --color-neutral-300: 82 82 82;
-  --color-neutral-400: 115 115 115;
-  --color-neutral-500: 163 163 163;
-  --color-neutral-600: 212 212 212;
-  --color-neutral-700: 229 229 229;
-  --color-neutral-800: 245 245 245;
-  --color-neutral-900: 250 250 250;
-  --color-neutral-1000: 255 255 255;
-  color-scheme: dark;
-}
-
-:root[data-theme="light"] {
-  --color-default-font: 23 23 23;
-  --color-subtext-color: 82 82 82;
-  --color-neutral-border: 212 212 212;
-  --color-focus-border: 10 10 10;
-  --color-default-shadow: 10 10 10;
-  --color-scrollbar-thumb: 10 10 10;
-  --color-default-background: 245 245 245;
-  --color-page-background: 30 30 30;
-  --color-brand-secondary: 250 250 250;
-  --color-brand-secondary-blush: 250 250 250;
-
-  --color-neutral-0: 255 255 255;
-  --color-neutral-50: 250 250 250;
-  --color-neutral-100: 245 245 245;
-  --color-neutral-200: 229 229 229;
-  --color-neutral-300: 212 212 212;
-  --color-neutral-400: 163 163 163;
-  --color-neutral-500: 115 115 115;
-  --color-neutral-600: 82 82 82;
-  --color-neutral-700: 64 64 64;
-  --color-neutral-800: 38 38 38;
-  --color-neutral-900: 23 23 23;
-  --color-neutral-1000: 10 10 10;
-  color-scheme: light;
-}
-
-@media (prefers-color-scheme: light) {
-  :root:not([data-theme]) {
-    --color-default-font: 23 23 23;
-    --color-subtext-color: 82 82 82;
-    --color-neutral-border: 212 212 212;
-    --color-focus-border: 10 10 10;
-    --color-default-shadow: 10 10 10;
-    --color-scrollbar-thumb: 10 10 10;
-    --color-default-background: 255 255 255;
-    --color-page-background: 245 245 245;
-    --color-brand-secondary: 250 250 250;
-    --color-brand-secondary-blush: 250 250 250;
-
-    --color-neutral-0: 255 255 255;
-    --color-neutral-50: 250 250 250;
-    --color-neutral-100: 245 245 245;
-    --color-neutral-200: 229 229 229;
-    --color-neutral-300: 212 212 212;
-    --color-neutral-400: 163 163 163;
-    --color-neutral-500: 115 115 115;
-    --color-neutral-600: 82 82 82;
-    --color-neutral-700: 64 64 64;
-    --color-neutral-800: 38 38 38;
-    --color-neutral-900: 23 23 23;
-    --color-neutral-1000: 10 10 10;
-    color-scheme: light;
-  }
-}
-
-/**
- * Lucide Icon Sizing Fix
- * 
- * Lucide React icons default to 24x24px via inline attributes, but we need them
- * to inherit font-size from parent elements.
- * 
- * This makes all Lucide icons use 1em sizing, so they respect text-* classes:
- * - text-body (14px) → 14px icon
- * - text-heading-3 (16px) → 16px icon
- * - text-heading-2 (20px) → 20px icon
- * 
- * For icons that need explicit pixel sizes, use the size prop on the Lucide component:
- * - <Search size={24} /> for 24px icon
- * - <Check size={16} /> for 16px icon
- * 
- * Note: Tailwind h-* w-* classes do NOT work on Lucide icons because Lucide sets
- * inline width/height attributes. Use the size prop instead.
- */
-svg.lucide {
-  width: 1em !important;
-  height: 1em !important;
-}
 
 html {
-  font-family: "Saira", sans-serif;
-  font-size: 16px;
   height: 100vh;
   display: flex;
   flex-direction: column;
 }
 
-/* Page transition animation */
-@keyframes pageEnter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 /* View transitions API for modern browsers */
 @view-transition {
   navigation: auto;
@@ -168,11 +37,6 @@ html {
   to { opacity: 1; }
 }
 
-/* Content transition class - apply to dynamic content that appears/disappears */
-.content-fade-in {
-  animation: pageEnter 0.15s ease-out;
-}
-
 .prose {
   font-size: 14px;
   max-width: 1024px;
@@ -182,8 +46,6 @@ body {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  background-color: rgb(var(--color-default-background));
-  color: rgb(var(--color-default-font));
 }
 
 #root {
@@ -191,65 +53,6 @@ body {
   animation: pageEnter 0.2s ease-out;
 }
 
-@keyframes aiCaretBlink {
-  0%, 45% {
-    opacity: 1;
-  }
-  50%, 100% {
-    opacity: 0;
-  }
-}
-
-@keyframes aiScanlineSweep {
-  0% {
-    transform: translateX(-115%);
-    opacity: 0.35;
-  }
-  12% {
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(265%);
-    opacity: 0.35;
-  }
-}
-
-.ai-caret {
-  animation: aiCaretBlink 0.9s steps(1, end) infinite;
-}
-
-.ai-scanline-track {
-  position: relative;
-  width: 100%;
-  height: 10px;
-  overflow: hidden;
-  background-color: rgb(var(--color-neutral-300));
-}
-
-.ai-scanline {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 45%;
-  height: 100%;
-  mask-image: repeating-linear-gradient(
-    135deg,
-    transparent,
-    transparent 8px,
-    black 8px,
-    black 16px
-  );
-  -webkit-mask-image: repeating-linear-gradient(
-    135deg,
-    transparent,
-    transparent 8px,
-    black 8px,
-    black 16px
-  );
-  animation: aiScanlineSweep 4s linear infinite;
-}
-
-
 * {
   scrollbar-color: rgb(var(--color-scrollbar-thumb)) transparent !important;
 }
@@ -260,153 +63,4 @@ body {
 
 ::-webkit-scrollbar-thumb {
   background-color: rgb(var(--color-scrollbar-thumb));
-}
-
-/* Beveled corner effect using CSS corner-shape */
-.bevel-tr-none {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 0px;
-}
-.bevel-tr-sm {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 0.125rem; /* 2px */
-}
-.bevel-tr {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 0.25rem; /* 4px */
-}
-.bevel-tr-md {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 0.375rem; /* 6px */
-}
-.bevel-tr-lg {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 0.5rem; /* 8px */
-}
-.bevel-tr-xl {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 0.75rem; /* 12px */
-}
-.bevel-tr-2xl {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 1rem; /* 16px */
-}
-.bevel-tr-3xl {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 1.5rem; /* 24px */
-}
-.bevel-tr-full {
-	corner-top-right-shape: bevel;
-  border-top-right-radius: 9999px;
-}
-
-.bevel-tl-none {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 0px;
-}
-.bevel-tl-sm {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 0.125rem; /* 2px */
-}
-.bevel-tl {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 0.25rem; /* 4px */
-}
-.bevel-tl-md {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 0.375rem; /* 6px */
-}
-.bevel-tl-lg {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 0.5rem; /* 8px */
-}
-.bevel-tl-xl {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 0.75rem; /* 12px */
-}
-.bevel-tl-2xl {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 1rem; /* 16px */
-}
-.bevel-tl-3xl {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 1.5rem; /* 24px */
-}
-.bevel-tl-full {
-	corner-top-left-shape: bevel;
-  border-top-left-radius: 9999px;
-}
-
-.bevel-br-none {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 0px;
-}
-.bevel-br-sm {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 0.125rem; /* 2px */
-}
-.bevel-br {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 0.25rem; /* 4px */
-}
-.bevel-br-md {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 0.375rem; /* 6px */
-}
-.bevel-br-lg {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 0.5rem; /* 8px */
-}
-.bevel-br-xl {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 0.75rem; /* 12px */
-}
-.bevel-br-2xl {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 1rem; /* 16px */
-}
-.bevel-br-3xl {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 1.5rem; /* 24px */
-}
-.bevel-br-full {
-	corner-bottom-right-shape: bevel;
-  border-bottom-right-radius: 9999px;
-}
-
-.bevel-bl-none {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 0px;
-}
-.bevel-bl-sm {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 0.125rem; /* 2px */
-}
-.bevel-bl {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 0.25rem; /* 4px */
-}
-.bevel-bl-md {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 0.375rem; /* 6px */
-}
-.bevel-bl-lg {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 0.5rem; /* 8px */
-}
-.bevel-bl-xl {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 0.75rem; /* 12px */
-}
-.bevel-bl-2xl {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 1rem; /* 16px */
-}
-.bevel-bl-3xl {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 1.5rem; /* 24px */
-}
-.bevel-bl-full {
-	corner-bottom-left-shape: bevel;
-  border-bottom-left-radius: 9999px;
 }
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 6f3c34a..cc4a05f 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App.tsx";
 import "./index.css";
+import "@tidemark-security/ux/tokens.css";
 import { ThemeProvider } from "./contexts/ThemeContext";
 import { TimezoneProvider } from "./contexts/TimezoneContext";
 import { VisualFilterProvider } from "./contexts/VisualFilterContext";

From dae708d3514cf8167751f9d6f977197623f31df2 Mon Sep 17 00:00:00 2001
From: Glenn Bolton <glenn@defendable.design>
Date: Sun, 12 Apr 2026 21:11:20 +1000
Subject: [PATCH 8/8] =?UTF-8?q?Bump=20version:=200.2.0=20=E2=86=92=200.2.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .bumpversion.toml          | 2 +-
 VERSION                    | 2 +-
 frontend/package-lock.json | 4 ++--
 frontend/package.json      | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/.bumpversion.toml b/.bumpversion.toml
index 2ed8293..f6ee76a 100644
--- a/.bumpversion.toml
+++ b/.bumpversion.toml
@@ -1,5 +1,5 @@
 [tool.bumpversion]
-current_version = "0.2.0"
+current_version = "0.2.1"
 commit = true
 tag = true
 tag_name = "v{new_version}"
diff --git a/VERSION b/VERSION
index 0ea3a94..0c62199 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.2.0
+0.2.1
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9f26813..c56d2e0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "intercept",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "intercept",
-      "version": "0.2.0",
+      "version": "0.2.1",
       "dependencies": {
         "@lexical/rich-text": "^0.35.0",
         "@mdxeditor/editor": "^3.53.1",
diff --git a/frontend/package.json b/frontend/package.json
index fcadb68..b688026 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "intercept",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",