@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/views/Agents/AgentsView.tsx

@@ -3,14 +3,51 @@ import { Stack } from '../../ui/primitives/Stack.js';
 import { Inline } from '../../ui/primitives/Inline.js';
 import { Grid } from '../../ui/primitives/Grid.js';
 import { ViewHeader } from '../../ui/data/ViewHeader.js';
+import { ListHeader } from '../../ui/data/ListHeader.js';
 import { AgentCard, type AgentCardProps, type AgentStatus } from '../../ui/agents/AgentCard.js';
 import { AgentDetail } from '../../ui/agents/AgentDetail.js';
 import { Chip } from '../../ui/data/Chip.js';
+import { Banner } from '../../ui/feedback/Banner.js';
 import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { ErrorState } from '../../ui/feedback/ErrorState.js';
+import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
+import { Input } from '../../ui/controls/Input.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Badge } from '../../ui/data/Badge.js';
 import { useFetch } from '../../data/useFetch.js';
 import { useWsMessage } from '../../data/useWebSocket.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
 import type { BizarAgent, CCAgent, WsMessage } from '../../data/types.js';
-import { Bot, Cpu } from 'lucide-react';
+import { AlertTriangle, Bot, Cpu, Pause, Play, Plus, RotateCw } from 'lucide-react';
+import { AgentHierarchy } from './AgentHierarchy.js';
+
+const SOURCE_STORAGE_KEY = 'bizar.agents.sourceFilter';
+const SOURCE_LABELS = {
+  all: 'All',
+  bizar: 'Bizar',
+  'claude-code': 'Claude Code',
+} as const;
+type SourceFilter = keyof typeof SOURCE_LABELS;
+const VALID_SOURCES = Object.keys(SOURCE_LABELS) as SourceFilter[];
+
+function readPersistedSource(): SourceFilter {
+  if (typeof localStorage === 'undefined') return 'all';
+  const v = localStorage.getItem(SOURCE_STORAGE_KEY);
+  return VALID_SOURCES.includes(v as SourceFilter) ? (v as SourceFilter) : 'all';
+}
+
+/** relativeTimeMs — "12s", "3m", "2h", "5d". Returns "—" for missing/future timestamps. */
+function relativeTimeMs(ms: number): string {
+  if (!Number.isFinite(ms) || ms <= 0) return '—';
+  const delta = Math.max(0, Date.now() - ms);
+  const sec = Math.floor(delta / 1000);
+  if (sec < 60) return `${sec}s ago`;
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  return `${Math.floor(hr / 24)}d ago`;
+}
 
 /**
  * AgentsView — Sprint S10. Unified Bizar + Claude Code agents.
@@ -21,13 +58,6 @@ import { Bot, Cpu } from 'lucide-react';
  * via `agents:change` and `agent:status` WS events.
  */
 
-const SOURCE_LABELS = {
-  all: 'All',
-  bizar: 'Bizar',
-  'claude-code': 'Claude Code',
-} as const;
-type SourceFilter = keyof typeof SOURCE_LABELS;
-
 function mapBizar(a: BizarAgent): AgentCardProps {
   const raw = (a.status || 'idle').toLowerCase();
   const status: AgentStatus =
@@ -42,7 +72,13 @@ function mapBizar(a: BizarAgent): AgentCardProps {
     currentTask: a.currentTaskId ? `Task ${a.currentTaskId}` : undefined,
     lastActivity: a.lastSeen ? new Date(a.lastSeen).toLocaleTimeString() : undefined,
     tasksToday: a.tasksTotal || 0,
-    tpmHistory: [],
+    // v9.4.0 — pass real metrics for the new AgentCard strip. The old
+    // `tpmHistory` field was dead because AgentCard only renders the
+    // sparkline when `length > 1` and we always passed a single point.
+    tasksSucceeded: typeof a.tasksSucceeded === 'number' ? a.tasksSucceeded : undefined,
+    tasksTotal: typeof a.tasksTotal === 'number' ? a.tasksTotal : undefined,
+    successRate: typeof a.successRate === 'number' ? a.successRate : undefined,
+    lastSeenMs: typeof a.lastSeen === 'number' && a.lastSeen > 0 ? a.lastSeen : undefined,
     badges: a.tags || [],
   };
 }
