feat(studio): configure agents before live comparison

Prepare selected ACP agent sessions in the Compare workspace so readers can
review and change each configuration before submitting one shared task. Keep
retained-session comparison evidence explicit rather than choosing a default
pair, with browser coverage for the updated input flow.

Spec: docs/specs/2026-09-09-compare-input-flow.md
Co-authored-by: QoderAI (Qwen 3.8 Max) <qoder_ai@qoder.com>

Author: phodal

docs/specs/2026-09-09-compare-input-flow.md

@@ -0,0 +1,35 @@
+# Compare input flow
+
+## Traceability
+- Spec ID: compare-input-flow
+- Status: Implemented
+- Request: simplify the Compare composer, make Agent configuration inline, and keep retained Session comparison explicit.
+
+## Intent
+Keep Compare focused on one decision at a time: select Agents, review their offered configuration in the persistent input region, then run. Do not load or open retained Sessions until the reader explicitly selects a pair for comparison.
+
+## Acceptance Scenarios
+- AC-1: The idle Compare surface shows only the docked input region and its neutral reading area; it does not render saved conversation/chat content. Readiness remains an inline status/control and never consumes a separate full-width line.
+- AC-2: Choosing one or more available Agents automatically prepares their configuration in the input region. Offered core options, including reasoning strength when the Agent supplies it, are editable before the shared prompt starts.
+- AC-3: Choosing `Configure Agents` refreshes only the input-region configuration. It does not reveal a transcript, create message panes, or navigate away from Compare.
+- AC-4: Starting the prompt from a prepared input region preserves the current prompt and Agent configuration, then opens the existing live comparison lanes.
+- AC-5: Compare defaults to Live Agents. Its retained Sessions surface remains empty until the reader explicitly selects two Sessions in the Sessions workspace; it then requests only that pair's comparison, without loading or auto-pairing the retained Session catalog.
+- AC-6: Entering the Sessions workspace does not automatically fetch a Session detail; explicit row selection remains the only detail-opening action.
+
+## Non-goals
+Do not add Agent adapters, invent configuration options, alter retained Session discovery, change the live comparison evidence panes after a prompt starts, or modify release metadata.
+
+## Plan and Tasks
+1. Keep ACP preparation streams in Compare state, expose `AcpSessionSettings` inside the composer, and release them only when the reader starts the prompt.
+2. Allow prepared ACP runs to replace their initial prompt at start time, so Agent selection can precede prompt entry.
+3. Remove idle conversation history and make composer status/configuration wrap within its own bounded surface.
+4. Default Compare to Live Agents; make retained Session comparison pair-driven and remove automatic Session detail opening.
+5. Update English/Chinese labels and focused browser tests for configuration, Session scope, keyboard focus, wide/compact/narrow overflow, and browser errors.
+
+## Test and Review Evidence
+- AC-1/AC-3: Browser tests assert no idle transcript or lanes while configuration refreshes in the composer.
+- AC-2/AC-4: ACP fixture tests change model/reasoning settings, start after preparation, and verify the selected values reach the Agent.
+- AC-5/AC-6: Browser coverage verifies the legacy Sessions catalog has no selected detail after reload and opens evidence only after an explicit row click; retained comparison still starts from an explicitly selected pair.
+- All ACs: run Studio typecheck/build, relevant Vitest/Playwright suites, `git diff --check`, and visual screenshots at 1440px, 1024px, and 390px with console/page-error checks.
+- Verified: Studio build/typecheck, 19 focused unit assertions, and six focused Playwright scenarios covering inline configuration, input-only refresh, explicit Session opening, live lane startup, responsive layouts, keyboard focus, and browser errors passed locally.
+- Risk: preparation streams remain live until start or refresh; reset must close old sessions, retain the latest requested Agent set, and never expose stale transcript content.

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

