Chroma Meditation

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 "Chroma Meditation" 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 writes visual meditations so colorists can rest their eyes; Anyway traces the whole run so you can prove what happened.
Discipline: Videography & Film (colorist mindset).
Recipe: Anyway Agent Traces (see the run) as the single creative surface.
Why this kernel: Anyway Agent Traces make colorist mindset in Videography & Film legible — every workflow, task and tool call recorded with duration, tokens and cost you can show an audience.

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/anyway.functions.ts` that proxies the Anyway call.
- ONE client surface (a textarea + button, a wallet panel, or a pay button) wired to it.
- 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`. Nothing else.
- Keep the diff small enough to land in one build pass. If a feature is not on
  screen in the user flow below, do not build it. Cut scope before adding scope.

STACK
- TanStack Start app, the index route only.
- Anyway is the only paid dependency. Every Anyway call lives inside a
  `createServerFn` handler so the keys stay on the server.
- Client surface fits the kernel: a run view: the workflow tree, per-step timings, tokens and the USDC cost of the run.
- 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 Anyway Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

SERVER FUNCTION (src/lib/anyway.functions.ts) — traced agent run:
```ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";
import { runTraced } from "./anyway.server";

/** Built during the Anyway Creative Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const runAgent = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({ input: z.string().min(1).max(2000) }).parse(d))
  .handler(async ({ data }) => runTraced(data.input));
```

`src/lib/anyway.server.ts` — initialize once, then wrap the run:
```ts
import { initialize, withWorkflow, withAgent, withTask, withTool }
  from "@anyway-sh/node-server-sdk";

let ready = false;
function boot() {
  if (ready) return;
  initialize({
    appName: "colorist mindset-agent",
    apiKey: process.env.ANYWAY_API_KEY,
    baseUrl: "https://collector.anyway.sh",
  });
  ready = true;
}

export async function runTraced(input: string) {
  boot();
  return withWorkflow({ name: "colorist mindset-run", associationProperties: { sessionId: "web" } },
    async () => withAgent({ name: "colorist mindset-agent" },
      async () => withTask({ name: "respond" },
        async () => withTool({ name: "lookup" }, async () => {
          // do the actual work here and return the result
          return { output: input };
        }))));
}
```

The Python equivalent is identical in shape:
`pip install anyway-sdk` then
`Traceloop.init(app_name="my-app", api_key=os.environ["ANYWAY_API_KEY"], api_endpoint="https://collector.anyway.sh")`.

CLIENT: run the agent, then render the step tree — workflow -> agent -> task ->
tool — with duration per step, and link out to the Anyway dashboard where the
same trace shows tokens and cost. Redact anything sensitive before it reaches
the SDK. Docs: https://docs.anyway.sh/sdk/quickstart

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline previews what the demo does for colorist mindset.
2. The primary action (a run view: the workflow tree, per-step timings, tokens and the USDC cost of the run) is one tap away; the rest of the layout supports it.
3. Anyway runs the kernel server-side, the result lands on screen, the user can retry or copy.

KEYS — Anyway secrets (server-side only, never `VITE_`):
1. `ANYWAY_AGENT_WALLET_KEY` — the Agent Wallet Key from
   https://app.anyway.sh/wallets?view=agent (or `anyway login --agent-wallet`).
   Lets the agent pay x402 endpoints in USDC under an owner-set spending policy.
2. `ANYWAY_API_KEY` — the Agent Traces key from Business profile -> Developers.
   Only needed if the build reports traces to https://collector.anyway.sh.
Put them in Project Settings -> Secrets and read them only inside a
`createServerFn` `.handler()` via `process.env.ANYWAY_...`.

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

Market sizing.

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