+ {/* Autocomplete popover (agent @-mentions or slash commands), floating
+ above the input box. Driven by TipTap's suggestion lifecycle. */}
+ {menu && menu.items.length > 0 && (
+
+ );
+}
diff --git a/studio/src/app/workspace/_components/composer-mentions.ts b/studio/src/app/workspace/_components/composer-mentions.ts
new file mode 100644
index 0000000000..6c5ba400de
--- /dev/null
+++ b/studio/src/app/workspace/_components/composer-mentions.ts
@@ -0,0 +1,111 @@
+import Mention from "@tiptap/extension-mention";
+import { PluginKey } from "@tiptap/pm/state";
+import type { Editor } from "@tiptap/react";
+import type { SuggestionOptions } from "@tiptap/suggestion";
+
+/**
+ * Atomic `@agent` / `/skill` chips for the TipTap composer.
+ *
+ * Each is a Mention node (an atom, so Backspace removes the whole chip in one
+ * press) rendered as the same green "connected" pill the old overlay painted.
+ * `renderText` serializes a chip back to `@handle` / `/name`, so `editor.getText`
+ * reconstructs the exact plain-text message the model receives.
+ *
+ * Autocomplete is delegated to the caller: the caller supplies the filtered
+ * items per keystroke and a `render` that drives its own menu UI (we reuse the
+ * existing full-width popover rather than TipTap's default), keeping the
+ * on-screen behaviour identical to the pre-TipTap composer.
+ */
+
+/** One row in the autocomplete menu (and the data an inserted chip carries). */
+export interface ComposerMenuItem {
+ /** Text inserted after the trigger char — the agent handle or command name. */
+ readonly id: string;
+ /** Chip label (same as `id`; the trigger char is added by `renderText`). */
+ readonly label: string;
+ /** Primary text shown in the menu row. */
+ readonly primary: string;
+ /** Muted description shown in the menu row. */
+ readonly secondary: string;
+}
+
+/** The trigger kind, so the caller can render agent vs command rows. */
+export type ComposerMentionKind = "agent" | "command";
+
+/** `render` factory: given the kind, return a TipTap suggestion renderer. */
+type MakeRender = (
+ kind: ComposerMentionKind,
+) => SuggestionOptions
+
+ )}
+ {/* Input box: textarea + inline toolbar (+, mic) + send button.
+ Has its own rounded border. The toolbar row below has a matching
+ border on its top/sides/bottom; the two borders meet along the
+ input box's bottom edge, sharing a single visible line. */}
+
+ {menu.items.map((item, i) => (
+
+ ))}
+
+
+ {voice.isListening && (
+
+ {/* Toolbar sits BEHIND the input box: negative top margin pulls it up
+ so its top edge overlaps the input box's bottom rounded corners,
+ making the two boxes appear to share a single outline. */}
+ {/* @container: the Model/Memory pills collapse their value labels via
+ container queries when THIS row runs narrow (a ~400px side-panel
+ composer), independent of the viewport width. */}
+
+
+
+ Listening
+
+
+ )}
+
+ {/* TipTap composer: resolved @agent / /skill mentions are atomic
+ green chips (Backspace removes a whole chip); Enter sends and
+ Shift+Enter inserts a newline (handled in the editor keymap). */}
+
+ {/* Bottom row: mic on the left; send right */}
+
+
+
+ {voice.isSupported && (
+
+ )}
+
+
+
+ {!compact &&
+ {
+ e.preventDefault();
+ isDraggingRef.current = true;
+ const startX = e.clientX;
+ const startW = width;
+ const sign = direction === "right" ? 1 : -1;
+ const onMove = (ev: MouseEvent) => {
+ if (!isDraggingRef.current) return;
+ onWidthChange(
+ Math.max(min, Math.min(max, startW + sign * (ev.clientX - startX))),
+ );
+ };
+ const onUp = () => {
+ isDraggingRef.current = false;
+ document.removeEventListener("mousemove", onMove);
+ document.removeEventListener("mouseup", onUp);
+ document.body.style.cursor = "";
+ document.body.style.userSelect = "";
+ };
+ document.body.style.cursor = "col-resize";
+ document.body.style.userSelect = "none";
+ document.addEventListener("mousemove", onMove);
+ document.addEventListener("mouseup", onUp);
+ }}
+ />
+ );
+}
diff --git a/studio/src/app/workspace/chat/[[...sessionId]]/page.tsx b/studio/src/app/workspace/chat/[[...sessionId]]/page.tsx
new file mode 100644
index 0000000000..ef81125363
--- /dev/null
+++ b/studio/src/app/workspace/chat/[[...sessionId]]/page.tsx
@@ -0,0 +1,16 @@
+import { ChatWorkspace } from "../_components/chat-workspace";
+
+/**
+ * `/workspace/chat` (a draft with no daemon session yet) and
+ * `/workspace/chat/` are served by one optional-catch-all route,
+ * so moving between them keeps `ChatWorkspace` mounted — a draft's in-flight
+ * stream survives the router.replace to its freshly minted session id.
+ */
+export default async function ChatPage({
+ params,
+}: {
+ params: Promise<{ sessionId?: string[] }>;
+}) {
+ const { sessionId } = await params;
+ return ;
+ onAddToChat: (text: string) => void;
+ /** Omitted = the toolbar offers only the add action (the thread panel). */
+ onAskInSideChat?: (text: string) => void;
+ addLabel?: string;
+ askLabel?: string;
+}) {
+ const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
+ const [selectedText, setSelectedText] = useState("");
+ const toolbarRef = useRef(null);
+
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ const handleMouseUp = () => {
+ requestAnimationFrame(() => {
+ const selection = window.getSelection();
+ const text = selection?.toString().trim();
+ if (!text || text.length < 3) {
+ setPos(null);
+ return;
+ }
+
+ const range = selection?.getRangeAt(0);
+ if (!range) return;
+
+ if (!container.contains(range.commonAncestorContainer)) {
+ setPos(null);
+ return;
+ }
+
+ const rect = range.getBoundingClientRect();
+ const containerRect = container.getBoundingClientRect();
+
+ setSelectedText(text);
+ setPos({
+ x: rect.left + rect.width / 2 - containerRect.left,
+ y: rect.top - containerRect.top - 8,
+ });
+ });
+ };
+
+ const handleMouseDown = (e: MouseEvent) => {
+ if (toolbarRef.current?.contains(e.target as Node)) return;
+ setPos(null);
+ };
+
+ container.addEventListener("mouseup", handleMouseUp);
+ document.addEventListener("mousedown", handleMouseDown);
+ return () => {
+ container.removeEventListener("mouseup", handleMouseUp);
+ document.removeEventListener("mousedown", handleMouseDown);
+ };
+ }, [containerRef]);
+
+ if (!pos) return null;
+
+ return (
+ (null);
+ // Whether the transcript is scrolled to (near) the bottom; when it isn't,
+ // a floating control above the composer jumps back down. The ref mirror is
+ // what the follow effect reads — it must see the value as of the latest
+ // scroll, not the latest render.
+ const [atBottom, setAtBottom] = useState(true);
+ const atBottomRef = useRef(true);
+ const messagesContainerRef = useRef(null);
+ const [showActivity, setShowActivity] = useState(false);
+ const [appendText, setAppendText] = useState(null);
+ const handleAppendConsumed = useCallback(() => setAppendText(null), []);
+
+ // Jump to the latest message whenever the active chat changes so users
+ // always land at the bottom (most-recent) of the conversation.
+ // biome-ignore lint/correctness/useExhaustiveDependencies: scrolling is intentionally driven by session.id changes
+ useEffect(() => {
+ messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
+ atBottomRef.current = true;
+ setAtBottom(true);
+ }, [session.id]);
+
+ // Pinned-follow: while the user sits at the bottom, a sent message and the
+ // streaming response keep the view pinned there; once they scroll up, their
+ // position holds (the floating arrow offers the way back down).
+ // biome-ignore lint/correctness/useExhaustiveDependencies: re-runs on every transcript update by design
+ useEffect(() => {
+ if (!atBottomRef.current) return;
+ const el = messagesContainerRef.current;
+ if (el) el.scrollTop = el.scrollHeight;
+ }, [messages]);
+
+ // The sidebar toggle renders on the header edge nearest the panel it
+ // controls: leading when the session list docks left, trailing when right.
+ const sidebarToggle = (
+
+
+
+
+
+ {sidebarOpen ? "Hide sidebar" : "Show sidebar"}
+
+
+ );
+
+ return (
+ `),
+ * so deep-links, back/forward, and hard reloads resolve to the same chat.
+ * `/workspace/chat` with no id is a draft whose daemon session is minted on
+ * the first send.
+ */
+export function ChatWorkspace({ sessionId }: { sessionId?: string }) {
+ const {
+ sessions,
+ isLoading: sessionsLoading,
+ error: sessionsError,
+ deleteSession,
+ renameSession,
+ refreshSessions,
+ } = useAgentSessions();
+ const { agents } = useAgentRoster();
+ const router = useRouter();
+ const { name: agentName } = useAgentDisplayName();
+ const { side: sidebarSide } = useSessionListSide();
+ const isCompact = useIsCompact();
+ const { confirm, ConfirmDialog } = useConfirm();
+ const { prompt, PromptDialog } = usePrompt();
+
+ // Selection is URL-driven; the state mirror keeps it in sync while also
+ // allowing an optimistic update before the client navigation settles.
+ const [selectedId, setSelectedIdState] = useState(sessionId ?? "");
+ // The id minted for a draft on first send. While the URL settles on that id
+ // the chat hook keeps its draft binding (it already owns the live stream);
+ // re-keying it would wipe the in-flight messages with a transcript refetch.
+ const draftMintedIdRef = useRef(null);
+ useEffect(() => {
+ setSelectedIdState(sessionId ?? "");
+ if (sessionId !== draftMintedIdRef.current) draftMintedIdRef.current = null;
+ }, [sessionId]);
+
+ /**
+ * Select a chat: optimistic state + a native history push. Deliberately not
+ * router.push — moving the optional catch-all between zero and one segments
+ * changes the route shape, which remounts this page; the remount re-runs
+ * the pre-measurement useState inits (sidebarOpen assumes desktop until the
+ * viewport is measured), so on a phone the list rendered straight over the
+ * chat that was just tapped. The App Router syncs its state from native
+ * history updates without remounting.
+ */
+ const selectId = useCallback((id: string) => {
+ setSelectedIdState(id);
+ window.history.pushState(null, "", chatHref(id));
+ }, []);
+
+ const [sidebarOpen, setSidebarOpen] = useState(!isCompact);
+ const wasCompactRef = useRef(isCompact);
+ // Mirrors `sidebarOpen` for reads inside the stable side-panel handler.
+ const sidebarOpenRef = useRef(sidebarOpen);
+ useEffect(() => {
+ sidebarOpenRef.current = sidebarOpen;
+ }, [sidebarOpen]);
+ // Remembers whether the chat list was open before a side panel forced it
+ // closed, so closing the panel restores the user's prior choice.
+ const sidebarBeforeSidePanelRef = useRef(null);
+
+ const handleSidePanelOpenChange = useCallback((open: boolean) => {
+ if (open) {
+ if (sidebarBeforeSidePanelRef.current === null) {
+ sidebarBeforeSidePanelRef.current = sidebarOpenRef.current;
+ setSidebarOpen(false);
+ }
+ } else if (sidebarBeforeSidePanelRef.current !== null) {
+ setSidebarOpen(sidebarBeforeSidePanelRef.current);
+ sidebarBeforeSidePanelRef.current = null;
+ }
+ }, []);
+
+ // Sync sidebar visibility with viewport transitions: entering compact
+ // closes it; leaving compact reopens it.
+ useEffect(() => {
+ const wasCompact = wasCompactRef.current;
+ if (!wasCompact && isCompact) {
+ setSidebarOpen(false);
+ } else if (wasCompact && !isCompact) {
+ setSidebarOpen(true);
+ }
+ wasCompactRef.current = isCompact;
+ }, [isCompact]);
+ const [sidebarWidth, setSidebarWidth] = usePanelWidth();
+
+ const handleSessionCreated = useCallback(
+ (id: string) => {
+ draftMintedIdRef.current = id;
+ setSelectedIdState(id);
+ // Native replaceState, deliberately not router.replace: moving the
+ // optional catch-all from zero segments to one changes the route
+ // shape, which remounts this page — and a remount replaces the chat
+ // hook instance, so the in-flight stream would render into dead
+ // state and the pane would sit empty until a reload. The App Router
+ // syncs its state from native history updates without remounting.
+ window.history.replaceState(null, "", chatHref(id));
+ void refreshSessions();
+ },
+ [refreshSessions],
+ );
+
+ // The draft keeps a null hook id even after its session is minted and the
+ // URL updates — the hook already streams against the minted id internally.
+ const hookSessionId =
+ selectedId && selectedId !== draftMintedIdRef.current ? selectedId : null;
+
+ const {
+ messages,
+ isStreaming,
+ status,
+ error: chatError,
+ harnessLive,
+ sendMessage,
+ retryLast,
+ pendingApproval,
+ respondToApproval,
+ pendingClarification,
+ respondToClarification,
+ usage,
+ } = useAgentChat(hookSessionId, {
+ onSessionCreated: handleSessionCreated,
+ });
+
+ useNavReopenSidebar(setSidebarOpen);
+
+ // Seed for the draft composer, set when a starter prompt is picked.
+ const [draftSeed, setDraftSeed] = useState(null);
+ const clearDraftSeed = useCallback(() => setDraftSeed(null), []);
+
+ const orderedSessions = useMemo(
+ () => [...sessions].sort((a, b) => (b.updatedAt ?? 0) - (a.updatedAt ?? 0)),
+ [sessions],
+ );
+ const groups = useMemo(
+ () => groupSessionsByRecency(orderedSessions),
+ [orderedSessions],
+ );
+
+ const selectedSession = useMemo(() => {
+ if (!selectedId) return undefined;
+ const found = sessions.find((s) => s.id === selectedId);
+ if (found) return found;
+ // A just-minted draft's row may not have landed in the polled list yet;
+ // a stand-in keeps the conversation rendered until the walk catches up.
+ return {
+ id: selectedId,
+ title: "Untitled chat",
+ projectId: null,
+ model: "",
+ createdAt: 0,
+ updatedAt: 0,
+ pinned: false,
+ archived: false,
+ messageCount: 0,
+ isStreaming: false,
+ inputTokens: 0,
+ outputTokens: 0,
+ unread: false,
+ estimatedCost: null,
+ contextLength: null,
+ lastPromptTokens: null,
+ thresholdTokens: null,
+ };
+ }, [selectedId, sessions]);
+
+ const handleSelectSession = useCallback(
+ (id: string) => {
+ selectId(id);
+ if (isCompact) setSidebarOpen(false);
+ },
+ [selectId, isCompact],
+ );
+
+ /** "New chat" opens the draft route; the daemon session is minted on send. */
+ const handleNewChat = useCallback(() => {
+ setSelectedIdState("");
+ router.push(chatHref());
+ if (isCompact) setSidebarOpen(false);
+ }, [router, isCompact]);
+
+ const deselectIfActive = useCallback(
+ (id: string) => {
+ if (id === selectedId) {
+ setSelectedIdState("");
+ router.push(chatHref());
+ }
+ },
+ [selectedId, router],
+ );
+
+ const sessionActions: SessionActions = useMemo(
+ () => ({
+ onRename: async (id: string) => {
+ const s = sessions.find((x) => x.id === id);
+ const name = await prompt({
+ title: "Rename chat",
+ placeholder: "Chat name",
+ defaultValue: s?.title ?? "",
+ confirmText: "Rename",
+ });
+ if (name) await renameSession(id, name);
+ },
+ onDelete: async (id: string) => {
+ const ok = await confirm({
+ title: "Delete chat",
+ description:
+ "This chat and its messages will be permanently deleted.",
+ confirmText: "Delete",
+ destructive: true,
+ });
+ if (!ok) return;
+ await deleteSession(id);
+ deselectIfActive(id);
+ },
+ }),
+ [sessions, prompt, renameSession, confirm, deleteSession, deselectIfActive],
+ );
+
+ // Flattened, in-display-order chat ids for keyboard navigation.
+ const navOrder = useMemo(
+ () => groups.flatMap((g) => g.sessions.map((s) => s.id)),
+ [groups],
+ );
+
+ const navigateBy = useCallback(
+ (forward: boolean) => {
+ if (navOrder.length === 0) return;
+ const cur = navOrder.indexOf(selectedId);
+ const idx =
+ cur === -1
+ ? forward
+ ? 0
+ : navOrder.length - 1
+ : forward
+ ? Math.min(cur + 1, navOrder.length - 1)
+ : Math.max(cur - 1, 0);
+ handleSelectSession(navOrder[idx]);
+ },
+ [navOrder, selectedId, handleSelectSession],
+ );
+
+ useShortcut("chat.new", handleNewChat);
+ useShortcut("chat.toggleList", () => setSidebarOpen((o) => !o));
+ useShortcut("chat.next", () => navigateBy(true));
+ useShortcut("chat.next.vim", () => navigateBy(true));
+ useShortcut("chat.prev", () => navigateBy(false));
+ useShortcut("chat.prev.vim", () => navigateBy(false));
+
+ const sidebarContentProps = {
+ onNewChat: handleNewChat,
+ isLoading: sessionsLoading,
+ error: sessionsError,
+ groups,
+ agents,
+ selectedId,
+ onSelect: handleSelectSession,
+ actions: sessionActions,
+ };
+
+ const dialogs = (
+ <>
+ {ConfirmDialog}
+ {PromptDialog}
+
+ );
+
+ const turnError =
+ status === "error" ? (chatError ?? "The last turn failed.") : null;
+
+ const chatView = (open: boolean, onToggle: () => void) =>
+ selectedSession ? (
+ sessionActions.onRename(selectedSession.id)
+ : undefined
+ }
+ onDelete={
+ selectedSession.canDelete === true
+ ? () => sessionActions.onDelete(selectedSession.id)
+ : undefined
+ }
+ onSidePanelOpenChange={handleSidePanelOpenChange}
+ />
+ ) : null;
+
+ return (
+ ([]);
+
+ useEffect(() => {
+ const lines = clarification.question.split("\n").filter((l) => l.trim());
+ const numbered = lines.filter((l) => /^\d+[.)]\s/.test(l.trim()));
+ if (numbered.length > 0) {
+ setChoices(numbered.map((l) => l.replace(/^\d+[.)]\s*/, "").trim()));
+ }
+ }, [clarification.question]);
+
+ const questionText = clarification.question
+ .split("\n")
+ .filter((l) => !/^\d+[.)]\s/.test(l.trim()))
+ .join("\n")
+ .trim();
+
+ return (
+ (null);
+
+ useEffect(() => {
+ let active = true;
+ setHighlighted(null);
+ highlightCode(source, lang)
+ .then((lines) => {
+ if (active) setHighlighted(lines);
+ })
+ .catch(() => {
+ // Leave the plain fallback in place; highlighting is best-effort.
+ });
+ return () => {
+ active = false;
+ };
+ }, [source, lang]);
+
+ const lines: HLine[] = highlighted ?? source.split("\n").map(plainLine);
+ const gutterWidth = `${String(lines.length).length + 1}ch`;
+
+ return (
+ = {
+ ts: "typescript",
+ tsx: "tsx",
+ js: "javascript",
+ jsx: "jsx",
+ mjs: "javascript",
+ cjs: "javascript",
+ json: "json",
+ py: "python",
+ sh: "bash",
+ bash: "bash",
+ zsh: "bash",
+ go: "go",
+ rs: "rust",
+ java: "java",
+ rb: "ruby",
+ php: "php",
+ c: "c",
+ cpp: "cpp",
+ h: "c",
+ hpp: "cpp",
+ cs: "csharp",
+ kt: "kotlin",
+ swift: "swift",
+ yml: "yaml",
+ yaml: "yaml",
+ toml: "toml",
+ sql: "sql",
+ css: "css",
+ scss: "scss",
+ html: "html",
+ xml: "xml",
+ graphql: "graphql",
+ prisma: "prisma",
+};
+
+/** Resolve a file extension to a Shiki language id (`"text"` when unknown). */
+export function langForExtension(ext: string): string {
+ return EXT_TO_LANG[ext] ?? "text";
+}
+
+let highlighterPromise: Promise | null = null;
+
+function getHighlighter(): Promise {
+ if (!highlighterPromise) {
+ highlighterPromise = createHighlighterCore({
+ themes: [bundledThemes[LIGHT_THEME], bundledThemes[DARK_THEME]],
+ langs: [],
+ engine: createJavaScriptRegexEngine(),
+ });
+ }
+ return highlighterPromise;
+}
+
+interface HToken {
+ readonly content: string;
+ /** Colour under the light theme (or `"inherit"` for plain text). */
+ readonly light: string;
+ /** Colour under the dark theme. */
+ readonly dark: string;
+ readonly italic: boolean;
+ readonly bold: boolean;
+}
+
+export type HLine = readonly HToken[];
+
+/**
+ * Shape of a token when `codeToTokens` runs with multiple themes and
+ * `defaultColor: false`: instead of a single resolved colour, each token gets an
+ * `htmlStyle` map holding one CSS custom property per theme (`--shiki-light`,
+ * `--shiki-dark`) plus any `font-style` / `font-weight`.
+ */
+interface MultiThemeToken {
+ readonly content: string;
+ readonly htmlStyle?: Record;
+}
+
+/**
+ * Tokenize `code` into per-line coloured runs. Unknown/`"text"` languages (or a
+ * grammar that fails to load) come back as one plain token per line so the
+ * caller always renders something.
+ */
+export async function highlightCode(
+ code: string,
+ lang: string,
+): Promise {
+ const highlighter = await getHighlighter();
+
+ let resolvedLang = lang;
+ if (resolvedLang !== "text" && resolvedLang in bundledLanguages) {
+ if (!highlighter.getLoadedLanguages().includes(resolvedLang)) {
+ try {
+ await highlighter.loadLanguage(
+ bundledLanguages[resolvedLang as keyof typeof bundledLanguages],
+ );
+ } catch {
+ resolvedLang = "text";
+ }
+ }
+ } else {
+ resolvedLang = "text";
+ }
+
+ const { tokens } = highlighter.codeToTokens(code, {
+ lang: resolvedLang,
+ themes: { light: LIGHT_THEME, dark: DARK_THEME },
+ defaultColor: false,
+ });
+
+ return (tokens as unknown as MultiThemeToken[][]).map((line) =>
+ line.map((token) => {
+ const style = token.htmlStyle ?? {};
+ return {
+ content: token.content,
+ light: style["--shiki-light"] ?? "inherit",
+ dark: style["--shiki-dark"] ?? "inherit",
+ italic: style["font-style"] === "italic",
+ bold: style["font-weight"] === "bold",
+ };
+ }),
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/markdown-components.tsx b/studio/src/app/workspace/chat/_components/markdown-components.tsx
new file mode 100644
index 0000000000..f26c87d9a9
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/markdown-components.tsx
@@ -0,0 +1,80 @@
+import type { Components } from "react-markdown";
+
+export const mdComponents: Components = {
+ h1: ({ children }) => (
+ {children} ,
+ blockquote: ({ children }) => (
+
, + a: ({ href, children }) => ( + + {children} + + ), + code: ({ className, children }) => { + const isBlock = className?.includes("language-"); + if (isBlock) { + return
+ {children}
+
+ ),
+ th: ({ children }) => (
+
+ {children}
+
+ ),
+ td: ({ children }) => {children} ,
+};
diff --git a/studio/src/app/workspace/chat/_components/message-bubble.test.ts b/studio/src/app/workspace/chat/_components/message-bubble.test.ts
new file mode 100644
index 0000000000..623239048f
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/message-bubble.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { splitLeadingQuote } from "./message-bubble";
+
+describe("splitLeadingQuote", () => {
+ it("splits the leading quote block from the user's words", () => {
+ expect(splitLeadingQuote("> a\n> b\n\nmy question")).toEqual({
+ quote: "a\nb",
+ rest: "my question",
+ });
+ });
+ it("leaves unquoted messages untouched", () => {
+ expect(splitLeadingQuote("plain > not a quote")).toEqual({
+ quote: null,
+ rest: "plain > not a quote",
+ });
+ });
+ it("treats a mid-message quote as plain text", () => {
+ expect(splitLeadingQuote("hello\n> quoted later")).toEqual({
+ quote: null,
+ rest: "hello\n> quoted later",
+ });
+ });
+ it("handles a quote-only message", () => {
+ expect(splitLeadingQuote("> just a quote")).toEqual({
+ quote: "just a quote",
+ rest: "",
+ });
+ });
+});
diff --git a/studio/src/app/workspace/chat/_components/message-bubble.tsx b/studio/src/app/workspace/chat/_components/message-bubble.tsx
new file mode 100644
index 0000000000..52e2550e9b
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/message-bubble.tsx
@@ -0,0 +1,356 @@
+"use client";
+
+import {
+ AlertCircle,
+ Bot,
+ Copy,
+ ExternalLink,
+ FileCode2,
+ FileSpreadsheet,
+ FileText,
+ GitBranch,
+ Image as ImageIcon,
+ User,
+} from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Badge } from "@/components/ui/badge";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { AgentMessage, Artifact } from "@/features/agent";
+import { formatMessageTime } from "@/lib/formatters";
+import {
+ useAgentAvatar,
+ useUserAvatar,
+ useUserDisplayName,
+} from "@/lib/profile-preferences";
+import { cn } from "@/lib/utils";
+import { mdComponents } from "./markdown-components";
+import { ToolCallList } from "./tool-call-list";
+
+function UserAvatar({ small = false }: { small?: boolean }) {
+ const { avatarUrl } = useUserAvatar();
+ // The reply indicator overlaps small avatars, so that size gets a
+ // background ring to separate the stack.
+ const frame = small
+ ? "size-5 shrink-0 ring-2 ring-background"
+ : "size-7 lg:size-9 shrink-0";
+ if (avatarUrl) {
+ return (
+ // biome-ignore lint/performance/noImgElement: a locally stored data URL, not a remote image
+ 
+ );
+ }
+ return (
+
+ );
+ }
+ return (
+
+
+ );
+}
+
+const ARTIFACT_META: Record<
+ string,
+ { icon: typeof FileText; label: string; color: string; bg: string }
+> = {
+ spreadsheet: {
+ icon: FileSpreadsheet,
+ label: "Spreadsheet",
+ color: "text-emerald-600",
+ bg: "bg-emerald-50 dark:bg-emerald-950/40",
+ },
+ document: {
+ icon: FileText,
+ label: "Document",
+ color: "text-blue-600",
+ bg: "bg-blue-50 dark:bg-blue-950/40",
+ },
+ code: {
+ icon: FileCode2,
+ label: "Code",
+ color: "text-violet-600",
+ bg: "bg-violet-50 dark:bg-violet-950/40",
+ },
+ image: {
+ icon: ImageIcon,
+ label: "Image",
+ color: "text-amber-600",
+ bg: "bg-amber-50 dark:bg-amber-950/40",
+ },
+ pdf: {
+ icon: FileText,
+ label: "PDF",
+ color: "text-red-600",
+ bg: "bg-red-50 dark:bg-red-950/40",
+ },
+ markdown: {
+ icon: FileText,
+ label: "Markdown",
+ color: "text-sky-600",
+ bg: "bg-sky-50 dark:bg-sky-950/40",
+ },
+};
+
+function ArtifactCard({
+ artifact,
+ onClick,
+}: {
+ artifact: Artifact;
+ onClick?: () => void;
+}) {
+ const meta = ARTIFACT_META[artifact.type] ?? ARTIFACT_META.document;
+ const Icon = meta.icon;
+
+ return (
+
+ );
+}
+
+export function MessageBubble({
+ message,
+ onOpenArtifact,
+ botName = "Mecatl",
+ showActivity = true,
+}: {
+ message: AgentMessage;
+ onOpenArtifact?: (artifact: Artifact) => void;
+ botName?: string;
+ showActivity?: boolean;
+}) {
+ const isUser = message.role === "user";
+ const { name: userName } = useUserDisplayName();
+
+ if (message.role === "tool") return null;
+
+ const hasToolCalls = message.toolCalls && message.toolCalls.length > 0;
+ const hasContent = message.content?.trim();
+ // Notices and delegations can repeat verbatim within a turn, so rows get
+ // positional ids up front to keep React keys unique.
+ const notices = (message.notices ?? []).map((text, index) => ({
+ id: `${index}:${text}`,
+ text,
+ }));
+ const delegations = (message.delegations ?? []).map((d, index) => ({
+ ...d,
+ id: `${index}:${d.kind}:${d.label}`,
+ }));
+ // A failed turn must always render (never look like an empty success), as
+ // must one that only carries notices or delegation badges.
+ const hasExtras =
+ Boolean(message.failed) || notices.length > 0 || delegations.length > 0;
+
+ if (!isUser && !hasContent && !hasToolCalls && !hasExtras) return null;
+ if (!isUser && !hasContent && hasToolCalls && !showActivity && !hasExtras)
+ return null;
+
+ return (
+ (null);
+
+ if (mode !== "managed" || !isMock) return null;
+
+ const quickTarget =
+ configuredProviders.length === 1 && !toolhiveAvailable
+ ? configuredProviders[0]
+ : configuredProviders.length === 0 && toolhiveAvailable
+ ? "toolhive"
+ : null;
+
+ const handleSwitch = async () => {
+ if (!quickTarget) return;
+ setSwitching(true);
+ setSwitchError(null);
+ try {
+ await switchProvider(quickTarget);
+ } catch (caught) {
+ setSwitchError(caught instanceof Error ? caught.message : String(caught));
+ } finally {
+ setSwitching(false);
+ }
+ };
+
+ return (
+
+ {children}
+
+ actions.onRename(session.id)}
+ title={!canRename ? session.renameReason : undefined}
+ >
+
+ actions.onDelete(session.id)}
+ title={!canDelete ? session.deleteReason : undefined}
+ >
+
+
+
+ );
+}
+
+function SessionRow({
+ session,
+ isSelected,
+ onSelect,
+ actions,
+}: {
+ session: AgentSession;
+ isSelected: boolean;
+ onSelect: (id: string) => void;
+ actions: SessionActions;
+}) {
+ const [menuOpen, setMenuOpen] = useState(false);
+ const isRunning = session.isStreaming || session.state === "running";
+
+ return (
+ []): {
+ tools: string;
+} {
+ const count = toolCalls.length;
+ return {
+ tools: `${count} tool${count === 1 ? "" : "s"}`,
+ };
+}
+
+export function ToolCallList({ toolCalls }: { toolCalls: ToolCallInfo[] }) {
+ const [expanded, setExpanded] = useState(false);
+ const toolNames = toolCalls.map((t) => t.name).join(" · ");
+ const summary = activitySummary(toolCalls);
+
+ return (
+ (),
+ serverCapabilities: {},
+ }),
+}));
+
+describe("useAgentChat", () => {
+ it("opens a draft chat idle: empty transcript, no approval, zero usage", () => {
+ const { result } = renderHook(() => useAgentChat(null));
+ expect(result.current.messages).toEqual([]);
+ expect(result.current.status).toBe("idle");
+ expect(result.current.isStreaming).toBe(false);
+ expect(result.current.harnessLive).toBe(false);
+ expect(result.current.pendingApproval).toBeNull();
+ expect(result.current.usage).toEqual({
+ inputTokens: 0,
+ outputTokens: 0,
+ cacheReadTokens: 0,
+ cacheWriteTokens: 0,
+ reasoningTokens: 0,
+ estimatedCost: null,
+ });
+ });
+
+ it("refuses to send while the daemon is unreachable — no optimistic bubble", async () => {
+ const { result } = renderHook(() => useAgentChat(null));
+ await act(async () => {
+ await result.current.sendMessage("hello");
+ });
+ expect(result.current.messages).toEqual([]);
+ expect(result.current.status).toBe("idle");
+ });
+});
diff --git a/studio/src/features/agent/hooks/use-agent-chat.ts b/studio/src/features/agent/hooks/use-agent-chat.ts
new file mode 100644
index 0000000000..7fb6bdb110
--- /dev/null
+++ b/studio/src/features/agent/hooks/use-agent-chat.ts
@@ -0,0 +1,512 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+ cancelHarnessRun,
+ createHarnessSession,
+ fetchSessionTranscriptMessages,
+ respondToHarnessApproval,
+ streamHarnessPrompt,
+} from "@/lib/harness/client";
+import {
+ encodeSessionPermissionMode,
+ type SessionPermissionMode,
+ type SessionTranscript,
+} from "@/lib/protocol";
+import { useRuntimeStatus } from "../runtime-status";
+import type {
+ AgentMessage,
+ ApprovalChoice,
+ ApprovalRequest,
+ ClarificationRequest,
+ StreamEvent,
+ ToolCallInfo,
+} from "../types";
+
+type ChatStatus =
+ | "idle"
+ | "streaming"
+ | "waiting_approval"
+ | "waiting_clarification"
+ | "error";
+
+function messagesFromTranscript(transcript: SessionTranscript): AgentMessage[] {
+ const messages: AgentMessage[] = [];
+ let sequence = 0;
+ for (const entry of transcript.messages) {
+ sequence += 1;
+ if (entry.role === "user") {
+ messages.push({
+ id: `history-user-${sequence}`,
+ role: "user",
+ content: entry.text,
+ timestamp: 0,
+ });
+ continue;
+ }
+ if (entry.role === "assistant") {
+ messages.push({
+ id: `history-assistant-${sequence}`,
+ role: "assistant",
+ content: entry.text,
+ timestamp: 0,
+ toolCalls: entry.toolCalls.length
+ ? entry.toolCalls.map((call) => ({
+ callId: call.id,
+ name: call.name,
+ input: call.args,
+ status: "completed" as const,
+ }))
+ : undefined,
+ });
+ continue;
+ }
+ // A tool entry resolves the matching call on the latest assistant turn.
+ const result = entry.toolResult;
+ if (!result) continue;
+ for (let index = messages.length - 1; index >= 0; index -= 1) {
+ const message = messages[index];
+ const call = message.toolCalls?.find(
+ (candidate) => candidate.callId === result.callId,
+ );
+ if (call) {
+ call.output = result.content;
+ call.isError = result.isError;
+ call.status = result.isError ? "failed" : "completed";
+ break;
+ }
+ }
+ }
+ if (!transcript.complete && messages.length) {
+ messages[0] = {
+ ...messages[0],
+ notices: [
+ "This transcript could not be proven complete; earlier turns may be missing.",
+ ...(messages[0].notices ?? []),
+ ],
+ };
+ }
+ return messages;
+}
+
+/**
+ * Chat state for one daemon session. Daemon-only: the sidebar id IS the
+ * daemon session id — there is no client-side session mapping and no demo
+ * fallback. Opening a chat rehydrates its history from the authoritative
+ * transcript endpoint; a null id is a draft whose daemon session is minted on
+ * the first send.
+ */
+export function useAgentChat(
+ sessionId: string | null,
+ options?: {
+ onSessionCreated?: (sessionId: string) => void;
+ /** The permission mode a draft's lazily-minted session is created with
+ * (the composer's pending Mode selection). Read at mint time — a ref-like
+ * getter, because the selection can change after this render's closure. */
+ createMode?: () => SessionPermissionMode;
+ /** The composer's pending model pick ("" = auto-routed); read at mint
+ * time like createMode. */
+ createModel?: () => { modelId: string; providerId: string } | null;
+ },
+) {
+ const { connected } = useRuntimeStatus();
+ const [messages, setMessages] = useState([]);
+ const [status, setStatus] = useState("idle");
+ const [error, setError] = useState(null);
+ const [pendingApproval, setPendingApproval] =
+ useState(null);
+ const [pendingClarification] = useState(null);
+ const [usage, setUsage] = useState({
+ inputTokens: 0,
+ outputTokens: 0,
+ cacheReadTokens: 0,
+ cacheWriteTokens: 0,
+ reasoningTokens: 0,
+ estimatedCost: null as number | null,
+ });
+
+ // The daemon session backing this chat: the route id, or the one minted for
+ // a draft on first send. A ref so an in-flight stream keeps its binding
+ // while the parent navigates to the new id.
+ const daemonIdRef = useRef(sessionId);
+ const abortRef = useRef(null);
+ const lastPromptRef = useRef(null);
+
+ const onSessionCreatedRef = useRef(options?.onSessionCreated);
+ onSessionCreatedRef.current = options?.onSessionCreated;
+ const createModeRef = useRef(options?.createMode);
+ createModeRef.current = options?.createMode;
+ const createModelRef = useRef(options?.createModel);
+ createModelRef.current = options?.createModel;
+
+ /**
+ * Rebuilds the message list from the daemon's authoritative transcript.
+ */
+ const rehydrate = useCallback(async (id: string, signal?: AbortSignal) => {
+ const transcript = await fetchSessionTranscriptMessages(id, signal);
+ if (signal?.aborted) return;
+ const rebuilt = messagesFromTranscript(transcript);
+ setMessages(rebuilt);
+ }, []);
+
+ // Opening a chat (or switching chats) rehydrates from the daemon.
+ useEffect(() => {
+ daemonIdRef.current = sessionId;
+ setMessages([]);
+ setPendingApproval(null);
+ setError(null);
+ setStatus("idle");
+ // Usage is per-visit, per-chat: the context meter must not carry one
+ // chat's spend into the next.
+ setUsage({
+ inputTokens: 0,
+ outputTokens: 0,
+ cacheReadTokens: 0,
+ cacheWriteTokens: 0,
+ reasoningTokens: 0,
+ estimatedCost: null,
+ });
+ if (!sessionId || !connected) return;
+ const controller = new AbortController();
+ void rehydrate(sessionId, controller.signal).catch((caught) => {
+ if (controller.signal.aborted) return;
+ setError(caught instanceof Error ? caught.message : String(caught));
+ setStatus("error");
+ });
+ return () => controller.abort();
+ }, [sessionId, connected, rehydrate]);
+
+ /** Builds the per-run stream-event handler the prompt stream drives. */
+ const makeStreamHandler = useCallback(
+ (daemonId: string, ids: { assistant: string }) => {
+ // Every update is a functional setState: tokens and tool results arrive
+ // faster than React commits, so reading the previous array from the
+ // closure would drop frames (rerender-functional-setstate).
+ const patch = (apply: (message: AgentMessage) => AgentMessage) =>
+ setMessages((prev) =>
+ prev.map((message) =>
+ message.id === ids.assistant ? apply(message) : message,
+ ),
+ );
+ return (event: StreamEvent) => {
+ switch (event.type) {
+ case "token":
+ patch((message) => ({
+ ...message,
+ content: message.content + event.text,
+ }));
+ break;
+ case "reasoning":
+ patch((message) => ({
+ ...message,
+ reasoning: (message.reasoning ?? "") + event.text,
+ }));
+ break;
+ case "tool_call": {
+ const call: ToolCallInfo = {
+ callId: event.callId,
+ name: event.name,
+ input: event.input,
+ status: "running",
+ };
+ patch((message) => ({
+ ...message,
+ toolCalls: [...(message.toolCalls ?? []), call],
+ }));
+ break;
+ }
+ case "tool_result":
+ patch((message) => ({
+ ...message,
+ toolCalls: (message.toolCalls ?? []).map((call) =>
+ call.callId === event.callId
+ ? {
+ ...call,
+ output: event.output,
+ isError: event.isError,
+ status: event.isError ? "failed" : "completed",
+ }
+ : call,
+ ),
+ }));
+ break;
+ case "approval":
+ setPendingApproval({
+ approvalId: event.approvalId,
+ sessionId: daemonId,
+ toolName: event.toolName,
+ description: event.description,
+ details: event.details,
+ });
+ setStatus("waiting_approval");
+ break;
+ case "retract":
+ // The ask was withdrawn (e.g. its child was cancelled); the
+ // run is still going.
+ setPendingApproval((current) =>
+ current?.approvalId === event.approvalId ? null : current,
+ );
+ setStatus((current) =>
+ current === "waiting_approval" ? "streaming" : current,
+ );
+ break;
+ case "notice":
+ patch((message) => ({
+ ...message,
+ notices: [...(message.notices ?? []), event.text],
+ }));
+ break;
+ case "delegation":
+ patch((message) => ({
+ ...message,
+ delegations: [
+ ...(message.delegations ?? []),
+ {
+ kind: event.kind,
+ label: event.label,
+ detail: event.detail,
+ childId: event.childId,
+ background: event.background,
+ routingReason: event.routingReason,
+ },
+ ],
+ }));
+ break;
+ case "usage":
+ // The daemon reports per-run figures; the chat total is
+ // their sum. (Lost on reload: the HTTP read surface does
+ // not expose the session's cumulative usage yet.)
+ setUsage((prev) => ({
+ inputTokens: prev.inputTokens + event.inputTokens,
+ outputTokens: prev.outputTokens + event.outputTokens,
+ cacheReadTokens:
+ prev.cacheReadTokens + (event.cacheReadTokens ?? 0),
+ cacheWriteTokens:
+ prev.cacheWriteTokens + (event.cacheWriteTokens ?? 0),
+ reasoningTokens:
+ prev.reasoningTokens + (event.reasoningTokens ?? 0),
+ estimatedCost: event.estimatedCost,
+ }));
+ break;
+ case "run_result":
+ if (event.stop === "error") {
+ const detail =
+ event.errorText || "The run failed without a specific error.";
+ patch((message) => ({
+ ...message,
+ failed: true,
+ failureDetail: event.permanent
+ ? `${detail} (permanent — retrying the identical request cannot succeed)`
+ : detail,
+ toolCalls: (message.toolCalls ?? []).map((call) =>
+ call.status === "running"
+ ? { ...call, status: "failed" as const }
+ : call,
+ ),
+ }));
+ setError(detail);
+ setStatus("error");
+ } else if (event.text) {
+ // A run that produced no deltas (a rehydrated approve, a
+ // recovered run) still carries its final text here.
+ patch((message) => ({
+ ...message,
+ content: message.content || event.text,
+ }));
+ }
+ break;
+ default:
+ break;
+ }
+ };
+ },
+ [],
+ );
+
+ const sendMessage = useCallback(
+ async (content: string) => {
+ if (!connected) return;
+ if (status === "streaming" || status === "waiting_approval") return;
+
+ const userMessage: AgentMessage = {
+ id: `user-${Date.now()}`,
+ role: "user",
+ content,
+ timestamp: Date.now(),
+ };
+
+ setMessages((prev) => [...prev, userMessage]);
+ setStatus("streaming");
+ setError(null);
+ lastPromptRef.current = content;
+
+ const ids = { assistant: `assistant-${Date.now()}` };
+ setMessages((prev) => [
+ ...prev,
+ {
+ id: ids.assistant,
+ role: "assistant",
+ content: "",
+ timestamp: Date.now(),
+ },
+ ]);
+
+ const controller = new AbortController();
+ abortRef.current = controller;
+
+ // Failure patches outside the stream handler target the assistant
+ // bubble.
+ const patch = (apply: (message: AgentMessage) => AgentMessage) =>
+ setMessages((prev) =>
+ prev.map((message) =>
+ message.id === ids.assistant ? apply(message) : message,
+ ),
+ );
+
+ let daemonId = daemonIdRef.current;
+ try {
+ if (!daemonId) {
+ const createModel = createModelRef.current?.() ?? null;
+ daemonId = await createHarnessSession(
+ encodeSessionPermissionMode(createModeRef.current?.() ?? "default"),
+ createModel
+ ? {
+ modelId: createModel.modelId,
+ providerId: createModel.providerId,
+ }
+ : {},
+ );
+ daemonIdRef.current = daemonId;
+ onSessionCreatedRef.current?.(daemonId);
+ }
+ await streamHarnessPrompt(
+ daemonId,
+ content,
+ [],
+ makeStreamHandler(daemonId, ids),
+ controller.signal,
+ );
+ // A parked approval keeps its own status: the stream ends while the
+ // run is still waiting on the operator, and flipping to idle here
+ // would hide the pending prompt. A failed turn keeps its error state.
+ setStatus((current) =>
+ current === "waiting_approval" || current === "error"
+ ? current
+ : "idle",
+ );
+ } catch (caught) {
+ if (controller.signal.aborted) {
+ setStatus("idle");
+ return;
+ }
+ const message =
+ caught instanceof Error ? caught.message : String(caught);
+ setError(message);
+ setStatus("error");
+ patch((current) => ({
+ ...current,
+ failed: true,
+ failureDetail: current.failureDetail ?? message,
+ toolCalls: (current.toolCalls ?? []).map((call) =>
+ call.status === "running"
+ ? { ...call, status: "failed" as const }
+ : call,
+ ),
+ }));
+ } finally {
+ abortRef.current = null;
+ }
+ },
+ [status, connected, makeStreamHandler],
+ );
+
+ /** Re-sends the last prompt after a failure — the error banner's Retry. */
+ const retryLast = useCallback(async () => {
+ if (status === "streaming") return;
+ const prompt = lastPromptRef.current;
+ if (!prompt) return;
+ // Drop the failed exchange so the retry replaces it instead of stacking.
+ setMessages((prev) => {
+ const trimmed = [...prev];
+ while (trimmed.length) {
+ const last = trimmed[trimmed.length - 1];
+ if (last.role === "assistant" && (last.failed || !last.content)) {
+ trimmed.pop();
+ continue;
+ }
+ if (last.role === "user" && last.content === prompt) {
+ trimmed.pop();
+ }
+ break;
+ }
+ return trimmed;
+ });
+ setError(null);
+ setStatus("idle");
+ await sendMessage(prompt);
+ }, [status, sendMessage]);
+
+ const cancelChat = useCallback(async () => {
+ abortRef.current?.abort();
+ if (daemonIdRef.current) {
+ await cancelHarnessRun(daemonIdRef.current);
+ }
+ setStatus("idle");
+ }, []);
+
+ const respondToApproval = useCallback(
+ async (choice: ApprovalChoice) => {
+ const daemonId = daemonIdRef.current;
+ const approvalId = pendingApproval?.approvalId;
+ setPendingApproval(null);
+ // The verdict resumes the SAME run — the prompt stream stays open and
+ // keeps delivering (the daemon acks the approve; only the run's end
+ // closes the stream). Mirror the retract handler: back to streaming,
+ // never idle. The stream's own end handler owns the eventual idle.
+ setStatus((current) =>
+ current === "waiting_approval" ? "streaming" : current,
+ );
+ if (!daemonId || !approvalId) return;
+ try {
+ // The daemon's verdict is three-way. "session" and "always" both map
+ // to allow_always — the daemon models one persistent grant scope, and
+ // splitting hairs the backend does not model would be a lie in the UI.
+ await respondToHarnessApproval(
+ daemonId,
+ approvalId,
+ choice === "deny"
+ ? "deny"
+ : choice === "once"
+ ? "allow_once"
+ : "allow_always",
+ );
+ } catch (caught) {
+ setError(caught instanceof Error ? caught.message : String(caught));
+ setStatus("error");
+ }
+ },
+ [pendingApproval],
+ );
+
+ const respondToClarification = useCallback(async (_response: string) => {
+ setStatus("idle");
+ }, []);
+
+ return {
+ messages,
+ // A parked approval is still an in-flight run daemon-side; the composer
+ // treats both as "run active".
+ isStreaming: status === "streaming" || status === "waiting_approval",
+ status,
+ error,
+ harnessLive: connected,
+ sendMessage,
+ retryLast,
+ cancelChat,
+ pendingApproval,
+ pendingClarification,
+ respondToApproval,
+ respondToClarification,
+ usage,
+ };
+}
diff --git a/studio/src/features/agent/index.ts b/studio/src/features/agent/index.ts
index 15547a93a9..09468e3fa9 100644
--- a/studio/src/features/agent/index.ts
+++ b/studio/src/features/agent/index.ts
@@ -1,4 +1,5 @@
// Hooks
+export { useAgentChat } from "./hooks/use-agent-chat";
export { useAgentCron } from "./hooks/use-agent-cron";
export { useAgentMemory } from "./hooks/use-agent-memory";
export { type RosterAgent, useAgentRoster } from "./hooks/use-agent-roster";
diff --git a/studio/src/hooks/use-confirm.tsx b/studio/src/hooks/use-confirm.tsx
new file mode 100644
index 0000000000..d4e54ae23b
--- /dev/null
+++ b/studio/src/hooks/use-confirm.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { cn } from "@/lib/utils";
+
+interface ConfirmOptions {
+ title?: string;
+ description?: string;
+ confirmText?: string;
+ cancelText?: string;
+ destructive?: boolean;
+}
+
+export function useConfirm() {
+ const [open, setOpen] = useState(false);
+ const [resolvePromise, setResolvePromise] = useState<
+ ((value: boolean) => void) | null
+ >(null);
+ const [options, setOptions] = useState({});
+
+ const confirm = useCallback((opts: ConfirmOptions = {}): Promise => {
+ return new Promise((resolve) => {
+ setOptions(opts);
+ setOpen(true);
+ setResolvePromise(() => resolve);
+ });
+ }, []);
+
+ const handleConfirm = useCallback(() => {
+ setOpen(false);
+ if (resolvePromise) {
+ resolvePromise(true);
+ setResolvePromise(null);
+ }
+ }, [resolvePromise]);
+
+ const handleCancel = useCallback(() => {
+ setOpen(false);
+ if (resolvePromise) {
+ resolvePromise(false);
+ setResolvePromise(null);
+ }
+ }, [resolvePromise]);
+
+ const ConfirmDialog = (
+
+
+
+
+ {options.title || "Are you sure?"}
+
+ {options.description && (
+
+ {options.description}
+
+ )}
+
+
+
+ {options.cancelText || "Cancel"}
+
+
+ {options.confirmText || "Confirm"}
+
+
+
+
+ );
+
+ return { confirm, ConfirmDialog };
+}
diff --git a/studio/src/hooks/use-nav-reopen-sidebar.ts b/studio/src/hooks/use-nav-reopen-sidebar.ts
new file mode 100644
index 0000000000..1455a1a307
--- /dev/null
+++ b/studio/src/hooks/use-nav-reopen-sidebar.ts
@@ -0,0 +1,11 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function useNavReopenSidebar(setSidebarOpen: (open: boolean) => void) {
+ useEffect(() => {
+ const handler = () => setSidebarOpen(true);
+ window.addEventListener("nav-reopen-sidebar", handler);
+ return () => window.removeEventListener("nav-reopen-sidebar", handler);
+ }, [setSidebarOpen]);
+}
diff --git a/studio/src/hooks/use-panel-width.ts b/studio/src/hooks/use-panel-width.ts
new file mode 100644
index 0000000000..8c2718fc98
--- /dev/null
+++ b/studio/src/hooks/use-panel-width.ts
@@ -0,0 +1,45 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+
+/**
+ * One persisted width, shared by every resizable chat panel — the session
+ * list and the threaded/file side panels read and write the same setting, so
+ * a resize in one carries to the others and survives reloads.
+ */
+const STORAGE_KEY = "workspace-panel-width";
+const DEFAULT_WIDTH = 400;
+const MIN_WIDTH = 200;
+const MAX_WIDTH = 720;
+
+const listeners = new Set<() => void>();
+
+function getSnapshot(): number {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (!stored) return DEFAULT_WIDTH;
+ const n = Number(stored);
+ return Number.isFinite(n)
+ ? Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, n))
+ : DEFAULT_WIDTH;
+}
+
+function getServerSnapshot(): number {
+ return DEFAULT_WIDTH;
+}
+
+function subscribe(callback: () => void): () => void {
+ listeners.add(callback);
+ return () => listeners.delete(callback);
+}
+
+export function usePanelWidth() {
+ const width = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+ const setWidth = useCallback((next: number) => {
+ const clamped = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, next));
+ localStorage.setItem(STORAGE_KEY, String(clamped));
+ for (const fn of listeners) fn();
+ }, []);
+
+ return [width, setWidth] as const;
+}
diff --git a/studio/src/hooks/use-prompt.tsx b/studio/src/hooks/use-prompt.tsx
new file mode 100644
index 0000000000..ea315760d4
--- /dev/null
+++ b/studio/src/hooks/use-prompt.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+
+interface PromptOptions {
+ title?: string;
+ description?: string;
+ placeholder?: string;
+ defaultValue?: string;
+ confirmText?: string;
+ cancelText?: string;
+}
+
+export function usePrompt() {
+ const [open, setOpen] = useState(false);
+ const [value, setValue] = useState("");
+ const [resolvePromise, setResolvePromise] = useState<
+ ((value: string | null) => void) | null
+ >(null);
+ const [options, setOptions] = useState({});
+ const inputRef = useRef(null);
+
+ const prompt = useCallback(
+ (opts: PromptOptions = {}): Promise => {
+ return new Promise((resolve) => {
+ setOptions(opts);
+ setValue(opts.defaultValue ?? "");
+ setOpen(true);
+ setResolvePromise(() => resolve);
+ });
+ },
+ [],
+ );
+
+ useEffect(() => {
+ if (open) {
+ const timer = setTimeout(() => inputRef.current?.focus(), 0);
+ return () => clearTimeout(timer);
+ }
+ }, [open]);
+
+ const handleConfirm = useCallback(() => {
+ if (!value.trim()) return;
+ setOpen(false);
+ if (resolvePromise) {
+ resolvePromise(value.trim());
+ setResolvePromise(null);
+ }
+ }, [resolvePromise, value]);
+
+ const handleCancel = useCallback(() => {
+ setOpen(false);
+ if (resolvePromise) {
+ resolvePromise(null);
+ setResolvePromise(null);
+ }
+ }, [resolvePromise]);
+
+ const PromptDialog = (
+
+ );
+
+ return { prompt, PromptDialog };
+}
diff --git a/studio/src/lib/formatters.ts b/studio/src/lib/formatters.ts
index 2f764c003d..4e11b8b86a 100644
--- a/studio/src/lib/formatters.ts
+++ b/studio/src/lib/formatters.ts
@@ -1,3 +1,25 @@
+export function formatRelativeTime(ts: number): string {
+ if (!ts || ts < 1000) return "";
+ try {
+ const diffMs = Date.now() - ts;
+ const diffMin = Math.floor(diffMs / 60000);
+ if (diffMin < 1) return "<1m";
+ if (diffMin < 60) return `${diffMin}m`;
+ const diffHr = Math.floor(diffMin / 60);
+ if (diffHr < 24) return `${diffHr}h`;
+ const diffDay = Math.floor(diffHr / 24);
+ return `${diffDay}d`;
+ } catch {
+ return "";
+ }
+}
+
+export function formatTokens(n: number): string {
+ if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+ if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+ return String(n);
+}
+
const CRON_DAYS = [
"Sunday",
"Monday",
@@ -60,3 +82,13 @@ export function describeCron(expr: string): string {
}
return expr;
}
+
+export function formatMessageTime(ts: number): string {
+ if (!ts || ts < 1000) return "";
+ const d = new Date(ts);
+ return d.toLocaleTimeString(undefined, {
+ hour: "2-digit",
+ minute: "2-digit",
+ hour12: false,
+ });
+}
diff --git a/studio/src/lib/profile-preferences.ts b/studio/src/lib/profile-preferences.ts
index 820025c324..ca00ed804b 100644
--- a/studio/src/lib/profile-preferences.ts
+++ b/studio/src/lib/profile-preferences.ts
@@ -8,6 +8,12 @@ import { useCallback, useEffect, useState } from "react";
* server-side "agent name" or user-identity record — so these live in
* localStorage only, same as the appearance/notification prefs on this page.
*/
+const AGENT_NAME_KEY = "mecatl-studio.agent-name";
+const AVATAR_KEY = "mecatl-studio.user-avatar";
+const USER_NAME_KEY = "mecatl-studio.user-name";
+const AGENT_AVATAR_KEY = "mecatl-studio.agent-avatar";
+const SESSION_LIST_SIDE_KEY = "mecatl-studio.session-list-side";
+const DEFAULT_AGENT_NAME = "Mecatl";
function readLocalStorage(key: string): string | null {
if (typeof window === "undefined") return null;
@@ -28,6 +34,51 @@ function writeLocalStorage(key: string, value: string | null) {
}
}
+/** The agent's display name shown in chat, e.g. "Mecatl" or "Astra". */
+export function useAgentDisplayName() {
+ const [name, setNameState] = useState(DEFAULT_AGENT_NAME);
+ useEffect(() => {
+ const stored = readLocalStorage(AGENT_NAME_KEY);
+ if (stored) setNameState(stored);
+ }, []);
+
+ const setName = useCallback((next: string) => {
+ const trimmed = next.trim();
+ const value = trimmed || DEFAULT_AGENT_NAME;
+ setNameState(value);
+ writeLocalStorage(AGENT_NAME_KEY, trimmed ? value : null);
+ }, []);
+
+ return { name, setName, defaultName: DEFAULT_AGENT_NAME };
+}
+
+function useStoredAvatar(key: string) {
+ const [avatarUrl, setAvatarUrlState] = useState(null);
+ useEffect(() => {
+ setAvatarUrlState(readLocalStorage(key));
+ }, [key]);
+
+ const setAvatarUrl = useCallback(
+ (next: string | null) => {
+ setAvatarUrlState(next);
+ writeLocalStorage(key, next);
+ },
+ [key],
+ );
+
+ return { avatarUrl, setAvatarUrl };
+}
+
+/** The user's profile picture, stored as a data URL (no upload endpoint exists). */
+export function useUserAvatar() {
+ return useStoredAvatar(AVATAR_KEY);
+}
+
+/** The agent's picture, replacing the default bot mark in chat when set. */
+export function useAgentAvatar() {
+ return useStoredAvatar(AGENT_AVATAR_KEY);
+}
+
const UI_SCALE_MIN = 0.85;
const UI_SCALE_MAX = 1.3;
@@ -76,3 +127,45 @@ export function useUiScale() {
return { scale, setScale };
}
+
+export type SessionListSide = "left" | "right";
+
+/**
+ * Which side of the chat the session list docks on. The thread and document
+ * panels stay on the right regardless — only the list moves.
+ */
+export function useSessionListSide() {
+ const [side, setSideState] = useState("right");
+ useEffect(() => {
+ if (readLocalStorage(SESSION_LIST_SIDE_KEY) === "left") {
+ setSideState("left");
+ }
+ }, []);
+
+ const setSide = useCallback((next: SessionListSide) => {
+ setSideState(next);
+ writeLocalStorage(SESSION_LIST_SIDE_KEY, next === "left" ? "left" : null);
+ }, []);
+
+ return { side, setSide };
+}
+
+/**
+ * The user's display name — browser-local, cosmetic. It labels your chat
+ * messages in Studio; the AGENT learns your name in conversation (its memory
+ * stores user/identity/name itself — Studio has no write path into the
+ * daemon's user model by design).
+ */
+export function useUserDisplayName() {
+ const [name, setNameState] = useState("");
+ useEffect(() => {
+ const stored = readLocalStorage(USER_NAME_KEY);
+ if (stored) setNameState(stored);
+ }, []);
+ const setName = useCallback((value: string) => {
+ setNameState(value);
+ const trimmed = value.trim();
+ writeLocalStorage(USER_NAME_KEY, trimmed ? value : null);
+ }, []);
+ return { name, setName };
+}
diff --git a/studio/tests/e2e/fixture-daemon.mjs b/studio/tests/e2e/fixture-daemon.mjs
new file mode 100644
index 0000000000..2a4a696821
--- /dev/null
+++ b/studio/tests/e2e/fixture-daemon.mjs
@@ -0,0 +1,126 @@
+/**
+ * A fixture mecated for e2e: a tiny HTTP server speaking just enough of the
+ * daemon's wire (stdlib-JSON responses, SSE prompt relay) for Studio's
+ * surfaces to render real content through the real proxy tier. This is a test
+ * double behind the API seam — not a UI-level demo fallback, which Studio
+ * forbids.
+ */
+import http from "node:http";
+
+const port = Number(process.env.FIXTURE_DAEMON_PORT || 8099);
+
+const session = {
+ session_id: "session-fixture-1",
+ title: "Fix the flaky scheduler test",
+ state: "idle",
+ turns: 2,
+ model_id: "fixture-model",
+ workspace: "/workspace/fixture",
+ created_at_unix: 1_755_000_000,
+ modified_at_unix: 1_755_003_600,
+ capabilities: {
+ rename: true,
+ delete: true,
+ view_transcript: true,
+ reasons: {},
+ },
+};
+
+const routes = {
+ "GET /v1/models": {
+ models: [{ id: "fixture-model", provider_id: "fixture" }],
+ },
+ "GET /v1/sessions": { sessions: [session], next_cursor: "" },
+ "GET /v1/sessions/session-fixture-1/transcript": {
+ session_id: "session-fixture-1",
+ complete: true,
+ messages: [
+ { role: "user", text: "Why does the scheduler test flake?" },
+ {
+ role: "assistant",
+ text: "The fixture transcript renders: the test races the claim sentinel.",
+ },
+ ],
+ },
+ "GET /v1/schedules": {
+ schedules: [
+ {
+ spec: {
+ name: "nightly-fixture-digest",
+ prompt: "Summarise the day",
+ trigger: { cron: "0 9 * * *" },
+ timezone: "UTC",
+ mode: 2,
+ mutating: false,
+ },
+ state: { enabled: true, fire_count: 3 },
+ },
+ ],
+ },
+ "GET /v1/schedules/nightly-fixture-digest/fires": {
+ fires: [
+ {
+ id: "fire-1",
+ schedule_name: "nightly-fixture-digest",
+ session_id: "sched--nightly-fixture-digest-1",
+ fired_at: { seconds: 1_755_000_000 },
+ stop: "end_turn",
+ },
+ ],
+ },
+ "GET /v1/skills": {
+ skills: [
+ {
+ name: "code-review-fixture",
+ description: "Review a diff for correctness.",
+ },
+ ],
+ },
+ "GET /v1/usermodel": {
+ entries: [
+ {
+ key: "prefers-tabs",
+ description: "The operator prefers tabs over spaces.",
+ },
+ ],
+ size_bytes: 64,
+ sha256: "f".repeat(64),
+ },
+ "GET /v1/agents": {
+ agents: [{ name: "reviewer", description: "Reviews changes." }],
+ },
+ "GET /v1/commands": { commands: [] },
+};
+
+http
+ .createServer((request, response) => {
+ const path = new URL(request.url, "http://fixture").pathname;
+ const key = `${request.method} ${path}`;
+ if (key === "POST /v1/sessions/session-fixture-1/prompt") {
+ response.writeHead(200, { "Content-Type": "text/event-stream" });
+ const frames = [
+ { type: "message.delta", text: "Streaming " },
+ { type: "message.delta", text: "from the fixture." },
+ {
+ type: "result",
+ result: {
+ stop: "end_turn",
+ text: "Streaming from the fixture.",
+ usage: { input_tokens: 10, output_tokens: 5 },
+ },
+ },
+ ];
+ for (const frame of frames)
+ response.write(`data: ${JSON.stringify(frame)}\n\n`);
+ response.end();
+ return;
+ }
+ const body = routes[key];
+ response.writeHead(body ? 200 : 404, {
+ "Content-Type": "application/json",
+ });
+ response.end(JSON.stringify(body ?? { error: `fixture has no ${key}` }));
+ })
+ .listen(port, "127.0.0.1", () => {
+ console.log(`fixture daemon on 127.0.0.1:${port}`);
+ });
diff --git a/studio/tests/e2e/workspace.spec.ts b/studio/tests/e2e/workspace.spec.ts
new file mode 100644
index 0000000000..cdc8037304
--- /dev/null
+++ b/studio/tests/e2e/workspace.spec.ts
@@ -0,0 +1,19 @@
+import { expect, test } from "@playwright/test";
+
+/**
+ * Browser smoke over the real stack: Studio's production build in external
+ * mode → the /api/mecatl proxy → the fixture daemon (tests/e2e/
+ * fixture-daemon.mjs). Assertions are read-only renders of fixture content;
+ * the streaming/approval mechanics are covered by the protocol unit suite
+ * and the hermetic server-tier suite.
+ */
+
+test("the chat list and transcript come from the daemon", async ({ page }) => {
+ await page.goto("/workspace/chat");
+ // The sidebar row is the daemon's session inventory.
+ await page.getByText("Fix the flaky scheduler test").first().click();
+ // Opening the chat rehydrates the authoritative transcript.
+ await expect(
+ page.getByText("the test races the claim sentinel", { exact: false }),
+ ).toBeVisible();
+});
diff --git a/studio/tests/rendered-html.test.mjs b/studio/tests/rendered-html.test.mjs
index 293184b011..e6f4ceaa04 100644
--- a/studio/tests/rendered-html.test.mjs
+++ b/studio/tests/rendered-html.test.mjs
@@ -46,10 +46,8 @@ async function waitForServer(url, child) {
if (child.exitCode !== null)
throw new Error(`Next exited during test startup (${child.exitCode})`);
try {
- // Any HTTP answer means Next is up (the root renders the branded
- // not-found page — a 404 — until the chat route lands in the stack).
const response = await fetch(url);
- if (response.status) return;
+ if (response.ok) return;
} catch {
/* still starting */
}
@@ -125,9 +123,8 @@ after(async () => {
});
test("server-renders Mecatl Studio", async () => {
- // No status assertion: the root redirects into the branded not-found page
- // until the chat route lands in the stack — the SSR proof is the body.
- const response = await fetch(`${studioBaseURL}/`);
+ const response = await fetch(`${studioBaseURL}/workspace/chat`);
+ assert.equal(response.status, 200);
assert.match(response.headers.get("content-type") ?? "", /^text\/html\b/i);
const html = await response.text();
assert.match(html, /Mecatl Studio/);
@@ -214,8 +211,8 @@ test("an unreachable daemon is a friendly 503, never demo content", async () =>
// The page itself still serves — the offline state is the UI's to render —
// and carries no fabricated inventory.
- const page = await fetch(`${offlineBaseURL}/`);
- assert.match(await page.text(), /Mecatl Studio/);
+ const page = await fetch(`${offlineBaseURL}/workspace/chat`);
+ assert.equal(page.status, 200);
});
test("controller policy rejects CSRF and DNS-rebinding requests", () => {
diff --git a/user-docs/building/what-you-get/studio.md b/user-docs/building/what-you-get/studio.md
index abc5d1438f..6319d1eb13 100644
--- a/user-docs/building/what-you-get/studio.md
+++ b/user-docs/building/what-you-get/studio.md
@@ -12,8 +12,9 @@ Studio reads and writes the daemon's state rather than keeping its own.
:::note Landing in progress
Studio is landing as a stacked series of pull requests. This page grows with
-each one; right now the module foundation and the server tier (proxy +
-managed-mode controller) are in the tree, and the surfaces arrive next.
+each one; right now the module foundation, the server tier (proxy + managed-mode
+controller), the typed protocol seam, the workspace shell, and the Chats
+surface are in the tree; the remaining surfaces arrive next.
:::
## Starting it
@@ -47,3 +48,15 @@ never holds a daemon address or credential; Studio's own server tier pins
Host/Origin, injects the bearer and the session workspace server-side, and
allowlists headers in both directions. The decision record is ADR 0288
(`docs/adr/0288-studio-atrium-module.md` in the repo).
+
+## Chats
+
+Chats are the daemon's sessions — there is no separate Studio store. The
+sidebar lists the daemon's session inventory bucketed by recency, with
+capability-gated rename and delete. A new chat is a draft until you send:
+the session is minted on first send, so abandoned drafts never litter the
+daemon. The transcript streams live (text, reasoning, tool activity, and
+delegation badges), failed turns surface as alerts instead of vanishing, and
+permission asks render as three-way approvals (allow once / always / deny)
+that withdraw if the daemon retracts them. @-mentions offer the daemon's
+agent roster and slash commands its command list.
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/chat-view.tsx b/studio/src/app/workspace/chat/_components/chat-view.tsx
new file mode 100644
index 0000000000..5ca893605c
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/chat-view.tsx
@@ -0,0 +1,498 @@
+"use client";
+
+import {
+ AlertCircle,
+ ArrowDown,
+ CirclePlus,
+ Ellipsis,
+ Loader2,
+ MessageCircle,
+ PanelLeftClose,
+ PanelLeftOpen,
+ PanelRightClose,
+ PanelRightOpen,
+ Pencil,
+ RotateCcw,
+ Trash2,
+ Wrench,
+} from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type {
+ AgentMessage,
+ AgentSession,
+ ApprovalChoice,
+ ApprovalRequest,
+ ClarificationRequest,
+} from "@/features/agent";
+import { formatTokens } from "@/lib/formatters";
+import type { SessionListSide } from "@/lib/profile-preferences";
+import { ChatInput } from "../../_components/chat-input";
+import { ApprovalPanel } from "./approval-panel";
+import { ClarificationPanel } from "./clarification-panel";
+import { MessageBubble } from "./message-bubble";
+import { MockProviderNotice } from "./mock-provider-notice";
+
+/**
+ * Bottom-of-transcript activity line while a turn is running: three
+ * staggered pulsing dots, a phase label derived from the streaming
+ * assistant message (thinking / running tools / writing), and elapsed time.
+ */
+function StreamingIndicator({ message }: { message?: AgentMessage }) {
+ const [elapsed, setElapsed] = useState(0);
+ const startedAt = message?.timestamp;
+ useEffect(() => {
+ if (!startedAt) return;
+ const tick = () =>
+ setElapsed(Math.max(0, Math.round((Date.now() - startedAt) / 1000)));
+ tick();
+ const timer = setInterval(tick, 1000);
+ return () => clearInterval(timer);
+ }, [startedAt]);
+
+ const runningTool = message?.toolCalls?.some(
+ (call) => call.status === "running",
+ );
+ const phase = runningTool
+ ? "Running tools"
+ : message?.content
+ ? "Writing"
+ : "Thinking";
+ const time =
+ elapsed >= 60
+ ? `${Math.floor(elapsed / 60)}m ${elapsed % 60}s`
+ : `${elapsed}s`;
+
+ return (
+ // Mirrors the message-row geometry (avatar column + gap) so the label
+ // lines up with message text; the dots sit centered in the avatar slot.
+
+
+ {approval.description}
+
+
+ {toolName}
+
+
+ {destructive && (
+ + This action modifies or deletes data. +
+ )} +
+ {approval.details}
+
+
+
+
+
+
+
+
+
+ {phase}
+ ·
+ {time}
+
+
+ );
+}
+
+/** Token counts as a read-only info row inside the chat context menus. */
+function UsageMenuRow({
+ usage,
+}: {
+ usage?: { inputTokens: number; outputTokens: number } | null;
+}) {
+ if (!usage || usage.inputTokens + usage.outputTokens <= 0) return null;
+ return (
+
+
+ );
+}
+
+function TextSelectionToolbar({
+ containerRef,
+ onAddToChat,
+ onAskInSideChat,
+ addLabel = "Add to chat",
+ askLabel = "Ask in a chat thread",
+}: {
+ containerRef: React.RefObjectToken usage
++ {formatTokens(usage.inputTokens)} input +
++ {formatTokens(usage.outputTokens)} output +
+
+
+ {onAskInSideChat && (
+ <>
+
+
+
+ )}
+
+ );
+}
+
+export function ChatView({
+ session,
+ messages,
+ isStreaming,
+ onSend,
+ botName,
+ usage,
+ error,
+ onRetry,
+ sidebarOpen,
+ sidebarSide,
+ onToggleSidebar,
+ pendingApproval,
+ onRespondApproval,
+ pendingClarification,
+ onRespondClarification,
+ onRename,
+ onDelete,
+ initialDraft,
+ onInitialDraftConsumed,
+}: {
+ session: AgentSession;
+ messages: AgentMessage[];
+ isStreaming: boolean;
+ onSend: (content: string, files?: File[]) => void;
+ botName: string;
+ /** True while the daemon connection is up. */
+ live?: boolean;
+ usage?: { inputTokens: number; outputTokens: number };
+ /** The last turn failed with this text; rendered as an inline strip. */
+ error?: string | null;
+ onRetry?: () => void;
+ sidebarOpen: boolean;
+ sidebarSide: SessionListSide;
+ onToggleSidebar: () => void;
+ pendingApproval: ApprovalRequest | null;
+ onRespondApproval: (choice: ApprovalChoice) => void;
+ pendingClarification: ClarificationRequest | null;
+ onRespondClarification: (response: string) => void;
+ onRename?: () => void;
+ onDelete?: () => void;
+ /** Fires when the right-hand side panel (artifact/attachment) opens or
+ closes, so the parent can collapse the chat list while it's open. */
+ onSidePanelOpenChange?: (open: boolean) => void;
+ /** Plain-text prompt to pre-fill the composer with on mount (a "next step"
+ chip that seeds the message without sending it). */
+ initialDraft?: string | null;
+ onInitialDraftConsumed?: () => void;
+}) {
+ const messagesEndRef = useRef
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/chat-workspace.tsx b/studio/src/app/workspace/chat/_components/chat-workspace.tsx
new file mode 100644
index 0000000000..05f983485e
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/chat-workspace.tsx
@@ -0,0 +1,621 @@
+"use client";
+
+import { Loader2, PanelLeft, PanelRight, SquarePen } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+ type AgentSession,
+ type RosterAgent,
+ useAgentChat,
+ useAgentRoster,
+ useAgentSessions,
+} from "@/features/agent";
+import { useConfirm } from "@/hooks/use-confirm";
+import { useIsCompact } from "@/hooks/use-mobile";
+import { useNavReopenSidebar } from "@/hooks/use-nav-reopen-sidebar";
+import { usePanelWidth } from "@/hooks/use-panel-width";
+import { usePrompt } from "@/hooks/use-prompt";
+import {
+ type SessionListSide,
+ useAgentDisplayName,
+ useSessionListSide,
+} from "@/lib/profile-preferences";
+import { useShortcut } from "@/lib/shortcuts/use-shortcuts";
+import { pageTitleClass } from "@/lib/typography";
+import { cn } from "@/lib/utils";
+import { ChatInput } from "../../_components/chat-input";
+import { ResizeHandle } from "../../_components/resize-handle";
+import { ChatView } from "./chat-view";
+import {
+ AgentList,
+ type SessionActions,
+ SessionList,
+ SidebarGroup,
+} from "./session-sidebar";
+
+/** Route for a chat, or the base (a new draft) when none is selected. */
+const chatHref = (id?: string) =>
+ id ? `/workspace/chat/${id}` : "/workspace/chat";
+
+/** One-click prompts on the draft state, to seed the first message. */
+const STARTER_PROMPTS = [
+ "Summarise what changed in the repo this week",
+ "Draft a plan for a new feature",
+ "Review my open pull requests",
+ "Find and explain a bug in the codebase",
+] as const;
+
+const DAY_MS = 86_400_000;
+
+/**
+ * Bucket recency-sorted sessions into Today / This week / Earlier for the
+ * flat sidebar list. Empty buckets are dropped.
+ */
+function groupSessionsByRecency(
+ sessions: AgentSession[],
+): { label: string; sessions: AgentSession[] }[] {
+ const startOfToday = new Date();
+ startOfToday.setHours(0, 0, 0, 0);
+ const t0 = startOfToday.getTime();
+ const order = ["Today", "This week", "Earlier"] as const;
+ const buckets: Record<(typeof order)[number], AgentSession[]> = {
+ Today: [],
+ "This week": [],
+ Earlier: [],
+ };
+ for (const s of sessions) {
+ const ts = s.updatedAt ?? 0;
+ const label =
+ ts >= t0 ? "Today" : ts >= t0 - 7 * DAY_MS ? "This week" : "Earlier";
+ buckets[label].push(s);
+ }
+ return order
+ .filter((l) => buckets[l].length > 0)
+ .map((l) => ({ label: l, sessions: buckets[l] }));
+}
+
+function SidebarContent({
+ onNewChat,
+ isLoading,
+ error,
+ groups,
+ agents,
+ selectedId,
+ onSelect,
+ actions,
+}: {
+ onNewChat: () => void;
+ isLoading: boolean;
+ error: string | null;
+ groups: { label: string; sessions: AgentSession[] }[];
+ agents: RosterAgent[];
+ selectedId: string;
+ onSelect: (id: string) => void;
+ actions: SessionActions;
+}) {
+ return (
+ <>
+
+
+
+ {sidebarSide === "left" && sidebarToggle}
+ {isStreaming && (
+
+
+
+
+
+ {/* Token usage as the daemon reported it (was a header pill;
+ it lives in the menu now). Hidden until any lands. */}
+ setShowActivity((v) => !v)}>
+
+ {onRename && (
+
+
+ )}
+ {onDelete && (
+
+
+ )}
+
+
+
+
+ + {session.title || "Untitled"} +
+ {sidebarSide === "right" && sidebarToggle} +
+
+ {
+ const el = event.currentTarget;
+ const pinned =
+ el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+ atBottomRef.current = pinned;
+ setAtBottom(pinned);
+ }}
+ className="h-full overflow-y-auto px-3 pt-1 pb-48 max-[499px]:pb-24 lg:px-6 lg:pt-2 lg:pb-56"
+ >
+ setAppendText(text)}
+ />
+
+
+ {messages.map((msg) => (
+
+
+ {!atBottom && (
+
+
+
+
+ )}
+
+ {error && (
+
+
+
+ )}
+ + {error} +
+ {onRetry && ( + + )} +
+
+
+
+
+ New chat
+
+
+
+ + Chat History +
+
+ {error && (
+
+
+ );
+}
+
+/** Draft chat (no daemon session yet): greeting + starter chips, composer docked. */
+function DraftView({
+ onSend,
+ seed,
+ onSeedConsumed,
+ onPickSeed,
+ error,
+ showSidebarButton,
+ sidebarSide,
+ onShowSidebar,
+}: {
+ onSend: (content: string, files?: File[]) => void;
+ seed: string | null;
+ onSeedConsumed: () => void;
+ onPickSeed: (text: string) => void;
+ error: string | null;
+ showSidebarButton: boolean;
+ sidebarSide: SessionListSide;
+ onShowSidebar: () => void;
+}) {
+ return (
+ + {error} +
+ )} + {isLoading ? ( +
+
+ ) : groups.length > 0 ? (
+
+ {groups.map((group) => (
+
+
+ ))}
+
+ ) : (
+ !error && (
+ + No chats yet +
+ ) + )} + {!isLoading && agents.length > 0 && ( + 0 ? "pt-3" : undefined}>
+
+
+
+ )}
+
+ {/* Same header bar as an open chat, so a draft doesn't lose the title
+ row and its controls. */}
+
+ );
+}
+
+/**
+ * The chat workspace: one flat, daemon-backed session list plus the open
+ * conversation. Selection is driven by the URL (`/workspace/chat/
+
+ {/* The composer docks at the bottom exactly like an open chat, so the
+ draft-to-chat transition doesn't move the input under your hands. */}
+ + New chat +
+ {showSidebarButton && ( + + )} +
+
+
+
+
+
+ + What can I help you with? +
+
+ {STARTER_PROMPTS.map((p) => (
+
+ ))}
+
+
+
+
+ {error &&
+ {error}
} +
+ {dialogs}
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/clarification-panel.tsx b/studio/src/app/workspace/chat/_components/clarification-panel.tsx
new file mode 100644
index 0000000000..2627d16de8
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/clarification-panel.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { CircleHelp } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import type { ClarificationRequest } from "@/features/agent";
+
+export function ClarificationPanel({
+ clarification,
+ onRespond,
+}: {
+ clarification: ClarificationRequest;
+ onRespond: (response: string) => void;
+}) {
+ const [input, setInput] = useState("");
+ const [choices, setChoices] = useState
+ {selectedSession ? (
+ chatView(sidebarOpen, () => setSidebarOpen((o) => !o))
+ ) : (
+ setSidebarOpen(true)}
+ />
+ )}
+
+
+ {sidebarOpen &&
+ (isCompact ? (
+ <>
+ {/* Backdrop closes the overlay sidebar on outside click */}
+
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/code-block.test.tsx b/studio/src/app/workspace/chat/_components/code-block.test.tsx
new file mode 100644
index 0000000000..3261ce461d
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/code-block.test.tsx
@@ -0,0 +1,33 @@
+import { render, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { CodeBlock } from "./code-block";
+
+/**
+ * `CodeBlock` renders a synchronous plain fallback and then swaps in Shiki's
+ * highlighted tokens once the grammar loads. Each test waits for that swap
+ * (`data-highlighted="true"`) so the async state update settles inside `act`.
+ * Assertions stay engine-agnostic — row count and preserved text hold in both
+ * the fallback and highlighted states.
+ */
+describe("CodeBlock", () => {
+ it("renders one numbered row per line and preserves the code text", async () => {
+ const code = "const x = 1;\nfunction f() {\n return x;\n}";
+ const { container } = render(
+
+ {questionText || clarification.question}
+ {choices.length > 0 && ( +
+ {choices.map((choice, i) => (
+
+ ))}
+
+
+ )}
+
+ setInput(e.target.value)}
+ placeholder="Type your response..."
+ className="flex-1 rounded-lg border border-info/30 bg-background px-3 py-2 text-sm focus:outline-none focus:border-info"
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && input.trim()) {
+ onRespond(input.trim());
+ setInput("");
+ }
+ }}
+ />
+
+
+
+
+
+ {lines.map((line, i) => (
+ // biome-ignore lint/suspicious/noArrayIndexKey: lines are positional
+
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/code-highlighter.test.ts b/studio/src/app/workspace/chat/_components/code-highlighter.test.ts
new file mode 100644
index 0000000000..867bdfa655
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/code-highlighter.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { highlightCode, langForExtension } from "./code-highlighter";
+
+describe("langForExtension", () => {
+ it("maps known extensions to Shiki language ids", () => {
+ expect(langForExtension("ts")).toBe("typescript");
+ expect(langForExtension("tsx")).toBe("tsx");
+ expect(langForExtension("py")).toBe("python");
+ expect(langForExtension("sh")).toBe("bash");
+ expect(langForExtension("rs")).toBe("rust");
+ });
+
+ it("falls back to plain text for unknown extensions", () => {
+ expect(langForExtension("")).toBe("text");
+ expect(langForExtension("xyz")).toBe("text");
+ });
+});
+
+describe("highlightCode", () => {
+ function textOf(lines: readonly (readonly { content: string }[])[]): string {
+ return lines.map((line) => line.map((t) => t.content).join("")).join("\n");
+ }
+
+ it("splits into one token line per source line and preserves the text", async () => {
+ const code = "const x = 1;\nconst y = 2;";
+ const lines = await highlightCode(code, "typescript");
+ expect(lines.length).toBe(2);
+ expect(textOf(lines)).toBe(code);
+ });
+
+ it("assigns real colours to a known language", async () => {
+ const lines = await highlightCode("const x = 1;", "typescript");
+ const colours = lines.flat().map((t) => t.light);
+ // At least one token is coloured rather than inheriting the foreground.
+ expect(colours.some((c) => c !== "inherit" && c.startsWith("#"))).toBe(
+ true,
+ );
+ });
+
+ it("returns plain tokens for an unknown language without throwing", async () => {
+ const code = "just some words";
+ const lines = await highlightCode(code, "text");
+ expect(textOf(lines)).toBe(code);
+ });
+});
diff --git a/studio/src/app/workspace/chat/_components/code-highlighter.ts b/studio/src/app/workspace/chat/_components/code-highlighter.ts
new file mode 100644
index 0000000000..3b1d13b538
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/code-highlighter.ts
@@ -0,0 +1,145 @@
+import { createHighlighterCore, type HighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import { bundledLanguages } from "shiki/langs";
+import { bundledThemes } from "shiki/themes";
+
+/**
+ * Shiki-backed syntax highlighting for the file-preview code viewer.
+ *
+ * Kept self-contained and CSP-safe: the JavaScript RegExp engine (no
+ * WebAssembly, no `eval`) tokenizes with real TextMate grammars, and both
+ * grammars and themes are loaded from Shiki's own lazy `import()` thunks — one
+ * grammar chunk per language, fetched only the first time that language is
+ * previewed. A single core highlighter is memoized for the session.
+ *
+ * The two GitHub themes are tokenized together (`defaultColor: false`) so each
+ * token carries both a light and a dark colour; the component picks between
+ * them with a CSS `.dark` variant, matching the app's class-based theme switch.
+ */
+
+const LIGHT_THEME = "github-light-default";
+const DARK_THEME = "github-dark-default";
+
+/** File extension → Shiki language id. Unknowns fall back to plain text. */
+const EXT_TO_LANG: Record| + {i + 1} + | ++ {line.length === 0 + ? " " + : line.map((tok, j) => ( + + {tok.content} + + ))} + | +
{children}
+ ), + h2: ({ children }) => ( +{children}
+ ), + h3: ({ children }) => ( +{children}
+ ), + h4: ({ children }) => ( +{children}
+ ), + p: ({ children }) =>{children}
, + ul: ({ children }) => ( +-
+ {children}
+
-
+ {children}
+
+ {children} ++ ), + hr: () =>
, + a: ({ href, children }) => ( + + {children} + + ), + code: ({ className, children }) => { + const isBlock = className?.includes("language-"); + if (isBlock) { + return
{children};
+ }
+ return (
+
+ {children}
+
+ );
+ },
+ pre: ({ children }) => (
+
+ {children}
+
+ ),
+ strong: ({ children }) => {children},
+ em: ({ children }) => {children},
+ table: ({ children }) => (
+
+ {children}
+
+ ),
+ thead: ({ children }) => {children},
+ tbody: ({ children }) => {children},
+ tr: ({ children }) => (
+
+
+ );
+}
+
+function BotAvatar({ small = false }: { small?: boolean }) {
+ const { avatarUrl } = useAgentAvatar();
+ const frame = small
+ ? "size-5 shrink-0 ring-2 ring-background"
+ : "size-7 lg:size-9 shrink-0";
+ if (avatarUrl) {
+ return (
+ // biome-ignore lint/performance/noImgElement: a locally stored data URL, not a remote image
+
+
+ );
+}
+
+/**
+ * Splits the leading "> " blockquote lines off a user message. Add-to-chat
+ * and thread-root quoting compose messages as a quote block, a blank line,
+ * then the user's own words — user text otherwise stays plain (never
+ * markdown-interpreted), so only this one deterministic shape gets styling.
+ */
+export function splitLeadingQuote(content: string): {
+ quote: string | null;
+ rest: string;
+} {
+ const lines = content.split("\n");
+ let i = 0;
+ while (i < lines.length && /^>\s?/.test(lines[i])) i++;
+ if (i === 0) return { quote: null, rest: content };
+ const quote = lines
+ .slice(0, i)
+ .map((line) => line.replace(/^>\s?/, ""))
+ .join("\n");
+ const rest = lines.slice(i).join("\n").replace(/^\n+/, "");
+ return { quote, rest };
+}
+
+function MessageActions({ message }: { message: AgentMessage }) {
+ const copyContent = () => {
+ navigator.clipboard.writeText(message.content).catch(() => {});
+ };
+
+ const btnClass =
+ "flex items-center justify-center size-6 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors";
+
+ return (
+
+
+
+
+
+
+ Copy to clipboard
+
+
+
+
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/mock-provider-notice.tsx b/studio/src/app/workspace/chat/_components/mock-provider-notice.tsx
new file mode 100644
index 0000000000..9aa845fb0e
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/mock-provider-notice.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { TriangleAlert } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useRuntimeStatus } from "@/features/agent/runtime-status";
+
+/**
+ * Warns above the composer when the daemon is answering from the offline
+ * mock rather than a real model, with a one-click way off it: switch
+ * straight to the sole other configured provider when there is exactly one
+ * unambiguous choice, otherwise link to the provider settings page. External
+ * mode owns its own provider (the deployment, not this UI), so it renders
+ * nothing there.
+ */
+export function MockProviderNotice() {
+ const {
+ mode,
+ isMock,
+ configuredProviders,
+ toolhiveAvailable,
+ switchProvider,
+ } = useRuntimeStatus();
+ const [switching, setSwitching] = useState(false);
+ const [switchError, setSwitchError] = useState{isUser ?
+
+ {
+ if (message.artifact) onOpenArtifact(message.artifact);
+ }
+ : undefined
+ }
+ />
+ )}
+
+
+
+ {isUser ? userName || "You" : (message.agentName ?? botName)}
+
+
+ {formatMessageTime(message.timestamp)}
+
+
+ {hasToolCalls && showActivity && message.toolCalls && (
+
+ {delegations.map((d) => (
+
+
+ ))}
+
+ )}
+ {hasContent && (
+
+ {isUser ? (
+ (() => {
+ const { quote, rest } = splitLeadingQuote(message.content);
+ return (
+
+ {message.content}
+
+ )}
+
+ )}
+ {notices.length > 0 && (
+
+ {quote && (
+
+ );
+ })()
+ ) : (
+ + {quote} ++ )} +
{rest}
+
+ {notices.map((notice) => (
+
+ )}
+ {message.failed && (
+ + {notice.text} +
+ ))} +
+
+ )}
+ {message.artifact && (
+
+
+ This turn failed
+ {message.failureDetail && ( ++ {message.failureDetail} +
+ )} +
+
+
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/session-sidebar.tsx b/studio/src/app/workspace/chat/_components/session-sidebar.tsx
new file mode 100644
index 0000000000..2f36257e68
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/session-sidebar.tsx
@@ -0,0 +1,340 @@
+"use client";
+
+import {
+ Bot,
+ ChevronDown,
+ ChevronUp,
+ Ellipsis,
+ Pencil,
+ Trash2,
+} from "lucide-react";
+import { useState } from "react";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { AgentSession, RosterAgent } from "@/features/agent";
+import { formatRelativeTime } from "@/lib/formatters";
+import { cn } from "@/lib/utils";
+
+export interface SessionActions {
+ onRename: (id: string) => void;
+ onDelete: (id: string) => void;
+}
+
+export function SidebarGroup({
+ label,
+ children,
+}: {
+ label: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {switchError && + Running on the offline mock provider — replies are canned, not from a + real model. +
+ {quickTarget ? ( + + ) : ( + + )} +{switchError}
} +
+
+ {label}
+
+ {children}
+
+ );
+}
+
+function SessionContextMenu({
+ session,
+ actions,
+ children,
+ onOpenChange,
+}: {
+ session: AgentSession;
+ actions: SessionActions;
+ children: React.ReactNode;
+ onOpenChange?: (open: boolean) => void;
+}) {
+ // Eligibility comes from the daemon row's capabilities; an omitted
+ // capability is a denial. A disabled item shows the daemon's reason inline
+ // (disabled menu items swallow pointer events, so a tooltip can't open).
+ const canRename = session.canRename === true;
+ const canDelete = session.canDelete === true;
+
+ return (
+
+
+
+ );
+}
+
+export function SessionList({
+ sessions,
+ selectedId,
+ onSelect,
+ actions,
+ cap = 8,
+}: {
+ sessions: AgentSession[];
+ selectedId: string;
+ onSelect: (id: string) => void;
+ actions: SessionActions;
+ /** Rows shown before the Show-more expander (which reveals ALL rows). */
+ cap?: number;
+}) {
+ const [showAll, setShowAll] = useState(false);
+ const visible = showAll ? sessions : sessions.slice(0, cap);
+
+ return (
+
+ {isRunning ? (
+
+ ) : (
+
+ {formatRelativeTime(session.updatedAt)}
+
+ )}
+
+
+
+
+
+ {visible.map((session) => (
+
+ );
+}
+
+/**
+ * The def color hint is frontmatter relayed verbatim, so only a small safe
+ * subset is honored as a CSS color: common named colors or a hex literal.
+ * Anything else falls back to the default muted tint.
+ */
+const AGENT_COLOR_NAMES = new Set([
+ "red",
+ "orange",
+ "amber",
+ "yellow",
+ "lime",
+ "green",
+ "emerald",
+ "teal",
+ "cyan",
+ "sky",
+ "blue",
+ "indigo",
+ "violet",
+ "purple",
+ "magenta",
+ "fuchsia",
+ "pink",
+ "rose",
+ "brown",
+ "gray",
+ "grey",
+]);
+
+function safeAgentColor(color: string): string | undefined {
+ const value = color.trim().toLowerCase();
+ if (AGENT_COLOR_NAMES.has(value)) return value;
+ return /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/.test(value) ? value : undefined;
+}
+
+/** Title-attribute tooltip: description, then the def's scope details. */
+function agentRowTooltip(agent: RosterAgent): string | undefined {
+ const lines: string[] = [];
+ if (agent.description) lines.push(agent.description);
+ const details: string[] = [];
+ details.push(`permissions: ${agent.permissionMode || "default"}`);
+ if (agent.tools.length > 0) details.push(`tools: ${agent.tools.join(", ")}`);
+ lines.push(details.join(" · "));
+ return lines.join("\n");
+}
+
+/**
+ * The daemon's real agent roster, listed below the chat groups. Agents are
+ * not chat containers — selecting one simply starts a new chat draft. Each
+ * row shows the def's pinned model ("auto" when it inherits), tints its
+ * avatar with the def's color hint, and carries tools + permission mode in
+ * the tooltip (D2.2).
+ */
+export function AgentList({
+ agents,
+ onStartChat,
+}: {
+ agents: RosterAgent[];
+ onStartChat: () => void;
+}) {
+ return (
+
+ {agents.map((agent) => {
+ const tint = safeAgentColor(agent.color);
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/studio/src/app/workspace/chat/_components/tool-call-list.test.ts b/studio/src/app/workspace/chat/_components/tool-call-list.test.ts
new file mode 100644
index 0000000000..d782765c45
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/tool-call-list.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { activitySummary } from "./tool-call-list";
+
+const call = (status: "running" | "completed" | "failed") => ({ status });
+
+/**
+ * The collapsed "Activity" line's text: the count fragment, pluralized only
+ * past one call.
+ */
+describe("activitySummary", () => {
+ it("counts every call regardless of status", () => {
+ expect(activitySummary([call("completed"), call("running")])).toEqual({
+ tools: "2 tools",
+ });
+ });
+
+ it("pluralizes only the tool count", () => {
+ expect(activitySummary([call("failed")]).tools).toBe("1 tool");
+ });
+});
diff --git a/studio/src/app/workspace/chat/_components/tool-call-list.tsx b/studio/src/app/workspace/chat/_components/tool-call-list.tsx
new file mode 100644
index 0000000000..eabe4c3532
--- /dev/null
+++ b/studio/src/app/workspace/chat/_components/tool-call-list.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { ChevronRight, Plug } from "lucide-react";
+import { useState } from "react";
+import type { ToolCallInfo } from "@/features/agent";
+import { cn } from "@/lib/utils";
+
+function formatPreview(output: string | undefined): string {
+ if (!output) return "";
+ const clean = output.replace(/\n/g, " ").trim();
+ return clean.length > 120 ? `${clean.slice(0, 120)}...` : clean;
+}
+
+/**
+ * The collapsed summary line's text: "3 tools", pluralized only past one
+ * call. Split so the component can render the count without re-deriving it.
+ */
+export function activitySummary(toolCalls: Pick
+
+ {expanded && (
+
+ );
+}
diff --git a/studio/src/features/agent/hooks/use-agent-chat.test.ts b/studio/src/features/agent/hooks/use-agent-chat.test.ts
new file mode 100644
index 0000000000..79e6ce86d3
--- /dev/null
+++ b/studio/src/features/agent/hooks/use-agent-chat.test.ts
@@ -0,0 +1,41 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useAgentChat } from "./use-agent-chat";
+
+// The hook's network surface is exercised against the fixture daemon (e2e);
+// here we pin the client-side resting shape every later stage builds on.
+vi.mock("../runtime-status", () => ({
+ useRuntimeStatus: () => ({
+ connected: false,
+ features: new Set
+ {toolCalls.map((tc) => (
+
+ )}
+
+
+ ))}
+