@burdenoff/microfe-movethewheels 2026.827.1 → 2026.830.1

package/src/movethewheels/hooks/useSettings.ts

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
-import { executeGraphQL } from '../utils/graphqlClient';
 
 export type ModulePreferences = Record<string, unknown>;
 
@@ -10,26 +9,6 @@ export interface ModuleSettings {
   workspaceId: string;
 }
 
-const MODULE_SETTINGS_QUERY = `
-  query MovethewheelsModuleSettings {
-    moduleSettings {
-      preferences
-      updatedAt
-      workspaceId
-    }
-  }
-`;
-
-const UPDATE_MODULE_SETTINGS_MUTATION = `
-  mutation UpdateMovethewheelsModuleSettings($input: UpdateMovethewheelsModuleSettingsInput!) {
-    updateModuleSettings(input: $input) {
-      preferences
-      updatedAt
-      workspaceId
-    }
-  }
-`;
-
 interface UseModuleSettingsResult {
   settings: ModuleSettings | null;
   preferences: ModulePreferences;
@@ -40,41 +19,58 @@ interface UseModuleSettingsResult {
   savePreferences: (preferences: ModulePreferences) => Promise<ModuleSettings>;
 }
 
+function readSettings(workspaceId: string): ModuleSettings | null {
+  if (typeof window === 'undefined') return null;
+  try {
+    const raw = window.localStorage.getItem(`movethewheels:moduleSettings:${workspaceId}`);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw) as ModuleSettings;
+    if (parsed && typeof parsed === 'object' && 'preferences' in parsed) {
+      return parsed;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function writeSettings(settings: ModuleSettings): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(
+      `movethewheels:moduleSettings:${settings.workspaceId}`,
+      JSON.stringify(settings)
+    );
+  } catch {
+    // Ignore storage errors (e.g. private mode quota).
+  }
+}
+
 export function useModuleSettings(): UseModuleSettingsResult {
-  const { apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser } =
-    useMoveTheWheels();
+  const { workspaceId } = useMoveTheWheels();
   const [settings, setSettings] = useState<ModuleSettings | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
-  const graphQLOptions = useMemo(
-    () => ({
-      apiGatewayUrl,
-      authToken,
-      workspaceToken,
-      workspaceId,
-      tenantId,
-      actorId: currentUser?.id,
-    }),
-    [apiGatewayUrl, authToken, workspaceToken, workspaceId, tenantId, currentUser?.id]
-  );
-
-  const load = useCallback(async () => {
+  const load = useCallback(() => {
     setIsLoading(true);
     setError(null);
     try {
-      const data = await executeGraphQL<{ moduleSettings: ModuleSettings }>(
-        graphQLOptions,
-        MODULE_SETTINGS_QUERY
+      const stored = workspaceId ? readSettings(workspaceId) : null;
+      setSettings(
+        stored ?? {
+          preferences: {},
+          updatedAt: new Date().toISOString(),
+          workspaceId: workspaceId ?? '',
+        }
       );
-      setSettings(data.moduleSettings);
-    } catch (fetchError) {
-      setError(fetchError instanceof Error ? fetchError : new Error('Failed to load settings'));
+    } catch (loadError) {
+      setError(loadError instanceof Error ? loadError : new Error('Failed to load settings'));
     } finally {
       setIsLoading(false);
     }
-  }, [graphQLOptions]);
+  }, [workspaceId]);
 
   useEffect(() => {
     void load();
@@ -89,23 +85,24 @@ export function useModuleSettings(): UseModuleSettingsResult {
       setIsSaving(true);
       setError(null);
       try {
-        const data = await executeGraphQL<{ updateModuleSettings: ModuleSettings }>(
-          graphQLOptions,
-          UPDATE_MODULE_SETTINGS_MUTATION,
-          { input: { preferences } }
-        );
-        setSettings(data.updateModuleSettings);
-        return data.updateModuleSettings;
-      } catch (fetchError) {
+        const next: ModuleSettings = {
+          preferences,
+          updatedAt: new Date().toISOString(),
+          workspaceId: workspaceId ?? '',
+        };
+        writeSettings(next);
+        setSettings(next);
+        return next;
+      } catch (saveError) {
         const normalized =
-          fetchError instanceof Error ? fetchError : new Error('Failed to save settings');
+          saveError instanceof Error ? saveError : new Error('Failed to save settings');
         setError(normalized);
         throw normalized;
       } finally {
         setIsSaving(false);
       }
     },
-    [graphQLOptions]
+    [workspaceId]
   );
 
   // Stabilize the preferences reference. Returning `settings?.preferences ?? {}`

package/src/movethewheels/pages/AIAssistantPage.tsx

@@ -24,38 +24,49 @@ import { Bot, MessageCircle, Activity, ShieldCheck, Wallet } from 'lucide-react'
 import { PageLayout, EmptyState } from '../components/PageLayout';
 import { Card, CardContent, CardHeader, CardTitle } from '../components/ui';
 import { GlassCard, PagePurpose } from '@burdenoff/fe-libs/ui';
-
-const roadmapItems = [
-  {
-    icon: Activity,
-    title: 'Agent activity feed',
-    description:
-      'A live log of what the AI decided, on which shipments, with trigger, model, latency and cost — so an autonomous run is never a black box.',
-  },
-  {
-    icon: ShieldCheck,
-    title: 'Dispatch decision cards',
-    description:
-      'Proposed driver/vehicle assignments and carrier recommendations with rationale and confidence, requiring an explicit accept or reject before anything is written.',
-  },
-  {
-    icon: Wallet,
-    title: 'AI credit visibility',
-    description: 'Per-workspace AI spend for admins, so cost is visible before the invoice.',
-  },
-];
+import { useTr } from '../hooks';
 
 export default function AIAssistantPage() {
+  const tr = useTr();
+
+  const roadmapItems = [
+    {
+      icon: Activity,
+      title: tr('movethewheels.ai.roadmap.agentActivity.title', 'Agent activity feed'),
+      description: tr(
+        'movethewheels.ai.roadmap.agentActivity.description',
+        'A live log of what the AI decided, on which shipments, with trigger, model, latency and cost — so an autonomous run is never a black box.'
+      ),
+    },
+    {
+      icon: ShieldCheck,
+      title: tr('movethewheels.ai.roadmap.dispatchDecisionCards.title', 'Dispatch decision cards'),
+      description: tr(
+        'movethewheels.ai.roadmap.dispatchDecisionCards.description',
+        'Proposed driver/vehicle assignments and carrier recommendations with rationale and confidence, requiring an explicit accept or reject before anything is written.'
+      ),
+    },
+    {
+      icon: Wallet,
+      title: tr('movethewheels.ai.roadmap.aiCreditVisibility.title', 'AI credit visibility'),
+      description: tr(
+        'movethewheels.ai.roadmap.aiCreditVisibility.description',
+        'Per-workspace AI spend for admins, so cost is visible before the invoice.'
+      ),
+    },
+  ];
+
   return (
     <PageLayout
-      title="AI Operations"
-      subtitle="What the AI is doing on your workspace, and why"
+      title={tr('movethewheels.ai.title', 'AI Operations')}
+      subtitle={tr('movethewheels.ai.subtitle', 'What the AI is doing on your workspace, and why')}
       icon={<Bot size={24} />}
     >
       <PagePurpose icon={<Bot size={18} />}>
-        This page will surface AI-driven dispatch decisions and their outcomes once the shared AI
-        runtime lands. It does not host a chat box — chat with your live operational data is always
-        available from the assistant icon anywhere in the app.
+        {tr(
+          'movethewheels.ai.purpose',
+          'This page will surface AI-driven dispatch decisions and their outcomes once the shared AI runtime lands. It does not host a chat box — chat with your live operational data is always available from the assistant icon anywhere in the app.'
+        )}
       </PagePurpose>
 
       <GlassCard treatment="glass" className="p-4">
@@ -63,12 +74,13 @@ export default function AIAssistantPage() {
           <MessageCircle size={20} className="text-primary flex-shrink-0 mt-0.5" />
           <div>
             <p className="text-sm font-medium text-text-primary">
-              Looking to ask a question about your operations?
+              {tr('movethewheels.ai.callout.title', 'Looking to ask a question about your operations?')}
             </p>
             <p className="text-sm text-text-secondary mt-1">
-              Open the assistant from its icon in the corner of the screen — it answers from your
-              live orders, shipments, fleet and inventory data, and it is the only chat surface in
-              this product.
+              {tr(
+                'movethewheels.ai.callout.description',
+                'Open the assistant from its icon in the corner of the screen — it answers from your live orders, shipments, fleet and inventory data, and it is the only chat surface in this product.'
+              )}
             </p>
           </div>
         </div>
@@ -76,13 +88,19 @@ export default function AIAssistantPage() {
 
       <Card>
         <CardHeader>
-          <CardTitle>On the roadmap</CardTitle>
+          <CardTitle>{tr('movethewheels.ai.roadmap.title', 'On the roadmap')}</CardTitle>
         </CardHeader>
         <CardContent>
           <EmptyState
             illustration="empty-agents"
-            title="Autonomous dispatch operations aren't live yet"
-            description="Autonomous dispatch isn't available yet — these capabilities are still in development. Nothing below is available today."
+            title={tr(
+              'movethewheels.ai.emptyState.title',
+              "Autonomous dispatch operations aren't live yet"
+            )}
+            description={tr(
+              'movethewheels.ai.emptyState.description',
+              "Autonomous dispatch isn't available yet — these capabilities are still in development. Nothing below is available today."
+            )}
           />
           <ul className="mt-4 space-y-4">
             {roadmapItems.map((item) => (