@1agh/maude 0.45.2 → 0.47.0

package/apps/studio/client/panels/ChatPanel.jsx

@@ -25,7 +25,12 @@ import {
   useThread,
 } from '@assistant-ui/react';
 
-import { flattenSelectOptions, parseConfigOptions, resolvePersistedPick } from './acp-capabilities.js';
+import {
+  flattenSelectOptions,
+  modeBlocksEdits,
+  parseConfigOptions,
+  resolvePersistedPick,
+} from './acp-capabilities.js';
 import { parseUsage } from './acp-usage.js';
 import {
   activityLabel,
@@ -147,6 +152,17 @@ const SUGGESTIONS = [
   '/design:new Pricing "a 3-tier pricing page"',
 ];
 
+// DDR-185 — shared "did a genuinely new item arrive" check for the
+// permission/elicitation effects below: both need the identical shape (diff
+// the incoming list's ids against the previous snapshot, fire onNew only for
+// a real arrival, never for a resolution/removal), just against a different
+// ref and a different onNew callback.
+function fireOnNewArrival(prevIdsRef, list, onNew) {
+  const hasNew = list.some((item) => !prevIdsRef.current.has(item.id));
+  prevIdsRef.current = new Set(list.map((item) => item.id));
+  if (hasNew) onNew?.();
+}
+
 function safeStorageGet(key, fallback) {
   try {
     return localStorage.getItem(key) ?? fallback;
@@ -208,6 +224,42 @@ function modeFootnote(modes) {
   return NO_PROMPT_MODE_IDS.has(modes.currentModeId) ? `${name} — no prompts` : `${name} — you'll be asked`;
 }
 
+// The loud, top-of-thread alert shown ONLY while the current mode blocks edits
+// (`modeBlocksEdits`, DDR-184 #3 — the quiet composer footnote above isn't enough
+// when a user typing "change X" silently gets nothing back).
+// Offers a one-click hop to the least-privilege mode that CAN edit (Accept Edits
+// if advertised, else Manual) so the fix is right there, not buried in the picker.
+function ModeBanner({ modes, onSetMode }) {
+  if (!modeBlocksEdits(modes)) return null;
+  const current = modes.availableModes.find((m) => m.id === modes.currentModeId);
+  const name = current?.name || modes.currentModeId;
+  const isPlan = modes.currentModeId === 'plan';
+  const ids = new Set(modes.availableModes.map((m) => m.id));
+  const target = ids.has('acceptEdits') ? 'acceptEdits' : ids.has('default') ? 'default' : null;
+  const targetName = target && (modes.availableModes.find((m) => m.id === target)?.name || target);
+  return (
+    <div className="chat-mode-banner" role="alert" data-testid="chat-mode-banner">
+      <span className="chat-mode-banner-icon" aria-hidden="true">⏸</span>
+      <span className="chat-mode-banner-text">
+        <b>{name}</b>{' — '}
+        {isPlan
+          ? "Claude is planning and won't edit files or run tools."
+          : 'edits and tools without a standing approval are denied — nothing will change.'}
+      </span>
+      {target ? (
+        <button
+          type="button"
+          className="chat-mode-banner-cta"
+          onClick={() => onSetMode(target)}
+          data-testid="chat-mode-banner-switch"
+        >
+          Switch to {targetName}
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
 // ── pasted-path / URL → inline chip (Claude-Code-style attachment badge) ──
 // When the whole clipboard is a single path or URL, we collapse it to a short
 // literal token ([image-1] / [file-1] / [link-1]) in the textarea and stash the
@@ -1445,6 +1497,8 @@ function ChatThread({
   designRel,
   transcriptView,
   onSetTranscriptView,
+  onPermissionRequest,
+  onElicitationRequest,
 }) {
   // Live session capabilities (feature-acp-panel-dynamic-claude-code-
   // capabilities) — `caps` is THIS chat's own connection's mode roster +
@@ -1578,9 +1632,29 @@ function ChatThread({
   // Post-turn-end continuation (the tail the client used to drop — RCA F2).
   const [bgParts, setBgParts] = useState([]);
   useEffect(() => conn.onBackground(setBgParts), [conn]);
+  // DDR-185 — surface a "Maude needs your input" attention ping to the parent
+  // (app.jsx) whenever a GENUINELY NEW permission/elicitation request arrives,
+  // not on every list churn (a request resolving/timing out also updates the
+  // list — that must NOT re-fire the notification). Read via a ref, not the
+  // effect's own dependency array, so a parent re-render that produces a new
+  // callback identity doesn't force conn.onPermission/onElicitation to
+  // re-subscribe.
+  const attentionCbRef = useRef({ onPermissionRequest, onElicitationRequest });
+  useEffect(() => {
+    attentionCbRef.current = { onPermissionRequest, onElicitationRequest };
+  }, [onPermissionRequest, onElicitationRequest]);
+
   // Pending permission requests (Milestone B) — one card at a time, oldest first.
   const [pendingPermissions, setPendingPermissions] = useState([]);
-  useEffect(() => conn.onPermission(setPendingPermissions), [conn]);
+  const prevPermissionIdsRef = useRef(new Set());
+  useEffect(
+    () =>
+      conn.onPermission((list) => {
+        fireOnNewArrival(prevPermissionIdsRef, list, attentionCbRef.current.onPermissionRequest);
+        setPendingPermissions(list);
+      }),
+    [conn]
+  );
   const activePermission = pendingPermissions[0] || null;
   const respondPermission = useCallback(
     (decision) => activePermission && conn.respondPermission(activePermission.id, decision),
@@ -1589,7 +1663,15 @@ function ChatThread({
   // Pending elicitation requests (feature-acp-ask-user-question) — same
   // one-at-a-time, oldest-first treatment as pendingPermissions above.
   const [pendingElicitations, setPendingElicitations] = useState([]);
-  useEffect(() => conn.onElicitation(setPendingElicitations), [conn]);
+  const prevElicitationIdsRef = useRef(new Set());
+  useEffect(
+    () =>
+      conn.onElicitation((list) => {
+        fireOnNewArrival(prevElicitationIdsRef, list, attentionCbRef.current.onElicitationRequest);
+        setPendingElicitations(list);
+      }),
+    [conn]
+  );
   const activeElicitation = pendingElicitations[0] || null;
   const respondElicitation = useCallback(
     (response) => activeElicitation && conn.respondElicitation(activeElicitation.id, response),
@@ -1627,6 +1709,9 @@ function ChatThread({
           transcriptView={transcriptView}
           onSetTranscriptView={onSetTranscriptView}
         />
+        {/* DDR-184 #3 — loud alert when the current mode can't edit (plan / dontAsk),
+            so a user typing "change X" isn't silently ignored. Above the feed. */}
+        <ModeBanner modes={caps.modes} onSetMode={onSetMode} />
         <ThreadPrimitive.Root className="chat-thread">
           <ThreadPrimitive.Viewport className="chat-feed" autoScroll>
             <ThreadPrimitive.Empty>
@@ -1687,6 +1772,8 @@ export default function ChatPanel({
   hidden = false,
   onBusyChange,
   onFinished,
+  onPermissionRequest,
+  onElicitationRequest,
 }) {
   // Model/effort/mode picks — persisted across sessions per config id (never a
   // fixed model/effort pair; see loadPersistedPicks). Read live by each open
@@ -2185,6 +2272,8 @@ export default function ChatPanel({
                 designRel={designRel}
                 transcriptView={transcriptView}
                 onSetTranscriptView={setTranscriptView}
+                onPermissionRequest={onPermissionRequest}
+                onElicitationRequest={onElicitationRequest}
               />
             );
           })

package/apps/studio/client/panels/SettingsPanel.jsx

@@ -385,6 +385,203 @@ function WhisperModelCard() {
   );
 }
 
+// feature-scene-aware-keyframes — the video-analysis frame-selection engine, the
+// sibling of the Subtitles section. Persists `keyframeEngine` to /_api/generate/prefs.
+const KEYFRAME_ENGINES = [
+  { id: 'auto', label: 'Auto', note: 'Use the best available: Gemma scout → ffmpeg → blind.' },
+  { id: 'gemma', label: 'Gemma scout', note: 'Semantic action beats. Needs Apple Silicon + mlx-vlm + a model.' },
+  { id: 'ffmpeg', label: 'ffmpeg scene-detect', note: 'Scene cuts + endpoints. Needs ffmpeg. No model download.' },
+  { id: 'blind', label: 'Blind (even-spaced)', note: 'Chromium fallback — works with neither ffmpeg nor Gemma.' },
+];
+
+function KeyframeEngineCard() {
+  const [engine, setEngine] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [status, setStatus] = useState(null);
+
+  useEffect(() => {
+    fetch('/_api/generate/prefs')
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => setEngine(d?.keyframeEngine || 'auto'))
+      .catch(() => setEngine('auto'));
+  }, []);
+
+  async function choose(id) {
+    if (id === engine) return;
+    const prev = engine;
+    setEngine(id);
+    setBusy(true);
+    setStatus(null);
+    try {
+      const res = await fetch('/_api/generate/prefs', {
+        method: 'POST',
+        headers: { 'content-type': 'text/plain' },
+        body: JSON.stringify({ keyframeEngine: id }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      setStatus({ ok: true, msg: 'Saved.' });
+    } catch (err) {
+      setEngine(prev);
+      setStatus({ ok: false, msg: err && err.message ? err.message : 'save failed' });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="st-provider-card">
+      <div className="st-provider-hd">
+        <span className="st-provider-name">Scene-aware keyframes — analysis engine</span>
+      </div>
+      <div className="st-provider-notes">
+        How Maude picks frames when it analyzes a video (`/design:video-analyze`, `/design:reel`).
+        Scene-aware beats a blind frame rate. This is an explicit choice — a chosen-but-unavailable
+        engine tells you how to fix it; <strong>Auto</strong> just uses the best you have installed.
+      </div>
+      <div className="st-engine-radios" role="radiogroup" aria-label="Keyframe engine">
+        {KEYFRAME_ENGINES.map((e) => (
+          <label key={e.id} className={'st-engine-radio' + (engine === e.id ? ' is-selected' : '')}>
+            <input
+              type="radio"
+              name="keyframe-engine"
+              value={e.id}
+              checked={engine === e.id}
+              disabled={busy || engine === null}
+              onChange={() => choose(e.id)}
+            />
+            <span className="st-engine-radio-body">
+              <span className="st-engine-radio-label">{e.label}</span>
+              <span className="st-engine-radio-note">{e.note}</span>
+            </span>
+          </label>
+        ))}
+      </div>
+      {status && (
+        <div
+          className="st-provider-status"
+          style={{ color: status.ok ? 'var(--accent)' : 'var(--danger, #e5484d)' }}
+        >
+          {status.msg}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// The MODEL half of the Gemma scout — one click, mirroring WhisperModelCard. The
+// RUNTIME (mlx-vlm) is a manual `pip install` the app can't do, so the download is
+// gated on mlxVlmAvailable and the card says which tier will actually run.
+function GemmaModelCard() {
+  const [state, setState] = useState(null); // { models, downloading, mlxVlmAvailable, ffmpegAvailable }
+  const [err, setErr] = useState(null);
+
+  const load = useCallback(() => {
+    fetch('/_api/generate/keyframe-model')
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then(setState)
+      .catch((e) => setErr(e && e.message ? e.message : 'failed to load models'));
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  useEffect(() => {
+    if (!state?.downloading) return undefined;
+    const t = setInterval(load, 1500);
+    return () => clearInterval(t);
+  }, [state?.downloading, load]);
+
+  async function download(id) {
+    setErr(null);
+    try {
+      const res = await fetch('/_api/generate/keyframe-model', {
+        method: 'POST',
+        headers: { 'content-type': 'text/plain' },
+        body: JSON.stringify({ id }),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      load();
+    } catch (e) {
+      setErr(e && e.message ? e.message : 'download failed');
+    }
+  }
+
+  const dl = state?.downloading;
+  const mlx = state?.mlxVlmAvailable;
+  const ff = state?.ffmpegAvailable;
+  const pctOf = (r, t) => (t > 0 ? Math.min(100, Math.round((r / t) * 100)) : 0);
+  const activeTier = mlx ? 'Gemma scout' : ff ? 'ffmpeg scene-detect' : 'blind (even-spaced)';
+
+  return (
+    <div className="st-provider-card">
+      <div className="st-provider-hd">
+        <span className="st-provider-name">Gemma scout model (optional)</span>
+      </div>
+      <div className="st-provider-notes">
+        The <strong>Gemma</strong> tier adds semantic action-beat detection on top of scene cuts. It
+        needs an <strong>Apple-Silicon Mac</strong> and the <code>mlx-vlm</code> runtime
+        (<code>pip install mlx-vlm</code> — a manual step Maude can’t do for you). Downloading a model
+        below is the one-click half. Models live in your HuggingFace cache, never committed.
+      </div>
+      {state && (
+        <div className="st-provider-notes">
+          On this machine the active tier is <strong>{activeTier}</strong>
+          {!mlx && ff && ' — install mlx-vlm + download a model to unlock the Gemma scout.'}
+          {!mlx && !ff && ' — install ffmpeg for scene-aware frames, or mlx-vlm for the Gemma scout.'}
+        </div>
+      )}
+      {err && (
+        <div className="st-provider-status" style={{ color: 'var(--danger, #e5484d)' }}>
+          {err}
+        </div>
+      )}
+      {dl?.error && (
+        <div className="st-provider-status" style={{ color: 'var(--danger, #e5484d)' }}>
+          Download of {dl.id} failed: {dl.error}
+        </div>
+      )}
+      {state === null && !err && <div className="st-settings-intro">Loading…</div>}
+      <div className="st-model-list">
+        {(state?.models || []).map((m) => {
+          const busy = dl && !dl.error && dl.id === m.id;
+          return (
+            <div key={m.id} className="st-model-row">
+              <div className="st-model-info">
+                <span className="st-model-label">
+                  {m.label}
+                  <span className="st-model-size">~{Math.round(m.sizeMB / 100) / 10} GB</span>
+                </span>
+                <span className="st-engine-radio-note">{m.note}</span>
+                {busy && (
+                  <span className="st-model-progress">Downloading… {pctOf(dl.received, dl.total)}%</span>
+                )}
+              </div>
+              <div className="st-model-actions">
+                {m.downloaded ? (
+                  <span className="st-provider-configured">
+                    <Icon name="check" size={12} /> ready
+                  </span>
+                ) : (
+                  <button
+                    type="button"
+                    className="st-btn"
+                    disabled={!mlx || !!(dl && !dl.error)}
+                    title={mlx ? '' : 'Install mlx-vlm first (pip install mlx-vlm)'}
+                    onClick={() => download(m.id)}
+                  >
+                    {busy ? 'Downloading…' : mlx ? 'Download' : 'Needs mlx-vlm'}
+                  </button>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
 // feature-unified-settings-modal — one modal for every Maude preference, laid
 // out as a left vertical tab rail + an internally-scrolling pane. Categories:
 const TABS = [
@@ -393,6 +590,7 @@ const TABS = [
   { id: 'layout', label: 'Layout' },
   { id: 'ai-generation', label: 'AI generation' },
   { id: 'subtitles', label: 'Subtitles' },
+  { id: 'video', label: 'Video' },
 ];
 const SETTINGS_TAB_STORE = 'mdcc-settings-tab';
 
@@ -820,6 +1018,19 @@ export default function SettingsPanel({
               <TranscriptionEngineCard />
               <WhisperModelCard />
             </section>
+
+            {/* Video — scene-aware keyframe engine. Kept mounted so GemmaModelCard's
+                download poll survives a tab switch (like Subtitles above). */}
+            <section
+              role="tabpanel"
+              id="st-spanel-video"
+              aria-labelledby="st-stab-video"
+              hidden={tab !== 'video'}
+            >
+              <div className="st-rp-hd">Video</div>
+              <KeyframeEngineCard />
+              <GemmaModelCard />
+            </section>
           </div>
         </div>
       </div>

package/apps/studio/client/panels/acp-capabilities.js

@@ -69,3 +69,14 @@ export function resolvePersistedPick(availableValues, savedValue, defaultValue)
   if (savedValue != null && set.has(savedValue)) return savedValue;
   return defaultValue ?? null;
 }
+
+// Modes where the agent CANNOT apply an edit and there's no interactive approve
+// path to unblock it (DDR-184 #3). `plan` = "no actual tool execution"; `dontAsk`
+// denies anything without a standing pre-approval (and Maude's default allow-list
+// only covers edits + `maude`, so an off-list step is silently denied). The
+// ChatPanel ModeBanner reads this to decide whether to show the loud alert. Keyed
+// off the mode id, never a label, so it stays truthful as the roster evolves.
+export const NO_EDIT_MODE_IDS = new Set(['plan', 'dontAsk']);
+export function modeBlocksEdits(modes) {
+  return !!modes?.currentModeId && NO_EDIT_MODE_IDS.has(modes.currentModeId);
+}

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

@@ -404,6 +404,10 @@
 .st-rp-hd { font-family: var(--font-mono); font-size: var(--type-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-2); }
 /* Stage H (INV-3) edit-scope strip — local (this element) vs shared (edits N places). */
 .st-scope { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--type-xs); border-bottom: 1px solid var(--border-subtle); flex: none; animation: st-pop var(--dur-soft) var(--ease-out); }
+/* feature-4 detach-component — inline action on the Shared badge. */
+.st-scope-detach { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-xs); font-size: var(--type-xs); background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--border-subtle); cursor: pointer; }
+.st-scope-detach:hover { background: var(--bg-3); color: var(--fg-0); }
+.st-scope-detach:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .st-scope-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
 .st-scope--local { color: var(--fg-2); }
 .st-scope--local .st-scope-dot { background: var(--fg-3); }
@@ -664,6 +668,30 @@
 .st-layer--row:hover .st-layer-eye, .st-layer--row:focus-within .st-layer-eye { opacity: 1; }
 .st-layer-eye:hover { color: var(--fg-0); background: var(--bg-3); }
 .st-layer-eye:focus-visible { outline: none; color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
+/* feature-4 T7 — synthetic group row (unstamped wrapper): a muted, italic
+   structural stand-in. Not selectable, not draggable, no eye — it exists only
+   to restore real nesting in the tree. The folder icon reads as "container". */
+.st-layer.is-group { cursor: default; color: var(--fg-3); }
+.st-layer.is-group .st-layer-label { font-style: italic; }
+.st-layer.is-group .st-layer-type { opacity: 0.7; }
+.st-layer.is-group:hover { background: var(--bg-2); }
+/* feature-4 T7a — component-instance rows (Figma purple). ◆ = the component's
+   own frame root, ◇ = an inner member. The purple is deliberately Figma-adjacent
+   so the vocabulary transfers. */
+.st-layer.is-instance { color: var(--layer-instance, #a78bfa); }
+.st-layer.is-instance .st-layer-label { color: var(--layer-instance, #a78bfa); }
+.st-layer.is-instance .st-layer-type { color: var(--layer-instance, #a78bfa); opacity: 0.75; }
+.st-layer-inst-glyph { flex: none; width: 14px; text-align: center; font-size: 10px; color: var(--layer-instance, #a78bfa); }
+.st-layer.is-sel.is-instance { box-shadow: inset 2px 0 0 var(--layer-instance, #a78bfa); }
+/* feature-4 T7b — locked rows: padlock stays visible when locked; dimmed label. */
+.st-layer-lock { flex: none; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--fg-3); cursor: pointer; padding: 0; border-radius: var(--radius-xs); opacity: 0; }
+.st-layer--row:hover .st-layer-lock, .st-layer--row:focus-within .st-layer-lock { opacity: 1; }
+.st-layer-lock:hover { color: var(--fg-0); background: var(--bg-3); }
+.st-layer-lock:focus-visible { outline: none; color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
+.st-layer.is-locked .st-layer-lock { opacity: 1; color: var(--fg-1); }
+.st-layer.is-locked .st-layer-label { opacity: 0.6; }
+/* feature-4 T7c — inline rename input matches the row's mono type. */
+.st-layer-rename { flex: 1 1 auto; min-width: 40px; font: inherit; color: var(--fg-0); background: var(--bg-1); border: 1px solid var(--accent); border-radius: var(--radius-xs); padding: 0 4px; outline: none; }
 /* a hidden layer stays dim + keeps its eye visible (so it can be re-shown) */
 .st-layer.is-hidden { opacity: 0.45; }
 .st-layer.is-hidden .st-layer-eye { opacity: 1; color: var(--fg-2); }
@@ -1141,6 +1169,17 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .st-cp-makeflex:hover:not(:disabled) { border-color: var(--accent); color: var(--fg-0); }
 .st-cp-makeflex:disabled { opacity: 0.5; cursor: default; }
 
+/* feature-3-web-artboards T5 — Grid section's track-list editor. */
+.st-cp-gridtracks { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) 0; }
+.st-cp-gridtracks + .st-cp-gridtracks { margin-top: var(--space-2); border-top: 1px solid var(--border-subtle); padding-top: var(--space-2); }
+.st-cp-gridtracks-hd { display: flex; align-items: center; justify-content: space-between; }
+.st-cp-gridtracks-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); }
+.st-cp-gridtracks-add { min-height: 22px; padding: 0 var(--space-2); font-size: 10px; }
+.st-cp-gridtrack-row { display: flex; align-items: center; gap: var(--space-1); }
+.st-cp-gridtrack-row .st-cp-nsel { flex: 1 1 auto; }
+.st-cp-gridtrack-remove { flex: 0 0 auto; min-height: 22px; min-width: 22px; padding: 0; justify-content: center; color: var(--fg-2); }
+.st-cp-gridtrack-remove:hover:not(:disabled) { color: var(--status-error); }
+
 /* provenance legend */
 .st-cp-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-1); border-top: 1px solid var(--border-subtle); }
 .st-cp-legend span { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); }

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

@@ -1907,4 +1907,45 @@
   .brand-up-nextstep { margin: var(--space-4) 0 0; font-size: var(--type-sm); color: var(--fg-1); line-height: var(--lh-md); }
   .brand-up-nextstep code { font-family: var(--font-mono); background: var(--bg-3); padding: 1px 4px; border-radius: var(--radius-xs); }
   .brand-up-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
+
+  /* DDR-184 #3 — loud top-of-thread alert while the current mode can't edit
+     (Plan / Don't-Ask). Warn-toned so it reads as "you're blocked", distinct
+     from the neutral usage banner. One-click hop back to an editing mode. */
+  .chat-mode-banner {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: 0 var(--space-4) var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--warn, hsl(38 92% 50%));
+    border-radius: var(--radius-sm);
+    background: var(--bg-2);
+    color: var(--fg-1);
+    font-size: var(--type-xs);
+    line-height: var(--lh-md);
+  }
+  .chat-mode-banner-icon {
+    flex-shrink: 0;
+    color: var(--warn, hsl(38 92% 50%));
+  }
+  .chat-mode-banner-text {
+    flex: 1 1 auto;
+  }
+  .chat-mode-banner-text b {
+    color: var(--fg-0);
+  }
+  .chat-mode-banner-cta {
+    flex-shrink: 0;
+    appearance: none;
+    cursor: pointer;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-xs);
+    background: var(--bg-3);
+    color: var(--fg-0);
+    font-size: var(--type-xs);
+    padding: 2px var(--space-2);
+  }
+  .chat-mode-banner-cta:hover {
+    background: var(--bg-4);
+  }
 }

package/apps/studio/contextual-toolbar.tsx

@@ -170,9 +170,11 @@ interface AlignTarget {
 /**
  * Resolve every selection to its current world-space box, gated on
  * absolute/fixed positioning — align/distribute/tidy-up write `left`/`top`,
- * which is only meaningful for out-of-flow elements (this codebase
- * deliberately never does an implicit convert-to-absolute-on-drag; see the
- * Stage-D dogfood notes). Returns `null` (all-or-nothing) if any selection
+ * which is only meaningful for out-of-flow elements. This lane still never does
+ * an IMPLICIT convert-to-absolute-on-drag (see the Stage-D dogfood notes); the
+ * EXPLICIT context-menu "Convert children to absolute position" (feature-4 T8,
+ * DDR-188) is the opt-in path to flatten a flow layout first. Returns `null`
+ * (all-or-nothing) if any selection
  * doesn't resolve, or isn't out-of-flow, or has a non-numeric `left`/`top`
  * (e.g. positioned via `right`/`bottom` instead — a known v1 limit).
  */