Add native context menu to delete threads

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }

apps/desktop/src/main.ts

@@ -5,13 +5,14 @@ import net from "node:net";
 import os from "node:os";
 import path from "node:path";
 
-import { app, BrowserWindow, dialog, ipcMain } from "electron";
+import { app, BrowserWindow, dialog, ipcMain, Menu } from "electron";
 
 import { fixPath } from "./fixPath";
 
 fixPath();
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const ROOT_DIR = path.resolve(__dirname, "../../..");
 const BACKEND_ENTRY = path.join(ROOT_DIR, "apps/server/dist/index.js");
 const WEB_ENTRY = path.join(ROOT_DIR, "apps/web/dist/index.html");
@@ -139,6 +140,25 @@ function registerIpcHandlers(): void {
  if (result.canceled) return null;
  return result.filePaths[0] ?? null;
  });
+
+ ipcMain.removeHandler(CONTEXT_MENU_CHANNEL);
+ ipcMain.handle(CONTEXT_MENU_CHANNEL, async (_event, items: { id: string; label: string }[]) => {
+ const window = BrowserWindow.getFocusedWindow() ?? mainWindow;
+ if (!window) return null;
+
+ return new Promise<string | null>((resolve) => {
+ const menu = Menu.buildFromTemplate(
+ items.map((item) => ({
+ label: item.label,
+ click: () => resolve(item.id),
+ })),
+ );
+ menu.popup({
+ window,
+ callback: () => resolve(null),
+ });
+ });
+ });
 }
 
 function createWindow(): BrowserWindow {

apps/desktop/src/preload.ts

@@ -1,9 +1,12 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 const PICK_FOLDER_CHANNEL = "desktop:pick-folder";
+const CONTEXT_MENU_CHANNEL = "desktop:context-menu";
 const wsUrl = process.env.T3CODE_DESKTOP_WS_URL ?? null;
 
 contextBridge.exposeInMainWorld("desktopBridge", {
  getWsUrl: () => wsUrl,
  pickFolder: () => ipcRenderer.invoke(PICK_FOLDER_CHANNEL) as Promise<string | null>,
+ showContextMenu: (items: { id: string; label: string }[]) =>
+ ipcRenderer.invoke(CONTEXT_MENU_CHANNEL, items) as Promise<string | null>,
 });

apps/web/src/components/Sidebar.tsx

@@ -160,6 +160,31 @@ export default function Sidebar() {
  }
  };
 
+ const handleThreadContextMenu = useCallback(
+ async (threadId: string, position: { x: number; y: number }) => {
+ if (!api) return;
+ const clicked = await api.contextMenu.show([{ id: "delete", label: "Delete" }], position);
+ if (clicked !== "delete") return;
+
+ const thread = state.threads.find((t) => t.id === threadId);
+ if (!thread) return;
+
+ // Stop active session if running
+ if (thread.session?.sessionId) {
+ try {
+ await api.providers.stopSession({
+ sessionId: thread.session.sessionId,
+ });
+ } catch {
+ // Session may already be stopped
+ }
+ }
+
+ dispatch({ type: "DELETE_THREAD", threadId });
+ },
+ [api, dispatch, state.threads],
+ );
+
  useEffect(() => {
  const onWindowKeyDown = (event: KeyboardEvent) => {
  const isNewThreadShortcut =
@@ -290,6 +315,13 @@ export default function Sidebar() {
  threadId: thread.id,
  })
  }
+ onContextMenu={(e) => {
+ e.preventDefault();
+ void handleThreadContextMenu(thread.id, {
+ x: e.clientX,
+ y: e.clientY,
+ });
+ }}
  >
  <div className="flex min-w-0 flex-1 items-center gap-1.5">
  {threadStatus && (

apps/web/src/contextMenuFallback.ts

@@ -0,0 +1,64 @@
+/**
+ * Imperative DOM-based context menu for non-Electron environments.
+ * Shows a positioned dropdown and returns a promise that resolves
+ * with the clicked item id, or null if dismissed.
+ */
+export function showContextMenuFallback<T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+): Promise<T | null> {
+ return new Promise<T | null>((resolve) => {
+ const overlay = document.createElement("div");
+ overlay.style.cssText = "position:fixed;inset:0;z-index:9999";
+
+ const menu = document.createElement("div");
+ menu.className =
+ "fixed z-[10000] min-w-[140px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+
+ const x = position?.x ?? 0;
+ const y = position?.y ?? 0;
+ menu.style.top = `${y}px`;
+ menu.style.left = `${x}px`;
+
+ function cleanup(result: T | null) {
+ document.removeEventListener("keydown", onKeyDown);
+ overlay.remove();
+ menu.remove();
+ resolve(result);
+ }
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") {
+ e.preventDefault();
+ cleanup(null);
+ }
+ }
+
+ overlay.addEventListener("mousedown", () => cleanup(null));
+ document.addEventListener("keydown", onKeyDown);
+
+ for (const item of items) {
+ const btn = document.createElement("button");
+ btn.type = "button";
+ btn.textContent = item.label;
+ btn.className =
+ "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default";
+ btn.addEventListener("click", () => cleanup(item.id));
+ menu.appendChild(btn);
+ }
+
+ document.body.appendChild(overlay);
+ document.body.appendChild(menu);
+
+ // Adjust if menu overflows viewport
+ requestAnimationFrame(() => {
+ const rect = menu.getBoundingClientRect();
+ if (rect.right > window.innerWidth) {
+ menu.style.left = `${window.innerWidth - rect.width - 4}px`;
+ }
+ if (rect.bottom > window.innerHeight) {
+ menu.style.top = `${window.innerHeight - rect.height - 4}px`;
+ }
+ });
+ });
+}

