argos-harness 0.1.0

package/assets/skills/promo-video-web/assets/browser-promo.template.tsx

@@ -0,0 +1,385 @@
+// Landscape (1920x1080) web-surface scene architecture.
+// Replace PRODUCT_DOMAIN, copy placeholders, and capture filenames.
+// Register: PromoWeb = benefit-led marketing; PromoDashboard = calm, outcome-led.
+import React from 'react';
+import {
+  AbsoluteFill,
+  Img,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from 'remotion';
+import {TransitionSeries, linearTiming} from '@remotion/transitions';
+import {fade} from '@remotion/transitions/fade';
+import {slide} from '@remotion/transitions/slide';
+import {colors, fonts, radialBackground} from './theme';
+
+const PRODUCT_DOMAIN = 'app.product.com';
+
+export const DURATIONS = {
+  intro: 100,
+  feature1: 140,
+  feature2: 140,
+  feature3: 140,
+  outro: 120,
+};
+const TRANSITION_FRAMES = 12;
+export const TOTAL_DURATION =
+  Object.values(DURATIONS).reduce((a, b) => a + b, 0) - 4 * TRANSITION_FRAMES;
+
+const springIn = (frame: number, fps: number, delay = 0) =>
+  spring({frame: frame - delay, fps, config: {damping: 16}});
+
+const Backdrop: React.FC<{children: React.ReactNode}> = ({children}) => (
+  <AbsoluteFill style={{background: radialBackground}}>{children}</AbsoluteFill>
+);
+
+const Watermark: React.FC<{word: string}> = ({word}) => {
+  const frame = useCurrentFrame();
+  const {durationInFrames} = useVideoConfig();
+  const drift = interpolate(frame, [0, durationInFrames], [0, -24]);
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 40,
+        left: -140,
+        fontFamily: fonts.display,
+        fontWeight: 700,
+        fontSize: 420,
+        textTransform: 'uppercase',
+        letterSpacing: 8,
+        whiteSpace: 'nowrap',
+        color: 'transparent',
+        WebkitTextStroke: '1px rgba(250,250,250,0.05)',
+        transform: `translateX(${drift}px)`,
+      }}
+    >
+      {word}
+    </div>
+  );
+};
+
+// Browser chrome window: traffic lights + URL pill + capture with Ken Burns.
+const BrowserFrame: React.FC<{
+  src: string;
+  enterFrom: 'left' | 'right';
+  focusX?: string; // objectPosition x-target of the Ken Burns drift
+}> = ({src, enterFrom, focusX = 'center'}) => {
+  const frame = useCurrentFrame();
+  const {fps, durationInFrames} = useVideoConfig();
+  const enter = springIn(frame, fps, 4);
+
+  const offset = interpolate(enter, [0, 1], [1, 0]);
+  const translateX = (enterFrom === 'left' ? -1200 : 1200) * offset;
+  const tilt = interpolate(enter, [0, 1], [enterFrom === 'left' ? 3 : -3, 0.8]);
+  const kenBurns = interpolate(frame, [0, durationInFrames], [1.0, 1.06]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '50%',
+        [enterFrom === 'left' ? 'left' : 'right']: 60,
+        width: '58%',
+        perspective: 1600,
+        transform: `translateY(-50%) translateX(${translateX}px)`,
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 16,
+          border: `1px solid ${colors.borderStrong}`,
+          backgroundColor: colors.surface,
+          overflow: 'hidden',
+          boxShadow: '0 40px 90px rgba(0,0,0,0.65)',
+          transform: `rotateY(${tilt}deg)`,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 16,
+            padding: '14px 20px',
+            backgroundColor: colors.panel,
+            borderBottom: `1px solid ${colors.border}`,
+          }}
+        >
+          <div style={{display: 'flex', gap: 8}}>
+            {['#FF5F57', '#FEBC2E', '#28C840'].map((c) => (
+              <div
+                key={c}
+                style={{width: 12, height: 12, borderRadius: 6, backgroundColor: c}}
+              />
+            ))}
+          </div>
+          <div
+            style={{
+              flex: 1,
+              maxWidth: 420,
+              margin: '0 auto',
+              padding: '6px 18px',
+              borderRadius: 8,
+              backgroundColor: colors.bg,
+              fontFamily: fonts.body,
+              fontSize: 16,
+              color: colors.textMuted,
+              textAlign: 'center',
+            }}
+          >
+            {PRODUCT_DOMAIN}
+          </div>
+        </div>
+        <div style={{aspectRatio: '16 / 9', overflow: 'hidden'}}>
+          <Img
+            src={staticFile(src)}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              objectPosition: `${focusX} top`,
+              transform: `scale(${kenBurns})`,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Copy block on the opposite side, vertically centered.
+const CopyBlock: React.FC<{
+  eyebrow: string;
+  headline: string;
+  body: string;
+  side: 'left' | 'right';
+}> = ({eyebrow, headline, body, side}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const rows = [
+    {
+      text: eyebrow,
+      style: {
+        fontFamily: fonts.display,
+        fontWeight: 600,
+        fontSize: 26,
+        letterSpacing: 5,
+        textTransform: 'uppercase' as const,
+        color: colors.accent,
+      },
+    },
+    {
+      text: headline,
+      style: {
+        fontFamily: fonts.display,
+        fontWeight: 700,
+        fontSize: 64,
+        letterSpacing: 2,
+        textTransform: 'uppercase' as const,
+        color: colors.textPrimary,
+        lineHeight: 1.08,
+      },
+    },
+    {
+      text: body,
+      style: {
+        fontFamily: fonts.body,
+        fontWeight: 500,
+        fontSize: 28,
+        color: colors.textSecondary,
+        lineHeight: 1.4,
+      },
+    },
+  ];
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '50%',
+        [side]: 90,
+        width: '32%',
+        transform: 'translateY(-50%)',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 22,
+      }}
+    >
+      {rows.map((row, i) => {
+        const s = springIn(frame, fps, 8 + i * 5);
+        return (
+          <div
+            key={row.text}
+            style={{
+              ...row.style,
+              opacity: s,
+              transform: `translateY(${interpolate(s, [0, 1], [36, 0])}px)`,
+            }}
+          >
+            {row.text}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const FeatureScene: React.FC<{
+  watermark: string;
+  eyebrow: string;
+  headline: string;
+  body: string;
+  capture: string;
+  browserSide: 'left' | 'right';
+}> = ({watermark, eyebrow, headline, body, capture, browserSide}) => (
+  <Backdrop>
+    <Watermark word={watermark} />
+    <BrowserFrame src={capture} enterFrom={browserSide} />
+    <CopyBlock
+      eyebrow={eyebrow}
+      headline={headline}
+      body={body}
+      side={browserSide === 'left' ? 'right' : 'left'}
+    />
+  </Backdrop>
+);
+
+const Lockup: React.FC<{speed?: number}> = ({speed = 1}) => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const logoS = springIn(frame, fps, 2 * speed);
+  const titleS = springIn(frame, fps, 14 * speed);
+  const barS = springIn(frame, fps, 24 * speed);
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24}}>
+      <Img
+        src={staticFile('logo.png')}
+        style={{
+          width: 240,
+          height: 240,
+          opacity: logoS,
+          transform: `scale(${interpolate(logoS, [0, 1], [0.7, 1])})`,
+        }}
+      />
+      <div
+        style={{
+          fontFamily: fonts.display,
+          fontWeight: 700,
+          fontSize: 96,
+          letterSpacing: 4,
+          textTransform: 'uppercase',
+          color: colors.textPrimary,
+          lineHeight: 1,
+          opacity: titleS,
+          transform: `translateY(${interpolate(titleS, [0, 1], [60, 0])}px)`,
+        }}
+      >
+        APP NAME
+      </div>
+      <div
+        style={{
+          width: 160,
+          height: 6,
+          backgroundColor: colors.accent,
+          transformOrigin: 'left',
+          transform: `scaleX(${barS})`,
+        }}
+      />
+    </div>
+  );
+};
+
+const IntroScene: React.FC = () => (
+  <AbsoluteFill
+    style={{backgroundColor: colors.bg, justifyContent: 'center', alignItems: 'center'}}
+  >
+    <Lockup />
+  </AbsoluteFill>
+);
+
+const OutroScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const {fps} = useVideoConfig();
+  const ctaS = springIn(frame, fps, 22);
+  return (
+    <AbsoluteFill
+      style={{backgroundColor: colors.bg, justifyContent: 'center', alignItems: 'center'}}
+    >
+      <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 30}}>
+        <Lockup speed={0.6} />
+        <div
+          style={{
+            fontFamily: fonts.body,
+            fontWeight: 600,
+            fontSize: 34,
+            color: colors.textPrimary,
+            opacity: ctaS,
+            transform: `translateY(${interpolate(ctaS, [0, 1], [26, 0])}px)`,
+          }}
+        >
+          {PRODUCT_DOMAIN}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const PromoWeb: React.FC = () => {
+  const timing = linearTiming({durationInFrames: TRANSITION_FRAMES});
+  return (
+    <TransitionSeries>
+      <TransitionSeries.Sequence durationInFrames={DURATIONS.intro}>
+        <IntroScene />
+      </TransitionSeries.Sequence>
+      <TransitionSeries.Transition presentation={fade()} timing={timing} />
+
+      <TransitionSeries.Sequence durationInFrames={DURATIONS.feature1}>
+        <FeatureScene
+          watermark="FEATURE WORD"
+          eyebrow="EYEBROW"
+          headline="HEADLINE"
+          body="One-sentence body copy."
+          capture="web/01-home.png"
+          browserSide="right"
+        />
+      </TransitionSeries.Sequence>
+      <TransitionSeries.Transition
+        presentation={slide({direction: 'from-right'})}
+        timing={timing}
+      />
+
+      <TransitionSeries.Sequence durationInFrames={DURATIONS.feature2}>
+        <FeatureScene
+          watermark="FEATURE WORD"
+          eyebrow="EYEBROW"
+          headline="HEADLINE"
+          body="One-sentence body copy."
+          capture="web/02-feature.png"
+          browserSide="left"
+        />
+      </TransitionSeries.Sequence>
+      <TransitionSeries.Transition
+        presentation={slide({direction: 'from-left'})}
+        timing={timing}
+      />
+
+      <TransitionSeries.Sequence durationInFrames={DURATIONS.feature3}>
+        <FeatureScene
+          watermark="FEATURE WORD"
+          eyebrow="EYEBROW"
+          headline="HEADLINE"
+          body="One-sentence body copy."
+          capture="web/03-feature.png"
+          browserSide="right"
+        />
+      </TransitionSeries.Sequence>
+      <TransitionSeries.Transition presentation={fade()} timing={timing} />
+
+      <TransitionSeries.Sequence durationInFrames={DURATIONS.outro}>
+        <OutroScene />
+      </TransitionSeries.Sequence>
+    </TransitionSeries>
+  );
+};

