@1agh/maude 0.53.0 → 0.53.2

package/apps/studio/canvas-build-worker.ts

@@ -0,0 +1,85 @@
+// The cell's canvas build, in its own process — Cloud Phase 25 A1, moved to the
+// studio by Cloud Phase 27 / DDR-209 A′2.
+//
+// WHY A SEPARATE PROCESS, AND WHY BUN.
+//
+// Phase 25 A0 decided the cell BUILDS a tenant's canvas and the member's browser
+// EVALUATES it. "Build is not evaluation" is only true if the build cannot be
+// made to do anything else, so the build runs where it can be bounded:
+//
+//   - its own process, spawned with an EMPTY environment — the derived cell
+//     secret, the project token key and the tenant's storage credentials are
+//     all env vars in the server, and none of them exist here;
+//   - a wall-clock deadline and an RSS ceiling enforced by the parent, so a
+//     pathological import graph costs one killed process, not the cell;
+//   - an import allowlist (canvas-build.ts `restrictImportsTo`), so a tenant's
+//     source can reach the runtime packages, `@maude/canvas-lib`, and its own
+//     files — and nothing else on this disk.
+//
+// WHY IT MOVED. It used to live at `apps/hub/src/canvas/build-worker.ts` and
+// import this engine across the repo. DDR-209 A′2 deletes the hub's canvas
+// implementation and runs the REAL studio in the cell, so the host has to live
+// where the route it protects lives. Nothing about the contract changed — the
+// empty env, the allowlist and the ceilings are the same ones, and
+// `scripts/check-containment.sh` still asserts every one of them.
+//
+// It runs under BUN rather than the hub's Node so the output is the SAME
+// artifact the desktop produces: same `Bun.hash`-derived `data-cd-id`s (so a
+// comment anchored in the browser resolves in the desktop and back), and the
+// same `Bun.build` bundle. The alternative — esbuild — was measured at 0.6%
+// median drift in the Phase 21 spike; identical beats measured-close, and it
+// removes a whole class of "renders differently in the browser" bug reports.
+//
+// Protocol: argv gives the design root and the canvas path; stdout carries one
+// JSON object. Nothing else is printed on the happy path, so the parent parses
+// stdout wholesale.
+
+import { join } from 'node:path';
+
+const [, , designRoot, canvasAbs] = process.argv;
+
+/**
+ * Where the build engine lives.
+ *
+ * A DYNAMIC import, not a static one, because this file runs from two very
+ * different layouts: a dev checkout (a sibling of `canvas-build.ts`) and the
+ * cell image, where the Dockerfile stages the studio source wherever it likes.
+ * `MAUDE_STUDIO_SRC` is passed through the sandbox's otherwise-empty environment
+ * on purpose — it is a path, not a secret.
+ *
+ * `import.meta.dir`, NOT `paths.ts`: this file is deliberately dependency-free
+ * so the sandboxed child imports the engine and nothing else. DDR-045's rule is
+ * about the SERVER's disk paths under `bun --compile`; the worker is never
+ * compiled — it is always run as source by an explicit `bun <path>` the parent
+ * resolved through `paths.ts` already.
+ */
+function studioDir(): string {
+  return process.env.MAUDE_STUDIO_SRC || import.meta.dir;
+}
+
+async function main() {
+  if (!designRoot || !canvasAbs) {
+    process.stdout.write(JSON.stringify({ ok: false, error: 'usage: <designRoot> <canvasAbs>' }));
+    process.exit(2);
+  }
+  const { buildCanvasModule } = await import(join(studioDir(), 'canvas-build.ts'));
+  const source = await Bun.file(canvasAbs).text();
+  const built = await buildCanvasModule(canvasAbs, source, {
+    designRoot,
+    restrictImportsTo: designRoot,
+  });
+  process.stdout.write(
+    JSON.stringify({ ok: true, js: built.js, locator: built.locator, etag: built.etag })
+  );
+}
+
+main().catch((err) => {
+  // The message is the product surface: a rejected import, a syntax error or a
+  // missing sibling all arrive here, and the person who wrote the canvas is
+  // the one who has to act on it. Bun collapses plugin throws into the build
+  // log, so the allowlist's own wording survives in `err.message`.
+  process.stdout.write(
+    JSON.stringify({ ok: false, error: String(err?.message ?? err).slice(0, 4000) })
+  );
+  process.exit(1);
+});

