a media block shows what is in it

"Choose media…" and nothing else asks somebody to open a dialog to find out what
they already chose. The thumbnail and the filename answer it where they stand.

A video shows its poster rather than playing: the question is which file this is,
and a frame answers that.

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

web/sections/PageBuilderPanel.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
 import { Button } from '@/components/ui/button';
+import { posterUrl, thumbUrl } from '../thumbnail';
 import { href, useNav } from '../routes';
 import { useClient } from 'hooks/useClient';
 import { readableError } from '../errors';
@@ -641,16 +642,53 @@ export const PageBuilderPanel = () => {
             A button rather than the modal opening itself, so picking the block and changing what is in
             it are two acts — see the note in the selection effect.
           */}
-          {(block.kind === 'media' || block.kind === 'video' || block.kind === 'gallery') && (
+          {block.kind === 'gallery' && (
             <Button
               size="sm"
               variant="outline"
               className="h-8 self-start text-xs"
               onClick={() => handlersRef.current.editComponent(block)}
             >
-              {block.kind === 'gallery' ? 'Choose gallery…' : 'Choose media…'}
+              Choose gallery…
             </Button>
           )}
+
+          {(block.kind === 'media' || block.kind === 'video') && (
+            <div className="flex items-center gap-3">
+              {/*
+                What is actually in the block, at a glance.
+
+                A button that says "Choose media…" and nothing else asks somebody to open a dialog to
+                find out what they already chose. A video shows its POSTER rather than playing: the
+                question here is which file this is, and a frame answers it.
+              */}
+              {block.content?.url && (
+                <img
+                  src={
+                    /\.(mp4|mov|webm|m4v)$/i.test(block.content.url)
+                      ? posterUrl(block.content.url)
+                      : thumbUrl(block.content.url, 320)
+                  }
+                  alt=""
+                  className="h-14 w-20 shrink-0 rounded border border-border object-cover"
+                />
+              )}
+
+              <div className="flex min-w-0 flex-col items-start gap-1.5">
+                <span className="max-w-full truncate text-[11px] text-muted-foreground">
+                  {block.content?.url ? block.content.url.split('/').pop() : 'Nothing chosen'}
+                </span>
+                <Button
+                  size="sm"
+                  variant="outline"
+                  className="h-8 text-xs"
+                  onClick={() => handlersRef.current.editComponent(block)}
+                >
+                  Choose media…
+                </Button>
+              </div>
+            </div>
+          )}
         </div>,
       );
       return;