coder · kylecarbs · Oct 23, 2025 · Oct 23, 2025 · Oct 23, 2025
diff --git a/bun.lock b/bun.lock
@@ -6,6 +6,7 @@
       "dependencies": {
         "@ai-sdk/anthropic": "^2.0.29",
         "@ai-sdk/openai": "^2.0.52",
+        "@radix-ui/react-context-menu": "^2.2.16",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-scroll-area": "^1.2.10",
@@ -26,6 +27,7 @@
         "express": "^5.1.0",
         "jsonc-parser": "^3.3.1",
         "lru-cache": "^11.2.2",
+        "lucide-react": "^0.546.0",
         "markdown-it": "^14.1.0",
         "minimist": "^1.2.8",
         "source-map-support": "^0.5.21",
@@ -423,6 +425,8 @@
 
     "@radix-ui/react-context": ["@radix-ui/[email protected]", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
+    "@radix-ui/react-context-menu": ["@radix-ui/[email protected]", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww=="],
+
     "@radix-ui/react-dialog": ["@radix-ui/[email protected]", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
 
     "@radix-ui/react-direction": ["@radix-ui/[email protected]", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
@@ -2087,6 +2091,8 @@
 
     "lru-cache": ["[email protected]", "", {}, "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg=="],
 
+    "lucide-react": ["[email protected]", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z94u6fKT43lKeYHiVyvyR8fT7pwCzDu7RyMPpTvh054+xahSgj4HFQ+NmflvzdXsoAjYGdCguGaFKYuvq0ThCQ=="],
+
     "lz-string": ["[email protected]", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
 
     "magic-string": ["[email protected]", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw=="],

diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^2.0.29",
     "@ai-sdk/openai": "^2.0.52",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-scroll-area": "^1.2.10",
@@ -66,6 +67,7 @@
     "express": "^5.1.0",
     "jsonc-parser": "^3.3.1",
     "lru-cache": "^11.2.2",
+    "lucide-react": "^0.546.0",
     "markdown-it": "^14.1.0",
     "minimist": "^1.2.8",
     "source-map-support": "^0.5.21",

diff --git a/src/components/WorkspaceListItem.tsx b/src/components/WorkspaceListItem.tsx
@@ -9,6 +9,12 @@ import { ModelDisplay } from "./Messages/ModelDisplay";
 import { StatusIndicator } from "./StatusIndicator";
 import { useRename } from "@/contexts/WorkspaceRenameContext";
 import { cn } from "@/lib/utils";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 
 export interface WorkspaceSelection {
   projectPath: string;
@@ -130,89 +136,112 @@ const WorkspaceListItemInner: React.FC<WorkspaceListItemProps> = ({
 
   return (
     <React.Fragment>
-      <div
-        className={cn(
-          "py-1.5 px-3 pl-7 cursor-pointer grid grid-cols-[auto_auto_1fr_auto] gap-2 items-center border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-bg-hover [&:hover_button]:opacity-100",
-          isSelected && "bg-bg-hover border-l-[#569cd6]"
-        )}
-        onClick={() =>
-          onSelectWorkspace({
-            projectPath,
-            projectName,
-            namedWorkspacePath,
-            workspaceId,
-          })
-        }
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onSelectWorkspace({
-              projectPath,
-              projectName,
-              namedWorkspacePath,
-              workspaceId,
-            });
-          }
-        }}
-        role="button"
-        tabIndex={0}
-        aria-current={isSelected ? "true" : undefined}
-        data-workspace-path={namedWorkspacePath}
-        data-workspace-id={workspaceId}
-      >
-        <TooltipWrapper inline>
-          <button
-            className="opacity-0 bg-transparent text-muted border-none cursor-pointer text-base p-0 w-5 h-5 flex items-center justify-center transition-all duration-200 flex-shrink-0 col-start-1 hover:text-foreground hover:bg-white/10 hover:rounded-sm"
-            onClick={(e) => {
-              e.stopPropagation();
-              void onRemoveWorkspace(workspaceId, e.currentTarget);
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          <div
+            className={cn(
+              "py-1.5 px-3 pl-7 cursor-pointer grid grid-cols-[auto_auto_1fr_auto] gap-2 items-center border-l-[3px] border-transparent transition-all duration-150 text-[13px] relative hover:bg-bg-hover [&:hover_button]:opacity-100",
+              isSelected && "bg-bg-hover border-l-[#569cd6]"
+            )}
+            onClick={() =>
+              onSelectWorkspace({
+                projectPath,
+                projectName,
+                namedWorkspacePath,
+                workspaceId,
+              })
+            }
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onSelectWorkspace({
+                  projectPath,
+                  projectName,
+                  namedWorkspacePath,
+                  workspaceId,
+                });
+              }
             }}
-            aria-label={`Remove workspace ${displayName}`}
+            role="button"
+            tabIndex={0}
+            aria-current={isSelected ? "true" : undefined}
+            data-workspace-path={namedWorkspacePath}
             data-workspace-id={workspaceId}
           >
-            ×
-          </button>
-          <Tooltip className="tooltip" align="right">
-            Remove workspace
-          </Tooltip>
-        </TooltipWrapper>
-        <GitStatusIndicator
-          gitStatus={gitStatus}
-          workspaceId={workspaceId}
-          tooltipPosition="right"
-        />
-        {isEditing ? (
-          <input
-            className="bg-input-bg text-input-text border border-input-border rounded-sm px-1 py-0.5 text-[13px] font-inherit outline-none min-w-0 text-right focus:border-input-border-focus"
-            value={editingName}
-            onChange={(e) => setEditingName(e.target.value)}
-            onKeyDown={handleRenameKeyDown}
-            onBlur={() => void handleConfirmRename()}
-            autoFocus
-            onClick={(e) => e.stopPropagation()}
-            aria-label={`Rename workspace ${displayName}`}
-            data-workspace-id={workspaceId}
-          />
-        ) : (
-          <span
-            className="text-foreground text-[14px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer px-1 py-0.5 rounded-sm transition-colors duration-200 min-w-0 text-right hover:bg-white/5"
-            onDoubleClick={(e) => {
+            <TooltipWrapper inline>
+              <button
+                className="opacity-0 bg-transparent text-muted border-none cursor-pointer text-base p-0 w-5 h-5 flex items-center justify-center transition-all duration-200 flex-shrink-0 col-start-1 hover:text-foreground hover:bg-white/10 hover:rounded-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void onRemoveWorkspace(workspaceId, e.currentTarget);
+                }}
+                aria-label={`Remove workspace ${displayName}`}
+                data-workspace-id={workspaceId}
+              >
+                ×
+              </button>
+              <Tooltip className="tooltip" align="right">
+                Remove workspace
+              </Tooltip>
+            </TooltipWrapper>
+            <GitStatusIndicator
+              gitStatus={gitStatus}
+              workspaceId={workspaceId}
+              tooltipPosition="right"
+            />
+            {isEditing ? (
+              <input
+                className="bg-input-bg text-input-text border border-input-border rounded-sm px-1 py-0.5 text-[13px] font-inherit outline-none min-w-0 text-right focus:border-input-border-focus"
+                value={editingName}
+                onChange={(e) => setEditingName(e.target.value)}
+                onKeyDown={handleRenameKeyDown}
+                onBlur={() => void handleConfirmRename()}
+                autoFocus
+                onClick={(e) => e.stopPropagation()}
+                aria-label={`Rename workspace ${displayName}`}
+                data-workspace-id={workspaceId}
+              />
+            ) : (
+              <span
+                className="text-foreground text-[14px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer px-1 py-0.5 rounded-sm transition-colors duration-200 min-w-0 text-right hover:bg-white/5"
+                onDoubleClick={(e) => {
+                  e.stopPropagation();
+                  startRenaming();
+                }}
+                title="Double-click to rename"
+              >
+                {displayName}
+              </span>
+            )}
+            <StatusIndicator
+              className="ml-2"
+              streaming={isStreaming}
+              unread={isUnread}
+              onClick={handleToggleUnread}
+              title={statusTooltipTitle}
+            />
+          </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem
+            onClick={(e) => {
               e.stopPropagation();
               startRenaming();
             }}
-            title="Double-click to rename"
           >
-            {displayName}
-          </span>
-        )}
-        <StatusIndicator
-          className="ml-2"
-          streaming={isStreaming}
-          unread={isUnread}
-          onClick={handleToggleUnread}
-          title={statusTooltipTitle}
-        />
-      </div>
+            Rename
+          </ContextMenuItem>
+          <ContextMenuItem
+            onClick={(e) => {
+              e.stopPropagation();
+              void onRemoveWorkspace(workspaceId, e.currentTarget as HTMLElement);
+            }}
+            className="text-error focus:text-error"
+          >
+            Remove
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
       {renameError && isEditing && (
         <div className="absolute top-full left-7 right-8 mt-1 px-2 py-1.5 bg-error-bg border border-error rounded-sm text-error text-xs z-10">
           {renameError}