@backmatter/studio 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.28",
+    "@backmatter/core": "^0.0.34",
     "@base-ui/react": "^1.6.0",
     "@central-icons-react/round-outlined-radius-2-stroke-1.5": "1.2.15",
     "@dnd-kit/abstract": "^0.5.0",

package/src/WorkspaceRoutes.tsx

@@ -3,7 +3,7 @@
 // a site Studio mounts the same tree under its base path.
 import { Route } from "react-router";
 import { WorkspaceLayout } from "./pages/WorkspaceLayout";
-import { WorkspaceHomeRedirect } from "./pages/WorkspaceHomeRedirect";
+import { WorkspaceHomePage } from "./pages/WorkspaceHomePage";
 import { TypeDocsPage } from "./pages/TypeDocsPage";
 import { SettingsGeneralPage } from "./pages/SettingsGeneralPage";
 import { SettingsUsagePage } from "./pages/SettingsUsagePage";
@@ -15,6 +15,7 @@ import { SettingsUsersPage } from "./pages/SettingsUsersPage";
 import { GithubConnectPage } from "./pages/GithubConnectPage";
 import { DocEditorPage } from "./pages/DocEditorPage";
 import { MediaGalleryPage } from "./pages/MediaGalleryPage";
+import CodeSessionPage from "./pages/CodeSessionPage";
 
 /**
  * Returns `<Route>` elements. Spread the result inside a `<Routes>`; react-router
@@ -23,8 +24,10 @@ import { MediaGalleryPage } from "./pages/MediaGalleryPage";
 export function workspaceRoutes() {
   return (
     <Route path="/:workspaceSlug" element={<WorkspaceLayout />}>
-      <Route index element={<WorkspaceHomeRedirect />} />
+      <Route index element={<WorkspaceHomePage />} />
+      <Route path="content" element={<TypeDocsPage />} />
       <Route path="content/:type" element={<TypeDocsPage />} />
+      <Route path="code" element={<CodeSessionPage />} />
       <Route element={<SettingsLayout />}>
         <Route path="settings" element={<SettingsIndexRedirect />} />
         <Route path="settings/general" element={<SettingsGeneralPage />} />

package/src/api.ts

@@ -23,6 +23,7 @@ async function api<T>(path: string, init?: RequestInit): Promise<T> {
     const body = (await res.json().catch(() => ({}))) as {
       error?: string;
       details?: string[];
+      paths?: string[];
     };
     if (res.status === 401 || res.status === 426) reportUnauthorized(res.status, body.error);
     const code = body.error ?? `request failed: ${res.status}`;
@@ -33,7 +34,7 @@ async function api<T>(path: string, init?: RequestInit): Promise<T> {
     const err = new Error(`${code}${detailSuffix}`) as ApiError;
     err.status = res.status;
     err.code = body.error;
-    err.details = body.details;
+    err.details = body.details ?? body.paths;
     throw err;
   }
   return res.json() as Promise<T>;
@@ -355,6 +356,11 @@ export type SchemaField = {
   fields?: Record<string, SchemaField>;
   /** Studio input name from `field.text({ input })`; see `defineStudio`. */
   input?: string;
