No-false-results: Zod schema validation + a11y/mobile pass

Three landing pieces:

1. Schema-validated LLM outputs (the "no false results" guarantee)
   - New lib/llm-structured.ts: llmCallStructured() wraps any LLM call
     with Zod schema validation + one automatic retry-on-fail that
     re-prompts the same model with the validation errors so it can
     self-correct. Throws StructuredLlmError on second failure rather
     than letting bad shapes crash the renderer.
   - GeneratorShell now honors an optional schema on GeneratorConfig.
     When the streamed JSON fails Zod parse, the shell sends one
     non-streaming corrective round-trip behind a "ai output
     auto-corrected" badge. If that also fails, the user sees an
     actionable error instead of a UI crash from undefined.map().
   - Schemas wired for the three highest-traffic structured generators:
       lib/schemas/creative-score.ts
       lib/schemas/content-calendar.ts
       lib/schemas/campaign-kit.ts
   - 10 new vitest cases cover clean parse, fenced JSON, wrong-shape
     retry success/fail, total non-JSON retry, maxAttempts=1.

2. /research/competitors honesty
   - The LLM can't fetch live ads; previously, submitting just a
     competitor name produced plausible-but-invented teardowns.
   - Form now requires >= 120 chars of pasted ad copy and shows an
     inline "the AI has no live access to ad libraries" note.
   - Prompt has a CRITICAL clause: if the paste block is empty or
     trivial, emit an explanatory error JSON instead of inventing ads.
   - Renderer detects that error JSON and shows a clear nudge to use
     the Meta Ads Library / Google Transparency / TikTok Top Ads /
     LinkedIn Ad Library buttons above.

3. Accessibility + mobile pass (from punch-list audit)
   - Skip-to-content link in app/layout.tsx
   - MobileNav: h-11 hamburger + close, role="dialog" + aria-modal,
     Esc handler, focus moved into drawer on open + returned to
     trigger on close
   - StatusBar: flex-wrap so 8-cell row reflows under 380px
   - CopyButton: py-2 mobile / py-1 desktop (44px touch), aria-live
     so screen readers announce "copied"
   - GeneratorShell FieldRenderer: stable inputId + htmlFor on every
     label, aria-required on required fields — fixes a11y across ALL
     generators in one place
   - File input now has aria-label
   - Stop buttons in GeneratorShell, competitors page, launch wizard
     all gained aria-label="Stop ..."
   - Settings ToggleRow: role="switch" + aria-checked
   - CommandPalette: tabIndex=-1 on option buttons traps Tab focus on
     the search input so keyboard users can't escape behind the modal

Build: tsc clean, 53/53 unit tests pass, next build clean (76 routes,
+0 kB on shared chunks, +5 kB on competitors due to honesty branch).

Author: IamRamgarhia

app/generate/campaign-kit/page.tsx

@@ -4,6 +4,7 @@ import { GeneratorShell } from "@/components/GeneratorShell";
 import { Section, Pill } from "@/components/OutputBlocks";
 import { CopyButton } from "@/components/CopyButton";
 import { buildCampaignKitPrompt, type CampaignKitInput } from "@/lib/prompts/campaign-kit";
+import { CampaignKitSchema } from "@/lib/schemas/campaign-kit";
 import type { GeneratorConfig } from "@/lib/generator-config";
 
 const config: GeneratorConfig<CampaignKitInput & Record<string, unknown>> = {
@@ -25,6 +26,7 @@ const config: GeneratorConfig<CampaignKitInput & Record<string, unknown>> = {
   buildPrompt: (input) => buildCampaignKitPrompt(input as unknown as CampaignKitInput),
   buildTitle: (i: any) => `Kit · ${i.campaign_name}`,
   expectJson: true,
+  schema: CampaignKitSchema,
   renderJson: (json) => <KitOutput json={json} />,
 };
 

app/generate/content-calendar/page.tsx

@@ -5,6 +5,7 @@ import { Section, Pill } from "@/components/OutputBlocks";
 import { CopyButton } from "@/components/CopyButton";
 import { ExternalLink } from "lucide-react";
 import { buildContentCalendarPrompt, type ContentCalendarInput } from "@/lib/prompts/content-calendar";
+import { ContentCalendarSchema } from "@/lib/schemas/content-calendar";
 import { IMAGE_TOOLS, VIDEO_TOOLS } from "@/lib/prompts/creative-prompts";
 import { safeHref } from "@/lib/utils";
 import type { GeneratorConfig } from "@/lib/generator-config";
@@ -48,6 +49,7 @@ const config: GeneratorConfig<ContentCalendarInput & Record<string, unknown>> =
   buildPrompt: (input) => buildContentCalendarPrompt(input as unknown as ContentCalendarInput),
   buildTitle: (i: any) => `Calendar · ${i.duration} · ${i.platforms?.slice(0, 24)}`,
   expectJson: true,
+  schema: ContentCalendarSchema,
   renderJson: (json) => <CalendarOutput json={json} />,
 };
 

