feat(studio): mount the React Inspector workbench as the primary Sessions surface

Sessions previously reused only Inspector's session discovery and rendered a
compact catalog, while the full workbench lived in a standalone HTML page whose
`workbench.js` Studio executed inside a scoped shadow-DOM runtime. Rebuild the
complete Inspector interaction natively in React: Capability/Date navigation,
scope metrics, evidence workbench cards, and the retained Session drawer are now
React-owned state and components, so Studio no longer loads or evals the legacy
Inspector script. The original Inspector stylesheet stays the visual contract,
and the compact catalog remains an explicit secondary Catalog & Compare view via
an accessible, keyboard-usable tab switch.

Build a bounded HarnessInspectorReportV1 during workspace discovery from the same
normalized provider sessions (commits, checkpoints, correlation, and the
workspace Feature Tree), retain it only in the server-side active workspace, and
serve it through a workspace-scoped `GET /api/workspace-inspector-report` with
`Cache-Control: no-store`. A new `workspaceWorkbenchEnabled` config flag drives
the default surface and falls back to the catalog with an actionable status when
structured data is unavailable. Drop the `workbench.js` build copy.

Spec: docs/specs/2026-08-20-harness-studio-local-web-workspace.md
Test: studio typecheck clean; 121 unit + 16 Playwright pass; 1412 repo tests pass

Co-authored-by: QoderAI (Qwen 3.8 Max) <qoder_ai@qoder.com>

Author: phodal

docs/specs/2026-08-20-harness-studio-local-web-workspace.md

@@ -57,6 +57,16 @@ surface exists.
   server-only directory as `cwd` and the default capability source root; no
   absolute path is returned to the browser and no scripted demo executor is
   substituted in production.
+- **D-9: Sessions reuses the Inspector workbench instead of only its
+  discovery.** The workspace provider returns the same privacy-filtered
+  `HarnessInspectorReportV1` projection consumed by
+  `scripts/harness-inspector/ui/workbench.html`. Studio rewrites that complete
+  workbench interaction in React: Capability/Date navigation, scope metrics,
+  evidence workbench cards, and the retained Session drawer are React-owned
+  state and components. The original Inspector stylesheet/class contract stays
+  the visual source, while `workbench.js` remains only the standalone HTML
+  renderer and is never executed by Studio. The compact catalog remains an
+  explicit secondary view for two-Session selection and comparison.
 
 ## Acceptance Scenarios
 
@@ -96,12 +106,23 @@ surface exists.
   executes through the real built-in Qoder adapter in the selected workspace.
   A caller-supplied harness/runtime remains authoritative, and a Studio server
   without workspace discovery does not silently acquire a runnable endpoint.
+- **AC-13:** After selecting a project workspace, Sessions defaults to the
+  native Harness Inspector workbench backed by the workspace's structured
+  report. Capability/date navigation, scope metrics, workbench rows, and the
+  retained Session drawer execute as React components matching the complete
+  `workbench.html` design; Studio does not load or execute `workbench.js`. A visible,
+  keyboard-usable view switch exposes Catalog & Compare without losing the
+  active workspace or requiring a restart/CLI argument. When a provider cannot
+  supply structured Inspector data, Studio falls back to the catalog with an
+  actionable status rather than an empty workbench.
 
 ## Non-goals
 
 - Treating observational Session Compare as an experiment verdict.
 - Uploading an entire repository or agent home to the loopback server.
 - Reimplementing host transcript discovery inside the Studio package or UI.
+- Maintaining an independent visual language for the React Inspector; the
+  standalone `workbench.html` and its stylesheet remain the design contract.
 - Editing, replaying, or writing back into imported sessions.
 - Shipping the public `better-harness web` package boundary in this first UI
   migration; the server and packaged-app ownership must be resolved first.
@@ -148,6 +169,15 @@ bind execution to the selected workspace on the server, label the active
 default in the UI, and exercise the same AG-UI/live-run path as configured
 harnesses.
 
