feat: complete GIF demo pipeline with 141 recorded demos and site integration

140 VHS tape files (26 stories + 114 solo) covering all 186 bray tools.
Clickable tool tags on site open GIF demos in a modal overlay.
Dedicated demo identity with Shamir backup for reproducible recordings.

Pipeline: generate-tapes.sh defines prompts, record.sh orchestrates VHS,
bray-demo.sh wraps claude -p with MCP config. Re-record any demo with
./record.sh --force <name>.

Author: TheCryptoDonkey

docs/superpowers/specs/2026-03-27-gif-demos-design.md

@@ -2,7 +2,7 @@
 
 **Date:** 2026-03-27
 **Status:** Approved
-**Scope:** Automated GIF demo pipeline covering all 185 bray tools
+**Scope:** Automated GIF demo pipeline covering all 186 bray tools (140 tapes: 26 stories + 114 solo)
 
 ## Background
 
@@ -16,7 +16,7 @@ Each demo gets a `.tape` file (VHS script) that runs `claude -p` with a specific
 
 Tools are organised into two categories:
 - **Story demos** (26 groupings of 2-4 tools chained into workflows)
-- **Solo demos** (~80 standalone utility tools)
+- **Solo demos** (114 standalone utility tools)
 
 Story demos record a single session where Claude uses multiple tools in sequence. Solo demos record one tool call each.
 
@@ -39,13 +39,16 @@ VHS can simulate terminal sessions with `Type`/`Output` commands, but we use it
 
 ```
 site/demos/
-  record.sh              # Main orchestrator (loops through all tapes)
+  bray-demo.sh           # Wrapper: runs claude -p with bray MCP config
+  mcp-demo.json          # MCP server config pointing at local bray build
+  record.sh              # Orchestrator (loops tapes, skips existing, --force)
+  generate-tapes.sh      # Generates all tape files from prompt definitions
   tapes/
-    stories/             # Multi-tool workflow tapes
+    stories/             # Multi-tool workflow tapes (26)
       01-identity-onboarding.tape
       02-identity-backup.tape
       ...
-    solo/                # Single-tool tapes
+    solo/                # Single-tool tapes (114)
       encode-npub.tape
       verify-event.tape
       ...
@@ -55,48 +58,68 @@ site/demos/
 
 ## Recording Pipeline
 
+Each tape uses an alias trick: it hides the setup (custom PS1 prompt, alias `claude` to `bray-demo.sh`), then shows only the `claude -p '<prompt>'` command and its output. The wrapper (`bray-demo.sh`) runs Claude Code with `--bare --dangerously-skip-permissions --mcp-config mcp-demo.json`, so the recording shows clean output without permission prompts.
+
 Per-demo flow:
 
 1. VHS reads the `.tape` file
 2. VHS opens a virtual terminal with configured dimensions and theme
-3. The tape runs `claude -p "<prompt>"` inside the terminal
-4. Claude Code executes, calls bray MCP tools, shows output
-5. VHS renders the session directly to GIF
+3. Hidden setup: custom PS1, alias claude to bray-demo.sh, clear screen
+4. The tape types `claude -p '<prompt>'` (visible to viewer)
+5. bray-demo.sh pipes the prompt to Claude Code with bray MCP config
+6. Claude Code calls bray MCP tools, shows output
+7. VHS renders the session directly to GIF
 
 Example tape file:
 
 ```tape
-# 01-identity-onboarding.tape
 Set Shell "zsh"
-Set Width 100
-Set Height 30
+Set Width 1200
+Set Height 600
 Set Theme "Catppuccin Mocha"
-Set FontSize 14
+Set FontSize 16
 Set Padding 20
+Set TypingSpeed 40ms
+
+Output gifs/01-identity-onboarding.gif
 
-Output ../gifs/01-identity-onboarding.gif
+Hide
+Type "export PS1='darren@ForgeSworn.dev:bray $ '"
+Enter
+Type "alias claude=/Users/darren/WebstormProjects/bray/site/demos/bray-demo.sh"
+Enter
+Type "clear"
+Enter
+Sleep 0.5s
+Show
 
