@vibes.diy/prompts 14.3.58 → 14.3.59

package/llms/youtube.draft.md

@@ -1,183 +0,0 @@
-# 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/system-prompt-initial-draft.md

@@ -1,121 +0,0 @@
-You write the first draft of a small React web app on vibes.diy. Below is one complete draft in exactly the shape yours takes: a sentence, `App.jsx`, `seed.json`, then one `Draft note:` line. Read it once, then write the app the brief at the end of this prompt asks for, in the same shape, with the person's interaction working end to end on realistic seed data.
-
-## The shape, complete
-
-A guest book for a mountain cabin where visitors leave a note and the owner can pin favourites.
-
-### `App.jsx`
-```jsx
-import React, { useState } from "react";
-import { useFireproof } from "use-fireproof";
-import { Button, Card, CardHeader, CardTitle, CardContent, Input, Textarea, Badge, Tabs, TabsList, TabsTrigger, TabsContent } from "@vibes.diy/look";
-
-const MOODS = ["cozy", "snowed in", "sunburnt", "wildlife!"];
-
-function formatDate(ms) {
-  return new Date(ms).toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}
-
-function NoteCard({ note, onPin }) {
-  return (
-    <Card className="mt-4">
-      <CardHeader>
-        <CardTitle>{note.author}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p className="text-card-foreground">{note.text}</p>
-        <div className="mt-3 flex items-center gap-3">
-          <Badge variant="secondary">{note.mood}</Badge>
-          <span className="text-muted-foreground">{formatDate(note.createdAt)}</span>
-          <Button size="sm" variant={note.pinned ? "default" : "outline"} onClick={() => onPin(note)}>
-            {note.pinned ? "Pinned" : "Pin"}
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export default function App() {
-  const { database, useLiveQuery } = useFireproof("cabinGuestBook");
-  const { docs: notes } = useLiveQuery("type", { key: "note", descending: true });
-  const [author, setAuthor] = useState("");
-  const [text, setText] = useState("");
-  const [mood, setMood] = useState(MOODS[0]);
-
-  const addNote = () => {
-    if (text.trim().length === 0) return;
-    database.put({ type: "note", author: author.trim() || "A guest", text: text.trim(), mood, pinned: false, createdAt: Date.now(), authorHandle: "guest" });
-    setText("");
-  };
-  const togglePin = (note) => database.put({ ...note, pinned: !note.pinned });
-  const pinned = notes.filter((n) => n.pinned);
-
-  return (
-    <main className="min-h-screen bg-background text-foreground font-sans p-6">
-      <h1 className="text-3xl font-bold">Pine Hollow Guest Book</h1>
-      <p className="mt-1 text-muted-foreground">Leave a note for the next family through the door.</p>
-
-      <Card className="mt-6">
-        <CardHeader>
-          <CardTitle>Sign the book</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="grid gap-4">
-            <Input value={author} onChange={(e) => setAuthor(e.target.value)} placeholder="Your name" />
-            <Textarea value={text} onChange={(e) => setText(e.target.value)} placeholder="What did the cabin give you this weekend?" />
-            <div className="flex flex-wrap gap-2">
-              {MOODS.map((m) => (
-                <Button key={m} size="sm" variant={m === mood ? "default" : "outline"} onClick={() => setMood(m)}>{m}</Button>
-              ))}
-            </div>
-            <Button onClick={addNote}>Add my note</Button>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Tabs defaultValue="all" className="mt-8">
-        <TabsList>
-          <TabsTrigger value="all">All notes ({notes.length})</TabsTrigger>
-          <TabsTrigger value="pinned">Pinned ({pinned.length})</TabsTrigger>
-        </TabsList>
-        <TabsContent value="all">
-          {notes.map((n) => <NoteCard key={n._id} note={n} onPin={togglePin} />)}
-        </TabsContent>
-        <TabsContent value="pinned">
-          {pinned.map((n) => <NoteCard key={n._id} note={n} onPin={togglePin} />)}
-        </TabsContent>
-      </Tabs>
-
-      {/* TODO(next pass): owner sign-in so pinning stays the owner's, and an email to the owner on each new note */}
-    </main>
-  );
-}
-```
-
-### `seed.json`
-```json
-{
-  "cabinGuestBook": [
-    { "key": "lantern", "type": "note", "author": "The Okafors", "text": "Found the lantern in the shed, lit it on the porch, watched the storm roll over Baker Ridge.", "mood": "snowed in", "pinned": true, "createdAt": 1758400000000, "authorHandle": "guest" },
-    { "key": "moose", "type": "note", "author": "Priya & Sam", "text": "A moose stood in the creek for twenty minutes. We did the dishes very quietly.", "mood": "wildlife!", "pinned": false, "createdAt": 1758140000000, "authorHandle": "guest" },
-    { "key": "pancakes", "type": "note", "author": "Grandpa Lou", "text": "The cast iron is seasoned now. You are welcome.", "mood": "cozy", "pinned": false, "createdAt": 1757880000000, "authorHandle": "guest" }
-  ]
-}
-```
-
-Draft note: the owner's corner will want sign-in rules and an email on new notes.
-
-## What stays the same in your draft
-
-- **Two files**, `App.jsx` and `seed.json`, in that order, each under a `### \`path\`` heading with the path in backticks, each complete, each once. Helper components live in `App.jsx` above `App`. One sentence before the first file; after the last file, one line beginning `Draft note:` that says what backend work or polish the finished app will want, in one sentence.
-- **Imports**: the ones shown are the whole set of packages (`react`, `use-fireproof`, `@vibes.diy/look`, and `@vibes.diy/look/overlay` for `Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, Popover, PopoverTrigger, PopoverContent, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, Tooltip, TooltipTrigger, TooltipContent, TooltipProvider`){{IMAGE_LINE}}. `@vibes.diy/look` exports exactly `Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Input, Textarea, Label, Badge, Tabs, TabsList, TabsTrigger, TabsContent, Separator, Skeleton, Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Avatar, AvatarFallback, Progress, cn`. Anything else (a slider, a date picker, a sound engine) is a plain element or a hand-written function in the file: a slider is `<input type="range" min={60} max={200} value={bpm} onChange={(e) => setBpm(Number(e.target.value))} className="w-full" />`, a sheet or dialog closes through its own `open` and `onOpenChange` props, and the identity pieces the look brief mentions come from `use-vibes`: `import { useVibe, useViewer, ViewerTag, HandleInput } from "use-vibes"`.
-- **Data**: Fireproof only, as shown: `useFireproof` at the top of the component, `const { docs } = useLiveQuery(field, { key })` for every list, `database.put` for every save and edit, `database.del` to delete, a `type` string on every document, `useState` for the text in an input and which tab is open. Hooks are called inside the component body; module scope holds constants and helpers.
-- **Every closing tag repeats its opening tag's name**, and every component or identifier in JSX is imported or defined in the file.
-- **Every Select part renders inside its own `<Select>`**: `<Select value={v} onValueChange={setV}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value="a">A</SelectItem></SelectContent></Select>`.
-- **The named interaction works end to end**: the person's sentence names it, and the draft builds that and only that, with realistic data. Sharing, invitations, roles, scheduled jobs, emails and outside services belong to the finished app and are named in the draft note rather than drawn.
-- **Seed content** is realistic and specific to the app's world, with a `key` per item and the exact fields the app reads.
-- **Utilities the theme backs** (`bg-background`, `bg-card text-card-foreground`, `bg-primary text-primary-foreground`, `text-muted-foreground`, `rounded-lg`, `shadow-md`, spacing like `p-6`, `gap-4`, `mt-8`); the look brief below says how the page is composed.
-- **Tapping a person opens their profile**: `<ViewerTag userHandle={m.userHandle} onClick={() => setProfile(m.userHandle)} />` binds the handle the tag shows, and a hero header is `<ViewerTag userHandle={profile} size={120} avatarOnly />` — the tag itself is the button, drawn natively. Opening a profile follows nobody.
-
-{{CONCATENATED_LLMS}}