feat: top recommendations per engine on Premium tab

Premium tab was showing engine cards with just pass/warn/fail counts —
the cards looked thin and weren't actionable. Now each card lists up
to 4 top-priority fail/warn findings (P1-P3) inline, so you can see
what each engine flagged without leaving the page.

One round-trip via `.in('audit_id', siblingIds)` instead of N queries.
PostgREST doesn't support per-group LIMIT so we fetch all qualifying
findings ordered by priority and cap to 4-per-engine in code.

The same per-engine markdown is already stitched into the consolidated
PDF that the summary email attaches.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ralyodio

app/(app)/audits/[id]/page.tsx

@@ -54,7 +54,46 @@ export default async function AuditPage({
         .eq("owner_id", user!.id)
         .order("created_at", { ascending: true })
     : { data: null };
-  const premiumSiblings = (siblingsData ?? []) as unknown as PremiumSibling[];
+  const premiumSiblingsBase = (siblingsData ?? []) as unknown as Omit<
+    PremiumSibling,
+    "topFindings"
+  >[];
+
+  // Pull a handful of top-priority findings per sibling for inline display.
+  // One round-trip via IN; we filter to fail/warn priorities ≤3 and slice
+  // client-side because PostgREST doesn't do per-group LIMIT.
+  let premiumSiblings: PremiumSibling[] = [];
+  if (premiumSiblingsBase.length > 0) {
+    const siblingIds = premiumSiblingsBase.map((s) => s.id);
+    const { data: findingsForSiblings } = await supabase
+      .from("audit_findings")
+      .select("audit_id, section, status, title, detail, priority")
+      .in("audit_id", siblingIds)
+      .in("status", ["fail", "warn"])
+      .lte("priority", 3)
+      .order("priority", { ascending: true });
+    const byAudit = new Map<
+      string,
+      { section: string; status: string; title: string; detail: string | null; priority: number }[]
+    >();
+    for (const f of findingsForSiblings ?? []) {
+      const arr = byAudit.get(f.audit_id as string) ?? [];
+      if (arr.length < 4) {
+        arr.push({
+          section: f.section as string,
+          status: f.status as string,
+          title: f.title as string,
+          detail: (f.detail as string | null) ?? null,
+          priority: f.priority as number,
+        });
+      }
+      byAudit.set(f.audit_id as string, arr);
+    }
+    premiumSiblings = premiumSiblingsBase.map((s) => ({
+      ...s,
+      topFindings: byAudit.get(s.id) ?? [],
+    })) as PremiumSibling[];
+  }
 
   const { data: findingsData } = await supabase
     .from("audit_findings")

components/report/premium-engines.tsx

@@ -2,6 +2,14 @@ import Link from "next/link";
 import { ENGINES, type Engine } from "@/lib/credits";
 import { ScoreBadge } from "@/components/score-badge";
 
+export type PremiumFinding = {
+  section: string;
+  status: string;
+  title: string;
+  detail: string | null;
+  priority: number;
+};
+
 export type PremiumSibling = {
   id: string;
   engine: Engine;
@@ -11,6 +19,7 @@ export type PremiumSibling = {
   failed_reason: string | null;
   completed_at: string | null;
   summary: { pass?: number; warn?: number; fail?: number } | null;
+  topFindings?: PremiumFinding[];
 };
 
 export function PremiumEngines({ siblings }: { siblings: PremiumSibling[] }) {
@@ -116,6 +125,41 @@ function EngineCard({ audit }: { audit: PremiumSibling }) {
         </p>
       )}
 
+      {audit.status === "complete" &&
+        audit.topFindings &&
+        audit.topFindings.length > 0 && (
+          <div className="mt-3 border-t border-[var(--color-border)] pt-3">
+            <div className="text-xs font-semibold uppercase tracking-wider text-[var(--color-muted)]">
+              Top recommendations
+            </div>
+            <ul className="mt-2 space-y-1.5 text-xs">
+              {audit.topFindings.map((f, i) => (
+                <li key={i} className="flex items-start gap-2">
+                  <span
+                    aria-hidden
+                    className={
+                      f.status === "fail"
+                        ? "mt-0.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--color-fail)]"
+                        : "mt-0.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--color-warn)]"
+                    }
+                  />
+                  <span className="min-w-0">
+                    <span className="font-medium text-[var(--color-fg)]">
+                      P{f.priority} · {f.title}
+                    </span>
+                    {f.detail && (
+                      <span className="text-[var(--color-muted)]">
+                        {" "}
+                        — {f.detail}
+                      </span>
+                    )}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
       <div className="mt-3 flex items-center gap-3 text-xs">
         {audit.status === "complete" && (
           <Link