@1agh/maude 0.53.2 → 0.55.0

package/apps/studio/client/app.jsx

@@ -628,6 +628,14 @@ const STICONS = {
       <path d="M4.3 9.5v2.3a1.2 1.2 0 0 0 2.4 0v-1.7" />
     </>
   ),
+  bug: (
+    <>
+      <circle cx="8" cy="9" r="3.6" />
+      <circle cx="8" cy="4.4" r="1.3" />
+      <path d="M6.2 3.4 5.2 2M9.8 3.4l1-1.4" />
+      <path d="M4.6 7.6H2.2M4.6 9H2.2M4.6 10.6H2.5M11.4 7.6h2.4M11.4 9h2.4M11.4 10.6h2.3" />
+    </>
+  ),
   'panel-left': (
     <>
       <rect x="2.5" y="3" width="11" height="10" rx="1.5" />
@@ -2430,7 +2438,12 @@ function Sidebar({
   // affordances are absent (buttons, composer, row menus, drag & drop).
   readOnly = false,
   /** `{ dashboardUrl, projectName }` when this is a cloud tab, else null. */
-  cloud = 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,
@@ -2709,6 +2722,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)}
@@ -2832,7 +2846,7 @@ function Sidebar({
           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 />}
+      {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. */}
@@ -3622,7 +3636,12 @@ function Menubar({
   activePath,
   project,
   /** `{ dashboardUrl, projectName }` when this is a cloud tab, else null. */
-  cloud = 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,
@@ -3890,7 +3909,12 @@ 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>
@@ -4044,11 +4068,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"
@@ -4065,6 +4123,16 @@ function Menubar({
           </button>
         )}
         {exportCenter && <ExportBadge center={exportCenter} />}
+        <button
+          type="button"
+          className="st-reportbug"
+          data-testid="report-bug-toggle"
+          aria-label="Report a bug"
+          data-tip="Report a bug"
+          onClick={onReportBug}
+        >
+          <StIcon name="bug" size={15} />
+        </button>
         <button
           type="button"
           className="st-whatsnew"
@@ -4514,7 +4582,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>
@@ -4792,6 +4860,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;
@@ -8304,6 +8435,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,
@@ -8773,6 +8907,7 @@ function InspectorPanel({
       style={width ? { width, flexBasis: width } : undefined}
       aria-label="Inspector"
       data-tour="inspector"
+      data-testid={testId}
     >
       <div
         className="st-rp-tabs"
@@ -9236,7 +9371,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;
@@ -9278,13 +9424,11 @@ function App() {
           // 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.
+          // 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,
-          // 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(() => {});
@@ -9633,7 +9777,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
@@ -11006,6 +11153,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
@@ -13475,10 +13657,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.
@@ -13807,9 +13996,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) =>
@@ -13842,13 +14037,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 ?? null}
+          cloud={cfg.cloud}
           readOnly={viewerMode}
           groups={groups}
           activePath={activePath}
@@ -13903,6 +14100,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}
@@ -13983,6 +14183,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} />}
@@ -14013,7 +14214,7 @@ function App() {
           // 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}
+          cloud={cfg.cloud}
           activePath={activePath}
           project={project}
           tabsCount={tabs.length}
@@ -15013,7 +15214,7 @@ function App() {
       )}
       {settingsOpen && (
         <SettingsPanel
-          cloud={cfg?.cloud ?? null}
+          cloud={cfg.cloud}
           onClose={() => setSettingsOpen(false)}
           initialTab={typeof settingsOpen === 'string' ? settingsOpen : undefined}
           theme={theme}

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/github.js

@@ -39,6 +39,13 @@ export const openVerification = () =>
  *  Rust side host-locks it to github.com. Throws on an older desktop build without
  *  the command — callers fall back to copy-to-clipboard. */
 export const openGitHubUrl = (url) => invoke('open_github_url', { url });
+/** Open a Maude Cloud URL (device activation, share view, dashboard) in the OS
+ *  browser. Native only — `window.open` is a silent no-op in WKWebView, which is
+ *  what stranded people mid-sign-in. The Rust side zone-locks it against the
+ *  address it resolves per call, so this argument can't widen where it goes.
+ *  Throws on an older desktop build without the command — every caller must keep
+ *  a visible link the person can use by hand. */
+export const openCloudUrl = (url) => invoke('open_cloud_url', { url });
 /** Show the device code as soon as the shell has it. Returns an unlisten promise. */
 export const onDeviceCode = (cb) => listen('github://device-code', cb);
 /** Fire when sign-in completes (any surface) so other surfaces can flip live. cb(login). */