@1agh/maude 0.57.0 → 0.58.1

package/apps/studio/client/panels/file-preview.jsx

@@ -0,0 +1,115 @@
+// feature-studio-file-preview — inline preview for a non-canvas tree row
+// (markdown / text / image / video / audio / font). Reuses the existing
+// static byte-serving route (no new server endpoint) and the chat panel's
+// hand-rolled Markdown renderer — no new dependency.
+
+import { useEffect, useState } from 'react';
+import { Markdown } from './chat-markdown.jsx';
+
+const TEXT_PREVIEW_MAX_BYTES = 2 * 1024 * 1024; // 2 MB — beyond this, just show a size note
+
+function basename(p) {
+  return p.split('/').pop() || p;
+}
+
+// Bidi-override control chars (U+202A-E, U+2066-9) let a crafted filename
+// visually disguise its own name/extension (the classic "invoice‮gnp.exe"
+// trick) wherever we render a raw path/name as text — strip them before
+// display. Doesn't affect matching (previewKind() regexes run on the
+// unstripped name), only what a human/AT reads.
+export function sanitizeDisplayText(s) {
+  return String(s).replace(/[\u202a-\u202e\u2066-\u2069]/g, '');
+}
+
+function useFetchedText(url, enabled) {
+  const [state, setState] = useState({ loading: true, error: null, text: '', tooLarge: false });
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    setState({ loading: true, error: null, text: '', tooLarge: false });
+    fetch(url)
+      .then(async (r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        const len = Number(r.headers.get('content-length') || 0);
+        if (len > TEXT_PREVIEW_MAX_BYTES) {
+          if (!cancelled) setState({ loading: false, error: null, text: '', tooLarge: len });
+          return;
+        }
+        const text = await r.text();
+        if (!cancelled) setState({ loading: false, error: null, text, tooLarge: false });
+      })
+      .catch((err) => {
+        if (!cancelled) setState({ loading: false, error: err.message || 'Failed to load', text: '', tooLarge: false });
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [url, enabled]);
+  return state;
+}
+
+function TextPreview({ url, name, as }) {
+  const { loading, error, text, tooLarge } = useFetchedText(url, true);
+  if (loading) return <div className="st-file-preview-status">Loading {name}…</div>;
+  if (error) return <div className="st-file-preview-status st-file-preview-error">Couldn't load {name}: {error}</div>;
+  if (tooLarge) {
+    return (
+      <div className="st-file-preview-status">
+        {name} is {Math.round(tooLarge / 1024)} KB — too large to preview inline.
+      </div>
+    );
+  }
+  if (as === 'markdown') return <div className="st-file-preview-markdown"><Markdown text={text} /></div>;
+  return <pre className="st-file-preview-text">{text}</pre>;
+}
+
+// CSS-string-literal escape for a value interpolated inside url("...") —
+// filenames can contain arbitrary characters (only "/" and NUL are forbidden
+// on disk), so an unescaped `"` or `\` could break out of the string and
+// inject arbitrary rules into the live app-shell stylesheet (not just the
+// sandboxed canvas iframe). family is already alnum/hyphen-only; this covers
+// the url() side of the same interpolation.
+function cssStringEscape(s) {
+  // CSS input-preprocessing (CSS Syntax Module Level 3 §3.3) normalizes CR,
+  // CRLF, AND FORM FEED (\f, U+000C) to a single LF before tokenizing, so an
+  // unescaped \f terminates a double-quoted string exactly like \r/\n does —
+  // strip all three, not just the two obvious ones.
+  return String(s).replace(/[\\"]/g, (c) => `\\${c}`).replace(/[\r\n\f]/g, '');
+}
+
+function FontPreview({ url, name }) {
+  const family = `st-preview-font-${name.replace(/[^a-z0-9]+/gi, '-')}`;
+  return (
+    <div className="st-file-preview-font">
+      <style>{`@font-face { font-family: "${family}"; src: url("${cssStringEscape(url)}"); }`}</style>
+      <div className="st-file-preview-font-specimen" style={{ fontFamily: family }}>
+        <div className="st-file-preview-font-lg">The quick brown fox</div>
+        <div className="st-file-preview-font-md">jumps over the lazy dog</div>
+        <div className="st-file-preview-font-sm">ABCDEFGHIJKLM abcdefghijklm 0123456789</div>
+      </div>
+    </div>
+  );
+}
+
+export function FilePreview({ path, kind }) {
+  if (!path || !kind) return null;
+  const url = `/${path}`;
+  const name = sanitizeDisplayText(basename(path));
+  return (
+    <div className="st-file-preview" data-kind={kind}>
+      <h2 className="st-file-preview-header">{sanitizeDisplayText(path)}</h2>
+      <div className="st-file-preview-body">
+        {kind === 'markdown' && <TextPreview url={url} name={name} as="markdown" />}
+        {kind === 'text' && <TextPreview url={url} name={name} as="text" />}
+        {kind === 'image' && (
+          <div className="st-file-preview-image-wrap">
+            <img src={url} alt={`Preview: ${name}`} className="st-file-preview-image" />
+          </div>
+        )}
+        {kind === 'video' && <video key={url} src={url} controls className="st-file-preview-media" />}
+        {kind === 'audio' && <audio key={url} src={url} controls className="st-file-preview-audio" />}
+        {kind === 'font' && <FontPreview url={url} name={name} />}
+      </div>
+    </div>
+  );
+}

package/apps/studio/client/panels/timeline-media-cache.js

@@ -80,7 +80,10 @@ export function stripBucket(widthPx) {
   return 7;
 }
 
-async function extractStrip(url, count) {
+/** Hidden <video>, loaded and waited on through `loadedmetadata`/`canplay` so
+ *  `.duration`/`.videoWidth`/`.videoHeight` are readable. Caller owns cleanup
+ *  (`video.remove()`) once done with it. */
+async function loadVideoMetadata(url, timeoutMs) {
   const video = document.createElement('video');
   video.muted = true;
   video.playsInline = true;
@@ -99,7 +102,7 @@ async function extractStrip(url, count) {
   }
   try {
     await new Promise((res, rej) => {
-      const to = setTimeout(() => rej(new Error('metadata timeout')), 8000);
+      const to = setTimeout(() => rej(new Error('metadata timeout')), timeoutMs);
       const ok = () => {
         clearTimeout(to);
         res();
@@ -114,6 +117,39 @@ async function extractStrip(url, count) {
     });
   } catch (err) {
     video.remove();
+    throw err;
+  }
+  return video;
+}
+
+/** Real duration (seconds) of a video/audio src, probed via a hidden <video>
+ *  element — never throws, resolves null on failure so callers (e.g. the
+ *  timeline drop handler) can fall back to a default duration cleanly. */
+export async function probeMediaDuration(url) {
+  let video;
+  try {
+    video = await loadVideoMetadata(url, 6000);
+  } catch {
+    return null;
+  }
+  const dur = video.duration;
+  video.remove();
+  return Number.isFinite(dur) && dur > 0 ? dur : null;
+}
+
+/** durationInFrames for a clip dropped on the timeline: the real probed
+ *  duration when available, else a fallback (probe failure, or synthetic
+ *  content with no inherent duration like a title/image). */
+export function durationFramesForDrop(fps, probedSeconds, fallbackSeconds = 3) {
+  const sec = Number.isFinite(probedSeconds) && probedSeconds > 0 ? probedSeconds : fallbackSeconds;
+  return Math.max(1, Math.round(fps * sec));
+}
+
+async function extractStrip(url, count) {
+  let video;
+  try {
+    video = await loadVideoMetadata(url, 8000);
+  } catch (err) {
     console.warn('[timeline] filmstrip extraction failed for', url, err?.message || err);
     throw err;
   }

package/apps/studio/client/styles/3-shell-maude.css

@@ -219,6 +219,10 @@
 .st-sb-changes.has-changes .st-sb-changes-dot { background: var(--status-warn); }
 .st-sb-changes.has-unpushed .st-sb-changes-dot { background: var(--accent); }
 
+/* The running release. Ambient, not a state to act on — so it sits at the same
+   weight as a slot label rather than at .val's foreground. No new tokens. */
+.st-sb-version .val { color: var(--fg-3); }
+
 /* ═══ Task 4 — body row · sidebar · tree · rail ═══════════════════════════════ */
 
 /* The body flex row replaces the legacy `.app` grid: rail | sidebar | main | rpanel. */
@@ -425,6 +429,47 @@
    incomplete; auto-hides once probeSetupReadiness() reports ready. */
 .st-empty-quick-setup { pointer-events: auto; margin-top: var(--space-2); }
 
+/* ═══ feature-studio-file-preview — non-canvas file preview overlay ════════
+ * Layered above the (still-mounted) canvas iframe / empty state so switching
+ * back to a canvas is instant. Shell-token only, no hardcoded colors. */
+.st-file-preview-overlay {
+  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
+  background: var(--bg-1); overflow: auto;
+}
+.st-file-preview-overlay:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.st-file-preview { display: flex; flex-direction: column; min-height: 100%; }
+.st-file-preview-header {
+  flex: none; margin: 0; padding: var(--space-3) var(--space-4); font-family: var(--font-mono);
+  font-size: var(--type-xs); font-weight: 400; color: var(--fg-2); border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-0);
+}
+.st-file-preview-body { flex: 1; padding: var(--space-6); }
+.st-file-preview-status { color: var(--fg-3); font-size: var(--type-sm); }
+.st-file-preview-error { color: var(--status-error); }
+.st-file-preview-text {
+  font-family: var(--font-mono); font-size: var(--type-xs); line-height: 1.6; color: var(--fg-1);
+  white-space: pre-wrap; word-break: break-word; background: var(--bg-0);
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-4);
+}
+.st-file-preview-markdown { max-width: 720px; color: var(--fg-1); }
+.st-file-preview-image-wrap {
+  display: flex; align-items: center; justify-content: center; min-height: 200px;
+  background-image: linear-gradient(45deg, var(--bg-2) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--bg-2) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--bg-2) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--bg-2) 75%);
+  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
+  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
+}
+.st-file-preview-image { max-width: 100%; max-height: 70vh; object-fit: contain; }
+.st-file-preview-media { max-width: 100%; max-height: 70vh; display: block; }
+.st-file-preview-audio { width: 100%; }
+.st-file-preview-font { display: flex; flex-direction: column; gap: var(--space-4); }
+.st-file-preview-font-specimen { color: var(--fg-0); }
+.st-file-preview-font-lg { font-size: 40px; line-height: 1.3; }
+.st-file-preview-font-md { font-size: 24px; line-height: 1.4; }
+.st-file-preview-font-sm { font-size: 14px; line-height: 1.6; color: var(--fg-2); word-break: break-all; }
+
 /* ═══ Task 6 — right panel (Inspector / Comments) + palette + toast ═══════════ */
 .st-rpanel {
   background: var(--bg-1); border-left: 1px solid var(--border-default);

package/apps/studio/client/styles/6-acp-chat.css

@@ -619,6 +619,34 @@
     border-radius: var(--radius-sm);
     overflow-x: auto;
   }
+  .chat-md-table-wrap {
+    overflow-x: auto;
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+  }
+  .chat-md-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--type-xs);
+  }
+  .chat-md-table th,
+  .chat-md-table td {
+    padding: var(--space-2) var(--space-3);
+    text-align: left;
+    border-bottom: 1px solid var(--border-subtle);
+    white-space: pre-wrap;
+  }
+  .chat-md-table th {
+    background: var(--bg-2);
+    font-weight: 600;
+    color: var(--fg-0);
+  }
+  .chat-md-table td {
+    color: var(--fg-1);
+  }
+  .chat-md-table tbody tr:last-child td {
+    border-bottom: none;
+  }
   .chat-code code {
     font-family: var(--font-mono);
     font-size: var(--type-xs);

package/apps/studio/clip-ops.ts

@@ -1802,26 +1802,51 @@ export function applyMoveClipToOverlay(
     });
   }
   const mediaStart = directMediaTagStart(source, clip);