@@ -218,7 +218,9 @@ export function App(): React.JSX.Element {
   const [bootstrapRevision, setBootstrapRevision] = useState(0);
   const [area, setArea] = useState<StudioArea>(areaFromHash);
   const [locationRevision, setLocationRevision] = useState(0);
-  const [compareSurface, setCompareSurface] = useState<StudioCompareSurface>("sessions");
+  // Live comparison is the active workflow. Retained Session evidence is only
+  // opened after the reader explicitly selects a pair in Sessions.
+  const [compareSurface, setCompareSurface] = useState<StudioCompareSurface>("live");
   const [navigationOpen, setNavigationOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(storedSidebarCollapsed);
   const [sidebarWidth, setSidebarWidth] = useState(storedSidebarWidth);
@@ -394,7 +396,7 @@ export function App(): React.JSX.Element {
       setProjects(loaded.projectCatalog.projects);
       setActiveProjectId(loaded.projectCatalog.activeProjectId);
       setConfig(loaded.config);
-      setCompareSurface((currentSurface) => compareSurfaces(loaded.config).includes(currentSurface) ? currentSurface : compareSurfaces(loaded.config)[0] ?? "sessions");
+      setCompareSurface((currentSurface) => compareSurfaces(loaded.config).includes(currentSurface) ? currentSurface : compareSurfaces(loaded.config)[0] ?? "live");
       setDataRevision((revision) => revision + 1);
     } catch (error) {
       setConfigFailure(error instanceof Error ? error.message : t("config.sourceSwitchFailed"));
@@ -410,7 +412,7 @@ export function App(): React.JSX.Element {
     setConfig(loaded.config);
     setSessionCompareIds(undefined);
     setSessionOpenId(undefined);
-    setCompareSurface((currentSurface) => compareSurfaces(loaded.config).includes(currentSurface) ? currentSurface : compareSurfaces(loaded.config)[0] ?? "sessions");
+    setCompareSurface((currentSurface) => compareSurfaces(loaded.config).includes(currentSurface) ? currentSurface : compareSurfaces(loaded.config)[0] ?? "live");
     setWorkspaceRevision((revision) => revision + 1);
     return loaded.projectCatalog.activeProjectId;
   }
@@ -932,8 +934,11 @@ function SessionsWorkspace(props: {
         if (cancelled) return;
         setOmittedCount(payload.workspace.omittedCount);
         setSessions(payload.sessions);
-        const inRange = payload.sessions.filter((session) => withinDateRange(session.savedAt, props.dateRange));
-        const initialSession = inRange.find((session) => session.id === props.initialSessionId) ?? inRange[0];
+        // Opening Sessions presents an evidence catalog, not an implicit detail
+        // navigation. Only an explicit deep-link/session request opens a row.
+        const initialSession = props.initialSessionId === undefined
+          ? undefined
+          : payload.sessions.find((session) => session.id === props.initialSessionId && withinDateRange(session.savedAt, props.dateRange));
         if (initialSession !== undefined) await openSession(initialSession.id, () => cancelled);
       } catch (error) {
         if (!cancelled) setFailure(error instanceof Error ? error.message : String(error));
@@ -1279,53 +1284,26 @@ interface SessionComparison {
   right: SessionComparisonSide;
 }
 
-/**
- * Seed the pair with two different Agents when the Project has them, so the
- * default view answers the cross-Agent question instead of pairing whichever
- * two Sessions happen to be newest.
- */
-function crossAgentPair(sessions: readonly SessionSummary[]): [string, string] | undefined {
-  const first = sessions[0];
-  if (first === undefined) return undefined;
-  const other = sessions.find((session) => (session.provider ?? "") !== (first.provider ?? ""));
-  return other === undefined ? undefined : [first.id, other.id];
-}
-
 function SessionCompareView(props: { navigation: ReactNode; initialIds?: [string, string] }): React.JSX.Element {
   const { t } = useTranslation("sessions");
-  const [sessions, setSessions] = useState<SessionSummary[]>([]);
-  const [leftId, setLeftId] = useState(props.initialIds?.[0] ?? "");
-  const [rightId, setRightId] = useState(props.initialIds?.[1] ?? "");
   const [comparison, setComparison] = useState<SessionComparison>();
   const [failure, setFailure] = useState<string>();
+  const leftId = props.initialIds?.[0];
+  const rightId = props.initialIds?.[1];
 
   useEffect(() => {
-    let cancelled = false;
-    void (async () => {
-      try {
-        const response = await fetch("api/sessions");
-        if (!response.ok) throw new Error(await studioApiError(response));
-        const loaded = await response.json() as { sessions: SessionSummary[] };
-        if (cancelled) return;
-        setSessions(loaded.sessions);
-        const preferred = crossAgentPair(loaded.sessions);
-        setLeftId((current) => current || preferred?.[0] || loaded.sessions[0]?.id || "");
-        setRightId((current) => current || preferred?.[1] || loaded.sessions[1]?.id || "");
-      } catch (error) {
-        if (!cancelled) setFailure(error instanceof Error ? error.message : String(error));
-      }
-    })();
-    return () => { cancelled = true; };
-  }, []);
-
-  useEffect(() => {
-    if (leftId === "" || rightId === "" || leftId === rightId) return;
+    if (leftId === undefined || rightId === undefined || leftId === rightId) {
+      setComparison(undefined);
+      setFailure(undefined);
+      return;
+    }
     const controller = new AbortController();
+    setComparison(undefined);
+    setFailure(undefined);
     void (async () => {
       try {
         const response = await fetch(`api/session-compare?${new URLSearchParams({ left: leftId, right: rightId })}`, { signal: controller.signal });
         if (!response.ok) throw new Error(await studioApiError(response));
-        setFailure(undefined);
         setComparison(await response.json() as SessionComparison);
       } catch (error) {
         if (!controller.signal.aborted) setFailure(error instanceof Error ? error.message : String(error));
@@ -1334,10 +1312,15 @@ function SessionCompareView(props: { navigation: ReactNode; initialIds?: [string
     return () => controller.abort();
   }, [leftId, rightId]);
 
-  const optionLabel = (session: SessionSummary): string => t("compare.optionLabel", { agent: session.provider ?? t("common:localAgent"), prompt: session.prompt });
+  if (leftId === undefined || rightId === undefined || leftId === rightId) {
+    return <main className="session-compare-workspace">
+      <header><div><small>{t("compare.eyebrow")}</small><h1>{t("compare.title")}</h1></div>{props.navigation}</header>
+      <div className="session-compare-empty"><h2>{t("compare.selectPairTitle")}</h2><p>{t("compare.selectPairDetail")}</p></div>
+    </main>;
+  }
+
   return <main className="session-compare-workspace">
     <header><div><small>{t("compare.eyebrow")}</small><h1>{t("compare.title")}</h1></div>{props.navigation}</header>
-    <div className="session-compare-picker"><label><span>{t("compare.left")}</span><select value={leftId} onChange={(event) => setLeftId(event.target.value)}>{sessions.map((session) => <option key={session.id} value={session.id} disabled={session.id === rightId}>{optionLabel(session)}</option>)}</select></label><label><span>{t("compare.right")}</span><select value={rightId} onChange={(event) => setRightId(event.target.value)}>{sessions.map((session) => <option key={session.id} value={session.id} disabled={session.id === leftId}>{optionLabel(session)}</option>)}</select></label></div>
     {failure !== undefined && <p className="session-compare-boundary status-danger" role="alert">{failure}</p>}
     {comparison === undefined ? <p className="artifact-status" role="status">{t("compare.loading")}</p> : <>
       <p className="session-compare-boundary"><strong>{t("compare.noWinner")}</strong> {comparison.boundary}</p>