Redesign Learn, and give it five real videos in Karti's voice

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>

apps/web/src/components/learn/LearnWalkthroughList.tsx

@@ -0,0 +1,84 @@
+/**
+ * The platform track, as an ordered course.
+ *
+ * Product how-to has a running order — `sortOrder` is the curriculum, and
+ * "your first hour in PIG" is not interchangeable with the margin report. A
+ * grid of equal tiles says "pick one"; a numbered list says "start here", so
+ * the two tracks are rendered as different objects rather than one
+ * undifferentiated grid.
+ */
+import { ChevronRight } from 'lucide-react';
+import { formatLearnDuration } from '@pig/core';
+import { Badge, Card } from '@/components/ui';
+import { ArchiveControl } from './ArchiveControl';
+import { LearnPoster } from './LearnPoster';
+import { bySortOrder, type LearnResourceView } from './model';
+
+export function LearnWalkthroughList({
+  resources,
+  managing,
+  onPlay,
+}: {
+  resources: readonly LearnResourceView[];
+  managing: boolean;
+  onPlay: (resource: LearnResourceView) => void;
+}) {
+  const ordered = bySortOrder(resources);
+
+  return (
+    /* Width is the caller's business — this list sits in a 1024px page column
+       for a code-holder and in a capped column inside the shell for a member,
+       and a cap here would fight one of them. */
+    <ol className="flex min-w-0 list-none flex-col gap-3">
+      {ordered.map((resource, index) => (
+        <li key={resource.id} className="min-w-0">
+          <Card className="group relative flex min-w-0 flex-col overflow-hidden transition-shadow hover:shadow-md sm:flex-row">
+            <button
+              type="button"
+              onClick={() => onPlay(resource)}
+              className="flex min-w-0 flex-1 items-center gap-3 p-3 text-left focus-visible:ring-inset focus-visible:ring-offset-0 sm:gap-4 sm:p-4"
+            >
+              <div className="w-28 shrink-0 overflow-hidden rounded-lg border border-border sm:w-44">
+                <LearnPoster
+                  seed={resource.id}
+                  track={resource.track}
+                  duration={formatLearnDuration(resource.durationSeconds)}
+                  size="row"
+                />
+              </div>
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <p className="nums text-[0.6875rem] font-semibold uppercase tracking-[0.14em] text-accent-fg">
+                  Step {index + 1}
+                </p>
+                <h3 className="min-w-0 break-words font-semibold leading-snug">
+                  {resource.title}
+                </h3>
+                {resource.summary ? (
+                  <p className="line-clamp-2 min-w-0 break-words text-sm leading-6 text-muted">
+                    {resource.summary}
+                  </p>
+                ) : null}
+              </div>
+              <ChevronRight
+                className="hidden size-5 shrink-0 text-muted transition-transform group-hover:translate-x-0.5 sm:block"
+                aria-hidden
+              />
+            </button>
+
+            {managing ? (
+              /* A right-hand rail on a desktop row, a strip underneath on a
+                 phone — squeezed into 393px beside the text it left the title
+                 wrapping one word to a line. */
+              <div className="flex min-w-0 shrink-0 flex-row items-center justify-between gap-2 border-t border-border p-2 sm:flex-col sm:items-end sm:justify-center sm:border-l sm:border-t-0">
+                <Badge tone={resource.visibility === 'code' ? 'accent' : 'neutral'}>
+                  {resource.visibility === 'code' ? 'By code' : 'Members'}
+                </Badge>
+                <ArchiveControl id={resource.id} title={resource.title} />
+              </div>
+            ) : null}
+          </Card>
+        </li>
+      ))}
+    </ol>
+  );
+}