@navipartner/demo-video 0.5.0 → 0.6.0

package/README.md

@@ -1,135 +1,132 @@
 # @navipartner/demo-video
 
-Marketing demo videos of a React app, in the NaviPartner house look, with any
-customer's brand.
+Marketing demo videos of React apps.
 
-- Filmed by Playwright on the app's **own e2e mocks**, unchanged.
-- For **pnpm** repos on **GitHub Actions**. Needs `@playwright/test` 1.59+.
+- Filmed on the app's own e2e mocks.
+- NaviPartner look: camera pushes, serif cards.
+- NaviPartner's brand, the only one kept.
+- Customer brands researched per video, never saved.
+- Smooth 60 fps, frame by frame.
+- pnpm repos, GitHub Actions, `@playwright/test` 1.59+.
 
 ## Setup
 
-From the repo root:
-
     npx --ignore-scripts @navipartner/demo-video init
     pnpm install
 
-- Sets up the repo: `.gitignore`, the skill, the `demo video` label,
-  `.github/workflows/demo-video.yml`.
-- Finds the apps: folders with a `playwright.config` and a `package.json`.
-  - **One app** (most repos): set up too. Done.
-  - **Several apps:** listed. Run `init --app <folder>` for each one you want.
-- Safe to re-run. `--dry-run` previews.
-- Then ask Claude for a demo video of the app: it finishes
-  `demo/demo.config.ts` and writes the primary story.
-
-## Getting a video
-
-| Way | Who | Films | Video lands |
-|---|---|---|---|
-| **Run workflow form** (Actions → Demo video) | repo writers | a story + brand, from the chosen branch | the run's Summary |
-| **PR comment** `/demo-video checkout in acme branding` | members | a story + brand, from the PR branch | reply on the PR |
-| **Issue comment**, also from **Linear** | members, Linear's synced thread | a story + brand, from the default branch | reply on the issue (and in Linear) |
-| **`demo video` label** on a PR | whoever labels | every story the PR adds or changes | comment on the PR |
-| **Locally** `pnpm exec demo-video render` | a developer | any story | `demo/out/` |
-
-- **Pitch draft** for a customer without a brand here: ask @Linear (below).
-- The comment's first line is the request; `/demo-video help` lists the
-  stories and brands.
-- No story → the primary story. No brand → the app's default.
-- Unknown story or brand → a reply with the menu of stories and brands.
-- Requests only **choose** a story. New stories come from a developer's PR.
-
-### From Linear
-
-Through Linear's GitHub Issues Sync, both ways.
-
-1. **Once, a Linear admin:** Settings → Integrations → GitHub → link the team
-   to the repo with **Issues Sync**, two-way.
-2. In the issue's **synced thread**: `/demo-video help` for the menu, or
-   e.g. `/demo-video checkout in acme branding`.
-3. The reply syncs back with the video link (opens on GitHub: needs repo
-   read access).
-
-### Pitch drafts (in Linear)
-
-An existing story in a customer's branding before they have a brand here,
-for a sales pitch to that customer.
-
-- **Ask:** on a Linear issue, assign or mention @Linear: "pitch draft of
-  checkout for Hotel Royal (hotelroyal.dk)". Linear's GitHub integration
-  needs code access to the repo.
-- **What happens:** in a coding session, Linear's agent follows the skill's
-  `pitch.md`. It reads what the app needs (`brandNeeds`), researches the
-  brand from the customer's own website, and runs `demo-video pitch`, which
-  checks it, downloads the images and films at 30 fps. The MP4 and its
-  contact sheet are attached to the issue.
-- **Nothing kept:** no commit, no PR, no brand in the repo. The session
-  works in `/tmp/pitch` and deletes it.
-- **For that customer only:** Google Fonts stand-ins, and a person checks it
-  before sending. Any other use needs their permission and a brand in a PR.
-- **Cost and time:** Linear AI credits, no API key. Linear's sandbox films
-  slowly: about 8× the video's length at 30 fps (a 75 s story ≈ 10 min).
-- A `/demo-video … pitch …` comment on GitHub replies with these steps.
+- Adds the skill, label and workflow.
+- Finds apps with a `playwright.config`.
+- One app: set up directly.
+- Several apps: `init --app <folder>` each.
+- Safe to re-run; `--dry-run` previews.
+- Then ask Claude for a video.
+
+## Get a video
+
+| Ask | Who | You get |
+|---|---|---|
+| @Linear "video of checkout from np-pos for Northwind (northwind.example)" | Linear users | that story in Northwind's researched brand, attached |
+| @Linear "video of checkout from np-pos" | Linear users | that story, NaviPartner brand, attached |
+| `/demo-video` on a PR | members | primary story, from the PR branch |
+| `/demo-video checkout` | members | that story |
+| `/demo-video checkout in danish` | members | its translation |
+| `/demo-video help` | members | menu of stories |
+| `demo video` label on a PR | whoever labels | every changed story, each push |
+| Actions → Demo video → Run workflow | repo writers | any story, any branch |
+| `pnpm exec demo-video render` | developers | any story, locally |
+
+- Requests only pick existing stories.
+- New stories come via PRs.
+- PR comments: first line is the request.
+- Unknown names get the menu.
+- Customer branding only through @Linear.
+
+### In Linear
+
+- Ask @Linear in plain words.
+- Name the repo, story and customer.
+- Follows the skill's `linear.md`.
+- NaviPartner itself: 60 fps video.
+- A customer: a pitch draft.
+- MP4 and contact sheet attached.
+- Nothing committed, nothing kept.
+- Linear AI credits, no API key.
+- Slow sandbox: ~15× video length.
+
+### Pitch drafts
+
+- Researched from the customer's own website.
+- Checked, then filmed at 30 fps.
+- Google Fonts stand-ins only.
+- That customer only; check before sending.
+- Other use needs their written permission.
 
 ## Stories and brands
 
