saved sessions: make routable via /chat/saved/:id URLs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/apps/officer-web/App.tsx

@@ -54,6 +54,7 @@ export function App() {
             <Route path="/new-automation" element={<Dashboard.NewAutomation />} />
             <Route path="/chat" element={<Dashboard.SessionListPage />} />
             <Route path="/chat/new" element={<Dashboard.SessionListPage isNew />} />
+            <Route path="/chat/saved/:id" element={<Dashboard.SessionListPage />} />
             <Route path="/chat/:sessionId" element={<Dashboard.SessionListPage />} />
             <Route path="/plans" element={<Dashboard.Plans />} />
             <Route path="/files" element={<Dashboard.FilesScreen />} />

src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { useParams, useNavigate } from 'react-router';
 import type { LayoutNode, SelectedSession } from 'officerdev';
+import type { ChatMessage } from 'officerdev';
 import { WorkspaceView } from 'officerdev';
 import { useIsMobile } from 'hooks/useIsMobile';
 import { useDashboardState } from 'state/useDashboardState';
 import { usePanelChannel } from 'hooks/usePanelChannel';
+import { useSavedSessions, messagesToTranscript, type RawMessage } from 'state/useSavedSessions';
 import { defaultLayout } from './defaultLayout';
 
 export { ChatHistory as ChatHistoryApp } from './Widget';
@@ -33,12 +35,15 @@ type SessionListPageProps = {
 };
 
 export const SessionListPage = ({ isNew }: SessionListPageProps) => {
-  const { sessionId } = useParams<{ sessionId: string }>();
+  const { sessionId, id: savedIdParam } = useParams<{ sessionId: string; id: string }>();
   const [, setSelected] = usePanelChannel<SelectedSession>('chat:selected-session', null);
   const rawWorkspace = useDashboardState<LayoutNode>('screens/chat', defaultLayout);
   const isMobile = useIsMobile();
   const navigate = useNavigate();
-  const mobilePanelId = isMobile && (sessionId || isNew) ? 'chat-detail' : undefined;
+  const { resumeSession } = useSavedSessions();
+  const loadedSavedIdRef = useRef<number | null>(null);
+  const savedId = savedIdParam ? Number(savedIdParam) : null;
+  const mobilePanelId = isMobile && (sessionId || isNew || savedId) ? 'chat-detail' : undefined;
 
   // Normalize synchronously so the wrong panel never renders
   const workspace = useMemo(() => {
@@ -59,9 +64,38 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
       setSelected({ id: `new:${Date.now()}` });
       return;
     }
+    if (savedId && !Number.isNaN(savedId) && loadedSavedIdRef.current !== savedId) {
+      loadedSavedIdRef.current = savedId;
+      resumeSession(savedId).then((result) => {
+        const rawMessages = result.rawMessages ?? [];
+        const chatMessages: ChatMessage[] = rawMessages.map((m: RawMessage) => {
+          if (m.role === 'user') return { role: 'user' as const, text: m.text || '' };
+          if (m.role === 'assistant') return { role: 'assistant' as const, id: m.id, text: m.text || '' };
+          if (m.role === 'tool') {
+            return {
+              role: 'tool' as const,
+              toolName: m.toolName || '',
+              toolInput: m.toolInput || {},
+              toolCallId: m.toolCallId || '',
+              output: m.output,
+              isError: m.isError,
+            };
+          }
+          return { role: 'assistant' as const, text: '' };
+        });
+        const transcript = messagesToTranscript(rawMessages);
+        setSelected({
+          id: `saved:${savedId}`,
+          model: result.model,
+          resumeSummary: transcript,
+          initialMessages: chatMessages,
+        });
+      });
+      return;
+    }
     if (!sessionId) return;
     setSelected({ id: sessionId });
-  }, [sessionId, isNew]);
+  }, [sessionId, isNew, savedId]);
 
   return (
     <div className="h-full w-full pt-2">