@graph8/sdk 0.373.0 → 0.374.0

package/blocks/documents/components/library-upload.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+/**
+ * LibraryUpload: add files to a Library folder.
+ *
+ * SDK operations, in order:
+ *   1. uploadLibraryDocument (POST /library/documents/upload)        write  one file (multipart)
+ *   2. uploadLibraryDocuments (POST /library/documents/upload-batch) write  several files at once; PARTIAL SUCCESS is normal
+ * Files are checked here before anything is sent: only the Library's file types, nothing empty, no file over `maxBytes`
+ * (default 5 MiB, the largest BODY the /api/g8 proxy forwards; the app itself takes 50 MB, so raise `maxBodyBytes` in the
+ * proxy route first), and at most 20 at a time. The proxy caps the whole request, not each file, so the files are sent in
+ * consecutive requests whose combined size (plus multipart overhead) stays under `maxBytes`; a lone file goes through the
+ * single route. Results are merged. A request that fails (a 413, a network error) marks only ITS files as failed and the later
+ * ones are still tried. The files that failed stay selected so a retry sends only them, never the ones that already landed. Text-bearing files are read for their text; images and
+ * spreadsheets are stored as bytes. Nothing here is billable, external or destructive.
+ */
+
+import { useRef, useState } from "react";
+import { Button, Label } from "@graph8/sdk/ui";
+import { g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { plural } from "@/g8/lib/plural";
+import { BASE_OVERHEAD, DEFAULT_MAX_BYTES, FILE_OVERHEAD, LIBRARY_EXTENSIONS, fileLimit, ROOT, checkFiles, fmtSize, folderLabel } from "../lib/documents-types";
+import type { LibraryFolder, Rec } from "../lib/documents-types";
+
+export const MAX_BATCH = 20;
+
+/** Consecutive groups of files whose combined size and multipart overhead stay within `maxBytes` (a file over the limit on its own still gets a group of its own, to be refused by the proxy with a reason). */
+export function requestGroups(files: readonly File[], maxBytes: number): File[][] {
+  const groups: File[][] = [];
+  let current: File[] = [];
+  let size = BASE_OVERHEAD;
+  for (const f of files) {
+    const cost = f.size + FILE_OVERHEAD;
+    if (current.length > 0 && size + cost > maxBytes) {
+      groups.push(current);
+      current = [];
+      size = BASE_OVERHEAD;
+    }
+    current.push(f);
+    size += cost;
+  }
+  if (current.length > 0) groups.push(current);
+  return groups;
+}
+
+export interface LibraryUploadProps {
+  folders: LibraryFolder[];
+  /** Pre-select the destination folder. */
+  folderPath?: string;
+  /** Largest file accepted, in bytes. Default 5 MiB: the /api/g8 proxy rejects bigger bodies. */
+  maxBytes?: number;
+  onUploaded?: () => void;
+  onDone?: () => void;
+}
+
+interface Outcome { added: number; failed: { filename: string; error: string }[]; warnings: string[] }
+const reasonOf = (err: unknown): string => (err instanceof Error && err.message ? err.message : "The request failed.");
+
+const SELECT = "border-input bg-background h-9 w-full rounded-md border px-2 text-sm";
+
+export function LibraryUpload({ folders, folderPath, maxBytes = DEFAULT_MAX_BYTES, onUploaded, onDone }: LibraryUploadProps) {
+  const [folder, setFolder] = useState(folderPath || ROOT);
+  const [picked, setPicked] = useState<File[]>([]);
+  const [notes, setNotes] = useState<string[]>([]);
+  const [outcome, setOutcome] = useState<Outcome | null>(null);
+  const input = useRef<HTMLInputElement>(null);
+  const choices = [...new Set([ROOT, ...folders.map((f) => f.full_path), folder])];
+
+  const choose = (list: FileList | null): void => {
+    const { ok, problems } = checkFiles(Array.from(list ?? []), LIBRARY_EXTENSIONS, fileLimit(maxBytes));
+    const over = ok.length > MAX_BATCH ? [`Add at most ${MAX_BATCH} files at a time; the first ${MAX_BATCH} are kept.`] : [];
+    setPicked(ok.slice(0, MAX_BATCH));
+    setNotes([...problems, ...over]);
+    setOutcome(null);
+  };
+
+  const send = useG8Mutation(
+    async (files: File[]): Promise<Outcome> => {
+      const total: Outcome = { added: 0, failed: [], warnings: [] };
+      for (const group of requestGroups(files, maxBytes)) {
+        try {
+          const part = await sendGroup(group, folder);
+          total.added += part.added;
+          total.failed.push(...part.failed);
+          total.warnings.push(...part.warnings);
+        } catch (err) {
+          // One request failing (a 413, a network error) fails only its own files; the next group is still tried.
+          total.failed.push(...group.map((f) => ({ filename: f.name, error: reasonOf(err) })));
+        }
+      }
+      return total;
+    },
+    {
+      onSuccess: (r, files) => {
+        setOutcome(r);
+        const failedNames = new Set(r.failed.map((f) => f.filename));
+        setPicked(files.filter((f) => failedNames.has(f.name)));
+        if (input.current) input.current.value = "";
+        onUploaded?.();
+      },
+      invalidates: [["documents"]],
+    },
+  );
+
+  const finished = outcome !== null && outcome.failed.length === 0;
+  return (
+    <form className="grid gap-3" onSubmit={(e) => { e.preventDefault(); if (picked.length > 0) void send.mutate(picked); }}>
+      <div>
+        <Label htmlFor="g8-du-folder" className="mb-1">Add to folder</Label>
+        <select id="g8-du-folder" className={SELECT} value={folder} onChange={(e) => setFolder(e.target.value)}>
+          {choices.map((p) => <option key={p} value={p}>{folderLabel(p)}</option>)}
+        </select>
+      </div>
+      <div>
+        <Label htmlFor="g8-du-files" className="mb-1">Files</Label>
+        <input ref={input} id="g8-du-files" type="file" multiple accept={LIBRARY_EXTENSIONS.map((e) => `.${e}`).join(",")} onChange={(e) => choose(e.target.files)} className="border-input bg-background w-full rounded-md border p-2 text-sm" />
+        <p className="text-muted-foreground mt-1 text-xs">{LIBRARY_EXTENSIONS.join(", ")}. Up to {fmtSize(fileLimit(maxBytes))} each. The server takes {fmtSize(maxBytes)} per request, so several files are sent in several requests. {MAX_BATCH} files at a time.</p>
+      </div>
+      {notes.length > 0 ? <ul role="alert" className="text-error list-disc pl-5 text-xs">{notes.map((n) => <li key={n}>{n}</li>)}</ul> : null}
+      {picked.length > 0 ? (
+        <ul aria-label="Files to add" className="divide-y rounded-md border text-sm">
+          {picked.map((f) => <li key={f.name} className="flex justify-between gap-2 p-2"><span className="truncate">{f.name}</span><span className="text-muted-foreground shrink-0">{fmtSize(f.size)}</span></li>)}
+        </ul>
+      ) : null}
+            {outcome ? (
+        <div role="status" className="grid gap-1 rounded-md border p-3 text-sm">
+          <p className="font-medium">{outcome.failed.length === 0 ? `${plural(outcome.added, "file")} added.` : `${outcome.added} added, ${outcome.failed.length} not added.`}</p>
+          {outcome.failed.map((f) => <p key={f.filename} className="text-error text-xs">{f.filename}: {f.error}</p>)}
+          {outcome.warnings.map((w) => <p key={w} className="text-muted-foreground text-xs">{w}</p>)}
+          {outcome.failed.length > 0 ? <p className="text-muted-foreground text-xs">Only the files that failed are still selected, so adding again will not duplicate the others.</p> : null}
+        </div>
+      ) : null}
+      <div className="flex gap-2">
+        {finished ? <Button type="button" onClick={onDone}>Done</Button> : <Button type="submit" loading={send.loading} disabled={picked.length === 0}>{picked.length > 1 ? `Add ${picked.length} files` : "Add file"}</Button>}
+        {!finished && onDone ? <Button type="button" variant="outline" onClick={onDone}>Close</Button> : null}
+      </div>
+    </form>
+  );
+}
+
+/** One request: a lone file through the single route, several through the batch route (partial success is normal there). */
+async function sendGroup(files: File[], folder: string): Promise<Outcome> {
+  const form = new FormData();
+  form.append("folder_path", folder);
+  if (files.length === 1) {
+    form.append("file", files[0]);
+    await g8Post("/library/documents/upload", form);
+    return { added: 1, failed: [], warnings: [] };
+  }
+  for (const f of files) form.append("files", f);
+  const data = (await g8Post<Rec>("/library/documents/upload-batch", form)).data ?? {};
+  const ok = Array.isArray(data.success) ? (data.success as Rec[]) : [];
+  const bad = Array.isArray(data.failed) ? (data.failed as Rec[]) : [];
+  return {
+    added: ok.length,
+    failed: bad.map((b) => ({ filename: String(b.filename ?? "A file"), error: String(b.error ?? "It could not be added.") })),
+    warnings: ok.filter((o) => o.warning).map((o) => `${String(o.filename ?? "A file")}: ${String(o.warning)}`),
+  };
+}

package/blocks/documents/components/question-row.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+/**
+ * QuestionRow: one question of a security questionnaire with the AI's answer and every review action.
+ *
+ * SDK operations, in order (each is one button; the row shows its own spinner and error):
+ *   1. updateQuestionnaireAnswer (PATCH .../questions/{question_id})            write  replace the answer with a human one; the AI's original is kept beside it
+ *   2. approveQuestionnaireAnswer (POST .../questions/{question_id}/approve)    write  confirm the answer is right (no text changes)
+ *   3. escalateQuestionnaireQuestion (POST .../escalate)                         write  hand it to the security team, with notes
+ *   4. skipQuestionnaireQuestion (POST .../mark-skip)                            write  not applicable to this organization; the workbook says so
+ *   5. flagQuestionnaireAnswer (POST .../mark-wrong)                             write  say the AI's answer is wrong so a person rewrites it
+ *   6. saveQuestionnaireAnswerToLibrary (POST .../save-to-library)               write  keep the answer as org knowledge: the NEXT questionnaire is answered from it
+ * Nothing here is billable, external or destructive. After any action the questionnaire is read again, so the row shows the
+ * state the API holds, never a guess.
+ */
+
+import { useState } from "react";
+import { BookmarkPlus, Check, Flag, MinusCircle, Pencil, UserRound } from "lucide-react";
+import { Button, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { answerOf, reviewState } from "../lib/documents-types";
+import type { Question, Rec } from "../lib/documents-types";
+
+export interface QuestionRowProps {
+  accountId: number | string;
+  questionnaireId: string;
+  question: Question;
+  /** Called after any action succeeds, so the questionnaire is read again. */
+  onChanged: () => void;
+}
+
+type Mode = null | "edit" | "escalate" | "skip" | "wrong";
+type Action = { kind: "edit"; text: string } | { kind: "approve" } | { kind: "escalate" | "skip" | "wrong"; notes: string } | { kind: "library" };
+
+const NOTE_COPY: Record<"escalate" | "skip" | "wrong", { label: string; confirm: string; hint: string }> = {
+  escalate: { label: "Notes for the security team", confirm: "Escalate", hint: "What the person picking this up needs to know." },
+  skip: { label: "Why it does not apply (optional)", confirm: "Mark not applicable", hint: "The filled workbook says this question does not apply." },
+  wrong: { label: "What is wrong with the answer (optional)", confirm: "Mark wrong", hint: "A person rewrites it; this does not change the text." },
+};
+
+export function QuestionRow({ accountId, questionnaireId, question: q, onChanged }: QuestionRowProps) {
+  const [mode, setMode] = useState<Mode>(null);
+  const [text, setText] = useState("");
+  const [saved, setSaved] = useState<string | null>(null);
+  const base = `/accounts/${encodeURIComponent(String(accountId))}/security-questionnaires/${encodeURIComponent(questionnaireId)}/questions/${encodeURIComponent(q.id)}`;
+  const state = reviewState(q);
+  const current = answerOf(q);
+
+  const run = useG8Mutation(
+    async (a: Action): Promise<Rec> => {
+      if (a.kind === "edit") return (await g8Patch<Rec>(base, { final_answer: a.text })).data;
+      if (a.kind === "approve") return (await g8Post<Rec>(`${base}/approve`)).data;
+      if (a.kind === "library") return (await g8Post<Rec>(`${base}/save-to-library`)).data;
+      const notes = a.notes.trim() || null;
+      if (a.kind === "escalate") return (await g8Post<Rec>(`${base}/escalate`, { notes })).data;
+      if (a.kind === "skip") return (await g8Post<Rec>(`${base}/mark-skip`, { notes })).data;
+      return (await g8Post<Rec>(`${base}/mark-wrong`, { notes })).data;
+    },
+    {
+      onSuccess: (_r, a) => {
+        setMode(null);
+        setSaved(a.kind === "library" ? "Saved to the answer library." : null);
+        onChanged();
+      },
+    },
+  );
+  const open = (m: Exclude<Mode, null>): void => { setMode(m); setText(m === "edit" ? current : ""); setSaved(null); };
+  const busy = run.loading;
+  const [pending, setPending] = useState<Action["kind"] | null>(null);
+  const go = async (a: Action): Promise<void> => {
+    setPending(a.kind);
+    await run.mutate(a);
+    setPending(null);
+  };
+  const spin = (k: Action["kind"]): boolean => busy && pending === k;
+
+  return (
+    <li className="grid gap-2 rounded-md border p-3" aria-label={q.question_text ?? "Question"}>
+      <div className="flex flex-wrap items-start justify-between gap-2">
+        <div className="min-w-0">
+          <p className="font-medium">{q.question_text || "Untitled question"}</p>
+          <p className="text-muted-foreground text-xs">{[q.question_topic, q.sheet_name, q.cell_reference].filter(Boolean).join(" · ") || "-"}</p>
+        </div>
+        <div className="flex shrink-0 gap-1">
+          <StatusPill tone={state.tone}>{state.label}</StatusPill>
+          {q.confidence && q.confidence !== "confirmed" && q.confidence !== "pending" ? <StatusPill tone="neutral" quiet>{q.confidence} confidence</StatusPill> : null}
+        </div>
+      </div>
+      {mode === "edit" ? (
+        <div className="grid gap-2">
+          <Textarea aria-label="Your answer" rows={5} value={text} onChange={(e) => setText(e.target.value)} />
+          <div className="flex gap-2">
+            <Button size="sm" loading={spin("edit")} disabled={busy || text.trim() === "" || text === current} onClick={() => void go({ kind: "edit", text })}>Save answer</Button>
+            <Button size="sm" variant="outline" disabled={busy} onClick={() => setMode(null)}>Cancel</Button>
+          </div>
+        </div>
+      ) : (
+        <p className="whitespace-pre-wrap text-sm">{current || <span className="text-muted-foreground">No answer yet.</span>}</p>
+      )}
+      {q.final_answer && q.answer_text ? <details className="text-xs"><summary className="text-muted-foreground cursor-pointer">AI answer before your edit</summary><p className="mt-1 whitespace-pre-wrap">{q.answer_text}</p></details> : null}
+      {(q.guardrail_warnings ?? []).length > 0 ? <ul className="text-warning-foreground list-disc pl-5 text-xs">{(q.guardrail_warnings ?? []).map((w) => <li key={w}>{w}</li>)}</ul> : null}
+      {q.escalation_notes ? <p className="text-muted-foreground text-xs">Note: {q.escalation_notes}</p> : null}
+      {mode === "escalate" || mode === "skip" || mode === "wrong" ? (
+        <div className="grid gap-2">
+          <Textarea aria-label={NOTE_COPY[mode].label} rows={3} value={text} placeholder={NOTE_COPY[mode].hint} onChange={(e) => setText(e.target.value)} />
+          <p className="text-muted-foreground text-xs">{NOTE_COPY[mode].label}</p>
+          <div className="flex gap-2">
+            <Button size="sm" loading={spin(mode)} disabled={busy} onClick={() => void go({ kind: mode, notes: text })}>{NOTE_COPY[mode].confirm}</Button>
+            <Button size="sm" variant="outline" disabled={busy} onClick={() => setMode(null)}>Cancel</Button>
+          </div>
+        </div>
+      ) : null}
+      {mode === null ? (
+        <div className="flex flex-wrap gap-1">
+          <Button size="sm" variant="ghost" disabled={busy} onClick={() => open("edit")}><Pencil className="size-4" />Edit answer</Button>
+          <Button size="sm" variant="ghost" loading={spin("approve")} disabled={busy || state.label === "Approved" || !current} onClick={() => void go({ kind: "approve" })}><Check className="size-4" />Approve</Button>
+          <Button size="sm" variant="ghost" disabled={busy} onClick={() => open("escalate")}><UserRound className="size-4" />Escalate</Button>
+          <Button size="sm" variant="ghost" disabled={busy} onClick={() => open("skip")}><MinusCircle className="size-4" />Not applicable</Button>
+          <Button size="sm" variant="ghost" disabled={busy || !q.answer_text} onClick={() => open("wrong")}><Flag className="size-4" />Wrong answer</Button>
+          <Button size="sm" variant="ghost" loading={spin("library")} disabled={busy || !current} onClick={() => void go({ kind: "library" })}><BookmarkPlus className="size-4" />Save to answer library</Button>
+        </div>
+      ) : null}
+      {saved ? <p role="status" className="text-xs">{saved}</p> : null}
+      {run.error ? <ApiError error={run.error} title="Could not update this question" compact /> : null}
+    </li>
+  );
+}

package/blocks/documents/components/questionnaire-detail.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+/**
+ * QuestionnaireDetail: one security questionnaire, the review loop on its questions, and its file actions.
+ *
+ * SDK operations, in order:
+ *   1. getSecurityQuestionnaire (GET .../security-questionnaires/{questionnaire_id})         read         the questionnaire with EVERY question and its answer
+ *   2. getSecurityQuestionnaireStatus (GET .../{questionnaire_id}/status)                     read         the cheap progress read, polled while it is still being answered
+ *   3. QuestionRow (update, approve, escalate, skip, flag, save to library)                   write        the review actions, one per button
+ *   4. downloadSecurityQuestionnaire (GET .../{questionnaire_id}/download)                    read         the FILLED workbook (XLSX bytes, not the JSON envelope); the API refuses it until the questionnaire is completed or needs review
+ *   5. updateSecurityQuestionnaire (PATCH .../{questionnaire_id})                             write        rename only; never touches an answer
+ *   6. deleteSecurityQuestionnaire (DELETE .../{questionnaire_id})                            DESTRUCTIVE  removes it AND every question; behind ConfirmSpendDialog
+ * Uploading a questionnaire (the billable step) lives in QuestionnairesPanel.
+ */
+
+import { useState } from "react";
+import { Download, Pencil, Trash2 } from "lucide-react";
+import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { useBrand } from "@/g8/hooks/use-brand";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { g8Delete, g8Get, g8Patch } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { plural } from "@/g8/lib/plural";
+import { downloadFile } from "../lib/download";
+import { canDownload, isWorking, percentOf, reviewState, statusInfo, when } from "../lib/documents-types";
+import type { Question, Questionnaire, QuestionnaireProgress, Rec } from "../lib/documents-types";
+import { QuestionRow } from "./question-row";
+
+export interface QuestionnaireDetailProps {
+  accountId: number;
+  questionnaire: Questionnaire;
+  /** The list should be read again (a rename, a delete, a status change). */
+  onChanged: () => void;
+  onClose: () => void;
+  onDeleted?: (q: Questionnaire) => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+}
+
+const PAGE = 25;
+const FILTERS = [
+  { id: "all", label: "All" },
+  { id: "attention", label: "Needs attention" },
+  { id: "approved", label: "Approved" },
+  { id: "skipped", label: "Not applicable" },
+] as const;
+
+const nameOf = (q: Questionnaire): string => q.display_name || q.original_file_name || "Untitled questionnaire";
+
+export function QuestionnaireDetail({ accountId, questionnaire, onChanged, onClose, onDeleted, onExpand, onCollapse }: QuestionnaireDetailProps) {
+  const brand = useBrand();
+  const [filter, setFilter] = useState<(typeof FILTERS)[number]["id"]>("all");
+  const [shown, setShown] = useState(PAGE);
+  const [renaming, setRenaming] = useState(false);
+  const [name, setName] = useState("");
+  const [deleting, setDeleting] = useState(false);
+  const [downloadError, setDownloadError] = useState<unknown>(undefined);
+  const [downloading, setDownloading] = useState(false);
+  const base = `/accounts/${encodeURIComponent(String(accountId))}/security-questionnaires/${encodeURIComponent(questionnaire.id)}`;
+
+  const full = useG8Query((signal) => g8Get<Questionnaire>(base, {}, { signal }).then((r) => r.data), [base], { key: ["documents", "questionnaire", accountId, questionnaire.id], placeholderData: questionnaire });
+  const q = full.data && full.data.id === questionnaire.id ? full.data : questionnaire;
+  const loaded = !full.isPlaceholderData && full.data?.id === questionnaire.id;
+  const poll = useJobPoll<QuestionnaireProgress>((signal) => g8Get<QuestionnaireProgress>(`${base}/status`, {}, { signal }).then((r) => r.data), {
+    enabled: isWorking(q.status),
+    intervalMs: 4000,
+    isTerminal: (s) => !isWorking(s.status),
+    onDone: () => { void full.refetch(); onChanged(); },
+  });
+  const live = poll.status ?? q;
+  const info = statusInfo(live.status ?? q.status);
+  const total = live.total_questions ?? q.total_questions ?? null;
+  const answered = live.answered_questions ?? q.answered_questions ?? null;
+  const pct = percentOf(answered, total);
+
+  const rename = useG8Mutation((next: string) => g8Patch<Rec>(base, { display_name: next.trim() || null }), {
+    onSuccess: () => { setRenaming(false); void full.refetch(); onChanged(); },
+  });
+  const remove = useG8Mutation(() => g8Delete(base), { onSuccess: () => { setDeleting(false); onChanged(); onDeleted?.(questionnaire); } });
+
+  const save = async (): Promise<void> => {
+    setDownloading(true);
+    setDownloadError(undefined);
+    try {
+      await downloadFile(`${base}/download`, `${(q.original_file_name || nameOf(q)).replace(/\.[a-z0-9]+$/i, "")}_filled.xlsx`);
+    } catch (err) {
+      setDownloadError(err);
+    } finally {
+      setDownloading(false);
+    }
+  };
+
+  const all = q.questions ?? [];
+  const keep = (x: Question): boolean => {
+    const s = reviewState(x).label;
+    if (filter === "approved") return s === "Approved";
+    if (filter === "skipped") return s === "Not applicable";
+    if (filter === "attention") return s !== "Approved" && s !== "Not applicable";
+    return true;
+  };
+  const visible = all.filter(keep);
+
+  const review = full.error && !loaded ? <ApiError error={full.error} title="Could not load this questionnaire" onRetry={() => void full.refetch()} /> : !loaded ? (
+    <Skeleton className="h-40 w-full" aria-label="Loading questions" />
+  ) : (
+    <div className="grid gap-3">
+      <div role="group" aria-label="Show questions" className="flex flex-wrap gap-1">
+        {FILTERS.map((f) => <Button key={f.id} size="sm" variant={filter === f.id ? "default" : "outline"} aria-pressed={filter === f.id} onClick={() => { setFilter(f.id); setShown(PAGE); }}>{f.label}</Button>)}
+      </div>
+      {all.length === 0 ? (
+        <EmptyState compact title={isWorking(live.status ?? q.status) ? "Questions are still being read" : "No questions"} description={q.status === "failed" ? "No questions could be read from this file." : `Questions appear here as ${brand.name} reads the file.`} />
+      ) : visible.length === 0 ? (
+        <EmptyState compact title="No questions here" description="Try another view." />
+      ) : (
+        <>
+          <p role="status" className="text-muted-foreground text-xs">{visible.length === all.length ? plural(all.length, "question") : `${visible.length} of ${plural(all.length, "question")}`}</p>
+          <ul className="grid gap-2" aria-label="Questions">
+            {visible.slice(0, shown).map((x) => <QuestionRow key={x.id} accountId={accountId} questionnaireId={questionnaire.id} question={x} onChanged={() => { void full.refetch(); onChanged(); }} />)}
+          </ul>
+          {visible.length > shown ? <Button variant="outline" onClick={() => setShown((n) => n + PAGE)}>Show {Math.min(PAGE, visible.length - shown)} more</Button> : null}
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <>
+      <DetailPanel
+        title={nameOf(q)}
+        subtitle={q.original_file_name && q.original_file_name !== nameOf(q) ? q.original_file_name : undefined}
+        badges={<StatusPill tone={info.tone}>{info.label}</StatusPill>}
+        actions={(
+          <>
+            <Button size="sm" variant="outline" disabled={!loaded} onClick={() => { setName(q.display_name ?? ""); setRenaming(true); }}><Pencil className="size-4" />Rename</Button>
+            <Button size="sm" variant="outline" loading={downloading} disabled={!canDownload(q.status)} title={canDownload(q.status) ? undefined : "The filled workbook is available once the questionnaire is completed or needs review."} onClick={() => void save()}><Download className="size-4" />Download filled workbook</Button>
+            <Button size="sm" variant="outline" onClick={() => setDeleting(true)}><Trash2 className="size-4" />Delete</Button>
+          </>
+        )}
+        onClose={onClose}
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+        summary={(
+          <div className="grid gap-2 px-4 pt-3">
+            <p className="text-sm" role="status">{total != null ? `${answered ?? "-"} of ${plural(total, "question")} answered${pct != null ? ` (${pct}%)` : ""}.` : "Reading the file."}{live.escalated_questions ? ` ${live.escalated_questions} escalated.` : ""}</p>
+            {pct != null ? <div role="progressbar" aria-valuenow={pct} aria-valuemin={0} aria-valuemax={100} aria-label="Answered" className="bg-muted h-1.5 overflow-hidden rounded-full"><div className="bg-foreground h-full" style={{ width: `${pct}%` }} /></div> : null}
+            {q.status === "failed" && (live.error_message || q.error_message) ? <p role="alert" className="text-error text-sm">{live.error_message || q.error_message}</p> : null}
+            {poll.error ? <ApiError error={poll.error} title="Could not check progress" compact onRetry={poll.start} /> : null}
+            {downloadError ? <ApiError error={downloadError} title="Could not download the workbook" compact /> : null}
+          </div>
+        )}
+        tabs={[
+          { id: "review", label: "Review", content: review, count: loaded ? all.length : undefined },
+          { id: "details", label: "Details", content: (
+            <KeyValueList columns={2} items={[
+              { label: "Name", value: q.display_name },
+              { label: "File", value: q.original_file_name },
+              { label: "File type", value: q.original_file_type ? q.original_file_type.toUpperCase() : "" },
+              { label: "Status", value: info.label },
+              { label: "Questions", value: total != null ? String(total) : "" },
+              { label: "Answered", value: answered != null ? String(answered) : "" },
+              { label: "Escalated", value: q.escalated_questions != null ? String(q.escalated_questions) : "" },
+              { label: "Uploaded", value: when(q.created_at) },
+              { label: "Completed", value: when(q.completed_at) },
+              { label: "Questionnaire id", value: q.id, mono: true },
+            ]} />
+          ) },
+        ]}
+      />
+      <FormSheet open={renaming} onOpenChange={setRenaming} title="Rename questionnaire" description="The name is only a label. No answer changes.">
+        <form className="grid gap-3" onSubmit={(e) => { e.preventDefault(); void rename.mutate(name); }}>
+          <div><Label htmlFor="g8-qd-name" className="mb-1">Name</Label><Input id="g8-qd-name" value={name} onChange={(e) => setName(e.target.value)} placeholder={q.original_file_name ?? "Questionnaire"} /><p className="text-muted-foreground mt-1 text-xs">Left blank, the file name is shown.</p></div>
+          {rename.error ? <ApiError error={rename.error} title="Could not rename the questionnaire" /> : null}
+          <div className="flex gap-2"><Button type="submit" loading={rename.loading} disabled={name.trim() === (q.display_name ?? "")}>Save name</Button><Button type="button" variant="outline" onClick={() => setRenaming(false)}>Cancel</Button></div>
+        </form>
+      </FormSheet>
+      <ConfirmSpendDialog
+        open={deleting}
+        tier="destructive"
+        title={`Delete ${nameOf(q)}?`}
+        affected={1}
+        description={<><p>The questionnaire and {total != null ? plural(total, "question") : "every question"} with their answers are removed. This cannot be undone. Answers you saved to the answer library stay there.</p>{remove.error ? <ApiError error={remove.error} title="Could not delete the questionnaire" /> : null}</>}
+        confirmLabel="Delete"
+        confirming={remove.loading}
+        onCancel={() => setDeleting(false)}
+        onConfirm={() => void remove.mutate(undefined)}
+      />
+    </>
+  );
+}