@polderlabs/bizar 9.0.0 → 10.0.7

package/bizar-dash/src/web/v8/views/ClaudeSessions/ClaudeSessionsView.tsx

@@ -0,0 +1,331 @@
+/**
+ * v8/views/ClaudeSessions/ClaudeSessionsView.tsx — Sprint S39, v9.3.0.
+ *
+ * Claude Code session explorer. Lists sessions on disk (via
+ * /api/claude-sessions), lets the user create a new one via Sheet
+ * (POST /api/claude-sessions/new), inline-rename (PATCH
+ * /api/claude-sessions/:id), inline-confirm delete (DELETE
+ * /api/claude-sessions/:id), and opens a right Drawer with the
+ * session detail (ClaudeSessionDetail).
+ */
+
+import { useCallback, useState } from 'react';
+import { Plus, Trash2, Pencil, RefreshCcw, MessageSquareText } 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 { Sheet, SheetClose, 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';
+import type { ClaudeSession } from '../../data/types.js';
+import { ClaudeSessionDetail } from './ClaudeSessionDetail.js';
+
+interface SessionsPayload {
+  sessions: ClaudeSession[];
+}
+
+export function ClaudeSessionsView(): JSX.Element {
+  const payload = useFetch<SessionsPayload>('/api/claude-sessions');
+  const [creating, setCreating] = useState<boolean>(false);
+  const [detailId, setDetailId] = useState<string | null>(null);
+
+  const sessions = payload.data?.sessions ?? [];
+
+  const refresh = useCallback(() => { void payload.refetch(); }, [payload]);
+
+  return (
+    <Stack gap={4} data-testid="claude-sessions-view">
+      <ViewHeader
+        title="Claude sessions"
+        description="Claude Code session explorer. Each row is a session directory under ~/.claude/sessions/."
+        actions={
+          <Inline align="center" gap={2}>
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="claude-sessions-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="primary" onClick={() => setCreating(true)} data-testid="claude-sessions-new">
+              <Plus size={14} aria-hidden /> New session
+            </Button>
+          </Inline>
+        }
+      />
+
+      <Card variant="default">
+        <CardBody>
+          {payload.loading && sessions.length === 0 ? (
+            <Stack gap={2}>
+              <Skeleton style={{ height: 36 }} />
+              <Skeleton style={{ height: 36 }} />
+            </Stack>
+          ) : sessions.length === 0 ? (
+            <EmptyState
+              icon={<MessageSquareText size={28} aria-hidden />}
+              title="No Claude sessions"
+              description="Create one to start a multi-turn conversation with Claude Code."
+            />
+          ) : (
+            <Stack gap={2}>
+              {sessions.map((s) => (
+                <SessionRow key={s.id} session={s} onRefresh={refresh} onOpen={setDetailId} />
+              ))}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+
+      <Sheet open={creating} onOpenChange={setCreating}>
+        <SheetContent side="right" title="New Claude session" description="Spawn a Claude Code session via the runner.">
+          <NewSessionForm
+            onCreated={(id) => {
+              setCreating(false);
+              refresh();
+              setDetailId(id);
+            }}
+            onCancel={() => setCreating(false)}
+          />
+        </SheetContent>
+      </Sheet>
+
+      <Sheet open={detailId !== null} onOpenChange={(open) => { if (!open) setDetailId(null); }}>
+        <SheetContent side="right" title="Session detail" description={detailId ?? ''}>
+          {detailId !== null && <ClaudeSessionDetail sessionId={detailId} />}
+        </SheetContent>
+      </Sheet>
+    </Stack>
+  );
+}
+
+function SessionRow({
+  session,
+  onRefresh,
+  onOpen,
+}: {
+  session: ClaudeSession;
+  onRefresh: () => void;
+  onOpen: (id: string) => void;
+}): JSX.Element {
+  const [renaming, setRenaming] = useState<boolean>(false);
+  const [title, setTitle] = useState<string>(session.title ?? '');
+  const [confirmDelete, setConfirmDelete] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const rename = async (): Promise<void> => {
+    if (!title.trim()) return;
+    setError(null);
+    try {
+      await fetchJson(`/api/claude-sessions/${session.id}`, {
+        method: 'PATCH',
+        body: { title: title.trim() },
+      });
+      setRenaming(false);
+      onRefresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const resume = async (id: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/claude-sessions/${id}/resume`, { method: 'POST', body: {} });
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  const remove = async (): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/claude-sessions/${session.id}`, { method: 'DELETE' });
+      setConfirmDelete(false);
+      onRefresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  return (
+    <div
+      data-testid={`claude-session-row-${session.id}`}
+      style={{
+        padding: 'var(--space-3)',
+        borderRadius: 'var(--radius-md)',
+        border: '1px solid var(--border)',
+        background: 'var(--surface-0)',
+      }}
+    >
+      <Inline align="center" justify="between" gap={3}>
+        <Stack gap={1} style={{ minWidth: 0, flex: 1 }}>
+          {renaming ? (
+            <Inline gap={1}>
+              <Input
+                value={title}
+                data-testid={`claude-session-rename-input-${session.id}`}
+                onChange={(e) => setTitle((e.target as HTMLInputElement).value)}
+              />
+              <Button variant="primary" onClick={() => void rename()} data-testid={`claude-session-rename-submit-${session.id}`}>Save</Button>
+              <Button variant="ghost" onClick={() => { setRenaming(false); setTitle(session.title ?? ''); }}>Cancel</Button>
+            </Inline>
+          ) : (
+            <Inline align="center" gap={2}>
+              <strong style={{ fontSize: 'var(--fs-13)' }}>{session.title || session.id}</strong>
+              {session.agent && (
+                <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', fontFamily: 'var(--font-mono)' }}>
+                  @{session.agent}
+                </span>
+              )}
+            </Inline>
+          )}
+          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+            {session.id}
+          </span>
+          {error !== null && (
+            <span role="alert" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>{error}</span>
+          )}
+        </Stack>
+        <Inline gap={1}>
+          <Button variant="primary" onClick={() => void resume(session.id)} data-testid={`claude-session-resume-${session.id}`} aria-label={`Resume ${session.id}`}>
+            Resume
+          </Button>
+          <Button variant="ghost" onClick={() => onOpen(session.id)} data-testid={`claude-session-open-${session.id}`}>
+            Open
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => { setRenaming(true); setTitle(session.title ?? ''); }}
+            data-testid={`claude-session-rename-${session.id}`}
+            aria-label={`Rename session ${session.id}`}
+          >
+            <Pencil size={14} aria-hidden />
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={() => setConfirmDelete((cur) => !cur)}
+            data-testid={`claude-session-delete-${session.id}`}
+            aria-label={`Delete session ${session.id}`}
+          >
+            <Trash2 size={14} aria-hidden />
+          </Button>
+        </Inline>
+      </Inline>
+      {confirmDelete && (
+        <Inline gap={1} style={{ marginTop: 'var(--space-2)' }}>
+          <Button variant="danger" onClick={() => void remove()} data-testid={`claude-session-confirm-delete-${session.id}`}>
+            Confirm delete
+          </Button>
+          <Button variant="ghost" onClick={() => setConfirmDelete(false)} data-testid={`claude-session-cancel-delete-${session.id}`}>
+            Cancel
+          </Button>
+        </Inline>
+      )}
+    </div>
+  );
+}
+
+function NewSessionForm({
+  onCreated,
+  onCancel,
+}: {
+  onCreated: (id: string) => void;
+  onCancel: () => void;
+}): JSX.Element {
+  const [title, setTitle] = useState<string>('');
+  const [agent, setAgent] = useState<string>('general');
+  const [prompt, setPrompt] = useState<string>('');
+  const [directory, setDirectory] = useState<string>('');
+  const [busy, setBusy] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const submit = async (): Promise<void> => {
+    if (!agent.trim() || !prompt.trim() || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetchJson<{ id: string }>('/api/claude-sessions/new', {
+        method: 'POST',
+        body: {
+          title: title.trim() || null,
+          agent: agent.trim(),
+          prompt: prompt.trim(),
+          directory: directory.trim() || undefined,
+        },
+      });
+      onCreated(res.id);
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  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)' }}>Title (optional)</span>
+        <Input
+          value={title}
+          data-testid="claude-sessions-new-title"
+          onChange={(e) => setTitle((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Agent</span>
+        <Input
+          value={agent}
+          data-testid="claude-sessions-new-agent"
+          onChange={(e) => setAgent((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Seed prompt</span>
+        <textarea
+          value={prompt}
+          rows={4}
+          data-testid="claude-sessions-new-prompt"
+          onChange={(e) => setPrompt((e.target as HTMLTextAreaElement).value)}
+          style={{
+            background: 'var(--surface-0)',
+            border: '1px solid var(--border)',
+            borderRadius: 'var(--radius-md)',
+            padding: 'var(--space-2)',
+            color: 'var(--fg)',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--fs-13)',
+            resize: 'vertical',
+          }}
+        />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Working directory (optional)</span>
+        <Input
+          value={directory}
+          data-testid="claude-sessions-new-directory"
+          onChange={(e) => setDirectory((e.target as HTMLInputElement).value)}
+        />
+      </label>
+      {error !== null && (
+        <span role="alert" data-testid="claude-sessions-new-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>
+          {error}
+        </span>
+      )}
+      <Inline justify="end" gap={2}>
+        <SheetClose asChild>
+          <Button variant="ghost" onClick={onCancel} data-testid="claude-sessions-new-cancel">Cancel</Button>
+        </SheetClose>
+        <Button
+          variant="primary"
+          onClick={() => void submit()}
+          disabled={busy || !agent.trim() || !prompt.trim()}
+          data-testid="claude-sessions-new-submit"
+        >
+          Create
+        </Button>
+      </Inline>
+    </Stack>
+  );
+}

package/bizar-dash/src/web/v8/views/Clipboard/ClipboardView.tsx

@@ -0,0 +1,210 @@
+/**
+ * v8/views/Clipboard/ClipboardView.tsx — Sprint S43, v9.3.0.
+ *
+ * Saved clip list (GET /api/clipboard/list), Save Sheet
+ * (POST /api/clipboard/save with {url, title, content, selection}),
+ * inline-confirm Delete (DELETE /api/clipboard/:id). Each row links
+ * to the source URL when present.
+ */
+
+import { useCallback, useMemo, useState } from 'react';
+import { ClipboardPaste, Plus, Trash2, ExternalLink, RefreshCcw } 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 Clip {
+  id: string;
+  url?: string;
+  title?: string;
+  content?: string;
+  selection?: string;
+  savedAt?: string;
+}
+
+export function ClipboardView(): JSX.Element {
+  const payload = useFetch<{ clips: Clip[] }>('/api/clipboard/list');
+  const [saving, setSaving] = useState<boolean>(false);
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const clips = useMemo<Clip[]>(() => payload.data?.clips ?? [], [payload.data]);
+  const refresh = useCallback(() => { void payload.refetch(); }, [payload]);
+
+  const drop = async (id: string): Promise<void> => {
+    setError(null);
+    try {
+      await fetchJson(`/api/clipboard/${id}`, { method: 'DELETE' });
+      setConfirmDelete(null);
+      refresh();
+    } catch (err) {
+      setError(err instanceof FetchError ? err.message : (err as Error).message);
+    }
+  };
+
+  return (
+    <Stack gap={4} data-testid="clipboard-view">
+      <ViewHeader
+        title="Clipboard"
+        description="Saved clips. Each becomes a markdown note under clips/."
+        actions={
+          <Inline align="center" gap={2}>
+            {error !== null && (
+              <span role="alert" data-testid="clipboard-error" style={{ color: 'var(--danger)', fontSize: 'var(--fs-12)' }}>
+                {error}
+              </span>
+            )}
+            <Button variant="ghost" onClick={() => void refresh()} data-testid="clipboard-refresh">
+              <RefreshCcw size={14} aria-hidden /> Refresh
+            </Button>
+            <Button variant="primary" onClick={() => setSaving(true)} data-testid="clipboard-add">
+              <Plus size={14} aria-hidden /> Save clip
+            </Button>
+          </Inline>
+        }
+      />
+
+      <Card variant="default">
+        <CardBody>
+          {payload.loading && clips.length === 0 ? (
+            <Stack gap={1}>
+              <Skeleton style={{ height: 60 }} />
+              <Skeleton style={{ height: 60 }} />
+            </Stack>
+          ) : clips.length === 0 ? (
+            <EmptyState icon={<ClipboardPaste size={28} aria-hidden />} title="No saved clips" description="Save one with a URL + content." />
+          ) : (
+            <Stack gap={1}>
+              {clips.map((c) => {
+                const isConfirming = confirmDelete === c.id;
+                return (
+                  <div
+                    key={c.id}
+                    data-testid={`clipboard-row-${c.id}`}
+                    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}>
+                          <strong style={{ fontSize: 'var(--fs-13)' }}>{c.title || c.id}</strong>
+                          {c.url && (
+                            <a href={c.url} target="_blank" rel="noreferrer" style={{ fontSize: 'var(--fs-11)', color: 'var(--accent)' }}>
+                              <ExternalLink size={10} aria-hidden style={{ verticalAlign: 'middle' }} /> {c.url}
+                            </a>
+                          )}
+                          {c.savedAt && <span style={{ fontSize: 'var(--fs-11)', color: 'var(--fg-subtle)' }}>{c.savedAt}</span>}
+                        </Inline>
+                        {(c.selection || c.content) && (
+                          <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+                            {(c.selection || c.content || '').length > 200
+                              ? `${(c.selection || c.content || '').slice(0, 200)}…`
+                              : (c.selection || c.content)}
+                          </span>
+                        )}
+                      </Stack>
+                      <Button variant="ghost" onClick={() => setConfirmDelete((cur) => (cur === c.id ? null : c.id))} data-testid={`clipboard-delete-${c.id}`} aria-label={`Delete ${c.id}`}>
+                        <Trash2 size={14} aria-hidden />
+                      </Button>
+                    </Inline>
+                    {isConfirming && (
+                      <Inline gap={1} style={{ marginTop: 'var(--space-1)' }}>
+                        <Button variant="danger" onClick={() => void drop(c.id)} data-testid={`clipboard-confirm-delete-${c.id}`}>
+                          Confirm delete
+                        </Button>
+                        <Button variant="ghost" onClick={() => setConfirmDelete(null)}>Cancel</Button>
+                      </Inline>
+                    )}
+                  </div>
+                );
+              })}
+            </Stack>
+          )}
+        </CardBody>
+      </Card>
+
+      <Sheet open={saving} onOpenChange={setSaving}>
+        <SheetContent side="right" title="Save clip" description="URL or content required.">
+          <SaveForm
+            onSubmit={async (body) => {
+              await fetchJson('/api/clipboard/save', { method: 'POST', body });
+              setSaving(false);
+              refresh();
+            }}
+            onCancel={() => setSaving(false)}
+          />
+        </SheetContent>
+      </Sheet>
+    </Stack>
+  );
+}
+
+function SaveForm({
+  onSubmit,
+  onCancel,
+}: {
+  onSubmit: (body: { url?: string; title?: string; content?: string; selection?: string }) => Promise<void>;
+  onCancel: () => void;
+}): JSX.Element {
+  const [url, setUrl] = useState<string>('');
+  const [title, setTitle] = useState<string>('');
+  const [content, setContent] = useState<string>('');
+  const [selection, setSelection] = 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)' }}>URL (optional)</span>
+        <Input value={url} onChange={(e) => setUrl((e.target as HTMLInputElement).value)} data-testid="clipboard-form-url" />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Title (optional)</span>
+        <Input value={title} onChange={(e) => setTitle((e.target as HTMLInputElement).value)} data-testid="clipboard-form-title" />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Content</span>
+        <Textarea value={content} rows={6} onChange={(e) => setContent((e.target as HTMLTextAreaElement).value)} data-testid="clipboard-form-content" />
+      </label>
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-1)' }}>
+        <span style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Selection (optional)</span>
+        <Textarea value={selection} rows={3} onChange={(e) => setSelection((e.target as HTMLTextAreaElement).value)} data-testid="clipboard-form-selection" />
+      </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 || (!url.trim() && !content.trim())}
+          data-testid="clipboard-form-submit"
+          onClick={async () => {
+            setBusy(true);
+            setError(null);
+            try {
+              await onSubmit({
+                url: url.trim() || undefined,
+                title: title.trim() || undefined,
+                content: content.trim() || undefined,
+                selection: selection.trim() || undefined,
+              });
+            } catch (err) {
+              setError(err instanceof FetchError ? err.message : (err as Error).message);
+              setBusy(false);
+            }
+          }}
+        >
+          {busy ? 'Saving…' : 'Save'}
+        </Button>
+      </Inline>
+    </Stack>
+  );
+}