From 962512a0db11da82aa1bd7fd5e05f4dbdd85288d Mon Sep 17 00:00:00 2001
From: Nathan Flurry <git@nathanflurry.com>
Date: Tue, 27 Jan 2026 21:03:33 -0800
Subject: [PATCH] feat: add end session button to chat header

---
 frontend/packages/inspector/src/App.tsx           | 11 +++++++++++
 .../inspector/src/components/chat/ChatPanel.tsx   | 15 ++++++++++++++-
 sdks/typescript/src/client.ts                     |  4 ++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/frontend/packages/inspector/src/App.tsx b/frontend/packages/inspector/src/App.tsx
index 8f3bfe6..17aebb2 100644
--- a/frontend/packages/inspector/src/App.tsx
+++ b/frontend/packages/inspector/src/App.tsx
@@ -548,6 +548,16 @@ export default function App() {
     }
   };
 
+  const endSession = async () => {
+    if (!sessionId) return;
+    try {
+      await getClient().terminateSession(sessionId);
+      await fetchSessions();
+    } catch (error) {
+      setSessionError(getErrorMessage(error, "Unable to end session"));
+    }
+  };
+
   const questionRequests = useMemo(() => {
     const latestById = new Map<string, QuestionEventData>();
     for (const event of events) {
@@ -859,6 +869,7 @@ export default function App() {
           onVariantChange={setVariant}
           onStreamModeChange={setStreamMode}
           onToggleStream={toggleStream}
+          onEndSession={endSession}
           hasSession={Boolean(sessionId)}
           eventError={eventError}
           questionRequests={questionRequests}
diff --git a/frontend/packages/inspector/src/components/chat/ChatPanel.tsx b/frontend/packages/inspector/src/components/chat/ChatPanel.tsx
index 44345b8..1c03fa7 100644
--- a/frontend/packages/inspector/src/components/chat/ChatPanel.tsx
+++ b/frontend/packages/inspector/src/components/chat/ChatPanel.tsx
@@ -1,4 +1,4 @@
-import { MessageSquare, PauseCircle, PlayCircle, Plus, Terminal } from "lucide-react";
+import { MessageSquare, PauseCircle, PlayCircle, Plus, Square, Terminal } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { AgentInfo, AgentModeInfo, PermissionEventData, QuestionEventData } from "sandbox-agent";
 import ApprovalsTab from "../debug/ApprovalsTab";
@@ -39,6 +39,7 @@ const ChatPanel = ({
   onVariantChange,
   onStreamModeChange,
   onToggleStream,
+  onEndSession,
   eventError,
   questionRequests,
   permissionRequests,
@@ -79,6 +80,7 @@ const ChatPanel = ({
   onVariantChange: (value: string) => void;
   onStreamModeChange: (value: "poll" | "sse" | "turn") => void;
   onToggleStream: () => void;
+  onEndSession: () => void;
   eventError: string | null;
   questionRequests: QuestionEventData[];
   permissionRequests: PermissionEventData[];
@@ -131,6 +133,17 @@ const ChatPanel = ({
           )}
         </div>
         <div className="panel-header-right">
+          {sessionId && (
+            <button
+              type="button"
+              className="button ghost small"
+              onClick={onEndSession}
+              title="End session"
+            >
+              <Square size={12} />
+              End
+            </button>
+          )}
           <div className="setup-stream">
             <select
               className="setup-select-small"
diff --git a/sdks/typescript/src/client.ts b/sdks/typescript/src/client.ts
index 2e96cf8..912a14b 100644
--- a/sdks/typescript/src/client.ts
+++ b/sdks/typescript/src/client.ts
@@ -207,6 +207,10 @@ export class SandboxAgent {
     );
   }
 
+  async terminateSession(sessionId: string): Promise<void> {
+    await this.requestJson("POST", `${API_PREFIX}/sessions/${encodeURIComponent(sessionId)}/terminate`);
+  }
+
   async dispose(): Promise<void> {
     if (this.spawnHandle) {
       await this.spawnHandle.dispose();