@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/views/Tasks/TasksView.tsx

@@ -1,25 +1,38 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Plus } from 'lucide-react';
 import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
 import { KanbanBoard } from '../../ui/kanban/KanbanBoard.js';
 import { KanbanColumn, type KanbanColumnData } from '../../ui/kanban/KanbanColumn.js';
 import { KanbanCard, useKanbanCardSortable, type KanbanCardData } from '../../ui/kanban/KanbanCard.js';
+import { KanbanToolbar, useKanbanSelection, type KanbanFilter } from '../../ui/index.js';
 import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { TaskDetail } from '../../ui/tasks/TaskDetail.js';
+import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
+import { Input } from '../../ui/controls/Input.js';
+import { Textarea } from '../../ui/controls/Textarea.js';
+import { Button } from '../../ui/controls/Button.js';
 import { useFetch } from '../../data/useFetch.js';
 import { useWsMessage } from '../../data/useWebSocket.js';
-import { fetchJson } from '../../data/fetcher.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
 import type { Task, WsMessage } from '../../data/types.js';
 
-type TaskStatus = 'queued' | 'doing' | 'blocked' | 'done' | 'archived';
+type TaskStatus = NonNullable<Task['status']>;
 
 /**
  * TasksView — Sprint S10. Pulls `/api/tasks` and maps server statuses
  * to v8 kanban columns. Drag a card between columns → PATCH
  * /api/tasks/:id/status. Live updates via `tasks:change`.
+ *
+ * v10.0.6 — adds KanbanToolbar (search + priority filter chips +
+ * bulk-actions row), useKanbanSelection hook (Esc-to-clear), and a
+ * 6th "Backlog" column from PR #14.
  */
 
 const COLUMNS: KanbanColumnData[] = [
-  { id: 'queued', title: 'Backlog', accentTone: 'neutral' },
+  { id: 'backlog', title: 'Backlog', accentTone: 'neutral' },
+  { id: 'queued', title: 'Queued', accentTone: 'info' },
   { id: 'doing', title: 'In progress', accentTone: 'accent', wipLimit: 5 },
   { id: 'blocked', title: 'In review', accentTone: 'warning' },
   { id: 'done', title: 'Done', accentTone: 'success' },
@@ -54,6 +67,7 @@ function taskToCard(t: Task): Card {
 
 function statusToColumn(status?: TaskStatus): TaskStatus {
   switch (status) {
+    case 'backlog':
     case 'queued':
     case 'doing':
     case 'blocked':
@@ -61,7 +75,7 @@ function statusToColumn(status?: TaskStatus): TaskStatus {
     case 'archived':
       return status;
     default:
-      return 'queued';
+      return 'backlog';
   }
 }
 
@@ -84,6 +98,56 @@ export function TasksView(): JSX.Element {
   const tasks = useFetch<{ tasks?: Task[]; count?: number }>('/api/tasks');
   const [cards, setCards] = useState<Card[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [openTaskId, setOpenTaskId] = useState<string | null>(null);
+  const selection = useKanbanSelection();
+  const [query, setQuery] = useState<string>('');
+  const [activeFilters, setActiveFilters] = useState<ReadonlySet<string>>(new Set());
+  const [createDraft, setCreateDraft] = useState<{ title: string; description: string; priority: 'low' | 'medium' | 'high' | 'urgent' } | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  const saveCreate = async (): Promise<void> => {
+    if (createDraft === null || !createDraft.title.trim()) return;
+    setCreating(true);
+    try {
+      await fetchJson('/api/tasks', { method: 'POST', body: { title: createDraft.title.trim(), description: createDraft.description, priority: createDraft.priority, status: 'queued' } });
+      setCreateDraft(null);
+      tasks.refetch();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const onWsRemove = useCallback((msg: WsMessage) => {
+    const m = msg as { type?: string; id?: string };
+    if (m.type !== 'tasks:removed' && m.type !== 'task:removed') return;
+    if (!m.id) return;
+    setCards((prev) => prev.filter((c) => c.taskId !== m.id));
+    selection.remove([m.id]);
+    if (openTaskId === m.id) setOpenTaskId(null);
+  }, [openTaskId, selection]);
+  useWsMessage('tasks:removed', onWsRemove);
+  useWsMessage('task:removed', onWsRemove);
+
+  const toggleSelect = (taskId: string): void => {
+    selection.toggle(taskId);
+  };
+
+  const bulkMove = async (toStatus: TaskStatus): Promise<void> => {
+    const ids = Array.from(selection.selected);
+    if (ids.length === 0) return;
+    setCards((prev) => prev.map((c) => (selection.has(c.taskId) ? { ...c, columnId: toStatus } : c)));
+    try {
+      await fetchJson('/api/tasks/bulk-status', {
+        method: 'PATCH',
+        body: { ids, status: toStatus },
+      });
+      selection.clear();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
 
   // Sync fetched list → local state. Effect-driven so we don't setState
   // during render (which React warns about under StrictMode and which
@@ -133,13 +197,88 @@ export function TasksView(): JSX.Element {
   const counts: Record<string, number> = {};
   for (const c of cards) counts[c.columnId] = (counts[c.columnId] || 0) + 1;
 
+  const openTask = openTaskId ? tasks.data?.tasks?.find((t) => t.id === openTaskId) ?? null : null;
+  const selectedCount = selection.selected.size;
+
+  // ── v10.0.6 — search + filter chips (PR #14 toolbar wiring) ──
+  const filteredCards = useMemo<Card[]>(() => {
+    const q = query.trim().toLowerCase();
+    return cards.filter((c) => {
+      if (activeFilters.size > 0) {
+        if (activeFilters.has(`status:${c.columnId}`) === false) {
+          const hasPriority = c.priority !== undefined && activeFilters.has(`priority:${c.priority}`);
+          const hasStatus = activeFilters.has(`status:${c.columnId}`);
+          if (!hasPriority && !hasStatus) return false;
+        }
+      }
+      if (q !== '') {
+        const hay = `${c.title} ${c.description ?? ''}`.toLowerCase();
+        if (hay.includes(q) === false) return false;
+      }
+      return true;
+    });
+  }, [cards, query, activeFilters]);
+
+  const priorityFilters: KanbanFilter[] = [
+    { id: 'priority:low', label: 'Low', tone: 'neutral' },
+    { id: 'priority:medium', label: 'Medium', tone: 'info' },
+    { id: 'priority:high', label: 'High', tone: 'warning' },
+    { id: 'priority:urgent', label: 'Urgent', tone: 'danger' },
+  ];
+  const statusFilters: KanbanFilter[] = COLUMNS.map((c) => ({ id: `status:${c.id}`, label: c.title as string }));
+  const allFilters: KanbanFilter[] = [...priorityFilters, ...statusFilters];
+
+  const onFilterToggle = useCallback((id: string) => {
+    setActiveFilters((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const onClearFilters = useCallback(() => setActiveFilters(new Set()), []);
+
   return (
-    <Stack gap={4}>
+    <Stack gap={4} data-testid="tasks-view">
       <ViewHeader
         title="Tasks"
-        description="Drag cards across columns. Right-click for actions."
-        actions={error ? <span style={{ color: 'var(--danger)' }}>{error}</span> : null}
+        description="Drag cards across columns. Click a card to edit. Use the checkbox to select multiple."
+        actions={
+          <Inline gap={2} align="center">
+            {error !== null && <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>}
+            <Button variant="primary" onClick={() => setCreateDraft({ title: '', description: '', priority: 'medium' })} data-testid="task-create-open">
+              <Plus size={14} aria-hidden /> New task
+            </Button>
+          </Inline>
+        }
       />
+      {selectedCount > 0 && (
+        <KanbanToolbar
+          totalCount={cards.length}
+          visibleCount={filteredCards.length}
+          selectedCount={selectedCount}
+          query={query}
+          onQueryChange={setQuery}
+          filters={allFilters}
+          onFilterToggle={onFilterToggle}
+          onClearFilters={onClearFilters}
+          onNewTask={() => setCreateDraft({ title: '', description: '', priority: 'medium' })}
+          onBulkMove={() => void bulkMove('doing')}
+          onBulkArchive={() => void bulkMove('archived')}
+          onBulkDelete={async () => {
+            const ids = Array.from(selection.selected);
+            if (ids.length === 0) return;
+            if (!window.confirm(`Delete ${ids.length} task${ids.length === 1 ? '' : 's'}? This cannot be undone.`)) return;
+            try {
+              await fetchJson('/api/tasks/bulk-status', { method: 'PATCH', body: { ids, status: 'archived' } });
+              selection.clear();
+            } catch (err) {
+              setError(err instanceof Error ? err.message : String(err));
+            }
+          }}
+          onClearSelection={() => selection.clear()}
+        />
+      )}
       {tasks.loading && cards.length === 0 ? (
         <Stack gap={3}>
           <Skeleton style={{ height: 120 }} />
@@ -148,20 +287,100 @@ export function TasksView(): JSX.Element {
       ) : (
         <KanbanBoard columns={COLUMNS} onCardMove={onCardMove}>
           {COLUMNS.map((col) => {
-            const inColumn = cards.filter((c) => c.columnId === col.id);
+            const inColumn = filteredCards.filter((c) => c.columnId === col.id);
             return (
               <KanbanColumn
                 key={col.id}
                 column={{ ...col, count: counts[col.id] || 0 }}
               >
                 {inColumn.map((card) => (
-                  <SortableCard key={card.id} card={card} />
+                  <div key={card.id} style={{ position: 'relative' }}>
+                    <input
+                      type="checkbox"
+                      checked={selection.has(card.taskId)}
+                      onChange={() => toggleSelect(card.taskId)}
+                      onClick={(e) => e.stopPropagation()}
+                      aria-label={`Select ${card.title}`}
+                      style={{ position: 'absolute', top: 8, left: 8, zIndex: 2 }}
+                    />
+                    <div onClick={() => setOpenTaskId(card.taskId)} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpenTaskId(card.taskId); } }} style={{ cursor: 'pointer' }}>
+                      <SortableCard card={card} />
+                    </div>
+                  </div>
                 ))}
               </KanbanColumn>
             );
           })}
         </KanbanBoard>
       )}
+      {openTask && (
+        <TaskDetail
+          task={openTask}
+          open={openTaskId !== null}
+          onOpenChange={(o) => { if (!o) setOpenTaskId(null); }}
+          onDeleted={() => {
+            setCards((prev) => prev.filter((c) => c.taskId !== openTask.id));
+            setOpenTaskId(null);
+          }}
+        />
+      )}
+
+      {/* v9.2.0 — create-task Sheet. Replaces the missing "new task"
+          action that the audit flagged as a HIGH gap. */}
+      <Sheet open={createDraft !== null} onOpenChange={(o) => { if (!o) setCreateDraft(null); }}>
+        <SheetContent side="right" title="New task">
+          {createDraft !== null && (
+            <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
+              <Stack gap={2}>
+                <label htmlFor="task-create-title" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Title</label>
+                <Input
+                  id="task-create-title"
+                  value={createDraft.title}
+                  onChange={(e) => setCreateDraft({ ...createDraft, title: e.target.value })}
+                  placeholder="What needs doing?"
+                  disabled={creating}
+                  data-testid="task-create-title"
+                />
+              </Stack>
+              <Stack gap={2}>
+                <label htmlFor="task-create-desc" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Description (optional)</label>
+                <Textarea
+                  id="task-create-desc"
+                  value={createDraft.description}
+                  onChange={(e) => setCreateDraft({ ...createDraft, description: e.target.value })}
+                  rows={4}
+                  disabled={creating}
+                  data-testid="task-create-desc"
+                />
+              </Stack>
+              <Stack gap={2}>
+                <label htmlFor="task-create-priority" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Priority</label>
+                <select
+                  id="task-create-priority"
+                  value={createDraft.priority}
+                  onChange={(e) => setCreateDraft({ ...createDraft, priority: e.target.value as typeof createDraft.priority })}
+                  disabled={creating}
+                  data-testid="task-create-priority"
+                  style={{ height: 32, padding: '0 var(--space-2)', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border)', background: 'var(--surface-0)', color: 'var(--fg)', fontSize: 'var(--fs-13)' }}
+                >
+                  <option value="low">Low</option>
+                  <option value="medium">Medium</option>
+                  <option value="high">High</option>
+                  <option value="urgent">Urgent</option>
+                </select>
+              </Stack>
+              <Inline gap={2}>
+                <Button variant="primary" onClick={() => { void saveCreate(); }} disabled={creating || !createDraft.title.trim()} data-testid="task-create-submit">
+                  Create task
+                </Button>
+                <Button variant="ghost" onClick={() => setCreateDraft(null)} disabled={creating}>
+                  Cancel
+                </Button>
+              </Inline>
+            </Stack>
+          )}
+        </SheetContent>
+      </Sheet>
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/views/Update/UpdateView.tsx

@@ -0,0 +1,270 @@
+/**
+ * v8/views/Update/UpdateView.tsx — Sprint S42, v9.3.0.
+ *
+ * Package update status + Check + Apply:
+ *  - GET  /api/updates/status — installed versions
+ *  - GET  /api/updates/check  — installed + latest + hasUpdates
+ *  - POST /api/updates/apply  — kick install, streams via
+ *    `update:progress` / `update:log` / `update:complete` WS events.
+ *
+ * Per-package Apply (inline-confirm) + global Apply All button. Live
+ * progress list rendered from a useWsMessage subscription.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Package, RefreshCcw, Download, CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+import { Stack } from '../../ui/primitives/Stack.js';
+import { Inline } from '../../ui/primitives/Inline.js';
+import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { useFetch } from '../../data/useFetch.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface UpdateEntry {
+  id: string;
+  installed?: string;
+  latest?: string | null;
+  hasUpdate?: boolean;
+  label?: string;
+}
+
+interface StatusResponse {
+  packages: UpdateEntry[];
+}
+
+interface CheckResponse {
+  packages: UpdateEntry[];
+  hasUpdates?: boolean;
+}
+
+interface ProgressEvent {
+  type: 'update:progress' | 'update:log' | 'update:complete';
+  pkg?: string;
+  status?: string;
+  line?: string;
+  newVersion?: string;
+  error?: string;
+}
+
+export function UpdateView(): JSX.Element {
+  const statusPayload = useFetch<StatusResponse>('/api/updates/status');
+  const [check, setCheck] = useState<CheckResponse | null>(null);
+  const [checking, setChecking] = useState<boolean>(false);
+  const [applying, setApplying] = useState<boolean>(false);
+  const [confirmApply, setConfirmApply] = useState<string | null>(null);
+  const [log, setLog] = useState<ProgressEvent[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  const installed = useMemo<UpdateEntry[]>(() => statusPayload.data?.packages ?? [], [statusPayload.data]);
+  const refresh = useCallback(() => { void statusPayload.refetch(); }, [statusPayload]);
+
+  // Subscribe to live progress events. `msg.type` is the discriminator
+  // (e.g. 'update:progress'); spreading first then narrowing via the
+  // cast avoids the TS2783 duplicate-key error we'd hit if we tried to
+  // also set `type: 'update:progress'` literally.
+  useWsMessage('update:progress', (msg) => {
+    setLog((l) => [...l, { ...msg, type: 'update:progress' } as ProgressEvent]);
+  });
+  useWsMessage('update:log', (msg) => {
+    setLog((l) => [...l, { ...msg, type: 'update:log' } as ProgressEvent]);
+  });
+  useWsMessage('update:complete', (msg) => {
+    setLog((l) => [...l, { ...msg, type: 'update:complete' } as ProgressEvent]);
+    setApplying(false);
+    refresh();
+  });
+
+  const runCheck = async (): Promise<void> => {
+    setChecking(true);
+    setError(null);
+    try {
+      const r = await fetchJson<CheckResponse>('/api/updates/check');
+      setCheck(r);
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const apply = async (ids: string[]): Promise<void> => {
+    setApplying(true);
+    setError(null);
+    setConfirmApply(null);
+    try {
+      await fetchJson('/api/updates/apply', { method: 'POST', body: { packages: ids } });
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+      setApplying(false);
+    }
+  };
+
+  const rows: UpdateEntry[] = check?.packages ?? installed.map((p) => ({ ...p, hasUpdate: false }));
+
+  return (
+    <Stack gap={4} data-testid="update-view">
+      <ViewHeader
+        title="Update"
+        description="Bizar package updates. Apply restarts on next launch."
+        actions={
+          <Inline align="center" gap={2}>
+            {error !== null && (
+              <span role="alert" data-testid="update-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>
+                {error}
+              </span>
+            )}
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="update-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="ghost" onClick={() => void runCheck()} disabled={checking} data-testid="update-check">
+              <Download size={14} aria-hidden /> {checking ? 'Checking…' : 'Check'}
+            </Button>
+            <Button
+              variant="primary"
+              onClick={() => setConfirmApply('all')}
+              disabled={applying || !(check?.hasUpdates ?? false)}
+              data-testid="update-apply-all"
+            >
+              <Package size={14} aria-hidden /> Apply all
+            </Button>
+          </Inline>
+        }
+      />
+
+      <Card variant="default">
+        <CardBody>
+          {statusPayload.loading && rows.length === 0 ? (
+            <Stack gap={1}>
+              <Skeleton style={{ height: 40 }} />
+              <Skeleton style={{ height: 40 }} />
+              <Skeleton style={{ height: 40 }} />
+            </Stack>
+          ) : rows.length === 0 ? (
+            <EmptyState icon={<Package size={28} aria-hidden />} title="No packages" description="Update status endpoint returned no packages." />
+          ) : (
+            <Stack gap={1}>
+              {rows.map((p) => {
+                const isConfirming = confirmApply === p.id;
+                return (
+                  <div
+                    key={p.id}
+                    data-testid={`update-row-${p.id}`}
+                    style={{
+                      padding: 'var(--space-2)',
+                      border: '1px solid var(--border)',
+                      borderRadius: 'var(--radius-sm)',
+                      background: 'var(--surface-0)',
+                    }}
+                  >
+                    <Inline align="center" justify="between" gap={2}>
+                      <Stack gap={0}>
+                        <Inline align="center" gap={2}>
+                          <strong>{p.label || p.id}</strong>
+                          <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{p.id}</code>
+                        </Inline>
+                        <Inline align="center" gap={2}>
+                          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                            installed: <code>{p.installed ?? '?'}</code>
+                          </span>
+                          {p.latest !== undefined && p.latest !== null && (
+                            <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                              latest: <code>{p.latest}</code>
+                            </span>
+                          )}
+                          {p.hasUpdate && (
+                            <span data-testid={`update-available-${p.id}`} style={{ fontSize: 'var(--fs-11)', color: 'var(--accent)', fontWeight: 600 }}>
+                              UPDATE AVAILABLE
+                            </span>
+                          )}
+                        </Inline>
+                      </Stack>
+                      <Inline gap={1}>
+                        {p.hasUpdate && (
+                          <Button
+                            variant="ghost"
+                            onClick={() => setConfirmApply((cur) => (cur === p.id ? null : p.id))}
+                            data-testid={`update-apply-${p.id}`}
+                            disabled={applying}
+                          >
+                            Apply
+                          </Button>
+                        )}
+                      </Inline>
+                    </Inline>
+                    {isConfirming && (
+                      <Inline gap={1} style={{ marginTop: 'var(--space-1)' }}>
+                        <Button variant="primary" onClick={() => void apply([p.id])} data-testid={`update-confirm-apply-${p.id}`}>
+                          Confirm apply
+                        </Button>
+                        <Button variant="ghost" onClick={() => setConfirmApply(null)}>Cancel</Button>
+                      </Inline>
+                    )}
+                  </div>
+                );
+              })}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+
+      {confirmApply === 'all' && (
+        <Card variant="default">
+          <CardBody>
+            <Stack gap={2}>
+              <strong>Apply all updates?</strong>
+              <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                {rows.filter((p) => p.hasUpdate).length} package(s) will update on next launch.
+              </span>
+              <Inline gap={1}>
+                <Button variant="primary" onClick={() => void apply(rows.filter((p) => p.hasUpdate).map((p) => p.id))} data-testid="update-confirm-apply-all">
+                  Confirm apply all
+                </Button>
+                <Button variant="ghost" onClick={() => setConfirmApply(null)}>Cancel</Button>
+              </Inline>
+            </Stack>
+          </CardBody>
+        </Card>
+      )}
+
+      {log.length > 0 && (
+        <Card variant="default">
+          <CardBody>
+            <strong style={{ fontSize: 'var(--fs-13)' }}>Progress</strong>
+            <div
+              data-testid="update-log"
+              style={{
+                marginTop: 'var(--space-2)',
+                padding: 'var(--space-2)',
+                background: 'var(--surface-1)',
+                borderRadius: 'var(--radius-sm)',
+                fontFamily: 'var(--font-mono)',
+                fontSize: 'var(--fs-12)',
+                maxHeight: 240,
+                overflow: 'auto',
+              }}
+            >
+              {log.slice(-100).map((l, i) => (
+                <div key={i} style={{ color: l.error ? 'var(--danger)' : l.status === 'done' ? 'var(--success)' : 'var(--fg)' }}>
+                  {l.type === 'update:complete' ? (
+                    <Inline align="center" gap={1}><CheckCircle2 size={12} aria-hidden style={{ color: 'var(--success)' }} /> complete</Inline>
+                  ) : l.error ? (
+                    <Inline align="center" gap={1}><AlertCircle size={12} aria-hidden style={{ color: 'var(--danger)' }} /> {l.pkg ?? '?'} · {l.error}</Inline>
+                  ) : (
+                    <Inline align="center" gap={1}>
+                      {l.status === 'installing' ? <Loader2 size={12} aria-hidden style={{ animation: 'spin 1s linear infinite' }} /> : null}
+                      {l.pkg ?? '?'} · {l.status ?? l.line ?? ''}
+                    </Inline>
+                  )}
+                </div>
+              ))}
+            </div>
+          </CardBody>
+        </Card>
+      )}
+    </Stack>
+  );
+}