-Type "claude -p 'Create a new Nostr identity, derive a persona called demo, switch to it, then confirm with whoami'"
+Type "claude -p 'Create a new Nostr identity, derive a persona called demo, switch to it, then check whoami'"
 Enter
-Sleep 15s
+Sleep 25s
 ```
 
-The orchestrator script (`record.sh`) handles:
-- Looping through all tape files (or recording a single one by name)
-- Skipping already-recorded demos (unless `--force`)
-- Reporting progress
+**Tape generation:** All tapes are generated by `generate-tapes.sh`, which defines every prompt in a single file. To regenerate after prompt edits: `./generate-tapes.sh`.
+
+**Orchestrator (`record.sh`):**
+- `./record.sh` -- record all (skip existing GIFs)
+- `./record.sh --force` -- re-record everything
+- `./record.sh --stories` / `--solo` -- record only one category
+- `./record.sh <name>` -- record a single demo by partial name match
+- `./record.sh --list` -- show recording status
+- `./record.sh --optimise` -- optimise existing GIFs with gifsicle
 
 ## GIF Specifications
 
 | Setting | Value |
 |---------|-------|
-| Terminal width | 100 columns |
-| Terminal height | 30 rows |
-| Theme | Dark (matches site aesthetic) |
-| Font size | 14px |
-| Max duration | Story: 15-20s, Solo: 5-8s |
-| Loop | Once, then hold final frame |
-| Status line | `darren@ForgeSworn.dev:bray` |
+| Terminal width | 1200px |
+| Terminal height | Story: 600px, Solo: 400px |
+| Theme | Catppuccin Mocha |
+| Font size | 16px |
+| Typing speed | 40ms per character |
+| Padding | 20px |
+| Max sleep | Story: 20-30s, Solo: 12-15s |
+| PS1 prompt | `darren@ForgeSworn.dev:bray $ ` |
 
 ## Story Demos (26 groupings)
 
@@ -131,32 +154,32 @@ Each story prompt asks Claude to perform a natural workflow using 2-4 tools in s
 | 25 | Blossom Files | blossom-upload, blossom-list, blossom-mirror | Upload, manage, replicate |
 | 26 | Relay Operator | relay-info, relay-count, relay-auth | Inspect, count, authenticate |
 
-## Solo Demos (~80 tools)
+## Solo Demos (114 tools)
 
-Each solo prompt asks Claude to use one specific tool. Organised by group:
+Each solo prompt asks Claude to use one specific tool. All prompts are defined in `generate-tapes.sh`. Organised by group:
 
-- **Encoding/Decoding** (6): encode-npub, encode-note, encode-nprofile, encode-nevent, encode-naddr, encode-nsec
+- **Encoding/Decoding** (7): decode, encode-npub, encode-note, encode-nprofile, encode-nevent, encode-naddr, encode-nsec
 - **Crypto Utilities** (6): verify-event, nip44-encrypt, nip44-decrypt, key-public, key-encrypt, key-decrypt
-- **Privacy** (7): privacy-open, privacy-prove-range, privacy-verify-range, privacy-prove-threshold, privacy-verify-threshold, privacy-publish-proof, privacy-read-proof
-- **Trust Utilities** (14): trust-verify, trust-read, trust-request, trust-request-list, trust-proof-publish, trust-attest-parse, trust-attest-filter, trust-attest-temporal, trust-attest-chain, trust-attest-check-revoked, trust-ring-lsag-sign, trust-ring-lsag-verify, trust-ring-key-image, trust-spoken-directional, trust-spoken-encode
-- **Identity Utilities** (5): identity-list, identity-prove, identity-backup, identity-restore, identity-migrate
-- **Content Management** (5): label-remove, label-read, label-search, label-self, list-mute-read, list-check-muted
-- **Social Utilities** (4): social-delete, social-repost, dm-by-name, dm-conversation
-- **Event Queries** (4): count, fetch, filter, social-feed
+- **Event Queries** (3): count, filter, social-feed
 - **NIP Info** (2): nip-list, nip-show
-- **Marketplace Utilities** (5): marketplace-search, marketplace-reputation, marketplace-compare, marketplace-probe, marketplace-credentials-clear
-- **Canary Utilities** (8): canary-session-current, canary-session-verify, canary-group-current, canary-group-verify, canary-group-members, canary-group-join, canary-duress-signal, canary-duress-detect
-- **Safety** (2): safety-configure, safety-activate
-- **Signet** (1): signet-credentials
-- **Relay Utilities** (4): relay-add, relay-query, relay-diversity, relay-compare
+- **Identity Utilities** (7): identity-derive, identity-list, identity-prove, identity-backup, identity-restore, identity-migrate, nip05-relays
+- **Identity Workflows** (3): identity-setup, identity-recover, onboard-verified
+- **Social Utilities** (7): social-delete, social-repost, social-profile-get, dm-by-name, dm-conversation, feed-by-name, profile-by-name
+- **Contacts** (2): contacts-get, contacts-unfollow
+- **Content Management** (7): label-self, label-read, label-search, label-remove, list-mute-read, list-check-muted, list-pin-read
+- **Privacy** (7): privacy-open, privacy-prove-range, privacy-verify-range, privacy-prove-threshold, privacy-verify-threshold, privacy-publish-proof, privacy-read-proof
+- **Trust Utilities** (16): trust-read, trust-verify, trust-revoke, trust-request, trust-request-list, trust-proof-publish, trust-attest-parse, trust-attest-filter, trust-attest-temporal, trust-attest-chain, trust-attest-check-revoked, trust-ring-lsag-sign, trust-ring-lsag-verify, trust-ring-key-image, trust-spoken-directional, trust-spoken-encode
+- **Signet** (2): signet-credentials, signet-challenge
+- **Relay Utilities** (4): relay-add, relay-query, relay-compare, relay-diversity
+- **Safety** (6): safety-configure, safety-activate, canary-group-join, canary-group-members, canary-duress-signal, canary-duress-detect
+- **Vault Utilities** (6): vault-read, vault-read-shared, vault-revoke, vault-members, vault-config, vault-rotate
+- **Marketplace Utilities** (8): marketplace-search, marketplace-reputation, marketplace-compare, marketplace-probe, marketplace-announce, marketplace-update, marketplace-retire, marketplace-credentials-clear
 - **Zap Utilities** (4): zap-decode, zap-lookup-invoice, zap-list-transactions, zap-receipts
-- **Workflow** (5): feed-discover, identity-setup, identity-recover, relay-health, onboard-verified
-- **Blossom** (8): blossom-check, blossom-delete, blossom-discover, blossom-verify, blossom-repair, blossom-usage, blossom-servers-get, blossom-servers-set
+- **Blossom** (7): blossom-check, blossom-delete, blossom-discover, blossom-verify, blossom-repair, blossom-usage, blossom-servers
 - **Groups** (4): group-info, group-chat, group-send, group-members
 - **NIP Publishing** (2): nip-publish, nip-read
-- **Contacts** (3): contacts-get, contacts-follow, contacts-unfollow
+- **Catalogue** (2): search-actions, execute-action
 - **Misc** (1): tombstone
-- **NIP-05** (1): nip05-relays
 
 ## Embedding Strategy
 
@@ -193,9 +216,10 @@ Before recording:
 ## Maintenance
 
 When new tools are added:
-1. Write a `.tape` file in `tapes/solo/` or add to a story group
-2. Run `vhs tapes/solo/<name>.tape` or `./record.sh <name>` to record
-3. The gallery page auto-discovers GIFs from the `gifs/` directory
+1. Add a `tape` call in `generate-tapes.sh`
+2. Run `./generate-tapes.sh` to regenerate tape files
+3. Run `./record.sh <name>` to record the new demo
+4. The gallery page auto-discovers GIFs from the `gifs/` directory
 
 ## Out of Scope