@stigmer/react 3.0.9-dev.20260615153829 → 3.1.0

package/src/session/inspector/useSessionInspector.ts

@@ -9,7 +9,6 @@ import type { SelectedThreadItem } from "../../internal/store/selection-store";
 export type SessionInspectorTabId =
   | "workspace"
   | "configure"
-  | "plan"
   | "changes"
   | "artifacts"
   | "usage"
@@ -32,29 +31,34 @@ export interface UseSessionInspectorReturn {
 }
 
 /**
- * Compute the system-suggested tab from execution phase and selection.
+ * Compute the system-suggested tab from selection.
  *
  * Priority:
  * 1. Thread item selected -> "inspect"
- * 2. No execution or terminal phase (idle / ready for follow-up) -> "workspace"
- * 3. Actively running -> "plan"
+ * 2. Otherwise -> "workspace"
+ *
+ * Live execution progress (the agent's plan and todos) now renders inline in
+ * the message thread as a {@link TodoCard}, not in a sidebar tab — so a running
+ * execution no longer steers the inspector to a dedicated facet.
  */
 function deriveAutoTab(
-  phase: ExecutionPhase | null,
   selectedItem: SelectedThreadItem | null,
 ): SessionInspectorTabId {
   if (selectedItem) return "inspect";
-  if (phase === null || isTerminalPhase(phase)) return "workspace";
-  return "plan";
+  return "workspace";
 }
 
 /**
  * Build the contextual tab list with badges.
  *
  * Tab order follows the user's mental model — context before output:
- * Workspace → Config → Plan → Usage. Changes and Artifacts appear
- * after Plan when data exists; Inspect appears last when a thread item
- * is selected.
+ * Workspace → Config → Usage. Changes and Artifacts appear after Config
+ * when data exists; Inspect appears last when a thread item is selected.
+ *
+ * The Changes tab surfaces only when git write-backs (PRs) exist, badged
+ * with their count. Local-workspace file edits never surface a tab: they
+ * render in the transcript (stamped edit rows + the per-turn decision bar),
+ * which is their single review surface.
  */
 export function buildVisibleTabs(opts: {
   hasWriteBacks: boolean;
@@ -67,7 +71,6 @@ export function buildVisibleTabs(opts: {
   const tabs: TabItem[] = [
     { id: "workspace", label: "Workspace" },
     { id: "configure", label: "Config" },
-    { id: "plan", label: "Plan" },
   ];
 
   if (opts.hasWriteBacks) {
@@ -111,12 +114,16 @@ export function useSessionInspector(
 
   const tabs = buildVisibleTabs({ hasWriteBacks, writeBackCount, hasArtifacts, artifactCount, hasUsage, selectedItem });
 
+  // A write-back (the session's only tab-worthy change source) surfaces and
+  // auto-selects the Changes tab on first arrival.
+  const hasChanges = hasWriteBacks;
+
   const [activeTab, setActiveTab] = useState<SessionInspectorTabId>(
-    () => deriveAutoTab(phase, selectedItem),
+    () => deriveAutoTab(selectedItem),
   );
   const [prevPhase, setPrevPhase] = useState(phase);
   const [prevSelected, setPrevSelected] = useState(selectedItem);
-  const [prevHasWriteBacks, setPrevHasWriteBacks] = useState(hasWriteBacks);
+  const [prevHasChanges, setPrevHasChanges] = useState(hasChanges);
   const userPickedTabRef = useRef(false);
 
   // Selection changed → auto-switch to inspect (unless user picked)
@@ -126,7 +133,7 @@ export function useSessionInspector(
       setActiveTab("inspect");
     }
     if (!selectedItem && activeTab === "inspect") {
-      setActiveTab(deriveAutoTab(phase, null));
+      setActiveTab(deriveAutoTab(null));
       userPickedTabRef.current = false;
     }
   }
@@ -138,25 +145,25 @@ export function useSessionInspector(
     setPrevPhase(phase);
     if (wasTerminal !== isNowTerminal) {
       userPickedTabRef.current = false;
-      setActiveTab(deriveAutoTab(phase, selectedItem));
+      setActiveTab(deriveAutoTab(selectedItem));
     }
   }
 
   // First write-back arrived → auto-switch to changes
-  if (hasWriteBacks && !prevHasWriteBacks) {
-    setPrevHasWriteBacks(hasWriteBacks);
+  if (hasChanges && !prevHasChanges) {
+    setPrevHasChanges(hasChanges);
     if (!userPickedTabRef.current) {
       setActiveTab("changes");
     }
   }
-  if (hasWriteBacks !== prevHasWriteBacks) {
-    setPrevHasWriteBacks(hasWriteBacks);
+  if (hasChanges !== prevHasChanges) {
+    setPrevHasChanges(hasChanges);
   }
 
   // Ensure active tab is valid (the selected tab may have been removed)
   const effectiveTab = tabs.some((t) => t.id === activeTab)
     ? activeTab
-    : deriveAutoTab(phase, selectedItem);
+    : deriveAutoTab(selectedItem);
 
   const onTabChange = useCallback((tabId: string) => {
     userPickedTabRef.current = true;

package/src/session/useSessionConversation.ts

@@ -3,7 +3,8 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
 import type { PendingApproval } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/approval_pb";
-import { ApprovalAction, ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import type { FileChangeSet } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/filereview_pb";
+import { ApprovalAction, ExecutionPhase, FileChangeSetStatus, FileDecisionAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
 import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_pb";
 import type { McpServerUsage as ProtoMcpServerUsage } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/spec_pb";
 import type { WorkspaceEntry as ProtoWorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
@@ -23,6 +24,7 @@ import { useCreateAgentExecution } from "../execution/useCreateAgentExecution";
 import { useExecutionStream } from "../execution/useExecutionStream";
 import { useAgentExecutionActions } from "../execution/useAgentExecutionActions";
 import { useSubmitApproval } from "../execution/useSubmitApproval";
+import { useFileReview, type FileDecisionOptions } from "../execution/useFileReview";
 import { useSession } from "./useSession";
 import { useSessionExecutions } from "./useSessionExecutions";
 import { useUpdateSession } from "./useUpdateSession";
@@ -196,11 +198,48 @@ export interface UseSessionConversationReturn {
   ) => Promise<void>;
   /** Set of tool call IDs currently being submitted for approval. */
   readonly submittingApprovalIds: ReadonlySet<string>;
-  /** Error from the last approval submission, or `null` when healthy. */
+  /**
+   * Per-tool-call approval failures, keyed by `toolCallId` — surfaced in-card by
+   * {@link MessageThread}/{@link ApprovalCard} beside the gate that failed
+   * (inline row or bottom backstop). The keyed parallel of
+   * {@link submittingApprovalIds}.
+   */
+  readonly approvalErrors: ReadonlyMap<string, Error>;
+  /**
+   * Error from the last approval submission, or `null` when healthy — the scalar
+   * mirror of {@link approvalErrors} (symmetric with `fileReviewError`), for a
+   * headless consumer wanting a single error value (e.g. the `ink` surface).
+   */
   readonly approvalError: Error | null;
-  /** Reset `approvalError` to `null`. */
+  /** Reset every approval error (both {@link approvalErrors} and `approvalError`). */
   readonly clearApprovalError: () => void;
 
+  /** Captured change sets awaiting file review on the active execution, empty when none. */
+  readonly fileChangeSets: readonly FileChangeSet[];
+  /** Submit a file-review decision for a change set. The executionId is managed internally. */
+  readonly submitFileDecision: (
+    changeSetId: string,
+    action: FileDecisionAction,
+    options?: FileDecisionOptions,
+  ) => Promise<void>;
+  /** Decision keys ({@link fileDecisionKey}) currently being submitted. */
+  readonly submittingFileDecisionKeys: ReadonlySet<string>;
+  /**
+   * Per-decision failures, keyed by {@link fileDecisionKey} — surfaced in-card
+   * by {@link MessageThread}/{@link FileReviewCard} beside the failed control.
+   */
+  readonly fileDecisionErrors: ReadonlyMap<string, Error>;
+  /** Clear the error for one decision key (e.g. before a retry of that target). */
+  readonly clearFileDecisionError: (key: string) => void;
+  /**
+   * The most-recent file-review failure, or `null` when healthy — the scalar
+   * mirror of {@link fileDecisionErrors} (symmetric with `approvalError`), for a
+   * headless consumer wanting a single error value.
+   */
+  readonly fileReviewError: Error | null;
+  /** Reset every file-review error (both {@link fileDecisionErrors} and `fileReviewError`). */
+  readonly clearFileReviewError: () => void;
+
   /**
    * `true` when the active execution can be stopped — i.e. it is in a phase
    * the backend accepts a cancel/terminate from (`PENDING` or `IN_PROGRESS`).
@@ -337,9 +376,18 @@ export function useSessionConversation(
   const {
     submitApproval: rawSubmitApproval,
     submittingToolCallIds,
+    errorsByToolCallId: approvalErrors,
     error: approvalError,
     clearError: clearApprovalError,
   } = useSubmitApproval();
+  const {
+    submitFileDecision: rawSubmitFileDecision,
+    submittingDecisionKeys,
+    decisionErrors: fileDecisionErrors,
+    clearDecisionError: clearFileDecisionError,
+    error: fileReviewError,
+    clearError: clearFileReviewError,
+  } = useFileReview();
 
   // Local execution: attach the session's runner worker while it is open and
   // detach it on close. No-op for cloud sessions or when no adapter is set.
@@ -578,6 +626,26 @@ export function useSessionConversation(
     [activeExecutionId, rawSubmitApproval],
   );
 
+  const fileChangeSets = useMemo<readonly FileChangeSet[]>(
+    () =>
+      (activeStreamExecution?.status?.fileChangeSets ?? []).filter(
+        (cs) => cs.status === FileChangeSetStatus.AWAITING_REVIEW,
+      ),
+    [activeStreamExecution],
+  );
+
+  const submitFileDecision = useCallback(
+    async (
+      changeSetId: string,
+      action: FileDecisionAction,
+      options?: FileDecisionOptions,
+    ): Promise<void> => {
+      if (!activeExecutionId) return;
+      await rawSubmitFileDecision(activeExecutionId, changeSetId, action, options);
+    },
+    [activeExecutionId, rawSubmitFileDecision],
+  );
+
   const isLoading = sessionLoading || executionsLoading;
   const loadError = sessionError || executionsError;
 
@@ -605,9 +673,18 @@ export function useSessionConversation(
     pendingApprovals,
     submitApproval,
     submittingApprovalIds: submittingToolCallIds,
+    approvalErrors,
     approvalError,
     clearApprovalError,
 
+    fileChangeSets,
+    submitFileDecision,
+    submittingFileDecisionKeys: submittingDecisionKeys,
+    fileDecisionErrors,
+    clearFileDecisionError,
+    fileReviewError,
+    clearFileReviewError,
+
     isStoppable,
     stop,
     isStopping: stopActions.isSubmitting,

package/src/session/useSessionFileChanges.ts

@@ -0,0 +1,207 @@
+"use client";
+
+import { useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import type { FileChange } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import { FileChangeSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
+import {
+  FileChangeCaptureLevel,
+  FileChangeType,
+} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { displayFileChangeSets, toDisplayFileChange } from "@stigmer/sdk";
+
+/** Return value of {@link useSessionFileChanges}. */
+export interface UseSessionFileChangesReturn {
+  /**
+   * One {@link FileChange} per file touched in the session — the *net*
+   * change for that path (see the net-diff note below) — ordered for a
+   * file-list (modified, then created/renamed, then deleted; alphabetical
+   * within each group).
+   */
+  readonly fileChanges: readonly FileChange[];
+  /** `true` when at least one file was changed across all executions. */
+  readonly hasFileChanges: boolean;
+  /** Number of distinct files changed. */
+  readonly fileChangeCount: number;
+}
+
+/**
+ * Pure derivation hook that aggregates an agent's file changes across every
+ * execution in a session into one net change per file. A headless building
+ * block for platform builders composing a consolidated session-changes surface
+ * (typically paired with {@link FileChangesView}); the Console itself renders
+ * file changes in the transcript (stamped edit rows + the per-turn decision
+ * bar) and does not consume this hook.
+ *
+ * **Source (ledger-first).** Under apply-then-review the changes live in the
+ * file-review ledger; {@link displayFileChangeSets} reads the server's live
+ * projection or folds the durable ledger for a terminal execution (whose
+ * projection is nil), and each captured change is projected onto the display
+ * {@link FileChange} via {@link toDisplayFileChange}. A pre-capture
+ * (legacy) execution has no ledger, so it falls back to the tool-call-coupled
+ * `ToolCall.file_changes` (#186; removed in a later slice with that field). The
+ * two sources are mutually exclusive per execution, so there is no double count.
+ *
+ * **Traversal.** The ledger is execution-scoped and already includes sub-agent
+ * captures (DD-19), so the primary path is one pass per execution. The legacy
+ * fallback walks the same surfaces the server-side approval recompute and
+ * `MessageThread` walk: `status.messages[].toolCalls` **and**
+ * `status.subAgentExecutions[].messages[].toolCalls`. Executions are visited in
+ * chronological order, so each path's change list is chronological.
+ *
+ * **Net-diff (not latest-wins).** `useSessionWriteBacks`/`useSessionArtifacts`
+ * dedup by "latest wins" because each entry is a *snapshot* (a PR; a file's
+ * final bytes). A {@link FileChange} is a *delta* — an agent often rewrites the
+ * same file several times in a turn, and showing only the last edit's diff
+ * would misrepresent what changed. So changes to the same path are reduced to a
+ * single net change: `before` from the first change, `after` from the last.
+ * Because a WHOLE_FILE `after` is a complete file snapshot, `first.before →
+ * last.after` is exactly the net change. A group with one change (the common
+ * case) is passed through untouched; multi-edit groups synthesize a net
+ * {@link FileChange} so every consumer speaks one proto type (DD-007).
+ *
+ * Counts and unified diffs for whole-file captures stay derivable by the
+ * presentation layer (the runner emits 0/"" sentinels), matching the contract
+ * the SDK `tool-view` established.
+ *
+ * @param executions - All executions for a session, in chronological order.
+ *   Pass both completed and active-stream executions.
+ *
+ * @example
+ * ```tsx
+ * const allExecutions = [
+ *   ...conv.completedExecutions,
+ *   ...(conv.activeStreamExecution ? [conv.activeStreamExecution] : []),
+ * ];
+ * const { fileChanges, hasFileChanges } = useSessionFileChanges(allExecutions);
+ * ```
+ *
+ * @see useSessionWriteBacks — git-mode (PR) counterpart, which does drive the
+ *   inspector's Changes tab
+ * @see useFileChangeContent — resolves a change's before/after text for diffing
+ * @see FileChangesView — component that renders this data
+ */
+export function useSessionFileChanges(
+  executions: readonly AgentExecution[],
+): UseSessionFileChangesReturn {
+  return useMemo(() => {
+    // Path -> chronological list of raw changes to that path.
+    const groups = new Map<string, FileChange[]>();
+    // Preserve first-seen path order as a stable tiebreaker before sorting.
+    const collect = (change: FileChange) => {
+      const key = change.path || change.absolutePath;
+      if (!key) return;
+      const list = groups.get(key);
+      if (list) list.push(change);
+      else groups.set(key, [change]);
+    };
+
+    for (const execution of executions) {
+      // The file-review ledger is the single source under apply-then-review: the
+      // display seam reads the live projection or folds the durable ledger for a
+      // terminal execution, and the execution-scoped ledger already covers
+      // sub-agent captures (DD-19), so one pass suffices. Each CapturedFileChange
+      // is projected onto the display FileChange the net-collapse + renderer speak.
+      const capturedChanges = displayFileChangeSets(execution.status).flatMap(
+        (set) => set.changes,
+      );
+      for (const captured of capturedChanges) collect(toDisplayFileChange(captured));
+    }
+
+    const fileChanges = Array.from(groups.values(), netChange);
+    fileChanges.sort(fileChangeComparator);
+
+    return {
+      fileChanges,
+      hasFileChanges: fileChanges.length > 0,
+      fileChangeCount: fileChanges.length,
+    };
+  }, [executions]);
+}
+
+/**
+ * Reduces a path's chronological change list to a single net change.
+ * A one-change group is returned as-is (the common path, no allocation);
+ * multi-edit groups synthesize a net {@link FileChange}.
+ */
+function netChange(changes: FileChange[]): FileChange {
+  if (changes.length === 1) return changes[0];
+
+  const first = changes[0];
+  const last = changes[changes.length - 1];
+  const changeType = netChangeType(first, last);
+
+  // Whole-file only when both chosen sides come from whole-file captures;
+  // otherwise fall back to the last change's hunk diff. A path edited by a
+  // single harness won't mix levels — this just stays honest if it ever does.
+  const wholeFile =
+    first.captureLevel === FileChangeCaptureLevel.WHOLE_FILE &&
+    last.captureLevel === FileChangeCaptureLevel.WHOLE_FILE;
+
+  if (wholeFile) {
+    return create(FileChangeSchema, {
+      path: last.path,
+      absolutePath: last.absolutePath,
+      changeType,
+      captureLevel: FileChangeCaptureLevel.WHOLE_FILE,
+      before: first.before,
+      after: last.after,
+      renameFrom: changeType === FileChangeType.RENAME ? first.renameFrom : "",
+    });
+  }
+
+  return create(FileChangeSchema, {
+    path: last.path,
+    absolutePath: last.absolutePath,
+    changeType,
+    captureLevel: FileChangeCaptureLevel.HUNK_ONLY,
+    unifiedDiff: last.unifiedDiff,
+    linesAdded: last.linesAdded,
+    linesRemoved: last.linesRemoved,
+    renameFrom: changeType === FileChangeType.RENAME ? first.renameFrom : "",
+  });
+}
+
+/**
+ * Reconciles the net `change_type` of a path from its first and last change.
+ *
+ * Intent: the badge should describe the file's journey across the *whole*
+ * session, anchored on its two endpoints, in this precedence:
+ *
+ * 1. Ends deleted (`last` is DELETE) → DELETE. The file is gone, regardless of
+ *    how it got there — this includes create-then-delete, which we deliberately
+ *    surface as DELETE rather than hiding the path. (`before` then comes from
+ *    the first change, which for a created-then-deleted file is empty, so the
+ *    diff reads as the removal of whatever briefly existed.)
+ * 2. Started created (`first` is CREATE) and still exists → CREATE. A file born
+ *    this session and later modified is, on net, a new file.
+ * 3. Started renamed (`first` is RENAME) and still exists → RENAME, carrying the
+ *    original `rename_from` so the move is preserved across later edits.
+ * 4. Otherwise → MODIFY (the common multi-edit case).
+ */
+function netChangeType(first: FileChange, last: FileChange): FileChangeType {
+  if (last.changeType === FileChangeType.DELETE) return FileChangeType.DELETE;
+  if (first.changeType === FileChangeType.CREATE) return FileChangeType.CREATE;
+  if (first.changeType === FileChangeType.RENAME) return FileChangeType.RENAME;
+  return FileChangeType.MODIFY;
+}
+
+// Most-actionable first (modified), then additions (create/rename), then
+// deletions — mirroring GitHub's file-list convention — alphabetical within
+// each group so the list is stable and scannable.
+const CHANGE_TYPE_ORDER: Readonly<Record<FileChangeType, number>> = {
+  [FileChangeType.MODIFY]: 0,
+  [FileChangeType.CREATE]: 1,
+  [FileChangeType.RENAME]: 1,
+  [FileChangeType.DELETE]: 2,
+  [FileChangeType.UNSPECIFIED]: 3,
+};
+
+function fileChangeComparator(a: FileChange, b: FileChange): number {
+  const order =
+    (CHANGE_TYPE_ORDER[a.changeType] ?? 3) -
+    (CHANGE_TYPE_ORDER[b.changeType] ?? 3);
+  if (order !== 0) return order;
+  return a.path.localeCompare(b.path, undefined, { sensitivity: "base" });
+}

package/src/styles.css

@@ -1,7 +1,21 @@
 @source "./**/*.{ts,tsx}";
 @source "../node_modules/streamdown/dist/*.js";
 
-@layer stgm;
+/* Declare the standard Tailwind layer order plus our `stgm` utilities layer
+   LAST. In a host app the host's `@import "tailwindcss"` already declares
+   `theme, base, components, utilities` first, so re-stating them here is a
+   harmless no-op that simply pins `stgm` after them; in the standalone SDK build
+   it establishes the full order explicitly.
+
+   Why this matters: the preflight-style reset below (which zeroes `border-width`)
+   MUST live in `base`, not in a layer above `utilities`. When this stylesheet is
+   recompiled by a host's Tailwind v4, the SDK's `border-*` utilities are emitted
+   into the host's `utilities` layer (Tailwind v4 emits each utility once) — NOT
+   into `stgm`. A reset placed in any layer after `utilities` therefore wins and
+   silently zeroes every `border` inside `.stgm`. Keeping the reset in `base`
+   (exactly where stock Tailwind keeps preflight) guarantees the utilities win in
+   the host build, the standalone build, and a third-party embed alike. */
+@layer theme, base, components, utilities, stgm;
 
 @import "tailwindcss/theme.css" layer(stgm);
 @import "tailwindcss/utilities.css" layer(stgm);
@@ -66,6 +80,7 @@
   --color-muted-foreground-subtle: var(--stgm-muted-foreground-subtle);
   --color-muted-foreground-faint: var(--stgm-muted-foreground-faint);
   --color-border-muted: var(--stgm-border-muted);
+  --color-border-prominent: var(--stgm-border-prominent);
   --color-backdrop: var(--stgm-backdrop);
   --color-sidebar: var(--stgm-sidebar);
   --color-sidebar-foreground: var(--stgm-sidebar-foreground);
@@ -115,15 +130,15 @@
   z-index: var(--stgm-z-popover);
 }
 
-@layer stgm {
-  .stgm {
-    --stgm-motion-duration: 150ms;
-    --stgm-motion-easing: var(--stgm-transition-timing, ease-out);
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
+/* Preflight-style reset, scoped to `.stgm`. Lives in the standard `base` layer —
+   exactly where stock Tailwind keeps its preflight — so it ranks BELOW the
+   `utilities` layer where `border-*` utilities are emitted (see the layer
+   declaration at the top of this file). It supplies only the DEFAULTS
+   (`border-style: solid`, width 0, themed color) that a `border` utility then
+   builds on; because `utilities` outranks `base`, the utility's width always
+   wins. Putting this in a layer after `utilities` (the previous `stgm-base`) is
+   what silently zeroed every border inside `.stgm`. */
+@layer base {
   .stgm *,
   .stgm *::before,
   .stgm *::after {
@@ -132,6 +147,16 @@
     border-style: solid;
     border-color: var(--stgm-border, currentColor);
   }
+}
+
+@layer stgm {
+  .stgm {
+    --stgm-motion-duration: 150ms;
+    --stgm-motion-easing: var(--stgm-transition-timing, ease-out);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
   @keyframes stgm-fade-in-up {
     from {
@@ -186,3 +211,91 @@
     }
   }
 }
+
+@layer stgm {
+  /* Syntax highlighting for fenced code blocks (issue #183).
+     lowlight (highlight.js) emits these `hljs-*` token classes; we map each
+     onto a shared `--stgm-syntax-*` theme token so highlighted code tracks the
+     host's preset and color-mode with zero hardcoded colors — the same token
+     contract the CodeMirror YAML editor uses. Scoped to `.stgm` so nothing
+     leaks into the host application. */
+  .stgm .hljs {
+    color: var(--stgm-foreground);
+  }
+
+  .stgm .hljs-comment,
+  .stgm .hljs-quote {
+    color: var(--stgm-syntax-comment);
+    font-style: italic;
+  }
+
+  .stgm .hljs-keyword,
+  .stgm .hljs-selector-tag,
+  .stgm .hljs-subst {
+    color: var(--stgm-syntax-keyword);
+  }
+
+  .stgm .hljs-literal,
+  .stgm .hljs-symbol,
+  .stgm .hljs-bullet {
+    color: var(--stgm-syntax-bool);
+  }
+
+  .stgm .hljs-string,
+  .stgm .hljs-regexp,
+  .stgm .hljs-addition,
+  .stgm .hljs-template-tag,
+  .stgm .hljs-template-variable,
+  .stgm .hljs-meta .hljs-string {
+    color: var(--stgm-syntax-string);
+  }
+
+  .stgm .hljs-number {
+    color: var(--stgm-syntax-number);
+  }
+
+  .stgm .hljs-title,
+  .stgm .hljs-title.function_,
+  .stgm .hljs-title.class_,
+  .stgm .hljs-section,
+  .stgm .hljs-built_in,
+  .stgm .hljs-type {
+    color: var(--stgm-syntax-property);
+  }
+
+  .stgm .hljs-attr,
+  .stgm .hljs-attribute,
+  .stgm .hljs-property,
+  .stgm .hljs-variable,
+  .stgm .hljs-params,
+  .stgm .hljs-selector-attr,
+  .stgm .hljs-selector-pseudo,
+  .stgm .hljs-selector-class,
+  .stgm .hljs-selector-id {
+    color: var(--stgm-syntax-property);
+  }
+
+  .stgm .hljs-tag,
+  .stgm .hljs-name {
+    color: var(--stgm-syntax-tag);
+  }
+
+  .stgm .hljs-meta,
+  .stgm .hljs-meta .hljs-keyword,
+  .stgm .hljs-doctag {
+    color: var(--stgm-syntax-meta);
+  }
+
+  .stgm .hljs-link,
+  .stgm .hljs-deletion {
+    color: var(--stgm-syntax-atom);
+  }
+
+  .stgm .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .stgm .hljs-strong {
+    font-weight: 600;
+  }
+}

package/src/version-history/DiffViewer.tsx

@@ -63,8 +63,7 @@ export function DiffViewer({ hunks, filePath, className }: DiffViewerProps) {
       <table className="w-full border-collapse" role="table">
         <thead className="sr-only">
           <tr>
-            <th scope="col">Old line</th>
-            <th scope="col">New line</th>
+            <th scope="col">Line</th>
             <th scope="col">Change</th>
             <th scope="col">Content</th>
           </tr>
@@ -97,7 +96,7 @@ function HunkRows({
       {!isFirst && (
         <tr>
           <td
-            colSpan={4}
+            colSpan={3}
             className="select-none bg-diff-hunk-header-bg px-3 py-1 text-[11px] text-diff-hunk-header-fg"
             aria-label={`Hunk: ${header}`}
           >
@@ -144,13 +143,17 @@ function DiffLineRow({ line }: { readonly line: DiffLine }) {
         ? `Removed line ${line.oldLineNumber}: ${line.content}`
         : undefined;
 
+  // A single line-number gutter — the Cursor/VS Code inline-diff convention,
+  // more compact than GitHub's old+new pair. Each line shows the number from the
+  // side it belongs to: the new-file number for added/context lines, the
+  // old-file number for a removed line (which has no new-side number). The
+  // marker (+/-) and row color carry the change type.
+  const lineNumber = line.newLineNumber ?? line.oldLineNumber;
+
   return (
     <tr className={rowClass} aria-label={ariaLabel}>
       <td className={LINE_NUM_CLASSES}>
-        {line.oldLineNumber ?? ""}
-      </td>
-      <td className={LINE_NUM_CLASSES}>
-        {line.newLineNumber ?? ""}
+        {lineNumber ?? ""}
       </td>
       <td className={cn(MARKER_CLASSES, markerColor)} aria-hidden="true">
         {marker}