diff --git a/api/routes/aiControls.js b/api/routes/aiControls.js
new file mode 100644
index 00000000..8d8b3e33
--- /dev/null
+++ b/api/routes/aiControls.js
@@ -0,0 +1,77 @@
+import express from 'express';
+import { getRuntimeEnvironment } from '../middleware/auth.js';
+import {
+  getAIKillSwitch,
+  getAIKillSwitchHistory,
+  isOperatorTokenValid,
+  updateAIKillSwitch,
+  validateKillSwitchUpdate,
+} from '../services/aiKillSwitch.js';
+
+export const router = express.Router();
+
+function sendUnavailable(res, error) {
+  console.error(
+    '[ai-controls] Runtime control unavailable:',
+    error instanceof Error ? error.message : error
+  );
+  return res
+    .status(503)
+    .json({ error: 'ai_control_unavailable', message: 'AI runtime controls are unavailable.' });
+}
+
+router.get('/', async (_req, res) => {
+  try {
+    getRuntimeEnvironment();
+    const state = await getAIKillSwitch();
+    res.set('Cache-Control', 'no-store');
+    return res.json({ success: true, data: state });
+  } catch (error) {
+    return sendUnavailable(res, error);
+  }
+});
+
+router.get('/audit', async (_req, res) => {
+  try {
+    getRuntimeEnvironment();
+    const history = await getAIKillSwitchHistory();
+    res.set('Cache-Control', 'no-store');
+    return res.json({ success: true, data: history });
+  } catch (error) {
+    return sendUnavailable(res, error);
+  }
+});
+
+router.put('/', async (req, res) => {
+  const authorization = req.headers.authorization;
+  const token =
+    typeof authorization === 'string' && authorization.startsWith('Bearer ')
+      ? authorization.slice('Bearer '.length)
+      : '';
+  if (!isOperatorTokenValid(token)) {
+    return res
+      .status(403)
+      .json({ error: 'forbidden', message: 'A configured operator token is required.' });
+  }
+
+  let update;
+  try {
+    update = validateKillSwitchUpdate(req.body);
+    getRuntimeEnvironment();
+  } catch (error) {
+    if (error?.status === 400)
+      return res.status(400).json({ error: 'invalid_payload', message: error.message });
+    return res.status(503).json({
+      error: 'unsupported_environment',
+      message: 'AI runtime control is unsupported in this environment.',
+    });
+  }
+
+  try {
+    const state = await updateAIKillSwitch(update.enabled, 'configured-operator', update.reason);
+    res.set('Cache-Control', 'no-store');
+    return res.json({ success: true, data: state });
+  } catch (error) {
+    return sendUnavailable(res, error);
+  }
+});
diff --git a/api/routes/behavior.js b/api/routes/behavior.js
index ae506b75..5489013f 100644
--- a/api/routes/behavior.js
+++ b/api/routes/behavior.js
@@ -24,9 +24,22 @@ import {
   clearPersonalizationData,
 } from '../../src/lib/personalizationEngine.js';
 import { requireSelfOrAdmin } from '../middleware/auth.js';
+import { getAIKillSwitch } from '../services/aiKillSwitch.js';
 
 export const router = express.Router();
 
