From 7f47a6443c1296233dfc68d76a788639565201ab Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 9 Jun 2026 16:08:43 -0700
Subject: [PATCH 1/3] feat(web): polish web context menu fallback and sidebar
 icon actions

Ported from #2451.

Co-authored-by: ss <ss@barekey.dev>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/desktop/src/electron/ElectronMenu.ts     |   6 +
 .../src/components/CommandPalette.logic.ts    |   2 +
 apps/web/src/components/CommandPalette.tsx    |   1 +
 apps/web/src/components/Sidebar.tsx           |  39 ++--
 apps/web/src/contextMenuFallback.ts           | 193 ++++++++++++++++--
 packages/contracts/src/ipc.ts                 |   8 +
 6 files changed, 220 insertions(+), 29 deletions(-)

diff --git a/apps/desktop/src/electron/ElectronMenu.ts b/apps/desktop/src/electron/ElectronMenu.ts
index 66b809b2ac7..005c86e0868 100644
--- a/apps/desktop/src/electron/ElectronMenu.ts
+++ b/apps/desktop/src/electron/ElectronMenu.ts
@@ -44,6 +44,12 @@ function normalizeContextMenuItems(source: readonly ContextMenuItem[]): ContextM
       continue;
     }
 
+    // Header items are decorative section labels for the web fallback only —
+    // Electron's native menu has no equivalent affordance, so we skip them.
+    if (sourceItem.header === true) {
+      continue;
+    }
+
     const normalizedItem: ContextMenuItem = {
       id: sourceItem.id,
       label: sourceItem.label,
diff --git a/apps/web/src/components/CommandPalette.logic.ts b/apps/web/src/components/CommandPalette.logic.ts
index 4484232c2b8..982950be5e5 100644
--- a/apps/web/src/components/CommandPalette.logic.ts
+++ b/apps/web/src/components/CommandPalette.logic.ts
@@ -95,6 +95,7 @@ export function buildProjectActionItems(input: {
   valuePrefix: string;
   icon: (project: Project) => ReactNode;
   runProject: (project: Project) => Promise<void>;
+  shortcutCommand?: KeybindingCommand;
 }): CommandPaletteActionItem[] {
   return input.projects.map((project) => ({
     kind: "action",
@@ -103,6 +104,7 @@ export function buildProjectActionItems(input: {
     title: project.name,
     description: project.cwd,
     icon: input.icon(project),
+    ...(input.shortcutCommand !== undefined ? { shortcutCommand: input.shortcutCommand } : {}),
     run: async () => {
       await input.runProject(project);
     },
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 3dc5a3acb74..d89b8c792cd 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -647,6 +647,7 @@ function OpenCommandPaletteDialog() {
       buildProjectActionItems({
         projects,
         valuePrefix: "new-thread-in",
+        shortcutCommand: "chat.new",
         icon: (project) => (
           <ProjectFavicon
             environmentId={project.environmentId}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index f3f163b017d..0c7a2632dd7 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -217,6 +217,8 @@ const PROJECT_GROUPING_MODE_LABELS: Record<SidebarProjectGroupingMode, string> =
   repository_path: "Group by repository path",
   separate: "Keep separate",
 };
+const SIDEBAR_ICON_ACTION_BUTTON_CLASS =
+  "inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md px-[calc(--spacing(1)-1px)] text-muted-foreground/60 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring";
 
 function clampSidebarThreadPreviewCount(value: number): SidebarThreadPreviewCount {
   return Math.min(
@@ -637,13 +639,13 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
               </button>
             ) : !isThreadRunning ? (
               appSettingsConfirmThreadArchive ? (
-                <div className="pointer-events-none absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
+                <div className="pointer-events-none absolute top-1/2 right-0.5 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
                   <button
                     type="button"
                     data-thread-selection-safe
                     data-testid={`thread-archive-${thread.id}`}
                     aria-label={`Archive ${thread.title}`}
-                    className="inline-flex size-5 cursor-pointer items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+                    className={SIDEBAR_ICON_ACTION_BUTTON_CLASS}
                     onPointerDown={stopPropagationOnPointerDown}
                     onClick={handleStartArchiveConfirmation}
                   >
@@ -654,13 +656,13 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
                 <Tooltip>
                   <TooltipTrigger
                     render={
-                      <div className="pointer-events-none absolute top-1/2 right-1 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
+                      <div className="pointer-events-none absolute top-1/2 right-0.5 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/menu-sub-item:pointer-events-auto group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:pointer-events-auto group-focus-within/menu-sub-item:opacity-100">
                         <button
                           type="button"
                           data-thread-selection-safe
                           data-testid={`thread-archive-${thread.id}`}
                           aria-label={`Archive ${thread.title}`}
-                          className="inline-flex size-5 cursor-pointer items-center justify-center text-muted-foreground/60 transition-colors hover:text-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+                          className={SIDEBAR_ICON_ACTION_BUTTON_CLASS}
                           onPointerDown={stopPropagationOnPointerDown}
                           onClick={handleArchiveImmediateClick}
                         >
@@ -699,7 +701,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
                   </span>
                 ) : (
                   <span
-                    className={`text-[10px] ${
+                    className={`text-[10px] tabular-nums ${
                       isHighlighted
                         ? "text-foreground/72 dark:text-foreground/82"
                         : "text-muted-foreground/40"
@@ -1466,6 +1468,13 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
           };
         };
 
+        const iconForAction: Record<"rename" | "grouping" | "copy-path" | "delete", string> = {
+          rename: "pencil",
+          grouping: "folder-tree",
+          "copy-path": "copy",
+          delete: "trash",
+        };
+
         const buildTargetedItem = (
           action: "rename" | "grouping" | "copy-path" | "delete",
           label: string,
@@ -1482,12 +1491,14 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
                 ...(options?.isDisabled?.(singleMember) ? { disabled: true } : {}),
               }),
               label,
+              icon: iconForAction[action],
             };
           }
 
           return {
             id: `${action}:submenu`,
             label,
+            icon: iconForAction[action],
             children: project.memberProjects.map((member) =>
               makeLeaf(action, member, {
                 ...(options?.destructive ? { destructive: true } : {}),
@@ -1499,10 +1510,10 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
 
         const clicked = await api.contextMenu.show(
           [
-            buildTargetedItem("rename", "Rename project"),
-            buildTargetedItem("grouping", "Project grouping…"),
-            buildTargetedItem("copy-path", "Copy Project Path"),
-            buildTargetedItem("delete", "Remove project", {
+            buildTargetedItem("rename", "Rename"),
+            buildTargetedItem("grouping", "Group into..."),
+            buildTargetedItem("copy-path", "Copy Path"),
+            buildTargetedItem("delete", "Remove", {
               destructive: true,
             }),
           ],
@@ -2054,12 +2065,12 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         <Tooltip>
           <TooltipTrigger
             render={
-              <div className="pointer-events-none absolute top-1 right-1.5 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100">
+              <div className="pointer-events-none absolute top-[calc(50%+1px)] right-0.5 -translate-y-1/2 opacity-0 transition-opacity duration-150 max-sm:pointer-events-auto max-sm:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100">
                 <button
                   type="button"
                   aria-label={`Create new thread in ${project.displayName}`}
                   data-testid="new-thread-button"
-                  className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 hover:bg-secondary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+                  className={SIDEBAR_ICON_ACTION_BUTTON_CLASS}
                   onClick={handleCreateThreadClick}
                 >
                   <SquarePenIcon className="size-3.5" />
@@ -2297,7 +2308,7 @@ function ProjectSortMenu({
       <Tooltip>
         <TooltipTrigger
           render={
-            <MenuTrigger className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground" />
+            <MenuTrigger className="inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md px-[calc(--spacing(1)-1px)] text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground" />
           }
         >
           <ArrowUpDownIcon className="size-3.5" />
@@ -2635,7 +2646,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                 />
               }
             >
-              <SearchIcon className="size-3.5" />
+              <SearchIcon className="size-3.5 text-muted-foreground/70" />
               <span className="flex-1 truncate text-left text-xs">Search</span>
               {commandPaletteShortcutLabel ? (
                 <Kbd className="h-4 min-w-0 rounded-sm px-1.5 text-[10px]">
@@ -2692,7 +2703,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
                     type="button"
                     aria-label="Add project"
                     data-testid="sidebar-add-project-trigger"
-                    className="inline-flex size-5 cursor-pointer items-center justify-center rounded-md text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
+                    className="inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded-md px-[calc(--spacing(1)-1px)] text-muted-foreground/60 transition-colors hover:bg-accent hover:text-foreground"
                     onClick={openAddProject}
                   />
                 }
diff --git a/apps/web/src/contextMenuFallback.ts b/apps/web/src/contextMenuFallback.ts
index cda90df5d11..97e10220cc5 100644
--- a/apps/web/src/contextMenuFallback.ts
+++ b/apps/web/src/contextMenuFallback.ts
@@ -1,5 +1,74 @@
 import type { ContextMenuItem } from "@t3tools/contracts";
 
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+// Inline Lucide-style icon paths (stroke-based, viewBox 0 0 24 24, strokeWidth 2).
+const ICON_PATHS: Record<string, ReadonlyArray<{ tag: string; attrs: Record<string, string> }>> = {
+  pencil: [
+    {
+      tag: "path",
+      attrs: {
+        d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+      },
+    },
+    { tag: "path", attrs: { d: "m15 5 4 4" } },
+  ],
+  copy: [
+    { tag: "rect", attrs: { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" } },
+    { tag: "path", attrs: { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" } },
+  ],
+  "folder-tree": [
+    {
+      tag: "path",
+      attrs: {
+        d: "M20 10a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2.5a1 1 0 0 1-.8-.4l-.9-1.2A1 1 0 0 0 15 3h-2a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z",
+      },
+    },
+    {
+      tag: "path",
+      attrs: {
+        d: "M20 21a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2.9a1 1 0 0 1-.88-.55l-.42-.85a1 1 0 0 0-.92-.6H13a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1Z",
+      },
+    },
+    { tag: "path", attrs: { d: "M3 5a2 2 0 0 0 2 2h3" } },
+    { tag: "path", attrs: { d: "M3 3v13a2 2 0 0 0 2 2h3" } },
+  ],
+  trash: [
+    { tag: "path", attrs: { d: "M3 6h18" } },
+    { tag: "path", attrs: { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" } },
+    { tag: "path", attrs: { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" } },
+    { tag: "line", attrs: { x1: "10", x2: "10", y1: "11", y2: "17" } },
+    { tag: "line", attrs: { x1: "14", x2: "14", y1: "11", y2: "17" } },
+  ],
+};
+
+function createIconElement(name: string, tone: "neutral" | "destructive"): SVGSVGElement | null {
+  const paths = ICON_PATHS[name];
+  if (!paths) {
+    return null;
+  }
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("xmlns", SVG_NS);
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute(
+    "class",
+    tone === "destructive" ? "size-4 shrink-0" : "size-4 shrink-0 text-muted-foreground",
+  );
+  for (const node of paths) {
+    const child = document.createElementNS(SVG_NS, node.tag);
+    for (const [key, value] of Object.entries(node.attrs)) {
+      child.setAttribute(key, value);
+    }
+    svg.appendChild(child);
+  }
+  return svg;
+}
+
 function clampMenuPosition(menu: HTMLDivElement, preferredLeft: number, preferredTop: number) {
   const rect = menu.getBoundingClientRect();
   const left = Math.min(
@@ -14,6 +83,24 @@ function clampMenuPosition(menu: HTMLDivElement, preferredLeft: number, preferre
   menu.style.top = `${top}px`;
 }
 
+function isNodeWithinMenuStack(target: EventTarget | null, menuStack: readonly HTMLDivElement[]) {
+  if (typeof Node !== "undefined" && target instanceof Node) {
+    return menuStack.some((menu) => menu.contains(target));
+  }
+  if (!target || typeof target !== "object") {
+    return false;
+  }
+
+  let current: unknown = target;
+  while (current && typeof current === "object") {
+    if (menuStack.includes(current as HTMLDivElement)) {
+      return true;
+    }
+    current = (current as { parent?: unknown }).parent;
+  }
+  return false;
+}
+
 /**
  * Imperative DOM-based context menu for non-Electron environments.
  * Supports nested submenus and resolves with the clicked leaf item id.
@@ -23,14 +110,18 @@ export function showContextMenuFallback<T extends 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 menuStack: HTMLDivElement[] = [];
+    let isDisposed = false;
+    let canDismissFromPointer = false;
 
     const cleanup = (result: T | null) => {
+      if (isDisposed) {
+        return;
+      }
+      isDisposed = true;
       document.removeEventListener("keydown", onKeyDown);
-      overlay.remove();
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("contextmenu", onContextMenu, true);
       for (const menu of menuStack) {
         menu.remove();
       }
@@ -44,6 +135,21 @@ export function showContextMenuFallback<T extends string>(
       }
     };
 
+    const onPointerDown = (event: PointerEvent) => {
+      if (!canDismissFromPointer || isNodeWithinMenuStack(event.target, menuStack)) {
+        return;
+      }
+      cleanup(null);
+    };
+
+    const onContextMenu = (event: MouseEvent) => {
+      if (!canDismissFromPointer || isNodeWithinMenuStack(event.target, menuStack)) {
+        return;
+      }
+      event.preventDefault();
+      cleanup(null);
+    };
+
     const closeMenusFromLevel = (level: number) => {
       while (menuStack.length > level) {
         menuStack.pop()?.remove();
@@ -60,24 +166,60 @@ export function showContextMenuFallback<T extends string>(
 
       const menu = document.createElement("div");
       menu.className =
-        "fixed z-[10000] min-w-[160px] rounded-md border border-border bg-popover py-1 shadow-xl animate-in fade-in zoom-in-95";
+        "fixed z-[10000] min-w-32 max-w-sm overflow-hidden rounded-lg border border-border bg-popover bg-clip-padding text-popover-foreground shadow-lg/5 outline-none";
+      menu.style.cssText =
+        "position:fixed;z-index:10000;min-width:8rem;max-width:24rem;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--popover);background-clip:padding-box;color:var(--popover-foreground);box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.05),0 4px 6px -4px rgb(0 0 0 / 0.05);outline:none;pointer-events:auto;";
       menu.style.left = `${preferredLeft}px`;
       menu.style.top = `${preferredTop}px`;
       menu.dataset.level = String(level);
 
+      const inner = document.createElement("div");
+      inner.className =
+        "max-h-[min(24rem,70vh)] min-w-0 max-w-sm overflow-y-auto overflow-x-hidden p-1";
+      inner.style.cssText =
+        "max-height:min(24rem,70vh);min-width:0;max-width:24rem;overflow-x:hidden;overflow-y:auto;padding:0.25rem;";
+
       for (const item of entries) {
-        const button = document.createElement("button");
-        button.type = "button";
+        if (item.header === true) {
+          const header = document.createElement("div");
+          header.className = "px-2 py-1.5 font-medium text-muted-foreground text-xs";
+          header.textContent = item.label;
+          inner.appendChild(header);
+          continue;
+        }
+
         const hasChildren = Array.isArray(item.children) && item.children.length > 0;
         const isLeafDestructive =
           !hasChildren && (item.destructive === true || item.id === ("delete" as T));
+
+        const button = document.createElement("button");
+        button.type = "button";
         const isDisabled = item.disabled === true;
         button.disabled = isDisabled;
+        const rowBase =
+          "flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-left outline-none transition-colors sm:min-h-7 sm:text-sm min-h-8 text-base";
         button.className = isDisabled
-          ? "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-muted-foreground/60 cursor-not-allowed"
+          ? `${rowBase} pointer-events-none cursor-not-allowed text-muted-foreground opacity-64`
           : isLeafDestructive
-            ? "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-destructive hover:bg-accent cursor-default"
-            : "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent cursor-default";
+            ? `${rowBase} text-destructive-foreground hover:bg-destructive/10 hover:text-destructive-foreground`
+            : `${rowBase} text-foreground hover:bg-accent hover:text-accent-foreground`;
+        button.style.cssText =
+          "display:flex;width:100%;min-height:1.75rem;align-items:center;gap:0.5rem;border:0;border-radius:var(--radius-sm);background:transparent;padding:0.25rem 0.5rem;color:var(--foreground);font-family:var(--font-sans,system-ui,sans-serif);font-size:0.875rem;line-height:1.25rem;text-align:left;cursor:default;";
+        if (isLeafDestructive) {
+          button.style.color = "var(--destructive-foreground)";
+        }
+        if (isDisabled) {
+          button.style.color = "var(--muted-foreground)";
+          button.style.opacity = "0.64";
+          button.style.pointerEvents = "none";
+        }
+
+        if (typeof item.icon === "string") {
+          const icon = createIconElement(item.icon, isLeafDestructive ? "destructive" : "neutral");
+          if (icon) {
+            button.appendChild(icon);
+          }
+        }
 
         const label = document.createElement("span");
         label.className = "min-w-0 flex-1 truncate";
@@ -86,12 +228,27 @@ export function showContextMenuFallback<T extends string>(
 
         if (hasChildren) {
           const chevron = document.createElement("span");
-          chevron.className = "shrink-0 text-muted-foreground/70";
-          chevron.textContent = "›";
+          chevron.className = "ms-auto shrink-0 text-muted-foreground/80 text-sm leading-none";
+          chevron.textContent = ">";
           button.appendChild(chevron);
         }
 
         if (!isDisabled) {
+          button.addEventListener("mouseenter", () => {
+            button.style.background = isLeafDestructive
+              ? "color-mix(in srgb, var(--destructive) 10%, transparent)"
+              : "var(--accent)";
+            button.style.color = isLeafDestructive
+              ? "var(--destructive-foreground)"
+              : "var(--accent-foreground)";
+          });
+          button.addEventListener("mouseleave", () => {
+            button.style.background = "transparent";
+            button.style.color = isLeafDestructive
+              ? "var(--destructive-foreground)"
+              : "var(--foreground)";
+          });
+
           if (hasChildren) {
             button.addEventListener("mouseenter", () => {
               const rect = button.getBoundingClientRect();
@@ -119,9 +276,11 @@ export function showContextMenuFallback<T extends string>(
           }
         }
 
-        menu.appendChild(button);
+        inner.appendChild(button);
       }
 
+      menu.appendChild(inner);
+
       menu.addEventListener("mouseenter", () => {
         closeMenusFromLevel(level + 1);
       });
@@ -134,9 +293,13 @@ export function showContextMenuFallback<T extends string>(
       });
     };
 
-    overlay.addEventListener("mousedown", () => cleanup(null));
     document.addEventListener("keydown", onKeyDown);
-    document.body.appendChild(overlay);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    document.addEventListener("contextmenu", onContextMenu, true);
     openMenu(items, position?.x ?? 0, position?.y ?? 0, 0);
+
+    requestAnimationFrame(() => {
+      canDismissFromPointer = true;
+    });
   });
 }
diff --git a/packages/contracts/src/ipc.ts b/packages/contracts/src/ipc.ts
index 56f929f7def..1d8656ddf4f 100644
--- a/packages/contracts/src/ipc.ts
+++ b/packages/contracts/src/ipc.ts
@@ -86,6 +86,10 @@ export interface ContextMenuItem<T extends string = string> {
   label: string;
   destructive?: boolean;
   disabled?: boolean;
+  /** Renders as a non-interactive section header label. Web fallback only — stripped on desktop native menus. */
+  header?: boolean;
+  /** Icon keyword resolved by the web fallback. Stripped on desktop native menus. */
+  icon?: string;
   children?: readonly ContextMenuItem<T>[];
 }
 
@@ -94,6 +98,8 @@ export interface ContextMenuItemSchemaType {
   readonly label: string;
   readonly destructive?: boolean;
   readonly disabled?: boolean;
+  readonly header?: boolean;
+  readonly icon?: string;
   readonly children?: readonly ContextMenuItemSchemaType[];
 }
 
@@ -102,6 +108,8 @@ export const ContextMenuItemSchema: Schema.Codec<ContextMenuItemSchemaType> = Sc
   label: Schema.String,
   destructive: Schema.optionalKey(Schema.Boolean),
   disabled: Schema.optionalKey(Schema.Boolean),
+  header: Schema.optionalKey(Schema.Boolean),
+  icon: Schema.optionalKey(Schema.String),
   children: Schema.optionalKey(
     Schema.Array(
       Schema.suspend((): Schema.Codec<ContextMenuItemSchemaType> => ContextMenuItemSchema),

From b65f2556a86e3e931e8743c845f951249dcec3d4 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 10 Jun 2026 00:21:40 -0700
Subject: [PATCH 2/3] Add trash icon to destructive context menu items

- Show trash icon for delete actions in the sidebar menu
- Match fallback icon sizing for destructive items
---
 apps/web/src/components/Sidebar.tsx | 13 +++----------
 apps/web/src/contextMenuFallback.ts |  2 +-
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 611ab605310..bb5edec1e79 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1481,13 +1481,6 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
           };
         };
 
-        const iconForAction: Record<"rename" | "grouping" | "copy-path" | "delete", string> = {
-          rename: "pencil",
-          grouping: "folder-tree",
-          "copy-path": "copy",
-          delete: "trash",
-        };
-
         const buildTargetedItem = (
           action: "rename" | "grouping" | "copy-path" | "delete",
           label: string,
@@ -1504,14 +1497,14 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
                 ...(options?.isDisabled?.(singleMember) ? { disabled: true } : {}),
               }),
               label,
-              icon: iconForAction[action],
+              ...(action === "delete" ? { icon: "trash" } : {}),
             };
           }
 
           return {
             id: `${action}:submenu`,
             label,
-            icon: iconForAction[action],
+            ...(action === "delete" ? { icon: "trash" } : {}),
             children: project.memberProjects.map((member) =>
               makeLeaf(action, member, {
                 ...(options?.destructive ? { destructive: true } : {}),
@@ -1942,7 +1935,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
           { id: "mark-unread", label: "Mark unread" },
           { id: "copy-path", label: "Copy Path" },
           { id: "copy-thread-id", label: "Copy Thread ID" },
-          { id: "delete", label: "Delete", destructive: true },
+          { id: "delete", label: "Delete", destructive: true, icon: "trash" },
         ],
         position,
       );
diff --git a/apps/web/src/contextMenuFallback.ts b/apps/web/src/contextMenuFallback.ts
index 97e10220cc5..a301e0c92c8 100644
--- a/apps/web/src/contextMenuFallback.ts
+++ b/apps/web/src/contextMenuFallback.ts
@@ -57,7 +57,7 @@ function createIconElement(name: string, tone: "neutral" | "destructive"): SVGSV
   svg.setAttribute("stroke-linejoin", "round");
   svg.setAttribute(
     "class",
-    tone === "destructive" ? "size-4 shrink-0" : "size-4 shrink-0 text-muted-foreground",
+    tone === "destructive" ? "size-3.5 shrink-0" : "size-3.5 shrink-0 text-muted-foreground",
   );
   for (const node of paths) {
     const child = document.createElementNS(SVG_NS, node.tag);

From e695574635de2b70fa08afc5544a0c7f6d5d481c Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 10 Jun 2026 00:26:54 -0700
Subject: [PATCH 3/3] Refine thread archive confirm pill shape

- Change the archive confirm control from fully rounded to rounded-md
- Keep the existing destructive hover and focus styling
---
 apps/web/src/components/Sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index bb5edec1e79..dc5acaaadc7 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -637,7 +637,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
                 data-thread-selection-safe
                 data-testid={`thread-archive-confirm-${thread.id}`}
                 aria-label={`Confirm archive ${thread.title}`}
-                className="absolute top-1/2 right-1 inline-flex h-5 -translate-y-1/2 cursor-pointer items-center rounded-full bg-destructive/12 px-2 text-[10px] font-medium text-destructive transition-colors hover:bg-destructive/18 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-destructive/40"
+                className="absolute top-1/2 right-1 inline-flex h-5 -translate-y-1/2 cursor-pointer items-center rounded-md bg-destructive/12 px-2 text-[10px] font-medium text-destructive transition-colors hover:bg-destructive/18 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-destructive/40"
                 onPointerDown={stopPropagationOnPointerDown}
                 onClick={handleConfirmArchiveClick}
               >