@stigmer/react 3.1.1 → 3.1.2

package/src/session/useSessionPanel.ts

@@ -0,0 +1,288 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { isTerminalPhase } from "../execution/execution-phases.js";
+import type { SelectedThreadItem } from "../internal/store/selection-store.js";
+import {
+  useWorkspaceEditorsStoreRef,
+  type OpenFileOptions,
+  type WorkspaceEditorsStore,
+} from "../internal/store/index.js";
+import { PLAN_DOCUMENT_ENTRY_ID, PLAN_DOCUMENT_PATH } from "./plan-document.js";
+
+/** Options for {@link useSessionPanel}. */
+export interface UseSessionPanelOptions {
+  /**
+   * The display execution's phase, or `null` before any execution exists.
+   * A transition between running and terminal resets the user's sticky view
+   * pick (mirroring the retired inspector-tab FSM).
+   */
+  readonly phase: ExecutionPhase | null;
+  /**
+   * Whether the session has git write-backs. The first arrival auto-surfaces
+   * the Changes view — but only while the panel is open; a collapsed panel
+   * signals through badges instead of pulling the user out of the chat.
+   */
+  readonly hasChanges: boolean;
+  /**
+   * Identity of the session's current plan, or `null` when none exists. Two
+   * identity families, supplied by the viewer: `<executionId>:streaming`
+   * while the active turn is WRITING a plan (see `findStreamingPlan`), then
+   * the published identity (`planDraftKey`) once the artifact exists. A NEW
+   * identity — a plan starting to stream, the first published plan, or a
+   * refined plan superseding it — auto-opens the plan document tab (see
+   * {@link SessionPanelController.openPlanDocument}), expanding a collapsed
+   * panel. This deliberately breaks the Changes/Inspect "never open a
+   * collapsed panel" convention: a plan is not ambient state, it is the
+   * deliverable of the turn the user just requested, and with the thread
+   * showing only a compact card there is no other review surface — live or
+   * settled. The streaming→published transition is itself a new identity,
+   * harmlessly re-firing the (idempotent) open as the tab's content settles.
+   * Keyed on plan IDENTITY, not presence, so a refined plan re-surfaces too;
+   * the identity present at mount is swallowed (loading a session with an
+   * old plan — or mid-stream — never hijacks the layout).
+   */
+  readonly planKey?: string | null;
+  /**
+   * The panel's home view — the view it opens on and the one every automatic
+   * reset returns to (running⇄terminal transition, selection cleared). Defaults
+   * to `"files"` (the Explorer), which suits the session viewer. The launcher
+   * passes `"configure"`: pre-session there is no workspace, so the Config
+   * facet — carrying the run defaults (harness/model) — is the useful landing
+   * view. Auto-switches (Changes/Inspect) and explicit rail picks still
+   * take over from here exactly as before.
+   *
+   * @default "files"
+   */
+  readonly defaultView?: string;
+}
+
+/**
+ * State + actions for the unified session panel, shared by every viewer that
+ * hosts it (session + launcher) so they behave identically (DD-016).
+ *
+ * The panel is the one right-side surface: a workspace surface whose activity
+ * rail hosts the session facets (see `useSessionRailViews`). It replaces the
+ * former two-view model (narrow inspector ⇄ workspace-mode flip): the panel is
+ * **collapsed by default** to a top-right chip, and `isOpen` + `view` describe
+ * it fully.
+ *
+ * Owns the {@link WorkspaceEditorsStore} (the open-editor group) and the view
+ * FSM ported from the retired inspector tabs: explicit picks are sticky until
+ * a meaningful state change (selection cleared, running⇄terminal transition)
+ * resets them back to the `defaultView`. Both are decoupled from any store
+ * subscription at the owner level: callbacks mutate imperatively so a file
+ * open/switch re-renders only the subscribing panel subtree, never the
+ * streaming conversation column (DD-009/DD-010, invariant 2).
+ */
+export interface SessionPanelController {
+  /** The open-editor group store; subscribe with `useWorkspaceEditors`. */
+  readonly editorsStore: WorkspaceEditorsStore;
+  /** Whether the panel is expanded (chat narrow) or collapsed to the chip. */
+  readonly isOpen: boolean;
+  /** The active rail view id (`"files"`, `"search"`, or an injected facet). */
+  readonly view: string;
+  /** Expand the panel, restoring the previous view (or Inspect if a thread item is selected). */
+  readonly openPanel: () => void;
+  /** Collapse the panel to the chip, preserving editors and view. */
+  readonly closePanel: () => void;
+  /** Explicit view pick from the rail — sticky against auto-switching. */
+  readonly setView: (viewId: string) => void;
+  /**
+   * Open a file as a preview tab and expand the panel. Pass `options.line` to
+   * jump to and highlight a specific 1-based line (e.g. a content-search hit) —
+   * the file opens in its line-faithful File view scrolled to that line.
+   */
+  readonly openFile: (
+    entryId: string,
+    path: string,
+    options?: OpenFileOptions,
+  ) => void;
+  /** Focus an already-open editor tab. */
+  readonly activateEditor: (entryId: string, path: string) => void;
+  /** Pin an editor tab (clear its preview state). */
+  readonly pinEditor: (entryId: string, path: string) => void;
+  /**
+   * Close an editor tab. The panel stays open even when the group empties —
+   * unlike the retired workspace-mode flip, the panel is more than files.
+   */
+  readonly closeEditor: (entryId: string, path: string) => void;
+  /**
+   * Open (or focus) the plan document tab and expand the panel. The tab is
+   * **pinned**, never the recyclable preview slot — file browsing must not
+   * evict the plan — and it activates, replacing the focused tab: the plan is
+   * the deliverable being reviewed. Fired by the thread cards' "Open plan"
+   * (the live `PlanStreamingCard` and the settled `PlanArtifactCard`), the
+   * Artifacts facet's `plan.md`, and the new-plan auto-open — which triggers
+   * both when a plan STARTS STREAMING and when it publishes (see `planKey`).
+   */
+  readonly openPlanDocument: () => void;
+  /**
+   * Report the current thread-item selection. Called from an effect inside the
+   * panel subtree (the level that subscribes to the selection store), keeping
+   * the owner subscription-free. While the panel is open, a new selection
+   * auto-switches to the Inspect view (unless the user picked one explicitly);
+   * a collapsed panel deliberately ignores selections — Inspect has no
+   * auto-open (it must never pull the user out of the chat).
+   */
+  readonly notifySelection: (item: SelectedThreadItem | null) => void;
+}
+
+/**
+ * Create a {@link SessionPanelController} for a viewer instance.
+ */
+export function useSessionPanel({
+  phase,
+  hasChanges,
+  planKey = null,
+  defaultView = "files",
+}: UseSessionPanelOptions): SessionPanelController {
+  const editorsStore = useWorkspaceEditorsStoreRef();
+  const [isOpen, setIsOpen] = useState(false);
+  const [view, setViewState] = useState(defaultView);
+
+  // Sticky explicit pick (rail click) — auto-switching yields to it until a
+  // meaningful state change resets it. Same semantics as the retired tab FSM.
+  const userPickedViewRef = useRef(false);
+  // Render-synced mirror so imperative callbacks read the current view without
+  // re-binding on every view change.
+  const viewRef = useRef(view);
+  viewRef.current = view;
+  // Last selection reported by the panel subtree; consulted by transitions that
+  // fire at the owner level (open, phase change) where selection state is
+  // deliberately not subscribed.
+  const selectionRef = useRef<SelectedThreadItem | null>(null);
+
+  // Running⇄terminal transition → reset the sticky pick and re-derive the view.
+  // Adjust-state-during-render (the established ResizableSplit pattern) so it
+  // lands before paint without an effect.
+  const [prevPhase, setPrevPhase] = useState(phase);
+  if (phase !== prevPhase) {
+    const wasTerminal = prevPhase !== null && isTerminalPhase(prevPhase);
+    const isNowTerminal = phase !== null && isTerminalPhase(phase);
+    setPrevPhase(phase);
+    if (wasTerminal !== isNowTerminal) {
+      userPickedViewRef.current = false;
+      setViewState(selectionRef.current ? "inspect" : defaultView);
+    }
+  }
+
+  // First write-back arrived → surface Changes, but only in an open panel and
+  // never over an explicit pick. Collapsed panels signal via badges alone.
+  const [prevHasChanges, setPrevHasChanges] = useState(hasChanges);
+  if (hasChanges !== prevHasChanges) {
+    setPrevHasChanges(hasChanges);
+    if (hasChanges && isOpen && !userPickedViewRef.current) {
+      setViewState("changes");
+    }
+  }
+
+  const openPlanDocument = useCallback(() => {
+    editorsStore.openPinned(PLAN_DOCUMENT_ENTRY_ID, PLAN_DOCUMENT_PATH);
+    setIsOpen(true);
+  }, [editorsStore]);
+
+  // A new plan arrived (first plan, or a refinement superseding it) → open the
+  // plan document tab, expanding a collapsed panel (see the planKey option doc
+  // for why this one trigger may open the panel). An effect, NOT the
+  // render-adjust idiom the phase/changes triggers use: those set this
+  // component's own state, which the idiom permits — this one mutates the
+  // external editors store (notifying subscribers), which is illegal during
+  // render. The ref (not effect-less prev-state) swallows the identity present
+  // at mount: loading a session with an old plan never hijacks the layout.
+  const prevPlanKeyRef = useRef(planKey);
+  useEffect(() => {
+    if (planKey === prevPlanKeyRef.current) return;
+    prevPlanKeyRef.current = planKey;
+    if (planKey !== null) {
+      openPlanDocument();
+    }
+  }, [planKey, openPlanDocument]);
+
+  const openPanel = useCallback(() => {
+    setIsOpen(true);
+    // Re-derive the auto view on entry: a selection made while collapsed
+    // surfaces as Inspect now (the collapsed panel ignored it by design).
+    if (!userPickedViewRef.current && selectionRef.current) {
+      setViewState("inspect");
+    }
+  }, []);
+
+  const closePanel = useCallback(() => setIsOpen(false), []);
+
+  const setView = useCallback((viewId: string) => {
+    userPickedViewRef.current = true;
+    setViewState(viewId);
+  }, []);
+
+  const openFile = useCallback(
+    (entryId: string, path: string, options?: OpenFileOptions) => {
+      editorsStore.openPreview(entryId, path, options);
+      setIsOpen(true);
+    },
+    [editorsStore],
+  );
+
+  const activateEditor = useCallback(
+    (entryId: string, path: string) => editorsStore.activate(entryId, path),
+    [editorsStore],
+  );
+
+  const pinEditor = useCallback(
+    (entryId: string, path: string) => editorsStore.pin(entryId, path),
+    [editorsStore],
+  );
+
+  const closeEditor = useCallback(
+    (entryId: string, path: string) => editorsStore.close(entryId, path),
+    [editorsStore],
+  );
+
+  const notifySelection = useCallback(
+    (item: SelectedThreadItem | null) => {
+      if (item === selectionRef.current) return;
+      selectionRef.current = item;
+      if (item) {
+        if (isOpen && !userPickedViewRef.current) setViewState("inspect");
+      } else if (viewRef.current === "inspect") {
+        // Selection cleared: leave Inspect (its content is gone) and unstick,
+        // returning to the panel's home view.
+        userPickedViewRef.current = false;
+        setViewState(defaultView);
+      }
+    },
+    [isOpen, defaultView],
+  );
+
+  return useMemo(
+    () => ({
+      editorsStore,
+      isOpen,
+      view,
+      openPanel,
+      closePanel,
+      setView,
+      openFile,
+      activateEditor,
+      pinEditor,
+      closeEditor,
+      openPlanDocument,
+      notifySelection,
+    }),
+    [
+      editorsStore,
+      isOpen,
+      view,
+      openPanel,
+      closePanel,
+      setView,
+      openFile,
+      activateEditor,
+      pinEditor,
+      closeEditor,
+      openPlanDocument,
+      notifySelection,
+    ],
+  );
+}

