persist panel sizes for email and automation screens, fix session title from prompt prefix

- switch email and automation screens from WorkspaceLayout to WorkspaceView + useWorkspacesState
- add promptPrefix prop to WorkspaceView, thread into WorkspaceContext
- automation dynamically adds/removes chat panel while preserving persisted sizes
- use displayText for session title so prompt prefix doesn't leak into titles
- fix email context filter to match screens/email workspace key

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

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

@@ -1,12 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { useClient } from 'hooks/useClient';
-import { useAuth } from 'hooks/useAuth';
 import { useIsMobile } from 'hooks/useIsMobile';
 import { usePanelChannel } from 'hooks/usePanelChannel';
 import type { LayoutNode, PanelComponents } from 'officerdev';
-import { WorkspaceLayout } from 'officerdev';
-import { useUserState } from 'state/useUserState';
+import { WorkspaceView } from 'officerdev';
+import { useWorkspacesState } from 'state/useWorkspacesState';
 
 import { AutomationRightPanel } from './AutomationRightPanel';
 import type { AutomationSelection } from './AutomationRightPanel';
@@ -15,7 +12,7 @@ import { AutomationSidebar } from './AutomationSidebar';
 
 const CHAT_PANEL_ID = 'automation-chat';
 
-const baseLayout: LayoutNode = {
+const defaultLayout: LayoutNode = {
   type: 'group',
   id: 'automation-root',
   direction: 'horizontal',
@@ -25,66 +22,66 @@ const baseLayout: LayoutNode = {
   ],
 };
 
-const splitLayout: LayoutNode = {
-  type: 'group',
-  id: 'automation-root',
-  direction: 'horizontal',
-  children: [
-    { node: { type: 'panel', id: 'automation-left', appType: null }, size: 20 },
-    {
-      node: {
-        type: 'group',
-        id: 'automation-right-group',
-        direction: 'vertical',
-        children: [
-          { node: { type: 'panel', id: 'automation-right', appType: null }, size: 50 },
-          { node: { type: 'panel', id: CHAT_PANEL_ID, appType: null }, size: 50 },
-        ],
-      },
-      size: 80,
+const hasChatPanel = (layout: LayoutNode): boolean => {
+  if (layout.type === 'panel') return layout.id === CHAT_PANEL_ID;
+  return layout.children.some((c) => hasChatPanel(c.node));
+};
+
+const addChatPanel = (layout: LayoutNode): LayoutNode => {
+  if (layout.type !== 'group') return layout;
+  const clone = structuredClone(layout);
+  const rightChild = clone.children[1];
+  if (!rightChild) return clone;
+
+  // Wrap the right panel in a vertical group with the chat panel
+  const rightSize = rightChild.size;
+  rightChild.size = rightSize;
+  clone.children[1] = {
+    node: {
+      type: 'group',
+      id: 'automation-right-group',
+      direction: 'vertical',
+      children: [
+        { node: rightChild.node, size: 50 },
+        { node: { type: 'panel', id: CHAT_PANEL_ID, appType: null }, size: 50 },
+      ],
     },
-  ],
+    size: rightSize,
+  };
+  return clone;
+};
+
+const removeChatPanel = (layout: LayoutNode): LayoutNode => {
+  if (layout.type !== 'group') return layout;
+  const clone = structuredClone(layout);
+  const rightChild = clone.children[1];
+  if (!rightChild || rightChild.node.type !== 'group') return clone;
+
+  // Unwrap: pull the right panel out of the vertical group
+  const rightGroup = rightChild.node;
+  const mainPanel = rightGroup.children.find((c) => c.node.type === 'panel' && (c.node as { id: string }).id !== CHAT_PANEL_ID);
+  if (mainPanel) {
+    clone.children[1] = { node: mainPanel.node, size: rightChild.size };
+  }
+  return clone;
 };
 
 export const Automation = () => {
-  const client = useClient();
-  const { isAuthenticated } = useAuth();
-  const { isFetched } = useQuery({
-    queryKey: ['USER_STATE'],
-    enabled: isAuthenticated,
-    queryFn: () => client.get('/user/state'),
-    staleTime: Infinity,
-  });
-  const [savedSizes, setSavedSizes] = useUserState<number[] | null>('automation:chat-sizes', null);
+  const workspace = useWorkspacesState<LayoutNode>('screens/automation', defaultLayout);
   const [selection, setSelection] = usePanelChannel<AutomationSelection>('automation:selected-capability', null);
   const isMobile = useIsMobile();
   const editing = selection?.editing ?? false;
   const prevEditing = useRef(editing);
 
-  const layout = useMemo(() => {
-    if (!editing) return baseLayout;
-    const l = structuredClone(splitLayout);
-    if (savedSizes && l.type === 'group') {
-      const rightGroup = l.children[1]!.node;
-      if (rightGroup.type === 'group') {
-        rightGroup.children[0]!.size = savedSizes[0] ?? 50;
-        rightGroup.children[1]!.size = savedSizes[1] ?? 50;
-      }
-    }
-    return l;
-  }, [editing, savedSizes]);
-
-  const handleLayoutChange = (newLayout: LayoutNode) => {
-    if (!editing || newLayout.type !== 'group') return;
-    const rightChild = newLayout.children[1]?.node;
-    if (rightChild?.type === 'group') {
-      const sizes = rightChild.children.map((c) => c.size);
-      setSavedSizes(sizes);
-    }
-  };
-
   useEffect(() => {
+    if (editing === prevEditing.current) return;
     prevEditing.current = editing;
+
+    if (editing && !hasChatPanel(workspace.value)) {
+      workspace.setValue(addChatPanel(workspace.value));
+    } else if (!editing && hasChatPanel(workspace.value)) {
+      workspace.setValue(removeChatPanel(workspace.value));
+    }
   }, [editing]);
 
   const panelComponents: PanelComponents = useMemo(
@@ -99,17 +96,16 @@ export const Automation = () => {
   const mobilePanelId = isMobile && selection ? 'automation-right' : undefined;
   const onMobileBack = useCallback(() => setSelection(null), [setSelection]);
 
-  if (!isFetched) return null;
+  if (!workspace.isLoaded) return null;
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceLayout
-        layout={layout}
-        onLayoutChange={handleLayoutChange}
+      <WorkspaceView
+        workspace={workspace}
+        locked
         components={panelComponents}
-        isMobile={isMobile}
         mobilePanelId={mobilePanelId}
-        onMobileBack={mobilePanelId ? onMobileBack : null}
+        onMobilePanelChange={mobilePanelId ? () => onMobileBack() : undefined}
       />
     </div>
   );

src/apps/officer-web/Screens/Dashboard/Email/EmailScreen.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useCallback } from 'react';
 import type { LayoutNode, PanelComponents } from 'officerdev';
-import { WorkspaceLayout } from 'officerdev';
+import { WorkspaceView } from 'officerdev';
+import { useWorkspacesState } from 'state/useWorkspacesState';
 import { useIsMobile } from 'hooks/useIsMobile';
 import { useGlobal } from 'hooks/useGlobal';
 import { defaultLayout } from './defaultLayout';
@@ -12,6 +13,7 @@ const PROMPT_PREFIX = `You are an email assistant. The user has a local SQLite e
 export const EmailScreen = () => {
   const isMobile = useIsMobile();
   const [selectedId, setSelectedId] = useGlobal<string | null>('EMAIL_SELECTED', null);
+  const workspace = useWorkspacesState<LayoutNode>('screens/email', defaultLayout);
 
   const components: PanelComponents = useMemo(
     () => ({
@@ -26,15 +28,13 @@ export const EmailScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceLayout
-        layout={defaultLayout}
-        onLayoutChange={() => {}}
+      <WorkspaceView
+        workspace={workspace}
+        locked
         components={components}
-        workspaceId="email"
         promptPrefix={PROMPT_PREFIX}
-        isMobile={isMobile}
         mobilePanelId={mobilePanelId}
-        onMobileBack={mobilePanelId ? onMobileBack : null}
+        onMobilePanelChange={mobilePanelId ? () => onMobileBack() : undefined}
       />
     </div>
   );