package/apps/studio/client/app.jsx

@@ -2429,6 +2429,8 @@ function Sidebar({
   // Cloud Phase 25 C2 — viewer role: create / delete / move / rename
   // affordances are absent (buttons, composer, row menus, drag & drop).
   readOnly = false,
+  /** `{ dashboardUrl, projectName }` when this is a cloud tab, else null. */
+  cloud = null,
   groups,
   activePath,
   activeDsName,
@@ -2825,7 +2827,12 @@ function Sidebar({
       {/* Cloud Phase 23 C3 — Maude Cloud sign-in + remote-project attach, docked
           above the GitHub identity. Dev-server-backed, so it works in the desktop
           shell AND a plain browser. */}
-      <CloudBar />
+      {/* Cloud Phase 27 — "Sign in to Maude Cloud" is an offer to do the thing
+          you have already done: you reached this tab THROUGH a Maude account.
+          Absent rather than disabled, because unlike the agent chat there is
+          nothing here to explain — the capability is not missing, it is
+          already satisfied. */}
+      {cloud ? null : <CloudBar />}
       {/* Phase 28 (E3) — GitHub identity as a compact avatar docked at the BOTTOM:
           sign in, connected account + New/Pull/Share, sign out. Self-contained
           (owns its device-code + CreateProject dialogs). Renders nothing in browser. */}
@@ -3353,11 +3360,21 @@ function ViewDropdown({ panels, onToggle, onClose, onZoom, hasCanvas }) {
           role="menuitem"
           className={'st-dd-item' + (p.checked ? ' is-on' : '')}
           aria-disabled={p.disabled ? 'true' : undefined}
+          title={p.hint || undefined}
           onClick={() => {
-            if (!p.disabled) {
-              onToggle(p.id);
-              onClose();
+            // Cloud Phase 27 C2 — a row that states an absence still has
+            // somewhere to send you. A disabled item with a `href` opens it
+            // instead of doing nothing, which is the difference between "this
+            // is not available here" and a dead button.
+            if (p.disabled) {
+              if (p.href) {
+                window.open(p.href, '_blank', 'noopener,noreferrer');
+                onClose();
+              }
+              return;
             }
+            onToggle(p.id);
+            onClose();
           }}
         >
           <span className="st-dd-lead">
@@ -3604,6 +3621,8 @@ function EditDropdown({ onAction, onClose, hasCanvas, readOnly = false }) {
 function Menubar({
   activePath,
   project,
+  /** `{ dashboardUrl, projectName }` when this is a cloud tab, else null. */
+  cloud = null,
   tabsCount,
   openMenu,
   setOpenMenu,
@@ -3678,8 +3697,19 @@ function Menubar({
     <span style={{ color: 'var(--u-fg-3)' }}>no canvas open</span>
   );
 
-  // Cloud Phase 25 C2 — panels a viewer's session doesn't have (edit chrome).
-  const viewerHiddenPanels = new Set(['assistant', 'inspector', 'layers', 'autoopen']);
+  // Cloud Phase 27 C1 — ROLE SHAPES WHAT IS OFFERED, NEVER WHAT IS VISIBLE.
+  //
+  // `inspector` and `layers` used to be on this list and should never have been.
+  // Read-only means cannot CHANGE, not cannot SEE: a reviewer needs the
+  // structure and the measured values to say anything useful, and hiding them
+  // is how a viewer's Maude became a worse Maude rather than a narrower one.
+  // What stays hidden is only what genuinely does not exist for this session —
+  // the agent chat (`assistant`, which needs a `claude` on the machine the app
+  // is running on) and auto-open (a preference for a surface you cannot edit).
+  // In the cloud the `assistant` row is the stated-absence row above, so it must
+  // NOT be filtered away here — a viewer would then get silence, which is the
+  // exact thing C2 forbids.
+  const viewerHiddenPanels = new Set(cloud ? ['autoopen'] : ['assistant', 'autoopen']);
   const panels = [
     { id: 'tree', label: 'Project Tree', shortcut: 'T', checked: sidebarOpen, disabled: false },
     {
@@ -3745,7 +3775,26 @@ function Menubar({
             disabled: false,
           },
         ]
-      : []),
+      : // Cloud Phase 27 C2 — THE AGENT'S ABSENCE IS STATED WHERE THE AGENT
+        // WOULD BE. It runs on YOUR `claude` subscription, on YOUR machine
+        // (DDR-123), so a browser tab genuinely cannot have it. That is a
+        // legitimate difference — but a menu that silently lacks an item its
+        // user has seen on the desktop reads as "the cloud one is broken", so
+        // the row stays, disabled, saying where to find it. Never a hidden
+        // item, never a dead button, never silence.
+        cloud
+        ? [
+            {
+              id: 'assistant',
+              label: 'Assistant — in the desktop app',
+              shortcut: '',
+              checked: false,
+              disabled: true,
+              href: 'https://maude.sh/download',
+              hint: 'The agent runs on your own Claude subscription, on your own machine.',
+            },
+          ]
+        : []),
     {
       id: 'annotate',
       label: 'Annotations',
@@ -3848,6 +3897,29 @@ function Menubar({
         </span>
         <span className="st-brand-name">maude</span>
       </span>
+      {/* Cloud Phase 27 C4 — THE WAY BACK OUT.
+          A browser tab has no window title and no app switcher, so a teammate
+          who followed a link has nothing telling them which project they are in
+          or how to leave it. The desktop gets both for free from the OS; the
+          cloud has to say them. This is an ADDITION to the shared client behind
+          the same `cloud` flag as C2's agent notice — never a fork of the
+          component, which is how the two shells started diverging last time. */}
+      {cloud ? (
+        <span className="st-cloudback" data-testid="cloud-back">
+          <a
+            className="st-cloudback-link"
+            href={cloud.dashboardUrl || 'https://cloud.maude.sh'}
+            title="Back to your projects"
+          >
+            ← Dashboard
+          </a>
+          {cloud.projectName ? (
+            <span className="st-cloudback-project" data-testid="cloud-project-name">
+              {cloud.projectName}
+            </span>
+          ) : null}
+        </span>
+      ) : null}
       <nav className="st-menus" aria-label="Application menus" data-tour="menus">
         {MENU_NAMES.map((name) => {
           const key = name.toLowerCase();
@@ -9196,6 +9268,23 @@ function App() {
           // decides what the UI offers; the cell (C1) and the dev-server's
           // read-only gate (http.ts) are what actually stop a write.
           readOnly: !!data.readOnly,
+          // Cloud Phase 27 (DDR-209) — the capability that opens the cookieless
+          // canvas origin. `canvasUrl()` appends it to every iframe URL. Absent
+          // on a desktop, where the canvas origin is loopback and needs none.
+          //
+          // NOTE FOR WHOEVER ADDS THE NEXT FIELD: this is an explicit
+          // projection, not a spread of `data`. A field the server starts
+          // returning does NOT arrive here until it is named — which is how
+          // both of these went missing and the cloud studio rendered without
+          // its chrome and with every canvas iframe unauthenticated.
+          canvasToken: data.canvasToken,
+          // C2/C4 — `{ dashboardUrl, projectName }` when this is a cloud tab.
+          // Its presence is what tells the shared client it is in a browser tab
+          // on somebody else's machine.
+          cloud: data.cloud ?? null,
+          // C2/C4 — `{ dashboardUrl, projectName }` when this is a cloud tab.
+          // Its presence is what tells the shared client it is in a browser tab
+          // on somebody else's machine.
         }));
       })
       .catch(() => {});
@@ -13759,6 +13848,7 @@ function App() {
     if (id === 'tree')
       return (
         <Sidebar
+          cloud={cfg?.cloud ?? null}
           readOnly={viewerMode}
           groups={groups}
           activePath={activePath}
@@ -13920,6 +14010,10 @@ function App() {
       <div className="st-shell">
         <Menubar
           readOnly={viewerMode}
+          // Cloud Phase 27 C2/C4 — the ONE cloud-only input the shared chrome
+          // takes. A prop, not the whole `cfg`: the Menubar needs to know it is
+          // in a browser tab on somebody else's machine, and nothing else.
+          cloud={cfg?.cloud ?? null}
           activePath={activePath}
           project={project}
           tabsCount={tabs.length}
@@ -14919,6 +15013,7 @@ function App() {
       )}
       {settingsOpen && (
         <SettingsPanel
+          cloud={cfg?.cloud ?? null}
           onClose={() => setSettingsOpen(false)}
           initialTab={typeof settingsOpen === 'string' ? settingsOpen : undefined}
           theme={theme}
@@ -14994,7 +15089,16 @@ function App() {
           startTour(USAGE_TOUR);
         }}
       />
-      <ReportBugDialog open={reportBugOpen} onClose={() => setReportBugOpen(false)} />
+      {/* `activeCanvas` is THIS window's truth. The server's `_active.json` is
+          global and sticky — it survives closing every tab and is written by any
+          other session (an agent driving a headless browser, a second window),
+          so a report built from it can claim a canvas the user does not have
+          open, and capture it. Pass what this client actually shows. */}
+      <ReportBugDialog
+        open={reportBugOpen}
+        activeCanvas={activePath}
+        onClose={() => setReportBugOpen(false)}
+      />
       <WhatsNewPanel wn={whatsNew} onStartTour={startTour} />
       <ExportPanel center={exportCenter} />
       <ReadinessDialog open={readinessOpen} onClose={() => setReadinessOpen(false)} />

package/apps/studio/client/canvas-url.js

@@ -41,6 +41,13 @@ export function canvasUrl(p, cfg, opts) {
   // reads this flag). Boot-static on purpose — a role is per-session, and a
   // query param can't race the way a post-load message could.
   if (cfg?.readOnly) params.set('ro', '1');
+  // Cloud Phase 27 (DDR-209) — the canvas origin's capability. On a desktop the
+  // canvas origin is loopback and needs none, so this is absent and the URL is
+  // byte-identical to before. In the cloud it is a cookieless, cross-site
+  // origin: a cookie scoped widely enough to cover it would be readable by the
+  // untrusted canvas content itself, which is the one thing the DDR-054 split
+  // exists to prevent — so the capability lives in the URL instead.
+  if (cfg?.canvasToken) params.set('t', cfg.canvasToken);
   const ds0 = cfg?.designSystems?.[0];
   // Specimen detection: anything under `system/<ds>/preview/` belongs to that
   // specific DS, so it must render with *that* DS's tokens — not always the

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

@@ -11,7 +11,7 @@
 // (st-scrim / st-dialog). Icons are local Lucide-line paths (IdentityBar
 // precedent); colors are theme tokens only (no hardcoded hex).
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
 function Icon({ name, size = 16 }) {
   const p = {
@@ -588,9 +588,21 @@ const TABS = [
   { id: 'appearance', label: 'Appearance' },
   { id: 'canvas-view', label: 'Canvas & View' },
   { id: 'layout', label: 'Layout' },
-  { id: 'ai-generation', label: 'AI generation' },
-  { id: 'subtitles', label: 'Subtitles' },
-  { id: 'video', label: 'Video' },
+  // Cloud Phase 27 — `local: true` means "this tab configures something that
+  // runs on the machine Maude is installed on". A browser tab has no ffmpeg, no
+  // mlx-vlm, no HuggingFace cache and no provider key of yours, and the routes
+  // behind these panes are refused in a cell by design (DDR-209 D1) — so in the
+  // cloud they rendered as a wall of `HTTP 404`.
+  //
+  // ABSENT, not disabled. C2 says state an absence where the thing would be,
+  // and that rule earns its keep for the agent chat: the feature exists, you
+  // just need the desktop app. These are settings for machinery that is not
+  // missing so much as inapplicable — a preference pane for hardware this shell
+  // does not have. There is nothing for the reader to act on, so a whole tab of
+  // dead controls is worse than no tab.
+  { id: 'ai-generation', label: 'AI generation', local: true },
+  { id: 'subtitles', label: 'Subtitles', local: true },
+  { id: 'video', label: 'Video', local: true },
 ];
 const SETTINGS_TAB_STORE = 'mdcc-settings-tab';
 
@@ -789,6 +801,8 @@ function AppearanceTab({ theme, onSetTheme, cpMode, onSetCpMode }) {
 }
 
 export default function SettingsPanel({
+  /** `{ dashboardUrl, projectName }` when this is a cloud tab, else null. */
+  cloud = null,
   onClose,
   initialTab,
   theme,
@@ -811,11 +825,17 @@ export default function SettingsPanel({
 }) {
   const [providers, setProviders] = useState(null); // null = loading
   const [error, setError] = useState(null);
+  // The tabs THIS shell can honour. See TABS for why the local-machine ones are
+  // absent in a browser tab rather than disabled.
+  const tabs = useMemo(() => TABS.filter((t) => !(cloud && t.local)), [cloud]);
   const [tab, setTab] = useState(() => {
-    if (initialTab && TABS.some((t) => t.id === initialTab)) return initialTab;
+    // A remembered tab that this shell does not have (you opened Video on the
+    // desktop, then opened Settings in the cloud) must not select nothing.
+    const has = (id) => TABS.some((t) => t.id === id && !(cloud && t.local));
+    if (initialTab && has(initialTab)) return initialTab;
     try {
       const v = localStorage.getItem(SETTINGS_TAB_STORE);
-      if (v && TABS.some((t) => t.id === v)) return v;
+      if (v && has(v)) return v;
     } catch {}
     return 'appearance';
   });
@@ -853,19 +873,19 @@ export default function SettingsPanel({
 
   // Vertical roving focus over the tab rail (native-menu parity).
   function onRailKey(e) {
-    const idx = TABS.findIndex((t) => t.id === tab);
+    const idx = tabs.findIndex((t) => t.id === tab);
     if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
       e.preventDefault();
-      setTab(TABS[(idx + 1) % TABS.length].id);
+      setTab(tabs[(idx + 1) % tabs.length].id);
     } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
       e.preventDefault();
-      setTab(TABS[(idx - 1 + TABS.length) % TABS.length].id);
+      setTab(tabs[(idx - 1 + tabs.length) % tabs.length].id);
     } else if (e.key === 'Home') {
       e.preventDefault();
-      setTab(TABS[0].id);
+      setTab(tabs[0].id);
     } else if (e.key === 'End') {
       e.preventDefault();
-      setTab(TABS[TABS.length - 1].id);
+      setTab(tabs[tabs.length - 1].id);
     }
   }
 
@@ -896,7 +916,7 @@ export default function SettingsPanel({
             aria-label="Settings categories"
             onKeyDown={onRailKey}
           >
-            {TABS.map((t) => (
+            {tabs.map((t) => (
               <button
                 key={t.id}
                 type="button"

package/apps/studio/client/report-bug.jsx

@@ -14,11 +14,30 @@
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import { invoke, isNativeApp, openGitHubUrl } from './github.js';
+import { invoke, isNativeApp, openGitHubUrl, pickMediaFile } from './github.js';
 
-const MAX_SHOTS = 3;
+// Two of these are auto-captured (window + artboard), so the ceiling leaves
+// room for the user to still attach their own.
+const MAX_SHOTS = 4;
 const PUBLIC_ISSUES_URL = 'https://github.com/1aGh/maude/issues/new';
 
+/** How each attached shot got here — shown per tile so the user can tell the
+ * auto-captured artboard (which never contains Maude's own chrome) apart from
+ * one they attached themselves. */
+const SHOT_LABEL = {
+  shell: 'Maude window (auto)',
+  artboard: 'Active artboard (auto)',
+  attached: 'Attached by you',
+};
+
+/** The OS window-capture shortcut, for the "a Maude UI bug needs the chrome"
+ * hint. `platform` is the node `process.platform` string from the bundle. */
+function windowShotHint(platform) {
+  if (platform === 'darwin') return '⇧⌘4 then Space';
+  if (platform === 'win32') return 'Win+Shift+S';
+  return 'your screenshot tool';
+}
+
 function randHex(n) {
   const bytes = new Uint8Array(n / 2);
   crypto.getRandomValues(bytes);
@@ -124,6 +143,7 @@ function ShotTile({ shot, redacting, onRects, onRemove }) {
           />
         ))}
       </div>
+      <div className="rb-shot-src">{SHOT_LABEL[shot.source] ?? SHOT_LABEL.attached}</div>
       <div className="rb-shot-actions">
         {shot.rects.length > 0 && (
           <button type="button" className="rb-link" onClick={() => onRects([])}>
@@ -138,11 +158,11 @@ function ShotTile({ shot, redacting, onRects, onRemove }) {
   );
 }
 
-export function ReportBugDialog({ open, onClose }) {
+export function ReportBugDialog({ open, onClose, activeCanvas = null }) {
   const [step, setStep] = useState('describe'); // describe | preview | sending | done | fallback
   const [description, setDescription] = useState('');
   const [bundle, setBundle] = useState(null);
-  const [shots, setShots] = useState([]); // {url, blob, rects:[{x,y,w,h} normalized]}
+  const [shots, setShots] = useState([]); // {url, blob, source, rects:[{x,y,w,h} normalized]}
   const [crashLogs, setCrashLogs] = useState([]); // native only: {name, firstLine}
   const [consent, setConsent] = useState({
     logTail: true,
@@ -150,6 +170,7 @@ export function ReportBugDialog({ open, onClose }) {
     projectName: false,
     crashLogs: true,
   });
+  const [shellPending, setShellPending] = useState(false);
   const [redacting, setRedacting] = useState(false);
   const [result, setResult] = useState(null); // {issueUrl, issueNumber} | {fallbackDir}
   const [error, setError] = useState(null);
@@ -161,21 +182,52 @@ export function ReportBugDialog({ open, onClose }) {
     setBundle(null);
     setShots([]);
     setCrashLogs([]);
+    setShellPending(false);
     setRedacting(false);
     setResult(null);
     setError(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shots]);
 
-  const addShotBlob = useCallback((blob) => {
+  const addShotBlob = useCallback((blob, source = 'attached') => {
     if (!blob) return;
     setShots((prev) =>
       prev.length >= MAX_SHOTS
         ? prev
-        : [...prev, { url: URL.createObjectURL(blob), blob, rects: [] }]
+        : [...prev, { url: URL.createObjectURL(blob), blob, source, rects: [] }]
     );
   }, []);
 
+  // Attach a screenshot the user took themselves — the ONLY lane that can carry
+  // Maude's own chrome (menubar, sidebar, dialogs), since the auto-capture
+  // renders the canvas headlessly and the shell is never in frame. Native
+  // WKWebView won't present a panel for an HTML <input type=file> at all, so it
+  // routes through the same Rust open-dialog the AssetPicker uses.
+  const attachScreenshot = useCallback(async () => {
+    if (isNativeApp()) {
+      try {
+        const picked = await pickMediaFile();
+        if (picked?.bytes) addShotBlob(new Blob([new Uint8Array(picked.bytes)]), 'attached');
+      } catch {
+        /* cancelled or dialog failure — paste (⌘V) still works */
+      }
+      return;
+    }
+    // Browser — imperative off-screen <input>, clicked inside the gesture
+    // (mirrors app.jsx's openFilePicker; display:none inputs don't lay out).
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.style.cssText = 'position:fixed;left:-9999px;top:0';
+    document.body.appendChild(input);
+    input.addEventListener('change', () => {
+      const file = input.files?.[0];
+      if (file) addShotBlob(file, 'attached');
+      input.remove();
+    });
+    input.click();
+  }, [addShotBlob]);
+
   // On open: pull the scrubbed bundle, capture the active artboard, list
   // native crash logs. Every leg fails soft — a report with fewer attachments
   // beats no dialog.
@@ -186,14 +238,37 @@ export function ReportBugDialog({ open, onClose }) {
       .then((r) => (r.ok ? r.json() : null))
       .then((b) => alive && setBundle(b))
       .catch(() => {});
-    fetch('/_api/export', {
+    // Artboard shot only when THIS window actually has a canvas open. The
+    // export resolves its target from the server's `_active.json`, so with
+    // nothing open it would attach a stale canvas from another session.
+    if (activeCanvas) {
+      fetch('/_api/export', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ format: 'png', scope: 'artboard' }),
+      })
+        .then((r) => (r.ok ? r.blob() : null))
+        .then((blob) => alive && blob && addShotBlob(blob, 'artboard'))
+        .catch(() => {});
+    }
+    // The window shot — Maude's own chrome, which the artboard capture above
+    // structurally cannot see. Slow (boots a headless browser, opens the canvas),
+    // so it lands second and shows a pending row meanwhile. `canvas` is sent
+    // explicitly — including as null, which means "open nothing", so an empty
+    // window is reported as an empty window.
+    setShellPending(true);
+    fetch('/_api/shell-shot', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ format: 'png', scope: 'artboard' }),
+      body: JSON.stringify({ canvas: activeCanvas }),
     })
       .then((r) => (r.ok ? r.blob() : null))
-      .then((blob) => alive && blob && addShotBlob(blob))
-      .catch(() => {});
+      .then((blob) => {
+        if (!alive) return;
+        if (blob) addShotBlob(blob, 'shell');
+        setShellPending(false);
+      })
+      .catch(() => alive && setShellPending(false));
     if (isNativeApp()) {
       invoke('list_crash_logs')
         .then((logs) => alive && setCrashLogs(Array.isArray(logs) ? logs.slice(0, 3) : []))
@@ -203,7 +278,7 @@ export function ReportBugDialog({ open, onClose }) {
       alive = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [open, activeCanvas]);
 
   // Paste-to-attach — the lane that covers native-shell bugs the canvas
   // capture can't see (user screenshots the window, pastes here).
@@ -238,7 +313,9 @@ export function ReportBugDialog({ open, onClose }) {
       },
       context: {
         projectName: consent.projectName ? (bundle?.context?.projectName ?? null) : null,
-        activeCanvas: consent.activeCanvas ? (bundle?.context?.activeCanvas ?? null) : null,
+        // This window's canvas, never the server's sticky `_active.json` — the
+        // report must not name a file the reporter does not have open.
+        activeCanvas: consent.activeCanvas ? activeCanvas : null,
       },
       description: description.trim(),
       attachments: {
@@ -385,21 +462,42 @@ export function ReportBugDialog({ open, onClose }) {
               <div className="rb-section">
                 <div className="rb-section-hd">
                   <span>Screenshots ({shots.length})</span>
-                  {shots.length > 0 && (
-                    <button
-                      type="button"
-                      className={`rb-link${redacting ? ' is-on' : ''}`}
-                      data-testid="report-bug-redact"
-                      onClick={() => setRedacting((v) => !v)}
-                    >
-                      {redacting ? 'Done redacting' : 'Redact…'}
-                    </button>
-                  )}
+                  <span className="rb-hd-actions">
+                    {shots.length < MAX_SHOTS && (
+                      <button
+                        type="button"
+                        className="rb-link"
+                        data-testid="report-bug-attach"
+                        onClick={attachScreenshot}
+                      >
+                        Attach screenshot…
+                      </button>
+                    )}
+                    {shots.length > 0 && (
+                      <button
+                        type="button"
+                        className={`rb-link${redacting ? ' is-on' : ''}`}
+                        data-testid="report-bug-redact"
+                        onClick={() => setRedacting((v) => !v)}
+                      >
+                        {redacting ? 'Done redacting' : 'Redact…'}
+                      </button>
+                    )}
+                  </span>
                 </div>
-                {shots.length === 0 ? (
-                  <p className="rb-hint">
-                    No screenshot attached. Paste one (⌘V) to add it — up to {MAX_SHOTS}.
+                <p className="rb-hint">
+                  Maude captures its own window and the active artboard for you. The window shot is
+                  a fresh render, so anything mid-flight — an open menu, a stuck spinner — won't be
+                  in it: grab that yourself ({windowShotHint(bundle?.app?.platform)}) and attach or
+                  paste (⌘V) it here.
+                </p>
+                {shellPending && (
+                  <p className="rb-hint" data-testid="report-bug-shell-pending">
+                    Capturing the Maude window…
                   </p>
+                )}
+                {shots.length === 0 && !shellPending ? (
+                  <p className="rb-hint">No screenshot attached yet — up to {MAX_SHOTS}.</p>
                 ) : (
                   <>
                     {redacting && (
@@ -421,9 +519,6 @@ export function ReportBugDialog({ open, onClose }) {
                         />
                       ))}
                     </div>
-                    {shots.length < MAX_SHOTS && (
-                      <p className="rb-hint">Paste (⌘V) to attach another screenshot.</p>
-                    )}
                   </>
                 )}
               </div>
@@ -439,7 +534,7 @@ export function ReportBugDialog({ open, onClose }) {
                     {bundle?.app?.arch ?? ''} · {isNativeApp() ? 'desktop app' : 'browser'}
                   </span>
                 </label>
-                {bundle?.context?.activeCanvas && (
+                {activeCanvas && (
                   <label className="rb-check">
                     <input
                       type="checkbox"
@@ -447,7 +542,7 @@ export function ReportBugDialog({ open, onClose }) {
                       onChange={(e) => setConsent({ ...consent, activeCanvas: e.target.checked })}
                     />
                     <span>
-                      Active canvas path — <code>{bundle.context.activeCanvas}</code>
+                      Active canvas path — <code>{activeCanvas}</code>
                     </span>
                   </label>
                 )}