@stigmer/react 3.1.1 → 3.1.3

package/src/session/inspector/WorkspaceTab.tsx

@@ -1,245 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { cn } from "@stigmer/theme";
-import type { UseWorkspaceEntriesReturn, WorkspaceEntry } from "../../workspace/useWorkspaceEntries.js";
-import type { WorkspaceFileLister } from "../../workspace/WorkspaceFileLister.js";
-import { WorkspaceEntryFiles } from "../../workspace/WorkspaceEntryFiles.js";
-import type { UseGitHubConnectionReturn } from "../../github/useGitHubConnection.js";
-
-/**
- * Interactive workspace actions required by the Workspace tab.
- * Mirrors the shape from SetupTab for consistency but is the
- * primary owner going forward.
- */
-export interface WorkspaceTabActions {
-  readonly workspace: UseWorkspaceEntriesReturn;
-  readonly enableGitHub?: boolean;
-  readonly enableLocal?: boolean;
-  readonly gitHubConnection?: UseGitHubConnectionReturn;
-  readonly onBrowseLocalFolder?: () => Promise<string | null>;
-  readonly workspaceFileLister?: WorkspaceFileLister;
-}
-
-/** Props for {@link WorkspaceTab}. */
-export interface WorkspaceTabProps {
-  readonly actions: WorkspaceTabActions;
-}
-
-/**
- * Dedicated workspace tab for the SessionInspector.
- *
- * Provides a full-height layout for managing workspace entries:
- * - Entry list with expandable file trees (accordion, one at a time)
- * - Add actions: Browse Folder and Connect GitHub
- * - Short display names with full path on hover
- *
- * Entries start collapsed by default to avoid expensive file-listing
- * fetches until the user explicitly expands one.
- *
- * All visual properties flow through `--stgm-*` tokens (DD-005).
- */
-export function WorkspaceTab({ actions }: WorkspaceTabProps) {
-  const {
-    workspace,
-    enableGitHub = true,
-    enableLocal = false,
-    onBrowseLocalFolder,
-    workspaceFileLister,
-  } = actions;
-
-  const canBrowse = enableLocal && onBrowseLocalFolder;
-  const hasEntries = workspace.entries.length > 0;
-
-  return (
-    <div className="flex h-full flex-col gap-3">
-      {hasEntries && (
-        <WorkspaceEntryList
-          entries={workspace.entries}
-          onRemove={workspace.remove}
-          lister={workspaceFileLister}
-        />
-      )}
-
-      {!hasEntries && (
-        <EmptyState />
-      )}
-
-      <div className="flex flex-col gap-0.5">
-        {canBrowse && (
-          <button
-            type="button"
-            onClick={async () => {
-              const path = await onBrowseLocalFolder();
-              if (path) workspace.addLocalPath(path);
-            }}
-            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover"
-          >
-            <FolderPlusIcon />
-            <span className="flex-1 text-left">Browse Folder</span>
-          </button>
-        )}
-        {enableGitHub && (
-          <button
-            type="button"
-            onClick={() => {
-              /* GitHub picker is handled via the composer's Configure menu.
-                 This button is a placeholder affordance for visual parity. */
-            }}
-            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover"
-          >
-            <GitHubIcon />
-            <span className="flex-1 text-left">Connect GitHub</span>
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Workspace entry list — accordion with file tree expansion
-// ---------------------------------------------------------------------------
-
-function WorkspaceEntryList({
-  entries,
-  onRemove,
-  lister,
-}: {
-  readonly entries: readonly WorkspaceEntry[];
-  readonly onRemove: (id: string) => void;
-  readonly lister: WorkspaceFileLister | undefined;
-}) {
-  const [expandedId, setExpandedId] = useState<string | null>(null);
-
-  const toggleExpand = useCallback((id: string) => {
-    setExpandedId((prev) => (prev === id ? null : id));
-  }, []);
-
-  return (
-    <div className="flex flex-col gap-1.5">
-      {entries.map((entry) => {
-        const isExpandable = !!lister;
-        const isExpanded = expandedId === entry.id;
-
-        return (
-          <div key={entry.id} className="flex flex-col">
-            <div
-              className={cn(
-                "flex items-center gap-2 rounded-md border border-border bg-muted-faint px-2.5 py-2 text-xs",
-                isExpandable && "cursor-pointer hover:bg-muted transition-colors",
-              )}
-              onClick={isExpandable ? () => toggleExpand(entry.id) : undefined}
-              role={isExpandable ? "button" : undefined}
-              aria-expanded={isExpandable ? isExpanded : undefined}
-              tabIndex={isExpandable ? 0 : undefined}
-              onKeyDown={isExpandable ? (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleExpand(entry.id);
-                }
-              } : undefined}
-            >
-              {isExpandable && (
-                <span className="shrink-0 text-[10px] text-muted-foreground-subtle">
-                  {isExpanded ? "▼" : "▶"}
-                </span>
-              )}
-              {entry.type === "git" ? (
-                <GitHubIcon />
-              ) : (
-                <FolderIcon />
-              )}
-              <div className="min-w-0 flex-1">
-                <span
-                  className="block truncate font-medium text-foreground"
-                  title={entry.type === "local" ? entry.localPath : entry.gitUrl}
-                >
-                  {entry.name}
-                </span>
-                {entry.type === "git" && entry.gitBranch && (
-                  <span className="block truncate text-[0.6rem] text-muted-foreground">
-                    {entry.gitBranch}
-                  </span>
-                )}
-              </div>
-              <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onRemove(entry.id);
-                }}
-                className="shrink-0 text-muted-foreground hover:text-destructive transition-colors"
-                aria-label={`Remove ${entry.name}`}
-              >
-                <XIcon />
-              </button>
-            </div>
-            {isExpandable && lister && (
-              <WorkspaceEntryFiles
-                entry={entry}
-                lister={lister}
-                isExpanded={isExpanded}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Empty state
-// ---------------------------------------------------------------------------
-
-function EmptyState() {
-  return (
-    <div className="flex flex-col items-center justify-center gap-2 py-8 text-center">
-      <FolderIcon className="h-8 w-8 text-muted-foreground/40" />
-      <div className="space-y-1">
-        <p className="text-xs font-medium text-foreground">No workspace attached</p>
-        <p className="text-[0.65rem] text-muted-foreground">
-          Add a folder or GitHub repo for the agent to work with.
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Inline SVG icons (SDK independence — no lucide dependency)
-// ---------------------------------------------------------------------------
-
-function XIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M4 4L10 10M10 4L4 10" />
-    </svg>
-  );
-}
-
-function FolderIcon({ className: cls }: { className?: string }) {
-  return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={cn("shrink-0 text-muted-foreground", cls)}>
-      <path d="M1.5 3.5V11a1 1 0 001 1h9a1 1 0 001-1V5.5a1 1 0 00-1-1H7L5.5 3H2.5a1 1 0 00-1 .5z" />
-    </svg>
-  );
-}
-
-function FolderPlusIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-muted-foreground">
-      <path d="M1.5 3.5V11a1 1 0 001 1h9a1 1 0 001-1V5.5a1 1 0 00-1-1H7L5.5 3H2.5a1 1 0 00-1 .5z" />
-      <path d="M7 7v3M5.5 8.5h3" />
-    </svg>
-  );
-}
-
-function GitHubIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" className="shrink-0 text-muted-foreground">
-      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
-    </svg>
-  );
-}

package/src/session/inspector/__tests__/useSessionInspector.test.ts

@@ -1,251 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { renderHook, act } from "@testing-library/react";
-import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import {
-  useSessionInspector,
-  buildVisibleTabs,
-  type UseSessionInspectorOptions,
-} from "../useSessionInspector";
-
-function defaultOpts(overrides?: Partial<UseSessionInspectorOptions>): UseSessionInspectorOptions {
-  return {
-    phase: null,
-    hasWriteBacks: false,
-    writeBackCount: 0,
-    hasArtifacts: false,
-    artifactCount: 0,
-    hasUsage: false,
-    selectedItem: null,
-    ...overrides,
-  };
-}
-
-function tabOpts(
-  overrides?: Partial<Parameters<typeof buildVisibleTabs>[0]>,
-): Parameters<typeof buildVisibleTabs>[0] {
-  return {
-    hasWriteBacks: false,
-    writeBackCount: 0,
-    hasArtifacts: false,
-    artifactCount: 0,
-    hasUsage: false,
-    selectedItem: null,
-    ...overrides,
-  };
-}
-
-// ---------------------------------------------------------------------------
-// buildVisibleTabs
-// ---------------------------------------------------------------------------
-
-describe("buildVisibleTabs", () => {
-  it("always includes Workspace, Config, and Usage (Plan is gone — todos render inline)", () => {
-    const tabs = buildVisibleTabs(tabOpts());
-    const ids = tabs.map((t) => t.id);
-    expect(ids).toContain("workspace");
-    expect(ids).toContain("configure");
-    expect(ids).toContain("usage");
-    expect(ids).not.toContain("plan");
-    expect(ids).not.toContain("changes");
-    expect(ids).not.toContain("artifacts");
-    expect(ids).not.toContain("inspect");
-
-    const configTab = tabs.find((t) => t.id === "configure");
-    expect(configTab?.label).toBe("Config");
-  });
-
-  // The Changes tab is exclusively the write-back (PR) surface: local file
-  // changes render in the transcript (edit rows + decision bar) and no longer
-  // surface — or badge — a tab.
-  it("includes Changes with badge only when write-backs exist", () => {
-    const tabs = buildVisibleTabs(tabOpts({ hasWriteBacks: true, writeBackCount: 3 }));
-    const changesTab = tabs.find((t) => t.id === "changes");
-    expect(changesTab).toBeDefined();
-    expect(changesTab?.badge).toBe(3);
-  });
-
-  it("includes Artifacts with badge when artifacts exist", () => {
-    const tabs = buildVisibleTabs(tabOpts({ hasArtifacts: true, artifactCount: 7 }));
-    const artifactsTab = tabs.find((t) => t.id === "artifacts");
-    expect(artifactsTab).toBeDefined();
-    expect(artifactsTab?.badge).toBe(7);
-  });
-
-  it("includes Inspect when a thread item is selected", () => {
-    const tabs = buildVisibleTabs(
-      tabOpts({ selectedItem: { kind: "tool-call", toolCallId: "tc-1" } }),
-    );
-    const inspectTab = tabs.find((t) => t.id === "inspect");
-    expect(inspectTab).toBeDefined();
-  });
-
-  it("orders tabs as Workspace, Config, then Usage with Inspect last", () => {
-    const tabs = buildVisibleTabs(
-      tabOpts({
-        hasWriteBacks: true,
-        writeBackCount: 2,
-        hasArtifacts: true,
-        artifactCount: 1,
-        hasUsage: true,
-        selectedItem: { kind: "tool-call", toolCallId: "tc-1" },
-      }),
-    );
-    const ids = tabs.map((t) => t.id);
-    expect(ids.indexOf("workspace")).toBeLessThan(ids.indexOf("configure"));
-    expect(ids.indexOf("configure")).toBeLessThan(ids.indexOf("usage"));
-    expect(ids.indexOf("usage")).toBeLessThan(ids.indexOf("inspect"));
-  });
-
-  it("base tabs are present even when no optional tabs exist", () => {
-    const tabs = buildVisibleTabs(tabOpts());
-    const ids = tabs.map((t) => t.id);
-    expect(ids).toEqual(["workspace", "configure", "usage"]);
-  });
-});
-
-// ---------------------------------------------------------------------------
-// useSessionInspector FSM
-// ---------------------------------------------------------------------------
-
-describe("useSessionInspector", () => {
-  it("defaults to workspace when no execution is active (phase=null)", () => {
-    const { result } = renderHook(() => useSessionInspector(defaultOpts()));
-    expect(result.current.activeTab).toBe("workspace");
-  });
-
-  it("defaults to workspace when execution is terminal", () => {
-    const { result } = renderHook(() =>
-      useSessionInspector(
-        defaultOpts({ phase: ExecutionPhase.EXECUTION_COMPLETED }),
-      ),
-    );
-    expect(result.current.activeTab).toBe("workspace");
-  });
-
-  it("defaults to workspace while execution is running (todos render inline, not in a tab)", () => {
-    const { result } = renderHook(() =>
-      useSessionInspector(
-        defaultOpts({ phase: ExecutionPhase.EXECUTION_IN_PROGRESS }),
-      ),
-    );
-    expect(result.current.activeTab).toBe("workspace");
-  });
-
-  it("auto-switches to inspect when a thread item is selected", () => {
-    const { result, rerender } = renderHook(
-      (props: UseSessionInspectorOptions) => useSessionInspector(props),
-      { initialProps: defaultOpts() },
-    );
-    expect(result.current.activeTab).toBe("workspace");
-
-    rerender(
-      defaultOpts({ selectedItem: { kind: "tool-call", toolCallId: "tc-1" } }),
-    );
-    expect(result.current.activeTab).toBe("inspect");
-  });
-
-  it("reverts to workspace when selection is cleared (phase=null) and user did not pick a tab", () => {
-    const { result, rerender } = renderHook(
-      (props: UseSessionInspectorOptions) => useSessionInspector(props),
-      {
-        initialProps: defaultOpts({
-          selectedItem: { kind: "tool-call", toolCallId: "tc-1" },
-        }),
-      },
-    );
-    expect(result.current.activeTab).toBe("inspect");
-
-    rerender(defaultOpts({ selectedItem: null }));
-    expect(result.current.activeTab).toBe("workspace");
-  });
-
-  it("reverts to workspace when selection is cleared while execution is running", () => {
-    const { result, rerender } = renderHook(
-      (props: UseSessionInspectorOptions) => useSessionInspector(props),
-      {
-        initialProps: defaultOpts({
-          phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
-          selectedItem: { kind: "tool-call", toolCallId: "tc-1" },
-        }),
-      },
-    );
-    expect(result.current.activeTab).toBe("inspect");
-
-    rerender(
-      defaultOpts({
-        phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
-        selectedItem: null,
-      }),
-    );
-    expect(result.current.activeTab).toBe("workspace");
-  });
-
-  it("keeps user-picked tab sticky", () => {
-    const { result, rerender } = renderHook(
-      (props: UseSessionInspectorOptions) => useSessionInspector(props),
-      { initialProps: defaultOpts({ hasUsage: true }) },
-    );
-
-    act(() => {
-      result.current.onTabChange("usage");
-    });
-    expect(result.current.activeTab).toBe("usage");
-
-    rerender(
-      defaultOpts({
-        hasUsage: true,
-        selectedItem: { kind: "tool-call", toolCallId: "tc-1" },
-      }),
-    );
-    expect(result.current.activeTab).toBe("usage");
-  });
-
-  it("auto-switches to changes when first write-back arrives", () => {
-    const { result, rerender } = renderHook(
-      (props: UseSessionInspectorOptions) => useSessionInspector(props),
-      { initialProps: defaultOpts() },
-    );
-    expect(result.current.activeTab).toBe("workspace");
-
-    rerender(
-      defaultOpts({ hasWriteBacks: true, writeBackCount: 1 }),
-    );
-    expect(result.current.activeTab).toBe("changes");
-  });
-
-  it("falls back to workspace when active tab is removed from visible tabs (phase=null)", () => {
-    const { result, rerender } = renderHook(
-      (props: UseSessionInspectorOptions) => useSessionInspector(props),
-      {
-        initialProps: defaultOpts({
-          selectedItem: { kind: "tool-call", toolCallId: "tc-1" },
-        }),
-      },
-    );
-    expect(result.current.activeTab).toBe("inspect");
-
-    act(() => {
-      result.current.onTabChange("inspect");
-    });
-
-    rerender(defaultOpts({ selectedItem: null }));
-    expect(result.current.activeTab).toBe("workspace");
-  });
-
-  it("stays on workspace across the running → terminal transition", () => {
-    const { result, rerender } = renderHook(
-      (props: UseSessionInspectorOptions) => useSessionInspector(props),
-      {
-        initialProps: defaultOpts({
-          phase: ExecutionPhase.EXECUTION_IN_PROGRESS,
-        }),
-      },
-    );
-    expect(result.current.activeTab).toBe("workspace");
-
-    rerender(
-      defaultOpts({ phase: ExecutionPhase.EXECUTION_COMPLETED }),
-    );
-    expect(result.current.activeTab).toBe("workspace");
-  });
-});

package/src/session/inspector/useSessionInspector.ts

@@ -1,178 +0,0 @@
-"use client";
-
-import { useCallback, useRef, useState } from "react";
-import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import type { TabItem } from "../../tabs/Tabs.js";
-import { isTerminalPhase } from "../../execution/execution-phases.js";
-import type { SelectedThreadItem } from "../../internal/store/selection-store.js";
-
-export type SessionInspectorTabId =
-  | "workspace"
-  | "configure"
-  | "changes"
-  | "artifacts"
-  | "usage"
-  | "inspect";
-
-export interface UseSessionInspectorOptions {
-  readonly phase: ExecutionPhase | null;
-  readonly hasWriteBacks: boolean;
-  readonly writeBackCount: number;
-  readonly hasArtifacts: boolean;
-  readonly artifactCount: number;
-  readonly hasUsage: boolean;
-  readonly selectedItem: SelectedThreadItem | null;
-}
-
-export interface UseSessionInspectorReturn {
-  readonly tabs: readonly TabItem[];
-  readonly activeTab: SessionInspectorTabId;
-  readonly onTabChange: (tabId: string) => void;
-}
-
-/**
- * Compute the system-suggested tab from selection.
- *
- * Priority:
- * 1. Thread item selected -> "inspect"
- * 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(
-  selectedItem: SelectedThreadItem | null,
-): SessionInspectorTabId {
-  if (selectedItem) return "inspect";
-  return "workspace";
-}
-
-/**
- * Build the contextual tab list with badges.
- *
- * Tab order follows the user's mental model — context before output:
- * 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;
-  writeBackCount: number;
-  hasArtifacts: boolean;
-  artifactCount: number;
-  hasUsage: boolean;
-  selectedItem: SelectedThreadItem | null;
-}): TabItem[] {
-  const tabs: TabItem[] = [
-    { id: "workspace", label: "Workspace" },
-    { id: "configure", label: "Config" },
-  ];
-
-  if (opts.hasWriteBacks) {
-    tabs.push({
-      id: "changes",
-      label: "Changes",
-      badge: opts.writeBackCount,
-    });
-  }
-
-  if (opts.hasArtifacts) {
-    tabs.push({
-      id: "artifacts",
-      label: "Artifacts",
-      badge: opts.artifactCount,
-    });
-  }
-
-  tabs.push({ id: "usage", label: "Usage" });
-
-  if (opts.selectedItem) {
-    tabs.push({ id: "inspect", label: "Inspect" });
-  }
-
-  return tabs;
-}
-
-/**
- * Behavior hook for SessionInspector tab state management.
- *
- * Uses the "adjust state during render" pattern from the workflow
- * `ExecutionInspector`: shadow `prevPhase`/`prevSelected` state,
- * `userPickedTabRef` for sticky manual picks, and `deriveAutoTab`
- * for system suggestions. Keeps the user's tab pick sticky until
- * a meaningful state change resets it.
- */
-export function useSessionInspector(
-  opts: UseSessionInspectorOptions,
-): UseSessionInspectorReturn {
-  const { phase, hasWriteBacks, writeBackCount, hasArtifacts, artifactCount, hasUsage, selectedItem } = opts;
-
-  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(selectedItem),
-  );
-  const [prevPhase, setPrevPhase] = useState(phase);
-  const [prevSelected, setPrevSelected] = useState(selectedItem);
-  const [prevHasChanges, setPrevHasChanges] = useState(hasChanges);
-  const userPickedTabRef = useRef(false);
-
-  // Selection changed → auto-switch to inspect (unless user picked)
-  if (selectedItem !== prevSelected) {
-    setPrevSelected(selectedItem);
-    if (selectedItem && !userPickedTabRef.current) {
-      setActiveTab("inspect");
-    }
-    if (!selectedItem && activeTab === "inspect") {
-      setActiveTab(deriveAutoTab(null));
-      userPickedTabRef.current = false;
-    }
-  }
-
-  // Phase changed → reset user pick if transitioning from non-terminal to terminal or vice versa
-  if (phase !== prevPhase) {
-    const wasTerminal = prevPhase !== null && isTerminalPhase(prevPhase);
-    const isNowTerminal = phase !== null && isTerminalPhase(phase);
-    setPrevPhase(phase);
-    if (wasTerminal !== isNowTerminal) {
-      userPickedTabRef.current = false;
-      setActiveTab(deriveAutoTab(selectedItem));
-    }
-  }
-
-  // First write-back arrived → auto-switch to changes
-  if (hasChanges && !prevHasChanges) {
-    setPrevHasChanges(hasChanges);
-    if (!userPickedTabRef.current) {
-      setActiveTab("changes");
-    }
-  }
-  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(selectedItem);
-
-  const onTabChange = useCallback((tabId: string) => {
-    userPickedTabRef.current = true;
-    setActiveTab(tabId as SessionInspectorTabId);
-  }, []);
-
-  return {
-    tabs,
-    activeTab: effectiveTab,
-    onTabChange,
-  };
-}