feat(webv2): direct-input media widgets for ImageField and VideoField workflow fields

[lstein]

Summary

Found while testing the MiniMax H3 port (#56–#66) in the webv2 workflow editor, but this is core editor functionality affecting every media-consuming node (Wan video nodes included):

1. VideoField inputs rendered as "Connection only" — and since the Video primitive's own field is a VideoField, there was no way to introduce a video into a graph at all. Every video node (Frame Range from Video, Concatenate Videos, Wan i2v/extend, MiniMax H3) was a dead end.
2. ImageField had a minimal widget — filename text plus "Use gallery selection", with no thumbnail, no drop target, no upload.
3. The frame-picker hint was dropped on the floor — ui_component=video-frame-index (used by Frame from Video's frame_index and Frame Range from Video's start_frame/end_frame) parsed to null, so those fields rendered as bare number inputs with no way to see which frame you were picking.

Both media field types now share one MediaInput widget:

• Large preview matching the legacy editor's widget: full-width 128px area showing the item's frame thumbnail at contained size, with a dimensions badge (WxH, plus duration for videos) and a dashed drop-hint empty state. The whole preview is the drop target; a media icon stands in when a stale name 404s.
• Use gallery selection, kind-matched — a selected image is never offered to a video field and vice versa.
• Upload: hidden file picker → the existing gallery upload routes (/images/upload, /videos/upload) targeting the gallery's selected board, then the field adopts the uploaded item. Async work is account-scope guarded like the rest of the app.
• Drag-and-drop: the input row is a dnd-kit drop target for a single dragged gallery item of the matching kind, with a DropZone overlay during eligible drags. Multi-item drags are rejected outright rather than silently keeping an arbitrary first item. Drop ids are instance-unique so the node editor and Linear UI panel can render the same field simultaneously.

VideoField joins the stateful field set with video_name value validation, which also makes it exposable in Linear UI forms exactly like ImageField.

And video-frame-index integer fields get the legacy editor's frame scrubber: the number input plus a live frame preview (a muted <video> seeked to frame / fps — the browser decodes the exact frame natively) and a slider, all writing the same field value. The widget reads its companion video field from the same node via a new optional nodeId prop on WorkflowFieldInput (both the node editor and the Linear UI panel pass it, so scrubbing works for exposed form fields too). Negative indices (-1 = last frame) are resolved for display only; the stored value is preserved verbatim and the backend stays authoritative.

New gallery surface (thin re-exports of existing internals): galleryVideoUrls, galleryTransfers.uploadVideo.

Review

Each commit got a fresh-context adversarial review; all confirmed findings are fixed in this diff.

Media widgets round — attacked cross-monitor drop interference (field vs board vs canvas handlers on the same DragEnd), drop-id collisions (editor + Linear panel, StrictMode), the upload lifecycle, image-widget regressions through the legacy selection fallbacks, and every consumer of the stateful/exposable/validation helpers:

• Upload completion could land in the wrong project (HIGH): onChange dispatches into the active project, so an upload finishing after a project switch would churn the other project's graph, auto-flip its invoke route (setFieldValue is a high-confidence edit), and silently drop the adopted value — same class of bug the canvas import already pins against. Adoption is now gated on the widget still being mounted and the project id captured at upload start; otherwise an info toast points at the gallery. This also covers "node deleted mid-upload".
• Upload never refreshed the gallery (MED): now calls invalidateGallery like every other upload path, so the uploaded file actually appears on the board it was sent to.
• COLLECTION media fields (MED): list-typed inputs (e.g. Concatenate Videos' videos) reachable through legacy exposedFields migration would have rendered the single-value widget and written a bare object into a list; and the new video_name validation would have flipped persisted array values from valid to invalid. Both media widget cases now render connection-only for COLLECTION, and validation keeps the generic non-null check for COLLECTION values (this also fixes the same latent defect for ImageField arrays).
• LOW: broken-thumbnail glyph for stale names (hidden via onError, name still shown); files picked through "All Files" with a mismatched MIME type are rejected client-side instead of round-tripping to a server 422; the unused video drag-data exports were dropped.

Frame scrubber round — attacked nodeId staleness across delete/paste/undo, the react-query cache entry shared with the media badge, seek-effect listener lifecycle, slider math edges, controlled-slider feedback loops, undo-history flooding while scrubbing, and react-flow drag/keyboard capture:

• Connection-driven video fields previewed a stale video (MED): connecting an upstream video does not clear the field's stored value, so the scrubber kept previewing (and clamping against) the old video while invoke used the upstream one — with the video widget itself hidden, there was no cue. The scrubber now consults resolved edges (the same "connected" signal the editor and Linear panel use) and shows an explicit hint instead. The legacy editor's widget has this bug; the port fixes it.
• LOW: single-frame videos gave the slider min === max, which zag renders as NaN% CSS — the preview now renders without a slider; a deleted video got a misleading "no probed frame rate" hint — it now says the video could not be loaded; empty-string video_name fired a guaranteed-404 lookup (/videos/i//…) — treated as unset, and the same latent flaw was fixed in the media widget's badge query.
• Accepted as designed: preload="auto" fetches the video per scrubber instance (legacy parity — the backend serves Range requests); a value scrubbed on a long video then re-pointed at a shorter one displays clamped while the document keeps the raw value (the number input shows it, and the backend validates at invoke).

Deliberately unchanged: uploads while a date board is selected land in Uncategorized (the backend's own mapping) rather than refusing like the gallery grid does — with the invalidation fix the result is at least visible; happy to align it with the grid's refusal if preferred.

Testing

• pnpm test, pnpm test:browser (491 incl. 13 new: media widget render/selection/badge/clear/upload/type-mismatch/COLLECTION, scrubber render + negative-index resolution, keyboard scrub writes the index, connection-driven suppression, single-frame no-slider, deleted-video hint, empty-name guard), pnpm lint (format, oxc, tsc, architecture check) — all green; vite build clean.
• New unit tests for the drop resolver (single-item/kind-match/multi-drag rejection), VideoField value validation, and ui_component parsing passthrough.
• Manual: drag a gallery video onto Frame Range from Video's video field; upload a video from the node; same for Image Primitive with drag/upload/selection; scrub start_frame/end_frame and confirm the previewed frames match the extracted range.

🤖 Generated with Claude Code