+router.use(async (_req, res, next) => {
+  try {
+    const { enabled } = await getAIKillSwitch();
+    if (!enabled) {
+      return res.status(503).json({ error: 'ai_disabled', message: 'AI-assisted behavior features are temporarily disabled.' });
+    }
+    return next();
+  } catch {
+    return res.status(503).json({ error: 'ai_control_unavailable', message: 'AI features are unavailable until runtime controls can be verified.' });
+  }
+});
+
 router.use((req, res, next) => {
   const userId = req.headers['x-user-id'] || req.query.userId || req.user?.id;
   if (!userId && req.path !== '/settings') {
diff --git a/api/server.js b/api/server.js
index ced544b5..4813c2ac 100644
--- a/api/server.js
+++ b/api/server.js
@@ -14,6 +14,7 @@ import { router as notificationSummariesRouter } from './routes/notificationSumm
 import { router as gasPredictionRouter } from './routes/gasPrediction.js';
 import { router as analyticsRouter } from './routes/analytics.js';
 import { router as migrationRouter } from './routes/migration.js';
+import { router as aiControlsRouter } from './routes/aiControls.js';
 
 export const app = express();
 export const server = createServer(app);
@@ -25,6 +26,8 @@ app.use('/api/health', healthRouter);
 app.use(apiVersioningMiddleware);
 app.use(idempotencyMiddleware);
 app.use(rateLimiter);
+// Public read-only status; mutation authorization is enforced by the route itself.
+app.use('/api/v1/ai-controls', aiControlsRouter);
 
 getRuntimeEnvironment();
 
@@ -56,6 +59,7 @@ app.get('/api/docs', (req, res) => {
       '/api/v1/transactions': 'GET - Query transactions (query params: accountId, limit)',
       '/api/v1/liquidity': 'GET - Liquidity predictions and metrics',
       '/api/v1/behavior': 'Behavior prediction, suggestions, personalization',
+      '/api/v1/ai-controls': 'GET/PUT - Global AI panel kill switch (operator token required for writes)',
       '/api/v1/behavior/predict/intent': 'POST - Predict user intent',
       '/api/v1/behavior/predict/next-action': 'POST - Predict next user action',
       '/api/v1/behavior/profile': 'GET - Get behavior profile',
diff --git a/api/services/aiKillSwitch.js b/api/services/aiKillSwitch.js
new file mode 100644
index 00000000..cb4c5a9b
--- /dev/null
+++ b/api/services/aiKillSwitch.js
@@ -0,0 +1,161 @@
+import { timingSafeEqual } from 'node:crypto';
+
+const STATE_KEY = 'stellar-dashboard:ai-kill-switch';
+const AUDIT_LIMIT = 100;
+
+class MemoryKillSwitchStore {
+  constructor() {
+    this.state = { enabled: true, updatedAt: null, updatedBy: null, reason: null };
+    this.audit = [];
+  }
+
+  async read() {
+    return { ...this.state };
+  }
+
+  async update(enabled, actor, reason) {
+    const now = new Date().toISOString();
+    const entry = { enabled, previousEnabled: this.state.enabled, updatedAt: now, actor, reason };
+    this.state = { enabled, updatedAt: now, updatedBy: actor, reason };
+    this.audit.unshift(entry);
+    this.audit.length = Math.min(this.audit.length, AUDIT_LIMIT);
+    return { ...this.state };
+  }
+
+  async history() {
+    return this.audit.map((entry) => ({ ...entry }));
+  }
+}
+
+class RedisKillSwitchStore {
+  constructor(redis) {
+    this.redis = redis;
+  }
+
+  async read() {
+    const raw = await this.redis.get(STATE_KEY);
+    return raw
+      ? JSON.parse(raw)
+      : { enabled: true, updatedAt: null, updatedBy: null, reason: null };
+  }
+
+  async update(enabled, actor, reason) {
+    const script = `
+      local old = redis.call('GET', KEYS[1])
+      local previous = true
+      if old then previous = cjson.decode(old).enabled end
+      local state = cjson.encode({enabled=ARGV[1] == 'true', updatedAt=ARGV[2], updatedBy=ARGV[3], reason=ARGV[4]})
+      local audit = cjson.encode({enabled=ARGV[1] == 'true', previousEnabled=previous, updatedAt=ARGV[2], actor=ARGV[3], reason=ARGV[4]})
+      redis.call('SET', KEYS[1], state)
+      redis.call('LPUSH', KEYS[2], audit)
+      redis.call('LTRIM', KEYS[2], 0, ${AUDIT_LIMIT - 1})
+      return state
+    `;
+    const raw = await this.redis.eval(
+      script,
+      2,
+      STATE_KEY,
+      `${STATE_KEY}:audit`,
+      String(enabled),
+      new Date().toISOString(),
+      actor,
+      reason || ''
+    );
+    return JSON.parse(raw);
+  }
+
+  async history() {
+    const rows = await this.redis.lrange(`${STATE_KEY}:audit`, 0, AUDIT_LIMIT - 1);
+    return rows.map((row) => JSON.parse(row));
+  }
+}
+
+let storePromise;
+let injectedStore;
+
+async function getStore() {
+  if (injectedStore) return injectedStore;
+  if (storePromise) return storePromise;
+  storePromise = (async () => {
+    const mode = (process.env.AI_KILL_SWITCH_STORE || '').toLowerCase();
+    const redisUrl = process.env.REDIS_URL;
+    if (mode && mode !== 'memory' && mode !== 'redis') {
+      throw new Error('AI_KILL_SWITCH_STORE must be either redis or memory');
+    }
+    if (mode === 'memory' && process.env.NODE_ENV === 'production') {
+      throw new Error('Process-local AI kill switch storage is unsupported in production');
+    }
+    if (mode === 'memory' || (!redisUrl && process.env.NODE_ENV !== 'production')) {
+      return new MemoryKillSwitchStore();
+    }
+    if (!redisUrl) {
+      throw new Error('AI kill switch requires REDIS_URL in production');
+    }
+    const { default: Redis } = await import('ioredis');
+    const redis = new Redis(redisUrl, { maxRetriesPerRequest: 1, lazyConnect: true });
+    await redis.connect();
+    await redis.ping();
+    return new RedisKillSwitchStore(redis);
+  })().catch((error) => {
+    storePromise = undefined;
+    throw error;
+  });
+  return storePromise;
+}
+
+export function validateKillSwitchUpdate(body) {
+  if (
+    !body ||
+    typeof body !== 'object' ||
+    Array.isArray(body) ||
+    typeof body.enabled !== 'boolean'
+  ) {
+    const error = new Error('enabled must be a boolean');
+    error.status = 400;
+    throw error;
+  }
+  const reason = body.reason === undefined ? '' : body.reason;
+  const containsControlCharacter =
+    typeof reason === 'string' &&
+    Array.from(reason).some(
+      (character) => character.charCodeAt(0) < 32 || character.charCodeAt(0) === 127
+    );
+  if (typeof reason !== 'string' || reason.length > 240 || containsControlCharacter) {
+    const error = new Error('reason must be a string of at most 240 printable characters');
+    error.status = 400;
+    throw error;
+  }
+  return { enabled: body.enabled, reason: reason.trim() };
+}
+
+export function isOperatorTokenValid(token, expected = process.env.AI_KILL_SWITCH_OPERATOR_TOKEN) {
+  if (typeof token !== 'string' || typeof expected !== 'string' || expected.length < 32)
+    return false;
+  const supplied = Buffer.from(token);
+  const configured = Buffer.from(expected);
+  return supplied.length === configured.length && timingSafeEqual(supplied, configured);
+}
+
+export async function getAIKillSwitch() {
+  return (await getStore()).read();
+}
+
+export async function updateAIKillSwitch(enabled, actor, reason = '') {
+  return (await getStore()).update(enabled, actor, reason);
+}
+
+export async function getAIKillSwitchHistory() {
+  return (await getStore()).history();
+}
+
+export function setAIKillSwitchStoreForTests(store) {
+  injectedStore = store;
+  storePromise = undefined;
+}
+
+export function resetAIKillSwitchStoreForTests() {
+  injectedStore = undefined;
+  storePromise = undefined;
+}
+
+export { MemoryKillSwitchStore };
diff --git a/docker-compose.yml b/docker-compose.yml
index cac6aef9..761f5f78 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -43,7 +43,7 @@ services:
     command: npm run dev -- --host
     environment:
       - NODE_ENV=development
-      - VITE_API_URL=${VITE_API_URL:-http://localhost:4000}
+      - VITE_API_URL=${VITE_API_URL:-http://api:4000}
     depends_on:
       api:
         condition: service_healthy
@@ -59,6 +59,8 @@ services:
       - NODE_ENV=${NODE_ENV:-development}
       - PORT=4000
       - REDIS_URL=${REDIS_URL:-redis://redis:6379}
+      - AI_KILL_SWITCH_STORE=${AI_KILL_SWITCH_STORE:-redis}
+      - AI_KILL_SWITCH_OPERATOR_TOKEN=${AI_KILL_SWITCH_OPERATOR_TOKEN:-}
     depends_on:
       redis:
         condition: service_healthy
@@ -82,6 +84,8 @@ services:
       - CANARY=true
       - PORT=4000
       - REDIS_URL=${REDIS_URL:-redis://redis:6379}
+      - AI_KILL_SWITCH_STORE=${AI_KILL_SWITCH_STORE:-redis}
+      - AI_KILL_SWITCH_OPERATOR_TOKEN=${AI_KILL_SWITCH_OPERATOR_TOKEN:-}
     depends_on:
       redis:
         condition: service_healthy
diff --git a/docs/features/feature-flag-lifecycle.md b/docs/features/feature-flag-lifecycle.md
index f03669ee..85cd2da1 100644
--- a/docs/features/feature-flag-lifecycle.md
+++ b/docs/features/feature-flag-lifecycle.md
@@ -1,17 +1,19 @@
 # Feature Flag Lifecycle Management
 
+The lifecycle API below manages **session-local experimental flags**. It is not the operator kill switch and must not be used as a production-wide safety control.
+
 Dashboard modules can gate experimental UI through a shared lifecycle service:
 
 `src/lib/featureFlagLifecycle.ts` + `src/components/dashboard/FeatureFlags.tsx`
 
 ## Lifecycle
 
-| Status | Meaning |
-| --- | --- |
-| `draft` | Created but not yet serving traffic |
-| `active` | Eligible for evaluation in configured environments |
+| Status    | Meaning                                                         |
+| --------- | --------------------------------------------------------------- |
+| `draft`   | Created but not yet serving traffic                             |
+| `active`  | Eligible for evaluation in configured environments              |
 | `expired` | Past `expiresAt` or manually expired; evaluate returns disabled |
-| `retired` | Terminal state; cannot be re-activated |
+| `retired` | Terminal state; cannot be re-activated                          |
 
 Flows: **create → activate → evaluate → expire → retire**, with append-only **audit history**.
 
@@ -37,6 +39,25 @@ Flows: **create → activate → evaluate → expire → retire**, with append-o
 4. Prefer `expire()` for temporary shutoff and `retire()` for permanent removal.
 5. Existing stub `FeatureFlags` tab now manages flags via this service; no storage migration is required (in-memory for the session).
 
+## Global AI panel kill switch (runtime control)
+
+The Feature Flags screen also exposes a separate server-authoritative switch at `/api/v1/ai-controls`. `GET` reads current status; `PUT` accepts `{ "enabled": false, "reason": "incident response" }`. A configured operator bearer token is required to write. The UI holds the token in memory only, clears it after a successful change, and never persists it. The endpoint also exposes a read-only bounded audit list at `/api/v1/ai-controls/audit`.
+
+### Compatibility and deployment
+
+- Current API environments are `development`, `test`, and `production`. Other values (including `staging`) return an unsupported-environment error; define and validate an environment mapping before using a new deployment tier.
+- Development/test may use process-local memory when Redis is not configured. That mode is neither durable nor shared across API instances and is unsuitable for production.
+- Production requires shared Redis configured with `REDIS_URL` and `AI_KILL_SWITCH_STORE=redis`. The control state and bounded audit history are updated atomically in Redis. If Redis is absent or unavailable, reads and writes return `503`; the browser fails closed and suppresses AI panels. There is intentionally no process-local fallback.
+- Set `AI_KILL_SWITCH_OPERATOR_TOKEN` on the API service to a randomly generated secret of at least 32 characters. Configure it through your secret manager/container environment, not source control, browser storage, or Vite's `VITE_*` variables. No operator token means no authorized mutation.
+- Compose's API and web containers use the API service proxy so status and operator requests are same-origin. For standalone deployments, route `/api/` to the API server and preserve `Authorization`; deploy a shared Redis service before enabling the production control.
+
+### Behavior and security
+
+- AI panel state is polled every 10 seconds and refreshed when a browser tab becomes visible. Initial state and fetch/storage failures are fail-closed; the UI does not treat missing status as enabled.
+- Dashboard AI routes/widgets and AI behavior endpoints are gated. Hiding a panel is not an authorization substitute; other AI backend integrations should also check the authoritative state before being considered covered by the global switch.
+- The write credential is compared in constant time, never returned by the API, and not written to local storage. Audit records include transition, timestamp, fixed operator label, and optional reason (max 240 printable characters); do not put secrets or personal data in the reason.
+- Existing local feature flags and their in-memory audit log are unchanged. No data migration is needed; the runtime control persists independently in Redis. Roll back by setting `enabled` to `true` with the operator credential.
+
 ## Example
 
 ```ts
diff --git a/nginx.conf b/nginx.conf
index 57be7819..844166b7 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -20,6 +20,18 @@ server {
         add_header Content-Type text/plain;
     }
 
+    # Keep the runtime kill switch same-origin and available without rebuilding the UI.
+    location /api/ {
+        proxy_pass http://api:4000/api/;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_connect_timeout 2s;
+        proxy_read_timeout 10s;
+    }
+
     # Cache static assets
     location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
         expires 1y;
diff --git a/src/App.tsx b/src/App.tsx
index 40d7f5cd..e683e028 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import OnboardingFlow from './components/onboarding/OnboardingFlow';
 import { TipProvider } from './components/ai/TipProvider';
 import AnalyticsConsentPrompt from './components/AnalyticsConsentPrompt';
 import { needsAnalyticsConsentReview } from './utils/analyticsConsent';
+import { AIKillSwitchProvider } from './context/AIKillSwitchContext';
 
 const DashboardLayout = lazy(() => import('./routes/DashboardLayout'));
 
@@ -66,6 +67,7 @@ export default function App() {
     <I18nProvider>
       <AccessibilityProvider>
         <ExpertiseProvider>
+          <AIKillSwitchProvider>
           <ErrorBoundary maxRetries={2}>
             {showOnboarding && <OnboardingFlow onComplete={() => setShowOnboarding(false)} />}
             {showConsentPrompt && <AnalyticsConsentPrompt onDecision={() => setShowConsentPrompt(false)} />}
@@ -79,6 +81,7 @@ export default function App() {
             </ChunkLoadErrorBoundary>
             <DeveloperTools />
           </ErrorBoundary>
+          </AIKillSwitchProvider>
         </ExpertiseProvider>
       </AccessibilityProvider>
     </I18nProvider>
diff --git a/src/components/dashboard/AIRouteRecommendations.tsx b/src/components/dashboard/AIRouteRecommendations.tsx
index a5e889c8..7d1e17fc 100644
--- a/src/components/dashboard/AIRouteRecommendations.tsx
+++ b/src/components/dashboard/AIRouteRecommendations.tsx
@@ -1,58 +1,59 @@
-import React, { useState } from 'react'
-import SlippageWarning from './SlippageWarning'
+import React, { useState } from 'react';
+import SlippageWarning from './SlippageWarning';
+import { useAIKillSwitch } from '../../context/AIKillSwitchContext';
 
 interface Route {
-  path?: string[]
-  source_amount?: string
-  destination_amount?: string
-  source_asset_code?: string
-  destination_asset_code?: string
-  source_asset_type?: string
-  destination_asset_type?: string
-  destination_asset_issuer?: string
+  path?: string[];
+  source_amount?: string;
+  destination_amount?: string;
+  source_asset_code?: string;
+  destination_asset_code?: string;
+  source_asset_type?: string;
+  destination_asset_type?: string;
+  destination_asset_issuer?: string;
 }
 
 interface RankedRoute {
-  route: Route
-  overallScore: number
-  rank: number
+  route: Route;
+  overallScore: number;
+  rank: number;
   scores: {
-    cost: number
-    speed: number
-    reliability: number
-    slippage: number
-  }
+    cost: number;
+    speed: number;
+    reliability: number;
+    slippage: number;
+  };
 }
 
 interface SlippagePrediction {
-  predictedSlippage: number
-  confidence: number
-  riskLevel: 'low' | 'medium' | 'high' | 'critical'
+  predictedSlippage: number;
+  confidence: number;
+  riskLevel: 'low' | 'medium' | 'high' | 'critical';
   breakdown: {
-    hopContribution: number
-    liquidityContribution: number
-    amountContribution: number
-    volatilityContribution: number
-    timeContribution: number
-  }
-  recommendedTolerance: number
+    hopContribution: number;
+    liquidityContribution: number;
+    amountContribution: number;
+    volatilityContribution: number;
+    timeContribution: number;
+  };
+  recommendedTolerance: number;
 }
 
 interface RouteExplanation {
-  summary: string
-  factors: Array<{ type: string; label: string; detail: string }>
-  recommendation: string
-  warnings: string[]
+  summary: string;
+  factors: Array<{ type: string; label: string; detail: string }>;
+  recommendation: string;
+  warnings: string[];
 }
 
 interface AIRouteRecommendationsProps {
-  rankedRoutes: RankedRoute[]
-  slippagePredictions: SlippagePrediction[]
-  routeExplanations: RouteExplanation[]
-  onSelectRoute: (route: Route) => void
-  selectedRoute?: Route | null
-  isLoading?: boolean
-  showExplanations?: boolean
+  rankedRoutes: RankedRoute[];
+  slippagePredictions: SlippagePrediction[];
+  routeExplanations: RouteExplanation[];
+  onSelectRoute: (_route: Route) => void;
+  selectedRoute?: Route | null;
+  isLoading?: boolean;
+  showExplanations?: boolean;
 }
 
 export default function AIRouteRecommendations({
@@ -64,70 +65,83 @@ export default function AIRouteRecommendations({
   isLoading = false,
   showExplanations = true,
 }: AIRouteRecommendationsProps) {
-  const [expandedRoute, setExpandedRoute] = useState<number | null>(null)
-  const [showSlippageDetails, setShowSlippageDetails] = useState<boolean>(false)
+  const { enabled, ready } = useAIKillSwitch();
+  const [expandedRoute, setExpandedRoute] = useState<number | null>(null);
+  const [showSlippageDetails, setShowSlippageDetails] = useState<boolean>(false);
+
+  if (!enabled || !ready) return null;
 
   if (isLoading) {
     return (
-      <div style={{
-        padding: '20px',
-        textAlign: 'center',
-        color: 'var(--text-muted)',
-      }}>
+      <div
+        style={{
+          padding: '20px',
+          textAlign: 'center',
+          color: 'var(--text-muted)',
+        }}
+      >
         <div style={{ marginBottom: '8px' }}>🔄</div>
         <div style={{ fontSize: '13px' }}>Analyzing routes with AI...</div>
       </div>
-    )
+    );
   }
 
   if (!rankedRoutes || rankedRoutes.length === 0) {
-    return null
+    return null;
   }
 
   return (
-    <div style={{
-      padding: '16px',
-      background: 'var(--bg-elevated)',
-      border: '1px solid var(--border)',
-      borderRadius: 'var(--radius-md)',
-    }}>
-      <div style={{
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: '16px',
-      }}>
+    <div
+      style={{
+        padding: '16px',
+        background: 'var(--bg-elevated)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-md)',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '16px',
+        }}
+      >
         <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
           <span style={{ fontSize: '16px' }}>🤖</span>
-          <span style={{
-            fontSize: '14px',
-            fontWeight: 600,
-            color: 'var(--text-primary)',
-            fontFamily: 'var(--font-display)',
-          }}>
+          <span
+            style={{
+              fontSize: '14px',
+              fontWeight: 600,
+              color: 'var(--text-primary)',
+              fontFamily: 'var(--font-display)',
+            }}
+          >
             AI Route Recommendations
           </span>
         </div>
-        <div style={{
-          fontSize: '11px',
-          padding: '4px 8px',
-          background: 'var(--cyan-glow-sm)',
-          border: '1px solid var(--cyan)',
-          borderRadius: 'var(--radius-sm)',
-          color: 'var(--cyan)',
-          fontWeight: 500,
-        }}>
+        <div
+          style={{
+            fontSize: '11px',
+            padding: '4px 8px',
+            background: 'var(--cyan-glow-sm)',
+            border: '1px solid var(--cyan)',
+            borderRadius: 'var(--radius-sm)',
+            color: 'var(--cyan)',
+            fontWeight: 500,
+          }}
+        >
           {rankedRoutes.length} routes analyzed
         </div>
       </div>
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
         {rankedRoutes.map((ranked, index) => {
-          const prediction = slippagePredictions[index]
-          const explanation = routeExplanations[index]
-          const isExpanded = expandedRoute === index
-          const isSelected = selectedRoute === ranked.route
-          const isRecommended = ranked.rank === 1
+          const prediction = slippagePredictions[index];
+          const explanation = routeExplanations[index];
+          const isExpanded = expandedRoute === index;
+          const isSelected = selectedRoute === ranked.route;
+          const isRecommended = ranked.rank === 1;
 
           return (
             <div
@@ -135,7 +149,11 @@ export default function AIRouteRecommendations({
               style={{
                 border: `1px solid ${isRecommended ? 'var(--cyan)' : isSelected ? 'var(--green)' : 'var(--border)'}`,
                 borderRadius: 'var(--radius-md)',
-                background: isRecommended ? 'var(--cyan-glow-sm)' : isSelected ? 'var(--green-glow-sm)' : 'var(--bg-canvas)',
+                background: isRecommended
+                  ? 'var(--cyan-glow-sm)'
+                  : isSelected
+                    ? 'var(--green-glow-sm)'
+                    : 'var(--bg-canvas)',
                 transition: 'var(--transition)',
               }}
             >
@@ -150,55 +168,64 @@ export default function AIRouteRecommendations({
                 onClick={() => setExpandedRoute(isExpanded ? null : index)}
               >
                 <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                  <div style={{
-                    width: '24px',
-                    height: '24px',
-                    borderRadius: '50%',
-                    background: isRecommended ? 'var(--cyan)' : 'var(--bg-elevated)',
-                    color: isRecommended ? 'white' : 'var(--text-muted)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: '12px',
-                    fontWeight: 600,
-                  }}>
+                  <div
+                    style={{
+                      width: '24px',
+                      height: '24px',
+                      borderRadius: '50%',
+                      background: isRecommended ? 'var(--cyan)' : 'var(--bg-elevated)',
+                      color: isRecommended ? 'white' : 'var(--text-muted)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: '12px',
+                      fontWeight: 600,
+                    }}
+                  >
                     {ranked.rank}
                   </div>
                   <div>
-                    <div style={{
-                      fontSize: '13px',
-                      fontWeight: 600,
-                      color: isRecommended ? 'var(--cyan)' : 'var(--text-primary)',
-                    }}>
+                    <div
+                      style={{
+                        fontSize: '13px',
+                        fontWeight: 600,
+                        color: isRecommended ? 'var(--cyan)' : 'var(--text-primary)',
+                      }}
+                    >
                       {isRecommended ? '⭐ Recommended' : `Route #${ranked.rank}`}
                     </div>
-                    <div style={{
-                      fontSize: '11px',
-                      color: 'var(--text-muted)',
-                      fontFamily: 'var(--font-mono)',
-                    }}>
-                      {(ranked.overallScore * 100).toFixed(1)}% score • {ranked.route.path?.length || 0} hops
+                    <div
+                      style={{
+                        fontSize: '11px',
+                        color: 'var(--text-muted)',
+                        fontFamily: 'var(--font-mono)',
+                      }}
+                    >
+                      {(ranked.overallScore * 100).toFixed(1)}% score •{' '}
+                      {ranked.route.path?.length || 0} hops
                     </div>
                   </div>
                 </div>
 
                 <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                   {prediction && (
-                    <div style={{
-                      fontSize: '11px',
-                      padding: '3px 8px',
-                      borderRadius: 'var(--radius-sm)',
-                      background: getRiskColor(prediction.riskLevel, true),
-                      color: getRiskColor(prediction.riskLevel, false),
-                      fontWeight: 500,
-                    }}>
+                    <div
+                      style={{
+                        fontSize: '11px',
+                        padding: '3px 8px',
+                        borderRadius: 'var(--radius-sm)',
+                        background: getRiskColor(prediction.riskLevel, true),
+                        color: getRiskColor(prediction.riskLevel, false),
+                        fontWeight: 500,
+                      }}
+                    >
                       {(prediction.predictedSlippage * 100).toFixed(2)}%
                     </div>
                   )}
                   <button
                     onClick={(e) => {
-                      e.stopPropagation()
-                      onSelectRoute(ranked.route)
+                      e.stopPropagation();
+                      onSelectRoute(ranked.route);
                     }}
                     style={{
                       padding: '6px 12px',
@@ -218,49 +245,66 @@ export default function AIRouteRecommendations({
               </div>
 
               {isExpanded && explanation && (
-                <div style={{
-                  padding: '0 12px 12px',
-                  borderTop: '1px solid var(--border)',
-                }}>
-                  <div style={{
-                    marginTop: '12px',
-                    fontSize: '12px',
-                    color: 'var(--text-muted)',
-                    lineHeight: 1.5,
-                  }}>
+                <div
+                  style={{
+                    padding: '0 12px 12px',
+                    borderTop: '1px solid var(--border)',
+                  }}
+                >
+                  <div
+                    style={{
+                      marginTop: '12px',
+                      fontSize: '12px',
+                      color: 'var(--text-muted)',
+                      lineHeight: 1.5,
+                    }}
+                  >
                     {explanation.summary}
                   </div>
 
                   {showExplanations && explanation.factors.length > 0 && (
                     <div style={{ marginTop: '12px' }}>
-                      <div style={{
-                        fontSize: '11px',
-                        color: 'var(--text-muted)',
-                        marginBottom: '6px',
-                        fontWeight: 500,
-                      }}>
+                      <div
+                        style={{
+                          fontSize: '11px',
+                          color: 'var(--text-muted)',
+                          marginBottom: '6px',
+                          fontWeight: 500,
+                        }}
+                      >
                         KEY FACTORS
                       </div>
                       <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                         {explanation.factors.map((factor, fi) => (
-                          <div key={fi} style={{
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '6px',
-                            fontSize: '11px',
-                          }}>
-                            <span style={{
-                              color: factor.type === 'positive' ? 'var(--green)' :
-                                factor.type === 'warning' ? 'var(--amber)' : 'var(--red)',
-                            }}>
-                              {factor.type === 'positive' ? '✓' : factor.type === 'warning' ? '⚠' : '✗'}
+                          <div
+                            key={fi}
+                            style={{
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: '6px',
+                              fontSize: '11px',
+                            }}
+                          >
+                            <span
+                              style={{
+                                color:
+                                  factor.type === 'positive'
+                                    ? 'var(--green)'
+                                    : factor.type === 'warning'
+                                      ? 'var(--amber)'
+                                      : 'var(--red)',
+                              }}
+                            >
+                              {factor.type === 'positive'
+                                ? '✓'
+                                : factor.type === 'warning'
+                                  ? '⚠'
+                                  : '✗'}
                             </span>
                             <span style={{ fontWeight: 500, color: 'var(--text-primary)' }}>
                               {factor.label}:
                             </span>
-                            <span style={{ color: 'var(--text-muted)' }}>
-                              {factor.detail}
-                            </span>
+                            <span style={{ color: 'var(--text-muted)' }}>{factor.detail}</span>
                           </div>
                         ))}
                       </div>
@@ -271,8 +315,8 @@ export default function AIRouteRecommendations({
                     <div style={{ marginTop: '12px' }}>
                       <button
                         onClick={(e) => {
-                          e.stopPropagation()
-                          setShowSlippageDetails(!showSlippageDetails)
+                          e.stopPropagation();
+                          setShowSlippageDetails(!showSlippageDetails);
                         }}
                         style={{
                           fontSize: '11px',
@@ -300,21 +344,26 @@ export default function AIRouteRecommendations({
                   )}
 
                   {explanation.warnings.length > 0 && (
-                    <div style={{
-                      marginTop: '12px',
-                      padding: '8px 10px',
-                      background: 'var(--amber-glow-sm)',
-                      border: '1px solid var(--amber)',
-                      borderRadius: 'var(--radius-sm)',
-                    }}>
+                    <div
+                      style={{
+                        marginTop: '12px',
+                        padding: '8px 10px',
+                        background: 'var(--amber-glow-sm)',
+                        border: '1px solid var(--amber)',
+                        borderRadius: 'var(--radius-sm)',
+                      }}
+                    >
                       {explanation.warnings.map((warning, wi) => (
-                        <div key={wi} style={{
-                          fontSize: '11px',
-                          color: 'var(--amber)',
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '6px',
-                        }}>
+                        <div
+                          key={wi}
+                          style={{
+                            fontSize: '11px',
+                            color: 'var(--amber)',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                          }}
+                        >
                           <span>⚠</span>
                           <span>{warning}</span>
                         </div>
@@ -322,22 +371,24 @@ export default function AIRouteRecommendations({
                     </div>
                   )}
 
-                  <div style={{
-                    marginTop: '12px',
-                    fontSize: '11px',
-                    color: 'var(--text-muted)',
-                    fontStyle: 'italic',
-                  }}>
+                  <div
+                    style={{
+                      marginTop: '12px',
+                      fontSize: '11px',
+                      color: 'var(--text-muted)',
+                      fontStyle: 'italic',
+                    }}
+                  >
                     {explanation.recommendation}
                   </div>
                 </div>
               )}
             </div>
-          )
+          );
         })}
       </div>
     </div>
-  )
+  );
 }
 
 function getRiskColor(riskLevel: string, isBackground: boolean): string {
@@ -346,7 +397,7 @@ function getRiskColor(riskLevel: string, isBackground: boolean): string {
     medium: { bg: 'var(--amber-glow-sm)', text: 'var(--amber)' },
     high: { bg: 'var(--red-glow-sm)', text: 'var(--red)' },
     critical: { bg: 'var(--red-glow-sm)', text: 'var(--red)' },
-  }
-  const color = colors[riskLevel] || colors.medium
-  return isBackground ? color.bg : color.text
+  };
+  const color = colors[riskLevel] || colors.medium;
+  return isBackground ? color.bg : color.text;
 }
diff --git a/src/components/dashboard/AuditLog.tsx b/src/components/dashboard/AuditLog.tsx
index 28b5915e..3cddd4ff 100644
--- a/src/components/dashboard/AuditLog.tsx
+++ b/src/components/dashboard/AuditLog.tsx
@@ -8,23 +8,23 @@ import { useTablePresets } from '../../hooks/useTablePresets';
 import type { AuditEntry } from '../../types/audit';
 
 interface LogRowProps {
-  entry: AuditEntry
-  isSelected: boolean
-  onSelect: (id: string) => void
+  entry: AuditEntry;
+  isSelected: boolean;
+  onSelect: (id: string) => void;
 }
 
 interface FilterBarProps {
-  onFilterChange: (filters: FilterState) => void
+  onFilterChange: (filters: FilterState) => void;
 }
 
 interface FilterState {
-  severity: string[]
-  category: string[]
-  search: string
+  severity: string[];
+  category: string[];
+  search: string;
 }
 
 interface SeverityBadgeProps {
-  severity: string
+  severity: string;
 }
 
 const SEVERITY_COLORS: Record<string, { bg: string; color: string; border: string }> = {
@@ -48,18 +48,20 @@ const AUDIT_LOG_COLUMNS = [
 const SeverityBadge = ({ severity }: SeverityBadgeProps) => {
   const style = SEVERITY_COLORS[severity] || SEVERITY_COLORS.info;
   return (
-    <span style={{
-      padding: '2px 8px',
-      borderRadius: 'var(--radius-sm)',
-      fontSize: '10px',
-      fontWeight: 600,
-      fontFamily: 'var(--font-mono)',
-      textTransform: 'uppercase',
-      letterSpacing: '0.5px',
-      background: style.bg,
-      color: style.color,
-      border: `1px solid ${style.border}`,
-    }}>
+    <span
+      style={{
+        padding: '2px 8px',
+        borderRadius: 'var(--radius-sm)',
+        fontSize: '10px',
+        fontWeight: 600,
+        fontFamily: 'var(--font-mono)',
+        textTransform: 'uppercase',
+        letterSpacing: '0.5px',
+        background: style.bg,
+        color: style.color,
+        border: `1px solid ${style.border}`,
+      }}
+    >
       {severity}
     </span>
   );
@@ -81,37 +83,45 @@ const LogRow = ({ entry, isSelected, onSelect }: LogRowProps) => (
       fontSize: '12px',
     }}
   >
-    <div style={{
-      width: '8px',
-      height: '8px',
-      borderRadius: '50%',
-      background: (SEVERITY_COLORS[entry.severity] || SEVERITY_COLORS.info).color,
-      flexShrink: 0,
-    }} />
+    <div
+      style={{
+        width: '8px',
+        height: '8px',
+        borderRadius: '50%',
+        background: (SEVERITY_COLORS[entry.severity] || SEVERITY_COLORS.info).color,
+        flexShrink: 0,
+      }}
+    />
     <SeverityBadge severity={entry.severity} />
-    <div style={{
-      color: 'var(--text-muted)',
-      fontSize: '11px',
-      fontFamily: 'var(--font-mono)',
-      textTransform: 'capitalize',
-    }}>
+    <div
+      style={{
+        color: 'var(--text-muted)',
+        fontSize: '11px',
+        fontFamily: 'var(--font-mono)',
+        textTransform: 'capitalize',
+      }}
+    >
       {entry.category}
     </div>
-    <div style={{
-      color: 'var(--text-primary)',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      fontFamily: 'var(--font-mono)',
-    }}>
-      {entry.message}
+    <div
+      style={{
+        color: 'var(--text-primary)',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontFamily: 'var(--font-mono)',
+      }}
+    >
+      {entry.action}
     </div>
-    <div style={{
-      color: 'var(--text-muted)',
-      fontSize: '11px',
-      fontFamily: 'var(--font-mono)',
-      textAlign: 'right',
-    }}>
+    <div
+      style={{
+        color: 'var(--text-muted)',
+        fontSize: '11px',
+        fontFamily: 'var(--font-mono)',
+        textAlign: 'right',
+      }}
+    >
       {formatDistanceToNow(new Date(entry.timestamp), { addSuffix: true })}
     </div>
   </div>
@@ -125,7 +135,7 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
 
   const toggleSeverity = (sev: string) => {
     const next = selectedSeverities.includes(sev)
-      ? selectedSeverities.filter(s => s !== sev)
+      ? selectedSeverities.filter((s) => s !== sev)
       : [...selectedSeverities, sev];
     setSelectedSeverities(next);
     onFilterChange({ severity: next, category: selectedCategories, search });
@@ -133,7 +143,7 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
 
   const toggleCategory = (cat: string) => {
     const next = selectedCategories.includes(cat)
-      ? selectedCategories.filter(c => c !== cat)
+      ? selectedCategories.filter((c) => c !== cat)
       : [...selectedCategories, cat];
     setSelectedCategories(next);
     onFilterChange({ severity: selectedSeverities, category: next, search });
@@ -166,15 +176,17 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
               boxSizing: 'border-box',
             }}
           />
-          <span style={{
-            position: 'absolute',
-            left: '12px',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            color: 'var(--text-muted)',
-            fontSize: '14px',
-          }}>
-            {'\uD83D\uDD0D'}
+          <span
+            style={{
+              position: 'absolute',
+              left: '12px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              color: 'var(--text-muted)',
+              fontSize: '14px',
+            }}
+          >
+            🔍
           </span>
         </div>
 
@@ -198,18 +210,20 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
           <span>{'⚙'}</span>
           Filters
           {(selectedSeverities.length > 0 || selectedCategories.length > 0) && (
-            <span style={{
-              background: 'var(--cyan)',
-              color: 'white',
-              borderRadius: '50%',
-              width: '18px',
-              height: '18px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontSize: '10px',
-              fontWeight: 700,
-            }}>
+            <span
+              style={{
+                background: 'var(--cyan)',
+                color: 'white',
+                borderRadius: '50%',
+                width: '18px',
+                height: '18px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '10px',
+                fontWeight: 700,
+              }}
+            >
               {selectedSeverities.length + selectedCategories.length}
             </span>
           )}
@@ -217,21 +231,32 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
       </div>
 
       {isFilterOpen && (
-        <div style={{
-          padding: '14px',
-          background: 'var(--bg-elevated)',
-          border: '1px solid var(--border)',
-          borderRadius: 'var(--radius-md)',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '12px',
-        }}>
+        <div
+          style={{
+            padding: '14px',
+            background: 'var(--bg-elevated)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius-md)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+          }}
+        >
           <div>
-            <div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: '6px', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '1px' }}>
+            <div
+              style={{
+                fontSize: '11px',
+                color: 'var(--text-muted)',
+                marginBottom: '6px',
+                fontWeight: 500,
+                textTransform: 'uppercase',
+                letterSpacing: '1px',
+              }}
+            >
               Severity
             </div>
             <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
-              {SEVERITIES.map(sev => (
+              {SEVERITIES.map((sev) => (
                 <button
                   key={sev}
                   onClick={() => toggleSeverity(sev)}
@@ -242,8 +267,12 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
                     fontWeight: 500,
                     cursor: 'pointer',
                     border: `1px solid ${selectedSeverities.includes(sev) ? SEVERITY_COLORS[sev].border : 'var(--border)'}`,
-                    background: selectedSeverities.includes(sev) ? SEVERITY_COLORS[sev].bg : 'var(--bg-canvas)',
-                    color: selectedSeverities.includes(sev) ? SEVERITY_COLORS[sev].color : 'var(--text-muted)',
+                    background: selectedSeverities.includes(sev)
+                      ? SEVERITY_COLORS[sev].bg
+                      : 'var(--bg-canvas)',
+                    color: selectedSeverities.includes(sev)
+                      ? SEVERITY_COLORS[sev].color
+                      : 'var(--text-muted)',
                     transition: 'var(--transition)',
                     fontFamily: 'var(--font-mono)',
                     textTransform: 'uppercase',
@@ -256,11 +285,20 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
           </div>
 
           <div>
-            <div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: '6px', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '1px' }}>
+            <div
+              style={{
+                fontSize: '11px',
+                color: 'var(--text-muted)',
+                marginBottom: '6px',
+                fontWeight: 500,
+                textTransform: 'uppercase',
+                letterSpacing: '1px',
+              }}
+            >
               Category
             </div>
             <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
-              {CATEGORIES.map(cat => (
+              {CATEGORIES.map((cat) => (
                 <button
                   key={cat}
                   onClick={() => toggleCategory(cat)}
@@ -271,7 +309,9 @@ const FilterBar = ({ onFilterChange }: FilterBarProps) => {
                     fontWeight: 500,
                     cursor: 'pointer',
                     border: `1px solid ${selectedCategories.includes(cat) ? 'var(--cyan)' : 'var(--border)'}`,
-                    background: selectedCategories.includes(cat) ? 'var(--cyan-glow-sm)' : 'var(--bg-canvas)',
+                    background: selectedCategories.includes(cat)
+                      ? 'var(--cyan-glow-sm)'
+                      : 'var(--bg-canvas)',
                     color: selectedCategories.includes(cat) ? 'var(--cyan)' : 'var(--text-muted)',
                     transition: 'var(--transition)',
                     textTransform: 'capitalize',
@@ -297,7 +337,11 @@ export default function AuditLog() {
   const listRef = useRef<HTMLDivElement>(null);
 
   // Table presets for audit log
-  const auditPresets = useTablePresets('audit-log', ['severity', 'category', 'action', 'timestamp'], 'comfortable');
+  const auditPresets = useTablePresets(
+    'audit-log',
+    ['severity', 'category', 'action', 'timestamp'],
+    'comfortable'
+  );
 
   useEffect(() => {
     async function fetchLogs() {
@@ -321,7 +365,7 @@ export default function AuditLog() {
     if (filters.search) {
       const q = filters.search.toLowerCase();
       return (
-        entry.message.toLowerCase().includes(q) ||
+        entry.action.toLowerCase().includes(q) ||
         entry.category.toLowerCase().includes(q) ||
         entry.severity.toLowerCase().includes(q)
       );
@@ -333,16 +377,16 @@ export default function AuditLog() {
 
   const handleExportCsv = useCallback(() => {
     const headers = ['Severity', 'Category', 'Action', 'Timestamp'];
-    const rows = filteredLogs.map(log => [
+    const rows = filteredLogs.map((log) => [
       log.severity,
       log.category,
       log.action,
-      new Date(log.timestamp).toISOString()
+      new Date(log.timestamp).toISOString(),
     ]);
 
     const csvContent = [
       headers.join(','),
-      ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
+      ...rows.map((row) => row.map((cell) => `"${cell}"`).join(',')),
     ].join('\n');
 
     const blob = new Blob([csvContent], { type: 'text/csv' });
@@ -361,7 +405,14 @@ export default function AuditLog() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
       <div>
-        <div style={{ fontFamily: 'var(--font-display)', fontSize: '22px', fontWeight: 700, marginBottom: '8px' }}>
+        <div
+          style={{
+            fontFamily: 'var(--font-display)',
+            fontSize: '22px',
+            fontWeight: 700,
+            marginBottom: '8px',
+          }}
+        >
           Audit Log
         </div>
         <p style={{ fontSize: '13px', color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>
@@ -410,109 +461,153 @@ export default function AuditLog() {
 
       <FilterBar onFilterChange={(f: FilterState) => setFilters(f)} />
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: '14px' }}>
-      <EnhancedTable
-        columns={AUDIT_LOG_COLUMNS}
-        visibleColumns={auditPresets.visibleColumns}
-        onVisibleColumnsChange={auditPresets.setVisibleColumns}
-        density={auditPresets.density}
-        onDensityChange={auditPresets.setDensity}
-        presets={auditPresets.presets}
-        onPresetSave={auditPresets.onPresetSave}
-        onPresetDelete={auditPresets.onPresetDelete}
-        onPresetApply={auditPresets.onPresetApply}
-        stickyHeader={true}
-        maxHeight="600px"
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
+          gap: '16px',
+          alignItems: 'start',
+        }}
       >
-        <div style={{
-          padding: '10px 14px',
-          borderBottom: '1px solid var(--border)',
-          fontSize: '12px',
-          color: 'var(--text-muted)',
-          display: 'flex',
-          justifyContent: 'space-between',
-          background: 'var(--bg-card)',
-        }}>
-          <span>{filteredLogs.length} entries</span>
-          <span>{logs.length} total</span>
-        </div>
-        {isLoading ? (
-          <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>
-            Loading audit log...
-          </div>
-        ) : filteredLogs.length === 0 ? (
-          <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>
-            {logs.length === 0 ? 'No audit entries yet.' : 'No entries match the current filters.'}
+        <EnhancedTable
+          columns={AUDIT_LOG_COLUMNS}
+          visibleColumns={auditPresets.visibleColumns}
+          onVisibleColumnsChange={auditPresets.setVisibleColumns}
+          density={auditPresets.density}
+          onDensityChange={auditPresets.setDensity}
+          presets={auditPresets.presets}
+          onPresetSave={auditPresets.onPresetSave}
+          onPresetDelete={auditPresets.onPresetDelete}
+          onPresetApply={auditPresets.onPresetApply}
+          stickyHeader={true}
+          maxHeight="600px"
+        >
+          <div
+            style={{
+              padding: '10px 14px',
+              borderBottom: '1px solid var(--border)',
+              fontSize: '12px',
+              color: 'var(--text-muted)',
+              display: 'flex',
+              justifyContent: 'space-between',
+              background: 'var(--bg-card)',
+            }}
+          >
+            <span>{filteredLogs.length} entries</span>
+            <span>{logs.length} total</span>
           </div>
-        ) : (
-          filteredLogs.map((entry: AuditEntry) => (
-            <div
-              key={entry.id}
-              onClick={() => setSelectedId(entry.id)}
-              style={{
-                display: 'grid',
-                gridTemplateColumns: auditPresets.visibleColumns.map((id) => {
-                  const col = AUDIT_LOG_COLUMNS.find((c) => c.id === id);
-                  return col?.width || '1fr';
-                }).join(' '),
-                gap: '12px',
-                padding: auditPresets.density === 'compact' ? '8px 12px' : auditPresets.density === 'comfortable' ? '10px 14px' : '12px 16px',
-                borderBottom: '1px solid var(--border)',
-                cursor: 'pointer',
-                background: selectedId === entry.id ? 'var(--cyan-glow-sm)' : 'transparent',
-                transition: 'var(--transition)',
-                alignItems: 'center',
-                fontSize: auditPresets.density === 'compact' ? '11px' : auditPresets.density === 'comfortable' ? '12px' : '13px',
-              }}
-            >
-              {auditPresets.visibleColumns.includes('severity') && (
-                <SeverityBadge severity={entry.severity} />
-              )}
-              {auditPresets.visibleColumns.includes('category') && (
-                <div style={{
-                  color: 'var(--text-muted)',
-                  fontSize: auditPresets.density === 'compact' ? '10px' : auditPresets.density === 'comfortable' ? '11px' : '12px',
-                  fontFamily: 'var(--font-mono)',
-                  textTransform: 'capitalize',
-                }}>
-                  {entry.category}
-                </div>
-              )}
-              {auditPresets.visibleColumns.includes('action') && (
-                <div style={{
-                  color: 'var(--text-primary)',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  fontFamily: 'var(--font-mono)',
-                }}>
-                  {entry.action}
-                </div>
-              )}
-              {auditPresets.visibleColumns.includes('timestamp') && (
-                <div style={{
-                  color: 'var(--text-muted)',
-                  fontSize: auditPresets.density === 'compact' ? '10px' : auditPresets.density === 'comfortable' ? '11px' : '12px',
-                  fontFamily: 'var(--font-mono)',
-                  textAlign: 'right',
-                }}>
-                  {formatDistanceToNow(new Date(entry.timestamp), { addSuffix: true })}
-                </div>
-              )}
+          {isLoading ? (
+            <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>
+              Loading audit log...
+            </div>
+          ) : filteredLogs.length === 0 ? (
+            <div style={{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)' }}>
+              {logs.length === 0
+                ? 'No audit entries yet.'
+                : 'No entries match the current filters.'}
             </div>
-          ))
-        )}
-      </EnhancedTable>
-
-      <div className="card" style={{
-          background: 'var(--bg-elevated)',
-          border: '1px solid var(--border)',
-          borderRadius: 'var(--radius-md)',
-          padding: '16px',
-        }}>
+          ) : (
+            filteredLogs.map((entry: AuditEntry) => (
+              <div
+                key={entry.id}
+                onClick={() => setSelectedId(entry.id)}
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: auditPresets.visibleColumns
+                    .map((id) => {
+                      const col = AUDIT_LOG_COLUMNS.find((c) => c.id === id);
+                      return col?.width || '1fr';
+                    })
+                    .join(' '),
+                  gap: '12px',
+                  padding:
+                    auditPresets.density === 'compact'
+                      ? '8px 12px'
+                      : auditPresets.density === 'comfortable'
+                        ? '10px 14px'
+                        : '12px 16px',
+                  borderBottom: '1px solid var(--border)',
+                  cursor: 'pointer',
+                  background: selectedId === entry.id ? 'var(--cyan-glow-sm)' : 'transparent',
+                  transition: 'var(--transition)',
+                  alignItems: 'center',
+                  fontSize:
+                    auditPresets.density === 'compact'
+                      ? '11px'
+                      : auditPresets.density === 'comfortable'
+                        ? '12px'
+                        : '13px',
+                }}
+              >
+                {auditPresets.visibleColumns.includes('severity') && (
+                  <SeverityBadge severity={entry.severity} />
+                )}
+                {auditPresets.visibleColumns.includes('category') && (
+                  <div
+                    style={{
+                      color: 'var(--text-muted)',
+                      fontSize:
+                        auditPresets.density === 'compact'
+                          ? '10px'
+                          : auditPresets.density === 'comfortable'
+                            ? '11px'
+                            : '12px',
+                      fontFamily: 'var(--font-mono)',
+                      textTransform: 'capitalize',
+                    }}
+                  >
+                    {entry.category}
+                  </div>
+                )}
+                {auditPresets.visibleColumns.includes('action') && (
+                  <div
+                    style={{
+                      color: 'var(--text-primary)',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                      fontFamily: 'var(--font-mono)',
+                    }}
+                  >
+                    {entry.action}
+                  </div>
+                )}
+                {auditPresets.visibleColumns.includes('timestamp') && (
+                  <div
+                    style={{
+                      color: 'var(--text-muted)',
+                      fontSize:
+                        auditPresets.density === 'compact'
+                          ? '10px'
+                          : auditPresets.density === 'comfortable'
+                            ? '11px'
+                            : '12px',
+                      fontFamily: 'var(--font-mono)',
+                      textAlign: 'right',
+                    }}
+                  >
+                    {formatDistanceToNow(new Date(entry.timestamp), { addSuffix: true })}
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </EnhancedTable>
+
+        <div
+          className="card"
+          style={{
+            background: 'var(--bg-elevated)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius-md)',
+            padding: '16px',
+          }}
+        >
           {selectedEntry ? (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+              <div
+                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
+              >
                 <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>
                   Entry Details
                 </div>
@@ -533,52 +628,120 @@ export default function AuditLog() {
 
               <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                 <div>
-                  <div style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '2px' }}>Severity</div>
+                  <div
+                    style={{
+                      fontSize: '10px',
+                      color: 'var(--text-muted)',
+                      textTransform: 'uppercase',
+                      letterSpacing: '1px',
+                      marginBottom: '2px',
+                    }}
+                  >
+                    Severity
+                  </div>
                   <SeverityBadge severity={selectedEntry.severity} />
                 </div>
                 <div>
-                  <div style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '2px' }}>Category</div>
-                  <div style={{ fontSize: '13px', color: 'var(--text-primary)', fontFamily: 'var(--font-mono)' }}>{selectedEntry.category}</div>
+                  <div
+                    style={{
+                      fontSize: '10px',
+                      color: 'var(--text-muted)',
+                      textTransform: 'uppercase',
+                      letterSpacing: '1px',
+                      marginBottom: '2px',
+                    }}
+                  >
+                    Category
+                  </div>
+                  <div
+                    style={{
+                      fontSize: '13px',
+                      color: 'var(--text-primary)',
+                      fontFamily: 'var(--font-mono)',
+                    }}
+                  >
+                    {selectedEntry.category}
+                  </div>
                 </div>
                 <div>
-                  <div style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '2px' }}>Timestamp</div>
-                  <div style={{ fontSize: '12px', color: 'var(--text-primary)', fontFamily: 'var(--font-mono)' }}>
+                  <div
+                    style={{
+                      fontSize: '10px',
+                      color: 'var(--text-muted)',
+                      textTransform: 'uppercase',
+                      letterSpacing: '1px',
+                      marginBottom: '2px',
+                    }}
+                  >
+                    Timestamp
+                  </div>
+                  <div
+                    style={{
+                      fontSize: '12px',
+                      color: 'var(--text-primary)',
+                      fontFamily: 'var(--font-mono)',
+                    }}
+                  >
                     {new Date(selectedEntry.timestamp).toLocaleString()}
                   </div>
                 </div>
                 <div>
-                  <div style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '2px' }}>Message</div>
-                  <div style={{
-                    fontSize: '13px',
-                    color: 'var(--text-primary)',
-                    fontFamily: 'var(--font-mono)',
-                    background: 'var(--bg-canvas)',
-                    padding: '8px 10px',
-                    borderRadius: 'var(--radius-sm)',
-                    border: '1px solid var(--border)',
-                    lineHeight: 1.5,
-                    wordBreak: 'break-word',
-                  }}>
-                    {selectedEntry.message}
-                  </div>
-                </div>
-                {selectedEntry.metadata && Object.keys(selectedEntry.metadata).length > 0 && (
-                  <div>
-                    <div style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '2px' }}>Metadata</div>
-                    <pre style={{
-                      fontSize: '11px',
+                  <div
+                    style={{
+                      fontSize: '10px',
                       color: 'var(--text-muted)',
+                      textTransform: 'uppercase',
+                      letterSpacing: '1px',
+                      marginBottom: '2px',
+                    }}
+                  >
+                    Action
+                  </div>
+                  <div
+                    style={{
+                      fontSize: '13px',
+                      color: 'var(--text-primary)',
                       fontFamily: 'var(--font-mono)',
                       background: 'var(--bg-canvas)',
                       padding: '8px 10px',
                       borderRadius: 'var(--radius-sm)',
                       border: '1px solid var(--border)',
-                      maxHeight: '200px',
-                      overflow: 'auto',
-                      margin: 0,
-                      whiteSpace: 'pre-wrap',
+                      lineHeight: 1.5,
                       wordBreak: 'break-word',
-                    }}>
+                    }}
+                  >
+                    {selectedEntry.action}
+                  </div>
+                </div>
+                {selectedEntry.metadata && Object.keys(selectedEntry.metadata).length > 0 && (
+                  <div>
+                    <div
+                      style={{
+                        fontSize: '10px',
+                        color: 'var(--text-muted)',
+                        textTransform: 'uppercase',
+                        letterSpacing: '1px',
+                        marginBottom: '2px',
+                      }}
+                    >
+                      Metadata
+                    </div>
+                    <pre
+                      style={{
+                        fontSize: '11px',
+                        color: 'var(--text-muted)',
+                        fontFamily: 'var(--font-mono)',
+                        background: 'var(--bg-canvas)',
+                        padding: '8px 10px',
+                        borderRadius: 'var(--radius-sm)',
+                        border: '1px solid var(--border)',
+                        maxHeight: '200px',
+                        overflow: 'auto',
+                        margin: 0,
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                      }}
+                    >
                       {JSON.stringify(selectedEntry.metadata, null, 2)}
                     </pre>
                   </div>
@@ -586,8 +749,18 @@ export default function AuditLog() {
               </div>
             </div>
           ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', color: 'var(--text-muted)', textAlign: 'center' }}>
-              <div style={{ fontSize: '28px', marginBottom: '8px', opacity: 0.4 }}>{'\uD83D\uDCCB'}</div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: 'var(--text-muted)',
+                textAlign: 'center',
+              }}
+            >
+              <div style={{ fontSize: '28px', marginBottom: '8px', opacity: 0.4 }}>📋</div>
               <div style={{ fontSize: '13px' }}>Select an entry to view details</div>
             </div>
           )}
diff --git a/src/components/dashboard/FeatureFlags.tsx b/src/components/dashboard/FeatureFlags.tsx
index 7f68e37e..e8f1235c 100644
--- a/src/components/dashboard/FeatureFlags.tsx
+++ b/src/components/dashboard/FeatureFlags.tsx
@@ -13,12 +13,7 @@ import {
   type FeatureFlagStatus,
 } from '../../lib/featureFlagLifecycle';
 
-const ENVIRONMENTS: FeatureFlagEnvironment[] = [
-  'development',
-  'staging',
-  'production',
-  'test',
-];
+const ENVIRONMENTS: FeatureFlagEnvironment[] = ['development', 'staging', 'production', 'test'];
 
 const STATUS_COLOR: Record<FeatureFlagStatus, string> = {
   draft: 'var(--text-muted)',
@@ -80,6 +75,69 @@ export default function FeatureFlags() {
   });
   const [message, setMessage] = useState<{ type: 'ok' | 'err'; text: string } | null>(null);
   const [evalResult, setEvalResult] = useState<string>('');
+  const [remoteAIEnabled, setRemoteAIEnabled] = useState<boolean | null>(null);
+  const [operatorToken, setOperatorToken] = useState('');
+  const [aiReason, setAIReason] = useState('');
+  const [aiControlBusy, setAIControlBusy] = useState(false);
+  const [aiControlMessage, setAIControlMessage] = useState('');
+  const [remoteAudit, setRemoteAudit] = useState<
+    Array<{
+      enabled: boolean;
+      previousEnabled: boolean;
+      updatedAt: string;
+      actor: string;
+      reason: string;
+    }>
+  >([]);
+
+  const refreshAIControl = useCallback(async () => {
+    try {
+      const [statusResponse, auditResponse] = await Promise.all([
+        fetch('/api/v1/ai-controls', { cache: 'no-store' }),
+        fetch('/api/v1/ai-controls/audit', { cache: 'no-store' }),
+      ]);
+      if (!statusResponse.ok || !auditResponse.ok)
+        throw new Error('Runtime controls unavailable; check API and shared-store configuration.');
+      const status = await statusResponse.json();
+      const auditPayload = await auditResponse.json();
+      if (typeof status?.data?.enabled !== 'boolean' || !Array.isArray(auditPayload?.data))
+        throw new Error('Invalid runtime control response.');
+      setRemoteAIEnabled(status.data.enabled);
+      setRemoteAudit(auditPayload.data);
+      setAIControlMessage('');
+    } catch (error) {
+      setRemoteAIEnabled(null);
+      setAIControlMessage(error instanceof Error ? error.message : 'Runtime controls unavailable.');
+    }
+  }, []);
+
+  React.useEffect(() => {
+    void refreshAIControl();
+  }, [refreshAIControl]);
+
+  const setGlobalAIEnabled = async (enabled: boolean) => {
+    setAIControlBusy(true);
+    setAIControlMessage('');
+    try {
+      const response = await fetch('/api/v1/ai-controls', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${operatorToken}` },
+        body: JSON.stringify({ enabled, reason: aiReason }),
+      });
+      const payload = await response.json();
+      if (!response.ok)
+        throw new Error(payload?.message || `Control update failed (${response.status}).`);
+      setRemoteAIEnabled(payload.data.enabled);
+      setOperatorToken('');
+      setAIReason('');
+      setAIControlMessage(`Global AI panels ${enabled ? 'enabled' : 'disabled'}.`);
+      await refreshAIControl();
+    } catch (error) {
+      setAIControlMessage(error instanceof Error ? error.message : 'Control update failed.');
+    } finally {
+      setAIControlBusy(false);
+    }
+  };
 
   const inputStyle: React.CSSProperties = {
     background: 'var(--bg-input)',
@@ -143,7 +201,7 @@ export default function FeatureFlags() {
             .map((s) => s.trim())
             .filter(Boolean),
         },
-        'dashboard-ui',
+        'dashboard-ui'
       );
       setMessage({ type: 'ok', text: `Created draft flag "${flag.key}"` });
       setForm({
@@ -182,7 +240,7 @@ export default function FeatureFlags() {
       });
       setEvalResult(
         `${result.enabled ? 'ENABLED' : 'DISABLED'} — ${result.reason}` +
-          (result.flag ? ` [${result.flag.status}]` : ''),
+          (result.flag ? ` [${result.flag.status}]` : '')
       );
       refresh();
     } catch (err) {
@@ -210,6 +268,108 @@ export default function FeatureFlags() {
         </div>
       </div>
 
+      <Card title="Global AI panel kill switch">
+        <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
+          <div
+            role="status"
+            aria-live="polite"
+            style={{
+              color:
+                remoteAIEnabled === null
+                  ? 'var(--amber)'
+                  : remoteAIEnabled
+                    ? 'var(--green)'
+                    : 'var(--red)',
+            }}
+          >
+            {remoteAIEnabled === null
+              ? 'Status unavailable (panels fail closed)'
+              : `AI panels ${remoteAIEnabled ? 'enabled' : 'disabled'}`}
+          </div>
+          <p style={{ margin: 0, fontSize: 12, color: 'var(--text-muted)' }}>
+            This server-controlled switch applies globally without redeploying. Enter the configured
+            operator token to change it; credentials are held only in this form and are never
+            stored.
+          </p>
+          <input
+            type="password"
+            autoComplete="off"
+            style={inputStyle}
+            placeholder="Operator token"
+            aria-label="Operator token"
+            value={operatorToken}
+            onChange={(event) => setOperatorToken(event.target.value)}
+          />
+          <input
+            style={inputStyle}
+            maxLength={240}
+            placeholder="Reason for audit history (optional)"
+            aria-label="Reason for AI control change"
+            value={aiReason}
+            onChange={(event) => setAIReason(event.target.value)}
+          />
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button
+              type="button"
+              style={btnStyle()}
+              disabled={aiControlBusy || !operatorToken || remoteAIEnabled === false}
+              onClick={() => void setGlobalAIEnabled(false)}
+            >
+              Disable all AI panels
+            </button>
+            <button
+              type="button"
+              style={btnStyle(true)}
+              disabled={aiControlBusy || !operatorToken || remoteAIEnabled === true}
+              onClick={() => void setGlobalAIEnabled(true)}
+            >
+              Re-enable AI panels
+            </button>
+            <button type="button" style={btnStyle()} onClick={() => void refreshAIControl()}>
+              Refresh status
+            </button>
+          </div>
+          {aiControlMessage && (
+            <div
+              role="status"
+              aria-live="polite"
+              style={{
+                fontSize: 12,
+                color:
+                  aiControlMessage.includes('unavailable') || aiControlMessage.includes('failed')
+                    ? 'var(--red)'
+                    : 'var(--text-muted)',
+              }}
+            >
+              {aiControlMessage}
+            </div>
+          )}
+          {remoteAudit.length > 0 && (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 5,
+                fontSize: 11,
+                color: 'var(--text-muted)',
+              }}
+            >
+              <strong>Recent global switch changes</strong>
+              {remoteAudit.slice(0, 10).map((entry, index) => (
+                <div key={`${entry.updatedAt}-${index}`}>
+                  {new Date(entry.updatedAt).toLocaleString()} ·{' '}
+                  {entry.previousEnabled ? 'enabled' : 'disabled'} →{' '}
+                  {entry.enabled ? 'enabled' : 'disabled'} · {entry.actor}
+                  {entry.reason ? ` · ${entry.reason}` : ''}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </Card>
+
+      <div style={{ height: 16 }} />
+
       {message && (
         <div
           style={{
@@ -218,8 +378,7 @@ export default function FeatureFlags() {
             borderRadius: 'var(--radius-sm)',
             fontSize: 12,
             border: `1px solid ${message.type === 'ok' ? 'var(--green)' : 'var(--red)'}`,
-            background:
-              message.type === 'ok' ? 'var(--green-glow-sm)' : 'var(--red-glow-sm, #311)',
+            background: message.type === 'ok' ? 'var(--green-glow-sm)' : 'var(--red-glow-sm, #311)',
             color: message.type === 'ok' ? 'var(--green)' : 'var(--red)',
           }}
         >
diff --git a/src/components/dashboard/LiquidityPredictionDashboard.tsx b/src/components/dashboard/LiquidityPredictionDashboard.tsx
index 02f5efbb..bdfa2602 100644
--- a/src/components/dashboard/LiquidityPredictionDashboard.tsx
+++ b/src/components/dashboard/LiquidityPredictionDashboard.tsx
@@ -1,21 +1,13 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Brain,
   TrendingUp,
-  AlertTriangle,
   Zap,
   RefreshCw,
   Sliders,
   CheckCircle2,
   ShieldAlert,
-  ArrowRightLeft,
-  Clock,
-  Layers,
   Activity,
-  Maximize2,
-  ArrowUpRight,
-  ArrowDownRight,
-  Info,
 } from 'lucide-react';
 import {
   ResponsiveContainer,
@@ -26,9 +18,9 @@ import {
   Tooltip,
   CartesianGrid,
   Legend,
-  ReferenceLine,
 } from 'recharts';
 import { useStore } from '../../lib/store';
+import { useAIKillSwitch } from '../../context/AIKillSwitchContext';
 import {
   predictLiquidityFlow,
   PredictionResult,
@@ -36,6 +28,7 @@ import {
 } from '../../ml/liquidityPredictionModel';
 
 export default function LiquidityPredictionDashboard() {
+  const { enabled, ready } = useAIKillSwitch();
   const { network } = useStore();
   const [sellingAsset, setSellingAsset] = useState<string>('native');
   const [buyingAsset, setBuyingAsset] = useState<string>(
@@ -49,42 +42,44 @@ export default function LiquidityPredictionDashboard() {
   const [selectedStrategy, setSelectedStrategy] = useState<TradingRecommendation | null>(null);
   const [appliedNotice, setAppliedNotice] = useState<string | null>(null);
 
-  async function fetchPrediction() {
+  const fetchPrediction = useCallback(async () => {
+    if (!enabled || !ready) return;
     setLoading(true);
     try {
       const result = await predictLiquidityFlow(sellingAsset, buyingAsset, {
         horizonHours,
         tradeAmount,
-        network,
+        network: network.networkId,
       });
       setData(result);
-      if (result.recommendations.length > 0 && !selectedStrategy) {
-        setSelectedStrategy(result.recommendations[0]);
+      const firstRecommendation = result.recommendations[0];
+      if (firstRecommendation) {
+        setSelectedStrategy((current) => current ?? firstRecommendation);
       }
     } catch (err) {
       console.error('Failed to load liquidity prediction:', err);
     } finally {
       setLoading(false);
     }
-  }
+  }, [enabled, ready, sellingAsset, buyingAsset, horizonHours, tradeAmount, network.networkId]);
 
   useEffect(() => {
-    fetchPrediction();
-  }, [sellingAsset, buyingAsset, horizonHours, tradeAmount, network]);
+    if (enabled && ready) fetchPrediction();
+  }, [enabled, ready, fetchPrediction]);
 
   useEffect(() => {
-    if (!autoRefresh) return;
+    if (!autoRefresh || !enabled || !ready) return;
     const interval = setInterval(() => {
       fetchPrediction();
     }, 15000);
     return () => clearInterval(interval);
-  }, [autoRefresh, sellingAsset, buyingAsset, horizonHours, tradeAmount, network]);
+  }, [autoRefresh, enabled, ready, fetchPrediction]);
+
+  if (!enabled || !ready) return null;
 
   const applyStrategy = (strategy: TradingRecommendation) => {
     setSelectedStrategy(strategy);
-    setAppliedNotice(
-      `Applied Strategy: ${strategy.title}. Parameters updated for DEX execution.`
-    );
+    setAppliedNotice(`Applied Strategy: ${strategy.title}. Parameters updated for DEX execution.`);
     setTimeout(() => setAppliedNotice(null), 4000);
   };
 
@@ -221,7 +216,9 @@ export default function LiquidityPredictionDashboard() {
         }}
       >
         <label style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-          <span style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+          <span
+            style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+          >
             Selling Asset
           </span>
           <input
@@ -241,7 +238,9 @@ export default function LiquidityPredictionDashboard() {
         </label>
 
         <label style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-          <span style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+          <span
+            style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+          >
             Buying Asset
           </span>
           <input
@@ -261,7 +260,9 @@ export default function LiquidityPredictionDashboard() {
         </label>
 
         <label style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-          <span style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+          <span
+            style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+          >
             Forecast Horizon
           </span>
           <select
@@ -285,7 +286,9 @@ export default function LiquidityPredictionDashboard() {
         </label>
 
         <label style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-          <span style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+          <span
+            style={{ fontSize: '10px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+          >
             Simulated Trade Size (XLM)
           </span>
           <input
@@ -308,7 +311,13 @@ export default function LiquidityPredictionDashboard() {
 
       {/* Model Accuracy & Overview Stats Cards */}
       {data && (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: '12px' }}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))',
+            gap: '12px',
+          }}
+        >
           {/* Card 1: 1h Forecast Accuracy Target */}
           <div
             style={{
@@ -322,7 +331,9 @@ export default function LiquidityPredictionDashboard() {
             }}
           >
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-              <span style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+              <span
+                style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+              >
                 1h Forecast Model Accuracy
               </span>
               <span
@@ -372,7 +383,9 @@ export default function LiquidityPredictionDashboard() {
               justifyContent: 'space-between',
             }}
           >
-            <span style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+            <span
+              style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+            >
               Order Book Depth & Bias
             </span>
             <div style={{ marginTop: '10px', display: 'flex', alignItems: 'baseline', gap: '8px' }}>
@@ -387,9 +400,20 @@ export default function LiquidityPredictionDashboard() {
                 {(data.metrics.totalBidDepth + data.metrics.totalAskDepth).toLocaleString()} XLM
               </span>
             </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px', marginTop: '6px' }}>
-              <span style={{ color: 'var(--green)' }}>Bids: {data.metrics.totalBidDepth.toLocaleString()}</span>
-              <span style={{ color: 'var(--red)' }}>Asks: {data.metrics.totalAskDepth.toLocaleString()}</span>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                fontSize: '11px',
+                marginTop: '6px',
+              }}
+            >
+              <span style={{ color: 'var(--green)' }}>
+                Bids: {data.metrics.totalBidDepth.toLocaleString()}
+              </span>
+              <span style={{ color: 'var(--red)' }}>
+                Asks: {data.metrics.totalAskDepth.toLocaleString()}
+              </span>
             </div>
           </div>
 
@@ -405,7 +429,9 @@ export default function LiquidityPredictionDashboard() {
               justifyContent: 'space-between',
             }}
           >
-            <span style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+            <span
+              style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+            >
               Large Trade Impact Risk
             </span>
             <div style={{ marginTop: '10px', display: 'flex', alignItems: 'baseline', gap: '8px' }}>
@@ -447,7 +473,9 @@ export default function LiquidityPredictionDashboard() {
               justifyContent: 'space-between',
             }}
           >
-            <span style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}>
+            <span
+              style={{ fontSize: '11px', color: 'var(--text-muted)', textTransform: 'uppercase' }}
+            >
               Spread & Buy Volume Ratio
             </span>
             <div style={{ marginTop: '10px', display: 'flex', alignItems: 'baseline', gap: '8px' }}>
@@ -466,7 +494,8 @@ export default function LiquidityPredictionDashboard() {
               </span>
             </div>
             <div style={{ fontSize: '10px', color: 'var(--text-muted)', marginTop: '6px' }}>
-              VWAP: {data.metrics.vwap} | 24h Vol: {data.metrics.tradeVolume24h.toLocaleString()} XLM
+              VWAP: {data.metrics.vwap} | 24h Vol: {data.metrics.tradeVolume24h.toLocaleString()}{' '}
+              XLM
             </div>
           </div>
         </div>
@@ -505,14 +534,23 @@ export default function LiquidityPredictionDashboard() {
                 <TrendingUp size={18} style={{ color: 'var(--cyan)' }} />
                 Real-Time Liquidity Depth Forecast ({data.pair} - {horizonHours}h Horizon)
               </div>
-              <div style={{ fontSize: '11px', color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
+              <div
+                style={{
+                  fontSize: '11px',
+                  color: 'var(--text-muted)',
+                  fontFamily: 'var(--font-mono)',
+                }}
+              >
                 Predictive depth trajectory (Bids vs Asks) with 95% AI Confidence Bands
               </div>
             </div>
           </div>
 
           <ResponsiveContainer width="100%" height={280}>
-            <AreaChart data={data.forecastSeries} margin={{ top: 10, right: 20, left: 0, bottom: 0 }}>
+            <AreaChart
+              data={data.forecastSeries}
+              margin={{ top: 10, right: 20, left: 0, bottom: 0 }}
+            >
               <defs>
                 <linearGradient id="bidGradient" x1="0" y1="0" x2="0" y2="1">
                   <stop offset="5%" stopColor="#10b981" stopOpacity={0.4} />
@@ -561,7 +599,13 @@ export default function LiquidityPredictionDashboard() {
 
       {/* Grid: Liquidity Alerts & Large Trade Simulator */}
       {data && (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '14px' }}>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
+            gap: '14px',
+          }}
+        >
           {/* Active Liquidity Alerts */}
           <div
             style={{
@@ -601,8 +645,8 @@ export default function LiquidityPredictionDashboard() {
                         alert.severity === 'high'
                           ? 'var(--red, #ef4444)'
                           : alert.severity === 'medium'
-                          ? 'var(--amber, #f59e0b)'
-                          : 'var(--border)'
+                            ? 'var(--amber, #f59e0b)'
+                            : 'var(--border)'
                       }`,
                       borderRadius: 'var(--radius-md)',
                       padding: '10px 12px',
@@ -635,7 +679,9 @@ export default function LiquidityPredictionDashboard() {
                         {alert.timestamp}
                       </span>
                     </div>
-                    <div style={{ fontSize: '11px', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
+                    <div
+                      style={{ fontSize: '11px', color: 'var(--text-secondary)', lineHeight: 1.4 }}
+                    >
                       {alert.description}
                     </div>
                     <div
@@ -690,7 +736,9 @@ export default function LiquidityPredictionDashboard() {
                 }}
               >
                 <div>
-                  <div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>PREDICTED SLIPPAGE</div>
+                  <div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>
+                    PREDICTED SLIPPAGE
+                  </div>
                   <div
                     style={{
                       fontSize: '18px',
@@ -707,7 +755,9 @@ export default function LiquidityPredictionDashboard() {
                 </div>
 
                 <div>
-                  <div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>EST. ABSORPTION TIME</div>
+                  <div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>
+                    EST. ABSORPTION TIME
+                  </div>
                   <div
                     style={{
                       fontSize: '18px',
@@ -746,7 +796,8 @@ export default function LiquidityPredictionDashboard() {
                     color: getRiskBadgeColor(data.largeTradeAnalysis.riskLevel),
                   }}
                 >
-                  {data.largeTradeAnalysis.riskLevel} ({data.largeTradeAnalysis.whaleImpactScore}/100)
+                  {data.largeTradeAnalysis.riskLevel} ({data.largeTradeAnalysis.whaleImpactScore}
+                  /100)
                 </span>
               </div>
             </div>
@@ -787,7 +838,13 @@ export default function LiquidityPredictionDashboard() {
                 <Sliders size={18} style={{ color: 'var(--cyan)' }} />
                 AI Trading Strategy Recommendations
               </div>
-              <div style={{ fontSize: '11px', color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
+              <div
+                style={{
+                  fontSize: '11px',
+                  color: 'var(--text-muted)',
+                  fontFamily: 'var(--font-mono)',
+                }}
+              >
                 Optimized order routing, execution timing, TWAP chunking & slippage protection
               </div>
             </div>
@@ -871,7 +928,9 @@ export default function LiquidityPredictionDashboard() {
                       {rec.actionSummary}
                     </div>
 
-                    <div style={{ fontSize: '11px', color: 'var(--text-secondary)', lineHeight: 1.4 }}>
+                    <div
+                      style={{ fontSize: '11px', color: 'var(--text-secondary)', lineHeight: 1.4 }}
+                    >
                       {rec.detail}
                     </div>
                   </div>
diff --git a/src/components/layout/widgets/DataInsightsWidget.tsx b/src/components/layout/widgets/DataInsightsWidget.tsx
index 7f1d5036..7ad0a621 100644
--- a/src/components/layout/widgets/DataInsightsWidget.tsx
+++ b/src/components/layout/widgets/DataInsightsWidget.tsx
@@ -1,12 +1,14 @@
 import React, { useEffect } from 'react';
 import WidgetBase from './WidgetBase';
 import { useStore } from '../../../lib/store';
+import { useAIKillSwitch } from '../../../context/AIKillSwitchContext';
 
 interface DataInsightsWidgetProps {
   onRefresh?: () => void;
 }
 
 export default function DataInsightsWidget({ onRefresh }: DataInsightsWidgetProps) {
+  const { enabled, ready } = useAIKillSwitch();
   const {
     analytics,
     isGeneratingInsights,
@@ -17,10 +19,12 @@ export default function DataInsightsWidget({ onRefresh }: DataInsightsWidgetProp
   } = useStore();
 
   useEffect(() => {
-    if (connectedAddress && (transactions.length > 0 || operations.length > 0)) {
+    if (enabled && ready && connectedAddress && (transactions.length > 0 || operations.length > 0)) {
       generateDataInsights();
     }
-  }, [connectedAddress, transactions, operations, generateDataInsights]);
+  }, [enabled, ready, connectedAddress, transactions, operations, generateDataInsights]);
+
+  if (!enabled || !ready) return null;
 
   const getSeverityColor = (severity: string) => {
     switch (severity) {
diff --git a/src/context/AIKillSwitchContext.tsx b/src/context/AIKillSwitchContext.tsx
new file mode 100644
index 00000000..84323869
--- /dev/null
+++ b/src/context/AIKillSwitchContext.tsx
@@ -0,0 +1,56 @@
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+
+interface AIKillSwitchContextValue {
+  enabled: boolean;
+  ready: boolean;
+  refresh: () => Promise<void>;
+}
+
+const AIKillSwitchContext = createContext<AIKillSwitchContextValue>({
+  enabled: false,
+  ready: false,
+  refresh: async () => {},
+});
+
+export function AIKillSwitchProvider({ children }: { children: React.ReactNode }) {
+  const [enabled, setEnabled] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  const refresh = useCallback(async () => {
+    try {
+      const response = await fetch('/api/v1/ai-controls', { cache: 'no-store' });
+      if (!response.ok) throw new Error(`AI control status returned ${response.status}`);
+      const payload = await response.json();
+      if (typeof payload?.data?.enabled !== 'boolean') throw new Error('Invalid AI control status');
+      setEnabled(payload.data.enabled);
+      setReady(true);
+    } catch {
+      // Fail closed: panels stay disabled if status cannot be verified.
+      setEnabled(false);
+      setReady(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+    const timer = window.setInterval(() => void refresh(), 10_000);
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') void refresh();
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      window.clearInterval(timer);
+      document.removeEventListener('visibilitychange', onVisible);
+    };
+  }, [refresh]);
+
+  return (
+    <AIKillSwitchContext.Provider value={{ enabled, ready, refresh }}>
+      {children}
+    </AIKillSwitchContext.Provider>
+  );
+}
+
+export function useAIKillSwitch() {
+  return useContext(AIKillSwitchContext);
+}
diff --git a/src/lib/anomalyDetectionPipeline.ts b/src/lib/anomalyDetectionPipeline.ts
index 8352faf4..2832045d 100644
--- a/src/lib/anomalyDetectionPipeline.ts
+++ b/src/lib/anomalyDetectionPipeline.ts
@@ -1,4 +1,4 @@
-import { IsolationForest } from '../ml/isolation_forest.js';
+import { IsolationForest } from './isolationForest.js';
 
 export class AnomalyDetectionPipeline {
   private model: IsolationForest;
diff --git a/src/lib/feePredictor.ts b/src/lib/feePredictor.ts
index e384c6bb..703ce494 100644
--- a/src/lib/feePredictor.ts
+++ b/src/lib/feePredictor.ts
@@ -16,7 +16,7 @@
  * @see capacityPrediction.ts — correlates fee trends with capacity utilization
  */
 
-import { IsolationForest } from '../ml/isolation_forest'
+import { IsolationForest } from './isolationForest'
 import type { StellarTransaction, StellarOperation } from './transactionPatternAnalysis'
 
 // ---- Fee Prediction Models ----
diff --git a/src/lib/isolationForest.ts b/src/lib/isolationForest.ts
new file mode 100644
index 00000000..76c2d55d
--- /dev/null
+++ b/src/lib/isolationForest.ts
@@ -0,0 +1,69 @@
+/** Browser-safe Isolation Forest used by client-side prediction helpers. */
+export class IsolationForest {
+  private trees: Array<{ leaf: boolean; size: number; dimension?: number; split?: number; left?: any; right?: any }> = [];
+
+  constructor(
+    private readonly treeCount = 50,
+    private readonly sampleSize = 256,
+  ) {}
+
+  fit(data: number[][]): void {
+    if (!data.length || !data[0]?.length) {
+      this.trees = [];
+      return;
+    }
+    const heightLimit = Math.ceil(Math.log2(Math.max(2, this.sampleSize)));
+    this.trees = Array.from({ length: this.treeCount }, () => {
+      const sample = data.length <= this.sampleSize
+        ? data
+        : [...data].sort(() => Math.random() - 0.5).slice(0, this.sampleSize);
+      return this.buildTree(sample, heightLimit);
+    });
+  }
+
+  score(features: number[]): number {
+    if (!this.trees.length) return 0;
+    const averagePath = this.trees.reduce((sum, tree) => sum + this.pathLength(features, tree), 0) / this.trees.length;
+    const size = Math.min(this.sampleSize, 256);
+    const normalization = size > 2
+      ? 2 * (Math.log(size - 1) + 0.5772156649) - (2 * (size - 1)) / size
+      : size === 2 ? 1 : 0;
+    return normalization === 0 ? 0 : Math.pow(2, -averagePath / normalization);
+  }
+
+  anomalyScore(features: number[]): number {
+    return this.score(features);
+  }
+
+  private buildTree(data: number[][], heightLimit: number): { leaf: boolean; size: number; dimension?: number; split?: number; left?: any; right?: any } {
+    if (data.length <= 1 || heightLimit <= 0) return { leaf: true, size: data.length };
+    const dimension = Math.floor(Math.random() * data[0].length);
+    const values = data.map((row) => row[dimension]);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    if (min === max) return { leaf: true, size: data.length };
+    const split = min + Math.random() * (max - min);
+    const left = data.filter((row) => row[dimension] < split);
+    const right = data.filter((row) => row[dimension] >= split);
+    return {
+      leaf: false,
+      size: data.length,
+      dimension,
+      split,
+      left: this.buildTree(left, heightLimit - 1),
+      right: this.buildTree(right, heightLimit - 1),
+    };
+  }
+
+  private pathLength(features: number[], tree: { leaf: boolean; size: number; dimension?: number; split?: number; left?: any; right?: any }, depth = 0): number {
+    if (tree.leaf) return depth + this.averagePathLength(tree.size);
+    return features[tree.dimension!] < tree.split!
+      ? this.pathLength(features, tree.left!, depth + 1)
+      : this.pathLength(features, tree.right!, depth + 1);
+  }
+
+  private averagePathLength(size: number): number {
+    if (size <= 1) return 0;
+    return 2 * (Math.log(size - 1) + 0.5772156649 + 1 / (2 * (size - 1))) - 2 * (size - 1) / size;
+  }
+}
\ No newline at end of file
diff --git a/src/routes/DashboardLayout.tsx b/src/routes/DashboardLayout.tsx
index 57e984c9..dc9d67d4 100644
--- a/src/routes/DashboardLayout.tsx
+++ b/src/routes/DashboardLayout.tsx
@@ -1,6 +1,6 @@
 import React, { lazy, Suspense, useEffect, useState, useCallback } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { matchRoute, buildPath, getDocumentTitle, ROUTES_BY_ID, type TabComponent } from './routes';
+import { matchRoute, getDocumentTitle, type TabComponent } from './routes';
 import { getRouteComponent } from './routeComponents';
 import NotFound from './NotFound';
 import Sidebar from '../components/layout/Sidebar';
@@ -53,6 +53,7 @@ import { useWalletSessionListeners } from '../hooks/useWalletSessionListeners';
 import ShareViewButton from '../components/share/ShareViewButton';
 import SharedViewBanner from '../components/share/SharedViewBanner';
 import { useSharedView } from '../hooks/useSharedView';
+import { useAIKillSwitch } from '../context/AIKillSwitchContext';
 import {
   DEMO_MODE_LABEL,
   DEMO_MODE_BADGE,
@@ -108,6 +109,12 @@ function NotificationBell({
 
 export default function DashboardLayout() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const routeMatch = matchRoute(location.pathname);
+  const activeRoute = routeMatch?.route ?? null;
+  const isConnectRoute = location.pathname === '/connect';
+  const sharedView = useSharedView();
+  const demoSummary = getDemoFixtureSummarySafe();
   const {
     connectedAddress,
     activeTab,
@@ -127,6 +134,7 @@ export default function DashboardLayout() {
     exitDemoMode,
   } = useStore() as any;
   const { isMobile, isTablet } = useResponsive();
+  const { enabled: aiEnabled, ready: aiControlReady } = useAIKillSwitch();
   const { level, isNovice, setLevel, updateSignals } = useExpertise();
   const { trackFeatureInteraction } = useExpertiseTracking({ enabled: true });
   const [notificationsOpen, setNotificationsOpen] = useState<boolean>(false);
@@ -222,7 +230,7 @@ export default function DashboardLayout() {
 
   useEffect(() => {
     // v2: full multi-layer cache initialization (warm, prune, SW bridge)
-    initCache(useStore.getState().network as unknown as string, useStore.getState().connectedAddress ?? undefined).catch(
+    initCache(useStore.getState().network.networkId, useStore.getState().connectedAddress ?? undefined).catch(
       () => {}
     );
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -306,6 +314,8 @@ export default function DashboardLayout() {
     : null;
   const txHash = activeRoute?.id === 'transactions' ? routeMatch?.params.hash : undefined;
   const isNotFound = Boolean(connectedAddress) && !routeMatch && !isConnectRoute;
+  const aiPanelRoutes = new Set(['liquidityPrediction', 'pathExplorer', 'personalization', 'txPatterns']);
+  const isDisabledAIPanel = Boolean(activeRoute && aiPanelRoutes.has(activeRoute.id) && (!aiEnabled || !aiControlReady));
 
   const handleRetry = async (): Promise<void> => {
     addBreadcrumb('App-level retry attempted', 'user_action');
@@ -438,6 +448,12 @@ export default function DashboardLayout() {
                   <p>Transaction detail view not available. <a href="/transactions" onClick={(e) => { e.preventDefault(); navigate('/transactions'); }}>View all transactions</a></p>
                 </div>
               </Suspense>
+            ) : isDisabledAIPanel ? (
+              <div role="status" style={{ padding: 24, color: 'var(--text-muted)' }}>
+                {aiControlReady
+                  ? 'AI-assisted panels are temporarily disabled by the operator.'
+                  : 'AI-assisted panels are unavailable because runtime status could not be verified.'}
+              </div>
             ) : ActiveComponent ? (
               <RouteErrorBoundary
                 routeName={activeRoute?.title || activeTab}
@@ -460,7 +476,9 @@ export default function DashboardLayout() {
             this survives every route change below it. */}
         <SubmissionTray />
         <DevToolbar />
-        <PredictiveFeatureSuggestions onNavigate={(tab: string) => navigate(`/${tab}`)} />
+        {aiEnabled && aiControlReady && (
+          <PredictiveFeatureSuggestions onNavigate={(tab: string) => navigate(`/${tab}`)} />
+        )}
         <NotificationBell
           onClick={() => setNotificationsOpen(true)}
           mobile={isMobile}
@@ -469,27 +487,31 @@ export default function DashboardLayout() {
           open={notificationsOpen}
           onClose={() => setNotificationsOpen(false)}
         />
-        <DebugAssistantButton
-          onClick={() => toggleDebugAssistant()}
-          isOpen={debugAssistantOpen}
-          issueCount={debugAssistantIssueCount}
-        />
-        {debugAssistantOpen && <DebugAssistantPanel onClose={() => toggleDebugAssistant()} />}
+        {aiEnabled && aiControlReady && (
+          <>
+            <DebugAssistantButton
+              onClick={() => toggleDebugAssistant()}
+              isOpen={debugAssistantOpen}
+              issueCount={debugAssistantIssueCount}
+            />
+            {debugAssistantOpen && <DebugAssistantPanel onClose={() => toggleDebugAssistant()} />}
+          </>
+        )}
 
         {/* Conversational Navigation Button */}
-        <button
+        {aiEnabled && aiControlReady && <button
           type="button"
           onClick={() => setConversationOpen(!conversationOpen)}
           aria-label={conversationOpen ? 'Close navigation assistant' : 'Open navigation assistant'}
           className={`dashboard-conversation-trigger${conversationOpen ? ' dashboard-conversation-trigger--open' : ''}${isMobile ? ' dashboard-conversation-trigger--mobile' : ''}`}
         >
           <span aria-hidden="true">{conversationOpen ? '✕' : '💬'}</span>
-        </button>
+        </button>}
 
-        <ConversationPanel isOpen={conversationOpen} onClose={() => setConversationOpen(false)} />
+        {aiEnabled && aiControlReady && <ConversationPanel isOpen={conversationOpen} onClose={() => setConversationOpen(false)} />}
 
         {isMobile && <MobileNavigation />}
-        <TipButton />
+        {aiEnabled && aiControlReady && <TipButton />}
         {preferencesOpen && (
           <div
             role="presentation"
diff --git a/tests/api/aiKillSwitch.test.js b/tests/api/aiKillSwitch.test.js
new file mode 100644
index 00000000..5b0bd3cc
--- /dev/null
+++ b/tests/api/aiKillSwitch.test.js
@@ -0,0 +1,135 @@
+/**
+ * @vitest-environment node
+ */
+import { afterAll, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import express from 'express';
+import { createServer } from 'http';
+import { router as aiControlsRouter } from '../../api/routes/aiControls.js';
+import { router as behaviorRouter } from '../../api/routes/behavior.js';
+import {
+  MemoryKillSwitchStore,
+  resetAIKillSwitchStoreForTests,
+  setAIKillSwitchStoreForTests,
+} from '../../api/services/aiKillSwitch.js';
+
+const operatorToken = 'test-operator-token-with-more-than-32-characters';
+let server;
+let baseUrl;
+let store;
+let originalEnvironment;
+
+beforeAll(async () => {
+  originalEnvironment = process.env.NODE_ENV;
+  process.env.NODE_ENV = 'test';
+  process.env.AI_KILL_SWITCH_OPERATOR_TOKEN = operatorToken;
+  const app = express();
+  app.use(express.json());
+  app.use('/api/v1/ai-controls', aiControlsRouter);
+  app.use('/api/v1/behavior', behaviorRouter);
+  server = createServer(app);
+  await new Promise((resolve) => server.listen(0, resolve));
+  baseUrl = `http://127.0.0.1:${server.address().port}/api/v1`;
+});
+
+beforeEach(() => {
+  store = new MemoryKillSwitchStore();
+  setAIKillSwitchStoreForTests(store);
+  process.env.NODE_ENV = 'test';
+});
+
+afterAll(async () => {
+  await new Promise((resolve) => server.close(resolve));
+  resetAIKillSwitchStoreForTests();
+  if (originalEnvironment === undefined) delete process.env.NODE_ENV;
+  else process.env.NODE_ENV = originalEnvironment;
+  delete process.env.AI_KILL_SWITCH_OPERATOR_TOKEN;
+});
+
+async function request(path, options = {}) {
+  const response = await fetch(`${baseUrl}${path}`, options);
+  return { status: response.status, body: await response.json() };
+}
+
+describe('global AI kill switch API', () => {
+  it('updates global state, records an audit event, and disables AI behavior routes', async () => {
+    const updated = await request('/ai-controls', {
+      method: 'PUT',
+      headers: { Authorization: `Bearer ${operatorToken}`, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: false, reason: 'incident response' }),
+    });
+    expect(updated.status).toBe(200);
+    expect(updated.body.data).toMatchObject({
+      enabled: false,
+      updatedBy: 'configured-operator',
+      reason: 'incident response',
+    });
+
+    const current = await request('/ai-controls');
+    expect(current.body.data.enabled).toBe(false);
+    const audit = await request('/ai-controls/audit');
+    expect(audit.body.data[0]).toMatchObject({
+      previousEnabled: true,
+      enabled: false,
+      reason: 'incident response',
+    });
+
+    const behavior = await request('/behavior/predict/intent', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({}),
+    });
+    expect(behavior.status).toBe(503);
+    expect(behavior.body.error).toBe('ai_disabled');
+  });
+
+  it('rejects malformed switch values and overlong reasons', async () => {
+    for (const body of [{ enabled: 'false' }, { enabled: false, reason: 'x'.repeat(241) }]) {
+      const result = await request('/ai-controls', {
+        method: 'PUT',
+        headers: { Authorization: `Bearer ${operatorToken}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      expect(result.status).toBe(400);
+      expect(result.body.error).toBe('invalid_payload');
+    }
+    expect((await request('/ai-controls')).body.data.enabled).toBe(true);
+  });
+
+  it('rejects unauthorized operators and unsupported environments', async () => {
+    const unauthorized = await request('/ai-controls', {
+      method: 'PUT',
+      headers: { Authorization: 'Bearer wrong-token', 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: false }),
+    });
+    expect(unauthorized.status).toBe(403);
+
+    process.env.NODE_ENV = 'staging';
+    const unsupported = await request('/ai-controls', {
+      method: 'PUT',
+      headers: { Authorization: `Bearer ${operatorToken}`, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enabled: false }),
+    });
+    expect(unsupported.status).toBe(503);
+    expect(unsupported.body.error).toBe('unsupported_environment');
+  });
+
+  it('fails closed when the runtime store is unavailable', async () => {
+    setAIKillSwitchStoreForTests({
+      read: async () => {
+        throw new Error('store offline');
+      },
+      update: async () => {
+        throw new Error('store offline');
+      },
+      history: async () => {
+        throw new Error('store offline');
+      },
+    });
+    const status = await request('/ai-controls');
+    expect(status.status).toBe(503);
+    expect(status.body.error).toBe('ai_control_unavailable');
+    const behavior = await request('/behavior/predict/intent', { method: 'POST' });
+    expect(behavior.status).toBe(503);
+    expect(behavior.body.error).toBe('ai_control_unavailable');
+  });
+});
diff --git a/vite.config.js b/vite.config.js
index 83e98694..aed9a949 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { visualizer } from 'rollup-plugin-visualizer'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -30,21 +30,21 @@ export default defineConfig({
       name: 'emit-bundle-module-map',
       apply: 'build',
       generateBundle(_outputOptions, bundle) {
-        const chunks = {}
+        const chunks = {};
         for (const [fileName, output] of Object.entries(bundle)) {
-          if (output.type !== 'chunk') continue
+          if (output.type !== 'chunk') continue;
           chunks[fileName] = {
             name: output.name,
             isEntry: Boolean(output.isEntry),
             isDynamicEntry: Boolean(output.isDynamicEntry),
             moduleIds: Object.keys(output.modules).map((id) => id.replace(/\\/g, '/')),
-          }
+          };
         }
         this.emitFile({
           type: 'asset',
           fileName: 'bundle-modules.json',
           source: JSON.stringify({ generatedAt: new Date().toISOString(), chunks }, null, 2),
-        })
+        });
       },
     },
   ],
@@ -80,30 +80,30 @@ export default defineConfig({
         // Manual chunks keep large libraries and feature areas cacheable while
         // route-level dynamic imports keep the app shell small.
         manualChunks(id) {
-          const normalizedId = id.replace(/\\/g, '/')
+          const normalizedId = id.replace(/\\/g, '/');
           if (!normalizedId.includes('node_modules')) {
-            if (normalizedId.includes('/src/components/charts/')) return 'charts'
-            if (normalizedId.includes('/src/components/assets/')) return 'assets'
-            if (normalizedId.includes('/src/components/multisig/')) return 'multisig'
-            if (normalizedId.includes('/src/components/deployment/')) return 'deployment'
-            return undefined
+            if (normalizedId.includes('/src/components/charts/')) return 'charts';
+            if (normalizedId.includes('/src/components/assets/')) return 'assets';
+            if (normalizedId.includes('/src/components/multisig/')) return 'multisig';
+            if (normalizedId.includes('/src/components/deployment/')) return 'deployment';
+            return undefined;
           }
 
-          if (normalizedId.includes('@stellar/stellar-sdk')) return 'stellar-sdk'
-          if (normalizedId.includes('recharts')) return 'charts-vendor'
-          if (normalizedId.includes('@tensorflow/')) return 'ml-vendor'
+          if (normalizedId.includes('@stellar/stellar-sdk')) return 'stellar-sdk';
+          if (normalizedId.includes('recharts')) return 'charts-vendor';
+          if (normalizedId.includes('@tensorflow/')) return 'ml-vendor';
           if (
             normalizedId.includes('react-force-graph') ||
             normalizedId.includes('force-graph') ||
             normalizedId.includes('d3-force-3d')
           ) {
-            return 'graph-vendor'
+            return 'graph-vendor';
           }
-          if (normalizedId.includes('lucide-react')) return 'icons-vendor'
-          if (normalizedId.includes('i18next')) return 'i18n'
-          if (normalizedId.includes('date-fns')) return 'date-vendor'
+          if (normalizedId.includes('lucide-react')) return 'icons-vendor';
+          if (normalizedId.includes('i18next')) return 'i18n';
+          if (normalizedId.includes('date-fns')) return 'date-vendor';
 
-          return 'vendor'
+          return 'vendor';
         },
       },
     },
@@ -111,6 +111,9 @@ export default defineConfig({
 
   // Allow the dev server to serve sw.js at the root scope
   server: {
+    proxy: {
+      '/api': process.env.VITE_API_URL || 'http://localhost:4000',
+    },
     headers: {
       'Service-Worker-Allowed': '/',
     },
@@ -125,4 +128,4 @@ export default defineConfig({
   optimizeDeps: {
     include: ['react', 'react-dom'],
   },
-})
+});