@1agh/maude 0.31.0 → 0.32.1

package/apps/studio/acp/bridge.ts

@@ -132,13 +132,30 @@ export class AcpBridge {
     if (!adapterEntry) {
       throw new Error('The Claude agent bridge is not installed in this build.');
     }
-    if (!resolveClaudePath()) {
+    const claudePath = resolveClaudePath();
+    if (!claudePath) {
       throw new Error("Claude Code isn't connected — run `claude` in a terminal and `/login`.");
     }
 
     // DDR-123 guardrail #1 — strip ANTHROPIC_API_KEY so the child stays on the
     // user's subscription. This is the whole compliance story; do not weaken it.
     const env = scrubAgentEnv(process.env);
+    // DDR-123 guardrail #2 — pin the adapter to the user's OWN `claude` CLI.
+    // `claude-agent-acp`'s `claudeCliPath()` honors CLAUDE_CODE_EXECUTABLE and
+    // ONLY otherwise falls back to the ~210 MB native Claude binary shipped as a
+    // platform-specific OPTIONAL dep of @anthropic-ai/claude-agent-sdk. The
+    // desktop bundle deliberately stages just the adapter's JS closure (not that
+    // native binary — see apps/desktop/scripts/stage-resources.mjs), so without
+    // this pin the packaged adapter would throw "native binary not found". Driving
+    // the user's installed CLI is also the documented intent: it keeps the turn on
+    // their subscription rather than the SDK's embedded runtime.
+    env.CLAUDE_CODE_EXECUTABLE = claudePath;
+    // Least-privilege: the adapter child never talks to the dev-server's GitHub
+    // token bridge (only apps/studio/github/token.ts does), so drop the loopback
+    // keychain-bridge handle from its env. Keeps a hijacked-PATH `claude` (which
+    // would require pre-existing RCE) from reading the user's GitHub token.
+    delete env.MAUDE_TOKEN_ENDPOINT;
+    delete env.MAUDE_TOKEN_KEY;
     // Model + effort selection — config, NOT credentials, so they're added back.
     this.activeModel = this.desiredModel;
     this.activeEffort = this.desiredEffort;

package/apps/studio/client/app.jsx

@@ -18,6 +18,7 @@ import DiffView from './panels/DiffView.jsx';
 import GitPanel from './panels/GitPanel.jsx';
 import IdentityBar from './panels/IdentityBar.jsx';
 import OnboardingWizard from './panels/OnboardingWizard.jsx';
+import { ReadinessDialog } from './panels/ReadinessList.jsx';
 import RepoBranchSwitcher from './panels/RepoBranchSwitcher.jsx';
 import { appIsFirstRun, isNativeApp, onUpdateReady, restartToUpdate } from './github.js';
 import { COLLAB_TOUR } from './tour/collab-tour.js';
@@ -2249,6 +2250,7 @@ function HelpDropdown({ onAction, onClose }) {
         // Publish → Pull cycle — a non-technical, native-app concern. A web-studio
         // dev already knows git, so it's hidden there (DDR-119).
         ...(isNativeApp() ? [{ id: 'collab-tour', label: 'How sharing works' }] : []),
+        ...(isNativeApp() ? [{ id: 'readiness', label: 'Check AI editing readiness…' }] : []),
         { id: 'whatsnew', label: "What's new" },
       ]}
     />
@@ -2367,6 +2369,7 @@ function Menubar({
   onTogglePresent,
   postToActiveCanvas,
   onOpenWhatsNew,
+  onOpenReadiness,
   whatsNewCount,
   artboardCount = 0,
   presence = null,
@@ -2630,6 +2633,7 @@ function Menubar({
             else if (id === 'help') onOpenHelp?.();
             else if (id === 'tour') onStartTour?.();
             else if (id === 'collab-tour') onStartCollabTour?.();
+            else if (id === 'readiness') onOpenReadiness?.();
             else if (id === 'whatsnew') onOpenWhatsNew?.();
           }}
           onClose={() => setOpenMenu(null)}
@@ -5578,6 +5582,7 @@ function App() {
   const [showHidden, setShowHidden] = useState(() => readBoolStore(SHOW_HIDDEN_STORE, false));
   const [sectionsExpanded, setSectionsExpanded] = useState(() => readJsonStore(SECTIONS_STORE, {}));
   const [helpOpen, setHelpOpen] = useState(false);
+  const [readinessOpen, setReadinessOpen] = useState(false);
   // ? cheat-sheet (DS components-shortcuts-overlay) — separate from the deep
   // Help modal (F1), which keeps commands & flows.
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
@@ -7138,6 +7143,7 @@ function App() {
           presentMode={presentMode}
           onTogglePresent={togglePresent}
           postToActiveCanvas={postToActiveCanvas}
+          onOpenReadiness={() => setReadinessOpen(true)}
           onOpenWhatsNew={whatsNew.openPanel}
           whatsNewCount={whatsNew.unseen.length}
           artboardCount={activeArtboards}
@@ -7430,6 +7436,7 @@ function App() {
         }}
       />
       <WhatsNewPanel wn={whatsNew} onStartTour={startTour} />
+      <ReadinessDialog open={readinessOpen} onClose={() => setReadinessOpen(false)} />
       {usageNudge && !tourSteps && !collabNudge && (
         <div className="mdcc-tour-nudge" role="status" aria-live="polite">
           <div className="mdcc-tour-nudge__body">

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

@@ -23,6 +23,7 @@ import {
 
 import { createAcpConnection, makeAcpAdapter } from './acp-runtime.js';
 import { Markdown } from './chat-markdown.jsx';
+import ReadinessList, { useReadiness } from './ReadinessList.jsx';
 
 // ── inline icons (separate panel files carry their own, like GitPanel) ──
 const Spark = ({ size = 16 }) => (
@@ -330,16 +331,18 @@ function Composer({ activeCanvas, model, setModel, effort, setEffort }) {
   );
 }
 
-function NotConnected({ reason, claudeMissing }) {
+function NotConnected({ reason, claudeMissing, readiness, readinessLoading, onRecheck }) {
   return (
     <div className="chat-disabled">
       <span className="chat-disabled-mark">
         <Spark size={28} />
       </span>
-      <div className="chat-disabled-title">Claude Code isn't connected</div>
+      <div className="chat-disabled-title">AI editing isn't ready yet</div>
       <div className="chat-disabled-sub">
         {reason ? <p>{reason}</p> : null}
-        {claudeMissing ? (
+        {readiness ? (
+          <p>AI editing pairs with a Claude Code you have installed. Here's what it still needs:</p>
+        ) : claudeMissing ? (
           <p>
             Install it with <code>npm i -g @anthropic-ai/claude-code</code>, then run{' '}
             <code>claude</code> and <code>/login</code> in a terminal.
@@ -350,6 +353,9 @@ function NotConnected({ reason, claudeMissing }) {
           </p>
         )}
       </div>
+      {readiness ? (
+        <ReadinessList report={readiness} loading={readinessLoading} refresh={onRecheck} />
+      ) : null}
       <div className="chat-trust">
         <div className="chat-trust-row">
           <Check /> Runs on your Pro/Max subscription
@@ -481,30 +487,44 @@ export default function ChatPanel({
 
   // Availability is global (is claude installed) — a single probe, no connection.
   const [status, setStatus] = useState({ available: null, reason: undefined, claudeMissing: false });
-  useEffect(() => {
-    let alive = true;
-    fetch('/_api/acp/status')
-      .then((r) => r.json())
-      .then((d) => {
-        if (alive)
+  const probeStatus = useCallback(
+    () =>
+      fetch('/_api/acp/status')
+        .then((r) => r.json())
+        .then((d) =>
           setStatus({
             available: d.available,
             reason: d.reason,
             claudeMissing: !!d.adapterEntry && !d.claudePath,
-          });
-      })
-      .catch(() => {
-        if (alive)
+          })
+        )
+        .catch(() =>
           setStatus({
             available: false,
             reason: 'Could not reach the Claude bridge.',
             claudeMissing: false,
-          });
-      });
-    return () => {
-      alive = false;
-    };
-  }, []);
+          })
+        ),
+    []
+  );
+  useEffect(() => {
+    probeStatus();
+  }, [probeStatus]);
+
+  // DDR-128 — when not connected, surface the full readiness breakdown (claude ·
+  // maude · plugins) in the not-connected explainer. Only probes when actually
+  // disconnected; Re-check re-probes BOTH the readiness report and the bridge
+  // status, so installing the missing pieces and re-checking can unlock the panel
+  // without reopening it (the persistent re-check surface).
+  const {
+    report: readiness,
+    loading: readinessLoading,
+    refresh: refreshReadiness,
+  } = useReadiness(status.available === false);
+  const recheck = useCallback(() => {
+    refreshReadiness();
+    return probeStatus();
+  }, [refreshReadiness, probeStatus]);
 
   // Recents (for the switcher).
   const [chats, setChats] = useState([]);
@@ -741,7 +761,13 @@ export default function ChatPanel({
       ) : null}
       <div className="st-rp-body st-rp-body--chat">
         {status.available === false ? (
-          <NotConnected reason={status.reason} claudeMissing={status.claudeMissing} />
+          <NotConnected
+            reason={status.reason}
+            claudeMissing={status.claudeMissing}
+            readiness={readiness}
+            readinessLoading={readinessLoading}
+            onRecheck={recheck}
+          />
         ) : (
           openChatIds.map((id) => {
             const conn = connsRef.current.get(id);

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

@@ -12,6 +12,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
+import ReadinessList, { useReadiness } from './ReadinessList.jsx';
 import {
   cloneRepo,
   createProject,
@@ -143,6 +144,39 @@ function CrashOptIn() {
   );
 }
 
+// AI-editing readiness (Phase 33 / DDR-128). NON-BLOCKING: the bundled core
+// (canvas browser, version history, sharing) works with zero install, so this is a
+// quiet, collapsible strip — never a gate. It surfaces what AI editing additionally
+// needs (a paired Claude Code with the maude plugins + the `maude` CLI) so a missing
+// piece is visible instead of a silent no-op when the user later types /design:edit.
+// Stays silent until the probe answers (endpoint unreachable → render nothing).
+function AiReadiness() {
+  const { report, loading, refresh } = useReadiness();
+  if (!report) return null;
+  const ready = report.ready;
+  return (
+    <details className="ob-readiness">
+      <summary className="ob-readiness-sum">
+        <span className={`ob-readiness-dot ob-readiness-dot--${ready ? 'ok' : 'warn'}`} aria-hidden="true" />
+        <span className="ob-readiness-lede">
+          {ready ? 'AI editing is ready' : 'AI editing needs a couple of things'}
+        </span>
+        <span className="ob-readiness-hint">
+          {ready ? 'optional — view details' : 'optional · the rest of Maude works without it'}
+        </span>
+      </summary>
+      <div className="ob-readiness-body">
+        <p className="ob-readiness-note">
+          Everything else — the canvas browser, version history, sharing — works right now. AI
+          editing additionally pairs with a Claude Code you already have installed and runs on your
+          own Pro/Max subscription.
+        </p>
+        <ReadinessList report={report} loading={loading} refresh={refresh} />
+      </div>
+    </details>
+  );
+}
+
 // ── A · Welcome (door picker) ────────────────────────────────────────────────
 function Welcome({ onGithub, onLocal, onHub, signing }) {
   return (
@@ -181,6 +215,7 @@ function Welcome({ onGithub, onLocal, onHub, signing }) {
         </button>
       </div>
       <p className="ob-foot-note">Maude never touches the terminal. Everything here happens in the app.</p>
+      <AiReadiness />
       <CrashOptIn />
     </main>
   );

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

@@ -0,0 +1,189 @@
+// First-open AI-editing readiness list (DDR-128). Reads GET /_api/preflight and
+// renders one row per dependency (claude · maude · plugins · agent-browser) with a
+// status glyph, a one-line detail, and a copy-paste remediation when something's
+// missing. Detect-and-guide only — it never installs or mutates anything.
+//
+// Shared by the onboarding wizard (a non-blocking strip) and the ChatPanel
+// not-connected explainer (where a user actually hits the wall). Both also use it
+// as the persistent re-check surface — `refresh()` re-probes without a reinstall.
+
+import { useCallback, useEffect, useState } from 'react';
+
+/** Fetch + cache the readiness report. `refresh()` re-probes (the re-check button). */
+export function useReadiness(enabled = true) {
+  const [report, setReport] = useState(null); // { ready, items } | null
+  const [loading, setLoading] = useState(enabled);
+
+  const refresh = useCallback(() => {
+    setLoading(true);
+    return fetch('/_api/preflight')
+      .then((r) => r.json())
+      .then((d) => {
+        setReport(d && Array.isArray(d.items) ? d : null);
+        setLoading(false);
+        return d;
+      })
+      .catch(() => {
+        setReport(null);
+        setLoading(false);
+        return null;
+      });
+  }, []);
+
+  useEffect(() => {
+    if (!enabled) return undefined;
+    let alive = true;
+    fetch('/_api/preflight')
+      .then((r) => r.json())
+      .then((d) => alive && (setReport(d && Array.isArray(d.items) ? d : null), setLoading(false)))
+      .catch(() => alive && (setReport(null), setLoading(false)));
+    return () => {
+      alive = false;
+    };
+  }, [enabled]);
+
+  return { report, loading, refresh };
+}
+
+function StatusIcon({ status }) {
+  if (status === 'present')
+    return (
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <polyline points="3 8.4 6.4 11.8 13 4.4" />
+      </svg>
+    );
+  if (status === 'unknown')
+    return (
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M6 6a2 2 0 1 1 2.6 1.9c-.4.2-.6.5-.6 1V10" />
+        <circle cx="8" cy="12.4" r="0.6" fill="currentColor" stroke="none" />
+      </svg>
+    );
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="8" cy="8" r="5.5" />
+      <line x1="8" y1="5" x2="8" y2="8.6" />
+    </svg>
+  );
+}
+
+/** Render `code`-fenced spans inside a string as <code>, the rest as text. */
+function Inline({ text }) {
+  const parts = [];
+  const re = /`([^`]+)`/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) parts.push(text.slice(last, m.index));
+    parts.push(<code key={parts.length}>{m[1]}</code>);
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return <>{parts}</>;
+}
+
+function Row({ item }) {
+  const [copied, setCopied] = useState(false);
+  const copyFix = () => {
+    const cmds = item.remediation?.replace(/`/g, '') ?? '';
+    navigator.clipboard?.writeText(cmds).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      () => {}
+    );
+  };
+  return (
+    <li className={`rdy-row rdy-row--${item.status}${item.required ? '' : ' rdy-row--opt'}`}>
+      <span className="rdy-ic" aria-hidden="true">
+        <StatusIcon status={item.status} />
+      </span>
+      <span className="rdy-tx">
+        <span className="rdy-label">{item.label}</span>
+        <span className="rdy-detail">
+          <Inline text={item.detail} />
+        </span>
+        {item.remediation ? (
+          <span className="rdy-fix">
+            <span className="rdy-fix-tx">
+              <Inline text={item.remediation} />
+            </span>
+            <button type="button" className="rdy-copy" onClick={copyFix} aria-label={`Copy the fix for ${item.label}`}>
+              {copied ? 'Copied' : 'Copy'}
+            </button>
+          </span>
+        ) : null}
+      </span>
+    </li>
+  );
+}
+
+export default function ReadinessList({ report, loading, refresh }) {
+  return (
+    <div className="rdy">
+      <ul className="rdy-list">
+        {report?.items?.map((it) => (
+          <Row key={it.id} item={it} />
+        ))}
+      </ul>
+      {refresh ? (
+        <div className="rdy-foot">
+          <button type="button" className="btn btn--ghost btn--sm rdy-recheck" onClick={refresh} disabled={loading}>
+            {loading ? 'Checking…' : 'Re-check'}
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// Standalone readiness modal reachable any time from Help ▸ Check AI editing
+// readiness… (DDR-128, T6 — the persistent re-check surface, not gated on
+// first-run or a disconnected chat). Reuses the shared help-modal chrome (backdrop
+// + header + body) so it matches the What's New / Help dialogs, and the same
+// ReadinessList. Self-contained: probes only while open (the hook's `enabled` gate),
+// re-probes via the list's Re-check button.
+export function ReadinessDialog({ open, onClose }) {
+  const { report, loading, refresh } = useReadiness(open);
+  useEffect(() => {
+    if (!open) return undefined;
+    const onKey = (e) => e.key === 'Escape' && onClose();
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return (
+    <div
+      className="help-modal-backdrop"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="help-modal rdy-modal" role="dialog" aria-modal="true" aria-labelledby="rdy-modal-title">
+        <header className="help-modal-hd">
+          <span className="title" id="rdy-modal-title">
+            Check AI editing readiness
+          </span>
+          <button type="button" className="help-modal-close" aria-label="Close (Esc)" onClick={onClose}>
+            ×
+          </button>
+        </header>
+        <div className="help-modal-body">
+          <p className="rdy-modal-note">
+            The canvas browser, version history, and sharing work with no setup. AI editing
+            additionally drives a Claude Code you have installed — here's what it needs:
+          </p>
+          {report ? (
+            <ReadinessList report={report} loading={loading} refresh={refresh} />
+          ) : (
+            <p className="rdy-modal-note">
+              {loading ? 'Checking…' : "Couldn't reach the readiness probe."}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1617,6 +1617,18 @@ body.st-scrubbing, body.st-scrubbing * { cursor: ew-resize !important; user-sele
 .ob-crash-optin { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 560px; margin: var(--space-3) 0 0; color: var(--fg-2); font-size: var(--type-xs); line-height: var(--lh-md); cursor: pointer; text-align: left; }
 .ob-crash-optin input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; }
 
+/* AI-editing readiness strip (Phase 33 / DDR-128) — non-blocking, collapsible. */
+.ob-readiness { max-width: 560px; margin: var(--space-3) 0 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-1); text-align: left; }
+.ob-readiness-sum { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); cursor: pointer; list-style: none; font-size: var(--type-sm); color: var(--fg-1); }
+.ob-readiness-sum::-webkit-details-marker { display: none; }
+.ob-readiness-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
+.ob-readiness-dot--ok { background: var(--status-success); }
+.ob-readiness-dot--warn { background: var(--status-warning, var(--status-info)); }
+.ob-readiness-lede { font-weight: 600; color: var(--fg-0); }
+.ob-readiness-hint { margin-left: auto; color: var(--fg-3); font-size: var(--type-xs); }
+.ob-readiness-body { padding: 0 var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
+.ob-readiness-note { margin: 0; color: var(--fg-2); font-size: var(--type-xs); line-height: var(--lh-md); }
+
 .ob-create { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); width: 100%; max-width: 720px; text-align: left; padding: var(--space-5); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--accent-tint) 0%, transparent 80%), var(--bg-1); cursor: pointer; color: inherit; transition: border-color var(--dur-soft) var(--ease-out); }
 .ob-create:hover { border-color: var(--accent); }
 .ob-create:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

@@ -769,3 +769,53 @@
     }
   }
 }
+
+/* DDR-128 — AI-editing readiness list (ReadinessList.jsx). Shared by the onboarding
+   readiness strip and the ChatPanel not-connected explainer. Detect-and-guide:
+   present rows reassure, missing rows carry a copy-paste fix, optional rows stay
+   muted (never alarming). */
+@layer components {
+  .rdy { display: flex; flex-direction: column; gap: var(--space-3); }
+  .rdy-list {
+    list-style: none; margin: 0; padding: 0;
+    display: flex; flex-direction: column; gap: var(--space-2);
+  }
+  .rdy-row {
+    display: flex; gap: var(--space-2); align-items: flex-start;
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
+    background: var(--bg-2); text-align: left;
+  }
+  .rdy-ic { flex-shrink: 0; margin-top: 1px; }
+  .rdy-row--present .rdy-ic { color: var(--status-success); }
+  .rdy-row--missing .rdy-ic { color: var(--status-error); }
+  .rdy-row--unknown .rdy-ic { color: var(--status-info); }
+  /* optional, missing → muted, not alarming */
+  .rdy-row--opt.rdy-row--missing .rdy-ic { color: var(--fg-3); }
+  .rdy-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .rdy-label { font-size: var(--type-sm); font-weight: 600; color: var(--fg-0); }
+  .rdy-detail { font-size: var(--type-xs); color: var(--fg-2); line-height: var(--lh-xs); }
+  .rdy-fix {
+    margin-top: var(--space-2); display: flex; gap: var(--space-2);
+    align-items: flex-start;
+    font-size: var(--type-xs); color: var(--fg-1); line-height: var(--lh-xs);
+  }
+  .rdy-fix-tx { min-width: 0; }
+  .rdy code {
+    font-family: var(--font-mono); font-size: var(--type-xs);
+    color: var(--fg-0); background: var(--bg-3);
+    padding: 1px 5px; border-radius: var(--radius-xs);
+    overflow-wrap: anywhere;
+  }
+  .rdy-copy {
+    flex-shrink: 0; cursor: pointer;
+    font-size: var(--type-xs); color: var(--fg-2);
+    background: transparent; border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-xs); padding: 1px 6px;
+  }
+  .rdy-copy:hover { color: var(--fg-0); background: var(--bg-3); }
+  .rdy-foot { display: flex; justify-content: flex-end; }
+  /* Help ▸ Check AI editing readiness… modal (reuses .help-modal chrome). */
+  .rdy-modal { max-width: 520px; }
+  .rdy-modal-note { margin: 0 0 var(--space-3); color: var(--fg-2); font-size: var(--type-sm); line-height: var(--lh-md); }
+}