@backmatter/studio 0.0.14 → 0.0.16

package/src/chat/ChatMessage.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/chat/ChatMessage.tsx
-import { useState, type ComponentPropsWithoutRef } from "react";
+import { useState, type ComponentPropsWithoutRef, type ReactNode } from "react";
 import Markdown from "react-markdown";
 import * as stylex from "@stylexjs/stylex";
 import { getToolName, isToolUIPart, type UIMessage } from "ai";
@@ -22,7 +22,7 @@ import {
   changesInToolOutput,
   type WriteToolOutput,
 } from "./chat-helpers";
-import { CheckIcon, EyeIcon, FileIcon, SearchIcon, UndoIcon } from "./icons";
+import { CheckIcon, ChevronDownIcon, EyeIcon, FileIcon, SearchIcon, UndoIcon } from "./icons";
 import { pointersFromMetadata } from "./chat-context";
 import { PointerChip, pointerKey } from "./PointerChip";
 import { Reveal } from "./Reveal";
@@ -34,7 +34,7 @@ type ToolPart = Extract<UIMessage["parts"][number], { toolCallId: string }>;
 type ListDocsOutput = { docs: DocCardItem[]; total?: number };
 type SearchDocsOutput = {
   matches: Array<{
-    docRef: { locale: string; type: string; slug: string };
+    docRef: { type: string; slug: string };
     source?: string;
     excerpt?: string;
     title?: string | null;
@@ -79,6 +79,51 @@ function ToolIcon({ name }: { name: string }) {
   return <FileIcon size={12} />;
 }
 
+type TraceRow = {
+  key: string;
+  name: string;
+  label: string;
+  failed: boolean;
+  error: string | null;
+};
+
+function ToolTrace({ rows }: { rows: TraceRow[] }) {
+  const [open, setOpen] = useState(false);
+  if (rows.length === 0) return null;
+  const list = rows.map((row) => (
+    <div key={row.key} {...stylex.props(styles.toolRow, row.failed && styles.toolFailed)}>
+      <ToolIcon name={row.name} />
+      <span>{row.label}</span>
+      {row.error ? <span {...stylex.props(styles.toolError)}>{row.error}</span> : null}
+    </div>
+  ));
+
+  const failed = rows.filter((row) => row.failed).length;
+  const summary = rows.length === 1 ? "1 step" : `${rows.length} steps`;
+  return (
+    <div {...stylex.props(styles.toolBlock)}>
+      <button
+        type="button"
+        aria-expanded={open}
+        aria-label={open ? `Hide ${summary}` : `Show ${summary}`}
+        onClick={() => setOpen((value) => !value)}
+        {...stylex.props(styles.traceToggle)}
+      >
+        <span {...stylex.props(styles.traceChevron, open && styles.traceChevronOpen)}>
+          <ChevronDownIcon />
+        </span>
+        <span>{summary}</span>
+        {failed > 0 ? (
+          <span {...stylex.props(styles.toolFailed)}>
+            {failed === 1 ? "1 failed" : `${failed} failed`}
+          </span>
+        ) : null}
+      </button>
+      {open ? list : null}
+    </div>
+  );
+}
+
 const md = {
   p: (p: ComponentPropsWithoutRef<"p">) => <p {...p} {...stylex.props(mdStyles.p)} />,
   ul: (p: ComponentPropsWithoutRef<"ul">) => <ul {...p} {...stylex.props(mdStyles.list)} />,
@@ -213,108 +258,107 @@ export function ChatMessage({
     );
   }
 
-  return (
-    <div {...stylex.props(styles.assistant)}>
-      {parts.map((part, i) => {
-        if (part.type === "text") {
-          const text = streaming ? trimPartialPlaceholder(part.text) : part.text;
-          if (!text.trim()) return null;
-          const segments = splitDocsPlaceholders(text);
-          let n = 0;
-          return segments.map((seg, j) => {
-            if (seg.kind === "docs") {
-              const target = placeholderTarget.get(`${i}:${n++}`);
-              if (target === undefined) return null;
-              return (
-                <Reveal key={`${i}-docs-${j}`} active={streaming} origin="start">
-                  {renderDocCard(target, `${i}-docs-${j}`)}
-                </Reveal>
-              );
-            }
-            return (
-              <Reveal key={`${i}-${j}`} active={streaming} origin="start">
-                <div {...stylex.props(styles.markdown)}>
-                  <Markdown components={md}>{seg.text}</Markdown>
-                </div>
-              </Reveal>
-            );
-          });
-        }
-        if (part.type === "reasoning") return null;
-        if (isToolUIPart(part)) {
-          const tp = part as ToolPart;
-          if (tp.state !== "output-available" && tp.state !== "output-error") return null;
-          const name = getToolName(tp);
-          const label = toolLabel(
-            name,
-            tp.input,
-            tp.state === "output-available" ? tp.output : undefined,
-            tp.state,
-          );
-          const write = isWriteTool(name);
-          const commit = isCommitTool(name);
-          const out = tp.state === "output-available" ? (tp.output as WriteToolOutput) : null;
-          const failed =
-            tp.state === "output-error" ||
-            (out !== null && (write || commit) && !out.ok);
-          const written = write && out && out.ok ? changesInToolOutput(out) : [];
-          // Doc lists placed inline via [[docs]] are not repeated here. While
-          // streaming, the placeholder usually arrives a moment after the tool
-          // result, so hold the fallback back until the stream has ended;
-          // otherwise the card would jump from here to its inline position.
-          const docList =
-            tp.state === "output-available" && !inlined.has(i) && !streaming
-              ? docListFromTool(name, tp.output)
-              : null;
-          const cards = written.map((raw) => {
-            const change = {
-              ...(session.changes[raw.id] ?? raw),
-              summary: session.changes[raw.id]?.summary ?? raw.summary,
-            };
-            const viewStatus = presentedChangeStatus(change, stack);
-            return { change, viewStatus };
-          });
-          return (
-            <Reveal key={tp.toolCallId} active={streaming} origin="start">
-              <div {...stylex.props(styles.toolBlock)}>
-                <div {...stylex.props(styles.toolRow, failed && styles.toolFailed)}>
-                  <ToolIcon name={name} />
-                  <span>{label}</span>
-                  {failed ? (
-                    <span {...stylex.props(styles.toolError)}>
-                      {tp.state === "output-error"
-                        ? tp.errorText
-                        : (out as { message?: string } | null)?.message}
-                    </span>
-                  ) : null}
-                </div>
-                {docList ? (
-                  <DocListCard
-                    items={docList.items}
-                    total={docList.total}
-                    workspaceId={workspaceId}
-                    emptyLabel={name === "searchDocs" ? "No matches" : "No documents"}
-                  />
-                ) : null}
-                {cards.map(({ change, viewStatus }) =>
-                  viewStatus ? (
-                    <ChangeCard
-                      key={change.id}
-                      change={{ ...change, status: viewStatus }}
-                      workspaceId={workspaceId}
-                      busy={busyId === change.id}
-                      canAct={canAct && !streaming}
-                      onKeep={() => void act(change.id, () => session.keep(change.id))}
-                      onUndo={() => void act(change.id, () => session.undo(change.id))}
-                    />
-                  ) : null,
-                )}
-              </div>
-            </Reveal>
+  const flow: ReactNode[] = [];
+  const traceRows: TraceRow[] = [];
+  let traceSlotted = false;
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (part.type === "text") {
+      const text = streaming ? trimPartialPlaceholder(part.text) : part.text;
+      if (!text.trim()) continue;
+      const segments = splitDocsPlaceholders(text);
+      let n = 0;
+      for (let j = 0; j < segments.length; j++) {
+        const seg = segments[j];
+        if (seg.kind === "docs") {
+          const target = placeholderTarget.get(`${i}:${n++}`);
+          if (target === undefined) continue;
+          flow.push(
+            <Reveal key={`${i}-docs-${j}`} active={streaming} origin="start">
+              {renderDocCard(target, `${i}-docs-${j}`)}
+            </Reveal>,
           );
+          continue;
         }
-        return null;
-      })}
+        flow.push(
+          <Reveal key={`${i}-${j}`} active={streaming} origin="start">
+            <div {...stylex.props(styles.markdown)}>
+              <Markdown components={md}>{seg.text}</Markdown>
+            </div>
+          </Reveal>,
+        );
+      }
+      continue;
+    }
+    if (part.type === "reasoning" || !isToolUIPart(part)) continue;
+    const tp = part as ToolPart;
+    if (tp.state !== "output-available" && tp.state !== "output-error") continue;
+    const name = getToolName(tp);
+    const label = toolLabel(
+      name,
+      tp.input,
+      tp.state === "output-available" ? tp.output : undefined,
+      tp.state,
+    );
+    const write = isWriteTool(name);
+    const commit = isCommitTool(name);
+    const out = tp.state === "output-available" ? (tp.output as WriteToolOutput) : null;
+    const failed =
+      tp.state === "output-error" || (out !== null && (write || commit) && !out.ok);
+    const error = failed
+      ? (tp.state === "output-error"
+          ? tp.errorText
+          : (out as { message?: string } | null)?.message) ?? null
+      : null;
+    traceRows.push({ key: tp.toolCallId, name, label, failed, error });
+    if (!traceSlotted) {
+      traceSlotted = true;
+      flow.push(<ToolTrace key="trace" rows={traceRows} />);
+    }
+    const written = write && out && out.ok ? changesInToolOutput(out) : [];
+    // Doc lists placed inline via [[docs]] are not repeated here. While
+    // streaming, the placeholder usually arrives a moment after the tool
+    // result, so hold the fallback back until the stream has ended;
+    // otherwise the card would jump from here to its inline position.
+    const docList =
+      tp.state === "output-available" && !inlined.has(i) && !streaming
+        ? docListFromTool(name, tp.output)
+        : null;
+    if (docList) {
+      flow.push(
+        <DocListCard
+          key={`${tp.toolCallId}-docs`}
+          items={docList.items}
+          total={docList.total}
+          workspaceId={workspaceId}
+          emptyLabel={name === "searchDocs" ? "No matches" : "No documents"}
+        />,
+      );
+    }
+    for (const raw of written) {
+      const change = {
+        ...(session.changes[raw.id] ?? raw),
+        summary: session.changes[raw.id]?.summary ?? raw.summary,
+      };
+      const viewStatus = presentedChangeStatus(change, stack);
+      if (!viewStatus) continue;
+      flow.push(
+        <ChangeCard
+          key={change.id}
+          change={{ ...change, status: viewStatus }}
+          workspaceId={workspaceId}
+          busy={busyId === change.id}
+          canAct={canAct && !streaming}
+          onKeep={() => void act(change.id, () => session.keep(change.id))}
+          onUndo={() => void act(change.id, () => session.undo(change.id))}
+        />,
+      );
+    }
+  }
+
+  return (
+    <div {...stylex.props(styles.assistant)}>
+      {flow}
       {applied.length > 1 && canAct && !streaming ? (
         <div {...stylex.props(styles.bulk)}>
           <span {...stylex.props(styles.bulkLabel)}>
@@ -389,6 +433,31 @@ const styles = stylex.create({
     flexDirection: "column",
     gap: space.sm,
   },
+  traceToggle: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.sm,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    font: "inherit",
+    fontSize: type.sm,
+    color: colors.textMuted,
+    cursor: "pointer",
+    textAlign: "left",
+  },
+  traceChevron: {
+    display: "inline-flex",
+    transform: "rotate(-90deg)",
+    transitionProperty: "transform",
+    transitionDuration: "120ms",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0ms",
+    },
+  },
+  traceChevronOpen: {
+    transform: "rotate(0deg)",
+  },
   toolRow: {
     display: "flex",
     alignItems: "center",

package/src/chat/ChatPanel.tsx

@@ -32,6 +32,7 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
   const session = useChatSession();
   const visible = isPanelVisible(ui.panel.mode);
   const fullscreen = ui.panel.mode === "fullscreen";
+  const docked = Boolean(ui.codeSessionId);
   const threadId = session.thread?.id ?? null;
   const knownIds = useRef<Set<string> | null>(null);
   const seenThread = useRef<string | null | undefined>(undefined);
@@ -50,7 +51,9 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
     resetKey: threadId,
     pinKey: anchorId,
     slotRef,
-    deps: [session.messages, session.status, viewportTick],
+    // The composer growing changes this viewport. That is not a new message,
+    // and following it scrolls the thread on every line the person types.
+    deps: [session.messages, session.status],
   });
 
   if (seenThread.current !== threadId) {
@@ -75,7 +78,7 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
 
   const contextRows = Math.max(
     1,
-    (ui.focus && ui.includeFocus ? 1 : 0) + ui.mentions.length,
+    (ui.focus && ui.includeFocus ? 1 : 0) + (ui.route ? 1 : 0) + ui.mentions.length,
   );
   const contextReserve = contextRows * CONTEXT_ROW_HEIGHT + CONTEXT_BAR_PADDING + 12;
 
@@ -153,7 +156,11 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
       aria-label="AI chat"
       data-backmatter-panel=""
       {...stylex.props(
-        fill ? styles.panelFill : styles.panel,
+        fill
+          ? ui.codeSessionId
+            ? styles.panelColumnFill
+            : styles.panelFill
+          : styles.panel,
         site && styles.panelSite,
         !fill && fullscreen && styles.panelFull,
       )}
@@ -193,37 +200,41 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
               Back to chat
             </button>
           )}
-          <span {...stylex.props(styles.divider)} />
-          <Tooltip label="Minimize (Esc)">
-            <button
-              type="button"
-              aria-label="Minimize"
-              onClick={() => ui.dispatch({ type: "minimize" })}
-              {...stylex.props(styles.iconBtn)}
-            >
-              <MinimizeIcon />
-            </button>
-          </Tooltip>
-          <Tooltip label={fullscreen ? "Exit fullscreen" : "Fullscreen"}>
-            <button
-              type="button"
-              aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
-              onClick={() => ui.dispatch({ type: "toggleFullscreen" })}
-              {...stylex.props(styles.iconBtn)}
-            >
-              {fullscreen ? <CollapseIcon /> : <ExpandIcon />}
-            </button>
-          </Tooltip>
-          <Tooltip label="Close">
-            <button
-              type="button"
-              aria-label="Close"
-              onClick={() => ui.dispatch({ type: "close" })}
-              {...stylex.props(styles.iconBtn)}
-            >
-              <CloseIcon />
-            </button>
-          </Tooltip>
+          {docked ? null : (
+            <>
+              <span {...stylex.props(styles.divider)} />
+              <Tooltip label="Minimize (Esc)">
+                <button
+                  type="button"
+                  aria-label="Minimize"
+                  onClick={() => ui.dispatch({ type: "minimize" })}
+                  {...stylex.props(styles.iconBtn)}
+                >
+                  <MinimizeIcon />
+                </button>
+              </Tooltip>
+              <Tooltip label={fullscreen ? "Exit fullscreen" : "Fullscreen"}>
+                <button
+                  type="button"
+                  aria-label={fullscreen ? "Exit fullscreen" : "Fullscreen"}
+                  onClick={() => ui.dispatch({ type: "toggleFullscreen" })}
+                  {...stylex.props(styles.iconBtn)}
+                >
+                  {fullscreen ? <CollapseIcon /> : <ExpandIcon />}
+                </button>
+              </Tooltip>
+              <Tooltip label="Close">
+                <button
+                  type="button"
+                  aria-label="Close"
+                  onClick={() => ui.dispatch({ type: "close" })}
+                  {...stylex.props(styles.iconBtn)}
+                >
+                  <CloseIcon />
+                </button>
+              </Tooltip>
+            </>
+          )}
         </div>
       </header>
 
@@ -353,6 +364,15 @@ const styles = stylex.create({
     overflow: "hidden",
     backgroundColor: colors.bgPanel,
   },
+  panelColumnFill: {
+    position: "relative",
+    flex: 1,
+    minHeight: 0,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    backgroundColor: colors.bgPanel,
+  },
   header: {
     display: "flex",
     alignItems: "center",