@polderlabs/bizar 8.1.0 → 9.0.0

package/bizar-dash/src/web/v8/views/Memory/MemoryView.tsx

@@ -1,4 +1,5 @@
 import { 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';
@@ -7,25 +8,34 @@ import { EmptyState } from '../../ui/feedback/EmptyState.js';
 import { Brain } from 'lucide-react';
 import { Skeleton } from '../../ui/feedback/Skeleton.js';
 import { Chip } from '../../ui/data/Chip.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
+import { Textarea } from '../../ui/controls/Textarea.js';
 import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
 
 /**
- * MemoryView — Sprint S10. Pulls `/api/memory` (Bizar memory entries).
- * Click a chip to scope the view (Project / Global / All).
+ * MemoryView — Sprint S10 + S15b. Pulls `/api/memory`, lets the user
+ * create / edit / delete notes via the dashboard's control surface.
+ *
+ * Notes are stored via `/api/memory/notes` (POST create, PUT/DELETE
+ * per-note). Scope is `project` (in the repo) vs `global` (user-wide).
  */
 
+interface RawMemoryEntry {
+  id?: string;
+  content?: string;
+  tags?: string[];
+  scope?: 'project' | 'global';
+  updatedAt?: string | number;
+}
+
 interface MemoryResponse {
-  entries?: Array<{
-    id?: string;
-    content?: string;
-    tags?: string[];
-    scope?: 'project' | 'global';
-    updatedAt?: string | number;
-  }>;
+  notes?: RawMemoryEntry[];
   count?: number;
 }
 
-function toEntry(e: NonNullable<MemoryResponse['entries']>[number]): MemoryEntry {
+function toEntry(e: RawMemoryEntry): MemoryEntry {
   return {
     id: e.id || '',
     content: e.content || '',
@@ -38,40 +48,184 @@ function toEntry(e: NonNullable<MemoryResponse['entries']>[number]): MemoryEntry
   };
 }
 
+interface NoteDraft {
+  id?: string;
+  content: string;
+  scope: MemoryScope;
+}
+
 export function MemoryView(): JSX.Element {
-  const mem = useFetch<MemoryResponse>('/api/memory');
+  const mem = useFetch<MemoryResponse>('/api/memory/notes');
   const [scope, setScope] = useState<MemoryScope | 'all'>('all');
+  const [draft, setDraft] = useState<NoteDraft | null>(null);
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
 
   const entries = useMemo<MemoryEntry[]>(() => {
-    const list = (mem.data?.entries || []).map(toEntry);
+    const list = (mem.data?.notes || []).map(toEntry);
     if (scope === 'all') return list;
     return list.filter((e) => e.scope === scope);
   }, [mem.data, scope]);
 
+  const refresh = (): void => { void mem.refetch(); };
+
+  const saveDraft = async (): Promise<void> => {
+    if (!draft || !draft.content.trim()) return;
+    setBusy(true);
+    setError(null);
+    try {
+      if (draft.id) {
+        // Edit
+        await fetchJson(`/api/memory/notes/${encodeURIComponent(draft.id)}`, {
+          method: 'PUT',
+          body: { content: draft.content, scope: draft.scope },
+        });
+      } else {
+        await fetchJson('/api/memory/notes', {
+          method: 'POST',
+          body: { content: draft.content, scope: draft.scope },
+        });
+      }
+      setDraft(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deleteEntry = async (id: string): Promise<void> => {
+    setBusy(true);
+    setError(null);
+    try {
+      await fetchJson(`/api/memory/notes/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      setDraft(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
   return (
     <Stack gap={5}>
       <ViewHeader
         title="Memory"
         description="Cross-session notes. Project memos live in the repo; global memos live on the user."
       />
-      <Inline gap={2}>
-        {(['all', 'project', 'global'] as const).map((s) => (
-          <Chip key={s} selected={scope === s} onClick={() => setScope(s)}>
-            {s === 'all' ? 'All' : s === 'project' ? 'Project' : 'Global'}
-          </Chip>
-        ))}
+      <Inline align="center" justify="between" gap={2} wrap>
+        <Inline gap={2}>
+          {(['all', 'project', 'global'] as const).map((s) => (
+            <Chip key={s} selected={scope === s} onClick={() => setScope(s)}>
+              {s === 'all' ? 'All' : s === 'project' ? 'Project' : 'Global'}
+            </Chip>
+          ))}
+        </Inline>
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => setDraft({ content: '', scope: 'project' })}
+          data-testid="memory-new"
+        >
+          <Plus size={14} aria-hidden /> New note
+        </Button>
       </Inline>
+      {error !== null && (
+        <div
+          role="alert"
+          style={{
+            padding: 'var(--space-2) var(--space-3)',
+            background: 'color-mix(in oklch, var(--danger) 12%, var(--surface-0))',
+            border: '1px solid color-mix(in oklch, var(--danger) 40%, var(--border))',
+            borderRadius: 'var(--radius-md)',
+            fontSize: 'var(--fs-12)',
+            color: 'var(--danger)',
+          }}
+        >
+          {error}
+        </div>
+      )}
       {mem.loading ? (
         <Skeleton style={{ height: 240 }} />
       ) : entries.length === 0 ? (
         <EmptyState
           icon={<Brain size={32} aria-hidden />}
           title="No memory entries"
-          description="Memos land here once they are written via the memory tools."
+          description="Memos land here once they are written via the memory tools. Add one with the button above."
+          action={
+            <Button variant="primary" size="sm" onClick={() => setDraft({ content: '', scope: 'project' })}>
+              <Plus size={14} aria-hidden /> New note
+            </Button>
+          }
         />
       ) : (
-        <MemoryVault entries={entries} />
+        <MemoryVault
+          entries={entries}
+          onOpen={(e) => setDraft({ id: e.id, content: e.content, scope: e.scope })}
+        />
       )}
+      <Sheet open={draft !== null} onOpenChange={(o) => { if (!o) setDraft(null); }}>
+        <SheetContent side="right" title={draft?.id ? 'Edit note' : 'New note'}>
+          {draft !== null && (
+            <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
+              <Stack gap={2}>
+                <label
+                  htmlFor="memory-content"
+                  style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}
+                >
+                  Content
+                </label>
+                <Textarea
+                  id="memory-content"
+                  value={draft.content}
+                  onChange={(e) => setDraft({ ...draft, content: e.target.value })}
+                  rows={10}
+                  disabled={busy}
+                  data-testid="memory-content"
+                />
+              </Stack>
+              <Stack gap={2}>
+                <label style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Scope</label>
+                <Inline gap={2}>
+                  {(['project', 'global'] as const).map((s) => (
+                    <Chip
+                      key={s}
+                      selected={draft.scope === s}
+                      onClick={() => setDraft({ ...draft, scope: s })}
+                    >
+                      {s === 'project' ? 'Project (in-repo)' : 'Global (user-wide)'}
+                    </Chip>
+                  ))}
+                </Inline>
+              </Stack>
+              <Inline gap={2}>
+                <Button
+                  variant="primary"
+                  onClick={() => { void saveDraft(); }}
+                  disabled={busy || !draft.content.trim()}
+                >
+                  {draft.id ? 'Save' : 'Create'}
+                </Button>
+                <Button variant="ghost" onClick={() => setDraft(null)} disabled={busy}>
+                  Cancel
+                </Button>
+                {draft.id !== undefined && (
+                  <Button
+                    variant="danger"
+                    onClick={() => { void deleteEntry(draft.id!); }}
+                    disabled={busy}
+                    style={{ marginLeft: 'auto' }}
+                  >
+                    Delete
+                  </Button>
+                )}
+              </Inline>
+            </Stack>
+          )}
+        </SheetContent>
+      </Sheet>
     </Stack>
   );
 }

package/bizar-dash/src/web/v8/views/Router.tsx

@@ -36,6 +36,12 @@ const LibrariesView = lazy(() =>
 const SettingsView = lazy(() =>
   import('./Settings/SettingsView.js').then((m) => ({ default: m.SettingsView })),
 );
+const SchedulesView = lazy(() =>
+  import('./Schedules/SchedulesView.js').then((m) => ({ default: m.SchedulesView })),
+);
+const BackgroundJobsView = lazy(() =>
+  import('./BackgroundJobs/BackgroundJobsView.js').then((m) => ({ default: m.BackgroundJobsView })),
+);
 
 // Library surfaces now pull live data inside the view itself.
 // LibraryItemProps is imported so its type stays exported via this
@@ -65,6 +71,10 @@ export function useViewForId(id: string): JSX.Element {
         return <LibrariesView kind="hooks" />;
       case 'settings':
         return <SettingsView />;
+      case 'schedules':
+        return <SchedulesView />;
+      case 'background':
+        return <BackgroundJobsView />;
       default:
         return <OverviewView />;
     }

package/bizar-dash/src/web/v8/views/Schedules/SchedulesView.tsx

@@ -0,0 +1,395 @@
+import { useCallback, useMemo, useState } from 'react';
+import { Plus, Play, Power, Trash2, RefreshCw, Clock, type LucideIcon } from 'lucide-react';
+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 { Badge } from '../../ui/data/Badge.js';
+import { Card, CardBody } from '../../ui/data/Card.js';
+import { Skeleton } from '../../ui/feedback/Skeleton.js';
+import { Button } from '../../ui/controls/Button.js';
+import { Switch } from '../../ui/controls/Switch.js';
+import { Textarea } from '../../ui/controls/Textarea.js';
+import { Sheet, SheetContent } from '../../ui/feedback/Sheet.js';
+import { Input } from '../../ui/controls/Input.js';
+import { useFetch } from '../../data/useFetch.js';
+import { fetchJson, FetchError } from '../../data/fetcher.js';
+import { useWsMessage } from '../../data/useWebSocket.js';
+
+/**
+ * SchedulesView — recurring / one-time job management.
+ *
+ * Renders `/api/schedules` (list), lets users toggle enabled, run on
+ * demand, create new schedules (interval / cron / once), and delete.
+ */
+
+type ScheduleType = 'interval' | 'cron' | 'once';
+
+interface ScheduleAction {
+  type: string;
+  prompt?: string;
+  agent?: string;
+  command?: string;
+  [key: string]: unknown;
+}
+
+interface Schedule {
+  id: string;
+  name: string;
+  type: ScheduleType;
+  schedule: string;
+  timezone: string;
+  enabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+  lastRun: string | null;
+  lastResult: unknown;
+  lastError: unknown;
+  nextRun: string | null;
+  action: ScheduleAction;
+  budgetCheck?: { maxConcurrent: number; skipIfBudgetLow: boolean };
+}
+
+interface SchedulesResponse extends Array<Schedule> {}
+
+interface CreateDraft {
+  name: string;
+  type: ScheduleType;
+  schedule: string;
+  timezone: string;
+  actionType: string;
+  prompt: string;
+}
+
+const TYPE_LABEL: Record<ScheduleType, string> = {
+  interval: 'Interval',
+  cron: 'Cron',
+  once: 'One-time',
+};
+
+const TYPE_ICON: Record<ScheduleType, LucideIcon> = {
+  interval: RefreshCw,
+  cron: Clock,
+  once: Play,
+};
+
+function StatusBadge({ sched }: { sched: Schedule }): JSX.Element {
+  if (!sched.enabled) return <Badge tone="neutral">disabled</Badge>;
+  if (sched.lastError) return <Badge tone="danger">error</Badge>;
+  if (sched.lastRun === null) return <Badge tone="info">never run</Badge>;
+  return <Badge tone="success">active</Badge>;
+}
+
+function Box(props: { children?: React.ReactNode; style?: React.CSSProperties }): JSX.Element {
+  return <div style={props.style}>{props.children}</div>;
+}
+
+export function SchedulesView(): JSX.Element {
+  const res = useFetch<SchedulesResponse>('/api/schedules');
+  const [live, setLive] = useState<Schedule[]>([]);
+  const [draft, setDraft] = useState<CreateDraft | null>(null);
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+
+  useWsMessage('schedules:change', useCallback(() => { void res.refetch(); }, [res]));
+
+  const schedules = useMemo<Schedule[]>(() => [...live, ...(res.data || [])], [live, res.data]);
+
+  const refresh = (): void => { void res.refetch(); };
+
+  const toggleEnabled = async (s: Schedule): Promise<void> => {
+    setActionError(null);
+    try {
+      await fetchJson(`/api/schedules/${encodeURIComponent(s.id)}`, {
+        method: 'PATCH',
+        body: { enabled: !s.enabled },
+      });
+      refresh();
+    } catch (err) {
+      setActionError(err instanceof FetchError ? err.message : String(err));
+    }
+  };
+
+  const runNow = async (s: Schedule): Promise<void> => {
+    setActionError(null);
+    setBusy(true);
+    try {
+      await fetchJson(`/api/schedules/${encodeURIComponent(s.id)}/run`, { method: 'POST' });
+      refresh();
+    } catch (err) {
+      setActionError(err instanceof FetchError ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const deleteSchedule = async (id: string): Promise<void> => {
+    setActionError(null);
+    setBusy(true);
+    try {
+      await fetchJson(`/api/schedules/${encodeURIComponent(id)}`, { method: 'DELETE' });
+      refresh();
+    } catch (err) {
+      setActionError(err instanceof FetchError ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const createSchedule = async (): Promise<void> => {
+    if (!draft || !draft.name.trim() || !draft.schedule.trim()) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const action: ScheduleAction = { type: draft.actionType };
+      if (draft.actionType === 'agent') action.prompt = draft.prompt;
+      if (draft.actionType === 'command') action.command = draft.prompt;
+      await fetchJson('/api/schedules', {
+        method: 'POST',
+        body: {
+          name: draft.name,
+          type: draft.type,
+          schedule: draft.schedule,
+          timezone: draft.timezone || 'UTC',
+          action,
+          enabled: true,
+        },
+      });
+      setDraft(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Stack gap={5}>
+      <ViewHeader
+        title="Schedules"
+        description="Recurring and one-time jobs. Toggle enabled, run on demand, or create new."
+        actions={
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => setDraft({ name: '', type: 'interval', schedule: '1h', timezone: 'UTC', actionType: 'agent', prompt: '' })}
+            data-testid="schedules-new"
+          >
+            <Plus size={14} aria-hidden /> New schedule
+          </Button>
+        }
+      />
+
+      {actionError !== null && (
+        <div role="alert" style={{ padding: 'var(--space-2) var(--space-3)', background: 'color-mix(in oklch, var(--danger) 12%, var(--surface-0))', border: '1px solid var(--danger)', borderRadius: 'var(--radius-md)', fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>
+          {actionError}
+        </div>
+      )}
+
+      {res.loading && schedules.length === 0 ? (
+        <Skeleton style={{ height: 240 }} />
+      ) : schedules.length === 0 ? (
+        <Card>
+          <CardBody>
+            <Stack gap={1} align="center">
+              <Clock size={32} aria-hidden style={{ color: 'var(--fg-muted)' }} />
+              <strong>No schedules yet</strong>
+              <span style={{ color: 'var(--fg-muted)', fontSize: 'var(--fs-13)' }}>
+                Create one with the button above.
+              </span>
+            </Stack>
+          </CardBody>
+        </Card>
+      ) : (
+        <Stack gap={3}>
+          {schedules.map((s) => {
+            const TypeIcon = TYPE_ICON[s.type] ?? Clock;
+            return (
+              <Card key={s.id} data-testid={`schedule-${s.id}`}>
+                <CardBody>
+                  <Grid cols={4} gap={3} style={{ alignItems: 'center' }}>
+                    <Stack gap={1}>
+                      <Inline align="center" gap={2}>
+                        <TypeIcon size={12} aria-hidden style={{ color: 'var(--fg-muted)' }} />
+                        <strong style={{ fontSize: 'var(--fs-14)' }}>{s.name}</strong>
+                      </Inline>
+                      <Inline gap={2}>
+                        <Badge tone="neutral">{TYPE_LABEL[s.type]}</Badge>
+                        <StatusBadge sched={s} />
+                      </Inline>
+                    </Stack>
+
+                    <Stack gap={1}>
+                      <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Schedule</span>
+                      <code style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)' }}>{s.schedule}</code>
+                      <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>{s.timezone}</span>
+                    </Stack>
+
+                    <Stack gap={1}>
+                      <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Next run</span>
+                      {s.nextRun ? (
+                        <code style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)' }}>
+                          {new Date(s.nextRun).toLocaleString()}
+                        </code>
+                      ) : (
+                        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>—</span>
+                      )}
+                      {s.lastRun && (
+                        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                          Last: {new Date(s.lastRun).toLocaleDateString()}
+                        </span>
+                      )}
+                    </Stack>
+
+                    <Inline align="center" gap={2} justify="end">
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => { void runNow(s); }}
+                        disabled={busy}
+                        data-testid={`schedule-run-${s.id}`}
+                        title="Run now"
+                      >
+                        <Play size={12} aria-hidden />
+                      </Button>
+                      <Switch
+                        checked={s.enabled}
+                        onCheckedChange={() => { void toggleEnabled(s); }}
+                        aria-label={`Toggle ${s.name} enabled`}
+                      />
+                      <Button
+                        variant="danger"
+                        size="sm"
+                        onClick={() => { void deleteSchedule(s.id); }}
+                        disabled={busy}
+                        data-testid={`schedule-delete-${s.id}`}
+                        title="Delete"
+                      >
+                        <Trash2 size={12} aria-hidden />
+                      </Button>
+                    </Inline>
+                  </Grid>
+                </CardBody>
+              </Card>
+            );
+          })}
+        </Stack>
+      )}
+
+      <Sheet open={draft !== null} onOpenChange={(o) => { if (!o) setDraft(null); }}>
+        <SheetContent side="right" title="New schedule">
+          {draft !== null && (
+            <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
+              <Stack gap={2}>
+                <label htmlFor="sched-name" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Name</label>
+                <Input
+                  id="sched-name"
+                  value={draft.name}
+                  onChange={(e) => setDraft({ ...draft, name: e.target.value })}
+                  placeholder="Daily digest"
+                  disabled={busy}
+                />
+              </Stack>
+
+              <Stack gap={2}>
+                <label htmlFor="sched-type" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Type</label>
+                <Inline gap={2}>
+                  {(['interval', 'cron', 'once'] as const).map((t) => (
+                    <Button
+                      key={t}
+                      variant={draft.type === t ? 'primary' : 'ghost'}
+                      size="sm"
+                      onClick={() => setDraft({ ...draft, type: t })}
+                    >
+                      {TYPE_LABEL[t]}
+                    </Button>
+                  ))}
+                </Inline>
+              </Stack>
+
+              <Stack gap={2}>
+                <label htmlFor="sched-expr" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                  {draft.type === 'interval' ? 'Interval (e.g. 1h, 30m)' : draft.type === 'cron' ? 'Cron expr' : 'ISO timestamp'}
+                </label>
+                <Input
+                  id="sched-expr"
+                  value={draft.schedule}
+                  onChange={(e) => setDraft({ ...draft, schedule: e.target.value })}
+                  placeholder={draft.type === 'interval' ? '1h' : draft.type === 'cron' ? '0 9 * * *' : '2026-07-14T09:00:00Z'}
+                  disabled={busy}
+                  data-testid="sched-expr"
+                />
+              </Stack>
+
+              <Stack gap={2}>
+                <label htmlFor="sched-tz" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Timezone</label>
+                <Input
+                  id="sched-tz"
+                  value={draft.timezone}
+                  onChange={(e) => setDraft({ ...draft, timezone: e.target.value })}
+                  placeholder="UTC"
+                  disabled={busy}
+                />
+              </Stack>
+
+              <Stack gap={2}>
+                <label style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Action type</label>
+                <Inline gap={2}>
+                  <Button
+                    variant={draft.actionType === 'agent' ? 'primary' : 'ghost'}
+                    size="sm"
+                    onClick={() => setDraft({ ...draft, actionType: 'agent' })}
+                  >
+                    Agent prompt
+                  </Button>
+                  <Button
+                    variant={draft.actionType === 'command' ? 'primary' : 'ghost'}
+                    size="sm"
+                    onClick={() => setDraft({ ...draft, actionType: 'command' })}
+                  >
+                    Shell command
+                  </Button>
+                </Inline>
+              </Stack>
+
+              <Stack gap={2}>
+                <label htmlFor="sched-prompt" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                  {draft.actionType === 'agent' ? 'Agent prompt' : 'Command'}
+                </label>
+                <Textarea
+                  id="sched-prompt"
+                  value={draft.prompt}
+                  onChange={(e) => setDraft({ ...draft, prompt: e.target.value })}
+                  placeholder={draft.actionType === 'agent' ? 'Run the daily digest report…' : 'echo "hello from cron"'}
+                  rows={4}
+                  disabled={busy}
+                />
+              </Stack>
+
+              {error !== null && (
+                <div role="alert" style={{ padding: 'var(--space-2)', background: 'color-mix(in oklch, var(--danger) 12%, var(--surface-0))', border: '1px solid var(--danger)', borderRadius: 'var(--radius-sm)', fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>
+                  {error}
+                </div>
+              )}
+
+              <Inline gap={2}>
+                <Button
+                  variant="primary"
+                  onClick={() => { void createSchedule(); }}
+                  disabled={busy || !draft.name.trim() || !draft.schedule.trim()}
+                >
+                  Create
+                </Button>
+                <Button variant="ghost" onClick={() => setDraft(null)} disabled={busy}>
+                  Cancel
+                </Button>
+              </Inline>
+            </Stack>
+          )}
+        </SheetContent>
+      </Sheet>
+    </Stack>
+  );
+}