fix: reset Run-scoped UI state on selection changes

web/src/App.test.tsx

@@ -1,21 +1,60 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { useState } from "react";
 import App from "./App";
 import { useConnectionStore } from "./state/connection";
 
+const submitRunDraft = vi.hoisted(() => vi.fn());
+const submitSessionDraft = vi.hoisted(() => vi.fn());
+
 vi.mock("./lib/locale", () => ({
   useLocale: () => ({ locale: "zh-CN", setLocale: () => undefined,
     t: (chinese: string) => chinese }),
 }));
 
 vi.mock("./components/resource-sidebar", () => ({ ResourceSidebar: () => null }));
 vi.mock("./components/run-workspace", () => ({
-  RunWorkspace: ({ client }: { client: { hasVerificationEvidence: boolean } }) =>
-    <div data-testid="verification-capability">
-      {String(client.hasVerificationEvidence)}
-    </div>,
+  RunWorkspace: ({ client, runID }: {
+    client: { hasVerificationEvidence: boolean };
+    runID: string;
+  }) => {
+    const [draft, setDraft] = useState("");
+    const [operationState, setOperationState] = useState("idle");
+    return <div>
+      <div data-testid="verification-capability">
+        {String(client.hasVerificationEvidence)}
+      </div>
+      <div data-testid="run-identity">{runID}</div>
+      <div data-testid="run-operation-state">{operationState}</div>
+      <textarea aria-label="Run-scoped draft" onChange={(event) => setDraft(event.target.value)}
+        value={draft} />
+      <button onClick={() => setOperationState("uncertain")} type="button">
+        Mark operation uncertain
+      </button>
+      <button disabled={!draft} onClick={() => submitRunDraft(runID, draft)} type="button">
+        Submit run draft
+      </button>
+    </div>;
+  },
+}));
+vi.mock("./components/session-workspace", () => ({
+  SessionWorkspace: ({ sessionID }: { sessionID: string }) => {
+    const [draft, setDraft] = useState("");
+    const [operationState, setOperationState] = useState("idle");
+    return <div>
+      <div data-testid="session-identity">{sessionID}</div>
+      <div data-testid="session-operation-state">{operationState}</div>
+      <textarea aria-label="Session-scoped draft"
+        onChange={(event) => setDraft(event.target.value)} value={draft} />
+      <button onClick={() => setOperationState("uncertain")} type="button">
+        Mark Session operation uncertain
+      </button>
+      <button disabled={!draft} onClick={() => submitSessionDraft(sessionID, draft)} type="button">
+        Submit Session draft
+      </button>
+    </div>;
+  },
 }));
-vi.mock("./components/session-workspace", () => ({ SessionWorkspace: () => null }));
 vi.mock("./components/desktop-skill-preview", () => ({
   DesktopSkillPreviewDialog: () => null,
 }));
@@ -26,6 +65,8 @@ vi.mock("./components/run-creation-dialog", () => ({ RunCreationDialog: () => nu
 
 describe("App capability wiring", () => {
   beforeEach(() => {
+    submitRunDraft.mockClear();
+    submitSessionDraft.mockClear();
     useConnectionStore.getState().disconnect();
     useConnectionStore.getState().connect("read-token", {
       status: "ok",
@@ -55,4 +96,57 @@ describe("App capability wiring", () => {
     expect(document.querySelector(".prayu-shell.settings-mode")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "常规" })).toHaveClass("active");
   });
+
+  it("remounts Run-scoped drafts and operation state when the selected Run changes", () => {
+    vi.stubGlobal("fetch", vi.fn(() => new Promise<Response>(() => undefined)));
+    render(<QueryClientProvider client={new QueryClient()}><App /></QueryClientProvider>);
+
+    fireEvent.change(screen.getByLabelText("Run-scoped draft"), {
+      target: { value: "private instructions for run A" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Mark operation uncertain" }));
+    expect(screen.getByTestId("run-operation-state")).toHaveTextContent("uncertain");
+
+    act(() => useConnectionStore.getState().selectRun("run-b"));
+
+    expect(screen.getByTestId("run-identity")).toHaveTextContent("run-b");
+    expect(screen.getByLabelText("Run-scoped draft")).toHaveValue("");
+    expect(screen.getByTestId("run-operation-state")).toHaveTextContent("idle");
+    expect(screen.getByRole("button", { name: "Submit run draft" })).toBeDisabled();
+    expect(submitRunDraft).not.toHaveBeenCalled();
+
+    fireEvent.change(screen.getByLabelText("Run-scoped draft"), {
+      target: { value: "instructions for run B" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Submit run draft" }));
+    expect(submitRunDraft).toHaveBeenCalledOnce();
+    expect(submitRunDraft).toHaveBeenCalledWith("run-b", "instructions for run B");
+  });
+
+  it("remounts Session-scoped drafts and operation state when the selected Session changes", () => {
+    vi.stubGlobal("fetch", vi.fn(() => new Promise<Response>(() => undefined)));
+    useConnectionStore.getState().selectSession("session-a");
+    render(<QueryClientProvider client={new QueryClient()}><App /></QueryClientProvider>);
+
+    fireEvent.change(screen.getByLabelText("Session-scoped draft"), {
+      target: { value: "private instructions for session A" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Mark Session operation uncertain" }));
+    expect(screen.getByTestId("session-operation-state")).toHaveTextContent("uncertain");
+
+    act(() => useConnectionStore.getState().selectSession("session-b"));
+
+    expect(screen.getByTestId("session-identity")).toHaveTextContent("session-b");
+    expect(screen.getByLabelText("Session-scoped draft")).toHaveValue("");
+    expect(screen.getByTestId("session-operation-state")).toHaveTextContent("idle");
+    expect(screen.getByRole("button", { name: "Submit Session draft" })).toBeDisabled();
+    expect(submitSessionDraft).not.toHaveBeenCalled();
+
+    fireEvent.change(screen.getByLabelText("Session-scoped draft"), {
+      target: { value: "instructions for session B" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Submit Session draft" }));
+    expect(submitSessionDraft).toHaveBeenCalledOnce();
+    expect(submitSessionDraft).toHaveBeenCalledWith("session-b", "instructions for session B");
+  });
 });

web/src/App.tsx

@@ -294,9 +294,11 @@ function ConnectedWorkbench({ token, controlToken, runControlEnabled, runCreatio
         onOpenPlugins={desktop ? () => setSkillPreviewOpen(true) : undefined} />
       : selectedResourceID
         ? resourceKind === "run"
-          ? <RunWorkspace client={client} onOpenPlugins={desktop ? () => setSkillPreviewOpen(true) : undefined}
+          ? <RunWorkspace client={client} key={selectedRunID}
+            onOpenPlugins={desktop ? () => setSkillPreviewOpen(true) : undefined}
             runID={selectedRunID} />
-          : <SessionWorkspace client={client} onOpenPlugins={desktop ? () => setSkillPreviewOpen(true) : undefined}
+          : <SessionWorkspace client={client} key={selectedSessionID}
+            onOpenPlugins={desktop ? () => setSkillPreviewOpen(true) : undefined}
             sessionID={selectedSessionID} />
         : <EmptyConversation client={client} creationEnabled={runCreationEnabled}
           onCreateRun={openRunCreation}