@1agh/maude 0.57.0 → 0.58.1

package/README.md

@@ -175,7 +175,11 @@ pnpm version            # = bash scripts/changesets-version.sh
                         #   → re-runs scripts/check-version-parity.sh
 
 git commit -am "chore: release v$(node -p "require('./package.json').version")"
-git tag "v$(node -p "require('./package.json').version")"
+# ANNOTATED (-a -m) is required — `git push --follow-tags` only pushes annotated
+# tags. A lightweight `git tag vX.Y.Z` will silently stay local and no release
+# workflow ever fires.
+VER="v$(node -p "require('./package.json').version")"
+git tag -a "$VER" -m "$VER"
 git push --follow-tags
 ```
 

package/apps/studio/api.ts

@@ -117,6 +117,33 @@ export const SKIP_DIRS = new Set([
 ]);
 const HIDDEN_OK = new Set(['.ai', '.claude', '.design']);
 
+// feature-studio-file-preview — binary/media extensions the tree lists so a
+// DS's assets/{fonts,graphics,logos,photos,...} files show up (previously
+// only their parent folders did, via findFiles's dirsOut accounting). Kept as
+// an explicit enumerated list rather than a broad pattern so it can never
+// accidentally widen to swallow runtime JSON — findFiles already excludes
+// `_`-prefixed entries before this list is even consulted.
+const PREVIEW_ASSET_EXTS = [
+  '.svg',
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.webp',
+  '.avif',
+  '.woff',
+  '.woff2',
+  '.ttf',
+  '.otf',
+  '.mp4',
+  '.webm',
+  '.mov',
+  '.mp3',
+  '.wav',
+  '.ogg',
+  '.m4a',
+];
+
 // ---------- File tree ----------
 
 /**
@@ -181,7 +208,31 @@ async function findFiles(
     if (e.isDirectory()) {
       dirsOut?.push(rel);
       out.push(...(await findFiles(full, rel, exts, dirsOut)));
-    } else if (exts.some((x) => e.name.toLowerCase().endsWith(x))) out.push(rel);
+    } else if (e.isFile() && exts.some((x) => e.name.toLowerCase().endsWith(x))) {
+      // feature-studio-file-preview security review — `e.isFile()` (not just
+      // "not a directory") excludes symlinks: a symlink Dirent is neither
+      // isDirectory() nor isFile(), so without this check a symlink dropped
+      // into an assets/ folder (e.g. pointing at ~/.ssh/id_rsa, named to fit
+      // an allowlisted extension) would be listed and, since this feature
+      // makes every listed row one-click-fetchable, served straight into the
+      // preview panel.
+      //
+      // A HARDLINK survives `isFile()` (hardlinks are, by design, ordinary
+      // files — same inode, indistinguishable from the "original" at the
+      // Dirent level), so it needs a second check: `nlink > 1` means this
+      // directory entry shares its inode with at least one other name
+      // somewhere on the filesystem. A design system's own assets are never
+      // legitimately multiply-linked, so excluding them closes the same
+      // one-click-disclosure path for a hardlink planted at, say, a
+      // teammate's readable dotfile.
+      try {
+        const st = await lstat(full);
+        if (st.nlink > 1) continue;
+      } catch {
+        continue;
+      }
+      out.push(rel);
+    }
   }
   return out;
 }
@@ -5268,15 +5319,29 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       const isDs = g.label === 'Design system' || /^system(\/|$)/.test(g.path);
       // Always include canvas sidecars (`.meta.json`, `.css`, `.registry.json`)
       // so the client can nest them under their primary `.tsx` / `.html`. DS
-      // groups additionally surface `.md` for README + SKILL docs.
+      // groups additionally surface `.md` for README + SKILL docs, plus
+      // PREVIEW_ASSET_EXTS (images/fonts/video/audio) so assets/ subfolders
+      // list their files instead of rendering as permanently-empty tree nodes
+      // (feature-studio-file-preview) — click-time behavior lives client-side
+      // in FileRow's previewKind() branch.
       // feature-file-tree-drag-drop-folders (Task 6) — `dirs` accumulates
       // every directory in this group (incl. empty ones) via the SAME
       // traversal, so a freshly `mkdir`'d folder with no files yet is still
       // representable in the tree.
       const dirs: string[] = [];
       const filePaths = isDs
-        ? await findFiles(groupAbs, groupRel, ['.tsx', '.html', '.md', '.css', '.json'], dirs)
-        : await findFiles(groupAbs, groupRel, ['.tsx', '.html', '.css', '.json'], dirs);
+        ? await findFiles(
+            groupAbs,
+            groupRel,
+            ['.tsx', '.html', '.md', '.css', '.json', ...PREVIEW_ASSET_EXTS],
+            dirs
+          )
+        : await findFiles(
+            groupAbs,
+            groupRel,
+            ['.tsx', '.html', '.css', '.json', ...PREVIEW_ASSET_EXTS],
+            dirs
+          );
       // DDR-093 — record each `.tsx` canvas's design system. canvasUrl() only
       // injects tokens for `.tsx`, so skip everything else. Path-owned DS wins
       // (system/<ds>/…); otherwise the sidecar's `meta.designSystem`, defaulting

package/apps/studio/artboard-hug-commit.ts

@@ -0,0 +1,30 @@
+/**
+ * @file artboard-hug-commit.ts
+ * @purpose Pure decision for what the Artboard Inspector's Height field
+ *          should do when a value is committed (issue #79 — typing a height
+ *          while the artboard hugs its content silently did nothing; Width
+ *          worked because it has no such mode). Kept framework-free + in a
+ *          .ts file so it's unit-testable (app.jsx is bundled JSX, and its
+ *          module-scope `createRoot(...).render(...)` makes it unsafe to
+ *          import directly in a test) — same shape as sizing-mode.ts.
+ */
+
+export type HeightCommitAction =
+  | { kind: 'resize'; height: number }
+  | { kind: 'promote-to-fixed'; height: number }
+  | { kind: 'noop' };
+
+/**
+ * Fixed mode: a typed height is an ordinary resize, same lane as Width.
+ * Hug mode (DDR-027 Design Decision 1 — height is a content-driven floor,
+ * not an exact size): a typed height now PROMOTES the artboard to Fixed at
+ * that height — the same "freeze current height" write the Hug/Fixed
+ * segmented toggle already performs, just seeded from the typed value
+ * instead of the last measured one — rather than being silently dropped.
+ */
+export function resolveHeightCommit(fixed: boolean, typedHeight: number): HeightCommitAction {
+  const height =
+    Number.isFinite(typedHeight) && typedHeight > 0 ? Math.round(typedHeight) : undefined;
+  if (height == null) return { kind: 'noop' };
+  return fixed ? { kind: 'resize', height } : { kind: 'promote-to-fixed', height };
+}

package/apps/studio/client/app.jsx

@@ -20,6 +20,7 @@ import { GRID_KEYWORD_UNITS, parseTrackList, serializeTrackList } from '../grid-
 // Inspector's paper-preset picker, same "pull only pure math/data" shape as
 // canvas-cursors.ts above.
 import { PAPER_PRESETS, resolvePrintArtboard } from '../print/units.ts';
+import { resolveHeightCommit } from '../artboard-hug-commit.ts';
 import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
 // The single "what is the hub link doing" rule, shared with the cloud rail's
 // connect note so the two surfaces can never disagree. Pure data + strings —
@@ -38,9 +39,11 @@ import OnboardingWizard from './panels/OnboardingWizard.jsx';
 import { ReadinessDialog } from './panels/ReadinessList.jsx';
 import IntroVideoDialog from './panels/IntroVideoDialog.jsx';
 import BrandUploadPanel from './panels/BrandUploadPanel.jsx';
+import { FilePreview, sanitizeDisplayText } from './panels/file-preview.jsx';
 import SetupChecklistDialog, { useSetupReadiness } from './panels/SetupChecklist.jsx';
 import TimelinePanel from './panels/TimelinePanel.jsx';
 import { parseCompTimeline } from './panels/timeline-parse.js';
+import { durationFramesForDrop, probeMediaDuration } from './panels/timeline-media-cache.js';
 import GenerateDialog from './generate-dialog.jsx';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
 import SettingsPanel from './panels/SettingsPanel.jsx';
@@ -189,6 +192,23 @@ function DockSlot({ side, width, open, ids, activeId, onPick, children, labels =
   );
 }
 const CANVAS_EXT_RE = /\.(tsx|html?)$/i;
+// feature-studio-file-preview — classifies a non-canvas tree row so FileRow
+// can open an inline preview instead of the old inert no-op. Kept in sync
+// with apps/studio/api.ts's PREVIEW_ASSET_EXTS (server won't list anything
+// outside this set anyway, but the client stays explicit rather than
+// assuming server-side filtering).
+const PREVIEW_KIND_RULES = [
+  [/\.md$/i, 'markdown'],
+  [/\.(css|json|txt|ya?ml)$/i, 'text'],
+  [/\.(svg|png|jpe?g|gif|webp|avif)$/i, 'image'],
+  [/\.(mp4|webm|mov)$/i, 'video'],
+  [/\.(mp3|wav|ogg|m4a)$/i, 'audio'],
+  [/\.(woff2?|ttf|otf)$/i, 'font'],
+];
+function previewKind(name) {
+  for (const [re, kind] of PREVIEW_KIND_RULES) if (re.test(name)) return kind;
+  return null;
+}
 // Shared testid-slug derivation (desktop-e2e skill convention: kebab-case,
 // designRoot-stripped, extension-stripped) — mirrors FileRow's inline
 // `canvas-row-<slug>` computation so DirRow / the row-menu trigger use the
@@ -2024,7 +2044,9 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
 function FileRow({
   file,
   activePath,
+  previewPath,
   onOpen,
+  onPreview,
   onDelete,
   openCount: oc,
   depth,
@@ -2035,12 +2057,20 @@ function FileRow({
   drag,
   menu,
 }) {
-  const isSel = file.path === activePath;
+  // feature-studio-file-preview (a11y fix) — a previewed row must expose
+  // aria-selected too, or a screen-reader user gets no confirmation their
+  // click did anything (a11y-auditor finding: state never changed).
+  const isSel = file.path === activePath || file.path === previewPath;
   const isCanvas = CANVAS_EXT_RE.test(file.name);
-  // Non-canvas rows (PROJECT *.md, RUNTIME _active.json, ...) are display-only —
-  // clicking them doesn't open an iframe; we leave the click as no-op + cursor
-  // hint via `aria-disabled`.
-  const inert = !isCanvas;
+  // feature-studio-file-preview — RUNTIME rows (_active.json, _server.json, …)
+  // stay inert no matter their extension: they're gitignored process state,
+  // never user-facing content, and must not become previewable just because
+  // `.json` also matches the `text` preview kind (DDR-115 exclusion).
+  const pKind = !isCanvas && kind !== 'runtime' ? previewKind(file.name) : null;
+  // Non-canvas, non-previewable rows (RUNTIME files, unrecognized extensions)
+  // are display-only — clicking them doesn't open anything; we leave the
+  // click as no-op + cursor hint via `aria-disabled`.
+  const inert = !isCanvas && !pKind;
   const label = isCanvas ? displayName(file.name) : file.name;
   // Delete only real canvases in a deletable group (onDelete is undefined for the
   // DS group + runtime files); the server enforces the rest.
@@ -2087,7 +2117,8 @@ function FileRow({
       style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
       title={file.path + (oc ? ` — ${oc} open` : inert ? ' (file index only)' : '')}
       onClick={() => {
-        if (!inert) onOpen(file.path);
+        if (isCanvas) onOpen(file.path);
+        else if (pKind) onPreview?.(file.path);
       }}
       onContextMenu={
         canMove ? (e) => menu.openAt(e, { kind: 'file', path: file.path, dir: fileDir }) : undefined
@@ -2158,7 +2189,9 @@ function CanvasRow({
   depth,
   kind,
   activePath,
+  previewPath,
   onOpen,
+  onPreview,
   onDelete,
   openCount: oc,
   showHidden,
@@ -2182,7 +2215,9 @@ function CanvasRow({
       <FileRow
         file={primary}
         activePath={activePath}
+        previewPath={previewPath}
         onOpen={onOpen}
+        onPreview={onPreview}
         onDelete={onDelete}
         openCount={oc}
         depth={depth}
@@ -2282,7 +2317,9 @@ function CanvasRow({
             key={sc.path}
             file={sc}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             openCount={0}
             depth={depth + 1}
             kind={kind}
@@ -2296,7 +2333,9 @@ function CanvasRow({
 function Tree({
   node,
   activePath,
+  previewPath,
   onOpen,
+  onPreview,
   commentsByFile,
   depth = 1,
   kind,
@@ -2324,8 +2363,20 @@ function Tree({
   const files = node._files || [];
   // VS Code-style sidecar grouping. Canvas (`.tsx`/`.html`) becomes the primary
   // row; same-basename non-canvas files (`.meta.json`, `.css`, …) collapse
-  // under it. Orphans surface only when `showHidden` is on.
+  // under it. Meta/doc orphans (README.md, tokens.css, …) surface only when
+  // `showHidden` is on; media/asset orphans (images, fonts, video, audio —
+  // feature-studio-file-preview) are content the user asked to see by
+  // default, not sidecar noise, so they always render.
   const { canvases, orphans } = useMemo(() => groupBySidecar(files), [files]);
+  const { mediaOrphans, metaOrphans } = useMemo(() => {
+    const media = [];
+    const meta = [];
+    for (const entry of orphans) {
+      const k = previewKind(entry.primary.name);
+      (k === 'image' || k === 'video' || k === 'audio' || k === 'font' ? media : meta).push(entry);
+    }
+    return { mediaOrphans: media, metaOrphans: meta };
+  }, [orphans]);
   const hasSearch = !!(search && search.trim());
   // DS-folder lookup: only meaningful at the top level of a DS group. The
   // server emits `dsFolders: [{name, folder}, ...]` so the client knows which
@@ -2351,7 +2402,9 @@ function Tree({
             primary={entry.primary}
             sidecars={entry.sidecars}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             onDelete={onDelete}
             openCount={openCount(commentsByFile[entry.primary.path])}
             depth={depth}
@@ -2365,13 +2418,28 @@ function Tree({
           />
         );
       })}
+      {mediaOrphans.map((entry) => (
+        <FileRow
+          key={entry.primary.path}
+          file={entry.primary}
+          activePath={activePath}
+          previewPath={previewPath}
+          onOpen={onOpen}
+          onPreview={onPreview}
+          openCount={openCount(commentsByFile[entry.primary.path])}
+          depth={depth}
+          kind={kind}
+        />
+      ))}
       {showHidden &&
-        orphans.map((entry) => (
+        metaOrphans.map((entry) => (
           <FileRow
             key={entry.primary.path}
             file={entry.primary}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             openCount={openCount(commentsByFile[entry.primary.path])}
             depth={depth}
             kind={kind}
@@ -2385,7 +2453,9 @@ function Tree({
           <Tree
             node={node[d]}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             commentsByFile={commentsByFile}
             depth={depth + 1}
             kind={kind}
@@ -2468,8 +2538,10 @@ function Sidebar({
   cloud,
   groups,
   activePath,
+  previewPath,
   activeDsName,
   onOpen,
+  onPreview,
   onOpenSystem,
   wsConnected,
   search,
@@ -2829,7 +2901,9 @@ function Sidebar({
                   <Tree
                     node={g.tree}
                     activePath={activePath}
+                    previewPath={previewPath}
                     onOpen={onOpen}
+                    onPreview={onPreview}
                     commentsByFile={commentsByFile}
                     depth={1}
                     kind={g.kind}
@@ -4205,10 +4279,38 @@ function Viewport({
   onIframeLoad,
   showQuickSetup,
   onStartQuickSetup,
+  previewPath,
 }) {
+  // feature-studio-file-preview (a11y fix) — a11y-auditor found the preview
+  // overlay gave keyboard/AT users no signal anything happened: the click
+  // stayed on the (unrelated) tree row, nothing was announced, and the
+  // scrollable region itself wasn't in the tab order. Moving focus onto the
+  // region on open covers all three: it's a real focus change (AT announces
+  // the new `role="region"` + its label), and a focused element with
+  // `overflow: auto` is keyboard-scrollable (arrow/Page keys) without a
+  // separate tabIndex fix.
+  const previewRef = useRef(null);
+  useEffect(() => {
+    if (previewPath) previewRef.current?.focus();
+  }, [previewPath]);
   return (
     <div className="viewport st-stage" data-tour="viewport">
-      {tabs.length === 0 && (
+      {previewPath && (
+        // feature-studio-file-preview — an overlay, not a tab: the canvas
+        // iframe (if any) stays mounted underneath so switching back to it
+        // is instant and never remounts. previewPath is intentionally never
+        // written into `tabs`/`activePath` (see App()'s onPreview).
+        <div
+          ref={previewRef}
+          className="st-file-preview-overlay"
+          role="region"
+          aria-label={`Preview: ${sanitizeDisplayText(basename(previewPath))}`}
+          tabIndex={0}
+        >
+          <FilePreview path={previewPath} kind={previewKind(basename(previewPath))} />
+        </div>
+      )}
+      {tabs.length === 0 && !previewPath && (
         <div className="st-empty">
           <div className="st-empty-brand">
             <span className="st-brand-mark">
@@ -4567,6 +4669,7 @@ function StatusBar({
   unpushed = 0,
   changesOpen = false,
   onOpenChanges,
+  version,
 }) {
   const isSystem = activePath === SYSTEM_TAB;
   const text =
@@ -4690,6 +4793,19 @@ function StatusBar({
         </span>
       )}
 
+      {/* Which release this is. Reading it used to mean probing production by
+          hand — and the desktop, the browser and a cloud tab all serve the same
+          client, so one slot covers all three. Absent on an older server that
+          omits `version` from /_config, exactly as `cloud` and `canvasToken`
+          already are. */}
+      {version && (
+        <span className="st-sb-slot st-sb-version" role="group" aria-label="Maude version">
+          <span className="val" data-testid="statusbar-version">
+            v{version}
+          </span>
+        </span>
+      )}
+
       <button
         type="button"
         className="st-sb-theme"
@@ -8148,11 +8264,17 @@ function ArtboardKnobs({
     onResizeArtboard?.(artboardId, resolved.widthPx, resolved.heightPx);
     onSetArtboardPrint?.(artboardId, next);
   };
-  const setHug = (nextFixed) => {
+  const setHug = (nextFixed, explicitHeight) => {
     if (!artboardId) return;
-    const freezeHeight = nextFixed && Number.isFinite(h) ? Math.round(h) : undefined;
+    const src = Number.isFinite(explicitHeight) ? explicitHeight : h;
+    const freezeHeight = nextFixed && Number.isFinite(src) ? Math.round(src) : undefined;
     onSetArtboardHug?.(artboardId, nextFixed, freezeHeight);
   };
+  const commitHeight = (n) => {
+    const action = resolveHeightCommit(fixed, n);
+    if (action.kind === 'resize') commitSize(null, action.height);
+    else if (action.kind === 'promote-to-fixed') setHug(true, action.height);
+  };
   const commitStyle = (patch) => {
     if (!artboardId) return;
     onSetArtboardStyle?.(artboardId, patch);
@@ -8178,11 +8300,7 @@ function ArtboardKnobs({
           lead="H"
           steppers={false}
           scrub={fixed}
-          onCommit={(n) => {
-            // Hug — height is content-driven; ignore a typed value rather
-            // than silently switching modes.
-            if (fixed) commitSize(null, n);
-          }}
+          onCommit={commitHeight}
         />
       </div>
       <div style={{ padding: '0 12px 8px' }}>
@@ -9176,6 +9294,14 @@ function App() {
   const [project, setProject] = useState('Design');
   const [tabs, setTabs] = useState([]);
   const [activePath, setActivePath] = useState(null);
+  // feature-studio-file-preview — deliberately separate from `tabs`/
+  // `activePath`: a previewed file was never a canvas, so it must never
+  // trigger the WS `active`/`tabs` broadcasts, the compile-skeleton loading
+  // state, or iframe registration that openTab()/openSystem() drive.
+  const [previewPath, setPreviewPath] = useState(null);
+  const onPreview = useCallback((path) => {
+    setPreviewPath(path);
+  }, []);
   const [selected, setSelected] = useState(null);
   // Phase 12.3 — latest selection, readable from the (stale-closure) onMessage
   // handler so an HMR reload (triggered by a CSS/attr edit) can re-select the
@@ -9446,6 +9572,10 @@ function App() {
           // both of these went missing and the cloud studio rendered without
           // its chrome and with every canvas iframe unauthenticated.
           canvasToken: data.canvasToken,
+          // Which release this server is — rendered as the status-bar chip.
+          // Undefined on a server too old to report it, which is why the chip
+          // renders conditionally rather than printing `vundefined`.
+          version: data.version,
           // C2/C4 — `{ dashboardUrl, projectName, user, role }` when this is a
           // cloud tab. Its presence is what tells the shared client it is in a
           // browser tab on somebody else's machine; `user`/`role` are what let
@@ -11170,6 +11300,7 @@ function App() {
     });
     setActivePath(path);
     setFocusedCommentId(null);
+    setPreviewPath(null);
     // Canvas-compile skeleton — cleared by the iframe's dgn:'loaded' message,
     // the onLoad fallback timer (legacy .html), or a hard 15s cap.
     if (path !== SYSTEM_TAB) setLoadingPath(path);
@@ -14076,8 +14207,10 @@ function App() {
           readOnly={viewerMode}
           groups={groups}
           activePath={activePath}
+          previewPath={previewPath}
           activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
           onOpen={openTab}
+          onPreview={onPreview}
           onOpenSystem={openSystem}
           wsConnected={wsConnected}
           search={search}
@@ -14419,6 +14552,7 @@ function App() {
                 isNativeApp() && !viewerMode && !!setupReadiness && !setupReadiness.ready
               }
               onStartQuickSetup={() => setQuickSetupOpen(true)}
+              previewPath={previewPath}
             />
           </div>
           {rightActive && (
@@ -14789,10 +14923,11 @@ function App() {
                   // fresh "New Cut" canvas only when no artboard opted in.
                   let upgraded = false;
                   for (const c of clips) {
+                    const probedSec = await probeMediaDuration(c.src).catch(() => null);
                     const body = {
                       canvas,
                       lane: c.mediaKind === 'audio' && upgraded ? 'audio' : 'storyline',
-                      durationInFrames: Math.round(fps * 3),
+                      durationInFrames: durationFramesForDrop(fps, probedSec),
                       mediaTag: c.mediaKind === 'audio' ? 'Audio' : 'Video',
                       src: c.src,
                     };
@@ -14863,6 +14998,12 @@ function App() {
                     continue;
                   }
                   const isAudio = mediaTag === 'Audio';
+                  // Video clips carry a real duration — probe it so the drop
+                  // lands at the clip's own length instead of a fixed 3s that
+                  // the user then has to drag out by hand. Images have no
+                  // inherent duration, so they keep the fallback.
+                  const probedSec =
+                    mediaTag === 'Video' ? await probeMediaDuration(up.path).catch(() => null) : null;
                   const body = { canvas, artboardId, mediaTag, src: up.path };
                   if (pos && (isAudio || pos.lane === 'audio')) {
                     body.lane = 'audio';
@@ -14875,7 +15016,7 @@ function App() {
                       body.index = slot;
                       slot += 1; // multiple files insert in order
                     }
-                    body.durationInFrames = Math.round(fps * 3);
+                    body.durationInFrames = durationFramesForDrop(fps, probedSec);
                   } else if (pos?.lane === 'overlay' && !isAudio) {
                     if ((timelineSequences || []).length === 0) {
                       // First clip of a greenfield comp = the BASE layer →
@@ -14885,14 +15026,14 @@ function App() {
                       body.lane = 'overlay';
                       body.from = Math.max(0, pos.frame ?? 0);
                     }
-                    body.durationInFrames = Math.round(fps * 3);
+                    body.durationInFrames = durationFramesForDrop(fps, probedSec);
                   } else if (!isAudio) {
                     // Default container rule: a video/image drop ANYWHERE on the
                     // timeline lands in the storyline (append = hard cut at the
                     // end; the caret gives it an index). The old lane-less
                     // append refused hard-cut series ("no transition to clone").
                     body.lane = 'storyline';
-                    body.durationInFrames = Math.round(fps * 3);
+                    body.durationInFrames = durationFramesForDrop(fps, probedSec);
                   } else {
                     // Audio without a caret → audio band, from the start.
                     body.lane = 'audio';
@@ -15168,6 +15309,7 @@ function App() {
           unpushed={gitStatus?.unpushed || 0}
           changesOpen={changesOpen}
           onOpenChanges={gitStatus?.repo ? () => setChangesOpen(true) : undefined}
+          version={cfg?.version}
         />
       </div>
       {presentMode && (

package/apps/studio/client/panels/chat-markdown.jsx

@@ -1,8 +1,11 @@
-// Compact, XSS-safe markdown renderer for the ACP chat feed. Builds React nodes
-// directly (never innerHTML) so agent output can't inject markup. Covers the
-// subset a coding agent actually emits: fenced code blocks, headings, bullet +
-// numbered lists, bold / italic / inline code, and http(s) links. Anything else
-// falls through as plain (pre-wrapped) text. No new dependency.
+// Compact, XSS-safe markdown renderer for the ACP chat feed (and, since
+// feature-studio-file-preview, arbitrary repo .md files previewed in the
+// Files tree). Builds React nodes directly (never innerHTML) so neither
+// agent output nor untrusted file content can inject markup. Covers the
+// subset a coding agent actually emits plus GFM pipe tables (common in repo
+// docs): fenced code blocks, headings, bullet + numbered lists, pipe tables,
+// bold / italic / inline code, and http(s) links. Anything else falls
+// through as plain (pre-wrapped) text. No new dependency.
 
 function safeHref(url) {
   // Only allow http(s) — never javascript:/data:/etc.
@@ -47,6 +50,33 @@ function inline(text) {
   return out;
 }
 
+// GFM pipe tables: a header row, a separator row (---/:---/---:/:---:  per
+// column), then zero or more data rows — all lines containing at least one
+// unescaped `|`.
+const TABLE_ROW_RE = /\|/;
+const TABLE_SEP_CELL_RE = /^:?-+:?$/;
+
+function splitTableRow(line) {
+  let l = line.trim();
+  if (l.startsWith('|')) l = l.slice(1);
+  if (l.endsWith('|')) l = l.slice(0, -1);
+  // Split on `|` not preceded by `\` (an escaped pipe stays literal in a cell).
+  return l.split(/(?<!\\)\|/).map((c) => c.trim().replace(/\\\|/g, '|'));
+}
+
+function tableSeparatorAligns(line) {
+  const cells = splitTableRow(line);
+  if (!cells.length || !cells.every((c) => TABLE_SEP_CELL_RE.test(c))) return null;
+  return cells.map((c) => {
+    const left = c.startsWith(':');
+    const right = c.endsWith(':');
+    if (left && right) return 'center';
+    if (right) return 'right';
+    if (left) return 'left';
+    return null;
+  });
+}
+
 export function Markdown({ text }) {
   const lines = String(text).split('\n');
   const blocks = [];
@@ -108,6 +138,47 @@ export function Markdown({ text }) {
       continue;
     }
 
+    // GFM pipe table: header row + a valid separator row immediately after.
+    if (TABLE_ROW_RE.test(line) && i + 1 < lines.length) {
+      const aligns = tableSeparatorAligns(lines[i + 1]);
+      if (aligns) {
+        const header = splitTableRow(line);
+        i += 2;
+        const rows = [];
+        while (i < lines.length && lines[i].trim() !== '' && TABLE_ROW_RE.test(lines[i])) {
+          rows.push(splitTableRow(lines[i]));
+          i++;
+        }
+        blocks.push(
+          <div key={key++} className="chat-md-table-wrap">
+            <table className="chat-md-table">
+              <thead>
+                <tr>
+                  {header.map((c, ci) => (
+                    <th key={ci} style={aligns[ci] ? { textAlign: aligns[ci] } : undefined}>
+                      {inline(c)}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r, ri) => (
+                  <tr key={ri}>
+                    {header.map((_, ci) => (
+                      <td key={ci} style={aligns[ci] ? { textAlign: aligns[ci] } : undefined}>
+                        {r[ci] !== undefined ? inline(r[ci]) : ''}
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        );
+        continue;
+      }
+    }
+
     // Blank line → paragraph separator.
     if (line.trim() === '') {
       i++;