Storyboard Panel Broker

Required key.

Add this in your Lovable project under Settings → Secrets before pasting the prompt below.

Paste into a fresh Lovable project. Make sure the key above is set first. read the build strategy →

Build "Storyboard Panel Broker" as a ONE-SHOT Lovable build. The participant has only
5 credits — this single message must produce a working demo with no follow-ups.
Single-page TanStack Start app. Cut scope ruthlessly.

CONCEPT
Lovable AI runs a booking agent via A2A so showrunners hire storyboard artists by negotiating per-panel rates and turnaround times.
Discipline: Filmmaking & Animation (pre-production hiring).
Recipe: A2A Negotiation (agent-to-agent loop) as the single agentic surface.
Why this kernel: Storyboard contracts depend heavily on panel count and complexity, necessitating A2A negotiation to align the IntentMandate with the artist's capacity.

LOVABLE BUDGET (HARD CAP: ONE-SHOT, ~5 CREDITS TOTAL):
The participant has FIVE Lovable credits for the whole build. This prompt MUST
ship a working demo on the FIRST message with zero follow-ups. Engineer for that.
- ONE TanStack Start app, ONE route (`src/routes/index.tsx`). No extra pages, no auth, no nav.
- ONE TanStack server function in `src/lib/agent.functions.ts` that runs the protocol.
- ONE client surface (a textarea + button) that triggers the server fn and renders the result.
- NO database, NO Lovable Cloud, NO auth, NO file uploads, NO extra integrations.
- NO tests, NO docs pages, NO settings screens, NO theming toggles.
- Libraries: template defaults + `zod` + `ai` + `@ai-sdk/openai-compatible`. Nothing else.
- Demo-fallback contract: every code path must boot with NO secrets and return
  realistic JSON flagged `simulated: true`. Real LLM calls activate only when
  `LOVABLE_API_KEY` is present (auto in Lovable).

STACK
- TanStack Start app, the index route only.
- Agent brain: Lovable AI Gateway via the AI SDK, called from a `createServerFn` handler so the key stays server-side.
- Protocol surface: A2A Negotiation as defined below.
- Client surface fits the kernel: a prompt box (and any minimal extra inputs) that returns the agent's output.
- Tailwind + shadcn. Editorial look: gold accent on a dark or warm-cream background,
  generous type, one strong headline, one primary action.
- Footer renders: "Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

GATEWAY HELPER (src/lib/ai-gateway.server.ts) — Lovable AI Gateway provider:
```ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export function lovableGateway(apiKey: string) {
  return createOpenAICompatible({
    name: "lovable",
    baseURL: "https://ai.gateway.lovable.dev/v1",
    headers: { "Lovable-API-Key": apiKey, "X-Lovable-AIG-SDK": "vercel-ai-sdk" },
  });
}
```
Install once: `bun add ai @ai-sdk/openai-compatible zod`.

SERVER FUNCTION (src/lib/agent.functions.ts) — A2A buyer × seller negotiation:
```ts
import { createServerFn } from "@tanstack/react-start";
import { generateText } from "ai";
import { z } from "zod";
import { lovableGateway } from "@/lib/ai-gateway.server";

type Part = { kind: "data"; mimeType: string; data: unknown; reasoning?: string };
const MIME = {
  INTENT:  "application/vnd.ap2.mandate.intent+json",
  CART:    "application/vnd.ap2.mandate.cart+json",
  PAYREQ:  "application/x402.payment-required+json",
  PAYMENT: "application/vnd.ap2.mandate.payment+json",
};

/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const negotiate = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ goal: z.string().min(1).max(600) }).parse(d))
  .handler(async ({ data }) => {
    const key = process.env.LOVABLE_API_KEY;
    const reason = async (role: "buyer" | "seller", ctx: string) => {
      if (!key) return `[demo ${role}] ${ctx.slice(0, 120)}`;
      const { text } = await generateText({
        model: lovableGateway(key)("google/gemini-2.5-flash"),
        prompt: `You are the ${role} agent in an A2A negotiation for pre-production hiring. Context: ${ctx}. Reply with ONE plain-language sentence justifying your move.`,
      });
      return text.trim();
    };

    const offer: Part = { kind: "data", mimeType: MIME.INTENT,
      data: { goal: data.goal, max_minor: 5000, currency: "USD" },
      reasoning: await reason("buyer", `Open offer for: ${data.goal}, cap $50.`) };

    const cart: Part = { kind: "data", mimeType: MIME.CART,
      data: { items: [{ name: "pre-production hiring session", price_minor: 4200 }], total_minor: 4200, currency: "USD" },
      reasoning: await reason("seller", `Quote $42 cart for ${data.goal}.`) };

    const payreq: Part = { kind: "data", mimeType: MIME.PAYREQ,
      data: { amount_minor: 4200, currency: "USD", payTo: "agent://demo-seller", nonce: crypto.randomUUID() } };

    const payment: Part = { kind: "data", mimeType: MIME.PAYMENT,
      data: { cart_hash: "demo-hash", tx: "0xsimulated" },
      reasoning: await reason("buyer", `Accept cart, settle 4200.`) };

    return {
      task_id: crypto.randomUUID(),
      status: "completed",
      parts: [offer, cart, payreq, payment],
      meta: { simulated: !key, kernel: "a2a-negotiation" },
    };
  });
```

CLIENT (in `src/routes/index.tsx`): textarea for the buyer's goal + "Negotiate" button.
Render the four parts as a vertical timeline, each bubble showing the MIME chip
(IntentMandate / CartMandate / PaymentRequired / PaymentMandate), the JSON `data`,
and the agent's plain-language `reasoning` line underneath.

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the agent does for pre-production hiring.
2. The primary action (a vertical timeline of the negotiation: MIME-tagged offer / counter / accept bubbles with the agent's plain-language reasoning under each step) is one tap away; the rest of the layout supports it.
3. The server fn runs the protocol, the result lands on screen, the user can retry, copy, or audit.

KEYS (Lovable AI first, AIsa AI fallback):
1. `LOVABLE_API_KEY` — PRIMARY agent brain. Auto-provisioned by Lovable. Used
   server-side to call Lovable AI Gateway (Gemini, Claude, GPT) for every
   reasoning step. Never expose to the client; read only via
   `process.env.LOVABLE_API_KEY`. This is the default code path.
2. `AISA_API_KEY` (OPTIONAL FALLBACK) — only set if Lovable credits are
   exhausted or a specific frontier model from https://aisa.one is required.
   The server fn should try Lovable first and fall back to AIsa only if
   `LOVABLE_API_KEY` is missing.
The demo MUST still boot with zero secrets and return realistic `simulated:true`
envelopes — that demo-fallback contract is non-negotiable (see UCP × A2A × AP2 spec).

CREDIT (must appear in UI footer AND as JSDoc on the server function):
Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14

Market sizing.

Indicative figures for hackathon pitches — refine with your own research before raising.