@stigmer/react 3.1.1 → 3.1.3

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,174 @@
+"use client";
+
+import { useCallback, type KeyboardEvent, type MouseEvent } from "react";
+import { cn } from "@stigmer/theme";
+import { editorKey, type OpenEditor } from "../internal/store/index.js";
+
+/**
+ * Deterministic, space-free DOM id for a tab, built from an instance-scoped
+ * `prefix` (a `useId()` value) and the editor `key`. Shared by the tab (its
+ * `id`) and the editor body (its `aria-labelledby`) so the two associate; the
+ * key is percent-encoded because editor keys embed file paths that may contain
+ * characters (spaces) illegal in a space-separated IDREF.
+ */
+export function editorTabDomId(prefix: string, key: string): string {
+  return `${prefix}${encodeURIComponent(key)}`;
+}
+
+/** 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;
+  /**
+   * DOM id of the editor body (`role="tabpanel"`). When provided together with
+   * {@link tabIdPrefix}, each tab gets a stable `id` and `aria-controls` linking
+   * it to that panel. Optional so the strip degrades gracefully without a panel.
+   */
+  readonly panelId?: string;
+  /** Instance-scoped prefix for per-tab ids (see {@link editorTabDomId}). */
+  readonly tabIdPrefix?: string;
+  /** 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; Delete/Backspace closes the focused tab. The visual close "X" is a
+ * presentational (`aria-hidden`) mouse affordance — assistive tech closes via
+ * the keyboard, so the X is not a nested interactive control (WCAG 4.1.2). All
+ * visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function EditorTabs({
+  editors,
+  activeKey,
+  onActivate,
+  onPin,
+  onClose,
+  panelId,
+  tabIdPrefix,
+  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"
+            id={tabIdPrefix ? editorTabDomId(tabIdPrefix, key) : undefined}
+            aria-selected={isActive}
+            aria-controls={panelId}
+            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>
+            {/* The visual close "X" is a presentational mouse affordance, NOT a
+                nested interactive control: a `<button>` inside `role="tab"` would
+                violate WCAG 4.1.2 (axe `nested-interactive`). Assistive tech and
+                keyboard users close the focused tab via Delete/Backspace (handled
+                above), so `aria-hidden` here removes the redundant nested control
+                without losing the close action for anyone. */}
+            <span
+              aria-hidden="true"
+              title={`Close ${basename}`}
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose(editor.entryId, editor.path);
+              }}
+              className={cn(
+                "shrink-0 cursor-pointer rounded p-0.5 text-muted-foreground transition-opacity hover:bg-accent-hover hover:text-foreground",
+                isActive ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+              )}
+            >
+              <CloseIcon />
+            </span>
+          </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>
+  );
+}

