diff options
Diffstat (limited to 'packages/frontend/src/lib/components')
| -rw-r--r-- | packages/frontend/src/lib/components/TabBar.svelte | 55 | ||||
| -rw-r--r-- | packages/frontend/src/lib/components/ToolCallDisplay.svelte | 23 |
2 files changed, 73 insertions, 5 deletions
diff --git a/packages/frontend/src/lib/components/TabBar.svelte b/packages/frontend/src/lib/components/TabBar.svelte index b5597e1..cfa5887 100644 --- a/packages/frontend/src/lib/components/TabBar.svelte +++ b/packages/frontend/src/lib/components/TabBar.svelte @@ -6,8 +6,23 @@ function statusColor(status: string): string { if (status === "error") return "bg-error"; return "bg-success"; } + +const userTabs = $derived(tabStore.tabs.filter((t) => t.parentTabId === null)); +const subagentTabs = $derived( + tabStore.tabs.filter((t) => t.parentTabId !== null && t.parentTabId === activeUserTabId), +); +const hasSubagentTabs = $derived(subagentTabs.length > 0); + +// When a subagent tab is active, its parent user tab should still appear selected +const activeTab = $derived(tabStore.tabs.find((t) => t.id === tabStore.activeTabId)); +const activeUserTabId = $derived( + activeTab?.parentTabId !== null && activeTab?.parentTabId !== undefined + ? activeTab.parentTabId + : tabStore.activeTabId, +); </script> +<!-- Top row: user tabs --> <!-- svelte-ignore a11y_no_static_element_interactions --> <div class="overflow-x-auto bg-base-200 flex-shrink-0" @@ -29,11 +44,11 @@ function statusColor(status: string): string { + </button> - {#each tabStore.tabs as tab (tab.id)} + {#each userTabs as tab (tab.id)} <!-- svelte-ignore a11y_no_static_element_interactions --> <div role="tab" - class="tab !flex items-stretch gap-1.5 {tab.id === tabStore.activeTabId ? 'tab-active' : ''}" + class="tab !flex items-stretch gap-1.5 {tab.id === activeUserTabId ? 'tab-active' : ''}" onclick={() => tabStore.switchTab(tab.id)} onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') tabStore.switchTab(tab.id); }} tabindex="0" @@ -54,3 +69,39 @@ function statusColor(status: string): string { {/each} </div> </div> + +<!-- Bottom row: subagent tabs (hidden when empty) --> +{#if hasSubagentTabs} + <div class="overflow-x-auto bg-base-200 flex-shrink-0 border-t border-base-300"> + <div + role="tablist" + class="tabs tabs-lift tabs-xs min-w-max" + > + {#each subagentTabs as tab (tab.id)} + <!-- svelte-ignore a11y_no_static_element_interactions --> + <div + role="tab" + class="tab !flex items-stretch gap-1 {tab.id === tabStore.activeTabId ? 'tab-active' : ''} {!tab.persistent ? 'opacity-70 italic' : ''}" + onclick={() => tab.persistent ? tabStore.switchTab(tab.id) : tabStore.promoteTab(tab.id)} + onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') tab.persistent ? tabStore.switchTab(tab.id) : tabStore.promoteTab(tab.id); }} + tabindex="0" + > + <span class="flex items-center gap-1"> + <span class="w-1 h-1 rounded-full shrink-0 {statusColor(tab.agentStatus)}"></span> + <span class="max-w-28 truncate text-xs">{tab.title}</span> + </span> + {#if tab.persistent} + <button + type="button" + class="flex items-center justify-center px-2 my-0.5 leading-none text-base-content/30 hover:text-error hover:bg-base-300 rounded transition-colors text-xs" + onclick={(e) => { e.stopPropagation(); tabStore.closeTab(tab.id); }} + aria-label="Close tab" + > + ✕ + </button> + {/if} + </div> + {/each} + </div> + </div> +{/if} diff --git a/packages/frontend/src/lib/components/ToolCallDisplay.svelte b/packages/frontend/src/lib/components/ToolCallDisplay.svelte index 805de6d..213ba17 100644 --- a/packages/frontend/src/lib/components/ToolCallDisplay.svelte +++ b/packages/frontend/src/lib/components/ToolCallDisplay.svelte @@ -1,4 +1,5 @@ <script lang="ts"> +import { tabStore } from "../tabs.svelte.js"; import type { ToolCallDisplay } from "../types.js"; const { toolCall }: { toolCall: ToolCallDisplay } = $props(); @@ -41,17 +42,33 @@ const isShell = $derived(toolCall.name === "run_shell"); const shellResult = $derived( isShell && toolCall.result !== undefined ? parseShellResult(toolCall.result) : null, ); + +const summonAgentId = $derived.by(() => { + if (toolCall.name !== "summon" || !toolCall.result) return null; + const match = toolCall.result.match(/agent_id:\s*([a-f0-9-]+)/); + return match ? match[1] : null; +}); </script> <div class="collapse collapse-arrow mb-2 p-1 opacity-60 {isExpanded ? 'collapse-open' : ''}"> - <button - type="button" + <!-- svelte-ignore a11y_no_static_element_interactions --> + <div class="collapse-title flex items-center gap-2 text-sm italic cursor-pointer w-full text-left" onclick={toggle} + role="button" + tabindex="0" + onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') toggle(); }} aria-expanded={isExpanded} > <span class="badge badge-neutral badge-sm">tool</span> <span class="font-mono">{toolCall.name}</span> + {#if summonAgentId !== null} + <button + type="button" + class="btn btn-xs btn-ghost" + onclick={(e) => { e.stopPropagation(); tabStore.openAgentTab(summonAgentId!); }} + >Open Tab</button> + {/if} {#if toolCall.result !== undefined} {#if isShell && shellResult !== null} <span class="badge badge-sm ml-auto {shellResult.exitCode === 0 ? 'badge-success' : 'badge-error'}"> @@ -65,7 +82,7 @@ const shellResult = $derived( {:else} <span class="badge badge-warning badge-sm ml-auto">pending</span> {/if} - </button> + </div> <div class="collapse-content text-xs"> <div class="mt-2"> |