From 465435ccf1c6c77e2568d9a2caa6a3764b2f6ba8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Sat, 15 Aug 2026 23:24:25 +0000 Subject: [PATCH] a chat panel picks from the conversations in its dashboard's directory MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A dashboard rooted in ~/Tests/platform now has a session picker in its chat panel's header: every conversation started in that directory, newest first, plus New chat, rename and delete. ── Almost all of this already existed ── `GET /chat/sessions?cwd=` returns conversations for a working directory, merged across Claude and OpenCode. It is not a registry Officer maintains: Claude writes 每 transcript to `~/.claude/projects//`, so "the conversations belonging to this dashboard" is how they already sit on disk — the same ones the terminal `claude` sees. `useClaudeSessions` already wrapped list, rename and delete for the /chat screen. The panel header is new; nothing under it is. ── The one design correction ── Which session a panel is on is NOT `usePanelMemory`. That hook claims its saved value once and then ignores the bag, because the editor and file browser are the only writers of their own state and hearing it echo back would tell them to reopen what they just closed. Here the header writes and the body reads — two components with no props between them — so the value has to stay LIVE. Claim-once would have meant picking a session changed the label and nothing else. It is the same dashboard-state bag, read live, so it still survives a reload. Switching remounts the chat on its key, which is what the existing comment calls "the honest way to say this is now a different conversation": `useChat` seeds from the first `initialSessionId` it sees and the resume handshake sends whatever is in that state on connect. A NEW chat is `null` until the harness names it — only the harness can — and the id is recorded on arrival, so "new chat, say something, reload" returns to that conversation rather than a third one. Deleting the conversation on screen points the panel at a new one rather than at a transcript that no longer exists. ── Left alone, and one thing to know ── `agent_panels` is untouched: a named agent still wins the session choice outright, since it is one conversation forever by definition. The picker is for the ordinary case. The email screen mounts ChatPanelWrapper too, so its chat now also remembers its session instead of starting fresh each visit. That is a behaviour change to a screen this work was not aimed at — better in my view, but say if not, and it scopes to dashboards in one line. tsgo clean, frontend builds, 846 pass / 7 fail unchanged. Co-Authored-By: Claude Opus 5 --- src/servers/api/dashboards/dashboards.ts | 2 +- .../officerdev/src/apps/Chat/ChatHeader.tsx | 141 ++++++++++++++++-- .../src/apps/Chat/ChatPanelWrapper.tsx | 28 +++- .../src/apps/Chat/use-panel-session.ts | 46 ++++++ 4 files changed, 200 insertions(+), 17 deletions(-) create mode 100644 src/workspaces/officerdev/src/apps/Chat/use-panel-session.ts diff --git a/src/servers/api/dashboards/dashboards.ts b/src/servers/api/dashboards/dashboards.ts index ae563abf..3ccf6e15 100644 --- a/src/servers/api/dashboards/dashboards.ts +++ b/src/servers/api/dashboards/dashboards.ts @@ -20,7 +20,7 @@ export const dashboardsRouter = createRouter(); // `editor` joined 2026-08-15: which files a code-editor panel has open, and which is in front. Note an // unmatched key is a 400 rather than a silent 200 — so a new panel prefix MUST be added here or its state // vanishes loudly instead of quietly, which is the whole reason that branch exists. -const PANEL_STATE_PREFIXES = ['tmux', 'nvim', 'claude-code', 'editor', 'files']; +const PANEL_STATE_PREFIXES = ['tmux', 'nvim', 'claude-code', 'editor', 'files', 'chat']; // A `LayoutNode` is an object. Everything from the PATCH body down to jsonb is `unknown`, so without this // the only thing standing between a wrong-shaped body and the layout columns is the CHECK constraint — diff --git a/src/workspaces/officerdev/src/apps/Chat/ChatHeader.tsx b/src/workspaces/officerdev/src/apps/Chat/ChatHeader.tsx index 7ab62bdb..edd812fd 100644 --- a/src/workspaces/officerdev/src/apps/Chat/ChatHeader.tsx +++ b/src/workspaces/officerdev/src/apps/Chat/ChatHeader.tsx @@ -1,4 +1,15 @@ -import { MessageSquare } from 'lucide-react'; +import { useState } from 'react'; +import { MessageSquare, ChevronDown, Plus, Pencil, Trash2, Check, X } from 'lucide-react'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { useClaudeSessions } from 'state/useClaudeSessions'; +import { useWorkspace, cwdToPath } from '../../components/Workspace'; +import { usePanelSession } from './use-panel-session'; import type { ChatMessage } from './types'; export type ChatSessionSelection = { @@ -9,11 +20,123 @@ export type ChatSessionSelection = { initialMessages?: ChatMessage[]; }; -// Chat panel header — just the label now that saved-sessions are retired (Claude's transcript store -// is the source of truth; the /chat screen is where you browse/resume sessions). -export const ChatHeader = () => ( - <> - - Chat - -); +// The chat panel's header: which conversation this panel is on, and a way to change it. +// +// A dashboard is rooted in a directory, and Claude stores every transcript under that directory's slug +// (`~/.claude/projects//`). So "the conversations belonging to this dashboard" is not something +// Officer has to track — it is how they already sit on disk, and it is the same list the terminal `claude` +// sees. `GET /chat/sessions?cwd=` returns them merged across both harnesses. +// +// Which one THIS panel is on lives in dashboard state (see `usePanelSession`), so two chat panels side by +// side hold different conversations and both survive a reload. + +const title = (s: { title: string }) => s.title || '(untitled)'; + +export const ChatHeader = ({ panelId }: { panelId?: string }) => { + const { workspace, cwd } = useWorkspace(); + const cwdPath = cwdToPath(cwd); + // The endpoint takes a home-relative path and treats absent as "the caller's default", which is what an + // unscoped panel wants. + const { sessions, renameSession, deleteSession } = useClaudeSessions(cwdPath === '/' ? null : cwdPath); + const [sessionId, setSessionId] = usePanelSession(panelId, workspace); + + const [renaming, setRenaming] = useState(null); + const [draft, setDraft] = useState(''); + + const current = sessions.find((s) => s.id === sessionId); + const label = current ? title(current) : sessionId ? 'Conversation' : 'New chat'; + + const commitRename = async (id: string) => { + const next = draft.trim(); + setRenaming(null); + if (next) await renameSession(id, next); + }; + + return ( + <> + + + + + + + {/* `null` rather than a minted id: the body mounts a fresh chat and records whatever the harness + names it, because only the harness can decide that. */} + setSessionId(null)} className="cursor-pointer"> + + New chat + + + {sessions.length > 0 && } + + {sessions.map((s) => + renaming === s.id ? ( + // Inline, because the alternative is a modal over a panel header — and the only thing being + // asked for is one line of text. +
ev.stopPropagation()}> + setDraft(ev.target.value)} + onKeyDown={(ev) => { + if (ev.key === 'Enter') void commitRename(s.id); + if (ev.key === 'Escape') setRenaming(null); + }} + className="min-w-0 flex-1 rounded border border-duck-dark/20 bg-transparent px-1.5 py-0.5 text-xs" + /> + + +
+ ) : ( + setSessionId(s.id)} + className={`cursor-pointer ${s.id === sessionId ? 'bg-duck-teal/10' : ''}`} + > + {title(s)} + {/* Siblings of the label, never nested inside it — these mutate, they do not select. */} + + + + + + ), + )} + + + {cwd} + + ); +}; diff --git a/src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx b/src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx index a734befb..222c5924 100644 --- a/src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx +++ b/src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx @@ -5,6 +5,7 @@ import { useChat } from '../../hooks/useChat'; import { EmbeddableChat } from './EmbeddableChat'; import { AgentIdentityBar } from './AgentIdentityBar'; import { useAgentPanel, type UseAgentPanelType } from './useAgentPanel'; +import { usePanelSession } from './use-panel-session'; type ChatPanelInnerProps = { scoped: boolean; @@ -15,6 +16,8 @@ type ChatPanelInnerProps = { onTurnComplete?: (hadToolCalls: boolean) => void; sessionKey?: string; agentPanel: UseAgentPanelType; + /** Records the id the harness mints for a brand-new conversation, so a reload comes back to it. */ + onSessionId?: (id: string | null) => void; }; const ChatPanelInner = ({ @@ -26,6 +29,7 @@ const ChatPanelInner = ({ onTurnComplete, sessionKey, agentPanel, + onSessionId, }: ChatPanelInnerProps) => { const chat = useChat(sessionKey, undefined, { replaceUrl: false, @@ -36,6 +40,9 @@ const ChatPanelInner = ({ useEffect(() => { setActiveSession(chat.sessionId); + // A new chat starts with no id and is named by the harness on the first turn. Recording it here is + // what makes "New chat, say something, reload" come back to that conversation instead of a third one. + onSessionId?.(chat.sessionId); }, [chat.sessionId]); return ( @@ -94,12 +101,18 @@ export const ChatPanelWrapper = ({ panelId, promptPrefix }: ChatPanelWrapperProp // same home-relative string resolved by the same function. const cwdParam = agentPanel.agent?.cwd ? { path: agentPanel.agent.cwd } : scoped ? { root, path: cwd } : undefined; - // A named panel is one session forever, so its key has to be decided before `useChat` mounts — the - // hook seeds its state from the first `initialSessionId` it sees and the socket's resume handshake - // sends whatever is in that state on connect. Remounting on the key is the honest way to say "this is - // now a different conversation": it happens exactly twice in a panel's life, when it is named and if - // it is released, and both are the user asking for precisely that. - const key = agentPanel.agent?.sessionKey ?? 'anonymous'; + // Which conversation this panel is showing, chosen in the header and shared live through dashboard + // state. A named agent panel still wins: it is one session forever by definition, and the header's + // picker is for the ordinary case where a dashboard simply holds several conversations about the + // directory it is rooted in. + const [panelSessionId, setPanelSessionId] = usePanelSession(panelId, workspace); + const selectedSessionId = agentPanel.agent?.sessionKey ?? panelSessionId ?? undefined; + + // The key has to be decided before `useChat` mounts — the hook seeds its state from the first + // `initialSessionId` it sees, and the socket's resume handshake sends whatever is in that state on + // connect. Remounting on the key is the honest way to say "this is now a different conversation", and + // switching in the header is exactly that request. + const key = selectedSessionId ?? 'new'; // Until the address book has answered, a named panel must not mount an anonymous chat — that would // start a throwaway session and stream the answer into a transcript nobody can find again. @@ -114,7 +127,8 @@ export const ChatPanelWrapper = ({ panelId, promptPrefix }: ChatPanelWrapperProp chatContext={chatContext} setActiveSession={setActiveSession} onTurnComplete={onTurnComplete} - sessionKey={agentPanel.agent?.sessionKey} + sessionKey={selectedSessionId} + onSessionId={agentPanel.agent ? undefined : setPanelSessionId} agentPanel={agentPanel} /> ); diff --git a/src/workspaces/officerdev/src/apps/Chat/use-panel-session.ts b/src/workspaces/officerdev/src/apps/Chat/use-panel-session.ts new file mode 100644 index 00000000..183da270 --- /dev/null +++ b/src/workspaces/officerdev/src/apps/Chat/use-panel-session.ts @@ -0,0 +1,46 @@ +import { useCallback } from 'react'; +import { useDashboardState } from 'state/useDashboardState'; +import { panelStateKey, type WorkspaceIdentity } from '../../components/Workspace'; + +/** + * Which conversation a chat panel is on, shared live between its header and its body. + * + * Deliberately NOT `usePanelMemory`, and the difference is the point. That hook claims its saved value + * ONCE and ignores the bag afterwards, because the editor and the file browser are the only writers of + * their own state and hearing it echo back would tell them to reopen a tab they had just closed. + * + * Here the header is the writer and the body is the reader. They are two components with no props + * between them, so the shared value has to stay LIVE — claim-once would mean picking a session in the + * dropdown changed the header's label and nothing else. + * + * Persistence comes free: it is dashboard state under `ws-chat-{dashboardId}`, keyed by panel, so it + * survives a reload for the same reason the editor's tabs do. + * + * `null` means "a new conversation" — the body mounts a fresh chat and records the id the harness mints + * as soon as it exists, so a reload after the first message comes back to the same transcript. + */ +export type ChatPanelSession = { sessionId: string | null }; + +const EMPTY: Record = {}; + +export function usePanelSession(panelId: string | undefined, workspace: WorkspaceIdentity | null) { + const { value: bag, setValue: setBag } = useDashboardState>( + panelStateKey('chat', workspace), + EMPTY, + ); + + const sessionId = panelId ? (bag[panelId]?.sessionId ?? null) : null; + + const setSessionId = useCallback( + (next: string | null) => { + if (!panelId) return; + setBag((prev) => { + if ((prev[panelId]?.sessionId ?? null) === next) return prev; + return { ...prev, [panelId]: { sessionId: next } }; + }); + }, + [panelId, setBag], + ); + + return [sessionId, setSessionId] as const; +}