+### 7. Mount Inspector as the primary Sessions workbench
+
+Build a bounded `HarnessInspectorReportV1` from the same normalized provider
+sessions during workspace discovery, retain it only in the server-side active
+workspace, and expose it through a workspace-scoped structured endpoint. Rewrite
+the complete Inspector workbench UI as React components using the standalone
+HTML/CSS contract, with no `workbench.js` execution, plus an accessible
+Inspector/Catalog & Compare switch and a catalog fallback.
+
 ## Test and Review Evidence
 
 - AC-1/AC-8: empty-start model and Playwright assertions for UI copy and actions.
@@ -168,6 +198,13 @@ harnesses.
   deterministic executor while asserting the selected workspace `cwd` and
   source root; Playwright opens Debugger after workspace discovery and completes
   a live run through the default AG-UI path.
+- AC-13: provider and server tests assert a privacy-filtered structured
+  workspace report, Git/Session correlation, and no absolute-path disclosure.
+  Playwright verifies the React-owned Inspector workbench is the default
+  Sessions surface, opens a retained Session through its Date navigator,
+  switches to Catalog & Compare, repeats wide/compact/narrow overflow plus
+  console/page-error checks, and asserts that Studio never requests the legacy
+  `workbench.js` runtime.
 
 Implementation evidence (2026-08-20):
 
@@ -178,10 +215,12 @@ Implementation evidence (2026-08-20):
   passed, including the workspace intake, discovered Session detail, Compare,
   the default live Debugger flow, animated discovery status,
   wide/compact/narrow screenshots, keyboard focus, overflow, console, and page
-  error checks.
+  error checks. The Sessions flow also exercises the React Inspector drawer and
+  asserts that no legacy Inspector script is loaded.
 - `npm test` at the repository root: 99 files, 1412 tests passed.
 - A live in-process discovery smoke against this repository returned the bounded
-  100-Session catalog: Qoder 79, Codex 16, and Claude 5.
+  React Inspector report with 100 Sessions and 50 commits: Qoder 79, Codex 16,
+  and Claude 5.
 
 ### Risks
 
@@ -197,3 +236,6 @@ Implementation evidence (2026-08-20):
   return an actionable unavailable state when no chooser exists.
 - Large histories can exhaust memory. Discovery retains Inspector's global
   Session bound and hydrates only selected recent candidates.
+- The Inspector workbench is a substantial retained-evidence renderer. Studio
+  must reuse its assets lazily and keep the compact catalog available if the
+  structured report or client runtime cannot be mounted.

packages/harness-studio/scripts/build-app.mjs

@@ -31,7 +31,6 @@ await Promise.all([
     copyFile(join(packageRoot, "src", "app", "styles", file), join(appDir, "assets", file)),
   ),
   copyFile(join(inspectorAssetRoot, "workbench.css"), join(appDir, "assets", "inspector-workbench.css")),
-  copyFile(join(inspectorAssetRoot, "workbench.js"), join(appDir, "assets", "inspector-workbench.js")),
 ]);
 process.stdout.write(`Built studio app into ${appDir}\n`);
 process.exit(0);

packages/harness-studio/scripts/inspector-workspace-provider.mjs

@@ -1,19 +1,33 @@
+import { readFile } from "node:fs/promises";
 import path from "node:path";
 
 import {
+  attachCheckpointFactsToSessions,
+  collectCommitFacts,
+  collectEntireCheckpointFacts,
   collectMultiPlatformSessionSummaries,
+  correlateCommitsWithSessions,
   resolveRepoRoot,
 } from "../../../scripts/commit-session-link/index.mjs";
 import { SUPPORTED_SESSION_PROVIDERS } from "../../../scripts/session-analysis/index.mjs";
+import {
+  buildHarnessInspectorReport,
+  emptyFeatureTree,
+  parseFeatureTreeMarkdown,
+} from "../../../scripts/harness-inspector/index.mjs";
 
 const MAX_SESSIONS = 100;