package/src/workspace/ExplorerTree.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@stigmer/theme";
+import { FileTreeNode } from "../internal/file-tree/index.js";
+import type { SelectedWorkspaceFile } from "../internal/store/index.js";
+import { useWorkspaceFiles } from "./useWorkspaceFiles.js";
+import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
+import type { WorkspaceFileLister } from "./WorkspaceFileLister.js";
+
+/** Props for {@link ExplorerTree}. */
+export interface ExplorerTreeProps {
+  /** Workspace entries, each rendered as a collapsible root (multi-root). */
+  readonly entries: readonly WorkspaceEntry[];
+  /** Platform-injected file lister. */
+  readonly lister: WorkspaceFileLister;
+  /** The active file, highlighted in the tree. */
+  readonly selectedFile: SelectedWorkspaceFile | null;
+  /** Single click: open as a preview tab. */
+  readonly onOpenFile: (entryId: string, path: string) => void;
+  /** Double click: pin the file (persistent tab). */
+  readonly onActivateFile: (entryId: string, path: string) => void;
+  /**
+   * Detach a workspace entry. When provided, each root header carries a remove
+   * control (VS Code's "Remove Folder from Workspace"); when absent the
+   * explorer is browse-only.
+   */
+  readonly onRemoveEntry?: (entryId: string) => void;
+}
+
+/**
+ * The workspace surface's multi-root file explorer — the bare, VS Code-style
+ * tree: file-type icons, indent guides, single-click preview / double-click
+ * pin, optional per-root remove controls. Search lives in the surface's rail,
+ * not per root; listings come from the shared `useWorkspaceFiles` cache.
+ *
+ * All visual properties flow through `--stgm-*` tokens (DD-005).
+ */
+export function ExplorerTree({
+  entries,
+  lister,
+  selectedFile,
+  onOpenFile,
+  onActivateFile,
+  onRemoveEntry,
+}: ExplorerTreeProps) {
+  return (
+    <div className="flex flex-col">
+      {entries.map((entry, index) => (
+        <ExplorerRoot
+          key={entry.id}
+          entry={entry}
+          lister={lister}
+          defaultExpanded={index === 0}
+          selectedPath={
+            selectedFile?.entryId === entry.id ? selectedFile.path : undefined
+          }
+          onOpenFile={onOpenFile}
+          onActivateFile={onActivateFile}
+          onRemove={onRemoveEntry}
+        />
+      ))}
+    </div>
+  );
+}
+
+/** One workspace root: a collapsible header over its file tree. */
+function ExplorerRoot({
+  entry,
+  lister,
+  defaultExpanded,
+  selectedPath,
+  onOpenFile,
+  onActivateFile,
+  onRemove,
+}: {
+  readonly entry: WorkspaceEntry;
+  readonly lister: WorkspaceFileLister;
+  readonly defaultExpanded: boolean;
+  readonly selectedPath: string | undefined;
+  readonly onOpenFile: (entryId: string, path: string) => void;
+  readonly onActivateFile: (entryId: string, path: string) => void;
+  readonly onRemove?: (entryId: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const { tree, isLoading, error, truncated, refresh } = useWorkspaceFiles({
+    entry: expanded ? entry : null,
+    lister,
+  });
+
+  return (
+    <div className="flex flex-col">
+      <div className="group/root flex items-stretch">
+        <button
+          type="button"
+          onClick={() => setExpanded((prev) => !prev)}
+          aria-expanded={expanded}
+          className={cn(
+            "flex min-w-0 flex-1 items-center gap-1.5 px-1.5 py-1 text-left text-[0.7rem] font-semibold uppercase tracking-wide text-foreground transition-colors hover:bg-accent-hover",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          )}
+          title={entry.type === "local" ? entry.localPath : entry.gitUrl}
+        >
+          <span
+            aria-hidden="true"
+            className="text-[10px] text-muted-foreground-subtle"
+          >
+            {expanded ? "▼" : "▶"}
+          </span>
+          <span className="truncate">{entry.name}</span>
+        </button>
+        {onRemove && (
+          <button
+            type="button"
+            onClick={() => onRemove(entry.id)}
+            aria-label={`Remove ${entry.name} from workspace`}
+            title={`Remove ${entry.name} from workspace`}
+            className={cn(
+              "shrink-0 px-1.5 text-muted-foreground opacity-0 transition-opacity",
+              "group-hover/root:opacity-100 focus-visible:opacity-100",
+              "hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            )}
+          >
+            <RemoveIcon />
+          </button>
+        )}
+      </div>
+
+      {expanded && (
+        <ExplorerRootBody
+          entryName={entry.name}
+          entryId={entry.id}
+          tree={tree}
+          isLoading={isLoading}
+          error={error}
+          truncated={truncated}
+          selectedPath={selectedPath}
+          onOpenFile={onOpenFile}
+          onActivateFile={onActivateFile}
+          onRetry={refresh}
+        />
+      )}
+    </div>
+  );
+}
+
+function ExplorerRootBody({
+  entryName,
+  entryId,
+  tree,
+  isLoading,
+  error,
+  truncated,
+  selectedPath,
+  onOpenFile,
+  onActivateFile,
+  onRetry,
+}: {
+  readonly entryName: string;
+  readonly entryId: string;
+  readonly tree: ReturnType<typeof useWorkspaceFiles>["tree"];
+  readonly isLoading: boolean;
+  readonly error: Error | null;
+  readonly truncated: boolean;
+  readonly selectedPath: string | undefined;
+  readonly onOpenFile: (entryId: string, path: string) => void;
+  readonly onActivateFile: (entryId: string, path: string) => void;
+  readonly onRetry: () => void;
+}) {
+  if (isLoading) {
+    return (
+      <div
+        // role="status" both announces the loading state to assistive tech and
+        // makes aria-label permitted here (a role-less generic div cannot carry
+        // an accessible name — axe `aria-prohibited-attr`).
+        role="status"
+        className="space-y-1.5 px-2 py-2"
+        aria-busy="true"
+        aria-label={`Loading files for ${entryName}`}
+      >
+        {[1, 2, 3, 4].map((i) => (
+          <div
+            key={i}
+            className="h-3.5 animate-pulse rounded bg-muted"
+            style={{ width: `${50 + i * 10}%` }}
+            aria-hidden="true"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="px-2 py-2 text-xs text-destructive">
+        Failed to list files: {error.message}
+        <button
+          type="button"
+          onClick={onRetry}
+          className="ml-2 rounded-sm underline transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          Retry
+        </button>
+      </div>
+    );
+  }
+
+  if (tree.length === 0) {
+    return (
+      <p className="px-3 py-2 text-xs text-muted-foreground">No files found.</p>
+    );
+  }
+
+  return (
+    <>
+      <nav aria-label={`File tree for ${entryName}`}>
+        <ul className="py-0.5 pl-1.5" role="tree">
+          {tree.map((node) => (
+            <FileTreeNode
+              key={node.path}
+              node={node}
+              selectedPath={selectedPath ?? ""}
+              onSelect={(path) => onOpenFile(entryId, path)}
+              onActivate={(path) => onActivateFile(entryId, path)}
+              depth={0}
+              enableDrag
+              showIcons
+              indentGuides
+              maxInitialDepth={0}
+            />
+          ))}
+        </ul>
+      </nav>
+      {truncated && (
+        <p className="px-3 py-1.5 text-[0.65rem] text-muted-foreground">
+          Showing a partial listing — too many files to load in full.
+        </p>
+      )}
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Inline SVG icons (SDK independence — no lucide dependency)
+// ---------------------------------------------------------------------------
+
+function RemoveIcon() {
+  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="M4 4L10 10M10 4L4 10" />
+    </svg>
+  );
+}