summaryrefslogtreecommitdiffhomepage
path: root/src/features/tabs/ui
diff options
context:
space:
mode:
Diffstat (limited to 'src/features/tabs/ui')
-rw-r--r--src/features/tabs/ui/TabCard.svelte232
-rw-r--r--src/features/tabs/ui/TabGroupBox.svelte53
-rw-r--r--src/features/tabs/ui/TabList.svelte310
-rw-r--r--src/features/tabs/ui/TabMenu.svelte145
4 files changed, 568 insertions, 172 deletions
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>
generated by cgit v1.2.3 (git 2.39.1) at 2026-10-26 22:01:41 +0000