total-recall-brain 3.16.1 → 3.17.0

package/frontend/dist/sw.js

@@ -105,7 +105,13 @@ async function staleWhileRevalidate(request) {
       }
       return response;
     })
-    .catch(() => cached);
+    .catch((err) => {
+      if (cached) return cached;
+      return new Response(JSON.stringify({ error: 'Network error and no cache available' }), {
+        status: 503,
+        headers: { 'Content-Type': 'application/json' }
+      });
+    });
 
   return cached || fetchPromise;
 }

package/frontend/src/App.tsx

@@ -9,7 +9,7 @@ import MemoryPage from './pages/MemoryPage'
 import SettingsPage from './pages/SettingsPage'
 import NetworkPage from './pages/NetworkPage'
 import TasksPage from './pages/TasksPage'
-import ApiKeysPage from './pages/ApiKeysPage'
+import SecretsPage from './pages/SecretsPage'
 import IntegrationsPage from './pages/IntegrationsPage'
 import { MeshPage } from './pages/MeshPage'
 import { WebhooksPage } from './pages/WebhooksPage'
@@ -20,6 +20,7 @@ import HelpPage from './pages/HelpPage'
 import GraphPage from './pages/GraphPage'
 import OpenWikiPage from './pages/OpenWikiPage'
 import OnboardingPage from './pages/OnboardingPage'
+import { NotificationsPage } from './pages/NotificationsPage'
 import { isOnboardingComplete } from './utils/onboarding'
 import BrandMark from './components/brand/BrandMark'
 import ContextualHelp from './components/ContextualHelp'
@@ -56,6 +57,8 @@ interface SidebarProps {
   onBrainChange: (id: string) => void
 }
 
