@1agh/maude 0.43.0 → 0.45.0

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

@@ -0,0 +1,233 @@
+// BrandUploadPanel — T12 (DDR-173). The in-app "Bring my existing brand"
+// panel: upload a logo file → DDR-167 sanitize (`POST /_api/import-asset`)
+// → DDR-173 typed-cue extraction (`POST /_api/import-brand`) → show the
+// palette/fonts/logo the user can carry into `/design:setup-ds --from-brand`.
+//
+// Client never sends a filesystem PATH to either route — only bytes (native:
+// via the existing `pick_media_file` Tauri command, which reads the file in
+// Rust and returns bytes over IPC, mirroring app.jsx's `openFilePickerNative`;
+// browser: via a plain `<input type=file>` + FileReader). This mirrors
+// DDR-167's own entry-point trust table: "no server-side path resolution at
+// all — the client never sends a path string, only bytes over loopback HTTP."
+
+import { useRef, useState } from 'react';
+import { isNativeApp, pickMediaFile } from '../github.js';
+
+async function readFileAsArrayBuffer(file) {
+  return new Promise((resolvePromise, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolvePromise(reader.result);
+    reader.onerror = () => reject(reader.error || new Error('file read failed'));
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+/** Upload + extract. Returns `{ palette, fonts, logoRef, logoRasterRef, hadWordmarkText }` or throws. */
+async function ingestBrandFile(bytes) {
+  const importAssetRes = await fetch('/_api/import-asset', {
+    method: 'POST',
+    headers: { 'X-Import-Kind': 'svg' },
+    body: bytes,
+  });
+  const importAssetBody = await importAssetRes.json().catch(() => ({}));
+  if (!importAssetRes.ok || !importAssetBody.ok) {
+    throw new Error(importAssetBody.error || `import failed (HTTP ${importAssetRes.status})`);
+  }
+
+  const importBrandRes = await fetch('/_api/import-brand', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ assetPath: importAssetBody.path }),
+  });
+  const importBrandBody = await importBrandRes.json().catch(() => ({}));
+  if (!importBrandRes.ok || !importBrandBody.ok) {
+    throw new Error(importBrandBody.error || `extraction failed (HTTP ${importBrandRes.status})`);
+  }
+  return importBrandBody;
+}
+
+function PaletteSwatches({ palette }) {
+  if (!palette?.length) {
+    return <p className="brand-up-empty">No color values could be extracted from this file.</p>;
+  }
+  return (
+    <ul className="brand-up-swatches" data-testid="brand-up-palette">
+      {palette.map((color) => (
+        <li key={color} className="brand-up-swatch" title={color}>
+          <span className="brand-up-swatch-chip" style={{ background: color }} aria-hidden="true" />
+          <span className="brand-up-swatch-value">{color}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function FontList({ fonts }) {
+  if (!fonts?.length) {
+    return (
+      <p className="brand-up-empty">
+        No recognized font names found — this is normal (font names inside the logo's own text are
+        stripped for safety before extraction; the design system's typography will still be
+        researched from your brief).
+      </p>
+    );
+  }
+  return (
+    <ul className="brand-up-fonts" data-testid="brand-up-fonts">
+      {fonts.map((f) => (
+        <li key={f} className="brand-up-font-chip">
+          {f}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default function BrandUploadPanel({ open, onClose }) {
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState(null);
+  const [result, setResult] = useState(null); // ingestBrandFile() response
+  const fileInputRef = useRef(null);
+
+  const runIngest = async (bytes) => {
+    setBusy(true);
+    setErr(null);
+    setResult(null);
+    try {
+      const r = await ingestBrandFile(bytes);
+      setResult(r);
+    } catch (e) {
+      setErr(e?.message || 'upload failed');
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const pickNative = async () => {
+    setBusy(true);
+    setErr(null);
+    try {
+      const picked = await pickMediaFile();
+      if (!picked?.bytes) {
+        setBusy(false);
+        return; // user cancelled
+      }
+      await runIngest(new Blob([new Uint8Array(picked.bytes)]));
+    } catch (e) {
+      setErr(e?.message || 'open failed');
+      setBusy(false);
+    }
+  };
+
+  const pickBrowser = () => fileInputRef.current?.click();
+
+  const onBrowserFileChosen = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = ''; // allow re-picking the same file
+    if (!file) return;
+    const buf = await readFileAsArrayBuffer(file);
+    await runIngest(new Blob([buf]));
+  };
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="help-modal-backdrop"
+      role="presentation"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div
+        className="help-modal brand-up-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="brand-up-modal-title"
+      >
+        <header className="help-modal-hd">
+          <span className="title" id="brand-up-modal-title">
+            Bring my existing brand
+          </span>
+          <button type="button" className="help-modal-close" aria-label="Close (Esc)" onClick={onClose}>
+            ×
+          </button>
+        </header>
+        <div className="help-modal-body">
+          <p className="brand-up-note">
+            Upload your logo (SVG) and Maude will pull out its color palette to seed your design
+            system — nothing here is final, you'll confirm every choice during setup.
+          </p>
+
+          {!result && (
+            <div className="brand-up-pick">
+              <button
+                type="button"
+                className="btn btn--primary btn--sm"
+                data-testid="brand-up-pick-file"
+                disabled={busy}
+                onClick={isNativeApp() ? pickNative : pickBrowser}
+              >
+                {busy ? 'Working…' : 'Choose logo file…'}
+              </button>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/svg+xml,.svg"
+                style={{ display: 'none' }}
+                onChange={onBrowserFileChosen}
+              />
+            </div>
+          )}
+
+          {err && (
+            <p className="brand-up-error" data-testid="brand-up-error" role="alert">
+              {err}
+            </p>
+          )}
+
+          {result && (
+            <div className="brand-up-result" data-testid="brand-up-result">
+              <img
+                className="brand-up-preview"
+                src={`/${result.logoRasterRef || result.logoRef}`}
+                alt="Uploaded logo preview"
+              />
+              <h4 className="brand-up-sechd">Palette</h4>
+              <PaletteSwatches palette={result.palette} />
+              <h4 className="brand-up-sechd">Fonts</h4>
+              <FontList fonts={result.fonts} />
+              <p className="brand-up-nextstep">
+                Next: run <code>/design:setup-ds --from-brand {result.logoRef}</code> in the AI chat
+                (or your terminal) to build a design system seeded from this upload.
+              </p>
+              <div className="brand-up-actions">
+                <button
+                  type="button"
+                  className="btn btn--primary btn--sm"
+                  data-testid="brand-up-copy-command"
+                  onClick={() =>
+                    navigator.clipboard?.writeText(`/design:setup-ds --from-brand ${result.logoRef}`)
+                  }
+                >
+                  Copy command
+                </button>
+                <button
+                  type="button"
+                  className="btn btn--ghost btn--sm"
+                  data-testid="brand-up-again"
+                  onClick={() => {
+                    setResult(null);
+                    setErr(null);
+                  }}
+                >
+                  Upload a different file
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -870,7 +870,7 @@ function Composer({
   );
 
   return (
-    <div className="chat-composer">
+    <div className="chat-composer" data-testid="chat-composer">
       <ThreadPrimitive.If running={false}>
         {/* Context attachment chip (feature-acp-context-hardening) — the visible
             reveal of the fenced <maude-context> block the send will prepend
@@ -986,37 +986,32 @@ function Composer({
   );
 }
 
-function NotConnected({ reason, claudeMissing, readiness, readinessLoading, onRecheck }) {
+// DDR-166 T0f — the guided, button-driven cold start. Every actionable step
+// (install command, Sign in) now lives in ReadinessList itself; this shell no
+// longer carries its own terminal-instruction copy, so there's nothing here to
+// go stale relative to what the rows actually offer.
+function NotConnected({ reason, readiness, readinessLoading, onRecheck }) {
   return (
-    <div className="chat-disabled">
+    <div className="chat-disabled" data-testid="acp-not-connected">
       <span className="chat-disabled-mark">
         <Spark size={28} />
       </span>
       <div className="chat-disabled-title">AI editing isn't ready yet</div>
       <div className="chat-disabled-sub">
         {reason ? <p>{reason}</p> : null}
-        {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.
-          </p>
-        ) : (
-          <p>
-            Open a terminal, run <code>claude</code> and <code>/login</code>, then reopen this panel.
-          </p>
-        )}
+        <p>AI editing pairs with a Claude Code you have installed. Here's what it still needs:</p>
       </div>
       {readiness ? (
         <ReadinessList report={readiness} loading={readinessLoading} refresh={onRecheck} />
-      ) : null}
+      ) : (
+        <p className="chat-disabled-sub">Checking what's needed…</p>
+      )}
       <div className="chat-trust">
         <div className="chat-trust-row">
           <Check /> Runs on your Pro/Max subscription
         </div>
         <div className="chat-trust-row">
-          <Check /> No login inside Maude
+          <Check /> Signs in via Claude Code's own login — Maude never sees your credentials
         </div>
         <div className="chat-trust-row">
           <Check /> Never metered API billing
@@ -1200,25 +1195,13 @@ export default function ChatPanel({
   }, [effort]);
 
   // Availability is global (is claude installed) — a single probe, no connection.
-  const [status, setStatus] = useState({ available: null, reason: undefined, claudeMissing: false });
+  const [status, setStatus] = useState({ available: null, reason: undefined });
   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(() =>
-          setStatus({
-            available: false,
-            reason: 'Could not reach the Claude bridge.',
-            claudeMissing: false,
-          })
-        ),
+        .then((d) => setStatus({ available: d.available, reason: d.reason }))
+        .catch(() => setStatus({ available: false, reason: 'Could not reach the Claude bridge.' })),
     []
   );
   useEffect(() => {
@@ -1509,7 +1492,6 @@ export default function ChatPanel({
         {status.available === false ? (
           <NotConnected
             reason={status.reason}
-            claudeMissing={status.claudeMissing}
             readiness={readiness}
             readinessLoading={readinessLoading}
             onRecheck={recheck}

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

@@ -0,0 +1,44 @@
+// The "Watch the intro" player (DDR-166 Phase 1 / T2). Plays the bundled
+// showreel — served from Maude's OWN /_media/ route (paths.ts MEDIA_DIR,
+// DDR-045), never the served project's .design/assets/ — so it's available
+// identically whether a project is open or not. Reuses the shared help-modal
+// chrome (backdrop + header + body), same as ReadinessDialog / What's New.
+import { useEffect } from 'react';
+
+export default function IntroVideoDialog({ open, onClose }) {
+  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 help-modal--wide"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="intro-video-title"
+      >
+        <header className="help-modal-hd">
+          <span className="title" id="intro-video-title">
+            Watch the intro
+          </span>
+          <button type="button" className="help-modal-close" aria-label="Close (Esc)" onClick={onClose}>
+            ×
+          </button>
+        </header>
+        <div className="help-modal-body intro-video-body">
+          <video className="intro-video-el" src="/_media/intro.mp4" controls autoPlay playsInline />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -13,6 +13,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import ReadinessList, { useReadiness } from './ReadinessList.jsx';
+import IntroVideoDialog from './IntroVideoDialog.jsx';
 import {
   cloneRepo,
   createProject,
@@ -51,6 +52,7 @@ function Icon({ name, size = 16, className }) {
     external: (<><path d="M6 3.5H3.2A.7.7 0 0 0 2.5 4.2v8.6a.7.7 0 0 0 .7.7h8.6a.7.7 0 0 0 .7-.7V10" /><line x1="8" y1="8" x2="13" y2="3" /><polyline points="9.5 3 13 3 13 6.5" /></>),
     back: <polyline points="10 3.5 5.5 8 10 12.5" />,
     spinner: <path d="M8 2.2a5.8 5.8 0 1 0 5.8 5.8" />,
+    play: <polygon points="5 3.2 12.8 8 5 12.8" fill="currentColor" stroke="none" />,
   }[name];
   return (
     <svg className={className} width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -179,13 +181,23 @@ function AiReadiness() {
 
 // ── A · Welcome (door picker) ────────────────────────────────────────────────
 function Welcome({ onGithub, onLocal, onHub, signing, signedIn, identity }) {
+  const [introOpen, setIntroOpen] = useState(false);
   return (
     <main className="ob-main">
       <header className="ob-head">
         <span className="ob-eyebrow">Welcome</span>
         <h1>How would you like to start?</h1>
         <p>{signedIn ? `You're signed in as @${identity?.login || 'GitHub'}. Open a project, or start a new one.` : "Most people sign in with GitHub — it's the simplest way to work with a team."}</p>
+        <button
+          type="button"
+          data-testid="onboarding-watch-intro"
+          className="ob-watch-intro"
+          onClick={() => setIntroOpen(true)}
+        >
+          <Icon name="play" size={13} /> Watch the intro
+        </button>
       </header>
+      <IntroVideoDialog open={introOpen} onClose={() => setIntroOpen(false)} />
       <div className="ob-doors">
         <button type="button" data-testid="ob-door-github" className="ob-door ob-door--primary" aria-label="Continue with GitHub — recommended" onClick={onGithub} disabled={signing}>
           <span className="ob-door-icon ob-door-icon--gh"><GitHubMark size={26} /></span>