-- **Story:** `demo/stories/<name>.json`, built only from what the mocks
-  return. One per app is `"primary": true`.
-- **Variant:** `checkout.acme.json`, the base story's steps in one
-  customer's words and brand.
-- **Brand:** `demo/brands/<name>.json` plus a folder of assets. The engine
-  ships `navipartner`, the default.
-- **Brand needs:** the adapter's `brandNeeds` lists what this app takes from
-  a brand (a background image, a secondary colour…). `check` fails on a
-  brand that lacks one.
-- The skill (`skills/np-demo-video/`) has the look and every field.
+- **Story:** `demo/stories/<name>.json`, scenes as JSON.
+- Built only from the mocks.
+- One story per app is primary.
+- **Translation:** its own story, e.g. `checkout-da.json`.
+- Same flow, cards in that language.
+- **Brands:** only `navipartner`, shipped with the engine.
+- No `demo/brands/` in repos: `check` refuses it.
+- Stories never name a brand.
+- **Brand needs:** the adapter lists what a brand gives.
+- Pitch research fills exactly those.
+- The skill has fields and the look.
 
 ## Commands
 
-In the app's folder: `pnpm exec demo-video <command>` (no command lists
-them all).
+Run in the app's folder: `pnpm exec demo-video <command>`.
 
 | Command | Does |
 |---|---|
-| `list` | The stories, primary first. |
-| `check` | Dry run in seconds. Fails on anything that would film badly, and names the step. |
-| `render` | Films to `demo/out/<story>-<brand>-demo.mp4`, plus a contact sheet and ten stills. |
-| `brand-needs` | What a brand must give this app. |
-| `pitch <proposal.json>` | A pitch draft from a researched brand: check, film at 30 fps, video out of the repo. |
-
-Flags:
+| `init` | sets up a repo or app |
+| `list` | stories, primary first |
+| `check` | dry run in seconds, names problems |
+| `render` | MP4, contact sheet, ten stills |
+| `record` / `encode` / `stills` | render in parts |
+| `brand-needs` | what a brand must give |
+| `pitch <proposal.json>` | pitch draft from a researched brand |
+| `pick` | what a request means (workflows) |
+
+| Flag | Means |
+|---|---|
+| `--story <name>` | default: primary story |
+| `--draft` | 30 fps, twice as fast |
+| `--app <dir>` | app folder, default `.` |
+| `--json` | machine-readable output |
+| `--brand`, `--brands <dir>` | used by `pitch` only |
 