package/src/session/useSessionRailViews.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useMemo } from "react";
+import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
+import type { SurfaceRailView } from "../workspace/WorkspaceSurface.js";
+import type { SelectedThreadItem } from "../internal/store/selection-store.js";
+import type { ApplyResourceResult } from "../library/useApplyResource.js";
+import { useSessionWriteBacks } from "./useSessionWriteBacks.js";
+import { useSessionArtifacts } from "./useSessionArtifacts.js";
+import { SetupTab, type SetupTabProps } from "./facets/SetupTab.js";
+import { ChangesTab } from "./facets/ChangesTab.js";
+import { ArtifactsTab } from "./facets/ArtifactsTab.js";
+import { UsageTab } from "./facets/UsageTab.js";
+import { InspectTab } from "./facets/InspectTab.js";
+
+/** Options for {@link useSessionRailViews}. */
+export interface UseSessionRailViewsOptions {
+  /** All executions in the session — drives Changes/Artifacts/Usage. */
+  readonly allExecutions: readonly AgentExecution[];
+  /** Organization slug for artifact Apply CTA. */
+  readonly org: string;
+  /** Session configuration for the Config facet. */
+  readonly sessionConfig: SetupTabProps | undefined;
+  /** Currently selected thread item — surfaces the Inspect facet. */
+  readonly selectedItem: SelectedThreadItem | null;
+  /** Called after a resource is applied from the Artifacts facet. */
+  readonly onApplied?: (result: ApplyResourceResult) => void;
+  /** Implement a plan — the Artifacts facet's preview action for `plan.md`. */
+  readonly onImplementPlan?: () => void;
+  /**
+   * Open a plan in the panel's plan document tab. Routed to the Artifacts
+   * facet so clicking `plan.md` there opens the editor-area document instead
+   * of the preview modal.
+   */
+  readonly onOpenPlan?: (executionId: string) => void;
+  /**
+   * Whether to offer the execution-derived facets (Changes / Artifacts /
+   * Usage). The launcher passes `false` — before a session exists there are no
+   * executions to aggregate, so only Config applies.
+   * @default true
+   */
+  readonly includeExecutionFacets?: boolean;
+}
+
+/**
+ * Composes the session facets (Config / Changes / Artifacts / Usage / Inspect)
+ * as {@link SurfaceRailView}s for the workspace surface's activity rail.
+ *
+ * This is the session-domain half of the unified panel: the surface stays a
+ * domain-pure workspace organism and these views are injected into its rail
+ * (DD-004 composition). Contextual visibility mirrors the retired inspector's
+ * tab rules — Changes/Artifacts surface only when data exists (with count
+ * badges), Inspect only when a thread item is selected.
+ */
+export function useSessionRailViews({
+  allExecutions,
+  org,
+  sessionConfig,
+  selectedItem,
+  onApplied,
+  onImplementPlan,
+  onOpenPlan,
+  includeExecutionFacets = true,
+}: UseSessionRailViewsOptions): readonly SurfaceRailView[] {
+  const { hasWriteBacks, writeBackCount } = useSessionWriteBacks(allExecutions);
+  const { hasArtifacts, artifactCount } = useSessionArtifacts(allExecutions);
+
+  return useMemo(() => {
+    const views: SurfaceRailView[] = [];
+
+    if (sessionConfig) {
+      views.push({
+        id: "configure",
+        label: "Config",
+        icon: <GearIcon />,
+        content: <SetupTab {...sessionConfig} />,
+      });
+    }
+
+    if (includeExecutionFacets) {
+      if (hasWriteBacks) {
+        views.push({
+          id: "changes",
+          label: "Changes",
+          icon: <ChangesIcon />,
+          badge: writeBackCount,
+          content: <ChangesTab executions={allExecutions} />,
+        });
+      }
+
+      if (hasArtifacts) {
+        views.push({
+          id: "artifacts",
+          label: "Artifacts",
+          icon: <ArtifactsIcon />,
+          badge: artifactCount,
+          content: (
+            <ArtifactsTab
+              executions={allExecutions}
+              org={org}
+              onApplied={onApplied}
+              onImplementPlan={onImplementPlan}
+              onOpenPlan={onOpenPlan}
+            />
+          ),
+        });
+      }
+
+      views.push({
+        id: "usage",
+        label: "Usage",
+        icon: <UsageIcon />,
+        content: <UsageTab executions={allExecutions} />,
+      });
+    }
+
+    if (selectedItem) {
+      views.push({
+        id: "inspect",
+        label: "Inspect",
+        icon: <InspectIcon />,
+        content: <InspectTab selectedItem={selectedItem} />,
+      });
+    }
+
+    return views;
+  }, [
+    sessionConfig,
+    includeExecutionFacets,
+    hasWriteBacks,
+    writeBackCount,
+    hasArtifacts,
+    artifactCount,
+    allExecutions,
+    org,
+    onApplied,
+    onImplementPlan,
+    onOpenPlan,
+    selectedItem,
+  ]);
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons — monochrome, `currentColor`-tinted (DD-005; SDK
+// independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function GearIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h.01a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h.01a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v.01a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+  );
+}
+
+/** Source-control style branch glyph — the session's git write-backs. */
+function ChangesIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="6" cy="6" r="2.5" />
+      <circle cx="6" cy="18" r="2.5" />
+      <circle cx="18" cy="8" r="2.5" />
+      <path d="M6 8.5v7" />
+      <path d="M18 10.5a7 7 0 0 1-7 5H8.5" />
+    </svg>
+  );
+}
+
+function ArtifactsIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M21 8l-9-5-9 5v8l9 5 9-5z" />
+      <path d="M3 8l9 5 9-5" />
+      <path d="M12 13v9" />
+    </svg>
+  );
+}
+
+function UsageIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M3 20h18" />
+      <path d="M6 20v-6" />
+      <path d="M11 20V9" />
+      <path d="M16 20v-9" />
+      <path d="M21 20V5" />
+    </svg>
+  );
+}
+
+/** Crosshair glyph — inspecting a selected thread item. */
+function InspectIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="7" />
+      <path d="M12 2v4M12 18v4M2 12h4M18 12h4" />
+    </svg>
+  );
+}

