feat: build audit outreach review workspace

components/dashboard-sidebar.tsx

@@ -55,6 +55,7 @@ export function DashboardSidebar() {
               )}
               href={item.href}
               key={item.href}
+              prefetch={false}
             >
               <Icon className="size-4" />
               <span>{item.label}</span>

components/dashboard-theme.tsx

@@ -6,7 +6,7 @@ import {
   type ReactNode,
   useContext,
   useMemo,
-  useState,
+  useSyncExternalStore,
 } from "react";
 
 import { Button } from "@/components/ui/button";
@@ -20,34 +20,49 @@ type DashboardThemeContextValue = {
 };
 
 const storageKey = "webdev-dashboard-theme";
+const themeChangeEvent = "webdev-dashboard-theme-change";
 
 const DashboardThemeContext =
   createContext<DashboardThemeContextValue | null>(null);
 
+function isDashboardTheme(value: string | null): value is DashboardTheme {
+  return value === "dark" || value === "light";
+}
+
+function getStoredDashboardTheme(): DashboardTheme {
+  const storedTheme = window.localStorage.getItem(storageKey);
+
+  return isDashboardTheme(storedTheme) ? storedTheme : "light";
+}
+
+function getServerDashboardTheme(): DashboardTheme {
+  return "light";
+}
+
+function subscribeToDashboardTheme(onStoreChange: () => void) {
+  window.addEventListener("storage", onStoreChange);
+  window.addEventListener(themeChangeEvent, onStoreChange);
+
+  return () => {
+    window.removeEventListener("storage", onStoreChange);
+    window.removeEventListener(themeChangeEvent, onStoreChange);
+  };
+}
+
 export function DashboardThemeProvider({ children }: { children: ReactNode }) {
-  const [theme, setTheme] = useState<DashboardTheme>(() => {
-    if (typeof window === "undefined") {
-      return "light";
-    }
-
-    const storedTheme = window.localStorage.getItem(storageKey);
-
-    if (storedTheme === "dark" || storedTheme === "light") {
-      return storedTheme;
-    }
-
-    return "light";
-  });
+  const theme = useSyncExternalStore(
+    subscribeToDashboardTheme,
+    getStoredDashboardTheme,
+    getServerDashboardTheme,
+  );
 
   const value = useMemo<DashboardThemeContextValue>(
     () => ({
       theme,
       toggleTheme: () => {
-        setTheme((currentTheme) => {
-          const nextTheme = currentTheme === "dark" ? "light" : "dark";
-          window.localStorage.setItem(storageKey, nextTheme);
-          return nextTheme;
-        });
+        const nextTheme = theme === "dark" ? "light" : "dark";
+        window.localStorage.setItem(storageKey, nextTheme);
+        window.dispatchEvent(new Event(themeChangeEvent));
       },
     }),
     [theme],

components/lead-funnel-board.tsx

@@ -170,6 +170,7 @@ function LeadFunnelCardView({ card }: { card: LeadFunnelCard }) {
       <Link
         className="mt-3 inline-flex min-h-8 items-center gap-1 rounded-md text-sm font-medium text-primary outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/50"
         href={stageActionHref[card.stageId]}
+        prefetch={false}
       >
         {card.nextAction}
         <ArrowRight className="size-4" />

components/outreach/outreach-review-workspace.tsx

@@ -0,0 +1,647 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { useMutation, useQuery } from "convex/react";
+import type { FunctionReturnType } from "convex/server";
+import { ChevronDown, ChevronRight, ExternalLink, MailCheck, Save } from "lucide-react";
+import Link from "next/link";
+
+import { api } from "@/convex/_generated/api";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+type ReviewWorkspaceListResult = FunctionReturnType<
+  typeof api.outreach.listReviewWorkspace
+>;
+type ReviewWorkspaceItem = NonNullable<ReviewWorkspaceListResult>[number];
+type UsedSkill = ReviewWorkspaceItem["usedSkills"][number];
+
+type DraftState = {
+  auditBody: string;
+  auditSummary: string;
+  emailBody: string;
+  emailSubject: string;
+  followUpDraft: string;
+  phoneScript: string;
+};
+
+const emptyDraft: DraftState = {
+  auditBody: "",
+  auditSummary: "",
+  emailBody: "",
+  emailSubject: "",
+  followUpDraft: "",
+  phoneScript: "",
+};
+
+const textAreaClassName =
+  "min-h-24 w-full rounded-md border border-input bg-background px-2.5 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50";
+
+function getDraft(record: ReviewWorkspaceItem): DraftState {
+  const outreach = record.latestOutreach;
+
+  return {
+    auditBody: record.audit?.publicBody ?? "",
+    auditSummary: record.audit?.publicSummary ?? "",
+    emailBody: outreach?.emailBody ?? "",
+    emailSubject: outreach?.emailSubject ?? "",
+    followUpDraft: outreach?.followUpDraft ?? "",
+    phoneScript: outreach?.phoneScript ?? "",
+  };
+}
+
+function compactText(value?: string | null, fallback = "Offen") {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : fallback;
+}
+
+function formatStrategy(strategy?: string | null) {
+  const labels: Record<string, string> = {
+    call_first: "Erst anrufen",
+    defer: "Zurückstellen",
+    do_not_contact: "Nicht kontaktieren",
+    email_first: "Erst E-Mail",
+  };
+
+  return strategy ? labels[strategy] ?? strategy : "Strategie offen";
+}
+
+function formatRaw(value: unknown) {
+  if (value === undefined || value === null) {
+    return "Keine Rohdaten vorhanden.";
+  }
+
+  return JSON.stringify(value, null, 2);
+}
+
+function skillLabel(skill: UsedSkill) {
+  const name = compactText(skill?.name, "Skill");
+  return skill.category ? `${name} · ${skill.category}` : name;
+}
+
+function DetailToggle({
+  isOpen,
+  label,
+  onClick,
+}: {
+  isOpen: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  const Icon = isOpen ? ChevronDown : ChevronRight;
+
+  return (
+    <Button
+      aria-expanded={isOpen}
+      onClick={onClick}
+      size="sm"
+      type="button"
+      variant="outline"
+    >
+      <Icon className="size-3.5" />
+      {label}
+    </Button>
+  );
+}
+
+function FieldPair({ label, value }: { label: string; value?: string | null }) {
+  return (
+    <div className="min-w-0">
+      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
+      <dd className="mt-1 break-words text-sm">{compactText(value)}</dd>
+    </div>
+  );
+}
+
+function WorkspaceLoading() {
+  return (
+    <section className="space-y-4">
+      <header className="space-y-2">
+        <p className="text-sm text-muted-foreground">Interne Outreach-Prüfung</p>
+        <h1 className="text-2xl font-semibold tracking-normal">Review Workspace</h1>
+      </header>
+      <div className="space-y-3">
+        {Array.from({ length: 3 }, (_, index) => (
+          <Skeleton className="h-56 rounded-lg" key={index} />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export function OutreachReviewWorkspace() {
+  const records = useQuery(api.outreach.listReviewWorkspace, { limit: 100 });
+  const saveReviewDraft = useMutation(api.outreach.saveReviewDraft);
+  const approveEmailDraft = useMutation(api.outreach.approveEmailDraft);
+  const savePublicAuditContent = useMutation(api.audits.savePublicAuditContent);
+  const publishPublicAudit = useMutation(api.audits.publishPublicAudit);
+
+  const [drafts, setDrafts] = useState<Record<string, DraftState>>({});
+  const [openSources, setOpenSources] = useState<Record<string, boolean>>({});
+  const [openRaw, setOpenRaw] = useState<Record<string, boolean>>({});
+  const [busyAction, setBusyAction] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+
+  const rows = useMemo(() => records ?? [], [records]);
+
+  if (records === undefined) {
+    return <WorkspaceLoading />;
+  }
+
+  if (rows.length === 0) {
+    return (
+      <section className="space-y-4">
+        <header className="space-y-2">
+          <p className="text-sm text-muted-foreground">Interne Outreach-Prüfung</p>
+          <h1 className="text-2xl font-semibold tracking-normal">Review Workspace</h1>
+        </header>
+        <Card>
+          <CardContent className="p-4">
+            <p className="text-sm font-medium">Keine offenen Reviews</p>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Sobald Audit- und Outreach-Entwürfe bereitstehen, erscheinen sie hier.
+            </p>
+          </CardContent>
+        </Card>
+      </section>
+    );
+  }
+
+  const updateDraft = (
+    id: string,
+    field: keyof DraftState,
+    value: string,
+  ) => {
+    const record = rows.find((row) => row.id === id);
+
+    setDrafts((current) => ({
+      ...current,
+      [id]: {
+        ...(current[id] ?? (record ? getDraft(record) : emptyDraft)),
+        [field]: value,
+      },
+    }));
+  };
+
+  const saveAudit = async (record: ReviewWorkspaceItem) => {
+    const auditId = record.audit?._id;
+    if (!auditId) {
+      setNotice("Audit kann ohne Audit-ID nicht gespeichert werden.");
+      return;
+    }
+
+    setBusyAction(`${record.id}:audit-save`);
+    setNotice(null);
+    try {
+      const draft = drafts[record.id] ?? getDraft(record);
+      await savePublicAuditContent({
+        id: auditId,
+        publicBody: draft.auditBody,
+        publicSummary: draft.auditSummary,
+      });
+      setNotice("Audit-Änderungen gespeichert.");
+    } catch {
+      setNotice("Audit-Änderungen konnten nicht gespeichert werden.");
+    } finally {
+      setBusyAction(null);
+    }
+  };
+
+  const publishAudit = async (record: ReviewWorkspaceItem) => {
+    const auditId = record.audit?._id;
+    if (!auditId) {
+      setNotice("Audit kann ohne Audit-ID nicht veröffentlicht werden.");
+      return;
+    }
+
+    setBusyAction(`${record.id}:audit-publish`);
+    setNotice(null);
+    try {
+      const draft = drafts[record.id] ?? getDraft(record);
+      await savePublicAuditContent({
+        id: auditId,
+        publicBody: draft.auditBody,
+        publicSummary: draft.auditSummary,
+      });
+      await publishPublicAudit({ id: auditId });
+      setNotice("Audit veröffentlicht.");
+    } catch {
+      setNotice("Audit konnte nicht veröffentlicht werden.");
+    } finally {
+      setBusyAction(null);
+    }
+  };
+
+  const saveOutreach = async (record: ReviewWorkspaceItem) => {
+    const outreach = record.latestOutreach;
+    if (!outreach) {
+      setNotice("Outreach-Entwurf kann ohne Outreach-ID nicht gespeichert werden.");
+      return;
+    }
+
+    const draft = drafts[record.id] ?? getDraft(record);
+    const strategy = outreach.strategy;
+    const hasCallablePhone =
+      Boolean(record.lead?.phone) &&
+      (strategy === "call_first" ||
+        record.lead?.contactStatus === "missing_contact");
+
+    setBusyAction(`${record.id}:outreach-save`);
+    setNotice(null);
+    try {
+      await saveReviewDraft({
+        id: outreach._id,
+        strategy,
+        emailBody: draft.emailBody,
+        emailSubject: draft.emailSubject,
+        followUpDraft: draft.followUpDraft,
+        ...(hasCallablePhone ? { phoneScript: draft.phoneScript } : {}),
+      });
+      setNotice("Outreach-Entwurf gespeichert.");
+    } catch {
+      setNotice("Outreach-Entwurf konnte nicht gespeichert werden.");
+    } finally {
+      setBusyAction(null);
+    }
+  };
+
+  const approveEmail = async (record: ReviewWorkspaceItem) => {
+    const outreach = record.latestOutreach;
+    if (!outreach) {
+      setNotice("E-Mail kann ohne Outreach-ID nicht freigegeben werden.");
+      return;
+    }
+
+    const draft = drafts[record.id] ?? getDraft(record);
+    const strategy = outreach.strategy;
+    const hasCallablePhone =
+      Boolean(record.lead?.phone) &&
+      (strategy === "call_first" ||
+        record.lead?.contactStatus === "missing_contact");
+
+    setBusyAction(`${record.id}:email-approval`);
+    setNotice(null);
+    try {
+      await saveReviewDraft({
+        id: outreach._id,
+        strategy,
+        emailBody: draft.emailBody,
+        emailSubject: draft.emailSubject,
+        followUpDraft: draft.followUpDraft,
+        ...(hasCallablePhone ? { phoneScript: draft.phoneScript } : {}),
+      });
+      await approveEmailDraft({ id: outreach._id });
+      setNotice("E-Mail freigegeben.");
+    } catch {
+      setNotice("E-Mail konnte nicht freigegeben werden.");
+    } finally {
+      setBusyAction(null);
+    }
+  };
+
+  return (
+    <section className="space-y-4">
+      <header className="space-y-2">
+        <p className="text-sm text-muted-foreground">Interne Outreach-Prüfung</p>
+        <h1 className="text-2xl font-semibold tracking-normal">Review Workspace</h1>
+        <p className="max-w-3xl text-sm text-muted-foreground">
+          Audits, E-Mail-Empfehlung und Telefonnotizen prüfen, bevor etwas öffentlich
+          wird oder eine Freigabe erhält.
+        </p>
+      </header>
+
+      {notice ? (
+        <p className="rounded-md border bg-muted/30 px-3 py-2 text-sm">{notice}</p>
+      ) : null}
+
+      <div className="space-y-3">
+        {rows.map((record) => {
+          const draft = drafts[record.id] ?? getDraft(record);
+          const lead = record.lead;
+          const audit = record.audit;
+          const outreach = record.latestOutreach;
+          const strategy = outreach?.strategy;
+          const contactSources = [
+            lead.email ? `E-Mail: ${lead.email}` : null,
+            lead.phone ? `Telefon: ${lead.phone}` : null,
+            ...record.sourceSummaries.emailCandidates.map(
+              (candidate) =>
+                `${candidate.email} · ${candidate.emailSource}${
+                  candidate.accepted ? " · akzeptiert" : ""
+                }`,
+            ),
+          ].filter((source): source is string => Boolean(source));
+          const skills = record.usedSkills;
+          const hasCallablePhone =
+            Boolean(lead?.phone) &&
+            (strategy === "call_first" ||
+              lead?.contactStatus === "missing_contact");
+          const publicAuditHref = audit?.slug ? `/audit/${audit.slug}` : null;
+
+          return (
+            <Card className="overflow-hidden" key={record.id}>
+              <CardHeader className="gap-3 border-b bg-muted/20 p-4">
+                <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+                  <div className="min-w-0 space-y-1">
+                    <CardTitle className="break-words text-lg">
+                      {compactText(lead?.companyName, "Unbenannter Lead")}
+                    </CardTitle>
+                    <p className="break-all text-sm text-muted-foreground">
+                      {compactText(
+                        lead?.websiteDomain ?? lead?.websiteUrl,
+                        "Keine Domain",
+                      )}
+                    </p>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    <Badge variant="secondary">{formatStrategy(strategy)}</Badge>
+                    <Badge variant="outline">
+                      {compactText(lead?.contactStatus, "Kontaktstatus offen")}
+                    </Badge>
+                    <Badge variant="outline">
+                      {compactText(audit?.status, "Auditstatus offen")}
+                    </Badge>
+                  </div>
+                </div>
+              </CardHeader>
+
+              <CardContent className="space-y-5 p-4">
+                <section className="grid gap-4 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)]">
+                  <div className="space-y-3">
+                    <h2 className="text-sm font-semibold">Lead-Details</h2>
+                    <dl className="grid gap-3 sm:grid-cols-2">
+                      <FieldPair label="Nische" value={lead?.niche} />
+                      <FieldPair
+                        label="Ort"
+                        value={[lead?.postalCode, lead?.city].filter(Boolean).join(" ")}
+                      />
+                      <FieldPair label="Ansprechperson" value={lead?.contactPerson} />
+                      <FieldPair label="E-Mail" value={lead?.email} />
+                      <FieldPair label="Telefon" value={lead?.phone} />
+                      <FieldPair label="Quelle" value={lead?.googleMapsUrl} />
+                    </dl>
+                    <div className="space-y-1">
+                      <h3 className="text-xs font-medium text-muted-foreground">
+                        Prioritätsgrund
+                      </h3>
+                      <p className="break-words text-sm">
+                        {compactText(lead?.priorityReason)}
+                      </p>
+                    </div>
+                    <div className="space-y-1">
+                      <h3 className="text-xs font-medium text-muted-foreground">
+                        Kontaktstrategie
+                      </h3>
+                      <p className="text-sm">{formatStrategy(strategy)}</p>
+                    </div>
+                  </div>
+
+                  <div className="space-y-3">
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <h2 className="text-sm font-semibold">Audit-Zusammenfassung</h2>
+                      {publicAuditHref ? (
+                        <Button asChild size="sm" type="button" variant="outline">
+                          <Link href={publicAuditHref}>
+                            <ExternalLink className="size-3.5" />
+                            Public-Audit
+                          </Link>
+                        </Button>
+                      ) : (
+                        <span className="text-sm text-muted-foreground">
+                          Public-Audit ohne Slug
+                        </span>
+                      )}
+                    </div>
+
+                    <label className="block space-y-1">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        Public-Audit Slug
+                      </span>
+                      <span className="block break-all text-sm">
+                        {compactText(audit?.slug, "Slug offen")}
+                      </span>
+                    </label>
+
+                    <label className="block space-y-1">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        Audit Kurzfassung
+                      </span>
+                      <textarea
+                        className={cn(textAreaClassName, "min-h-20")}
+                        onChange={(event) =>
+                          updateDraft(record.id, "auditSummary", event.target.value)
+                        }
+                        value={draft.auditSummary}
+                      />
+                    </label>
+
+                    <label className="block space-y-1">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        Audit öffentlicher Text
+                      </span>
+                      <textarea
+                        className={cn(textAreaClassName, "min-h-28")}
+                        onChange={(event) =>
+                          updateDraft(record.id, "auditBody", event.target.value)
+                        }
+                        value={draft.auditBody}
+                      />
+                    </label>
+
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        disabled={busyAction === `${record.id}:audit-save`}
+                        onClick={() => saveAudit(record)}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                      >
+                        <Save className="size-3.5" />
+                        Änderungen speichern
+                      </Button>
+                      <Button
+                        disabled={busyAction === `${record.id}:audit-publish`}
+                        onClick={() => publishAudit(record)}
+                        size="sm"
+                        type="button"
+                      >
+                        Audit veröffentlichen
+                      </Button>
+                    </div>
+                  </div>
+                </section>
+
+                <section className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                  <div className="space-y-3">
+                    <h2 className="text-sm font-semibold">Empfohlene E-Mail</h2>
+                    <label className="block space-y-1">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        E-Mail-Betreff
+                      </span>
+                      <Input
+                        aria-label="E-Mail-Betreff"
+                        onChange={(event) =>
+                          updateDraft(record.id, "emailSubject", event.target.value)
+                        }
+                        value={draft.emailSubject}
+                      />
+                    </label>
+                    <label className="block space-y-1">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        E-Mail-Text
+                      </span>
+                      <textarea
+                        aria-label="E-Mail-Text"
+                        className={cn(textAreaClassName, "min-h-40")}
+                        onChange={(event) =>
+                          updateDraft(record.id, "emailBody", event.target.value)
+                        }
+                        value={draft.emailBody}
+                      />
+                    </label>
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        disabled={busyAction === `${record.id}:outreach-save`}
+                        onClick={() => saveOutreach(record)}
+                        size="sm"
+                        type="button"
+                        variant="outline"
+                      >
+                        <Save className="size-3.5" />
+                        Änderungen speichern
+                      </Button>
+                      <Button
+                        disabled={busyAction === `${record.id}:email-approval`}
+                        onClick={() => approveEmail(record)}
+                        size="sm"
+                        type="button"
+                      >
+                        <MailCheck className="size-3.5" />
+                        E-Mail freigeben
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-3">
+                    <h2 className="text-sm font-semibold">Telefon & Follow-up</h2>
+                    {hasCallablePhone ? (
+                      <label className="block space-y-1">
+                        <span className="text-xs font-medium text-muted-foreground">
+                          Telefon-Skript
+                        </span>
+                        <textarea
+                          className={cn(textAreaClassName, "min-h-32")}
+                          onChange={(event) =>
+                            updateDraft(record.id, "phoneScript", event.target.value)
+                          }
+                          value={draft.phoneScript}
+                        />
+                      </label>
+                    ) : (
+                      <p className="rounded-md border bg-muted/20 px-3 py-2 text-sm text-muted-foreground">
+                        Kein Telefon-Skript erforderlich.
+                      </p>
+                    )}
+
+                    <label className="block space-y-1">
+                      <span className="text-xs font-medium text-muted-foreground">
+                        Follow-up-Draft
+                      </span>
+                      <textarea
+                        className={cn(textAreaClassName, "min-h-28")}
+                        onChange={(event) =>
+                          updateDraft(record.id, "followUpDraft", event.target.value)
+                        }
+                        value={draft.followUpDraft}
+                      />
+                    </label>
+                  </div>
+                </section>
+
+                <section className="space-y-3">
+                  <div className="flex flex-wrap gap-2">
+                    <DetailToggle
+                      isOpen={Boolean(openSources[record.id])}
+                      label="Quellen anzeigen"
+                      onClick={() =>
+                        setOpenSources((current) => ({
+                          ...current,
+                          [record.id]: !current[record.id],
+                        }))
+                      }
+                    />
+                    <DetailToggle
+                      isOpen={Boolean(openRaw[record.id])}
+                      label="Raw anzeigen"
+                      onClick={() =>
+                        setOpenRaw((current) => ({
+                          ...current,
+                          [record.id]: !current[record.id],
+                        }))
+                      }
+                    />
+                  </div>
+
+                  {openSources[record.id] ? (
+                    <div className="grid gap-3 rounded-md border bg-muted/20 p-3 lg:grid-cols-2">
+                      <div className="min-w-0 space-y-2">
+                        <h2 className="text-sm font-semibold">Kontaktquellen</h2>
+                        {contactSources.length > 0 ? (
+                          <ul className="space-y-1 text-sm">
+                            {contactSources.map((source, index) => (
+                              <li className="break-words" key={`${source}-${index}`}>
+                                {source}
+                              </li>
+                            ))}
+                          </ul>
+                        ) : (
+                          <p className="text-sm text-muted-foreground">
+                            Keine Kontaktquellen hinterlegt.
+                          </p>
+                        )}
+                      </div>
+                      <div className="min-w-0 space-y-2">
+                        <h2 className="text-sm font-semibold">Verwendete Skills</h2>
+                        {skills.length > 0 ? (
+                          <div className="flex flex-wrap gap-2">
+                            {skills.map((skill, index) => (
+                              <Badge key={index} variant="outline">
+                                {skillLabel(skill)}
+                              </Badge>
+                            ))}
+                          </div>
+                        ) : (
+                          <p className="text-sm text-muted-foreground">
+                            Keine Skills dokumentiert.
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  ) : null}
+
+                  {openRaw[record.id] ? (
+                    <pre className="max-h-72 overflow-auto rounded-md border bg-muted/20 p-3 text-xs whitespace-pre-wrap">
+                      {formatRaw({
+                        audit,
+                        auditGenerations: record.auditGenerations,
+                        latestOutreach: outreach,
+                        lead,
+                        skillSummaries: record.skillSummaries,
+                        sourceSummaries: record.sourceSummaries,
+                      })}
+                    </pre>
+                  ) : null}
+                </section>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}