apps/web/src/store.ts

@@ -33,7 +33,8 @@ type Action =
  | { type: "SET_ERROR"; threadId: string; error: string | null }
  | { type: "SET_THREAD_TITLE"; threadId: string; title: string }
  | { type: "SET_THREAD_MODEL"; threadId: string; model: string }
- | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode };
+ | { type: "SET_RUNTIME_MODE"; mode: RuntimeMode }
+ | { type: "DELETE_THREAD"; threadId: string };
 
 // ── State ────────────────────────────────────────────────────────────
 
@@ -375,6 +376,15 @@ export function reducer(state: AppState, action: Action): AppState {
  runtimeMode: action.mode,
  };
 
+ case "DELETE_THREAD": {
+ const threads = state.threads.filter((t) => t.id !== action.threadId);
+ const activeThreadId =
+ state.activeThreadId === action.threadId
+ ? (threads[0]?.id ?? null)
+ : state.activeThreadId;
+ return { ...state, threads, activeThreadId };
+ }
+
  default:
  return state;
  }

apps/web/src/vite-env.d.ts

@@ -5,6 +5,7 @@ import type { NativeApi } from "@t3tools/contracts";
 interface DesktopBridge {
  getWsUrl: () => string | null;
  pickFolder: () => Promise<string | null>;
+ showContextMenu: (items: readonly { id: string; label: string }[]) => Promise<string | null>;
 }
 
 declare global {

apps/web/src/wsNativeApi.ts

@@ -1,5 +1,6 @@
 import { type NativeApi, WS_CHANNELS, WS_METHODS, type WsWelcomePayload } from "@t3tools/contracts";
 
+import { showContextMenuFallback } from "./contextMenuFallback";
 import { WsTransport } from "./wsTransport";
 
 let instance: { api: NativeApi; transport: WsTransport } | null = null;
@@ -95,6 +96,17 @@ export function createWsNativeApi(): NativeApi {
  openInEditor: (cwd, editor) =>
  transport.request(WS_METHODS.shellOpenInEditor, { cwd, editor }),
  },
+ contextMenu: {
+ show: async <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ): Promise<T | null> => {
+ if (window.desktopBridge) {
+ return window.desktopBridge.showContextMenu(items) as Promise<T | null>;
+ }
+ return showContextMenuFallback(items, position);
+ },
+ },
  };
 
  instance = { api, transport };

packages/contracts/src/ipc.ts

@@ -62,4 +62,10 @@ export interface NativeApi {
  shell: {
  openInEditor: (cwd: string, editor: EditorId) => Promise<void>;
  };
+ contextMenu: {
+ show: <T extends string>(
+ items: readonly { id: T; label: string }[],
+ position?: { x: number; y: number },
+ ) => Promise<T | null>;
+ };
 }