Redesign Learn, and give it five real videos in Karti's voice
CI / verify (push) Successful in 3m32s
CI / publish (push) Has been skipped

THE PAGE. The anonymous route rendered outside Shell, so it sat flush against
the viewport edge and read as a form rather than a product — which is the first
thing anyone at Prime Intellect sees when the link is shared. It now brings its
own chrome and leads with a hero; the platform track is a numbered course, the
concept tracks are a poster grid, and admin add/archive moved behind one Manage
toggle so they stop competing with the content. Verified in Chrome at 1440 and
393, light and dark: horizontal overflow is 0 in all three access states.

THE VIDEOS. Five ~30s walkthroughs, narrated in Karti's cloned voice through
Chatterbox and cut against real screen capture of the seeded demo book. The
audio is rendered FIRST and its measured duration drives the capture, because a
shot list that runs short leaves the narrator talking over a frozen frame and
one that runs long gets cut mid-sentence. Levels are loudness-normalised so
clips do not jump between videos.

Cap cannot take a programmatic upload — video.karti.ai needs an interactive
login — so PIG serves these itself. A native <video> on this origin needs no
iframe and therefore no CSP frame-src at all; Karti's own Cap recordings still
render through the existing iframe path, which is why the resolver is now a
discriminated union.

THREE THINGS THE VERIFIERS CAUGHT, all of which shipped green:

  - createMediaRoutes was never mounted. Every layer landed — migration, seed,
    both feeds, the bind mount, the docs — except the one that serves the bytes,
    so /media/learn/* fell through to the SPA fallback and answered HTTP 200
    text/html. The player showed a black box with working controls and no error.
    The tests certified the route factory in isolation, which proves the handler
    and says nothing about whether it is wired in. There is now an assertion
    against the ASSEMBLED app, and it fails loudly on content-type — the failure
    mode is a 200, not a 404.
  - A symlink in the media directory escaped the root. resolve() is lexical and
    stat() follows links, so the containment check this file's own header
    promised did not hold. realpath before the check closes it.
  - Vite proxied only /api, so self-hosted playback broke for anyone running the
    app the documented way — in the same invisible 200-text/html manner.

Also: a duplicate media slug used to throw from the middle of seedDemo() and
take out every later section; it now reports and skips that one entry. And the
player has an onError state, because content-addressed filenames mean a
re-render deliberately leaves the old row pointing at a file that is gone.

The three DEMO platform rows are dropped — five real recordings supersede them,
and placeholders sitting under real ones made the page read as half-finished to
the audience it is meant to convince. The supply and demand concept rows stay:
there are no real recordings for those tracks yet, and an empty track hides the
shape of the page.

Tests 275, typecheck clean.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-13 17:30:08 -07:00
parent a21ecf9e53
commit 45b70b17f0
24 changed files with 2728 additions and 654 deletions
+201
View File
@@ -0,0 +1,201 @@
# Learn — video scripts
Five ~30-second platform-track walkthroughs for the Prime Intellect GTM team.
Each one becomes a `learn_resources` row on the `platform` track: the **title**
and **summary** below are that row's `title` and `summary`, and the **slug** is
the capture filename.
Everything asserted in these scripts was checked against the page component,
the route handler and a running instance on `http://127.0.0.1:8925` seeded with
the demo book. Nothing is described that the product does not do.
## Constraints these scripts are written to
The audio is Chatterbox TTS in Karti's cloned voice, sped to 1.20x. Measured on
that service: ~2.83 words/sec at 1.0x, ~3.4 words/sec at 1.20x. A 30-second
finished clip is therefore **95105 words total**, opener and closer included.
Every script opens with exactly `Hi team, check out this feature we worked on:`
(9 words) and closes with exactly `thanks for watching!` (3 words). Word counts
below are for the full narration block, opener and closer included.
## Why these five
A GTM team at a company that buys GPU capacity and resells it needs, in order:
the number the business turns on, the dates that can cost it money, the join it
does all day, the way its existing book gets into the tool, and the boundary of
the agent sitting next to all of it.
1. **Overview and margin** — the only question a generic CRM cannot answer, and
the one product argument that has to land verbatim: cost is charged against
the full commitment.
2. **The quarterly calendar** — renewals and closes, plus export authorisations
and compliance artefacts, which exist nowhere else in the product and whose
expiry is a legal event rather than a commercial one.
3. **Capacity to allocations** — the load-bearing join. Every figure in scripts
one and two is downstream of it, so a seller who cannot do this cannot use
the product.
4. **Importing** — nobody adopts a CRM they cannot get their book into. This is
the first ten minutes of every deployment.
5. **Piggy** — a GTM team will be asked "can it do X". The useful video is the
one that draws the line, because the answer to "can it write to the CRM" is
no and being wrong about that in front of a customer is expensive.
Deliberately not filmed: `/growth`, `/demand`, `/supply`, `/contracts`,
`/facts`. They are good pages, but each is either a conventional pipeline board
a GTM team already understands or an internal review queue.
---
## 1. Overview and the margin question
- **Slug:** `overview-and-margin`
- **Title:** Overview and the margin question
- **Summary:** Which contracted capacity is sold, at what margin, and what is idle right now — and why cost is charged against the full commitment.
- **Word count:** 102
```narration
Hi team, check out this feature we worked on: The Overview opens on gross margin, sold ratio and idle capacity, not deal counts. Underneath, every commitment you're paying for and not selling, ranked by what the idle hours cost, with the break-even price for the rest of the block. The important bit: cost is charged against the full commitment, not just the hours that sold, because unsold hours are already paid for. Margin shows the same ledger per block, with cost per GPU-hour and break-even for each one. If a block reads cost covered, further sales are pure upside. thanks for watching!
```
**Shot list**
| ~sec | Route | On screen |
|---|---|---|
| 04 | `/` | Full page at the top. The four stat tiles: Gross margin, Sold ratio, Idle capacity, Open deals. |
| 48 | `/` | Slow zoom on the Sold ratio and Idle capacity tiles — "4.9M of 6.2M GPU-hrs sold", "1.3M hrs bought and unsold". |
| 816 | `/` | The warning card "Capacity you are paying for and not selling", scrolling the ranked rows. Pause on the row reading "break even above $0.76/GPU-hr". |
| 1622 | `/` | The "The book" card: Revenue, Cost of committed capacity, Gross margin, and the footnote about the full commitment. Hold on the footnote. |
| 2227 | `/margin` | Navigate. Header stats, then the "By commitment" table — Sold, Sellable, Sold ratio, Cost/hr, Break even. |
| 2730 | `/margin` | Hold on a row whose Break even column reads "Cost covered". |
---
## 2. The quarterly calendar
- **Slug:** `quarterly-calendar`
- **Title:** The quarterly calendar
- **Summary:** What closes, what renews, what expires and when capacity lands — with export authorisations and compliance artefacts at the top.
- **Word count:** 98
```narration
Hi team, check out this feature we worked on: The Calendar is a quarter at a time, one lane per kind. Bars are spans, diamonds are points, so you read what overlaps what in one pass. Top of the page is licence to operate: export authorisations and compliance artefacts, because an expired authorisation converts lawful business into unlawful business. Below that, weighted pipeline, deals closing, renewals whose notice date lands this quarter, obligations due, and every capacity window. The agenda underneath is the same events as a tappable list, and it works on a phone. thanks for watching!
```
**Shot list**
| ~sec | Route | On screen |
|---|---|---|
| 04 | `/calendar` | Top of the page, quarter label visible in the heading. Step once with the next-quarter arrow and back, to show the navigator. |
| 410 | `/calendar` | The Quarter timeline card. Scroll its pane sideways so the lanes and the July/August/September header move. |
| 1017 | `/calendar` | The "Licence to operate" card. Hold on the export-authorisation row and its "in 45d" countdown. |
| 1723 | `/calendar` | The five stat tiles: Weighted pipeline, Deals closing, Renewals, Obligations due, Authorisations expiring. |
| 2327 | `/calendar` | The Agenda, scrolling through a day group — allocation windows and capacity windows with their values and Running badges. |
| 2730 | `/calendar` | Same page at 393px wide, agenda in view, to show the phone layout. |
---
## 3. Capacity to allocations
- **Slug:** `capacity-to-allocations`
- **Title:** Capacity to allocations
- **Summary:** Joining a commitment you bought to a deal you sold — the availability book, the matcher, and the allocation the ledger is built on.
- **Word count:** 96
```narration
Hi team, check out this feature we worked on: Capacity has two tabs. Availability shows every block we hold: how much is sold, how much is held, how much is still sellable, our cost, and the break-even price. Match a requirement takes what the customer wants, GPU type, count, dates, a price ceiling, and scores the blocks we already own, with the reasoning written out. Allocate joins that commitment to a demand deal. The server re-checks the window and live holds when you save. That join is the row margin is computed from. thanks for watching!
```
**Shot list**
| ~sec | Route | On screen |
|---|---|---|
| 04 | `/capacity` | Availability tab. The card grid; hold on one card's sold/held bar and the "hrs sellable" figure. |
| 49 | `/capacity` | Same card's Cost and Break even rows, then the "Allocate or hold" button. |
| 913 | `/capacity` | Switch to "Match a requirement". The empty form. |
| 1318 | `/capacity` | Type `H100_80GB`, 64 GPUs, leave high-speed interconnect ticked, press "Find capacity". |
| 1823 | `/capacity` | The result cards: the fit percentage badge and the rationale lines, e.g. "Exact GPU match" and "Infiniband fabric meets the training requirement". |
| 2328 | `/capacity` | Press "Allocate this capacity". The Reserve capacity sheet opens — commitment, demand deal, GPU-hours, sell price, and the "Quote vs break even" line reacting as a price is typed. |
| 2830 | `/capacity` | Hold on the "Create allocation" button and the note that saving re-checks the window and live holds. |
---
## 4. Importing your book
- **Slug:** `importing-your-book`
- **Title:** Importing your book
- **Summary:** Getting off the spreadsheet — CSV, Excel, Notion or a bounded Google Sheets range, with a dry run you review before anything is written.
- **Word count:** 103
```narration
Hi team, check out this feature we worked on: Import gets you off the spreadsheet. Pick what you're importing: accounts, contacts, demand deals or supply deals. Then a CSV or Excel file, a Notion database, or a bounded Google Sheets range, read-only, with the token encrypted on the server. PIG guesses the column mapping, you pick a stable source key, then run a dry run. You see every create, every update and every error before anything is written. Fix the errors, commit, and it goes in atomically. Re-import with the same key column later and it updates the same records. thanks for watching!
```
**Shot list**
| ~sec | Route | On screen |
|---|---|---|
| 04 | `/imports` | Top of the page and the four entity cards. Click Accounts. |
| 49 | `/imports` | The "1. Choose source" card. Click across File, Notion, Google Sheets so all three are seen; land on Google Sheets and hold on the "Read only" badge and the encrypted-token line. |
| 913 | `/imports` | Back on File. Choose a CSV; the "Parsed" badge, the file name, and the row and column counts appear. |
| 1319 | `/imports` | "2. Map source columns". Hold on the "Stable source key" select and its note that repeated imports update the same record. Scroll the mapped field list. |
| 1924 | `/imports` | Press "Run dry-run preview". The "3. Review the exact plan" card with the create / update / errors badges. |
| 2428 | `/imports` | Scroll the preview table — the Decision column, and a row carrying a validation error. |
| 2830 | `/imports` | Press "Commit reviewed import"; the confirmation line reporting rows created and updated. |
---
## 5. Piggy, and what it will not do
- **Slug:** `piggy-and-its-boundary`
- **Title:** Piggy, and what it will not do
- **Summary:** The docked agent reads through scoped, page-specific PIG tools — and has no shell, no filesystem, and no ability to write CRM records.
- **Word count:** 101
```narration
Hi team, check out this feature we worked on: Piggy is docked on every page. Ask it about the book and it answers through scoped PIG tools, one per page: margin on Margin, idle capacity on Capacity, the same calendar projection the Calendar page renders. It gets aggregates, not the raw ledger, so it quotes rather than recomputes. What it cannot do matters as much: no shell, no filesystem, no browser, and this chat cannot write CRM records. On a record it reads only that record and cannot pivot to another. Check the source record before you act. thanks for watching!
```
**Shot list**
| ~sec | Route | On screen |
|---|---|---|
| 04 | `/piggy` | The workspace. The "Read-only workspace" pill and the "Inspection boundary" note. |
| 48 | `/margin` | Open the dock from the header while standing on Margin, so the dock is visibly attached to the page. |
| 815 | `/margin` | Ask "how is the book doing". Show the tool step appearing in the transcript, then the answer quoting the same figures the page shows. |
| 1520 | `/capacity` | Move to Capacity, ask "what is idle and what does it cost". Show the different tool name in the transcript. |
| 2025 | `/piggy` | Hold on the line under the composer: "Piggy reads only through scoped PIG tools. It has no shell, filesystem or browser access, and this chat cannot write CRM records." |
| 2530 | `/accounts` | Open an account, press "Ask Piggy", and show the answer citing that record — then the footer line "Read-only session · Check source records before acting on material terms." |
---
## Verification notes
Kept so the next person does not re-derive them.
- Overview stat tiles, the idle-alert card and the full-commitment footnote:
`apps/web/src/pages/Overview.tsx`; data from `GET /api/dashboard`.
- Margin table columns and the "Cost covered" / "Sold out" break-even
treatment: `apps/web/src/pages/Margin.tsx`; `GET /api/capacity/margin`.
- Calendar lane ordering, the compliance card and the five totals:
`apps/web/src/pages/Calendar.tsx`. The thirteen event kinds are
`CALENDAR_EVENT_KINDS` in `packages/core/src/calendar.ts`.
- Availability figures, the matcher form and its rationale strings:
`apps/web/src/pages/Capacity.tsx`; `POST /api/capacity/match` returns
`score` plus a `rationale` array. The reserve sheet, the "Quote vs break
even" line and the server re-check on save:
`apps/web/src/components/AllocationSheet.tsx`.
- Import entities, mapping, dry run and atomic commit:
`apps/web/src/pages/Imports.tsx`. Accepted file types are `.csv` and
`.xlsx`. Google Sheets is read-only with server-side encrypted tokens and a
bounded A1 range: `apps/web/src/components/GoogleSheetsSource.tsx`.
- Piggy's tools are one per route — `pig_get_margin_summary`,
`pig_get_idle_capacity`, `pig_get_pipeline`, `pig_get_calendar_ahead`,
`pig_get_workspace_summary` — mapped in `apps/piggy/src/page-routes.ts` and
implemented in `apps/piggy/src/page-tools.ts`. The record tool
`pig_get_record` takes no id and cannot inspect another record
(`apps/piggy/src/chat-tools.ts`). Results are aggregated because interactive
chat runs at `max_tokens` 1024 over at most four turns.
- **Caveat for whoever schedules these:** `learn.ts` is not mounted in
`apps/api/src/app.ts`, so `/api/learn/*` currently answers 404 and these rows
cannot be created yet. See AGENTS.md §7.