Fix agent stop action and throttle duplicate settings saves

Author: pallyoung

packages/web/src/features/agent-panes/components/session-card.test.tsx

@@ -16,6 +16,11 @@ const mockXtermHost = vi.fn((props: Record<string, unknown>) => (
   <div data-testid="mock-xterm-host" data-readonly={String(props.readOnly)} />
 ));
 
+function getLastXtermHostProps() {
+  const lastCall = mockXtermHost.mock.calls[mockXtermHost.mock.calls.length - 1];
+  return lastCall?.[0];
+}
+
 vi.mock("../../terminal-panel/views/shared/xterm-host", () => ({
   XtermHost: (props: Record<string, unknown>) => mockXtermHost(props),
 }));
@@ -105,7 +110,7 @@ describe("SessionCard", () => {
 
     expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
     expect(screen.queryByRole("button", { name: "Start" })).not.toBeInTheDocument();
-    expect(mockXtermHost.mock.calls.at(-1)?.[0]).toEqual(
+    expect(getLastXtermHostProps()).toEqual(
       expect.objectContaining({
         terminalId: "term-live",
         readOnly: false,
@@ -149,7 +154,7 @@ describe("SessionCard", () => {
       </Provider>
     );
 
-    expect(mockXtermHost.mock.calls.at(-1)?.[0]).toEqual(
+    expect(getLastXtermHostProps()).toEqual(
       expect.objectContaining({
         terminalId: "term-live",
         isActiveSession: true,
@@ -308,7 +313,7 @@ describe("SessionCard", () => {
       </Provider>
     );
 
-    expect(mockXtermHost.mock.calls.at(-1)?.[0]).toEqual(
+    expect(getLastXtermHostProps()).toEqual(
       expect.objectContaining({
         terminalId: "term-live",
         readOnly: true,
@@ -460,7 +465,7 @@ describe("SessionCard", () => {
       </Provider>
     );
 
-    expect(mockXtermHost.mock.calls.at(-1)?.[0]).toEqual(
+    expect(getLastXtermHostProps()).toEqual(
       expect.objectContaining({
         terminalId: "term-ended",
         readOnly: true,
@@ -509,6 +514,25 @@ describe("SessionCard", () => {
     );
   });
 
+  it("renders stop for running sessions and routes it through the explicit callback", () => {
+    const { store } = createSessionStore({
+      terminalId: "term-live",
+      state: "running",
+      endedAt: undefined,
+    });
+    const onStop = vi.fn();
+
+    render(
+      <Provider store={store}>
+        <SessionCard sessionId="sess_123456" onStop={onStop} />
+      </Provider>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Stop" }));
+
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
   it("routes split buttons through explicit callbacks", () => {
     const { store } = createSessionStore({
       terminalId: "term-live",
@@ -548,7 +572,12 @@ describe("SessionCard", () => {
       </Provider>
     );
 
-    expect(screen.queryByRole("button", { name: "Stop" })).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Stop" })).toHaveClass(
+      "btn",
+      "btn-ghost",
+      "btn-sm",
+      "session-action-btn"
+    );
     expect(screen.getByRole("button", { name: "Split horizontal" })).toHaveClass(
       "btn",
       "btn-ghost",

packages/web/src/features/agent-panes/index.test.tsx

@@ -1,3 +1,4 @@
+import type { Session } from "@coder-studio/core";
 import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -9,20 +10,21 @@ import { seedReadyWorkspaceState } from "../../test-utils/workspace-state";
 import { LEGACY_PANE_LAYOUT_STORAGE_KEY_PREFIX, paneLayoutAtomFamily } from "./atoms/pane-layout";
 import { AgentPanes } from "./index";
 
+type MockSessionCardProps = {
+  sessionId: string;
+  onStop?: () => void;
+  onSplitHorizontal?: () => void;
+  onSplitVertical?: () => void;
+  onClose?: () => void;
+};
+
 const mockSessionCard = vi.fn(
-  ({
-    sessionId,
-    onSplitHorizontal,
-    onSplitVertical,
-    onClose,
-  }: {
-    sessionId: string;
-    onSplitHorizontal?: () => void;
-    onSplitVertical?: () => void;
-    onClose?: () => void;
-  }) => (
+  ({ sessionId, onStop, onSplitHorizontal, onSplitVertical, onClose }: MockSessionCardProps) => (
     <div data-testid="session-card">
       <span>{sessionId}</span>
+      <button type="button" onClick={onStop}>
+        stop-{sessionId}
+      </button>
       <button type="button" onClick={onSplitHorizontal}>
         split-{sessionId}
       </button>
@@ -37,7 +39,7 @@ const mockSessionCard = vi.fn(
 );
 
 vi.mock("./views/shared/session-card", () => ({
-  SessionCard: (props: Record<string, unknown>) => mockSessionCard(props),
+  SessionCard: (props: MockSessionCardProps) => mockSessionCard(props),
 }));
 
 vi.mock("./views/shared/pane-layout", () => ({
@@ -72,7 +74,7 @@ function createAgentPaneStore(
     | "rejected" = "connected"
 ) {
   const store = createStore();
-  const sessions = [
+  const sessions: Session[] = [
     {
       id: "sess_1",
       workspaceId: "ws-1",
@@ -125,7 +127,10 @@ function createAgentPaneStore(
       },
     },
   });
-  store.set(sessionsAtom, Object.fromEntries(sessions.map((session) => [session.id, session])));
+  store.set(
+    sessionsAtom,
+    Object.fromEntries(sessions.map((session) => [session.id, session])) as Record<string, Session>
+  );
   store.set(
     paneLayoutAtomFamily("ws-1"),
     (initialLayout as never) ?? {
@@ -339,6 +344,39 @@ describe("AgentPanes", () => {
     });
   });
 
+  it("stops a running session without removing its pane", async () => {
+    const { store, sendCommand } = createAgentPaneStore();
+
+    render(
+      <Provider store={store}>
+        <AgentPanes />
+      </Provider>
+    );
+
+    await waitFor(() => {
+      expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual({
+        id: expect.any(String),
+        type: "split",
+        direction: "horizontal",
+        ratio: 0.5,
+        children: [
+          expect.objectContaining({ type: "leaf", sessionId: "sess_1" }),
+          expect.objectContaining({ type: "leaf", sessionId: "sess_2" }),
+        ],
+      });
+    });
+
+    const layoutBeforeStop = structuredClone(store.get(paneLayoutAtomFamily("ws-1")));
+
+    fireEvent.click(screen.getByRole("button", { name: "stop-sess_1" }));
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenCalledWith("session.stop", { sessionId: "sess_1" }, undefined);
+    });
+
+    expect(store.get(paneLayoutAtomFamily("ws-1"))).toEqual(layoutBeforeStop);
+  });
+
   it("waits for the websocket connection before requesting session.list", async () => {
     const sendCommand = vi.fn().mockResolvedValue([]);
     const { store } = createAgentPaneStore(undefined, sendCommand, "connecting");

packages/web/src/features/agent-panes/index.tsx

@@ -85,6 +85,7 @@ export const AgentPanes: FC<AgentPanesProps> = ({ hydrateSessions = true }) => {
         onAssignSession={paneActions.assignSession}
         onReplaceWithSession={paneActions.replaceWithSession}
         onCloseSessionCommand={sessionActions.closeSession}
+        onStopSession={sessionActions.stopSession}
       />
     </div>
   );
@@ -96,10 +97,11 @@ interface PaneNodeRendererProps {
   onAssignSession: (paneId: string, sessionId: string) => void;
   onCloseDraftPane: (paneId: string) => void;
   onCloseSession: (sessionId: string) => void;
-  onCloseSessionCommand: (sessionId: string) => Promise<void>;
+  onCloseSessionCommand: (sessionId: string) => Promise<boolean | void>;
   onReplaceWithSession: (sessionId: string) => void;
   onSplitDraftPane: (paneId: string, direction: "horizontal" | "vertical") => void;
   onSplitSession: (sessionId: string, direction: "horizontal" | "vertical") => void;
+  onStopSession: (sessionId: string) => Promise<void>;
 }
 
 /**
@@ -115,6 +117,7 @@ const PaneNodeRenderer: FC<PaneNodeRendererProps> = ({
   onReplaceWithSession,
   onSplitDraftPane,
   onSplitSession,
+  onStopSession,
 }) => {
   if (node.type === "leaf") {
     // Render session card or draft launcher
@@ -128,6 +131,7 @@ const PaneNodeRenderer: FC<PaneNodeRendererProps> = ({
           }}
           onSplitHorizontal={() => onSplitSession(node.sessionId!, "horizontal")}
           onSplitVertical={() => onSplitSession(node.sessionId!, "vertical")}
+          onStop={() => onStopSession(node.sessionId!)}
         />
       );
     } else {
@@ -166,6 +170,7 @@ const PaneNodeRenderer: FC<PaneNodeRendererProps> = ({
           onReplaceWithSession={onReplaceWithSession}
           onSplitDraftPane={onSplitDraftPane}
           onSplitSession={onSplitSession}
+          onStopSession={onStopSession}
         />
       ))}
     </PaneLayout>

packages/web/src/features/agent-panes/views/shared/session-card.tsx

@@ -7,7 +7,7 @@
 
 import type { SessionState } from "@coder-studio/core";
 import { useAtomValue, useSetAtom } from "jotai";
-import { FlipHorizontal, FlipVertical, X } from "lucide-react";
+import { FlipHorizontal, FlipVertical, Square, X } from "lucide-react";
 import type { FC, ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { pendingFocusSessionAtom } from "../../../../atoms/app-ui";
@@ -33,6 +33,7 @@ interface SessionCardProps {
   onClose?: SessionCardAction;
   onSplitHorizontal?: SessionCardAction;
   onSplitVertical?: SessionCardAction;
+  onStop?: SessionCardAction;
 }
 
 /**
@@ -51,6 +52,7 @@ export const SessionCard: FC<SessionCardProps> = ({
   onClose,
   onSplitHorizontal,
   onSplitVertical,
+  onStop,
 }) => {
   const session = useAtomValue(sessionByIdAtomFamily(sessionId));
   const workspace = useAtomValue(
@@ -150,6 +152,17 @@ export const SessionCard: FC<SessionCardProps> = ({
 
               {showHeaderActions ? (
                 <div className="session-header-actions">
+                  {session.state === "running" ? (
+                    <Tooltip content="Stop">
+                      <IconButton
+                        aria-label="Stop"
+                        className="session-action-btn"
+                        icon={<Square size={13} />}
+                        onClick={() => void onStop?.()}
+                        size="sm"
+                      />
+                    </Tooltip>
+                  ) : null}
                   <Tooltip content="Split horizontal">
                     <IconButton
                       aria-label="Split horizontal"

packages/web/src/features/settings/components/settings-page.test.tsx

@@ -1737,6 +1737,52 @@ describe("SettingsPage", () => {
     });
   });
 
+  it("throttles duplicate desktop terminal font-size commits triggered back-to-back", async () => {
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "settings.get") {
+        return {
+          "appearance.desktopTerminalFontSize": 11,
+          "appearance.mobileTerminalFontSize": 13,
+        };
+      }
+      return {};
+    });
+    const store = createConnectedStore(sendCommand);
+
+    renderSettingsPage(store);
+    fireEvent.click(screen.getByRole("button", { name: "外观" }));
+
+    const input = await screen.findByRole("spinbutton", { name: "桌面端终端字号" });
+
+    fireEvent.change(input, { target: { value: "15" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    fireEvent.blur(input);
+
+    await waitFor(() => {
+      expect(sendCommand).toHaveBeenCalledWith(
+        "settings.update",
+        {
+          settings: {
+            appearance: {
+              desktopTerminalFontSize: 15,
+            },
+          },
+        },
+        undefined
+      );
+    });
+
+    expect(
+      sendCommand.mock.calls.filter(
+        ([op, args]) =>
+          op === "settings.update" &&
+          typeof args === "object" &&
+          args !== null &&
+          "settings" in args
+      )
+    ).toHaveLength(1);
+  });
+
   it("updates mobile terminal font size through the appearance input without changing desktop size", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "settings.get") {