@@ -61,7 +97,9 @@ function mapCC(a: CCAgent): AgentCardProps {
     currentTask: a.lastMessageSnippet || undefined,
     lastActivity: a.lastMessageAt ? new Date(a.lastMessageAt).toLocaleTimeString() : (a.startedAt ? new Date(a.startedAt).toLocaleTimeString() : undefined),
     tasksToday: a.messageCount || 0,
-    tpmHistory: [],
+    // CC agents don't expose successRate/tasksSucceeded — only messageCount.
+    // Skip the metric strip for them; the badge + lastActivity carry the
+    // signal.
     badges: [a.cwd?.split('/').slice(-2).join('/') || ''].filter(Boolean),
   };
 }
@@ -69,11 +107,107 @@ function mapCC(a: CCAgent): AgentCardProps {
 export function AgentsView(): JSX.Element {
   const bizar = useFetch<{ agents?: BizarAgent[] }>('/api/agents');
   const cc = useFetch<{ agents?: CCAgent[]; error?: string }>('/api/cc-agents');
-  const [source, setSource] = useState<SourceFilter>('all');
+  const stuck = useFetch<{ stuck?: BizarAgent[] }>('/api/agents/stuck');
+  const [source, setSource] = useState<SourceFilter>(readPersistedSource);
+  const [mode, setMode] = useState<'roster' | 'hierarchy'>('roster');
+  useEffect(() => {
+    if (typeof localStorage !== 'undefined') localStorage.setItem(SOURCE_STORAGE_KEY, source);
+  }, [source]);
   const [bizarList, setBizarList] = useState<BizarAgent[]>([]);
   const [ccList, setCCList] = useState<CCAgent[]>([]);
   const [initialized, setInitialized] = useState(false);
   const [openId, setOpenId] = useState<string | null>(null);
+  const [createDraft, setCreateDraft] = useState<{ name: string; role: string } | null>(null);
+  const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
+  const [restartingNames, setRestartingNames] = useState<Set<string>>(() => new Set());
+
+  const saveCreate = async (): Promise<void> => {
+    if (createDraft === null || !createDraft.name.trim()) return;
+    setCreating(true);
+    setCreateError(null);
+    try {
+      await fetchJson('/api/agents', { method: 'POST', body: { name: createDraft.name.trim(), role: createDraft.role.trim() || 'agent' } });
+      setCreateDraft(null);
+      bizar.refetch();
+    } catch (err) {
+      setCreateError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  // v9.5.0 S48 — inline Restart from the stuck banner. One-click recovery
+  // without forcing the user to drill into the per-agent Sheet. The
+  // server broadcasts agents:change on success so the banner refreshes.
+  const restartStuck = async (name: string): Promise<void> => {
+    setRestartingNames((prev) => new Set(prev).add(name));
+    try {
+      await fetchJson(`/api/agents/${encodeURIComponent(name)}/restart`, { method: 'POST' });
+      stuck.refetch();
+      bizar.refetch();
+    } catch (err) {
+      setCreateError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setRestartingNames((prev) => {
+        const next = new Set(prev);
+        next.delete(name);
+        return next;
+      });
+    }
+  };
+
+  // v10-S1 — inline Pause/Resume on the stuck banner. Pause stops
+  // heartbeat drain (status='paused'); Resume re-enables
+  // (status='idle' so Odin picks the agent up again on the next
+  // spawn). Uses the same in-flight Set pattern as restartStuck so
+  // all three actions disable each other per-row while pending.
+  const [busyStuckNames, setBusyStuckNames] = useState<Set<string>>(() => new Set());
+  const setStuckActionStatus = async (name: string, status: 'paused' | 'idle'): Promise<void> => {
+    setBusyStuckNames((prev) => new Set(prev).add(name));
+    try {
+      await fetchJson(`/api/agents/${encodeURIComponent(name)}/status`, {
+        method: 'POST',
+        body: { status },
+      });
+      stuck.refetch();
+      bizar.refetch();
+    } catch (err) {
+      setCreateError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusyStuckNames((prev) => {
+        const next = new Set(prev);
+        next.delete(name);
+        return next;
+      });
+    }
+  };
+
+  // v10-S1 — bulk Pause-all-stuck. Fires status='paused' for every
+  // agent currently in /api/agents/stuck. Used when a wedged cluster
+  // needs to be drained before restart. Per-row actions are still
+  // available for selective triage.
+  const [bulkBusy, setBulkBusy] = useState<boolean>(false);
+  const bulkPauseStuck = async (): Promise<void> => {
+    const list = stuck.data?.stuck ?? [];
+    if (list.length === 0) return;
+    setBulkBusy(true);
+    try {
+      await Promise.all(list.map((a) =>
+        fetchJson(`/api/agents/${encodeURIComponent(a.name)}/status`, {
+          method: 'POST',
+          body: { status: 'paused' },
+        }).catch((err) => {
+          setCreateError(err instanceof FetchError ? err.message : (err as Error).message);
+          return null;
+        }),
+      ));
+      stuck.refetch();
+      bizar.refetch();
+    } finally {
+      setBulkBusy(false);
+    }
+  };
 
   useEffect(() => {
     if (!initialized && bizar.data?.agents !== undefined && cc.data?.agents !== undefined) {
@@ -117,29 +251,153 @@ export function AgentsView(): JSX.Element {
   }, [bizarList, ccList, source]);
 
   return (
-    <Stack gap={5}>
+    <Stack gap={5} data-testid="agents-view">
       <ViewHeader
         title="Agents"
         description="Bizar agents (frontmatter-driven) and Claude Code background agents."
+        actions={
+          <Button variant="primary" onClick={() => setCreateDraft({ name: '', role: '' })} data-testid="agent-create-open">
+            <Plus size={14} aria-hidden /> New agent
+          </Button>
+        }
+      />
+      <ListHeader
+        title="Roster"
+        count={cards.length}
+        description={stuck.data?.stuck && stuck.data.stuck.length > 0 ? `${stuck.data.stuck.length} stuck` : undefined}
+        testid="agents-list-header"
       />
-      <Inline gap={2}>
-        {(['all', 'bizar', 'claude-code'] as SourceFilter[]).map((id) => (
+      {(stuck.data?.stuck ?? []).length > 0 && (
+        <Banner
+          tone="warning"
+          data-testid="agents-stuck-banner"
+          action={
+            <Inline gap={2}>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => { void bulkPauseStuck(); }}
+                disabled={bulkBusy}
+                data-testid="agents-stuck-bulk-pause"
+                title="Pause every stuck agent at once"
+              >
+                <Pause size={12} aria-hidden /> {bulkBusy ? 'Pausing…' : 'Pause all'}
+              </Button>
+              <Button variant="secondary" size="sm" onClick={() => setMode('hierarchy')}>
+                View details
+              </Button>
+            </Inline>
+          }
+        >
+          <Stack gap={2}>
+            <Inline align="center" gap={2}>
+              <AlertTriangle size={14} aria-hidden style={{ color: 'var(--warning)' }} />
+              <span>
+                {(stuck.data?.stuck ?? []).length} agent{stuck.data && stuck.data.stuck && stuck.data.stuck.length === 1 ? '' : 's'} stuck (no heartbeat &gt;5m)
+              </span>
+            </Inline>
+            <Stack gap={1}>
+              {(stuck.data?.stuck ?? []).map((s) => {
+                const restarting = restartingNames.has(s.name);
+                const paused = s.status === 'paused';
+                const busy = restarting || busyStuckNames.has(s.name);
+                return (
+                  <Inline key={s.name} align="center" justify="between" gap={2} data-testid={`agents-stuck-row-${s.name}`}>
+                    <Inline gap={2} align="center">
+                      <code style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)' }}>{s.name}</code>
+                      <Badge tone={paused ? 'warning' : 'danger'}>{paused ? 'paused' : (s.status || 'stuck')}</Badge>
+                      {typeof s.lastSeen === 'number' && s.lastSeen > 0 && (
+                        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                          last seen {relativeTimeMs(s.lastSeen)}
+                        </span>
+                      )}
+                    </Inline>
+                    <Inline gap={1}>
+                      {paused ? (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          disabled={busy}
+                          onClick={() => { void setStuckActionStatus(s.name, 'idle'); }}
+                          data-testid={`agents-stuck-resume-${s.name}`}
+                        >
+                          <Play size={12} aria-hidden /> Resume
+                        </Button>
+                      ) : (
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          disabled={busy}
+                          onClick={() => { void setStuckActionStatus(s.name, 'paused'); }}
+                          data-testid={`agents-stuck-pause-${s.name}`}
+                        >
+                          <Pause size={12} aria-hidden /> Pause
+                        </Button>
+                      )}
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        disabled={busy}
+                        onClick={() => { void restartStuck(s.name); }}
+                        data-testid={`agents-stuck-restart-${s.name}`}
+                      >
+                        <RotateCw size={12} aria-hidden /> {restarting ? 'Restarting…' : 'Restart'}
+                      </Button>
+                    </Inline>
+                  </Inline>
+                );
+              })}
+            </Stack>
+          </Stack>
+        </Banner>
+      )}
+      <Inline align="center" justify="between" wrap gap={2}>
+        <Inline gap={2}>
+          {(['all', 'bizar', 'claude-code'] as SourceFilter[]).map((id) => (
+            <Chip
+              key={id}
+              selected={source === id}
+              onClick={() => setSource(id)}
+            >
+              {id === 'bizar' ? <Bot size={12} aria-hidden /> : id === 'claude-code' ? <Cpu size={12} aria-hidden /> : null}{' '}
+              {SOURCE_LABELS[id]}
+            </Chip>
+          ))}
+        </Inline>
+        <Inline gap={2}>
           <Chip
-            key={id}
-            selected={source === id}
-            onClick={() => setSource(id)}
+            data-testid="agents-mode-roster"
+            selected={mode === 'roster'}
+            onClick={() => setMode('roster')}
           >
-            {id === 'bizar' ? <Bot size={12} aria-hidden /> : id === 'claude-code' ? <Cpu size={12} aria-hidden /> : null}{' '}
-            {SOURCE_LABELS[id]}
+            Roster
           </Chip>
-        ))}
+          <Chip
+            data-testid="agents-mode-hierarchy"
+            selected={mode === 'hierarchy'}
+            onClick={() => setMode('hierarchy')}
+          >
+            Hierarchy
+          </Chip>
+        </Inline>
       </Inline>
-      {cards.length === 0 && (bizar.loading || cc.loading) ? (
+      {mode === 'hierarchy' ? (
+        <AgentHierarchy />
+      ) : cards.length === 0 && (bizar.loading || cc.loading) ? (
         <Grid cols={3}>
           <Skeleton style={{ height: 140 }} />
           <Skeleton style={{ height: 140 }} />
           <Skeleton style={{ height: 140 }} />
         </Grid>
+      ) : cards.length === 0 && (bizar.error || cc.error) ? (
+        <ErrorState
+          block
+          title="Couldn't load agents"
+          description="Both bizar and CC roster endpoints failed. Retry to refetch."
+          error={bizar.error ?? cc.error}
+          onRetry={() => { void bizar.refetch(); void cc.refetch(); }}
+          testid="agents-error"
+        />
       ) : cards.length === 0 ? (
         <span style={{ color: 'var(--fg-muted)' }}>
           No agents yet. Run <code>/loop</code> or spawn one via the command palette.
@@ -155,6 +413,8 @@ export function AgentsView(): JSX.Element {
       {openId !== null && (() => {
         const sel = cards.find((c) => c.id === openId);
         if (!sel) return null;
+        const ccSource = sel.source === 'claude-code' ? ccList.find((a) => sel.id === `cc:${a.sessionId || a.id}`) : undefined;
+        const bzSource = sel.source === 'bizar' ? bizarList.find((a) => sel.id === `bizar:${a.name}`) : undefined;
         return (
           <AgentDetail
             agentId={sel.id}
@@ -162,11 +422,58 @@ export function AgentsView(): JSX.Element {
             role={sel.role}
             status={sel.status}
             currentTask={sel.currentTask}
+            startedAt={ccSource?.startedAt ?? bzSource?.lastSeen}
+            messageCount={ccSource?.messageCount}
+            lastMessageSnippet={ccSource?.lastMessageSnippet}
+            successRate={bzSource?.successRate}
+            tasksTotal={bzSource?.tasksTotal}
             open={openId !== null}
             onOpenChange={(o) => { if (!o) setOpenId(null); }}
           />
         );
       })()}
+
+      {/* v9.2.0 — create-agent Sheet. Closes the audit-flagged "no way
+          to add a new agent" HIGH gap. */}
+      <Sheet open={createDraft !== null} onOpenChange={(o) => { if (!o) setCreateDraft(null); }}>
+        <SheetContent side="right" title="New agent">
+          {createDraft !== null && (
+            <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
+              <Stack gap={2}>
+                <label htmlFor="agent-create-name" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Name</label>
+                <Input
+                  id="agent-create-name"
+                  value={createDraft.name}
+                  onChange={(e) => setCreateDraft({ ...createDraft, name: e.target.value })}
+                  placeholder="e.g. frigg"
+                  disabled={creating}
+                  data-testid="agent-create-name"
+                />
+              </Stack>
+              <Stack gap={2}>
+                <label htmlFor="agent-create-role" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Role (optional)</label>
+                <Input
+                  id="agent-create-role"
+                  value={createDraft.role}
+                  onChange={(e) => setCreateDraft({ ...createDraft, role: e.target.value })}
+                  placeholder="e.g. code-review"
+                  disabled={creating}
+                  data-testid="agent-create-role"
+                />
+              </Stack>
+              {createError !== null && <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{createError}</span>}
+              <Inline gap={2}>
+                <Button variant="primary" onClick={() => { void saveCreate(); }} disabled={creating || !createDraft.name.trim()} data-testid="agent-create-submit">
+                  Create agent
+                </Button>
+                <Button variant="ghost" onClick={() => setCreateDraft(null)} disabled={creating}>
+                  Cancel
+                </Button>
+              </Inline>
+            </Stack>
+          )}
+        </SheetContent>
+      </Sheet>
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/views/Artifacts/ArtifactsView.tsx

@@ -0,0 +1,241 @@
+/**
+ * v8/views/Artifacts/ArtifactsView.tsx — Sprint S43, v9.3.0.
+ *
+ * Artifacts list (GET /api/artifacts) with per-row open-to-detail
+ * (right-hand Sheet using GET /api/artifacts/:slug + /render) and
+ * inline-confirm Delete (DELETE /api/artifacts/:slug). Add Sheet
+ * posts a new artifact (POST /api/artifacts {slug, ...}).
+ */
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Layers, Plus, Trash2, RefreshCcw, FileCode, ExternalLink } 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 { Input } from '../../ui/controls/Input.js';
+import { Textarea } from '../../ui/controls/Textarea.js';
+import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { EmptyState } from '../../ui/feedback/EmptyState.js';
+import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+
+interface Artifact {
+  slug: string;
+  title?: string;
+  kind?: string;
+  description?: string;
+  createdAt?: string | number;
+  updatedAt?: string | number;
+  planMdx?: string;
+  frontmatter?: Record<string, unknown>;
+}
+
+export function ArtifactsView(): JSX.Element {
+  const payload = useFetch<{ artifacts: Artifact[] }>('/api/artifacts');
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+  const [adding, setAdding] = useState<boolean>(false);
+  const [activeSlug, setActiveSlug] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const artifacts = useMemo<Artifact[]>(() => payload.data?.artifacts ?? [], [payload.data]);
+  const refresh = useCallback(() => { void payload.refetch(); }, [payload]);
+
+  const drop = async (slug: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/artifacts/${slug}`, { method: 'DELETE' });
+      setConfirmDelete(null);
+      if (activeSlug === slug) setActiveSlug(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  return (
+    <Stack gap={4} data-testid="artifacts-view">
+      <ViewHeader
+        title="Artifacts"
+        description="Generated artifacts (plans, diagrams, canvases)."
+        actions={
+          <Inline align="center" gap={2}>
+            {error !== null && (
+              <span role="alert" data-testid="artifacts-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>
+            )}
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="artifacts-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="primary" onClick={() => setAdding(true)} data-testid="artifacts-add">
+              <Plus size={14} aria-hidden /> Add
+            </Button>
+          </Inline>
+        }
+      />
+
+      <Card variant="default">
+        <CardBody>
+          {payload.loading && artifacts.length === 0 ? (
+            <Stack gap={1}>
+              <Skeleton style={{ height: 48 }} />
+              <Skeleton style={{ height: 48 }} />
+            </Stack>
+          ) : artifacts.length === 0 ? (
+            <EmptyState icon={<Layers size={28} aria-hidden />} title="No artifacts" description="Create one to get started." />
+          ) : (
+            <Stack gap={1}>
+              {artifacts.map((a) => {
+                const isConfirming = confirmDelete === a.slug;
+                return (
+                  <div
+                    key={a.slug}
+                    data-testid={`artifact-row-${a.slug}`}
+                    style={{ padding: 'var(--space-2)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)' }}
+                  >
+                    <Inline align="center" justify="between" gap={2}>
+                      <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>
+                        <Inline align="center" gap={2}>
+                          <FileCode size={12} aria-hidden style={{ color: 'var(--fg-muted)' }} />
+                          <strong style={{ fontSize: 'var(--fs-13)' }}>{a.title || a.slug}</strong>
+                          <code style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{a.slug}</code>
+                          {a.kind && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-muted)' }}>· {a.kind}</span>}
+                        </Inline>
+                        {a.description && <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{a.description}</span>}
+                      </Stack>
+                      <Inline gap={1}>
+                        <Button variant="ghost" onClick={() => setActiveSlug((cur) => (cur === a.slug ? null : a.slug))} data-testid={`artifact-open-${a.slug}`} aria-label={`Open ${a.slug}`}>
+                          <ExternalLink size={14} aria-hidden /> Open
+                        </Button>
+                        <Button variant="ghost" onClick={() => setConfirmDelete((cur) => (cur === a.slug ? null : a.slug))} data-testid={`artifact-delete-${a.slug}`} aria-label={`Delete ${a.slug}`}>
+                          <Trash2 size={14} aria-hidden />
+                        </Button>
+                      </Inline>
+                    </Inline>
+                    {isConfirming && (
+                      <Inline gap={1} style={{ marginTop: 'var(--space-1)' }}>
+                        <Button variant="danger" onClick={() => void drop(a.slug)} data-testid={`artifact-confirm-delete-${a.slug}`}>
+                          Confirm delete
+                        </Button>
+                        <Button variant="ghost" onClick={() => setConfirmDelete(null)}>Cancel</Button>
+                      </Inline>
+                    )}
+                  </div>
+                );
+              })}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+
+      <Sheet open={adding} onOpenChange={setAdding}>
+        <SheetContent side="right" title="Add artifact" description="Slug + title + initial MDX.">
+          <AddForm
+            onSubmit={async (body) => {
+              await fetchJson('/api/artifacts', { method: 'POST', body });
+              setAdding(false);
+              refresh();
+            }}
+            onCancel={() => setAdding(false)}
+          />
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={activeSlug !== null} onOpenChange={(open) => { if (!open) setActiveSlug(null); }}>
+        <SheetContent side="right" title={activeSlug ?? ''} description="Artifact detail">
+          {activeSlug !== null && <ArtifactDetail slug={activeSlug} />}
+        </SheetContent>
+      </Sheet>
+    </Stack>
+  );
+}
+
+function AddForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (body: { slug: string; title?: string; description?: string; planMdx?: string; frontmatter?: Record<string, unknown> }) => Promise<void>;
+  onCancel: () => void;
+}): JSX.Element {
+  const [slug, setSlug] = useState<string>('');
+  const [title, setTitle] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+  const [planMdx, setPlanMdx] = useState<string>('');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  return (
+    <Stack gap={3} style={{ padding: 'var(--space-4)' }}>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Slug</span>
+        <Input value={slug} onChange={(e) => setSlug((e.target as HTMLInputElement).value)} data-testid="artifact-form-slug" />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Title</span>
+        <Input value={title} onChange={(e) => setTitle((e.target as HTMLInputElement).value)} data-testid="artifact-form-title" />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Description</span>
+        <Input value={description} onChange={(e) => setDescription((e.target as HTMLInputElement).value)} data-testid="artifact-form-description" />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Plan MDX</span>
+        <Textarea value={planMdx} rows={6} onChange={(e) => setPlanMdx((e.target as HTMLTextAreaElement).value)} data-testid="artifact-form-mdx" />
+      </label>
+      {error !== null && <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>}
+      <Inline justify="end" gap={2}>
+        <Button variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button
+          variant="primary"
+          disabled={busy || !slug.trim()}
+          data-testid="artifact-form-submit"
+          onClick={async () => {
+            setBusy(true);
+            setError(null);
+            try {
+              await onSubmit({ slug: slug.trim(), title: title.trim() || undefined, description: description.trim() || undefined, planMdx: planMdx || undefined });
+            } catch (err) {
+              setError(err instanceof FetchError ? err.message : (err as Error).message);
+              setBusy(false);
+            }
+          }}
+        >
+          {busy ? 'Creating…' : 'Create'}
+        </Button>
+      </Inline>
+    </Stack>
+  );
+}
+
+function ArtifactDetail({ slug }: { slug: string }): JSX.Element {
+  const payload = useFetch<Artifact>(`/api/artifacts/${slug}`);
+  const renderPayload = useFetch<{ blocks?: unknown[]; frontmatter?: Record<string, unknown> }>(`/api/artifacts/${slug}/render`);
+  return (
+    <Stack gap={2} style={{ padding: 'var(--space-4)' }}>
+      {payload.loading && !payload.data ? (
+        <Skeleton style={{ height: 80 }} />
+      ) : payload.data ? (
+        <Stack gap={2}>
+          <strong>{payload.data.title || payload.data.slug}</strong>
+          {payload.data.description && <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{payload.data.description}</span>}
+          {payload.data.frontmatter && (
+            <div data-testid={`artifact-frontmatter-${slug}`} style={{ padding: 'var(--space-2)', background: 'var(--surface-1)', borderRadius: 'var(--radius-sm)' }}>
+              <pre style={{ margin: 0, fontSize: 'var(--fs-11)', fontFamily: 'var(--font-mono)' }}>{JSON.stringify(payload.data.frontmatter, null, 2)}</pre>
+            </div>
+          )}
+          {payload.data.planMdx && (
+            <pre data-testid={`artifact-mdx-${slug}`} style={{ padding: 'var(--space-2)', background: 'var(--surface-1)', borderRadius: 'var(--radius-sm)', fontSize: 'var(--fs-11)', maxHeight: 240, overflow: 'auto', fontFamily: 'var(--font-mono)' }}>{payload.data.planMdx}</pre>
+          )}
+          {renderPayload.data && (
+            <span data-testid={`artifact-render-${slug}`} style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+              Render: {Array.isArray(renderPayload.data.blocks) ? `${renderPayload.data.blocks.length} blocks` : 'no blocks'}
+            </span>
+          )}
+        </Stack>
+      ) : (
+        <span role="alert" style={{ color: 'var(--danger)' }}>Not found</span>
+      )}
+    </Stack>
+  );
+}