feat(workspace-active-indicator): show loading dots on workspace cards with active chats

1 files changed, 20 insertions, 0 deletions

diff --git a/src/features/workspaces/ui/WorkspaceCard.svelte b/src/features/workspaces/ui/WorkspaceCard.svelte
index 0ffc975..1825b7d 100644
--- a/src/features/workspaces/ui/WorkspaceCard.svelte
+++ b/src/features/workspaces/ui/WorkspaceCard.svelte
@@ -11,14 +11,27 @@
     store,
     onNavigate,
     computers,
+    hasActive,
   }: {
     ws: WorkspaceEntry;
     store: WorkspaceStore;
     onNavigate: (path: string) => void;
     /** Discovered computers (`GET /computers`), for the default-computer dropdown. */
     computers: readonly ComputerEntry[];
+    /**
+     * Optional port: returns whether the workspace has at least one active
+     * (generating / queued) conversation — drives a loading-dots indicator on
+     * the card. Wired by the composition root to the app store's
+     * `workspaceHasActiveConversations`. Absent → no indicator (e.g. tests).
+     */
+    hasActive?: (workspaceId: string) => boolean;
   } = $props();
 
+  // Whether at least one conversation in this workspace is currently active
+  // (generating). Reactive: the composition-root port reads the app store's
+  // reactive tab set + lifecycle statuses, so this re-derives on change.
+  const active = $derived(hasActive?.(ws.id) ?? false);
+
   // ── Title: double-click to rename inline ──────────────────────────────────
   let editingTitle = $state(false);
   let titleDraft = $state("");
@@ -122,6 +135,13 @@
         ondblclick={startEditTitle}>{ws.title}</span
       >
     {/if}
+    {#if active}
+      <span
+        class="loading loading-dots loading-xs shrink-0 text-primary"
+        aria-label="Workspace has active conversations"
+        title="A conversation in this workspace is generating"></span
+      >
+    {/if}
     <span class="font-mono text-xs opacity-50">/{ws.id}</span>
     <span class="ml-auto text-xs opacity-50">
       {ws.conversationCount}