package/assets/skills/promo-video-web/assets/capture.template.ts

@@ -0,0 +1,70 @@
+// Playwright capture script for web-surface promos.
+// Run from tools/promo/:  PROMO_EMAIL=... PROMO_PASSWORD=... npx tsx capture/capture.ts
+// Requires: npx playwright install chromium (once).
+import {chromium} from 'playwright';
+
+const BASE_URL = process.env.PROMO_URL ?? 'http://localhost:5173';
+const EMAIL = process.env.PROMO_EMAIL;
+const PASSWORD = process.env.PROMO_PASSWORD;
+// Multi-tenant products: seed an isolated demo tenant and scope every
+// navigation to it — credentials alone do not make the state predictable.
+const TENANT = process.env.PROMO_TENANT;
+
+// Loading UI that must be GONE before any capture (adapt to the app).
+const LOADING_SELECTORS = ['[data-loading]', '.skeleton', '[role="progressbar"]'];
+
+// One entry per feature scene. `readySelector` must match REAL data,
+// not a skeleton — captures with spinners are a quality failure.
+const SHOTS: Array<{path: string; readySelector: string; out: string}> = [
+  {path: '/', readySelector: 'main', out: '01-home.png'},
+  // {path: '/students', readySelector: 'table tbody tr', out: '02-students.png'},
+];
+
+async function main() {
+  // headless is mandatory: a headed browser hangs the run in terminal envs.
+  const browser = await chromium.launch({headless: true});
+  const context = await browser.newContext({
+    viewport: {width: 1920, height: 1080},
+    deviceScaleFactor: 2,
+  });
+  const page = await context.newPage();
+
+  // Stabilize captures: kill CSS animations and transitions.
+  await page.addInitScript(() => {
+    const style = document.createElement('style');
+    style.textContent = '*{animation:none!important;transition:none!important}';
+    document.addEventListener('DOMContentLoaded', () =>
+      document.head.appendChild(style)
+    );
+  });
+
+  // Login (dashboard surfaces). Wait for a post-login element, never the redirect.
+  if (EMAIL && PASSWORD) {
+    await page.goto(`${BASE_URL}/login`);
+    await page.fill('input[type="email"]', EMAIL);
+    await page.fill('input[type="password"]', PASSWORD);
+    await page.click('button[type="submit"]');
+    await page.waitForSelector('[data-authenticated], main', {timeout: 15000});
+  }
+
+  for (const shot of SHOTS) {
+    const prefix = TENANT ? `/t/${TENANT}` : ''; // adapt to the app's tenant routing
+    await page.goto(`${BASE_URL}${prefix}${shot.path}`);
+    await page.waitForLoadState('networkidle');
+    // networkidle is not enough on async dashboards: also require every
+    // loading indicator to unmount, then a real-data selector.
+    for (const sel of LOADING_SELECTORS) {
+      await page.waitForSelector(sel, {state: 'detached', timeout: 15000}).catch(() => {});
+    }
+    await page.waitForSelector(shot.readySelector, {timeout: 15000});
+    await page.screenshot({path: `public/web/${shot.out}`});
+    console.log(`captured ${shot.out}`);
+  }
+
+  await browser.close();
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/assets/skills/promo-video-web/assets/package.template.json

@@ -0,0 +1,26 @@
+{
+  "name": "APP_SLUG-promo",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Remotion promotional videos for APP_NAME",
+  "scripts": {
+    "studio": "remotion studio",
+    "capture": "tsx capture/capture.ts",
+    "render:web": "remotion render PromoWeb out/promo-web.mp4",
+    "render:dashboard": "remotion render PromoDashboard out/promo-dashboard.mp4"
+  },
+  "dependencies": {
+    "@remotion/cli": "4.0.496",
+    "@remotion/google-fonts": "4.0.496",
+    "@remotion/transitions": "4.0.496",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "remotion": "4.0.496"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "playwright": "^1.50.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.6.0"
+  }
+}

package/assets/skills/promo-video-web/references/pipeline.md

@@ -0,0 +1,84 @@
+# Promo Video (Web Surfaces) — Runbook
+
+Extends the `promo-video` pipeline for landscape web-surface promos. Shared fundamentals (workspace isolation, timeline math, foreground renders, verify protocol) are identical — this file covers only what differs.
+
+## §1 Capture protocol (Playwright)
+
+- Adapt `assets/capture.template.ts`. Run with `npx playwright install chromium` done once, then `npx tsx capture.ts` (or `node` after tsc) from `tools/promo/` — FOREGROUND, and `headless: true` set explicitly on `chromium.launch()`: in a terminal environment a headed browser hangs the agent waiting for a GUI.
+- Viewport fixed at 1920×1080, `deviceScaleFactor: 2` → 3840×2160 PNGs; the browser frame downscales them crisp.
+- Target: local dev server with seeded demo data (preferred — deterministic) or the deployed URL. 4–6 captures per surface, each a distinct feature screen.
+- Multi-tenant products: seeding credentials is not enough — the STATE must be predictable. Seed an isolated demo tenant and pass its ID via env (`PROMO_TENANT`); the script scopes every navigation to it. This guarantees no empty states and no leakage of another tenant's data into the capture.
+- Dashboard auth: credentials from env (`PROMO_EMAIL` / `PROMO_PASSWORD`), never hardcoded. Sequence per capture: authenticate → wait for the state to hydrate (`networkidle` AND spinners/skeletons UNMOUNTED — wait `state: 'detached'` on known loading selectors — AND a real-data selector present) → snap. Async dashboards (tables, metrics, payments) render piecemeal; `networkidle` alone still shows skeletons.
+- Hide flaky UI before capture: dismiss toasts/cookie banners, `page.addStyleTag` to disable CSS animations (`*{animation:none!important;transition:none!important}`) so captures are stable.
+- Motion variant: `browser.newContext({recordVideo: {dir, size}})`, script the flow slowly (deliberate 800ms pauses between actions), close context to flush the webm, convert to mp4 with ffmpeg, embed via `<OffthreadVideo>`.
+
+## §2 Project layout (multi-composition)
+
+If `tools/promo/` exists (mobile promo), extend it — one Remotion project, several compositions:
+
+```
+tools/promo/
+├── capture/capture.ts          # Playwright capture script
+├── public/                     # mobile assets (existing)
+├── public/web/                 # web captures
+├── src/Root.tsx                # registers Promo + PromoWeb + PromoDashboard
+├── src/Promo.tsx               # mobile (existing)
+├── src/web/theme.ts            # web-surface token bridge
+├── src/web/PromoWeb.tsx
+└── src/web/PromoDashboard.tsx
+```
+
+Add `playwright` + `tsx` as devDependencies; add scripts `render:web` / `render:dashboard`; root scripts `promo:render:web` / `promo:render:dashboard` (cd form: `cd tools/promo && npm run render:web`). If scaffolding fresh, use `assets/package.template.json`.
+
+### Per-surface theming via input props
+
+To avoid rewriting `src/web/theme.ts` per surface, drive COLOR tokens through Remotion input props — one scene codebase, N surface renders:
+
+```ts
+// src/web/theme.ts
+import {getInputProps} from 'remotion';
+const base = {bg: '#0A0A0B', /* … */ accent: '#DC2626'};
+const {colors: overrides} = getInputProps() as {colors?: Partial<typeof base>};
+export const colors = {...base, ...overrides};
+```
+
+Render with `npx remotion render PromoDashboard out/promo-dashboard.mp4 --props=./dashboard-tokens.json` where the JSON is `{"colors": {"accent": "#1D4ED8", …}}`. LIMIT: fonts cannot come from input props — `loadFont()` executes at module scope; font choices stay code-level per surface.
+
+## §3 Scene system (landscape 1920×1080)
+
+Same animation grammar as `promo-video` (springs damping 14–18, 12-frame transitions, staggered copy, watermark words) with landscape-specific composition:
+
+- **Browser frame** instead of phone bezel (see `assets/browser-promo.template.tsx`): rounded ~16px window, top chrome bar with three traffic-light dots and a URL pill showing the REAL product domain, capture below, big soft shadow. Slight rotateY tilt optional and subtler than mobile (±3°).
+- **Split layout**: copy block vertically centered on one side (~38% width), browser frame filling the other (~58%), alternating sides per scene. Watermark word behind, larger canvas → ~420px.
+- **Ken Burns on captures**: slow scale 1.0→1.06 across the scene (linear interpolate is fine here — it is a drift, not a gesture), `objectPosition` aimed at the screen's key region. Wide screenshots carry motion this way instead of tilt-float.
+- **Intro/outro**: same lockup pattern; outro CTA is the surface URL (e.g. `app.product.com`) instead of a store line.
+- Default length 20–25s, 5–6 scenes.
+
+## §4 Register per surface
+
+| Surface | Audience | Copy register | Example headline shape |
+|---|---|---|---|
+| Web app (`PromoWeb`) | End users | Product marketing, benefit-led — same energy as the mobile promo | "YOUR PROGRESS, ANYWHERE" |
+| Dashboard (`PromoDashboard`) | Operators/staff | Calm, outcome-led, zero hype; verbs about control and time saved | "EVERY STUDENT, ONE SCREEN" |
+
+Dashboard scenes favor showing dense real data (tables, filters, detail panels) — density IS the selling point. Do not crop tables down to look "clean"; show the tool doing work.
+
+## §5 Render + verify
+
+Identical to `promo-video` §6, once per composition:
+`npx remotion render PromoWeb out/promo-web.mp4` and `npx remotion render PromoDashboard out/promo-dashboard.mp4`, then ffprobe check (1920×1080, 30fps, expected duration) and ≥2 `remotion still` spot-checks per video (one feature scene, the outro).
+
+## §6 Troubleshooting
+
+| Symptom | Cause / Fix |
+|---|---|
+| Captures blurry in frame | Missing `deviceScaleFactor: 2`, or upscaling a 1x capture |
+| Dashboard capture shows skeletons/spinners | Waited on `networkidle` only — add explicit selector waits for real data |
+| Captures differ between runs | Animations not disabled, toasts present, or non-seeded data — §1 |
+| Login flow flaky in capture script | Race on redirect: wait for a post-login selector, not the navigation event |
+| Second Remotion project appeared | Wrong — consolidate into `tools/promo/` (one project, many compositions) |
+| Playwright browser missing at capture | Run `npx playwright install chromium` once inside `tools/promo/` |
+| Login returns `invalid_credentials` despite a correct password hash | Directly-seeded `auth.users` rows are often incomplete for GoTrue: NULL `instance_id`, no matching `auth.identities` row, and NULL string-token columns (GoTrue errors "converting NULL to string is unsupported"). Fix in the local DB before capture: set `instance_id` to the zero UUID, insert an email identity per user, and coalesce token columns to `''`. |
+| Capture script hangs in terminal | Headed browser waiting for a GUI — enforce `headless: true` on launch |
+| Dashboard capture shows empty states | Tenant not seeded/scoped — seed the demo tenant and pass `PROMO_TENANT` (§1) |
+| Colors ignored at render | `--props` file path wrong or `getInputProps()` read after module init in the wrong file — override in `theme.ts` itself (§2) |