+const MAX_COMMITS = 50;
 
 /**
  * Repository integration adapter: reuse Inspector's real provider discovery in
  * process and project its privacy-safe summaries into Studio's Session model.
  */
 export function createInspectorWorkspaceSessionProvider({
   collect = collectMultiPlatformSessionSummaries,
+  collectCommits = collectCommitFacts,
+  collectCheckpoints = collectEntireCheckpointFacts,
+  correlate = correlateCommitsWithSessions,
   repoRootFor = resolveRepoRoot,
   platforms = SUPPORTED_SESSION_PROVIDERS,
 } = {}) {
@@ -28,9 +42,44 @@ export function createInspectorWorkspaceSessionProvider({
         includeToolTrace: true,
         includeDialogue: true,
       });
+      const { commits } = collectCommits({ workspace: repoRoot, limit: MAX_COMMITS });
+      const checkpointResolution = collectCheckpoints({ repoRoot, commits });
+      const sessionsWithCheckpoints = attachCheckpointFactsToSessions(sessions, checkpointResolution.checkpoints);
+      const correlated = correlate(commits, sessionsWithCheckpoints);
+      const filesByCommit = new Map(commits.map((commit) => [commit.hash, commit.files]));
+      const correlation = {
+        ...correlated,
+        commits: correlated.commits.map((commit) => ({
+          ...commit,
+          files: filesByCommit.get(commit.hash) ?? [],
+        })),
+      };
+      const { featureTree, diagnostics } = await loadWorkspaceFeatureTree(repoRoot);
+      const inspectorReport = buildHarnessInspectorReport({
+        repoRoot,
+        featureTree,
+        sessions: sessionsWithCheckpoints,
+        correlation,
+        providers,
+        filters: {
+          platform: "all",
+          since: null,
+          until: null,
+          stage: null,
+          commitLimit: MAX_COMMITS,
+          sessionLimit: MAX_SESSIONS,
+        },
+        diagnostics: [
+          ...diagnostics,
+          ...(checkpointResolution.unresolved.length > 0
+            ? [`${checkpointResolution.unresolved.length} Entire checkpoint link(s) could not be resolved locally.`]
+            : []),
+        ],
+      });
       return {
         label: path.basename(repoRoot),
-        sessions: sessions.map(projectInspectorSession).filter(Boolean),
+        inspectorReport,
+        sessions: sessionsWithCheckpoints.map(projectInspectorSession).filter(Boolean),
         providers: providers.map((provider) => ({
           provider: provider.platform,
           status: provider.status,
@@ -43,6 +92,24 @@ export function createInspectorWorkspaceSessionProvider({
   };
 }
 
+async function loadWorkspaceFeatureTree(repoRoot) {
+  const featureTreePath = path.join(repoRoot, ".better-harness", "feature-tree.md");
+  try {
+    return {
+      featureTree: parseFeatureTreeMarkdown(await readFile(featureTreePath, "utf8"), { source: "workspace feature tree" }),
+      diagnostics: [],
+    };
+  } catch (error) {
+    if (error && typeof error === "object" && error.code === "ENOENT") {
+      return { featureTree: emptyFeatureTree(), diagnostics: [] };
+    }
+    return {
+      featureTree: emptyFeatureTree(),
+      diagnostics: ["The workspace Feature Tree could not be parsed; Date mode remains available."],
+    };
+  }
+}
+
 function projectInspectorSession(summary) {
   const savedAt = validTimestamp(summary.lastSeen) ?? validTimestamp(summary.firstSeen);
   if (!savedAt || !summary.sessionId || !summary.platform) return null;

packages/harness-studio/src/app/App.tsx

@@ -19,6 +19,7 @@ import type { DebuggerSession } from "./session-debugger-model.js";
 import { useRovingFocus } from "./roving-tablist.js";
 
 const StudioDiff = lazy(() => import("./StudioDiff.js"));
+const InspectorWorkbench = lazy(async () => ({ default: (await import("./InspectorWorkbench.js")).InspectorWorkbench }));
 import {
   capabilitySummary,
   compareSurfaces,
@@ -63,6 +64,7 @@ const EMPTY_CONFIG: StudioConfig = {
   harnessMode: "none",
   historyEnabled: false,
   inspectorEnabled: false,
+  workspaceWorkbenchEnabled: false,
   workspaceDiscoveryEnabled: false,
   workspaceConnected: false,
   sessionCount: 0,
@@ -349,7 +351,7 @@ function Overview(props: { config: StudioConfig; onOpen: (area: StudioArea) => v
   const inputs = [
     ["Project workspace", props.config.workspaceConnected],
     ["Artifact catalog", props.config.artifactsEnabled],
-    ["Inspector report", props.config.inspectorEnabled],
+    ["Inspector workbench", props.config.workspaceWorkbenchEnabled || props.config.inspectorEnabled],
     ["Harness runtime", props.config.aguiEnabled],
     ["Experiment manifest", props.config.experimentEnabled],
     ["Compare evidence", props.config.evidenceEnabled],
@@ -397,6 +399,9 @@ function SessionsWorkspace(props: {
   const [detail, setDetail] = useState<DebuggerSession>();
   const [failure, setFailure] = useState<string>();
   const [detailFailure, setDetailFailure] = useState<string>();
+  const [surface, setSurface] = useState<"inspector" | "catalog">(
+    props.config.workspaceWorkbenchEnabled ? "inspector" : "catalog",
+  );
 
   useEffect(() => {
     if (!props.config.workspaceConnected) return;
@@ -462,7 +467,7 @@ function SessionsWorkspace(props: {
   if (sessions === undefined) return <p className="artifact-status" role="status">Indexing sessions…</p>;
 
   const pair = [...compareIds];
-  return <section className="session-browser-workspace" aria-label="Project workspace sessions">
+  const catalog = <section className="session-browser-workspace" aria-label="Project workspace sessions">
     <aside className="session-catalog-pane">
       <header><div><small>Local workspace</small><h2 title={workspaceLabel}>{workspaceLabel}</h2></div><span>{sessions.length}</span></header>
       {omittedCount > 0 && <p className="session-omissions">{omittedCount} unsupported or malformed file{omittedCount === 1 ? "" : "s"} omitted.</p>}
@@ -480,6 +485,24 @@ function SessionsWorkspace(props: {
           : <SessionDetail session={detail} />}
     </main>
   </section>;
+
+  if (!props.config.workspaceWorkbenchEnabled) return catalog;
+  return <section className="session-workbench-stack" aria-label="Workspace Session evidence">
+    <header className="session-workbench-toolbar">
+      <div><strong>{workspaceLabel}</strong><span>Inspector-owned workspace evidence</span></div>
+      <div className="session-surface-tabs" role="tablist" aria-label="Session views">
+        <button id="session-tab-inspector" type="button" role="tab" aria-controls="session-workbench-panel" aria-selected={surface === "inspector"} tabIndex={surface === "inspector" ? 0 : -1} className={surface === "inspector" ? "selected" : undefined} onClick={() => setSurface("inspector")} onKeyDown={(event) => { if (event.key === "ArrowRight") { event.preventDefault(); setSurface("catalog"); (event.currentTarget.nextElementSibling as HTMLButtonElement | null)?.focus(); } }}>Inspector</button>
+        <button id="session-tab-catalog" type="button" role="tab" aria-controls="session-workbench-panel" aria-selected={surface === "catalog"} tabIndex={surface === "catalog" ? 0 : -1} className={surface === "catalog" ? "selected" : undefined} onClick={() => setSurface("catalog")} onKeyDown={(event) => { if (event.key === "ArrowLeft") { event.preventDefault(); setSurface("inspector"); (event.currentTarget.previousElementSibling as HTMLButtonElement | null)?.focus(); } }}>Catalog &amp; Compare</button>
+      </div>
+    </header>
+    <div id="session-workbench-panel" className="session-workbench-surface" role="tabpanel" aria-labelledby={surface === "inspector" ? "session-tab-inspector" : "session-tab-catalog"}>
+      {surface === "inspector"
+        ? <Suspense fallback={<p className="artifact-status" role="status">Loading Inspector workbench…</p>}>
+            <InspectorWorkbench reportUrl="api/workspace-inspector-report" fallback={catalog} />
+          </Suspense>
+        : catalog}
+    </div>
+  </section>;
 }
 
 function SessionDetail({ session }: { session: DebuggerSession }): React.JSX.Element {