+const getNavLinkClass = ({ isActive }: { isActive: boolean }) => `nav-link ${isActive ? 'active' : ''}`;
+
 function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProps) {
   return (
     <aside className="sidebar">
@@ -68,40 +71,40 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
       <nav className="sidebar-nav">
         <div className="nav-section-label">Memory</div>
         {!isOnboardingComplete() && (
-          <NavLink to="/onboarding" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-onboarding">
+          <NavLink to="/onboarding" className={getNavLinkClass} id="nav-onboarding">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" />
             </svg>
             Setup
           </NavLink>
         )}
-        <NavLink to="/" end className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-chat">
+        <NavLink to="/" end className={getNavLinkClass} id="nav-chat">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
           </svg>
           Chat
         </NavLink>
-        <NavLink to="/memory" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-memory">
+        <NavLink to="/memory" className={getNavLinkClass} id="nav-memory">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="12" cy="12" r="10" /><path d="M12 16v-4M12 8h.01" />
           </svg>
           Vault
         </NavLink>
-        <NavLink to="/rules" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-rules">
+        <NavLink to="/rules" className={getNavLinkClass} id="nav-rules">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z" />
             <path d="M14 3v5h5M16 13H8M16 17H8M10 9H8" />
           </svg>
           Rules
         </NavLink>
-        <NavLink to="/graph" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-graph">
+        <NavLink to="/graph" className={getNavLinkClass} id="nav-graph">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="5" cy="6" r="2" /><circle cx="19" cy="6" r="2" /><circle cx="12" cy="18" r="2" />
             <path d="M7 7l4 9M17 7l-4 9" />
           </svg>
           Graph
         </NavLink>
-        <NavLink to="/tasks" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-tasks">
+        <NavLink to="/tasks" className={getNavLinkClass} id="nav-tasks">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M9 11l3 3L22 4" /><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11" />
           </svg>
@@ -109,20 +112,20 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
         </NavLink>
 
         <div className="nav-section-label">Connect</div>
-        <NavLink to="/integrations" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-integrations">
+        <NavLink to="/integrations" className={getNavLinkClass} id="nav-integrations">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" />
             <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" />
           </svg>
           IDEs
         </NavLink>
-        <NavLink to="/skills" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-skills">
+        <NavLink to="/skills" className={getNavLinkClass} id="nav-skills">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
           </svg>
           Skills
         </NavLink>
-        <NavLink to="/openwiki" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-openwiki">
+        <NavLink to="/openwiki" className={getNavLinkClass} id="nav-openwiki">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z" />
             <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z" />
@@ -131,13 +134,7 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
         </NavLink>
 
         <div className="nav-section-label">Account</div>
-        <NavLink to="/keys" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-keys">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-            <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4" />
-          </svg>
-          Keys & Usage
-        </NavLink>
-        <NavLink to="/network" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-network">
+        <NavLink to="/network" className={getNavLinkClass} id="nav-network">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
             <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
@@ -146,25 +143,37 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
           </svg>
           Network
         </NavLink>
-        <NavLink to="/mesh" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-mesh">
+        <NavLink to="/mesh" className={getNavLinkClass} id="nav-mesh">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" />
           </svg>
           Mesh
         </NavLink>
-        <NavLink to="/webhooks" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-webhooks">
+        <NavLink to="/webhooks" className={getNavLinkClass} id="nav-webhooks">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
           </svg>
           Webhooks
         </NavLink>
-        <NavLink to="/settings" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-settings">
+        <NavLink to="/secrets" className={getNavLinkClass} id="nav-secrets">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" /><path d="M7 11V7a5 5 0 0110 0v4" />
+          </svg>
+          Secrets & Keys
+        </NavLink>
+        <NavLink to="/notifications" className={getNavLinkClass} id="nav-notifications">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 01-3.46 0" />
+          </svg>
+          Notifications
+        </NavLink>
+        <NavLink to="/settings" className={getNavLinkClass} id="nav-settings">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z" />
           </svg>
           Settings
         </NavLink>
-        <NavLink to="/help" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-help">
+        <NavLink to="/help" className={getNavLinkClass} id="nav-help">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="12" cy="12" r="10" />
             <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
@@ -173,7 +182,7 @@ function Sidebar({ onLogout, health, activeBrainId, onBrainChange }: SidebarProp
           Help
         </NavLink>
         {isOnboardingComplete() && (
-          <NavLink to="/onboarding" className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`} id="nav-onboarding-replay" style={{ opacity: 0.75 }}>
+          <NavLink to="/onboarding" className={getNavLinkClass} id="nav-onboarding-replay" style={{ opacity: 0.75 }}>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M12 2L2 7l10 5 10-5-10-5z" /><path d="M2 17l10 5 10-5" /><path d="M2 12l10 5 10-5" />
             </svg>
@@ -338,11 +347,13 @@ function MainContent({ activeBrainId, onBrainChange }: { activeBrainId: string;
             <Route path="/skills" element={<SkillsPage activeBrainId={activeBrainId} />} />
             <Route path="/openwiki" element={<OpenWikiPage activeBrainId={activeBrainId} />} />
             <Route path="/integrations" element={<IntegrationsPage activeBrainId={activeBrainId} />} />
-            <Route path="/keys" element={<ApiKeysPage />} />
+            <Route path="/keys" element={<Navigate to="/secrets" replace />} />
             <Route path="/settings" element={<SettingsPage activeBrainId={activeBrainId} />} />
             <Route path="/network" element={<NetworkPage />} />
             <Route path="/mesh" element={<MeshPage />} />
             <Route path="/webhooks" element={<WebhooksPage />} />
+            <Route path="/secrets" element={<SecretsPage />} />
+            <Route path="/notifications" element={<NotificationsPage />} />
             <Route path="/help" element={<HelpPage />} />
             {/* Legacy OS-control-plane routes → core product */}
             <Route path="/vault" element={<Navigate to="/memory" replace />} />

package/frontend/src/api/_base.ts

@@ -34,13 +34,13 @@ export async function apiFetch(url: string, options: RequestInit = {}): Promise<
   return res
 }
 
-export async function get(path: string) {
+export async function get<T = any>(path: string): Promise<T> {
   const res = await apiFetch(API_BASE + path);
   if (!res.ok) throw new Error(`GET ${path} failed: ${res.status}`);
   return res.json();
 }
 
-export async function post(path: string, body: any) {
+export async function post<T = any>(path: string, body: any): Promise<T> {
   const res = await apiFetch(API_BASE + path, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
@@ -50,7 +50,7 @@ export async function post(path: string, body: any) {
   return res.json();
 }
 
-export async function del(path: string) {
+export async function del<T = any>(path: string): Promise<T> {
   const res = await apiFetch(API_BASE + path, {
     method: 'DELETE'
   });

package/frontend/src/api/chat.ts

@@ -37,7 +37,7 @@ export async function sendChat(
   })
   if (!res.ok) throw new Error(`Chat API error: ${res.status}`)
   const data = await res.json()
-  return data.choices?.[0]?.message?.content ?? '(empty response)'
+  return data.choices?.[0]?.message?.content || '(empty response)'
 }
 
 export async function fetchChatHistory(sessionId?: string): Promise<{ role: string; content: string }[]> {

package/frontend/src/api/headscale.ts

@@ -0,0 +1,71 @@
+import { get, post, del } from './_base';
+
+export interface HeadscaleNode {
+  id: string;
+  name: string;
+  user?: string | { name: string; id?: string };
+  ipAddresses: string[];
+  createdAt: string;
+  lastSeen: string;
+  online: boolean;
+  clientVersion?: string;
+}
+
+export interface PreAuthKey {
+  id: string;
+  key: string;
+  user: string;
+  reusable: boolean;
+  ephemeral?: boolean;
+  expiration: string;
+  createdAt: string;
+  used: boolean;
+}
+
+export interface HeadscaleUser {
+  id: string;
+  name: string;
+  createdAt: string;
+}
+
+export interface HeadscaleNodesResponse {
+  nodes?: HeadscaleNode[];
+  machines?: HeadscaleNode[];
+}
+
+export interface PreAuthKeysResponse {
+  preAuthKeys?: PreAuthKey[];
+}
+
+export interface UsersResponse {
+  users?: HeadscaleUser[];
+}
+
+export async function fetchHeadscaleNodes(): Promise<HeadscaleNode[]> {
+  const data = await get<HeadscaleNodesResponse>('/api/headscale/node');
+  return data.nodes || data.machines || [];
+}
+
+export async function deleteHeadscaleNode(id: string): Promise<void> {
+  return del(`/api/headscale/node/${encodeURIComponent(id)}`);
+}
+
+export async function fetchPreAuthKeys(user?: string): Promise<PreAuthKey[]> {
+  const query = user ? `?user=${encodeURIComponent(user)}` : '';
+  const data = await get<PreAuthKeysResponse>(`/api/headscale/preauthkey${query}`);
+  return data.preAuthKeys || [];
+}
+
+export async function createPreAuthKey(params: {
+  user: string;
+  reusable: boolean;
+  expiration: string;
+  ephemeral?: boolean;
+}): Promise<PreAuthKey> {
+  return post<PreAuthKey>('/api/headscale/preauthkey', params);
+}
+
+export async function fetchHeadscaleUsers(): Promise<HeadscaleUser[]> {
+  const data = await get<UsersResponse>('/api/headscale/user');
+  return data.users || [];
+}

package/frontend/src/api/index.ts

@@ -18,3 +18,4 @@ export * from './extension'
 export * from './sessions'
 export * from './integrations'
 export * from './config'
+export * from './secrets'

package/frontend/src/api/keys.ts

@@ -143,6 +143,7 @@ export interface SecretCatalogKey {
   created_at: string | null
   updated_at: string | null
   rotated_at: string | null
+  headscale_url?: string | null
   usage_30d: { events: number; cost_usd: number; input_tokens: number; output_tokens: number }
   tiers: { id: string; label: string; monthly_usd?: number | null }[]
 }

package/frontend/src/api/network.spec.ts

@@ -13,7 +13,7 @@ describe('networkApi', () => {
     });
 
     const result = await networkApi.getStats();
-    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/stats');
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/stats', expect.any(Object));
     expect(result.stats.total).toBe(10);
   });
 
@@ -24,7 +24,7 @@ describe('networkApi', () => {
     });
 
     const result = await networkApi.getPolicy();
-    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/policy');
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/policy', expect.any(Object));
     expect(result.id).toBe('network-policy');
   });
 
@@ -35,11 +35,10 @@ describe('networkApi', () => {
     });
 
     await networkApi.blockDomain('evil.com');
-    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/block', {
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/block', expect.objectContaining({
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ domain: 'evil.com' })
-    });
+    }));
   });
 
   it('unblockDomain DELETEs to /api/network/block/:domain', async () => {
@@ -49,8 +48,8 @@ describe('networkApi', () => {
     });
 
     await networkApi.unblockDomain('evil.com');
-    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/block/evil.com', {
+    expect(globalThis.fetch).toHaveBeenCalledWith('/api/network/block/evil.com', expect.objectContaining({
       method: 'DELETE'
-    });
+    }));
   });
 });

package/frontend/src/api/network.ts

@@ -1,3 +1,5 @@
+import { get, post, del, apiFetch, API_BASE } from './_base';
+
 export interface NetworkStats {
   total: number;
   blocked: number;
@@ -41,51 +43,42 @@ export interface AuditLogEntry {
   error?: string;
 }
 
-export const networkApi = {
-  getStats: async (): Promise<{ stats: NetworkStats, audit_count: number }> => {
-    const res = await fetch('/api/network/stats');
-    if (!res.ok) throw new Error('Failed to fetch network stats');
-    return res.json();
-  },
+export async function getNetworkStats(): Promise<{ stats: NetworkStats, audit_count: number }> {
+  return get('/api/network/stats');
+}
+
+export async function getNetworkPolicy(): Promise<NetworkPolicy> {
+  return get('/api/network/policy');
+}
 
-  getPolicy: async (): Promise<NetworkPolicy> => {
-    const res = await fetch('/api/network/policy');
-    if (!res.ok) throw new Error('Failed to fetch network policy');
-    return res.json();
-  },
+export async function updateNetworkPolicy(patch: Partial<NetworkPolicy>): Promise<any> {
+  const res = await apiFetch(API_BASE + '/api/network/policy', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(patch),
+  });
+  if (!res.ok) throw new Error(`PUT /api/network/policy failed: ${res.status}`);
+  return res.json();
+}
 
-  updatePolicy: async (patch: Partial<NetworkPolicy>): Promise<any> => {
-    const res = await fetch('/api/network/policy', {
-      method: 'PUT',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(patch)
-    });
-    if (!res.ok) throw new Error('Failed to update network policy');
-    return res.json();
-  },
+export async function blockDomain(domain: string): Promise<any> {
+  return post('/api/network/block', { domain });
+}
 
-  blockDomain: async (domain: string): Promise<any> => {
-    const res = await fetch('/api/network/block', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ domain })
-    });
-    if (!res.ok) throw new Error('Failed to block domain');
-    return res.json();
-  },
+export async function unblockDomain(domain: string): Promise<any> {
+  return del(`/api/network/block/${encodeURIComponent(domain)}`);
+}
 
-  unblockDomain: async (domain: string): Promise<any> => {
-    const res = await fetch(`/api/network/block/${encodeURIComponent(domain)}`, {
-      method: 'DELETE'
-    });
-    if (!res.ok) throw new Error('Failed to unblock domain');
-    return res.json();
-  },
+export async function getAuditLog(params?: { domain?: string; status?: string; since?: string }): Promise<{ audit: AuditLogEntry[] }> {
+  const query = params ? '?' + new URLSearchParams(params as any).toString() : '';
+  return get(`/api/network/audit${query}`);
+}
 
-  getAuditLog: async (params?: { domain?: string; status?: string; since?: string }): Promise<{ audit: AuditLogEntry[] }> => {
-    const query = new URLSearchParams(params as any).toString();
-    const res = await fetch(`/api/network/audit?${query}`);
-    if (!res.ok) throw new Error('Failed to fetch audit log');
-    return res.json();
-  }
+export const networkApi = {
+  getStats: getNetworkStats,
+  getPolicy: getNetworkPolicy,
+  updateNetworkPolicy,
+  blockDomain,
+  unblockDomain,
+  getAuditLog,
 };

package/frontend/src/api/notifications.ts

@@ -0,0 +1,41 @@
+import { get, post, del } from './_base';
+
+export interface NotificationRule {
+  id: string;
+  event: string;
+  channel: 'desktop' | 'webhook' | 'email';
+  priority: 'critical' | 'high' | 'low';
+  enabled: boolean;
+  quietHours: boolean;
+}
+
+export interface NotificationEntry {
+  id: string;
+  title: string;
+  message: string;
+  channel: string;
+  status: 'delivered' | 'failed';
+  timestamp: string;
+}
+
+export async function listNotificationRules(): Promise<NotificationRule[]> {
+  return get('/api/notifications/rules');
+}
+
+export async function createNotificationRule(
+  rule: Omit<NotificationRule, 'id'>,
+): Promise<NotificationRule> {
+  return post('/api/notifications/rules', rule);
+}
+
+export async function deleteNotificationRule(id: string): Promise<void> {
+  return del(`/api/notifications/rules/${encodeURIComponent(id)}`);
+}
+
+export async function getNotificationHistory(): Promise<NotificationEntry[]> {
+  return get('/api/notifications/history');
+}
+
+export async function sendTestNotification(): Promise<void> {
+  return post('/api/notifications/test', {});
+}

package/frontend/src/api/secrets.spec.ts

@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { listSecrets, addSecret, triggerSync, getSyncStatus } from './secrets';
+
+const mockFetch = vi.fn();
+vi.stubGlobal('fetch', mockFetch);
+
+describe('Secrets API client', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('listSecrets fetches secrets list metadata', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ keys: [{ key: 'KEY_1', provider: 'openai' }] })
+    });
+
+    const res = await listSecrets();
+    expect(res).toEqual([{ key: 'KEY_1', provider: 'openai' }]);
+    expect(mockFetch).toHaveBeenCalledWith('/api/secrets/list', expect.any(Object));
+  });
+
+  it('addSecret sends POST to /api/secrets', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ key: 'NEW_KEY', provider: 'stripe' })
+    });
+
+    const res = await addSecret('NEW_KEY', 'val_123', { provider: 'stripe' });
+    expect(res).toEqual({ key: 'NEW_KEY', provider: 'stripe' });
+    expect(mockFetch).toHaveBeenCalledWith('/api/secrets', expect.objectContaining({
+      method: 'POST',
+      body: JSON.stringify({ key: 'NEW_KEY', value: 'val_123', provider: 'stripe' })
+    }));
+  });
+
+  it('triggerSync sends POST to /api/secrets/sync/trigger', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ success: true, results: [] })
+    });
+
+    const res = await triggerSync();
+    expect(res).toEqual({ success: true, results: [] });
+    expect(mockFetch).toHaveBeenCalledWith('/api/secrets/sync/trigger', expect.objectContaining({
+      method: 'POST',
+      body: '{}'
+    }));
+  });
+
+  it('getSyncStatus sends GET to /api/secrets/sync/status', async () => {
+    mockFetch.mockResolvedValue({
+      ok: true,
+      json: async () => ({ localChecksum: 'h1', nodes: [] })
+    });
+
+    const res = await getSyncStatus();
+    expect(res).toEqual({ localChecksum: 'h1', nodes: [] });
+    expect(mockFetch).toHaveBeenCalledWith('/api/secrets/sync/status', expect.any(Object));
+  });
+});

package/frontend/src/api/secrets.ts

@@ -0,0 +1,53 @@
+import { get, post } from './_base';
+import type { SecretCatalogKey } from './keys';
+
+export interface SyncNodeStatus {
+  hostname: string;
+  ip: string;
+  status: 'synced' | 'out_of_sync' | 'unreachable';
+  checksum: string | null;
+}
+
+export interface SyncStatusResponse {
+  localChecksum: string;
+  nodes: SyncNodeStatus[];
+}
+
+export interface TriggerSyncResponse {
+  success: boolean;
+  results: {
+    hostname: string;
+    ip: string;
+    success: boolean;
+    error?: string;
+  }[];
+}
+
+export type SecretEntry = SecretCatalogKey;
+
+export async function listSecrets(): Promise<SecretEntry[]> {
+  const data = (await get('/api/secrets/list')) as { keys: SecretEntry[] };
+  return data.keys;
+}
+
+export async function addSecret(key: string, value: string, payload: Record<string, unknown>): Promise<SecretEntry> {
+  return (await post('/api/secrets', { key, value, ...payload })) as SecretEntry;
+}
+
+export async function editSecret(key: string, patch: Record<string, unknown>): Promise<SecretEntry> {
+  const { updateSecretMeta } = await import('./keys');
+  return updateSecretMeta(key, patch);
+}
+
+export async function deleteSecret(key: string): Promise<void> {
+  const { deleteProviderSecret } = await import('./keys');
+  return deleteProviderSecret(key);
+}
+
+export async function triggerSync(): Promise<TriggerSyncResponse> {
+  return (await post('/api/secrets/sync/trigger', {})) as TriggerSyncResponse;
+}
+
+export async function getSyncStatus(): Promise<SyncStatusResponse> {
+  return (await get('/api/secrets/sync/status')) as SyncStatusResponse;
+}

package/frontend/src/api/webhooks.ts

@@ -3,6 +3,9 @@ import { get, post, del } from './_base';
 export interface WebhookConfig {
   provider: string;
   status: 'active' | 'inactive';
+  secret?: string;
+  endpoint_url?: string;
+  events?: string[];
   lastReceived?: string;
   totalCount?: number;
 }
@@ -12,6 +15,7 @@ export interface WebhookEvent {
   provider: string;
   event_type: string;
   received_at: string;
+  payload?: any;
 }
 
 export async function fetchWebhookConfigs(): Promise<WebhookConfig[]> {