-  if (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null) {
-    throw new CanvasEditError('only a media clip with a direct source can move between layers', {
-      canvas: canvasAbsPath,
-      id: stableId,
-    });
+  const isPlaceholder = clip.placeholder != null;
+  if (!isPlaceholder && (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null)) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
+  }
+  if (isPlaceholder && clip.durationInFrames == null) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
   }
   const start = clipAbsoluteStart(source, canvasAbsPath, artboardId, stableId);
-  const trim =
-    numAttrText(source, mediaStart, 'trimBefore') ??
-    numAttrText(source, mediaStart, 'startFrom') ??
-    0;
-  const rate = numAttrText(source, mediaStart, 'playbackRate') ?? 1;
-  const ins = applyInsertClipAt(canvasAbsPath, source, artboardId, {
-    lane: 'overlay',
-    from: start,
-    durationInFrames: clip.durationInFrames,
-    mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
-    src: clip.mediaSrc,
-  });
-  let out = graftMediaAttrs(canvasAbsPath, ins.source, artboardId, ins.stableId, trim, rate);
+  // A placeholder slate has no media element to graft trim/rate onto — it
+  // rides over as-is (prompt + kind), never as media.
+  const ins = isPlaceholder
+    ? applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'overlay',
+        from: start,
+        durationInFrames: clip.durationInFrames as number,
+        placeholder: {
+          prompt: clip.placeholder?.prompt ?? '',
+          kind: clip.placeholder?.kind ?? 'veo',
+        },
+      })
+    : applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'overlay',
+        from: start,
+        durationInFrames: clip.durationInFrames as number,
+        mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
+        src: clip.mediaSrc,
+      });
+  let out = isPlaceholder
+    ? ins.source
+    : graftMediaAttrs(
+        canvasAbsPath,
+        ins.source,
+        artboardId,
+        ins.stableId,
+        numAttrText(source, mediaStart as number, 'trimBefore') ??
+          numAttrText(source, mediaStart as number, 'startFrom') ??
+          0,
+        numAttrText(source, mediaStart as number, 'playbackRate') ?? 1
+      );
   const again = enumerateClips(canvasAbsPath, out, artboardId);
   const insertedHash = again.clips.find((c) => c.stableId === ins.stableId)?.contentHash ?? null;
   const original = again.clips.find(
@@ -1861,24 +1886,48 @@ export function applyMoveClipToStoryline(
     throw new CanvasEditError('already a storyline beat', { canvas: canvasAbsPath, id: stableId });
   }
   const mediaStart = directMediaTagStart(source, clip);
-  if (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null) {
-    throw new CanvasEditError('only a media clip with a direct source can move between layers', {
-      canvas: canvasAbsPath,
-      id: stableId,
-    });
+  const isPlaceholder = clip.placeholder != null;
+  if (!isPlaceholder && (mediaStart == null || !clip.mediaSrc || clip.durationInFrames == null)) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
   }
-  const trim =
-    numAttrText(source, mediaStart, 'trimBefore') ??
-    numAttrText(source, mediaStart, 'startFrom') ??
-    0;
-  const rate = numAttrText(source, mediaStart, 'playbackRate') ?? 1;
-  const ins = applyInsertClipAt(canvasAbsPath, source, artboardId, {
-    lane: 'storyline',
-    durationInFrames: clip.durationInFrames,
-    mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
-    src: clip.mediaSrc,
-  });
-  let out = graftMediaAttrs(canvasAbsPath, ins.source, artboardId, ins.stableId, trim, rate);
+  if (isPlaceholder && clip.durationInFrames == null) {
+    throw new CanvasEditError(
+      'only a media clip with a direct source, or an AI placeholder, can move between layers',
+      { canvas: canvasAbsPath, id: stableId }
+    );
+  }
+  // A placeholder slate has no media element to graft trim/rate onto — it
+  // rides over as-is (prompt + kind), never as media.
+  const ins = isPlaceholder
+    ? applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'storyline',
+        durationInFrames: clip.durationInFrames as number,
+        placeholder: {
+          prompt: clip.placeholder?.prompt ?? '',
+          kind: clip.placeholder?.kind ?? 'veo',
+        },
+      })
+    : applyInsertClipAt(canvasAbsPath, source, artboardId, {
+        lane: 'storyline',
+        durationInFrames: clip.durationInFrames as number,
+        mediaTag: clip.mediaTag === 'Audio' ? 'Audio' : 'Video',
+        src: clip.mediaSrc,
+      });
+  let out = isPlaceholder
+    ? ins.source
+    : graftMediaAttrs(
+        canvasAbsPath,
+        ins.source,
+        artboardId,
+        ins.stableId,
+        numAttrText(source, mediaStart as number, 'trimBefore') ??
+          numAttrText(source, mediaStart as number, 'startFrom') ??
+          0,
+        numAttrText(source, mediaStart as number, 'playbackRate') ?? 1
+      );
   const again = enumerateClips(canvasAbsPath, out, artboardId);
   const insertedHash = again.clips.find((c) => c.stableId === ins.stableId)?.contentHash ?? null;
   const original = again.clips.find(