diff --git a/src/apps/officer-web/Screens/Dashboard/Bots/BotsList.tsx b/src/apps/officer-web/Screens/Dashboard/Bots/BotsList.tsx index 6051ac9e..1833aec1 100644 --- a/src/apps/officer-web/Screens/Dashboard/Bots/BotsList.tsx +++ b/src/apps/officer-web/Screens/Dashboard/Bots/BotsList.tsx @@ -1,22 +1,143 @@ -import { Bot, Plus } from 'lucide-react'; -import { Link, useParams } from 'react-router'; -import { useClaudeSessions } from 'state/useClaudeSessions'; +import { useState } from 'react'; +import { Bot, Check, Pencil, Plus, Trash2, X } from 'lucide-react'; +import { Link, useNavigate, useParams } from 'react-router'; +import { useClaudeSessions, type ClaudeSessionSummary } from 'state/useClaudeSessions'; /** - * The bots, down the left — the same shape Command HQ gives commanders. + * The bots, as cards — the same object Command HQ gives a commander. * - * Every bot is a chat in `$DATA_PATH//bots`, so this is that directory's session list and nothing - * more. No table, no rows to keep in step: the list IS the conversations. + * ── Why not the chat session list ── * - * Rows are real links to `/bots/:sessionId`, per `docs/navigation-audit.md` — a bot is addressable, so - * cmd-click opens one in a tab and a reload keeps the one you were reading. + * A bot IS a chat underneath, and that is an implementation detail nobody using this should have to hold. + * The generic session list says "conversation, last touched at" because that is what a conversation is. A + * bot is a thing you name, check on, and eventually delete — so it gets a card with its name, its id, and + * whether it is watching, exactly as a commander does. + * + * ── The id pill ── + * + * A commander shows `#54`, its directory. A bot has no directory of its own — they share one — so its id + * is the first eight characters of its session, which is also what an `@mention` carries. Seeing the same + * eight characters in both places is the point: the pill is what you type to reference it. */ -const NEW = '/bots'; +const shortId = (id: string) => id.slice(0, 8); + +type CardProps = { + bot: ClaudeSessionSummary; + selected: boolean; + onRename: (id: string, title: string) => Promise; + onDelete: (id: string) => Promise; +}; + +const BotCard = ({ bot, selected, onRename, onDelete }: CardProps) => { + const navigate = useNavigate(); + const [confirming, setConfirming] = useState(false); + const [renaming, setRenaming] = useState(false); + const [draft, setDraft] = useState(bot.title); + + const commit = async () => { + const next = draft.trim(); + setRenaming(false); + if (next && next !== bot.title) await onRename(bot.id, next); + }; + + return ( +
+ {/* The whole card is the link, with the controls layered above it — same arrangement as a commander + card, so a click anywhere opens the bot and the buttons still work. */} + {!renaming && } + +
+ + {renaming ? ( +
{ + ev.preventDefault(); + void commit(); + }} + > + setDraft(ev.target.value)} + onKeyDown={(ev) => ev.key === 'Escape' && setRenaming(false)} + className="min-w-0 flex-1 rounded border bg-transparent px-1 py-0.5 text-sm" + /> + +
+ ) : ( + <> + {bot.title || '(unnamed)'} + + #{shortId(bot.id)} + + + )} +
+ +
+ + {bot.messageCount} message{bot.messageCount === 1 ? '' : 's'} + + {new Date(bot.updatedAt).toLocaleDateString()} +
+ + {confirming ? ( +
+ + +
+ ) : ( + !renaming && ( +
+ + +
+ ) + )} +
+ ); +}; export const BotsList = () => { const { sessionId } = useParams(); - const { sessions, isLoading } = useClaudeSessions(null, { chatContext: { context: 'bots' } }); + const { sessions, isLoading, renameSession, deleteSession } = useClaudeSessions(null, { + chatContext: { context: 'bots' }, + }); return (