business-stack 0.1.0

package/frontend/web/src/app/chat/page.tsx

@@ -0,0 +1,725 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import { authClient } from "@/lib/auth-client";
+
+type ChatSessionRow = {
+  id: string;
+  title: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+type ChatMessageRow = {
+  id: number;
+  role: string;
+  content: string;
+  meta_json: string | null;
+  created_at: string;
+};
+
+type RawIngestResponse = {
+  document_id: string;
+  status: string;
+  connector: string;
+  deduplicated?: boolean;
+  normalization_failed?: boolean;
+};
+
+type PipelineStep = {
+  id: string;
+  label: string;
+  state: "ok" | "warn" | "error" | "pending";
+  detail: string | null;
+};
+
+type EmbeddingDlq = {
+  state: string;
+  attempt_count: number;
+  last_error: string;
+  next_retry_at: string | null;
+  updated_at: string | null;
+};
+
+type DocumentPipeline = {
+  document_id: string;
+  status: string;
+  content_type: string | null;
+  content_block_count: number;
+  chunk_count: number;
+  vector_row_count: number;
+  gemini_embedding_row_count: number;
+  normalization_error: Record<string, unknown> | string | null;
+  ingest_meta: Record<string, unknown>;
+  dlq: EmbeddingDlq | null;
+  steps: PipelineStep[];
+  checked_at: string;
+};
+
+function parseErrorDetail(json: unknown): string {
+  if (json !== null && typeof json === "object" && "detail" in json) {
+    const d = (json as { detail: unknown }).detail;
+    if (typeof d === "string") {
+      return d;
+    }
+    return JSON.stringify(d);
+  }
+  return "Request failed.";
+}
+
+async function backendJson<T>(
+  path: string,
+  init?: RequestInit,
+): Promise<{ ok: true; data: T } | { ok: false; status: number; message: string }> {
+  const headers: HeadersInit = { ...init?.headers };
+  if (init?.body != null && !("Content-Type" in (headers as Record<string, string>))) {
+    (headers as Record<string, string>)["Content-Type"] = "application/json";
+  }
+  let res: Response;
+  try {
+    res = await fetch(`/api/backend${path}`, {
+      credentials: "include",
+      ...init,
+      headers,
+    });
+  } catch {
+    return { ok: false, status: 0, message: "Network error." };
+  }
+  const rawText = await res.text();
+  let parsed: unknown = null;
+  if (rawText) {
+    try {
+      parsed = JSON.parse(rawText) as unknown;
+    } catch {
+      parsed = null;
+    }
+  }
+  if (!res.ok) {
+    const message =
+      res.status === 401
+        ? "Sign in to use chat and ingestion."
+        : parseErrorDetail(parsed);
+    return { ok: false, status: res.status, message };
+  }
+  return { ok: true, data: parsed as T };
+}
+
+export default function ChatPage() {
+  const { data: session, isPending: sessionPending } = authClient.useSession();
+  const [sessions, setSessions] = useState<ChatSessionRow[]>([]);
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const [messages, setMessages] = useState<ChatMessageRow[]>([]);
+  const [listError, setListError] = useState<string | null>(null);
+  const [messagesError, setMessagesError] = useState<string | null>(null);
+  const [input, setInput] = useState("");
+  const [sendBusy, setSendBusy] = useState(false);
+  const [ingestText, setIngestText] = useState("");
+  const [embedAfterIngest, setEmbedAfterIngest] = useState(true);
+  const [ingestBusy, setIngestBusy] = useState(false);
+  const [ingestNote, setIngestNote] = useState<string | null>(null);
+  const [traceDocId, setTraceDocId] = useState("");
+  const [pipeline, setPipeline] = useState<DocumentPipeline | null>(null);
+  const [pipelineError, setPipelineError] = useState<string | null>(null);
+  const [pipelineBusy, setPipelineBusy] = useState(false);
+  const [pipelineAutoRefresh, setPipelineAutoRefresh] = useState(true);
+  const [pipelineActionsBusy, setPipelineActionsBusy] = useState(false);
+
+  const loadSessions = useCallback(async () => {
+    setListError(null);
+    const r = await backendJson<ChatSessionRow[]>("/chat/sessions");
+    if (!r.ok) {
+      setListError(r.message);
+      return;
+    }
+    setSessions(r.data);
+  }, []);
+
+  const loadMessages = useCallback(async (sessionId: string) => {
+    setMessagesError(null);
+    const r = await backendJson<ChatMessageRow[]>(
+      `/chat/sessions/${encodeURIComponent(sessionId)}/messages`,
+    );
+    if (!r.ok) {
+      setMessagesError(r.message);
+      setMessages([]);
+      return;
+    }
+    setMessages(r.data);
+  }, []);
+
+  useEffect(() => {
+    if (!session?.user) {
+      return;
+    }
+    void loadSessions();
+  }, [session?.user, loadSessions]);
+
+  useEffect(() => {
+    if (!activeId || !session?.user) {
+      setMessages([]);
+      return;
+    }
+    void loadMessages(activeId);
+  }, [activeId, session?.user, loadMessages]);
+
+  const fetchPipeline = useCallback(async (docId: string) => {
+    const id = docId.trim();
+    if (!id) {
+      setPipeline(null);
+      setPipelineError(null);
+      return;
+    }
+    setPipelineBusy(true);
+    setPipelineError(null);
+    const r = await backendJson<DocumentPipeline>(
+      `/ingest/documents/${encodeURIComponent(id)}/pipeline`,
+    );
+    setPipelineBusy(false);
+    if (!r.ok) {
+      setPipeline(null);
+      setPipelineError(r.message);
+      return;
+    }
+    setPipeline(r.data);
+  }, []);
+
+  useEffect(() => {
+    if (!session?.user || !traceDocId.trim() || !pipelineAutoRefresh) {
+      return;
+    }
+    void fetchPipeline(traceDocId);
+    const t = window.setInterval(() => {
+      void fetchPipeline(traceDocId);
+    }, 2500);
+    return () => window.clearInterval(t);
+  }, [session?.user, traceDocId, pipelineAutoRefresh, fetchPipeline]);
+
+  const startNewChat = async () => {
+    const r = await backendJson<ChatSessionRow>("/chat/sessions", {
+      method: "POST",
+      body: JSON.stringify({}),
+    });
+    if (!r.ok) {
+      setListError(r.message);
+      return;
+    }
+    setSessions((prev) => [r.data, ...prev]);
+    setActiveId(r.data.id);
+  };
+
+  const removeSession = async (id: string) => {
+    const r = await backendJson<{ deleted: boolean }>(
+      `/chat/sessions/${encodeURIComponent(id)}`,
+      { method: "DELETE" },
+    );
+    if (!r.ok) {
+      setListError(r.message);
+      return;
+    }
+    setSessions((prev) => prev.filter((s) => s.id !== id));
+    if (activeId === id) {
+      setActiveId(null);
+      setMessages([]);
+    }
+  };
+
+  const sendMessage = async () => {
+    const text = input.trim();
+    if (!activeId || !text || sendBusy) {
+      return;
+    }
+    setSendBusy(true);
+    setMessagesError(null);
+    const r = await backendJson<{
+      reply: string;
+      assistant_message_id: number;
+    }>(`/chat/sessions/${encodeURIComponent(activeId)}/complete`, {
+      method: "POST",
+      body: JSON.stringify({ message: text, k: 8 }),
+    });
+    setSendBusy(false);
+    setInput("");
+    if (!r.ok) {
+      setMessagesError(r.message);
+      return;
+    }
+    void loadMessages(activeId);
+    void loadSessions();
+  };
+
+  const runIngest = async () => {
+    const body = ingestText.trim();
+    if (!body || ingestBusy) {
+      return;
+    }
+    setIngestBusy(true);
+    setIngestNote(null);
+    const envelope = {
+      source: "web-chat",
+      timestamp: new Date().toISOString(),
+      content_type: "text" as const,
+      payload: body,
+      metadata: {},
+    };
+    const ingest = await backendJson<RawIngestResponse>(
+      "/ingest/raw?connector=generic",
+      { method: "POST", body: JSON.stringify(envelope) },
+    );
+    if (!ingest.ok) {
+      setIngestBusy(false);
+      setIngestNote(ingest.message);
+      return;
+    }
+    const docId = ingest.data.document_id;
+    const dedup = ingest.data.deduplicated === true;
+    const normFail = ingest.data.normalization_failed === true;
+    setTraceDocId(docId);
+    setPipelineAutoRefresh(true);
+    void fetchPipeline(docId);
+    if (embedAfterIngest) {
+      const emb = await backendJson<{ accepted: boolean }>(
+        `/ingest/documents/${encodeURIComponent(docId)}/embed`,
+        { method: "POST", body: JSON.stringify({ multimodal: false }) },
+      );
+      setIngestBusy(false);
+      if (!emb.ok) {
+        setIngestNote(
+          `Ingested document ${docId}, but embedding failed: ${emb.message}`,
+        );
+        return;
+      }
+      const extra =
+        dedup ? " (deduplicated)" : normFail ? " (normalization had issues)" : "";
+      setIngestNote(
+        `Ingested ${docId}${extra}; embedding queued — watch the pipeline panel below.`,
+      );
+    } else {
+      setIngestBusy(false);
+      setIngestNote(`Ingested ${docId} (no embed — not in vector index yet).`);
+    }
+    setIngestText("");
+  };
+
+  if (sessionPending) {
+    return (
+      <main className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-4 p-6">
+        <p className="text-sm text-neutral-500">Checking session…</p>
+      </main>
+    );
+  }
+
+  if (!session?.user) {
+    return (
+      <main className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-4 p-6">
+        <h1 className="text-2xl font-semibold tracking-tight">Chat</h1>
+        <p className="text-sm text-neutral-600 dark:text-neutral-400">
+          Sign in to load sessions and talk to your knowledge base.
+        </p>
+        <Link
+          className="inline-flex w-fit items-center justify-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white"
+          href="/auth/sign-in"
+        >
+          Sign in
+        </Link>
+        <p className="text-sm">
+          <Link
+            href="/"
+            className="text-neutral-600 underline dark:text-neutral-400"
+          >
+            Home
+          </Link>
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-4 p-6">
+      <div className="flex flex-wrap items-baseline justify-between gap-2">
+        <h1 className="text-2xl font-semibold tracking-tight">Chat</h1>
+        <Link
+          href="/"
+          className="text-sm text-neutral-600 underline dark:text-neutral-400"
+        >
+          Home
+        </Link>
+      </div>
+      <p className="text-sm text-neutral-600 dark:text-neutral-400">
+        Messages are stored per user in SQLite. Each reply runs retrieval over
+        your embedded documents, then Gemini when configured.
+      </p>
+
+      {listError ? (
+        <p className="text-sm text-amber-800 dark:text-amber-200">{listError}</p>
+      ) : null}
+
+      <div className="grid min-h-[28rem] gap-4 md:grid-cols-[12rem_1fr]">
+        <aside className="flex flex-col gap-2 rounded-lg border border-neutral-200 bg-white/60 p-3 dark:border-neutral-800 dark:bg-neutral-950/40">
+          <button
+            type="button"
+            onClick={() => void startNewChat()}
+            className="rounded-md bg-neutral-900 px-3 py-2 text-xs font-medium text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white"
+          >
+            New chat
+          </button>
+          <ul className="flex max-h-64 flex-col gap-1 overflow-y-auto text-xs md:max-h-none">
+            {sessions.map((s) => (
+              <li key={s.id} className="flex items-start gap-1">
+                <button
+                  type="button"
+                  onClick={() => setActiveId(s.id)}
+                  className={`min-w-0 flex-1 rounded px-2 py-1 text-left hover:bg-neutral-100 dark:hover:bg-neutral-900 ${
+                    activeId === s.id
+                      ? "bg-neutral-100 font-medium dark:bg-neutral-900"
+                      : ""
+                  }`}
+                >
+                  <span className="line-clamp-2 break-all">
+                    {s.title?.trim() || "Untitled"}
+                  </span>
+                </button>
+                <button
+                  type="button"
+                  aria-label="Delete chat"
+                  onClick={() => void removeSession(s.id)}
+                  className="shrink-0 rounded px-1 text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40"
+                >
+                  ×
+                </button>
+              </li>
+            ))}
+          </ul>
+        </aside>
+
+        <div className="flex min-h-0 flex-col gap-3">
+          <section className="flex min-h-0 flex-1 flex-col rounded-lg border border-neutral-200 bg-white/60 dark:border-neutral-800 dark:bg-neutral-950/40">
+            <div className="border-b border-neutral-200 px-3 py-2 text-xs font-medium text-neutral-500 dark:border-neutral-800">
+              {activeId ? `Session ${activeId.slice(0, 8)}…` : "Select or start a chat"}
+            </div>
+            {messagesError ? (
+              <p className="p-3 text-sm text-amber-800 dark:text-amber-200">
+                {messagesError}
+              </p>
+            ) : null}
+            <div className="flex-1 space-y-3 overflow-y-auto p-3 text-sm">
+              {!activeId ? (
+                <p className="text-neutral-500">Choose a session on the left.</p>
+              ) : messages.length === 0 ? (
+                <p className="text-neutral-500">No messages yet.</p>
+              ) : (
+                messages.map((m) => (
+                  <div
+                    key={m.id}
+                    className={`rounded-lg px-3 py-2 ${
+                      m.role === "user"
+                        ? "ml-8 bg-neutral-100 dark:bg-neutral-900"
+                        : "mr-8 border border-neutral-200 dark:border-neutral-800"
+                    }`}
+                  >
+                    <p className="text-[10px] uppercase tracking-wide text-neutral-400">
+                      {m.role}
+                    </p>
+                    <p className="whitespace-pre-wrap text-neutral-900 dark:text-neutral-100">
+                      {m.content}
+                    </p>
+                  </div>
+                ))
+              )}
+            </div>
+            <div className="border-t border-neutral-200 p-3 dark:border-neutral-800">
+              <div className="flex gap-2">
+                <textarea
+                  className="min-h-[4rem] flex-1 resize-y rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-950"
+                  placeholder={
+                    activeId
+                      ? "Ask something (uses RAG + Gemini)…"
+                      : "Start a chat first…"
+                  }
+                  value={input}
+                  disabled={!activeId || sendBusy}
+                  onChange={(e) => setInput(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault();
+                      void sendMessage();
+                    }
+                  }}
+                />
+                <button
+                  type="button"
+                  disabled={!activeId || sendBusy || !input.trim()}
+                  onClick={() => void sendMessage()}
+                  className="h-fit self-end rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white disabled:opacity-40 dark:bg-neutral-100 dark:text-neutral-900"
+                >
+                  {sendBusy ? "…" : "Send"}
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <section className="rounded-lg border border-neutral-200 bg-white/60 p-3 dark:border-neutral-800 dark:bg-neutral-950/40">
+            <h2 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              Ingest text
+            </h2>
+            <p className="mt-1 text-xs text-neutral-500">
+              Adds a document via{" "}
+              <code className="rounded bg-neutral-100 px-1 dark:bg-neutral-900">
+                POST /ingest/raw
+              </code>
+              . Optional embed queues chunks for vector search used in chat.
+            </p>
+            <textarea
+              className="mt-2 min-h-[5rem] w-full resize-y rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm dark:border-neutral-700 dark:bg-neutral-950"
+              placeholder="Paste notes, snippets, or knowledge to store…"
+              value={ingestText}
+              disabled={ingestBusy}
+              onChange={(e) => setIngestText(e.target.value)}
+            />
+            <label className="mt-2 flex cursor-pointer items-center gap-2 text-xs text-neutral-600 dark:text-neutral-400">
+              <input
+                type="checkbox"
+                checked={embedAfterIngest}
+                disabled={ingestBusy}
+                onChange={(e) => setEmbedAfterIngest(e.target.checked)}
+              />
+              Queue embedding after ingest (recommended for RAG)
+            </label>
+            <button
+              type="button"
+              disabled={ingestBusy || !ingestText.trim()}
+              onClick={() => void runIngest()}
+              className="mt-2 rounded-md border border-neutral-300 bg-white px-4 py-2 text-sm font-medium hover:bg-neutral-50 disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950 dark:hover:bg-neutral-900"
+            >
+              {ingestBusy ? "Working…" : "Ingest"}
+            </button>
+            {ingestNote ? (
+              <p className="mt-2 text-xs text-neutral-700 dark:text-neutral-300">
+                {ingestNote}
+              </p>
+            ) : null}
+          </section>
+
+          <section className="rounded-lg border border-neutral-200 bg-white/60 p-3 dark:border-neutral-800 dark:bg-neutral-950/40">
+            <h2 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              Embedding pipeline (debug)
+            </h2>
+            <p className="mt-1 text-xs text-neutral-500">
+              Live view of ingest → blocks → chunks → Gemini + sqlite-vec. Uses{" "}
+              <code className="rounded bg-neutral-100 px-1 dark:bg-neutral-900">
+                GET /ingest/documents/&#123;id&#125;/pipeline
+              </code>
+              .
+            </p>
+            <div className="mt-2 flex flex-wrap items-end gap-2">
+              <label className="flex min-w-[12rem] flex-1 flex-col gap-1 text-xs text-neutral-600 dark:text-neutral-400">
+                Document ID
+                <input
+                  className="rounded-md border border-neutral-300 bg-white px-2 py-1.5 font-mono text-xs dark:border-neutral-700 dark:bg-neutral-950"
+                  value={traceDocId}
+                  onChange={(e) => setTraceDocId(e.target.value)}
+                  placeholder="Paste UUID after ingest…"
+                />
+              </label>
+              <button
+                type="button"
+                disabled={pipelineBusy || !traceDocId.trim()}
+                onClick={() => void fetchPipeline(traceDocId)}
+                className="rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950 dark:hover:bg-neutral-900"
+              >
+                {pipelineBusy ? "Loading…" : "Refresh"}
+              </button>
+              <label className="flex cursor-pointer items-center gap-2 text-xs text-neutral-600 dark:text-neutral-400">
+                <input
+                  type="checkbox"
+                  checked={pipelineAutoRefresh}
+                  onChange={(e) => setPipelineAutoRefresh(e.target.checked)}
+                />
+                Auto-refresh (2.5s)
+              </label>
+            </div>
+            {pipelineError ? (
+              <p className="mt-2 text-xs text-red-700 dark:text-red-300">
+                {pipelineError}
+              </p>
+            ) : null}
+            {pipeline ? (
+              <div className="mt-3 space-y-3">
+                <div className="flex flex-wrap gap-2">
+                  {pipeline.steps.map((step, i) => {
+                    const ring =
+                      step.state === "ok"
+                        ? "border-emerald-500/80 bg-emerald-50 dark:bg-emerald-950/30"
+                        : step.state === "warn"
+                          ? "border-amber-500/80 bg-amber-50 dark:bg-amber-950/30"
+                          : step.state === "error"
+                            ? "border-red-500/80 bg-red-50 dark:bg-red-950/30"
+                            : "border-dashed border-neutral-400 bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-900/40";
+                    return (
+                      <div key={step.id} className="flex items-stretch gap-2">
+                        {i > 0 ? (
+                          <div
+                            className="hidden w-4 self-center border-t border-dotted border-neutral-300 sm:block dark:border-neutral-600"
+                            aria-hidden
+                          />
+                        ) : null}
+                        <div
+                          className={`max-w-[11rem] rounded-lg border px-2.5 py-2 text-xs ${ring}`}
+                        >
+                          <p className="font-medium text-neutral-800 dark:text-neutral-100">
+                            {step.label}
+                          </p>
+                          <p className="mt-0.5 text-[10px] uppercase tracking-wide text-neutral-500">
+                            {step.state}
+                          </p>
+                          {step.detail ? (
+                            <p className="mt-1 break-words text-[11px] leading-snug text-neutral-600 dark:text-neutral-400">
+                              {step.detail}
+                            </p>
+                          ) : null}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                <dl className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs sm:grid-cols-4">
+                  <div>
+                    <dt className="text-neutral-500">Status</dt>
+                    <dd className="font-mono text-neutral-800 dark:text-neutral-200">
+                      {pipeline.status}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-neutral-500">Blocks</dt>
+                    <dd className="font-mono text-neutral-800 dark:text-neutral-200">
+                      {pipeline.content_block_count}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-neutral-500">Chunks</dt>
+                    <dd className="font-mono text-neutral-800 dark:text-neutral-200">
+                      {pipeline.chunk_count}
+                    </dd>
+                  </div>
+                  <div>
+                    <dt className="text-neutral-500">Vector rows</dt>
+                    <dd className="font-mono text-neutral-800 dark:text-neutral-200">
+                      {pipeline.vector_row_count} / {pipeline.gemini_embedding_row_count}{" "}
+                      vec / gemini
+                    </dd>
+                  </div>
+                </dl>
+                <p className="text-[10px] text-neutral-400">
+                  Checked {pipeline.checked_at}
+                </p>
+                {pipeline.dlq ? (
+                  <div className="rounded-md border border-red-200 bg-red-50/80 p-2 text-xs text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-100">
+                    <p className="font-medium">Embedding DLQ</p>
+                    <p className="mt-1 font-mono text-[11px]">
+                      {pipeline.dlq.state} · attempts {pipeline.dlq.attempt_count}
+                    </p>
+                    {pipeline.dlq.next_retry_at ? (
+                      <p className="mt-1 text-[11px]">
+                        Next retry: {pipeline.dlq.next_retry_at}
+                      </p>
+                    ) : null}
+                    <pre className="mt-2 max-h-24 overflow-auto whitespace-pre-wrap break-words text-[11px] opacity-90">
+                      {pipeline.dlq.last_error}
+                    </pre>
+                  </div>
+                ) : null}
+                {(typeof pipeline.ingest_meta.embedding_error === "string"
+                  ? pipeline.ingest_meta.embedding_error
+                  : null) ? (
+                  <div className="rounded-md border border-amber-200 bg-amber-50/80 p-2 text-xs text-amber-950 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-100">
+                    <p className="font-medium">ingest_meta.embedding_error</p>
+                    <pre className="mt-1 max-h-20 overflow-auto whitespace-pre-wrap break-words text-[11px]">
+                      {String(pipeline.ingest_meta.embedding_error)}
+                    </pre>
+                  </div>
+                ) : null}
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    disabled={pipelineActionsBusy || !traceDocId.trim()}
+                    onClick={async () => {
+                      setPipelineActionsBusy(true);
+                      const r = await backendJson<{ chunks_written: number }>(
+                        `/ingest/documents/${encodeURIComponent(traceDocId.trim())}/chunks`,
+                        {
+                          method: "POST",
+                          body: JSON.stringify({
+                            use_llm_weak_structure: false,
+                          }),
+                        },
+                      );
+                      setPipelineActionsBusy(false);
+                      if (!r.ok) {
+                        setPipelineError(r.message);
+                        return;
+                      }
+                      void fetchPipeline(traceDocId);
+                    }}
+                    className="rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950 dark:hover:bg-neutral-900"
+                  >
+                    Rebuild chunks
+                  </button>
+                  <button
+                    type="button"
+                    disabled={pipelineActionsBusy || !traceDocId.trim()}
+                    onClick={async () => {
+                      setPipelineActionsBusy(true);
+                      const r = await backendJson<{ accepted: boolean }>(
+                        `/admin/documents/${encodeURIComponent(traceDocId.trim())}/retry-embedding`,
+                        {
+                          method: "POST",
+                          body: JSON.stringify({ multimodal: false }),
+                        },
+                      );
+                      setPipelineActionsBusy(false);
+                      if (!r.ok) {
+                        setPipelineError(r.message);
+                        return;
+                      }
+                      void fetchPipeline(traceDocId);
+                    }}
+                    className="rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950 dark:hover:bg-neutral-900"
+                  >
+                    Retry embedding (admin)
+                  </button>
+                  <button
+                    type="button"
+                    disabled={pipelineActionsBusy || !traceDocId.trim()}
+                    onClick={async () => {
+                      setPipelineActionsBusy(true);
+                      const r = await backendJson<{ accepted: boolean }>(
+                        `/ingest/documents/${encodeURIComponent(traceDocId.trim())}/embed`,
+                        {
+                          method: "POST",
+                          body: JSON.stringify({ multimodal: false }),
+                        },
+                      );
+                      setPipelineActionsBusy(false);
+                      if (!r.ok) {
+                        setPipelineError(r.message);
+                        return;
+                      }
+                      void fetchPipeline(traceDocId);
+                    }}
+                    className="rounded-md border border-neutral-300 bg-white px-3 py-1.5 text-xs font-medium hover:bg-neutral-50 disabled:opacity-40 dark:border-neutral-700 dark:bg-neutral-950 dark:hover:bg-neutral-900"
+                  >
+                    Queue embed again
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <p className="mt-2 text-xs text-neutral-500">
+                Enter a document id and refresh to load pipeline state.
+              </p>
+            )}
+          </section>
+        </div>
+      </div>
+    </main>
+  );
+}