From c4c1d76fec972e5d902a669f0cb1953eaa528f16 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Thu, 15 Oct 2026 14:38:50 +0900
Subject: feat(tabs): 2-column tab grid with nestable subagent groups + tab
 menu (add/remove from group)

---
 src/features/tabs/ui/TabCard.svelte     | 232 ++++++++++++++++++++++++
 src/features/tabs/ui/TabGroupBox.svelte |  53 ++++++
 src/features/tabs/ui/TabList.svelte     | 310 ++++++++++++++------------------
 src/features/tabs/ui/TabMenu.svelte     | 145 +++++++++++++++
 4 files changed, 568 insertions(+), 172 deletions(-)
 create mode 100644 src/features/tabs/ui/TabCard.svelte
 create mode 100644 src/features/tabs/ui/TabGroupBox.svelte
 create mode 100644 src/features/tabs/ui/TabMenu.svelte

(limited to 'src/features/tabs/ui')

diff --git a/src/features/tabs/ui/TabCard.svelte b/src/features/tabs/ui/TabCard.svelte
new file mode 100644
index 0000000..a95f8e6
--- /dev/null
+++ b/src/features/tabs/ui/TabCard.svelte
@@ -0,0 +1,232 @@
+<script lang="ts">
+  import type { Tab } from "../tabs";
+
+  /**
+   * One tab in the tab grid — a fixed-height card. Every card has IDENTICAL
+   * dimensions; a group parent (`wide`) simply spans both grid columns.
+   * Right-click (or touch-and-hold) asks the owner to open the tab menu.
+   */
+  let {
+    tab,
+    handle,
+    active,
+    status,
+    wide = false,
+    subagentCount = 0,
+    onSelect,
+    onClose,
+    onRename,
+    onMenu,
+  }: {
+    tab: Tab;
+    /** Short-handle (git-style unique prefix) shown in the id badge. */
+    handle: string;
+    active: boolean;
+    /** Lifecycle status (drives the spinner), when known. */
+    status: string | undefined;
+    /** Group parent: spans both grid columns. */
+    wide?: boolean;
+    /** Number of direct subagents (shown on a group parent). */
+    subagentCount?: number;
+    onSelect: (conversationId: string) => void;
+    onClose: (conversationId: string) => void;
+    onRename?: ((conversationId: string, title: string) => void) | undefined;
+    /** Open the tab menu at viewport coordinates. */
+    onMenu: (conversationId: string, x: number, y: number) => void;
+  } = $props();
+
+  // Inline rename: double-click the title to edit, Enter/blur to save.
+  let editing = $state(false);
+  let editValue = $state("");
+  let editEl = $state<HTMLInputElement>();
+
+  function startRename(): void {
+    if (onRename === undefined) return;
+    editing = true;
+    editValue = tab.title;
+    queueMicrotask(() => editEl?.focus());
+  }
+
+  function commitRename(): void {
+    if (!editing) return;
+    const trimmed = editValue.trim();
+    if (trimmed.length > 0 && onRename !== undefined) onRename(tab.conversationId, trimmed);
+    editing = false;
+  }
+
+  // Click-to-copy the FULL conversation id; the badge text is selected as the
+  // feedback (and as a manual-copy fallback when the clipboard is unavailable).
+  async function copyId(el: HTMLElement): Promise<void> {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    const clipboard = navigator.clipboard;
+    if (clipboard === undefined) return;
+    try {
+      await clipboard.writeText(tab.conversationId);
+    } catch {
+      // Selection already lets the user copy manually.
+    }
+  }
+
+  // Touch-and-hold → menu (iOS Safari never fires `contextmenu`; Android does,
+  // and opening twice at the same spot is idempotent).
+  const LONG_PRESS_MS = 500;
+  const MOVE_TOLERANCE_PX = 10;
+  let pressTimer: ReturnType<typeof setTimeout> | null = null;
+  let pressX = 0;
+  let pressY = 0;
+  let suppressClick = false;
+
+  function cancelPress(): void {
+    if (pressTimer !== null) clearTimeout(pressTimer);
+    pressTimer = null;
+  }
+
+  function onPointerDown(e: PointerEvent): void {
+    if (e.pointerType !== "touch") return;
+    cancelPress();
+    pressX = e.clientX;
+    pressY = e.clientY;
+    pressTimer = setTimeout(() => {
+      pressTimer = null;
+      suppressClick = true;
+      onMenu(tab.conversationId, pressX, pressY);
+    }, LONG_PRESS_MS);
+  }
+
+  function onPointerMove(e: PointerEvent): void {
+    if (pressTimer === null) return;
+    if (Math.hypot(e.clientX - pressX, e.clientY - pressY) > MOVE_TOLERANCE_PX) cancelPress();
+  }
+
+  $effect(() => cancelPress);
+</script>
+
+<div
+  class="tab-card group/card relative flex h-[4.5rem] min-w-0 cursor-pointer flex-col justify-between rounded-md border px-2 py-1.5 text-sm transition-colors {active
+    ? 'border-primary bg-primary/15'
+    : 'border-base-content/10 bg-base-300 hover:border-base-content/25'}"
+  class:col-span-2={wide}
+  role="tab"
+  tabindex="0"
+  aria-selected={active}
+  title={tab.title}
+  data-conversation-id={tab.conversationId}
+  data-wide={wide ? "true" : undefined}
+  onclick={() => {
+    if (suppressClick) {
+      suppressClick = false;
+      return;
+    }
+    onSelect(tab.conversationId);
+  }}
+  onkeydown={(e) => {
+    if (e.target !== e.currentTarget) return;
+    if (e.key === "Enter") onSelect(tab.conversationId);
+    else if (e.key === "ContextMenu" || (e.shiftKey && e.key === "F10")) {
+      e.preventDefault();
+      const r = e.currentTarget.getBoundingClientRect();
+      onMenu(tab.conversationId, r.left + 8, r.bottom);
+    }
+  }}
+  oncontextmenu={(e) => {
+    e.preventDefault();
+    cancelPress();
+    onMenu(tab.conversationId, e.clientX, e.clientY);
+  }}
+  onpointerdown={onPointerDown}
+  onpointermove={onPointerMove}
+  onpointerup={cancelPress}
+  onpointercancel={cancelPress}
+  onpointerleave={cancelPress}
+>
+  <div class="flex min-w-0 items-center gap-1">
+    <button
+      type="button"
+      class="shrink-0 select-text rounded bg-base-100 px-1 py-0.5 font-mono text-[10px] leading-none text-base-content/60 transition-colors hover:bg-primary hover:text-primary-content"
+      data-copy-id={tab.conversationId}
+      title="Click to copy conversation id"
+      aria-label={`Copy conversation id ${tab.conversationId}`}
+      onclick={(e) => {
+        e.stopPropagation();
+        void copyId(e.currentTarget);
+      }}
+    >
+      {handle}
+    </button>
+    {#if wide && subagentCount > 0}
+      <span
+        class="shrink-0 truncate rounded bg-base-100 px-1 py-0.5 text-[10px] leading-none text-base-content/60"
+        data-subagent-count={subagentCount}
+      >
+        {subagentCount}
+        {subagentCount === 1 ? "subagent" : "subagents"}
+      </span>
+    {/if}
+    <span class="flex-1"></span>
+    {#if status === "queued"}
+      <!-- Waiting for a concurrency slot — a ring (vs the dots of `active`). -->
+      <span
+        class="loading loading-ring loading-xs shrink-0 text-primary"
+        aria-label="Queued"
+        title="Waiting for a concurrency slot"
+      ></span>
+    {:else if status === "active"}
+      <span class="loading loading-dots loading-xs shrink-0 text-primary"></span>
+    {/if}
+    <button
+      type="button"
+      class="btn btn-ghost btn-xs -mr-1 h-5 min-h-5 w-5 shrink-0 p-0 text-base-content/60"
+      aria-label="Close tab"
+      onclick={(e) => {
+        e.stopPropagation();
+        onClose(tab.conversationId);
+      }}
+    >
+      &times;
+    </button>
+  </div>
+  {#if editing}
+    <input
+      bind:this={editEl}
+      bind:value={editValue}
+      class="w-full min-w-0 rounded bg-base-100 px-1 py-0.5 text-left text-xs outline outline-1 outline-primary"
+      onclick={(e) => e.stopPropagation()}
+      onkeydown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commitRename();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          editing = false;
+        }
+      }}
+      onblur={commitRename}
+    />
+  {:else}
+    <span
+      class="line-clamp-2 min-w-0 break-words text-left text-xs leading-tight"
+      role="button"
+      tabindex="-1"
+      title={tab.title}
+      ondblclick={(e) => {
+        e.stopPropagation();
+        startRename();
+      }}
+    >
+      {tab.title}
+    </span>
+  {/if}
+</div>
+
+<style>
+  /* Touch-and-hold opens the tab menu — suppress the native callout/selection. */
+  .tab-card {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+</style>
diff --git a/src/features/tabs/ui/TabGroupBox.svelte b/src/features/tabs/ui/TabGroupBox.svelte
new file mode 100644
index 0000000..5cbfb27
--- /dev/null
+++ b/src/features/tabs/ui/TabGroupBox.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { TabGroupNode } from "../tab-groups";
+  import { groupBleedPx } from "../tab-groups";
+  import type { Tab } from "../tabs";
+  import TabGroupBox from "./TabGroupBox.svelte";
+
+  /**
+   * A subagent group: a darker box spanning both grid columns that wraps the
+   * group parent's (double-width) card + its subagents' cards. Recursive —
+   * a subagent with its own subagents renders a nested box. The box BLEEDS
+   * outward (negative margin + equal padding, `groupBleedPx`) so the cards
+   * inside stay on the same two columns as top-level cards: every card keeps
+   * identical dimensions at every depth. The translucent black background
+   * compounds, so each nesting level reads darker than the one around it.
+   */
+  let {
+    node,
+    level,
+    maxDepth,
+    card,
+  }: {
+    node: TabGroupNode;
+    /** Nesting level of THIS box (1 = outermost). */
+    level: number;
+    maxDepth: number;
+    /** Renders one card: (tab, wide, subagentCount). */
+    card: Snippet<[Tab, boolean, number]>;
+  } = $props();
+
+  const bleed = $derived(groupBleedPx(level, maxDepth));
+</script>
+
+<div
+  class="col-span-2 rounded-lg border border-black/50 bg-black/40 py-1.5 shadow-inner"
+  style:margin-inline="-{bleed}px"
+  style:padding-inline="{bleed}px"
+  role="group"
+  aria-label={`Subagents of ${node.tab.title}`}
+  data-tab-group={node.tab.conversationId}
+  data-level={level}
+>
+  <div class="grid grid-flow-row-dense grid-cols-2 gap-1.5">
+    {@render card(node.tab, true, node.children.length)}
+    {#each node.children as child (child.tab.conversationId)}
+      {#if child.children.length > 0}
+        <TabGroupBox node={child} level={level + 1} {maxDepth} {card} />
+      {:else}
+        {@render card(child.tab, false, 0)}
+      {/if}
+    {/each}
+  </div>
+</div>
diff --git a/src/features/tabs/ui/TabList.svelte b/src/features/tabs/ui/TabList.svelte
index 6d85065..06d5aa6 100644
--- a/src/features/tabs/ui/TabList.svelte
+++ b/src/features/tabs/ui/TabList.svelte
@@ -1,183 +1,149 @@
 <script lang="ts">
-	import type { Tab } from "../tabs";
-	import { shortHandle } from "../tabs";
+  import {
+    buildTabGroups,
+    directGroupChildren,
+    groupGutterPx,
+    groupParentCandidates,
+    visibleGroupParents,
+  } from "../tab-groups";
+  import type { Tab } from "../tabs";
+  import { shortHandle } from "../tabs";
+  import TabCard from "./TabCard.svelte";
+  import TabGroupBox from "./TabGroupBox.svelte";
+  import TabMenu from "./TabMenu.svelte";
 
-	let {
-		tabs,
-		activeConversationId,
-		statusFor,
-		onSelect,
-		onClose,
-		onNewDraft,
-		onRename,
-	}: {
-		tabs: readonly Tab[];
-		activeConversationId: string | null;
-		/** Returns the conversation's lifecycle status, or undefined when unknown. */
-		statusFor?: (conversationId: string) => string | undefined;
-		onSelect: (conversationId: string) => void;
-		onClose: (conversationId: string) => void;
-		onNewDraft: () => void;
-		onRename?: (conversationId: string, title: string) => void;
-	} = $props();
+  let {
+    tabs,
+    activeConversationId,
+    statusFor,
+    onSelect,
+    onClose,
+    onNewDraft,
+    onRename,
+    onSetTabGroup,
+  }: {
+    tabs: readonly Tab[];
+    activeConversationId: string | null;
+    /** Returns the conversation's lifecycle status, or undefined when unknown. */
+    statusFor?: (conversationId: string) => string | undefined;
+    onSelect: (conversationId: string) => void;
+    onClose: (conversationId: string) => void;
+    onNewDraft: () => void;
+    onRename?: (conversationId: string, title: string) => void;
+    /**
+     * Move a tab into a subagent group (parent id) or out of it (null). Purely
+     * presentational grouping. When absent, the tab menu is disabled.
+     */
+    onSetTabGroup?: (conversationId: string, parentId: string | null) => void;
+  } = $props();
 
-	// Git-style short handle (shortest unique prefix) per open tab — the visible
-	// "tab ID". Derived from the set of open conversation ids; pure helper.
-	const handles = $derived.by(() => {
-		const ids = tabs.map((t) => t.conversationId);
-		const map = new Map<string, string>();
-		for (const id of ids) map.set(id, shortHandle(id, ids));
-		return map;
-	});
+  // Git-style short handle (shortest unique prefix) per open tab — the visible
+  // "tab ID". Derived from the set of open conversation ids; pure helper.
+  const handles = $derived.by(() => {
+    const ids = tabs.map((t) => t.conversationId);
+    const map = new Map<string, string>();
+    for (const id of ids) map.set(id, shortHandle(id, ids));
+    return map;
+  });
+  const handleFor = (id: string): string => handles.get(id) ?? id;
 
-	// Inline rename: double-click a tab's title to edit, Enter/blur to save.
-	let editingId = $state<string | null>(null);
-	let editValue = $state("");
-	let editEl = $state<HTMLInputElement>();
+  // The subagent-group forest (pure) + the gutter the outermost box bleeds into.
+  const forest = $derived(buildTabGroups(tabs));
+  const gutter = $derived(groupGutterPx(forest.maxDepth));
 
-	function startRename(tab: Tab): void {
-		if (onRename === undefined) return;
-		editingId = tab.conversationId;
-		editValue = tab.title;
-		// Focus the input after it renders.
-		queueMicrotask(() => editEl?.focus());
-	}
+  // Tab menu (right-click / touch-and-hold). Local UI state owned here.
+  let menu = $state<{ conversationId: string; x: number; y: number } | null>(null);
+  const menuTab = $derived(
+    menu === null ? null : (tabs.find((t) => t.conversationId === menu?.conversationId) ?? null),
+  );
+  const menuGroupParent = $derived.by(() => {
+    if (menuTab === null) return null;
+    const pid = visibleGroupParents(tabs).get(menuTab.conversationId) ?? null;
+    return pid === null ? null : (tabs.find((t) => t.conversationId === pid) ?? null);
+  });
+  const menuChildren = $derived(
+    menuTab === null ? [] : directGroupChildren(tabs, menuTab.conversationId),
+  );
+  const menuCandidates = $derived(
+    menuTab === null ? [] : groupParentCandidates(tabs, menuTab.conversationId),
+  );
 
-	function commitRename(): void {
-		const id = editingId;
-		if (id !== null && onRename !== undefined) {
-			const trimmed = editValue.trim();
-			if (trimmed.length > 0) onRename(id, trimmed);
-		}
-		editingId = null;
-	}
-
-	function cancelRename(): void {
-		editingId = null;
-	}
-
-	// Click-to-copy the agent (conversation) id: clicking the ID badge copies the
-	// FULL conversationId to the clipboard (the stable, useful id — the badge
-	// only shows a short prefix) and highlights the badge text as feedback. The
-	// highlight (text selection) is the indicator — no text is swapped, so the
-	// badge keeps a stable width. If the clipboard write fails, the selection is
-	// already in place so the user can Ctrl+C the text manually.
-	async function copyId(conversationId: string, el: HTMLElement): Promise<void> {
-		selectText(el);
-		const clipboard = navigator.clipboard;
-		if (clipboard === undefined) return;
-		try {
-			await clipboard.writeText(conversationId);
-		} catch {
-			// Selection already lets the user copy manually.
-		}
-	}
-
-	function selectText(el: HTMLElement): void {
-		const range = document.createRange();
-		range.selectNodeContents(el);
-		const selection = window.getSelection();
-		selection?.removeAllRanges();
-		selection?.addRange(range);
-	}
+  function openMenu(conversationId: string, x: number, y: number): void {
+    if (onSetTabGroup === undefined) return;
+    menu = { conversationId, x, y };
+  }
 </script>
 
+{#snippet card(tab: Tab, wide: boolean, subagentCount: number)}
+  <TabCard
+    {tab}
+    handle={handleFor(tab.conversationId)}
+    active={tab.conversationId === activeConversationId}
+    status={statusFor?.(tab.conversationId)}
+    {wide}
+    {subagentCount}
+    {onSelect}
+    {onClose}
+    {onRename}
+    onMenu={openMenu}
+  />
+{/snippet}
+
 <div class="flex flex-col gap-2">
-	<!-- Single-column vertical tab list. Fixed at 40% of the viewport height so a
-	     long tab set scrolls inside this region instead of growing the whole sidebar. -->
-	<div class="flex h-[40vh] flex-col gap-1 overflow-y-auto pr-1">
-		{#each tabs as tab (tab.conversationId)}
-			<div
-				class="flex items-center gap-1.5 rounded px-2 py-1.5 text-sm hover:bg-base-300"
-				class:bg-base-300={tab.conversationId === activeConversationId}
-				role="tab"
-				tabindex="0"
-				aria-selected={tab.conversationId === activeConversationId}
-				title={tab.title}
-				onclick={() => onSelect(tab.conversationId)}
-				onkeydown={(e) => {
-					if (e.key === "Enter") onSelect(tab.conversationId);
-				}}
-			>
-				<button
-					type="button"
-					class="shrink-0 rounded bg-base-300 px-1 py-0.5 font-mono text-[10px] leading-none text-base-content/60 transition-colors hover:bg-primary hover:text-primary-content"
-					data-copy-id={tab.conversationId}
-					title="Click to copy conversation id"
-					aria-label={`Copy conversation id ${tab.conversationId}`}
-					onclick={(e) => {
-						e.stopPropagation();
-						void copyId(tab.conversationId, e.currentTarget);
-					}}
-				>
-					{handles.get(tab.conversationId) ?? tab.conversationId}
-				</button>
-				{#if editingId === tab.conversationId}
-					<input
-						bind:this={editEl}
-						bind:value={editValue}
-						class="min-w-0 flex-1 rounded bg-base-100 px-1 py-0.5 text-left text-sm outline outline-1 outline-primary"
-						onclick={(e) => e.stopPropagation()}
-						onkeydown={(e) => {
-							if (e.key === "Enter") {
-								e.preventDefault();
-								commitRename();
-							} else if (e.key === "Escape") {
-								e.preventDefault();
-								cancelRename();
-							}
-						}}
-						onblur={commitRename}
-					/>
-				{:else}
-					<span
-						class="min-w-0 flex-1 cursor-pointer truncate text-left"
-						role="button"
-						tabindex="-1"
-						title={tab.title}
-						ondblclick={(e) => {
-							e.stopPropagation();
-							startRename(tab);
-						}}
-					>
-						{tab.title}
-					</span>
-				{/if}
-				{#if statusFor?.(tab.conversationId) === "queued"}
-					<!-- Waiting for a concurrency slot — a ring (vs the dots of `active`). -->
-					<span
-						class="loading loading-ring loading-xs shrink-0 text-primary"
-						aria-label="Queued"
-						title="Waiting for a concurrency slot"
-					></span>
-				{:else if statusFor?.(tab.conversationId) === "active"}
-					<span class="loading loading-dots loading-xs shrink-0 text-primary"></span>
-				{/if}
-				<button
-					class="btn btn-ghost btn-xs shrink-0"
-					aria-label="Close tab"
-					onclick={(e) => {
-						e.stopPropagation();
-						onClose(tab.conversationId);
-					}}
-				>
-					&times;
-				</button>
-			</div>
-		{/each}
-	</div>
+  <!-- 2-column grid of same-size tab cards, fixed at 40% of the viewport height
+       so a long tab set scrolls inside this region instead of growing the
+       sidebar. Subagent groups span both columns; `dense` lets a later card
+       fill the half-row a group would otherwise leave empty. -->
+  <div
+    class="h-[40vh] overflow-y-auto py-0.5"
+    style:padding-inline="{gutter}px"
+    data-tab-grid
+    onscroll={() => (menu = null)}
+  >
+    <div class="grid grid-flow-row-dense grid-cols-2 gap-1.5" role="tablist">
+      {#each forest.roots as node (node.tab.conversationId)}
+        {#if node.children.length > 0}
+          <TabGroupBox {node} level={1} maxDepth={forest.maxDepth} {card} />
+        {:else}
+          {@render card(node.tab, false, 0)}
+        {/if}
+      {/each}
+    </div>
+  </div>
 
-	<button
-		type="button"
-		class="btn btn-ghost btn-sm w-full border border-base-300"
-		class:btn-primary={activeConversationId === null}
-		aria-label="New chat"
-		onclick={() => onNewDraft()}
-	>
-		{#if activeConversationId === null}
-			New Chat
-		{:else}
-			+ New chat
-		{/if}
-	</button>
+  <button
+    type="button"
+    class="btn btn-ghost btn-sm w-full border border-base-300"
+    class:btn-primary={activeConversationId === null}
+    aria-label="New chat"
+    onclick={() => onNewDraft()}
+  >
+    {#if activeConversationId === null}
+      New Chat
+    {:else}
+      + New chat
+    {/if}
+  </button>
 </div>
+
+{#if menu !== null && menuTab !== null && onSetTabGroup !== undefined}
+  {@const setGroup = onSetTabGroup}
+  {@const target = menuTab.conversationId}
+  {@const children = [...menuChildren]}
+  <TabMenu
+    tab={menuTab}
+    handle={handleFor(target)}
+    x={menu.x}
+    y={menu.y}
+    groupParent={menuGroupParent}
+    childCount={children.length}
+    candidates={menuCandidates}
+    {handleFor}
+    onAddToGroup={(parentId) => setGroup(target, parentId)}
+    onRemoveFromGroup={() => setGroup(target, null)}
+    onUngroupChildren={() => {
+      for (const id of children) setGroup(id, null);
+    }}
+    onDismiss={() => (menu = null)}
+  />
+{/if}
diff --git a/src/features/tabs/ui/TabMenu.svelte b/src/features/tabs/ui/TabMenu.svelte
new file mode 100644
index 0000000..513463f
--- /dev/null
+++ b/src/features/tabs/ui/TabMenu.svelte
@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { Tab } from "../tabs";
+
+  /**
+   * The tab context menu (right-click / touch-and-hold on a tab card): add the
+   * tab to a subagent group, remove it from its group, or release its own
+   * subagents. Purely presentational grouping. Fixed-positioned at the
+   * pointer, clamped into the viewport; closes on Escape / outside press /
+   * scroll / resize.
+   */
+  let {
+    tab,
+    handle,
+    x,
+    y,
+    groupParent,
+    childCount,
+    candidates,
+    handleFor,
+    onAddToGroup,
+    onRemoveFromGroup,
+    onUngroupChildren,
+    onDismiss,
+  }: {
+    tab: Tab;
+    handle: string;
+    /** Requested viewport position (pointer). */
+    x: number;
+    y: number;
+    /** The tab's current visible group parent, or null when top-level. */
+    groupParent: Tab | null;
+    /** Number of tabs directly grouped under this tab. */
+    childCount: number;
+    /** Tabs this tab may be moved under. */
+    candidates: readonly Tab[];
+    handleFor: (conversationId: string) => string;
+    onAddToGroup: (parentId: string) => void;
+    onRemoveFromGroup: () => void;
+    onUngroupChildren: () => void;
+    onDismiss: () => void;
+  } = $props();
+
+  let menuEl = $state<HTMLDivElement>();
+  let width = $state(0);
+  let height = $state(0);
+  const MARGIN = 8;
+
+  const left = $derived(
+    Math.max(MARGIN, Math.min(x, (globalThis.innerWidth ?? 0) - width - MARGIN)),
+  );
+  const top = $derived(
+    Math.max(MARGIN, Math.min(y, (globalThis.innerHeight ?? 0) - height - MARGIN)),
+  );
+
+  $effect(() => {
+    menuEl?.focus();
+  });
+
+  function act(fn: () => void): void {
+    fn();
+    onDismiss();
+  }
+</script>
+
+<svelte:window
+  onkeydown={(e) => {
+    if (e.key === "Escape") onDismiss();
+  }}
+  onpointerdown={(e) => {
+    if (menuEl !== undefined && !menuEl.contains(e.target as Node)) onDismiss();
+  }}
+  onresize={onDismiss}
+/>
+
+<div
+  bind:this={menuEl}
+  bind:clientWidth={width}
+  bind:clientHeight={height}
+  class="fixed z-50 flex w-64 max-w-[calc(100vw-1rem)] flex-col rounded-lg border border-base-content/15 bg-base-100 p-1 text-sm shadow-xl outline-none"
+  style:left="{left}px"
+  style:top="{top}px"
+  role="menu"
+  tabindex="-1"
+  aria-label={`Tab menu for ${tab.title}`}
+  oncontextmenu={(e) => e.preventDefault()}
+>
+  <div class="flex min-w-0 items-center gap-1.5 px-2 py-1 text-xs text-base-content/60">
+    <span class="shrink-0 rounded bg-base-300 px-1 py-0.5 font-mono text-[10px] leading-none">
+      {handle}
+    </span>
+    <span class="truncate">{tab.title}</span>
+  </div>
+
+  {#if groupParent !== null}
+    <button
+      type="button"
+      role="menuitem"
+      class="rounded px-2 py-1.5 text-left hover:bg-base-300"
+      onclick={() => act(onRemoveFromGroup)}
+    >
+      Remove from group
+      <span class="block truncate text-xs text-base-content/50">
+        Currently under {handleFor(groupParent.conversationId)} · {groupParent.title}
+      </span>
+    </button>
+  {/if}
+
+  {#if childCount > 0}
+    <button
+      type="button"
+      role="menuitem"
+      class="rounded px-2 py-1.5 text-left hover:bg-base-300"
+      onclick={() => act(onUngroupChildren)}
+    >
+      Ungroup {childCount}
+      {childCount === 1 ? "subagent" : "subagents"}
+    </button>
+  {/if}
+
+  <div class="mt-1 border-t border-base-content/10 px-2 pt-1.5 pb-1 text-xs text-base-content/60">
+    Add to group under…
+  </div>
+  {#if candidates.length === 0}
+    <div class="px-2 py-1.5 text-xs text-base-content/40">No other tabs</div>
+  {:else}
+    <div class="flex max-h-56 flex-col overflow-y-auto">
+      {#each candidates as candidate (candidate.conversationId)}
+        <button
+          type="button"
+          role="menuitem"
+          class="flex min-w-0 items-center gap-1.5 rounded px-2 py-1.5 text-left hover:bg-base-300"
+          data-group-candidate={candidate.conversationId}
+          onclick={() => act(() => onAddToGroup(candidate.conversationId))}
+        >
+          <span
+            class="shrink-0 rounded bg-base-300 px-1 py-0.5 font-mono text-[10px] leading-none text-base-content/60"
+          >
+            {handleFor(candidate.conversationId)}
+          </span>
+          <span class="truncate">{candidate.title}</span>
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
-- 
cgit v1.2.3