Give the Learn cards a real frame instead of a gradient

The preview cards led with a generated gradient. It was a deliberate fallback —
nothing renders a frame of a Cap embed without loading the embed, and loading
nine embeds to decorate a grid is how a page becomes unusable on a phone — but
for videos PIG serves itself the frame is right there in the file.

The poster is named after the VIDEO's content hash, not its own:
`overview.4d4581ae.mp4` -> `overview.4d4581ae.jpg`. Re-rendering a clip changes
both names together, so a thumbnail cannot outlive what it claims to show. It
needs no schema column and no manifest entry, because the name is derivable.

`learnPoster.sh` cuts the frame with `thumbnail=90` starting four seconds in
rather than taking frame 0: the first frame of a Playwright capture is often
mid-paint, and a poster of a half-rendered page is worse than no poster.

The resolver ASSERTS the poster rather than verifying it — @pig/core is pure and
has no filesystem. That is safe in both directions: a missing poster 404s, which
`<video poster>` renders exactly as it renders no poster, and which the card
falls back from via onError. Claiming a poster that is absent is free; omitting
one that exists would cost every card its thumbnail.

Cap-hosted rows are unchanged and still get the gradient, verified by there
being exactly five <img> elements on a page with nine resources.

Also widens the media allowlist to jpg/webp. The filename pattern, the
traversal rules and the symlink check are untouched and still cover them,
because extension is the only axis that changed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

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

@@ -11,6 +11,7 @@ import { ChevronRight } from 'lucide-react';
 import { formatLearnDuration } from '@pig/core';
 import { Badge, Card } from '@/components/ui';
 import { ArchiveControl } from './ArchiveControl';
+import { learnPlayback } from './model';
 import { LearnPoster } from './LearnPoster';
 import { bySortOrder, type LearnResourceView } from './model';
 
@@ -30,7 +31,9 @@ export function LearnWalkthroughList({
        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) => (
+      {ordered.map((resource, index) => {
+        const playback = learnPlayback(resource);
+        return (
         <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
@@ -43,6 +46,10 @@ export function LearnWalkthroughList({
                   seed={resource.id}
                   track={resource.track}
                   duration={formatLearnDuration(resource.durationSeconds)}
+                  // Only a PIG-hosted clip has a real frame; a Cap embed resolves to
+                  // an iframe and falls back to the generated poster.
+                  poster={playback?.kind === 'video' ? playback.poster : null}
+                  alt={`Still from ${resource.title}`}
                   size="row"
                 />
               </div>
@@ -78,7 +85,8 @@ export function LearnWalkthroughList({
             ) : null}
           </Card>
         </li>
-      ))}
+        );
+      })}
     </ol>
   );
 }