+  options?: string[];
+  min?: number;
+  max?: number;
+  step?: number;
+  where?: Record<string, string | number | boolean>;
 };
 
 export type BlockSnapshot = {
@@ -371,6 +377,8 @@ export type SchemaPayload = {
     singleton?: boolean;
     indexSlug?: string;
     format?: "mdx" | "page";
+    external?: boolean;
+    template?: string;
     fields: Record<string, SchemaField>;
   }>;
   blocks?: BlockSnapshot[];
@@ -400,10 +408,21 @@ export type GitChange = {
   type: string;
   slug: string;
   status: ChangeStatus;
+  /** Working-tree edit time. Present on git status; absent when derived from the document list. */
+  updatedAt?: string;
 };
 
 export type GitHead = { sha: string; updatedAt: string };
 
+/** A commit on the branch, newest first. `cms` means Studio wrote it. */
+export type RecentCommit = {
+  sha: string;
+  message: string;
+  author: string;
+  committedAt: string;
+  cms: boolean;
+};
+
 /** `git status` for the current user on their checked-out branch. */
 export type GitState = {
   defaultBranch: string;
@@ -413,6 +432,10 @@ export type GitState = {
   githubError?: "installation_missing" | "github_list_failed" | null;
   head: GitHead | null;
   changes: GitChange[];
+  /** Last git status list, including deletions and edit times. */
+  fetchedChanges?: GitChange[];
+  /** Latest commits on the branch, once git status has been fetched. */
+  recentCommits?: RecentCommit[];
 };
 
 export function countConflicts(state: Pick<GitState, "changes"> | null | undefined) {
@@ -466,6 +489,46 @@ export function commitWorkspace(workspaceId: string, message?: string) {
   });
 }
 
+export type CodeSessionEditList = {
+  files: Array<{ path: string; deleted: boolean }>;
+  skipped: Array<{ path: string; reason: string }>;
+  foldPending: boolean;
+};
+
+export function fetchCodeSessionEdits(workspaceId: string, sessionId: string) {
+  return api<CodeSessionEditList>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/edits`,
+  );
+}
+
+export function updateCodeSessionBranch(workspaceId: string, sessionId: string) {
+  return api<{ ok: true; baseSha: string }>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/update`,
+    { method: "POST" },
+  );
+}
+
+export function clearCodeSessionEdits(workspaceId: string, sessionId: string) {
+  return api<{ ok: true; baseSha: string }>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/clear-edits`,
+    { method: "POST" },
+  );
+}
+
+export function commitCodeSessionEdits(
+  workspaceId: string,
+  sessionId: string,
+  message?: string,
+) {
+  return api<{ ok: true; commitSha: string; foldErrors: string[] }>(
+    `/workspaces/${workspaceId}/code-sessions/${sessionId}/commit`,
+    {
+      method: "POST",
+      body: JSON.stringify(message?.trim() ? { message: message.trim() } : {}),
+    },
+  );
+}
+
 /** Default commit message the server uses when none is given (mirrored for the placeholder). */
 export function defaultCommitMessage(changes: GitChange[]) {
   if (changes.length === 1) {
@@ -701,6 +764,8 @@ export type ChatThread = {
   workspaceId: string;
   userId: string;
   branch: string;
+  /** Null for an editor thread; a code session id for a session thread. */
+  codeSessionId?: string | null;
   title: string;
   createdAt: string;
   updatedAt: string;
@@ -728,10 +793,11 @@ export type ChatChangeSummary = {
   workspaceId: string;
   userId: string;
   branch: string;
-  resourceKind: "content";
+  resourceKind: "content" | "code";
+  path: string | null;
   type: string;
   slug: string;
-  op: "write" | "create";
+  op: "write" | "create" | "delete";
   beforeSource: ContentSource | null;
   diff: ChatChangeDiff | null;
   status: ChatChangeStatus;
@@ -740,14 +806,23 @@ export type ChatChangeSummary = {
   summary?: string;
 };
 
-export function fetchThreads(workspaceId: string) {
-  return api<{ threads: ChatThread[] }>(`/workspaces/${workspaceId}/ai/threads`);
+export function fetchThreads(workspaceId: string, codeSessionId?: string) {
+  const query = codeSessionId
+    ? `?codeSessionId=${encodeURIComponent(codeSessionId)}`
+    : "";
+  return api<{ threads: ChatThread[] }>(`/workspaces/${workspaceId}/ai/threads${query}`);
 }
 
-export function createThread(workspaceId: string, title?: string) {
+export function createThread(
+  workspaceId: string,
+  opts?: { title?: string; codeSessionId?: string },
+) {
+  const body: { title?: string; codeSessionId?: string } = {};
+  if (opts?.title) body.title = opts.title;
+  if (opts?.codeSessionId) body.codeSessionId = opts.codeSessionId;
   return api<{ thread: ChatThread }>(`/workspaces/${workspaceId}/ai/threads`, {
     method: "POST",
-    body: JSON.stringify(title ? { title } : {}),
+    body: JSON.stringify(body),
   });
 }
 

package/src/chat/ChangeCard.tsx

@@ -28,8 +28,14 @@ export function ChangeCard({
 }) {
   const [expanded, setExpanded] = useState(false);
   const nav = useWorkspaceNav();
-  const label = `${change.type}/${change.slug}`;
-  const to = nav ? contentDocPath(nav.workspaceSlug, change.type, change.slug) : "#";
+  const label =
+    change.resourceKind === "code"
+      ? (change.path ?? "")
+      : `${change.type}/${change.slug}`;
+  const to =
+    change.resourceKind === "code" || !nav
+      ? "#"
+      : contentDocPath(nav.workspaceSlug, change.type, change.slug);
   const status = change.status;
 
   return (

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";
@@ -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",