failproofai 1.0.3 → 1.0.4-beta.2

package/.next/standalone/app/audit/_components/audit-dashboard.tsx

@@ -3,8 +3,8 @@
 /**
  * Top-level client wrapper for /audit.
  *
- * Composes the calm personality report: classify the agent into one of
- * 8 archetypes, derive a score, and render the 5-section flow:
+ * The old five-section personality report is SWITCHED OFF and being rebuilt
+ * bottom-up around leak detection. What it used to compose:
  *
  *   01 AuditPoster — single-screen shareable poster
  *   02 StrengthsSection — what it's great at
@@ -12,23 +12,36 @@
  *   04 HowToImproveSection — install / configure
  *   05 ComeBackBetterSection — spread the audit (invite)
  *
+ * Every one of those components, and the score / persona / strengths / findings
+ * modules behind them, is intact and still unit-tested — only the renders and
+ * the imports here are commented out, so restoring any of it is deleting a pair
+ * of comment markers. See the header of `src/audit/scoring.ts` for why.
+ *
+ * What this page renders now is `AuditReportPlaceholder`: the scan's own
+ * numbers. The scan, the 12-CLI transcript reader and the emailed digest all
+ * still run.
+ *
  * Empty / running states fall back to EmptyState and RunProgress.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getAuditResultAction } from "@/app/actions/get-audit-result";
 import type { AuditResult, RunAuditOptions } from "@/src/audit/types";
-import { classifyAgent } from "@/src/audit/archetypes";
-import { deriveScore, gradeFor, projectedScore } from "@/src/audit/scoring";
-import { deriveStrengths } from "@/src/audit/strengths";
-import { deriveFindings } from "@/src/audit/findings";
+// import { classifyAgent } from "@/src/audit/archetypes";
+// Score switched off — see the header of `src/audit/scoring.ts`.
+// import { deriveScore, gradeFor, projectedScore } from "@/src/audit/scoring";
+// import { deriveStrengths } from "@/src/audit/strengths";
+// import { deriveFindings } from "@/src/audit/findings";
 import { usePostHog } from "@/contexts/PostHogContext";
 
-import { AuditPoster } from "./audit-poster";
-import { StrengthsSection } from "./strengths-section";
-import { QuirksSection } from "./quirks-section";
-import { HowToImproveSection } from "./how-to-improve-section";
-import { ComeBackBetterSection } from "./come-back-better-section";
+// The old report's five sections — switched off, not deleted. Each component
+// file and its tests are untouched; only this render is commented out.
+// import { AuditPoster } from "./audit-poster";
+// import { StrengthsSection } from "./strengths-section";
+// import { QuirksSection } from "./quirks-section";
+// import { HowToImproveSection } from "./how-to-improve-section";
+// import { ComeBackBetterSection } from "./come-back-better-section";
 import { ReportFooter } from "./report-footer";
+import { LeakSection } from "./leak-section";
 import { EmptyState } from "./empty-state";
 import { RunProgress } from "./run-progress";
 import { AuditProgressStrip, type RerunStatus } from "./audit-progress-strip";
@@ -59,6 +72,9 @@ interface Props {
   totalCatalogSize: number;
 }
 
+/* Switched off with the persona layer — this named the project that seeded the
+   archetype classifier and the leaderboard row. Restore alongside
+   `classifyAgent` in this file.
 function inferProjectName(result: AuditResult, override?: string): string {
   if (override && override.trim()) return override;
   // Pick the cwd that appears in the most examples — proxy for "your
@@ -81,6 +97,7 @@ function inferProjectName(result: AuditResult, override?: string): string {
   if (segs.length >= 2) return `${segs[segs.length - 2]} / ${segs[segs.length - 1]}`;
   return segs[segs.length - 1] ?? "your agent";
 }
+*/
 
 export function AuditDashboard({ initial, projectFromUrl, totalCatalogSize }: Props) {
   const [cache, setCache] = useState<Initial>(initial);
@@ -279,16 +296,22 @@ function MainReport({
   onDismissRerun,
 }: MainReportProps) {
   const { capture } = usePostHog();
-  const project = useMemo(() => inferProjectName(result, projectFromUrl), [result, projectFromUrl]);
+  // Only fed the persona classifier, which is switched off with it.
+  // const project = useMemo(() => inferProjectName(result, projectFromUrl), [result, projectFromUrl]);
   // Seed classification with the project name so the behaviour fingerprint
   // (used for tie-breaks + copy variants) is stable per project.
-  const classification = useMemo(() => classifyAgent(result, project), [result, project]);
-  const score = useMemo(() => deriveScore(result), [result]);
-  const projected = useMemo(() => projectedScore(result, score), [result, score]);
-  const grade = gradeFor(score);
-  const projectedGrade = gradeFor(projected);
-  const strengths = useMemo(() => deriveStrengths(result), [result]);
-  const findings = useMemo(() => deriveFindings(result), [result]);
+  // Persona classification is switched off with the rest of the old report. Its
+  // last live use was two telemetry properties describing a persona the product
+  // no longer shows anyone.
+  // const classification = useMemo(() => classifyAgent(result, project), [result, project]);
+  // Score switched off — see the header of `src/audit/scoring.ts`. The four
+  // functions are intact and still unit-tested; nothing calls them.
+  // const score = useMemo(() => deriveScore(result), [result]);
+  // const projected = useMemo(() => projectedScore(result, score), [result, score]);
+  // const grade = gradeFor(score);
+  // const projectedGrade = gradeFor(projected);
+  // const strengths = useMemo(() => deriveStrengths(result), [result]);
+  // const findings = useMemo(() => deriveFindings(result), [result]);
 
   // One pass over result.results: detectors triggered + missing prescribed
   // policies. Both feed PostHog instrumentation; `missing` also feeds the
@@ -310,10 +333,13 @@ function MainReport({
     if (dashboardViewedRef.current) return;
     dashboardViewedRef.current = true;
     capture("audit_dashboard_viewed", {
-      score,
-      grade,
-      archetype: classification.archetype,
-      secondary: classification.secondary ?? null,
+      // Score switched off — see `src/audit/scoring.ts`. `missing` is the
+      // prescription's denominator and is unaffected, so the copy→install
+      // funnel keeps both of its ends.
+      // score,
+      // grade,
+      // archetype: classification.archetype,
+      // secondary: classification.secondary ?? null,
       missing,
       transcripts_scanned: result.transcripts.scanned,
       results_count: result.results.length,
@@ -321,10 +347,6 @@ function MainReport({
     });
   }, [
     capture,
-    score,
-    grade,
-    classification.archetype,
-    classification.secondary,
     missing,
     result.transcripts.scanned,
     result.results.length,
@@ -332,19 +354,41 @@ function MainReport({
   ]);
 
   /** Poster ref — captured to PNG by the poster's share buttons. */
-  const posterRef = useRef<HTMLDivElement>(null);
+  // const posterRef = useRef<HTMLDivElement>(null);
 
   return (
     <div className="app">
       <AuditProgressStrip status={rerunStatus} onDismiss={onDismissRerun} />
       <div className="app-shell">
         <div className="report">
+          <AuditReportPlaceholder
+            transcripts={result.transcripts.scanned}
+            events={result.eventsScanned ?? 0}
+            projects={result.projectsScanned.length}
+          />
+          {/* The rebuilt report. It reads the leak record rather than this
+              scan's result, deliberately: a credential found last month and
+              not touched by today's transcripts is still a credential to
+              rotate, and a report that showed only the current scan's findings
+              would go quiet on exactly those. */}
+          <LeakSection />
+          {/* The whole old report is switched off — the persona poster, the
+              strengths and quirks sections, the punch-list with its install-all
+              funnel, and the invite section. It is being rebuilt bottom-up
+              around leak detection; see the header of `src/audit/scoring.ts`
+              for the reasoning and `~/Desktop/failproofai-leak-detection-
+              verdict-2026-09-07.md` for the measurements behind it.
+
+              Every component below is intact and still unit-tested — only the
+              render is commented — so restoring any one of them is deleting a
+              pair of comment markers.
+
           <AuditPoster
             ref={posterRef}
             archetypeKey={classification.archetype}
             seed={classification.variantSeed}
-            score={score}
-            grade={grade}
+            // score={score}
+            // grade={grade}
             missing={missing}
             auditedAt={cachedAt ?? new Date().toISOString()}
           />
@@ -352,10 +396,11 @@ function MainReport({
           <QuirksSection findings={findings} />
           <HowToImproveSection
             result={result}
-            projected={projected}
-            projectedGrade={projectedGrade}
+          // projected={projected}
+          // projectedGrade={projectedGrade}
           />
-          <ComeBackBetterSection score={score} />
+          <ComeBackBetterSection />
+          */}
         </div>
         <ReportFooter cachedAt={cachedAt} />
       </div>
@@ -363,6 +408,40 @@ function MainReport({
   );
 }
 
+/**
+ * What `/audit` shows while the report is being rebuilt.
+ *
+ * Deliberately states the scan's own numbers rather than nothing at all: the
+ * scan still runs, still walks every transcript across all 12 CLIs, and still
+ * feeds the emailed digest. Saying so is the difference between "this page is
+ * under construction" and "this product is broken".
+ */
+function AuditReportPlaceholder(
+  { transcripts, events, projects }: { transcripts: number; events: number; projects: number },
+) {
+  const n = (x: number) => x.toLocaleString();
+  return (
+    <section className="audit-sec" data-screen-label="01 Scan">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">01</span>{"// scan"}
+        </span>
+      </div>
+      <h2 className="audit-sec-title">scan complete</h2>
+      <div className="audit-sec-sub">
+        {n(events)} tool call{events === 1 ? "" : "s"} across {n(transcripts)}{" "}
+        transcript{transcripts === 1 ? "" : "s"}
+        {projects > 0 ? ` · ${n(projects)} project${projects === 1 ? "" : "s"}` : ""}
+      </div>
+      <div className="audit-sec-sub">
+        {"// the report is being rebuilt around leak detection. the scan, the"}
+        <br />
+        {"// 12-CLI transcript reader and the emailed digest are unaffected."}
+      </div>
+    </section>
+  );
+}
+
 interface ShellEmptyProps {
   running: boolean;
   mode?: "no-cache" | "zero-sessions";

package/.next/standalone/app/audit/_components/audit-poster.tsx

@@ -24,7 +24,12 @@
 import React, { forwardRef, useMemo, useState } from "react";
 import { pickArchetypeVariant, type ArchetypeKey } from "@/src/audit/archetypes";
 import { type Grade } from "@/src/audit/scoring";
-import { getArchetypeRarityPct } from "@/src/audit/social-proof";
+// Archetype rarity switched off — the percentages are eight hardcoded integers
+// ("Seeded with snapshot values; swap for live aggregates once that pipeline
+// lands"), and this is the ONLY surface that rendered them: baked by
+// html-to-image into the PNG people post publicly. A fabricated population
+// statistic on a shared card is a claim we cannot support.
+// import { getArchetypeRarityPct } from "@/src/audit/social-proof";
 import { copyOrDownloadCard, downloadCard, shareCardNative, shareCardToastMessage } from "@/lib/share-card";
 import { toast } from "@/app/components/toast";
 import { usePostHog } from "@/contexts/PostHogContext";
@@ -45,8 +50,11 @@ interface Props {
   archetypeKey: ArchetypeKey;
   /** Stable seed for variant selection (project name is the natural fit). */
   seed: string;
-  score: number;
-  grade: Grade;
+  /** The score is switched off (see `src/audit/scoring.ts`). Kept as optional
+   *  props rather than removed, so restoring is un-commenting rather than
+   *  re-threading: the dashboard simply stops passing them. */
+  score?: number;
+  grade?: Grade;
   /** Count of unenabled prescribed policies — passed to the share-text
    *  templates, not rendered on the poster itself. */
   missing: number;
@@ -63,7 +71,7 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
     () => pickArchetypeVariant(archetypeKey, seed),
     [archetypeKey, seed],
   );
-  const rarityPct = getArchetypeRarityPct(archetypeKey);
+  // const rarityPct = getArchetypeRarityPct(archetypeKey);
   const indexLabel = String(archetype.index).padStart(2, "0");
   const auditedDate = useMemo(() => formatAuditedDate(auditedAt), [auditedAt]);
 
@@ -134,8 +142,11 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
     }
   };
 
+  // Score switched off — the filename is keyed on the archetype instead, which
+  // is what the card now actually shows. Original:
+  //   `failproofai-${channel}-${grade.toLowerCase()}-${score}.png`
   const filenameFor = (channel: "x" | "linkedin" | "download") =>
-    `failproofai-${channel}-${grade.toLowerCase()}-${score}.png`;
+    `failproofai-${channel}-${archetypeKey}.png`;
 
   const handleShare = async (channel: "x" | "linkedin" | "download") => {
     if (busy) return;
@@ -143,8 +154,11 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
     capture("audit_card_share_clicked", {
       channel,
       source: "poster",
-      score,
-      grade,
+      // Score switched off — see `src/audit/scoring.ts`. Note for whoever reads
+      // the funnel: these two properties stop appearing from this release, so a
+      // dashboard keyed on them breaks rather than reading zero.
+      // score,
+      // grade,
       missing_policies: missing,
     });
     try {
@@ -174,10 +188,10 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
       }
 
       const shareCtx: ShareCtx = {
-        score,
         arch: archetype.name.toLowerCase(),
-        grade,
         missing,
+        // score,
+        // grade,
       };
       const shareText = channel === "x"
         ? pickTemplate(X_TEMPLATES, seed, shareCtx)
@@ -248,6 +262,7 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
                 </React.Fragment>
               ))}
             </div>
+            {/* Rarity switched off — see the import above.
             {typeof rarityPct === "number" && (
               <div className="persona-rarity">
                 <span className="lbl">{"// only"}</span>{" "}
@@ -255,13 +270,17 @@ export const AuditPoster = forwardRef<HTMLDivElement, Props>(function AuditPoste
                 <span className="lbl">of agents are this archetype</span>
               </div>
             )}
+            */}
           </div>
 
-          {/* Score block — heroic number, centered in the card */}
+          {/* Score block — heroic number, centered in the card. Switched off;
+              see `src/audit/scoring.ts` for why. The archetype is the card's
+              headline now.
           <div className="poster-score">
             <span className="score-n">{score}</span>
             <span className="score-of">/100</span>
           </div>
+          */}
         </div>
 
         <footer className="poster-foot">

package/.next/standalone/app/audit/_components/come-back-better-section.tsx

@@ -21,7 +21,12 @@ import { AuthDialog, type AuthedUser } from "./auth-dialog";
 import { InviteDialog } from "./invite-dialog";
 
 interface Props {
-  /** Current audit score (0–100), forwarded into the invite email body. */
+  /** Current audit score (0–100), forwarded into the invite email body.
+   *
+   *  Always undefined while the score is switched off (see
+   *  `src/audit/scoring.ts`) — the dashboard no longer passes it. Nothing
+   *  breaks: `/api/audit/invite` already treats it as optional and simply
+   *  leaves it out of the email body when it is not a finite number. */
   score?: number;
 }
 

package/.next/standalone/app/audit/_components/empty-state.tsx

@@ -74,7 +74,10 @@ export function EmptyState({ mode, running, onStarted, onCompleted }: Props) {
           <p className="empty-sub">
             we&apos;ll walk every transcript across your installed CLIs — Claude Code,
             Codex, Copilot, Cursor, OpenCode, Pi — and count every wasteful
-            or risky action. you&apos;ll get a tier, a score, and a punch-list.
+            {/* Was "a tier, a score, and a punch-list" — the tier was never
+                rendered and the score is switched off, so this promised two
+                things the page did not show. */}
+            or risky action. you&apos;ll get your agent&apos;s archetype and a punch-list.
           </p>
 
           <div className="empty-actions">

package/.next/standalone/app/audit/_components/how-to-improve-section.tsx

@@ -12,13 +12,18 @@
  */
 import { useMemo, useState } from "react";
 import type { AuditResult } from "@/src/audit/types";
-import { type Grade, tierName } from "@/src/audit/scoring";
+// Score switched off — see `src/audit/scoring.ts`.
+// import { type Grade, tierName } from "@/src/audit/scoring";
+import type { Grade } from "@/src/audit/scoring";
 import { usePostHog } from "@/contexts/PostHogContext";
 
 interface Props {
   result: AuditResult;
-  projected: number;
-  projectedGrade: Grade;
+  /** The projection is switched off — see `src/audit/scoring.ts`. Optional
+   *  rather than removed so restoring it is un-commenting the two lines in
+   *  `audit-dashboard.tsx` and the sub-heading below. */
+  projected?: number;
+  projectedGrade?: Grade;
 }
 
 const DETECTOR_TO_PRIMARY_POLICY: Record<string, string> = {
@@ -99,7 +104,7 @@ function bulkInstall(fixes: FixRow[]): string {
   return `failproofai policies --install ${fixes.map((f) => f.name).join(" ")}`;
 }
 
-export function HowToImproveSection({ result, projected, projectedGrade }: Props) {
+export function HowToImproveSection({ result }: Props) {
   const { capture } = usePostHog();
   const fixes = useMemo(() => buildFixes(result), [result]);
   const installAllCmd = useMemo(() => bulkInstall(fixes), [fixes]);
@@ -136,9 +141,18 @@ export function HowToImproveSection({ result, projected, projectedGrade }: Props
         </button>
       </div>
       <h2 className="audit-sec-title">install or configure</h2>
-      <div className="audit-sec-sub">
+      {/* The projected-score clause is switched off. It was also the one place
+          the product promised a number it could not deliver: `deriveScore`
+          never read `enabledInConfig`, so taking this prescription and
+          re-running returned the SAME score with the projection gone. What
+          replaces it is the thing that was always true — one command, enforced
+          on every tool call. Original:
         enable all {fixes.length === 1 ? "one" : fixes.length} → projected{" "}
         <strong>{projected}</strong> · {tierName(projectedGrade).toLowerCase()}
+      */}
+      <div className="audit-sec-sub">
+        enable all {fixes.length === 1 ? "one" : fixes.length} → one command,
+        enforced on every tool call
       </div>
 
       <div className="fix-list">

package/.next/standalone/app/audit/_components/leak-section.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+/**
+ * The leak report: every credential this machine found in its own transcripts.
+ *
+ * This is what replaced the persona poster and the five scored sections. The
+ * old report answered "what kind of agent user are you"; this one answers the
+ * only question a leaked key raises — what is it, where did it go, how did it
+ * get there, and what do I do now.
+ *
+ * Each row is one DISTINCT credential, not one sighting: a key pasted into
+ * forty commands is one thing to rotate, not forty. The count of exposures is a
+ * column, which is the honest way to show forty without implying forty problems.
+ */
+import { useCallback, useEffect, useState } from "react";
+import {
+  dismissLeakAction,
+  getLeaksAction,
+  setLeakNotifyAction,
+  type LeakRow,
+} from "@/app/actions/get-leaks";
+
+/** Rendered in the reader's timezone, which is why it is not done server-side. */
+function when(iso: string): string {
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return "unknown";
+  const days = Math.floor((Date.now() - t) / 86_400_000);
+  if (days <= 0) return "today";
+  if (days === 1) return "yesterday";
+  if (days < 30) return `${days}d ago`;
+  return new Date(t).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+
+/**
+ * What to actually do about this one.
+ *
+ * Two genuinely different situations, and conflating them is what makes
+ * security advice useless. A recognised prefix means a console exists and the
+ * key can be revoked there in a minute. An unattributed value — the majority,
+ * per the pattern census — has no console at all: the only move is to find
+ * where it came from, and the identifier name is usually the only clue.
+ */
+function advice(row: LeakRow): string {
+  if (row.attributed) return `rotate it in the ${row.label.replace(/ (API )?(key|token).*$/i, "")} console`;
+  if (row.name) return `find what reads ${row.name}, then rotate it there`;
+  return "trace it to its owner, then rotate it";
+}
+
+export function LeakSection() {
+  const [rows, setRows] = useState<LeakRow[] | null>(null);
+  const [notify, setNotify] = useState(true);
+  const [busy, setBusy] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    const payload = await getLeaksAction();
+    setRows(payload.rows);
+    setNotify(payload.notify);
+  }, []);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const dismiss = useCallback(
+    async (id: string) => {
+      setBusy(id);
+      try {
+        // Optimism would be wrong here: a dismissal that did not persist means
+        // the row comes back on the next load, and the user has to guess which
+        // of the two states is real.
+        if (await dismissLeakAction(id)) setRows((prev) => prev?.filter((r) => r.id !== id) ?? null);
+      } finally {
+        setBusy(null);
+      }
+    },
+    [],
+  );
+
+  const toggleNotify = useCallback(async () => {
+    const next = !notify;
+    setNotify(next);
+    if (!(await setLeakNotifyAction(next))) setNotify(!next);
+  }, [notify]);
+
+  if (rows === null) return null;
+
+  return (
+    <section className="audit-sec" data-screen-label="02 Leaks">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">02</span>{"// credentials"}
+        </span>
+        <button
+          type="button"
+          className="cbb-toggle leak-notify"
+          data-on={notify}
+          onClick={toggleNotify}
+          aria-label={notify ? "turn desktop notifications off" : "turn desktop notifications on"}
+          title="desktop notification when a new credential is found"
+        >
+          <span className="cbb-toggle-knob" />
+        </button>
+      </div>
+
+      {rows.length === 0 ? (
+        <>
+          <h2 className="audit-sec-title">no credentials found</h2>
+          <div className="audit-sec-sub">
+            {"// nothing in this machine's transcripts matched a known key format"}
+            <br />
+            {"// or a secret-named assignment."}
+          </div>
+        </>
+      ) : (
+        <>
+          <h2 className="audit-sec-title">
+            {rows.length} credential{rows.length === 1 ? "" : "s"} in your transcripts
+          </h2>
+          <div className="audit-sec-sub">
+            {"// one row per distinct key — an exposure count is not a key count."}
+          </div>
+
+          <ul className="leak-list">
+            {rows.map((row) => (
+              <li key={row.id} className="leak-row" data-attributed={row.attributed}>
+                <div className="leak-row-top">
+                  <code className="leak-key">{row.display}</code>
+                  <span className="leak-label">{row.label}</span>
+                  {row.name ? <span className="leak-name">{row.name}</span> : null}
+                  <button
+                    type="button"
+                    className="leak-dismiss"
+                    onClick={() => void dismiss(row.id)}
+                    disabled={busy === row.id}
+                  >
+                    not a secret
+                  </button>
+                </div>
+
+                {/* The 5W1H, as one sentence rather than a grid of labelled
+                    cells — a person reading a leak wants the story, and the
+                    grid version made every row look like a form to fill in. */}
+                <div className="leak-how">
+                  <span className="leak-verb">{row.mechanism}</span>
+                  {" in "}
+                  <span className="leak-where">{row.project}</span>
+                  {" via "}
+                  <span className="leak-who">{row.cli}</span>
+                  {" · "}
+                  <span className="leak-when">{when(row.lastSeen)}</span>
+                </div>
+
+                <div className="leak-foot">
+                  <span className="leak-meta">
+                    {row.occurrences} exposure{row.occurrences === 1 ? "" : "s"}
+                    {row.sessions > 1 ? ` · ${row.sessions} sessions` : ""}
+                    {" · "}
+                    {row.length} chars
+                  </span>
+                  {/* The direction is the difference between a leak a gate can
+                      stop next time and one it cannot. An input travelled OUT
+                      of the machine with the agent's request; a result came
+                      back INTO the transcript from a file or a command, where
+                      no PreToolUse hook can intercept it. */}
+                  <span className="leak-dir">
+                    {row.direction === "input"
+                      ? "sent by the agent — blockable at PreToolUse"
+                      : "returned to the agent — already in the transcript"}
+                  </span>
+                  <span className="leak-fix">{advice(row)}</span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </section>
+  );
+}