@vibes.diy/prompts 14.3.36 → 14.3.38

package/llms/web-audio.draft.md

@@ -0,0 +1,180 @@
+# Web Audio — the first draft: one tone, played by a tap
+
+A sound app's first draft is the whole page around the instrument: the name,
+a row of named notes, a volume slider, a big Play button, and the last few
+notes played, listed live from the database. The capability's hello is real:
+every tap plays one short, shaped tone through the speakers, on iOS too. The
+sequencer or metronome on the audio clock, the effects chain and recording are
+the next pass. What the draft owes that pass is the right skeleton: one
+`AudioContext` in a ref, created inside the first gesture and resumed on every
+one after it, and a plain `playTone` helper that takes the context and a note,
+so the next pass adds a scheduler beside it rather than rewriting it.
+
+Web Audio is a browser built-in: there is no import, the constructor is
+`window.AudioContext` with the `window.webkitAudioContext` fallback.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { Button, Badge, Card, CardHeader, CardTitle, CardContent } from "@vibes.diy/look";
+
+// Named notes of a C major pentatonic, so any order of taps sounds sweet.
+const NOTES = [
+  { name: "C4", hz: 261.63 },
+  { name: "D4", hz: 293.66 },
+  { name: "E4", hz: 329.63 },
+  { name: "G4", hz: 392.0 },
+  { name: "A4", hz: 440.0 },
+  { name: "C5", hz: 523.25 },
+];
+const hzOf = (name) => (NOTES.find((n) => n.name === name) ?? NOTES[4]).hz;
+const timeOf = (ms) => new Date(ms).toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit", second: "2-digit" });
+
+// The iOS-safe gate: create or resume the context and return it. Call it FIRST,
+// synchronously, inside the click handler, with no await before the sound starts.
+function unlockAudio(ctxRef) {
+  ctxRef.current ||= new (window.AudioContext || window.webkitAudioContext)();
+  const ctx = ctxRef.current;
+  if (ctx.state !== "running") ctx.resume(); // iOS suspends after lock or backgrounding
+  return ctx;
+}
+
+// One short tone: oscillator -> gain -> speakers, with an attack and a release, stopped at ~0.4 s.
+function playTone(ctx, hz, volume, wave) {
+  const t = ctx.currentTime;
+  const peak = Math.max(volume, 0.0001); // exponential ramps never touch zero
+  const osc = ctx.createOscillator();
+  const gain = ctx.createGain();
+  osc.type = wave;
+  osc.frequency.setValueAtTime(hz, t);
+  gain.gain.setValueAtTime(0.0001, t);
+  gain.gain.linearRampToValueAtTime(peak, t + 0.02); // attack
+  gain.gain.exponentialRampToValueAtTime(0.0001, t + 0.4); // release
+  osc.connect(gain).connect(ctx.destination);
+  osc.start(t);
+  osc.stop(t + 0.42);
+  osc.onended = () => {
+    osc.disconnect();
+    gain.disconnect();
+  };
+}
+
+export default function App() {
+  const { database, useLiveQuery } = useFireproof("glassHarp");
+  const { docs: instruments } = useLiveQuery("type", { key: "instrument" });
+  // Only play documents carry createdAt; newest first, a handful of them.
+  const { docs: plays } = useLiveQuery("createdAt", { descending: true, limit: 6 });
+  const instrument = instruments[0];
+  const ctxRef = useRef(null);
+  const [note, setNote] = useState("A4");
+  const [volume, setVolume] = useState(0.5);
+
+  // The context is created by the first tap and closed when the app goes away.
+  useEffect(() => {
+    return () => {
+      ctxRef.current?.close();
+      ctxRef.current = null;
+    };
+  }, []);
+
+  const play = (name) => {
+    const ctx = unlockAudio(ctxRef); // same trusted handler, before anything async
+    playTone(ctx, hzOf(name), volume, instrument?.wave ?? "triangle");
+    setNote(name);
+    // The sound is already playing; saving can take its time.
+    database.put({ type: "play", note: name, createdAt: Date.now() });
+    if (instrument) database.put({ ...instrument, lastNote: name });
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground font-sans p-6">
+      <h1 className="text-3xl font-bold">{instrument?.name ?? "Glass Harp"}</h1>
+      <p className="mt-1 text-muted-foreground">Pick a note, press Play, and let it ring.</p>
+
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>Play a note</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-5">
+            <div className="flex flex-wrap gap-2">
+              {NOTES.map((n) => (
+                <Button key={n.name} variant={n.name === note ? "default" : "outline"} onClick={() => play(n.name)}>
+                  {n.name}
+                </Button>
+              ))}
+            </div>
+            <label className="grid gap-2">
+              <span className="text-muted-foreground">Volume {Math.round(volume * 100)}%</span>
+              <input type="range" min={0} max={1} step={0.05} value={volume} onChange={(e) => setVolume(Number(e.target.value))} className="w-full" />
+            </label>
+            <Button size="lg" onClick={() => play(note)}>
+              Play {note}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>Just played</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-2">
+            {plays.map((p) => (
+              <Badge key={p._id} variant="secondary">
+                {p.note} · {timeOf(p.createdAt)}
+              </Badge>
+            ))}
+          </div>
+          <p className="mt-3 text-muted-foreground">Last note: {instrument?.lastNote ?? note}</p>
+        </CardContent>
+      </Card>
+
+      {/* TODO(next pass): a step sequencer and metronome scheduled ahead on ctx.currentTime, a delay with effects in its feedback loop, and recording a take */}
+    </main>
+  );
+}
+```
+
+### `seed.json`
+```json
+{
+  "glassHarp": [
+    { "key": "harp", "type": "instrument", "name": "Glass Harp", "wave": "triangle", "lastNote": "G4" },
+    { "key": "play-1", "type": "play", "note": "C4", "createdAt": 1758400000000 },
+    { "key": "play-2", "type": "play", "note": "E4", "createdAt": 1758400001000 },
+    { "key": "play-3", "type": "play", "note": "G4", "createdAt": 1758400002000 }
+  ]
+}
+```
+
+Draft note: the next pass adds a step sequencer and metronome on the audio clock, a delay and filter chain, and recording a take to keep.
+
+## What stays the same in a Web Audio draft
+
+- **One `AudioContext`, in a ref, made by a gesture**: `unlockAudio(ctxRef)`
+  creates it on the first tap, re-checks `ctx.state` and resumes on every tap
+  after, and the effect's cleanup closes it. Never a context at module scope,
+  in `useState`, or in a mount effect.
+- **The iOS rule holds in every handler**: the unlock and the first
+  `osc.start()` run synchronously inside the same click, before any `await`,
+  timer, promise or state-driven effect. Saving to the database comes after
+  the sound has started.
+- **The hello is one shaped tone**: an `OscillatorNode` into a `GainNode`,
+  `setValueAtTime` to a floor of `0.0001`, `linearRampToValueAtTime` for the
+  attack, `exponentialRampToValueAtTime` for the release, `osc.stop` at about
+  0.4 s, and both nodes disconnected in `onended`. Nothing plays on load.
+- **`playTone(ctx, hz, volume, wave)` is a plain function** outside the
+  component, taking the context as an argument. The next pass's engine and
+  scheduler sit beside it in the same shape.
+- **Controls are ordinary elements**: named notes as `Button`s, volume as a
+  plain `<input type="range">`, read at the moment of the tap.
+- **The data is real**: the seeded instrument document holds the name, the
+  wave and the last note; each tap writes a `play` document with `createdAt`,
+  and a `useLiveQuery` list shows the newest few.
+- **What waits for the next pass** is named in the `TODO(next pass)` comment
+  and the draft note: the sequencer or metronome with lookahead scheduling on
+  `ctx.currentTime`, effects, recording. The draft schedules nothing on the
+  clock beyond the one tone.

package/llms/web-audio.js

@@ -16,5 +16,6 @@ export const webAudioConfig = {
         "melody",
         "web audio",
     ],
+    draftVariant: true,
 };
 //# sourceMappingURL=web-audio.js.map

package/llms/web-audio.js.map

@@ -1 +1 @@
-{"version":3,"file":"web-audio.js","sourceRoot":"","sources":["../../jsr/llms/web-audio.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,eAAe;IACtB,WAAW,EACT,2NAA2N;IAC7N,IAAI,EAAE;QACJ,OAAO;QACP,OAAO;QACP,QAAQ;QACR,OAAO;QACP,OAAO;QACP,aAAa;QACb,YAAY;QACZ,WAAW;QACX,cAAc;QACd,MAAM;QACN,QAAQ;QACR,WAAW;KACZ;CACF,CAAC"}
+{"version":3,"file":"web-audio.js","sourceRoot":"","sources":["../../jsr/llms/web-audio.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,eAAe;IACtB,WAAW,EACT,2NAA2N;IAC7N,IAAI,EAAE;QACJ,OAAO;QACP,OAAO;QACP,QAAQ;QACR,OAAO;QACP,OAAO;QACP,aAAa;QACb,YAAY;QACZ,WAAW;QACX,cAAc;QACd,MAAM;QACN,QAAQ;QACR,WAAW;KACZ;IAGD,YAAY,EAAE,IAAI;CACnB,CAAC"}

package/llms/webxr.draft.md

@@ -0,0 +1,159 @@
+# Babylon.js WebXR — the first draft: a lit scene with a door into VR
+
+A WebXR app's first draft is the page around the scene (title, copy, a card
+holding the canvas) with one real Babylon.js scene running inside it: a lit
+box turning above a ground plane. The VR half is shown honestly: an "Enter
+VR" Button that lights up when the browser reports an immersive headset and
+opens the session through `scene.createDefaultXRExperienceAsync`, and reads
+"VR needs a headset browser" everywhere else. Hit testing, anchors, hand
+tracking, particles and shaders are the next pass. What the draft owes that
+pass is the skeleton: the engine and scene are built once in one effect with a
+full cleanup, the ground mesh the XR floor needs already exists, and the scene
+lives in a ref so the next pass adds features to this file rather than
+rewriting it.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import * as BABYLON from "@babylonjs/core";
+import { Card, CardHeader, CardTitle, CardContent, Button, Badge } from "@vibes.diy/look";
+
+export default function App() {
+  const { useLiveQuery } = useFireproof("floatingRoom");
+  const { docs: rooms } = useLiveQuery("type", { key: "room" });
+  const room = rooms[0];
+  const canvasRef = useRef(null);
+  const sceneRef = useRef(null);
+  const [vrReady, setVrReady] = useState(false);
+  const [inVr, setInVr] = useState(false);
+
+  // The engine, built once: scene, camera, lights, ground, one box, render loop, resize, cleanup.
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+    const scene = new BABYLON.Scene(engine);
+    scene.clearColor = new BABYLON.Color4(0.06, 0.08, 0.14, 1);
+
+    const camera = new BABYLON.FreeCamera("cam", new BABYLON.Vector3(0, 1.7, -5), scene);
+    camera.setTarget(new BABYLON.Vector3(0, 1, 0));
+    camera.attachControl(canvas, true);
+
+    const ambient = new BABYLON.HemisphericLight("ambient", new BABYLON.Vector3(0, 1, 0), scene);
+    ambient.intensity = 0.5;
+    const sun = new BABYLON.DirectionalLight("sun", new BABYLON.Vector3(-1, -2, -1), scene);
+    sun.position = new BABYLON.Vector3(5, 10, 5);
+    sun.intensity = 0.8;
+
+    const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 12, height: 12 }, scene);
+    const groundMat = new BABYLON.StandardMaterial("groundMat", scene);
+    groundMat.diffuseColor = new BABYLON.Color3(0.22, 0.3, 0.26);
+    ground.material = groundMat;
+
+    const box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
+    box.position.y = 1.2;
+    const boxMat = new BABYLON.StandardMaterial("boxMat", scene);
+    boxMat.diffuseColor = new BABYLON.Color3(0.95, 0.55, 0.25);
+    box.material = boxMat;
+
+    scene.onBeforeRenderObservable.add(() => {
+      const dt = engine.getDeltaTime() / 1000;
+      box.rotation.y += dt * 0.8;
+      box.rotation.x += dt * 0.3;
+    });
+
+    sceneRef.current = { scene, ground };
+    engine.runRenderLoop(() => scene.render());
+    const onResize = () => engine.resize();
+    window.addEventListener("resize", onResize);
+
+    // Ask the browser once whether an immersive headset session is on offer.
+    let alive = true;
+    if (navigator.xr) {
+      navigator.xr
+        .isSessionSupported("immersive-vr")
+        .then((ok) => { if (alive) setVrReady(ok); })
+        .catch(() => { if (alive) setVrReady(false); });
+    }
+
+    return () => {
+      alive = false;
+      sceneRef.current = null;
+      window.removeEventListener("resize", onResize);
+      engine.stopRenderLoop();
+      scene.dispose();
+      engine.dispose();
+    };
+  }, []);
+
+  const enterVr = async () => {
+    const current = sceneRef.current;
+    if (!current) return;
+    const xr = await current.scene.createDefaultXRExperienceAsync({ floorMeshes: [current.ground], disableDefaultUI: true });
+    xr.baseExperience.onStateChangedObservable.add((state) => setInVr(state === BABYLON.WebXRState.IN_XR));
+    await xr.baseExperience.enterXRAsync("immersive-vr", "local-floor");
+  };
+
+  return (
+    <main className="min-h-screen bg-background text-foreground font-sans p-6">
+      <h1 className="text-3xl font-bold">{room?.name ?? "Floating Room"}</h1>
+      <p className="mt-1 text-muted-foreground">{room?.tagline ?? "A quiet room with one bright box. Drag to look around, or step inside with a headset."}</p>
+
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>The room</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <canvas ref={canvasRef} className="block aspect-video w-full rounded-lg outline-none touch-none" />
+          {/* TODO(next pass): hit testing, anchors, hand tracking, particles and shaders inside this same scene */}
+          <div className="mt-4 flex flex-wrap items-center gap-3">
+            {vrReady ? (
+              <Button onClick={enterVr}>Enter VR</Button>
+            ) : (
+              <Button disabled variant="outline">VR needs a headset browser</Button>
+            )}
+            <Badge variant="secondary">{inVr ? "In VR" : "On screen"}</Badge>
+          </div>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+```
+
+### `seed.json`
+```json
+{
+  "floatingRoom": [
+    { "key": "room", "type": "room", "name": "Floating Room", "tagline": "A quiet room with one bright box. Drag to look around, or step inside with a headset." }
+  ]
+}
+```
+
+Draft note: the next pass adds hit testing, anchors, hand tracking, particles and shaders to the same scene.
+
+## What stays the same in a WebXR draft
+
+- **The import is `import * as BABYLON from "@babylonjs/core"`**, never the
+  legacy `babylonjs` package, and every engine class is reached through the
+  `BABYLON.` namespace.
+- **The engine is built once** in `useEffect(() => {...}, [])`: `Engine`,
+  `Scene`, camera, lights, ground, mesh and `engine.runRenderLoop` all inside
+  it, per-frame motion in `scene.onBeforeRenderObservable`, and the scene kept
+  in a ref for the few calls React makes in.
+- **The cleanup is complete**: it removes the resize listener, stops the render
+  loop, disposes the scene and disposes the engine.
+- **Sizing**: the canvas is `block aspect-video w-full` inside a Card, and
+  `window` resize calls `engine.resize()`.
+- **The hello is one lit box on a ground plane** under a hemispheric light and
+  a directional light, turning on the engine's delta time. The ground doubles
+  as the XR floor mesh.
+- **VR is shown, never hidden**: `navigator.xr.isSessionSupported("immersive-vr")`
+  is checked in the effect and stored in state; a supported browser gets an
+  "Enter VR" Button that awaits `createDefaultXRExperienceAsync` with
+  `disableDefaultUI` and then `enterXRAsync("immersive-vr", "local-floor")`,
+  and every other browser sees a disabled Button reading "VR needs a headset
+  browser".
+- **What waits for the next pass** is named in the `TODO(next pass)` comment
+  and the draft note: hit testing, anchors, hand tracking, particles, shaders.
+  The draft draws none of it.