-- `--story <name>`: default the primary story.
-- `--brand <name>`: default `navipartner`.
-- `--draft`: 30 fps, about twice as fast, for tuning.
-- `--brands <dir>`: a brands folder outside the repo, searched first.
+Output lands in `demo/out/`. Failures keep Playwright's output in `demo/out/failed/`.
 
-## Developing
+## Develop
 
     pnpm install
-    pnpm test && pnpm typecheck && pnpm build
+    pnpm test && pnpm typecheck && pnpm lint && pnpm build
+
+- CI runs tests, actionlint, smoke render.
 
-## Releasing
+## Release
 
-1. Bump `version` in `package.json` on `main`.
+1. Bump `version` on main.
 2. `git tag vX.Y.Z && git push origin vX.Y.Z`.
 
-- CI publishes to npm as `latest` (trusted publishing, no npm token) and
-  moves the `v0` tag.
-- Running `release.yml` by hand publishes a `next` prerelease.
+- CI publishes to npm (`latest`).
+- Trusted publishing, no npm token.
+- `v0` tag moves along.
+- Manual `release.yml` run: `next` prerelease.
 
-**What goes public:**
+## Public package, private repo
 
-- The package is public; this repo is not.
-- `scripts/check-public.mjs` checks every tarball, in CI and before
-  publishing: only allowed files, no source maps, nothing shaped like a
-  secret, email or local path.
-- It can't catch names: keep customers and people out of the skill and the
-  README.
+- `check-public.mjs` checks every tarball.
+- Allowed files only, no source maps.
+- No secrets, emails or local paths.
+- Names aren't caught: keep customers out.
 
-**Compatibility:**
+## Compatibility
 
-- Projects pin the CLI in their lockfile, but their workflow follows `v0`
-  at once.
-- So `render.yml` and `request.yml` must work with every CLI from 0.4 (older
-  ones get a reply asking for the update). Anything else is `v1`.
+- Projects pin the CLI version.
+- Their workflows follow `v0` immediately.
+- Workflows must support CLI 0.4+.
+- Breaking that means `v1`.

package/bin/args.d.mts

