officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a chat panel picks from the conversations in its dashboard's directory

Browse Source 
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/<cwd-slug>/`, 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 <noreply@anthropic.com>
This commit is contained in:
pastilhas
2026-08-15 23:24:25 +00:00
co-authored by Claude Opus 5
parent a871c055bf
commit 465435ccf1
4 changed files with 200 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/workspaces/officerdev/src/apps/Chat/ChatHeader.tsx
+132 -9
View File
@@ -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 = () => (
<>
<MessageSquare className="h-3.5 w-3.5 shrink-0" />
<span className="text-xs font-medium truncate flex-1">Chat</span>
</>
);
// 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/<cwd-slug>/`). 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<string | null>(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 (
<>
<MessageSquare className="h-3.5 w-3.5 shrink-0" />
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="flex min-w-0 flex-1 items-center gap-1 rounded px-1 py-0.5 text-left hover:bg-white/10 transition-colors cursor-pointer">
<span className="truncate text-xs font-medium">{label}</span>
<ChevronDown className="h-3 w-3 shrink-0 opacity-60" />
</button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="z-[600] max-h-80 w-72 overflow-auto">
{/* `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. */}
<DropdownMenuItem onClick={() => setSessionId(null)} className="cursor-pointer">
<Plus className="mr-2 h-4 w-4" />
New chat
</DropdownMenuItem>
{sessions.length > 0 && <DropdownMenuSeparator />}
{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.
<div key={s.id} className="flex items-center gap-1 px-2 py-1.5" onClick={(ev) => ev.stopPropagation()}>
<input
autoFocus
value={draft}
onChange={(ev) => 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"
/>
<button onClick={() => void commitRename(s.id)} className="p-0.5 cursor-pointer" title="Save">
<Check className="h-3.5 w-3.5" />
</button>
<button onClick={() => setRenaming(null)} className="p-0.5 cursor-pointer" title="Cancel">
<X className="h-3.5 w-3.5" />
</button>
</div>
) : (
<DropdownMenuItem
key={s.id}
onClick={() => setSessionId(s.id)}
className={`cursor-pointer ${s.id === sessionId ? 'bg-duck-teal/10' : ''}`}
>
<span className="min-w-0 flex-1 truncate">{title(s)}</span>
{/* Siblings of the label, never nested inside it — these mutate, they do not select. */}
<span className="ml-2 flex shrink-0 items-center gap-1">
<button
title="Rename"
onClick={(ev) => {
ev.preventDefault();
ev.stopPropagation();
setDraft(title(s));
setRenaming(s.id);
}}
className="p-0.5 opacity-50 hover:opacity-100 cursor-pointer"
>
<Pencil className="h-3 w-3" />
</button>
<button
title="Delete"
onClick={(ev) => {
ev.preventDefault();
ev.stopPropagation();
if (!confirm(`Delete "${title(s)}"?`)) return;
// Deleting the one on screen leaves this panel pointing at nothing, so it starts a
// new conversation rather than showing a transcript that no longer exists.
if (s.id === sessionId) setSessionId(null);
void deleteSession(s.id);
}}
className="p-0.5 opacity-50 hover:opacity-100 text-red-500 cursor-pointer"
>
<Trash2 className="h-3 w-3" />
</button>
</span>
</DropdownMenuItem>
),
)}
</DropdownMenuContent>
</DropdownMenu>
<span className="shrink-0 truncate text-[10px] font-mono opacity-60">{cwd}</span>
</>
);
};
src/workspaces/officerdev/src/apps/Chat/ChatPanelWrapper.tsx
+21 -7
View File
@@ -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}
/>
);
src/workspaces/officerdev/src/apps/Chat/use-panel-session.ts
+46
View File
@@ -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<string, ChatPanelSession> = {};
export function usePanelSession(panelId: string | undefined, workspace: WorkspaceIdentity | null) {
const { value: bag, setValue: setBag } = useDashboardState<Record<string, ChatPanelSession>>(
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;
}