package/llms/webxr.js

@@ -19,6 +19,7 @@ export const webxrConfig = {
         "quest",
         "vision pro",
     ],
+    draftVariant: true,
     importModule: "@babylonjs/core",
     importName: "BABYLON",
     importType: "namespace",

package/llms/webxr.js.map

@@ -1 +1 @@
-{"version":3,"file":"webxr.js","sourceRoot":"","sources":["../../jsr/llms/webxr.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,kBAAkB;IACzB,WAAW,EACT,gFAAgF;QAChF,4FAA4F;QAC5F,kFAAkF;QAClF,sFAAsF;QACtF,uDAAuD;IACzD,IAAI,EAAE;QACJ,OAAO;QACP,IAAI;QACJ,IAAI;QACJ,iBAAiB;QACjB,mBAAmB;QACnB,SAAS;QACT,WAAW;QACX,eAAe;QACf,SAAS;QACT,OAAO;QACP,YAAY;KACb;IACD,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,WAAW;CACxB,CAAC"}
+{"version":3,"file":"webxr.js","sourceRoot":"","sources":["../../jsr/llms/webxr.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,kBAAkB;IACzB,WAAW,EACT,gFAAgF;QAChF,4FAA4F;QAC5F,kFAAkF;QAClF,sFAAsF;QACtF,uDAAuD;IACzD,IAAI,EAAE;QACJ,OAAO;QACP,IAAI;QACJ,IAAI;QACJ,iBAAiB;QACjB,mBAAmB;QACnB,SAAS;QACT,WAAW;QACX,eAAe;QACf,SAAS;QACT,OAAO;QACP,YAAY;KACb;IAGD,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,iBAAiB;IAC/B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,WAAW;CACxB,CAAC"}

package/llms/youtube.draft.md

@@ -0,0 +1,183 @@
+# YouTube channel stats — the first draft: the whole dashboard on sample rows
+
+A YouTube dashboard's first draft is the finished page, painted from seeded
+documents shaped exactly like the rows the real backend returns: the channel
+header with its name and handle, three stat tiles (subscribers, views, videos),
+the recent uploads with their published date and view count, and the setup card
+that walks the owner through getting a YouTube Data API v3 key. A Badge on the
+header reads "sample data until the key is set", so the capability is on screen
+and honestly labeled from the first paint.
+
+The next pass writes `backend.js`: it reads `YOUTUBE_API_KEY` from the vibe's
+secrets, resolves the channel from its handle, reads the uploads playlist, and
+saves a daily snapshot. What the draft owes that pass is the row shape: the
+`channel` document carries the same fields `loadChannel` returns (`channelId`,
+`title`, `handle`, `subscribers`, `subscribersHidden`, `views`, `videoCount`)
+and each `video` document carries the same fields `loadVideos` returns (`id`,
+`title`, `published`, `views`, `likes`, `comments`), so the next pass swaps the
+source and keeps every component. The draft writes no `backend.js`, makes no
+network call, reads no secret, and never asks a visitor for a token: the key is
+the owner's, set once in the vibe's settings.
+
+### `App.jsx`
+```jsx
+import React, { useState } from "react";
+import { useFireproof } from "use-fireproof";
+import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@vibes.diy/look";
+
+// The owner's one-time trip to Google, carried in the app because the owner is the one who reads it.
+const SETUP_STEPS = [
+  "Open the Google Cloud console and create or select a project.",
+  "In APIs & Services, open Library and enable YouTube Data API v3.",
+  "In Credentials, choose Create credentials, then API key.",
+  "Restrict the key to YouTube Data API v3.",
+  "Set it on this vibe as YOUTUBE_API_KEY in the vibe's settings page.",
+];
+const SECRET_NAME = "YOUTUBE_API_KEY";
+
+const formatCount = (n) => (n == null ? "hidden" : Number(n).toLocaleString());
+const formatDay = (iso) => new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" });
+
+function StatCard({ label, value, caption }) {
+  return (
+    <Card>
+      <CardHeader>
+        <p className="text-muted-foreground">{label}</p>
+      </CardHeader>
+      <CardContent>
+        <p className="text-3xl font-bold">{value}</p>
+        {caption && <p className="mt-1 text-muted-foreground">{caption}</p>}
+      </CardContent>
+    </Card>
+  );
+}
+
+function VideoCard({ video }) {
+  return (
+    <Card>
+      <CardContent>
+        <p className="font-semibold">{video.title}</p>
+        <div className="mt-2 flex flex-wrap items-center gap-3 text-muted-foreground">
+          <span>{formatDay(video.published)}</span>
+          <span className="font-medium text-foreground">{formatCount(video.views)} views</span>
+          <span>{formatCount(video.likes)} likes</span>
+          <span>{formatCount(video.comments)} comments</span>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function App() {
+  const { useLiveQuery } = useFireproof("youtubeDashboard");
+  const { docs: channels } = useLiveQuery("type", { key: "channel" });
+  const { docs: videos } = useLiveQuery("type", { key: "video" });
+  const [sortBy, setSortBy] = useState("newest");
+  const channel = channels[0];
+
+  const sorted = videos
+    .slice()
+    .sort((a, b) => (sortBy === "views" ? b.views - a.views : b.published.localeCompare(a.published)));
+
+  return (
+    <main className="min-h-screen bg-background text-foreground font-sans p-6">
+      <div className="flex flex-wrap items-center gap-3">
+        <h1 className="text-3xl font-bold">{channel?.title ?? "Your channel"}</h1>
+        <Badge variant="secondary">sample data until the key is set</Badge>
+      </div>
+      <p className="mt-1 text-muted-foreground">{channel?.handle} · how the channel is doing, at a glance</p>
+
+      <div className="mt-6 grid gap-4 sm:grid-cols-3">
+        <StatCard
+          label="Subscribers"
+          value={channel?.subscribersHidden ? "hidden by the channel" : formatCount(channel?.subscribers)}
+          caption="YouTube rounds public subscriber counts."
+        />
+        <StatCard label="Views" value={formatCount(channel?.views)} />
+        <StatCard label="Videos" value={formatCount(channel?.videoCount)} />
+      </div>
+
+      <div className="mt-8 flex flex-wrap items-center justify-between gap-3">
+        <h2 className="text-xl font-semibold">Recent uploads</h2>
+        <div className="flex gap-2">
+          <Button size="sm" variant={sortBy === "newest" ? "default" : "outline"} onClick={() => setSortBy("newest")}>Newest</Button>
+          <Button size="sm" variant={sortBy === "views" ? "default" : "outline"} onClick={() => setSortBy("views")}>Most viewed</Button>
+        </div>
+      </div>
+      <div className="mt-4 grid gap-3">
+        {sorted.map((video) => (
+          <VideoCard key={video.id} video={video} />
+        ))}
+      </div>
+      {/* TODO(next pass): the server handler reads YOUTUBE_API_KEY, resolves the channel from its handle, reads the uploads playlist, and saves a daily snapshot these same components render */}
+
+      <Card className="mt-8">
+        <CardHeader>
+          <CardTitle>Show your live numbers</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">Five minutes in the Google Cloud console, once, and this page fills with your channel.</p>
+          <ol className="mt-3 grid list-decimal gap-2 pl-5">
+            {SETUP_STEPS.map((step) => (
+              <li key={step}>{step}</li>
+            ))}
+          </ol>
+          <p className="mt-3">
+            The secret is named <code className="rounded bg-muted px-1">{SECRET_NAME}</code> and stays on the server.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="mt-4">
+        <CardHeader>
+          <CardTitle>From YouTube Analytics</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">
+            Watch time, revenue, impressions, traffic sources and demographics live in YouTube Analytics with your own
+            sign-in. Not available with an API key.
+          </p>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
+```
+
+### `seed.json`
+```json
+{
+  "youtubeDashboard": [
+    { "key": "channel", "type": "channel", "channelId": "UCq8x2Tn4Lm0bVfKe7RdPw3A", "title": "Tidepool Kitchen", "handle": "@tidepoolkitchen", "subscribers": 48200, "subscribersHidden": false, "views": 3915422, "videoCount": 214 },
+    { "key": "v1", "type": "video", "id": "k3Jd9sLq2Xw", "title": "Sourdough on a camp stove (it worked!)", "published": "2026-09-24T15:00:00Z", "views": 18430, "likes": 1204, "comments": 187 },
+    { "key": "v2", "type": "video", "id": "Pz7tR1mVb8c", "title": "Five-minute miso butter, three ways", "published": "2026-09-17T15:00:00Z", "views": 42911, "likes": 3310, "comments": 402 },
+    { "key": "v3", "type": "video", "id": "aQ4nW6yHe0s", "title": "Foraging sea beans at low tide", "published": "2026-09-10T15:00:00Z", "views": 27604, "likes": 2188, "comments": null },
+    { "key": "v4", "type": "video", "id": "Lm2cX8oTf5u", "title": "The pantry tour everyone asked for", "published": "2026-09-03T15:00:00Z", "views": 61378, "likes": null, "comments": 955 }
+  ]
+}
+```
+
+Draft note: the next pass adds backend.js, which reads `YOUTUBE_API_KEY`, resolves the channel from its handle, reads the uploads playlist and saves a daily snapshot, so the same tiles and cards show live numbers and a chart of change over time.
+
+## What stays the same in a YouTube draft
+
+- **The whole dashboard paints on the first draft**: header, the three stat
+  tiles, the upload list, the setup card and the Analytics label. Nothing
+  waits behind a loading state or an empty section.
+- **Seeded rows mirror the backend's rows field for field**: the `channel`
+  document is `loadChannel`'s shape and each `video` document is `loadVideos`'
+  shape, counts as numbers, `published` as an ISO string, so the next pass
+  changes the source and keeps every component.
+- **The capability is labeled, never hidden**: a Badge on the header reads
+  "sample data until the key is set", and the setup card names YouTube Data API
+  v3 and `YOUTUBE_API_KEY` in so many words.
+- **The key is the owner's**: the setup steps are for the owner, once. No input
+  asks a visitor for a key or a token, and no visitor is sent to a console. An
+  app where each visitor sees their own channel is a connection, not this.
+- **Honest numbers**: a hidden subscriber count reads "hidden by the channel",
+  a missing like or comment count reads "hidden", and the subscriber tile
+  carries the rounding caption. Nothing unknown renders as zero.
+- **What waits for the next pass** is named in the `TODO(next pass)` comment and
+  the draft note: `backend.js`, reading the secret, resolving the handle, the
+  uploads playlist, daily snapshots and the chart. The draft writes no
+  `backend.js`, makes no network call and reads no secret.

package/llms/youtube.js

@@ -2,6 +2,7 @@ export const youtubeConfig = {
     name: "youtube",
     label: "YouTube channel stats",
     description: "YouTube channel dashboards on the owner's own YouTube Data API v3 key: the setup steps the app shows when the key is missing, keeping the key in backend.js, resolving a channel from a handle or URL, reading videos through the uploads playlist instead of the 100-unit search endpoint, daily snapshots to chart change over time, and labeling the numbers an API key cannot see",
+    draftVariant: true,
     cues: [
         "youtube",
         "my channel",

package/llms/youtube.js.map

@@ -1 +1 @@
-{"version":3,"file":"youtube.js","sourceRoot":"","sources":["../../jsr/llms/youtube.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EACT,uXAAuX;IACzX,IAAI,EAAE;QACJ,SAAS;QACT,YAAY;QACZ,kBAAkB;QAClB,aAAa;QACb,aAAa;QACb,eAAe;QACf,mBAAmB;KACpB;CACF,CAAC"}
+{"version":3,"file":"youtube.js","sourceRoot":"","sources":["../../jsr/llms/youtube.ts"],"names":[],"mappings":"AAKA,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,uBAAuB;IAC9B,WAAW,EACT,uXAAuX;IAGzX,YAAY,EAAE,IAAI;IAClB,IAAI,EAAE;QACJ,SAAS;QACT,YAAY;QACZ,kBAAkB;QAClB,aAAa;QACb,aAAa;QACb,eAAe;QACf,mBAAmB;KACpB;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.3.36",
+  "version": "14.3.38",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -37,9 +37,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.3.36",
-    "@vibes.diy/identity": "14.3.36",
-    "@vibes.diy/use-vibes-types": "14.3.36",
+    "@vibes.diy/call-ai-v2": "14.3.38",
+    "@vibes.diy/identity": "14.3.38",
+    "@vibes.diy/use-vibes-types": "14.3.38",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },