@1agh/maude 0.53.1 → 0.54.0

package/apps/studio/client/app.jsx

@@ -2429,6 +2429,13 @@ 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. */
+  // Tri-state (see the note where this value is created): `undefined` until
+  // the server config answers, `null` for the desktop, an object for a cloud
+  // tab. Defaulting it to `null` here is what re-broke the boot 404 after the
+  // call sites were fixed — a default fires on `undefined`, so "not known yet"
+  // became "not cloud" one layer further in, invisibly.
+  cloud,
   groups,
   activePath,
   activeDsName,
@@ -2707,6 +2714,7 @@ function Sidebar({
           <StIcon name="search" size={13} />
           <input
             type="search"
+            data-testid="canvas-search"
             placeholder="Search canvases…"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
@@ -2825,7 +2833,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 /> : null}
       {/* 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 +3366,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 +3627,13 @@ function EditDropdown({ onAction, onClose, hasCanvas, readOnly = false }) {
 function Menubar({
   activePath,
   project,
+  /** `{ dashboardUrl, projectName }` when this is a cloud tab, else null. */
+  // Tri-state (see the note where this value is created): `undefined` until
+  // the server config answers, `null` for the desktop, an object for a cloud
+  // tab. Defaulting it to `null` here is what re-broke the boot 404 after the
+  // call sites were fixed — a default fires on `undefined`, so "not known yet"
+  // became "not cloud" one layer further in, invisibly.
+  cloud,
   tabsCount,
   openMenu,
   setOpenMenu,
@@ -3678,8 +3708,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 +3786,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',
@@ -3841,13 +3901,41 @@ function Menubar({
   }, [openMenu, setOpenMenu]);
 
   return (
-    <header className="st-menubar" role="menubar" aria-label="Application menubar">
+    <header
+      className="st-menubar"
+      role="menubar"
+      aria-label="Application menubar"
+      data-testid="menubar"
+    >
       <span className="st-brand" data-tour="brand">
         <span className="st-brand-mark">
           <svg viewBox="0 0 32 32" width="100%" height="100%" fill="none" aria-hidden="true"><path d="M16 5l2.8 8.2L27 16l-8.2 2.8L16 27l-2.8-8.2L5 16l8.2-2.8z" fill="currentColor" /></svg>
         </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();
@@ -3972,11 +4060,45 @@ function Menubar({
           <span
             className="st-stamp st-stamp--viewonly"
             data-testid="view-only-stamp"
-            data-tip="Your role in this project is viewer — you can browse, comment when available, and export. Ask a project owner for edit access."
+            data-tip={
+              cloud?.user
+                ? `${cloud.user} is a viewer on this project — you can browse, comment and export. Ask a project owner for edit access, or sign out if that is not the account you meant to use.`
+                : 'Your role in this project is viewer — you can browse, comment when available, and export. Ask a project owner for edit access.'
+            }
           >
             VIEW ONLY
           </span>
         )}
+        {/* Cloud Phase 27 C4 — WHO YOU ARE, AND HOW TO STOP BEING THEM.
+            A browser tab carries no account identity of its own: the cookie is
+            invisible, and the only thing on screen that reflected it was a
+            three-word stamp. An owner who read VIEW ONLY had no way to tell
+            whether the role was wrong or the ACCOUNT was, and no way to change
+            either — the session outlived any fix by up to twelve hours because
+            nothing in the studio could end it. This ends it. */}
+        {cloud?.user ? (
+          <span className="st-cloudwho" data-testid="cloud-account">
+            <span
+              className="st-cloudwho-email"
+              title={cloud.role ? `Signed in as ${cloud.user} — ${cloud.role}` : cloud.user}
+            >
+              {cloud.user}
+            </span>
+            {/* A FORM, not a link. Signing out revokes the token server-side,
+                so it is a write — and a write behind a GET is one any page can
+                force on you from across the internet. */}
+            <form method="post" action="/auth/browser/signout" className="st-cloudwho-form">
+              <button
+                type="submit"
+                className="st-cloudwho-out"
+                data-testid="cloud-signout"
+                title="Sign out of this project"
+              >
+                Sign out
+              </button>
+            </form>
+          </span>
+        ) : null}
         {isNativeApp() && !readOnly && (
           <button
             type="button"
@@ -4442,7 +4564,7 @@ function StatusBar({
   })();
 
   return (
-    <footer className="st-statusbar" role="contentinfo">
+    <footer className="st-statusbar" role="contentinfo" data-testid="statusbar">
       <span className="st-sb-slot st-sb-active" role="group" aria-label="Active file">
         <span className="lead" aria-hidden="true" />
         <span className="lbl">active</span>
@@ -4720,6 +4842,69 @@ function CommentsPanel({
 // Phase 32 (Task 1) — auto-update notice. Shown after the shell has downloaded +
 // staged a newer build in the background. Non-blocking: "Restart now" applies it,
 // "Later" dismisses (the next focus/4h check re-stages and re-surfaces it).
+/**
+ * What this role can do, said once, where a teammate lands — Cloud Phase 27 C3.
+ *
+ * A browser tab arrives with none of the context a desktop has: no window
+ * title, no app the person chose to install, and — for a viewer — a set of
+ * controls that will refuse them without explaining why. One line, dismissible,
+ * remembered per role. It re-appears if the role CHANGES, because "you can edit
+ * this now" is worth saying exactly as much as the first sentence was.
+ *
+ * Copy comes from the role the cell vouched (`role-matrix.mjs` is the authority
+ * on what each one means; this is its sentence, not a second opinion).
+ */
+const ROLE_LINE = {
+  owner: 'You own this project — edit, invite and export.',
+  member: 'You can edit this project, comment and export.',
+  viewer: 'You can look at this project, comment and download it, but not change it.',
+};
+
+function CloudRoleBanner({ cloud }) {
+  const role = cloud?.role || null;
+  // Dismissal is READ AT RENDER, not seeded into state. `cfg.cloud` is
+  // `undefined` until `/_config` lands, so a `useState` initializer runs while
+  // there is no role yet — and whatever it decided then would stick forever,
+  // which on the first attempt meant the banner never appeared at all. Found by
+  // opening it in a browser; no test in this repo would have said a word.
+  const [dismissedNow, setDismissedNow] = useState(false);
+  if (!role || dismissedNow) return null;
+  const storageKey = `maude-cloud-role-seen:${role}`;
+  let alreadySeen = false;
+  try {
+    alreadySeen = localStorage.getItem(storageKey) === '1';
+  } catch {
+    /* private mode / storage disabled — show it, saying it twice beats never */
+  }
+  if (alreadySeen) return null;
+  const line = ROLE_LINE[role];
+  if (!line) return null;
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className="st-banner st-banner--info"
+      data-testid="cloud-role-banner"
+    >
+      <span className="st-banner-dot" aria-hidden="true" />
+      <span>{line}</span>
+      <button
+        type="button"
+        className="btn btn--ghost btn--sm"
+        data-testid="cloud-role-banner-dismiss"
+        onClick={() => {
+          setDismissedNow(true);
+          try {
+            localStorage.setItem(storageKey, '1');
+          } catch {}
+        }}
+      >
+        Got it
+      </button>
+    </div>
+  );
+}
+
 function UpdateBanner({ update, onDismiss }) {
   const [restarting, setRestarting] = useState(false);
   if (!update) return null;
@@ -8232,6 +8417,9 @@ function photoAssetOfSelection(el) {
 }
 
 function InspectorPanel({
+  /** E4 — `inspector-panel` / `layers-panel`, so one parity spec can assert
+   *  both shells show them. Undefined elsewhere; the attribute simply absent. */
+  testId,
   selected,
   onClose,
   layersTree,
@@ -8701,6 +8889,7 @@ function InspectorPanel({
       style={width ? { width, flexBasis: width } : undefined}
       aria-label="Inspector"
       data-tour="inspector"
+      data-testid={testId}
     >
       <div
         className="st-rp-tabs"
@@ -9164,7 +9353,18 @@ function App() {
   // `config-updated` push (config.json hot-reload — /design:setup-ds rewrites
   // it mid-session) — informs canvasUrl() so TSX iframes can pass the right
   // ?designRel + ?tokens query to the canvas mount shell.
-  const [cfg, setCfg] = useState({ designRel: '.design' });
+  // `cloud` is deliberately TRI-STATE, and the third state is the useful one:
+  //   undefined — `/_config` has not answered yet; which shell this is is
+  //               UNKNOWN, and anything that would behave differently in the
+  //               two shells must wait rather than assume the desktop.
+  //   null      — desktop or plain local browser.
+  //   object    — a cloud tab (`{ dashboardUrl, projectName, user, role }`).
+  //
+  // Collapsing unknown into "not cloud" is what made the cloud studio open with
+  // two console 404s every time: the sign-in bar and the export centre mounted
+  // for one frame, each fired the request its shell exists to refuse, and then
+  // unmounted. Nothing was broken and everything looked broken.
+  const [cfg, setCfg] = useState({ designRel: '.design', cloud: undefined });
   // Cloud Phase 25 C2 — viewer role, known at boot from /_config. Every
   // editing affordance in the shell gates on this (absent, not hidden).
   const viewerMode = !!cfg.readOnly;
@@ -9196,6 +9396,21 @@ 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, user, role }` 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; `user`/`role` are what let
+          // it say WHICH account that tab is, and offer the way out.
+          cloud: data.cloud ?? null,
         }));
       })
       .catch(() => {});
@@ -9544,7 +9759,10 @@ function App() {
   // toggles on its own and coexists with Inspector/Changes/Comments/Chat.
   const toggleTimeline = useCallback(() => setTimelineOpen((v) => !v), []);
   const whatsNew = useWhatsNew(MDCC_VERSION);
-  const exportCenter = useExportCenter();
+  // Same tri-state rule as the sign-in bar: the export queue is a LOCAL job
+  // runner, `/_api/export-jobs` is one of the routes a cell refuses outright
+  // (DDR-209 D1), and hydrating before the shell is known 404s every boot.
+  const exportCenter = useExportCenter({ enabled: cfg.cloud === null });
   // Phase 29 (E4) — first-run onboarding wizard. The native shell boots a minimal
   // "welcome" project on first launch; we ask it whether this is a first run and, if
   // so, show the wizard OVER the (empty) canvas browser. Completing any door switches
@@ -10917,6 +11135,41 @@ function App() {
     if (path !== SYSTEM_TAB) setLoadingPath(path);
   }, []);
 
+  /**
+   * First open lands on a rendered canvas — Cloud Phase 27 C3.
+   *
+   * A desktop user chose this project, installed the app and knows what is in
+   * it; the empty state is a helpful "pick a screen". A teammate following a
+   * link has done none of that, and an empty pane with an arrow pointing at a
+   * list is the browser saying "the thing you came for is somewhere else".
+   *
+   * CLOUD ONLY, and once. The desktop's empty state is deliberately unchanged —
+   * it earns its keep there (the ⌘-hover lesson, quick setup) — and re-opening
+   * a canvas the person deliberately closed would be a UI arguing with them.
+   */
+  const autoOpened = useRef(false);
+  useEffect(() => {
+    if (autoOpened.current) return;
+    if (!cfg.cloud) return; // desktop / unknown-yet
+    if (tabs.length > 0) return;
+    if (!groups.length) return; // tree not loaded
+    // The first canvas that is somebody's WORK — a design-system specimen is a
+    // rendered canvas too, and not what a teammate followed a link to see.
+    let first = null;
+    for (const g of groups) {
+      for (const p of g.paths || []) {
+        if (!CANVAS_EXT_RE.test(p)) continue;
+        if (/(^|\/)system\//.test(p)) continue;
+        first = p;
+        break;
+      }
+      if (first) break;
+    }
+    if (!first) return;
+    autoOpened.current = true;
+    openTab(first);
+  }, [cfg.cloud, groups, tabs.length, openTab]);
+
   const openSystem = useCallback(
     (dsName) => {
       // DsFolderRow passes the clicked DS name → scope the System view to it so
@@ -13386,10 +13639,17 @@ function App() {
       }
       // Cmd+Shift+I — toggle Inspector. Was bare "I", which collided with the
       // canvas highlighter tool (same letter, different action by focus).
-      // Cloud Phase 25 C2 — absent for a viewer (the panel is edit chrome).
+      //
+      // Cloud Phase 27 C1 — a VIEWER GETS THIS TOO, and the line above used to
+      // say the opposite ("the panel is edit chrome"). C1 reversed that on
+      // purpose: read-only means cannot CHANGE, not cannot SEE, and a reviewer
+      // needs structure and measured values as much as anyone. The View menu
+      // already offers it (`viewerHiddenPanels` no longer hides it); the
+      // shortcut had been left behind, so the menu said yes and the keyboard
+      // said no. Found by writing the parity spec that runs in both shells.
       if (meta && e.shiftKey && (e.key === 'i' || e.key === 'I')) {
         e.preventDefault();
-        if (!viewerMode) toggleRightPanel('inspector');
+        toggleRightPanel('inspector');
         return;
       }
       // Phase 31 (DDR-123) — Cmd+Shift+A opens the native ACP chat sidepanel.
@@ -13718,9 +13978,15 @@ function App() {
   // assigned to it and which one is active (the open one). Layers is only a
   // dockable panel in `separate` mode; Assistant is native-only.
   const panelAvailable = (id) => {
-    // Cloud Phase 25 C2 — edit-chrome panels don't exist for a viewer: no
-    // dock tab, no shortcut, no empty slot.
-    if (viewerMode && (id === 'assistant' || id === 'inspector' || id === 'layers')) return false;
+    // The AGENT is genuinely absent for a viewer (it edits; Phase 25 C2).
+    //
+    // Inspector and Layers are NOT — Cloud Phase 27 C1 reversed that, and this
+    // line had been left behind: `viewerHiddenPanels` stopped hiding them in
+    // the View menu while this still refused to give them a dock slot, so the
+    // menu offered a panel that could never appear. Read-only means cannot
+    // CHANGE, not cannot SEE: a reviewer needs structure and measured values,
+    // which is the whole reason C1 exists.
+    if (viewerMode && id === 'assistant') return false;
     return id === 'assistant' ? isNativeApp() : id === 'layers' ? layersMode === 'separate' : true;
   };
   const idsForSide = (side) =>
@@ -13753,12 +14019,15 @@ function App() {
   // which owns the resizable width). Assistant is handled separately below as an
   // always-mounted ChatPanel so its stream survives a tab switch.
   const renderPanelBody = (id) => {
-    // Cloud Phase 25 C2 — the Inspector/Layers panels are edit chrome; a
-    // viewer's session never mounts them (absent, not hidden).
-    if (viewerMode && (id === 'inspector' || id === 'layers')) return null;
+    // C1 again, the second half of the same gate. The panels MOUNT for a
+    // viewer; what they must not do is offer an edit, and that is already
+    // handled inside them (`readOnly` is threaded through every control).
+    // Refusing to mount was a blunter instrument than the role model asks for.
+    
     if (id === 'tree')
       return (
         <Sidebar
+          cloud={cfg.cloud}
           readOnly={viewerMode}
           groups={groups}
           activePath={activePath}
@@ -13813,6 +14082,9 @@ function App() {
     if (id === 'inspector' || id === 'layers')
       return (
         <InspectorPanel
+          // Cloud Phase 27 E4 — the parity spec asserts these two panels exist
+          // in BOTH shells, so each needs a name a spec can ask for.
+          testId={id === 'layers' ? 'layers-panel' : 'inspector-panel'}
           layersOnly={id === 'layers'}
           hideLayersTab={layersMode === 'separate'}
           cpMode={cpMode}
@@ -13893,6 +14165,7 @@ function App() {
       onContextMenu={onShellContextMenu}
     >
       {firstRun && <OnboardingWizard />}
+      <CloudRoleBanner cloud={cfg.cloud} />
       <UpdateBanner update={updateReady} onDismiss={() => setUpdateReady(null)} />
       <SyncBanner status={syncStatus} />
       {!usageNudge && !tourSteps && <WhatsNewToast wn={whatsNew} />}
@@ -13920,6 +14193,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}
           activePath={activePath}
           project={project}
           tabsCount={tabs.length}
@@ -14919,6 +15196,7 @@ function App() {
       )}
       {settingsOpen && (
         <SettingsPanel
+          cloud={cfg.cloud}
           onClose={() => setSettingsOpen(false)}
           initialTab={typeof settingsOpen === 'string' ? settingsOpen : undefined}
           theme={theme}
@@ -14994,7 +15272,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/export-center.jsx

@@ -65,7 +65,14 @@ async function saveNative(id, filename) {
   return saveExport(filename || 'export', id);
 }
 
-export function useExportCenter() {
+/**
+ * @param {{ enabled?: boolean }} [opts] — `enabled` false suppresses the
+ *   hydration fetch. The cloud shell passes false: `/_api/export-jobs` is
+ *   refused there by design, so asking is guaranteed noise. It stays UNDEFINED
+ *   until `/_config` answers, and undefined is not "false" here — see the
+ *   tri-state note on `cfg.cloud`.
+ */
+export function useExportCenter({ enabled = true } = {}) {
   const [jobs, setJobs] = useState(() => new Map());
   const [panelOpen, setPanelOpen] = useState(false);
   const [toastQueue, setToastQueue] = useState([]);
@@ -77,6 +84,7 @@ export function useExportCenter() {
   const startToastShownRef = useRef(new Set()); // "Exporting…" toast fires at most once per job
 
   useEffect(() => {
+    if (!enabled) return undefined;
     let alive = true;
     fetch('/_api/export-jobs')
       .then((r) => r.json())
@@ -99,7 +107,7 @@ export function useExportCenter() {
     return () => {
       alive = false;
     };
-  }, []);
+  }, [enabled]);
 
   const upsert = useCallback((job) => {
     if (!job || typeof job.id !== 'string') return;

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,13 @@ function AppearanceTab({ theme, onSetTheme, cpMode, onSetCpMode }) {
 }
 
 export default function SettingsPanel({
+  /** `{ dashboardUrl, projectName }` when this is a cloud tab, else null. */
+  // Tri-state (see the note where this value is created): `undefined` until
+  // the server config answers, `null` for the desktop, an object for a cloud
+  // tab. Defaulting it to `null` here is what re-broke the boot 404 after the
+  // call sites were fixed — a default fires on `undefined`, so "not known yet"
+  // became "not cloud" one layer further in, invisibly.
+  cloud,
   onClose,
   initialTab,
   theme,
@@ -811,11 +830,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 +878,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 +921,7 @@ export default function SettingsPanel({
             aria-label="Settings categories"
             onKeyDown={onRailKey}
           >
-            {TABS.map((t) => (
+            {tabs.map((t) => (
               <button
                 key={t.id}
                 type="button"