@1agh/maude 0.45.2 → 0.46.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,
@@ -208,6 +213,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
@@ -1627,6 +1668,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>

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/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);
+  }
 }