package/src/workflow/WorkflowExecutionGraph.tsx

@@ -26,7 +26,7 @@ import { useFollowExecution, computeFollowSelection } from "./useFollowExecution
 import { useActiveTaskName } from "./useActiveTaskName.js";
 import { useExecutionAnnouncements } from "./useExecutionAnnouncements.js";
 import { ExecutionActiveTaskIndicator } from "./ExecutionActiveTaskIndicator.js";
-import { getAnimationDuration } from "./motion-preference.js";
+import { getAnimationDuration } from "../internal/motion-preference.js";
 
 /** Props for {@link WorkflowExecutionGraph}. */
 export interface WorkflowExecutionGraphProps {

package/src/workflow/index.ts

@@ -531,7 +531,7 @@ export {
   type ExecutionActiveTaskIndicatorProps,
 } from "./ExecutionActiveTaskIndicator.js";
 export { useExecutionAnnouncements } from "./useExecutionAnnouncements.js";
-export { getAnimationDuration, prefersReducedMotion } from "./motion-preference.js";
+export { getAnimationDuration, prefersReducedMotion } from "../internal/motion-preference.js";
 
 // T05: Shared formatting utilities
 export {

package/src/workflow/useFollowExecution.ts

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { Node, Viewport } from "@xyflow/react";
 import { useReactFlow } from "@xyflow/react";
 import type { CanvasTaskNodeData } from "./workflow-graph-conversions.js";
-import { getAnimationDuration } from "./motion-preference.js";
+import { getAnimationDuration } from "../internal/motion-preference.js";
 
 /**
  * Follow-execution state machine states.

package/src/workspace/EditorTabs.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { useCallback, type KeyboardEvent, type MouseEvent } from "react";
+import { cn } from "@stigmer/theme";
+import { editorKey, type OpenEditor } from "../internal/store/index.js";
+
+/** Props for {@link EditorTabs}. */
+export interface EditorTabsProps {
+  /** Open editors in tab order. */
+  readonly editors: readonly OpenEditor[];
+  /** Key of the active editor (`editorKey(entryId, path)`), or `null`. */
+  readonly activeKey: string | null;
+  /** Focus an open editor (single click). */
+  readonly onActivate: (entryId: string, path: string) => void;
+  /** Pin an editor (double-click) so it stops being the reusable preview tab. */
+  readonly onPin: (entryId: string, path: string) => void;
+  /** Close an editor (close button or middle click). */
+  readonly onClose: (entryId: string, path: string) => void;
+  /** Additional CSS classes for the root element. */
+  readonly className?: string;
+}
+
+/**
+ * The editor group's tab strip, following VS Code preview-tab semantics:
+ * a single-click preview tab renders in italics and is reused as the user
+ * browses; double-clicking a tab pins it (persistent). Each tab has a close
+ * control, also reachable by middle-click.
+ *
+ * A `role="tablist"` of `role="tab"` items; the matching `tabpanel` is the
+ * editor body rendered by the surface. Arrow keys move focus between tabs and
+ * activate; the per-tab close button is a nested control. All visual properties
+ * flow through `--stgm-*` tokens (DD-005).
+ */
+export function EditorTabs({
+  editors,
+  activeKey,
+  onActivate,
+  onPin,
+  onClose,
+  className,
+}: EditorTabsProps) {
+  const move = useCallback(
+    (from: number, delta: number) => {
+      const next = from + delta;
+      if (next < 0 || next >= editors.length) return;
+      const editor = editors[next];
+      onActivate(editor.entryId, editor.path);
+    },
+    [editors, onActivate],
+  );
+
+  return (
+    <div
+      role="tablist"
+      aria-label="Open editors"
+      aria-orientation="horizontal"
+      className={cn(
+        "flex shrink-0 items-stretch overflow-x-auto border-b border-border",
+        className,
+      )}
+    >
+      {editors.map((editor, index) => {
+        const key = editorKey(editor.entryId, editor.path);
+        const isActive = key === activeKey;
+        const lastSlash = editor.path.lastIndexOf("/");
+        const basename =
+          lastSlash >= 0 ? editor.path.slice(lastSlash + 1) : editor.path;
+
+        const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+          if (e.key === "ArrowRight") {
+            e.preventDefault();
+            move(index, 1);
+          } else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            move(index, -1);
+          } else if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onActivate(editor.entryId, editor.path);
+          } else if (e.key === "Delete" || e.key === "Backspace") {
+            e.preventDefault();
+            onClose(editor.entryId, editor.path);
+          }
+        };
+
+        const handleAuxClick = (e: MouseEvent<HTMLDivElement>) => {
+          // Middle click closes, matching browser/editor tab conventions.
+          if (e.button === 1) {
+            e.preventDefault();
+            onClose(editor.entryId, editor.path);
+          }
+        };
+
+        return (
+          <div
+            key={key}
+            role="tab"
+            aria-selected={isActive}
+            tabIndex={isActive ? 0 : -1}
+            title={editor.path}
+            onClick={() => onActivate(editor.entryId, editor.path)}
+            onDoubleClick={() => onPin(editor.entryId, editor.path)}
+            onAuxClick={handleAuxClick}
+            onKeyDown={handleKeyDown}
+            className={cn(
+              "group flex max-w-[12rem] shrink-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 py-1.5 text-xs transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+              isActive
+                ? "bg-background text-foreground"
+                : "bg-muted-faint text-muted-foreground hover:bg-muted hover:text-foreground",
+            )}
+          >
+            <span className={cn("truncate", editor.preview && "italic")}>
+              {basename}
+            </span>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose(editor.entryId, editor.path);
+              }}
+              aria-label={`Close ${basename}`}
+              tabIndex={-1}
+              className={cn(
+                "shrink-0 rounded p-0.5 text-muted-foreground transition-opacity hover:bg-accent-hover hover:text-foreground",
+                "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+              )}
+            >
+              <CloseIcon />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M3.5 3.5L10.5 10.5" />
+      <path d="M10.5 3.5L3.5 10.5" />
+    </svg>
+  );
+}