@@ -27,9 +27,6 @@ export interface StoryEntry {
   name: string;
   description: string | null;
   primary: boolean;
-  /** A variant: the story it extends, and the brand it is for. */
-  extends?: string;
-  brand?: string | null;
 }
 export function listStories(demoDir: string): StoryEntry[];
 export function resolveStoryboard(

package/bin/args.mjs

@@ -18,7 +18,7 @@ Without --story, check, render and record use the app's primary story.
 brand-needs: what a brand must give this app (its adapter's brandNeeds).
 Setup: demo-video init [--app <dir>] [--dry-run]
 For a /demo-video request: demo-video pick --request "<text>" [--json] <app dir>...
-For a pitch draft (the skill's pitch.md): demo-video pitch <proposal.json> [--app <dir>] [--story <name>] [--out <dir>] [--json]`;
+For a pitch draft (the skill's linear.md): demo-video pitch <proposal.json> [--app <dir>] [--story <name>] [--out <dir>] [--json]`;
 
 export const resolveStoryboard = (value, cwd, demoDir) => {
   if (value.endsWith(".json")) {
@@ -62,10 +62,6 @@ export const listStories = (demoDir) => {
         name: f.slice(0, -".json".length),
         description: story.description ?? null,
         primary: story.primary === true,
-        // A variant: the base story's flow, for one brand.
-        ...(story.extends
-          ? { extends: story.extends, brand: story.brand ?? null }
-          : {}),
       };
     })
     .sort(

package/bin/demo-video.mjs

@@ -136,7 +136,7 @@ const runPick = (argv) => {
     const arg = argv[i];
     if (arg === "--json") {
       json = true;
-    } else if (["--request", "--app", "--story", "--brand"].includes(arg)) {
+    } else if (["--request", "--app", "--story"].includes(arg)) {
       flags[arg.slice(2)] = argv[++i] ?? "";
     } else {
       dirs.push(arg);
@@ -144,7 +144,7 @@ const runPick = (argv) => {
   }
   if (dirs.length === 0) {
     console.error(
-      'Usage: demo-video pick [--request "<text>" | --app <a> --story <s> --brand <b>] [--json] <app dir>...',
+      'Usage: demo-video pick [--request "<text>" | --app <a> --story <s>] [--json] <app dir>...',
     );
     return 2;
   }
@@ -165,15 +165,13 @@ const runPick = (argv) => {
   } else if (out.menu) {
     console.log(out.markdown);
   } else {
-    console.log(
-      `${out.app}: story ${out.story}, brand ${out.brand ?? "(the app's default)"}`,
-    );
+    console.log(`${out.app}: story ${out.story}`);
   }
   return 0;
 };
 
 // demo-video pitch <proposal.json> [--app <dir>] [--story <name>] [--out <dir>]
-// [--json]: a pitch draft from a researched proposal (the skill's pitch.md).
+// [--json]: a pitch draft from a researched proposal (the skill's linear.md).
 // It builds the brand in a temp folder (pitch.mjs), checks the story with
 // it, films it at 30 fps and moves the video and its contact sheet to --out
 // (default: the proposal's folder). The brand and the repo's copies go.
@@ -345,7 +343,7 @@ const run = () => {
       } else {
         for (const s of stories) {
           console.log(
-            `${s.primary ? "* " : "  "}${s.name}${s.description ? `: ${s.description}` : ""}${s.extends ? ` (${s.extends}, for ${s.brand})` : ""}`,
+            `${s.primary ? "* " : "  "}${s.name}${s.description ? `: ${s.description}` : ""}`,
           );
         }
       }

package/bin/init.mjs

@@ -22,16 +22,15 @@ const engineVersion = () =>
 
 export const CALLER_WORKFLOW = `name: Demo video
 # The "${LABEL}" label films the stories a PR adds or changes. A comment
-# "/demo-video [<story>] [in <brand> branding]" on a PR (its branch) or an
-# issue (the default branch; also from Linear's synced thread), or Actions →
-# Demo video → Run workflow, films an existing story with a brand.
-# Pitch drafts for a customer without a brand here are @Linear's (README).
+# "/demo-video [<story>]" on a PR, or Actions → Demo video → Run workflow,
+# films an existing story in NaviPartner's brand. A customer's branding: ask
+# @Linear (the skill's linear.md); repos keep no brands.
 on:
   pull_request:
     types: [labeled, synchronize]
   issue_comment:
     types: [created]
-  # Actions → Demo video → Run workflow: film a story with a brand.
+  # Actions → Demo video → Run workflow: film a story.
   workflow_dispatch:
     inputs:
       app:
@@ -40,9 +39,6 @@ on:
       story:
         description: "Story name (empty: the app's primary story)"
         default: ""
-      brand:
-        description: "Brand (empty: the app's default)"
-        default: ""
 permissions: {}
 jobs:
   render:
@@ -52,7 +48,7 @@ jobs:
       pull-requests: write
     uses: navipartner/demo-video/.github/workflows/render.yml@v0
   request:
-    if: github.event_name == 'workflow_dispatch' || (github.event_name == 'issue_comment' && contains(github.event.comment.body, '/demo-video'))
+    if: github.event_name == 'workflow_dispatch' || (github.event_name == 'issue_comment' && github.event.issue.pull_request && startsWith(github.event.comment.body, '/demo-video'))
     permissions:
       contents: read
       pull-requests: write
@@ -61,7 +57,6 @@ jobs:
     with:
       app: \${{ inputs.app }}
       story: \${{ inputs.story }}
-      brand: \${{ inputs.brand }}
 `;
 
 const read = (file) =>

package/bin/pick.d.mts

@@ -4,13 +4,11 @@ export interface AppMenu {
   dir: string;
   name: string;
   stories: StoryEntry[];
-  brands: string[];
 }
 export type Pick =
   | {
       app: string;
       story: string;
-      brand: string | null;
       menu?: undefined;
     }
   | { menu: true; reason: string; apps?: AppMenu[] };
@@ -19,5 +17,5 @@ export function pick(request: string, apps: AppMenu[]): Pick;
 export function menuMarkdown(apps: AppMenu[], reason: string): string;
 export function pickExact(
   apps: AppMenu[],
-  names: { app?: string; story?: string; brand?: string },
+  names: { app?: string; story?: string },
 ): Pick;