app/launch/wizard/page.tsx

@@ -686,7 +686,7 @@ function Inner() {
               {running ? "Building your launch kit…" : "Build it · 10-min launch kit"}
             </button>
             {running ? (
-              <button onClick={stopWizard} className="btn-ghost" title="Stop the wizard — finished phases stay saved">
+              <button onClick={stopWizard} className="btn-ghost" title="Stop the wizard — finished phases stay saved" aria-label="Stop wizard">
                 <StopCircle size={12} />
               </button>
             ) : null}

app/layout.tsx

@@ -67,14 +67,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={`dark ${sans.variable} ${mono.variable} ${display.variable}`}>
       <body className="font-sans antialiased">
+        {/* Skip-to-content for keyboard + screen-reader users — visually
+            hidden until focused, then jumps past the sidebar / mobile nav. */}
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:bg-base-900 focus:text-ink focus:px-3 focus:py-2 focus:border focus:border-live"
+        >
+          Skip to main content
+        </a>
         <div className="flex min-h-screen">
           <Sidebar />
           <MobileNav />
           <ServiceWorkerRegister />
           <LocalSyncBoot />
           <CommandPalette />
           <UndoToast />
-          <main className="flex-1 min-w-0 flex flex-col">
+          <main id="main-content" className="flex-1 min-w-0 flex flex-col">
             <div className="flex-1 px-4 md:px-10 pt-14 md:pt-6 pb-14">{children}</div>
             <StatusBar />
           </main>

app/optimize/creative-score/page.tsx

@@ -4,6 +4,7 @@ import { GeneratorShell } from "@/components/GeneratorShell";
 import { Section, Pill, ScoreBar } from "@/components/OutputBlocks";
 import { CopyButton } from "@/components/CopyButton";
 import { buildCreativeScorePrompt, type CreativeScoreInput } from "@/lib/prompts/creative-score";
+import { CreativeScoreSchema } from "@/lib/schemas/creative-score";
 import type { GeneratorConfig } from "@/lib/generator-config";
 
 const config: GeneratorConfig<CreativeScoreInput & Record<string, unknown>> = {
@@ -37,6 +38,7 @@ const config: GeneratorConfig<CreativeScoreInput & Record<string, unknown>> = {
   buildPrompt: (input) => buildCreativeScorePrompt(input as unknown as CreativeScoreInput),
   buildTitle: (i: any) => `Score · ${i.platform}`,
   expectJson: true,
+  schema: CreativeScoreSchema,
   renderJson: (json) => <ScoreOutput json={json} />,
 };
 

app/research/competitors/page.tsx

@@ -102,8 +102,17 @@ function Inner() {
     setSavedId(null);
     setParsed(null);
     stream.reset();
-    if (!input.competitor_ads_pasted.trim()) {
-      setError("Paste at least one competitor ad from the libraries above.");
+    // Hard guardrail against hallucinated teardowns: the LLM does NOT have live
+    // ad data. If the user submits just a brand name + empty paste, the model
+    // would invent plausible-looking ads. Require enough pasted content that
+    // the analysis is actually grounded in real copy. 120 chars ≈ one short ad.
+    const pasted = input.competitor_ads_pasted.trim();
+    if (pasted.length < 120) {
+      setError(
+        pasted.length === 0
+          ? "Paste real competitor ad copy from the libraries above before running. We do not fetch ads for you — the AI only analyzes what you paste."
+          : "Paste more competitor ad copy (at least ~120 chars / one full ad). Without real ad text, the teardown would be guesswork."
+      );
       return;
     }
     if (!input.our_product.trim() || !input.our_usp.trim()) {
@@ -244,6 +253,11 @@ function Inner() {
           </div>
           <div>
             <label className="label">competitor ads · pasted *</label>
+            <p className="text-[11px] text-ink-muted leading-relaxed mb-1.5">
+              <span className="text-live font-medium">Honesty note:</span> the AI has <em>no live access</em> to ad libraries.
+              Open the libraries above, copy the ads you want analyzed, paste them here. If you paste a brand name only,
+              the AI will refuse rather than invent ads.
+            </p>
             <textarea
               rows={8}
               className="input-base font-mono text-xs"
@@ -267,7 +281,7 @@ function Inner() {
               {running ? <Loader2 size={12} className="animate-spin" /> : <Sparkles size={12} />}
               {running ? "analyzing" : "teardown + beat"}
             </button>
-            {running ? <button onClick={() => abortRef.current?.abort()} className="btn-ghost"><StopCircle size={12} /></button> : null}
+            {running ? <button onClick={() => abortRef.current?.abort()} className="btn-ghost" aria-label="Stop teardown"><StopCircle size={12} /></button> : null}
           </div>
           {savedId ? (
             <div className="text-[10px] text-pos flex items-center gap-1.5 font-mono uppercase tracking-ui-mega">
@@ -297,6 +311,24 @@ function Inner() {
 }
 
 function StealOutput({ json }: { json: any }) {
+  // Honesty path: when the prompt's CRITICAL rule fires (empty/insufficient
+  // paste), the model returns an explanatory error string instead of inventing
+  // teardowns. Surface that clearly so the user knows they need to paste real
+  // ad copy — they didn't pay tokens for hallucinated competitor data.
+  if (json?.error && !json?.teardown?.length) {
+    return (
+      <div className="border border-live/40 bg-live/[0.04] p-5 space-y-3 animate-fade-up">
+        <div className="text-[10px] font-mono uppercase tracking-ui-mega text-live flex items-center gap-2">
+          <span className="h-1 w-1 bg-live" /> nothing to analyze
+        </div>
+        <p className="text-sm text-ink leading-relaxed">{json.error}</p>
+        <p className="text-[11px] text-ink-muted">
+          Use the library buttons above (Meta Ads Library, Google Ads Transparency, TikTok Top Ads, LinkedIn Ad Library),
+          copy real ads, paste them in the textarea, and re-run.
+        </p>
+      </div>
+    );
+  }
   return (
     <div className="space-y-4 stagger">
       {json?.teardown?.length ? (

app/settings/page.tsx

@@ -399,12 +399,18 @@ function SettingsInner() {
 
 function ToggleRow({ label, desc, v, on }: { label: string; desc: string; v: boolean; on: (next: boolean) => void }) {
   return (
-    <button onClick={() => on(!v)} className="w-full flex items-center gap-3 text-left border border-base-700 px-3 py-2 hover:bg-base-800/40 transition">
+    <button
+      role="switch"
+      aria-checked={v}
+      aria-label={label}
+      onClick={() => on(!v)}
+      className="w-full flex items-center gap-3 text-left border border-base-700 px-3 py-2 hover:bg-base-800/40 transition"
+    >
       <div className="flex-1">
         <div className="text-[12px] text-ink">{label}</div>
         <div className="text-[10px] font-mono uppercase tracking-ui-wide text-ink-subtle mt-0.5">{desc}</div>
       </div>
-      <span className={`h-5 w-9 border relative ${v ? "border-live bg-live/20" : "border-base-500 bg-base-900"}`}>
+      <span className={`h-5 w-9 border relative ${v ? "border-live bg-live/20" : "border-base-500 bg-base-900"}`} aria-hidden="true">
         <span className={`absolute top-0.5 h-3.5 w-3.5 transition ${v ? "left-[18px] bg-live" : "left-0.5 bg-base-500"}`} />
       </span>
     </button>

components/CommandPalette.tsx

@@ -265,6 +265,10 @@ export function CommandPalette() {
                       aria-selected={isActive}
                       onMouseEnter={() => setIdx(myIdx)}
                       onClick={() => a.run()}
+                      // tabIndex=-1 traps Tab focus on the search input so
+                      // keyboard users can't escape the modal to the page
+                      // behind it. Arrow keys + Enter already drive selection.
+                      tabIndex={-1}
                       className={`w-full text-left flex items-center gap-3 px-4 py-2 text-[14px] ${
                         isActive ? "bg-base-800 text-ink" : "text-ink-muted hover:bg-base-800/50"
                       }`}

components/CopyButton.tsx

@@ -17,6 +17,8 @@ export function CopyButton({
   return (
     <button
       type="button"
+      aria-live="polite"
+      aria-label={copied ? `${label} — copied` : `${label} to clipboard`}
       onClick={async () => {
         try {
           await navigator.clipboard.writeText(text);
@@ -25,7 +27,9 @@ export function CopyButton({
         } catch {}
       }}
       className={cn(
-        "inline-flex items-center gap-1.5 border border-base-600 bg-base-900/60 hover:bg-base-800 px-2 py-1 text-[10px] font-mono uppercase tracking-ui-wide text-ink-muted hover:text-ink",
+        // py-2 mobile / py-1 desktop hits 44px tap target on touch devices
+        // without bloating dense desktop layouts.
+        "inline-flex items-center gap-1.5 border border-base-600 bg-base-900/60 hover:bg-base-800 px-2 py-2 md:py-1 text-[10px] font-mono uppercase tracking-ui-wide text-ink-muted hover:text-ink",
         className
       )}
     >