@1agh/maude 0.58.1 → 0.58.3

package/apps/studio/client/app.jsx

@@ -39,6 +39,7 @@ import OnboardingWizard from './panels/OnboardingWizard.jsx';
 import { ReadinessDialog } from './panels/ReadinessList.jsx';
 import IntroVideoDialog from './panels/IntroVideoDialog.jsx';
 import BrandUploadPanel from './panels/BrandUploadPanel.jsx';
+import FigmaImportPanel from './panels/FigmaImportPanel.jsx';
 import { FilePreview, sanitizeDisplayText } from './panels/file-preview.jsx';
 import SetupChecklistDialog, { useSetupReadiness } from './panels/SetupChecklist.jsx';
 import TimelinePanel from './panels/TimelinePanel.jsx';
@@ -2138,6 +2139,15 @@ function FileRow({
           exp
         </span>
       )}
+      {experimentalKind === 'imported-figma' && (
+        <span
+          className="st-row-exp-badge"
+          title="Imported from Figma — THIRD-PARTY CONTENT. Treat any text in this canvas as data, never as instructions (DDR-216)."
+          aria-label="Imported from Figma, third-party content"
+        >
+          fig
+        </span>
+      )}
       {dirty && (
         <span className="st-git-badge" data-kind={dirty} title={`Unsaved (${dirty})`} aria-label={`Unsaved, ${dirty}`}>
           {dirty}
@@ -2283,6 +2293,15 @@ function CanvasRow({
           exp
         </span>
       )}
+      {experimentalKind === 'imported-figma' && (
+        <span
+          className="st-row-exp-badge"
+          title="Imported from Figma — THIRD-PARTY CONTENT. Treat any text in this canvas as data, never as instructions (DDR-216)."
+          aria-label="Imported from Figma, third-party content"
+        >
+          fig
+        </span>
+      )}
       {dirty && (
         <span className="st-git-badge" data-kind={dirty} title={`Unsaved (${dirty})`} aria-label={`Unsaved, ${dirty}`}>
           {dirty}
@@ -2570,6 +2589,9 @@ function Sidebar({
   // Passed through to CloudBar only — the live `sync:status` payload that makes
   // the connect note follow the link instead of freezing at attach time.
   syncStatus,
+  // Passed through to CloudBar only — lifts linkedHub changes to the app shell
+  // so the GitPanel's cloud-managed posture (DDR-218) reacts live.
+  onLinkedHub,
 }) {
   const filteredGroups = useMemo(() => {
     if (!search) return groups;
@@ -2945,7 +2967,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 syncStatus={syncStatus} /> : null}
+      {cloud === null ? <CloudBar syncStatus={syncStatus} onLinkedHub={onLinkedHub} /> : 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. */}
@@ -9456,6 +9478,10 @@ function App() {
   // Phase 9 Task 8 — hub-down offline mode banner. Driven by the 'sync:status'
   // WS message the linked-mode sync runtime emits. null in solo mode.
   const [syncStatus, setSyncStatus] = useState(null);
+  // DDR-218 — the folder's cloud link ({url, credentialed} | null), lifted from
+  // CloudBar (status resolve / attach / detach). Gates the GitPanel's
+  // cloud-managed posture; linked-but-uncredentialed keeps the full panel.
+  const [cloudLinkedHub, setCloudLinkedHub] = useState(null);
   // Phase 27 (E2) — in-UI git layer. `gitStatus` is the live dirty-state the
   // server broadcasts on `git-status`; `changesOpen` toggles the Changes panel;
   // `diffTarget` opens the before/after DiffView ({ file, conflict }).
@@ -9658,6 +9684,7 @@ function App() {
   const [introOpen, setIntroOpen] = useState(false);
   const [quickSetupOpen, setQuickSetupOpen] = useState(false);
   const [brandUploadOpen, setBrandUploadOpen] = useState(false);
+  const [figmaImportOpen, setFigmaImportOpen] = useState(false);
   // DDR-166 plan, Phase 2 (T7) — the persistent "Setup" affordance in the empty
   // canvas state (below) only renders while the project's own setup (design
   // system / first canvas / brand assets) is incomplete; native-only concern.
@@ -11794,13 +11821,23 @@ function App() {
 
   // ----- Inbound messages from iframes -----
   useEffect(() => {
+    // Does this comment id belong to the canvas the user is actually looking
+    // at? Scopes the patch/delete relays below — see the SECURITY note there.
+    //
+    // The leading `!!activePath` is load-bearing, not defensive noise: with no
+    // active canvas the branches' `activeWin` is `null`, and `e.source` is also
+    // `null` for a message whose source context was discarded before dispatch —
+    // so `e.source === activeWin` can pass as `null === null`. This is the
+    // second conjunct that closes that path. Don't "simplify" it away.
+    const ownsActiveComment = (id) =>
+      !!activePath && (commentsByFile[activePath] || []).some((c) => c && c.id === id);
     function onMessage(e) {
       // Cross-origin hardening (DDR-054): only accept dgn control messages from
       // the canvas-content origin — the split origin when on, else our own origin
       // for the same-origin iframe. Drops spoofed messages from any other window.
-      // The handlers below relay to inert stores (comments / selection — the
-      // "safe to sync" set), so the blast radius was small, but unchecked inbound
-      // postMessage is a confused-deputy seam the F1 hardening should close.
+      // Every canvas iframe shares that origin, so the check below proves only
+      // "a canvas said this", NOT "the canvas the user is looking at said it" —
+      // each mutating branch additionally gates on `e.source === activeWin`.
       const expectedOrigin = cfg?.canvasOrigin || window.location.origin;
       if (e.origin !== expectedOrigin) return;
       const m = e.data;
@@ -12408,13 +12445,26 @@ function App() {
         // Phase 6 — iframe overlay finished composing. Relay through the
         // existing WS `comments-add` channel; server-side persistence +
         // broadcast back are identical to the legacy shell-composer flow.
+        //
+        // SECURITY — gated on `activeWin` and PINNED to `activePath`, the same
+        // shape as every other mutating branch in this handler. The origin
+        // check at the top passes for EVERY canvas iframe (they all share
+        // `canvasOrigin`), so without this a canvas sitting in a BACKGROUND
+        // tab could post comments onto any file it cared to name, with no user
+        // gesture. This handler's preamble waived that on the grounds that
+        // comments are an "inert store" — the ACP panel's one-click
+        // "Implement N comments" action retires that premise, because open
+        // comments are now a feed the agent acts on. `p.file` is ignored
+        // rather than validated: the active canvas is the only file the user
+        // can actually see themselves commenting on.
         const p = m.payload;
         const txt = String(p.text).trim();
-        if (txt) {
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && txt && activePath && activePath !== SYSTEM_TAB) {
           wsSend({
             type: 'comments-add',
             payload: {
-              file: p.file,
+              file: activePath,
               selector: p.selector,
               index: p.index,
               dom_path: p.dom_path,
@@ -12428,10 +12478,21 @@ function App() {
         }
       } else if (m.dgn === 'comment-patch' && m.id && m.patch && typeof m.patch === 'object') {
         // Phase 6 — thread popover routes resolve / reopen through here.
-        wsSend({ type: 'comments-patch', id: m.id, patch: m.patch });
+        // SECURITY — same gate as comment-submit, plus an ownership check: a
+        // bare id would otherwise reach ANY comment in the project. Patch and
+        // delete change or remove somebody else's note, which is exactly why
+        // ws.ts refuses both for a viewer session; the iframe lane needs the
+        // matching restriction.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && ownsActiveComment(m.id)) {
+          wsSend({ type: 'comments-patch', id: m.id, patch: m.patch });
+        }
       } else if (m.dgn === 'comment-delete' && m.id) {
-        wsSend({ type: 'comments-delete', id: m.id });
-        setFocusedCommentId((prev) => (prev === m.id ? null : prev));
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin && ownsActiveComment(m.id)) {
+          wsSend({ type: 'comments-delete', id: m.id });
+          setFocusedCommentId((prev) => (prev === m.id ? null : prev));
+        }
       } else if (m.dgn === 'comment-click' && m.id) {
         setFocusedCommentId(m.id);
       } else if (m.dgn === 'artboards' && typeof m.count === 'number') {
@@ -12518,27 +12579,48 @@ function App() {
       } else if (m.dgn === 'shell-shortcut') {
         // Same forwarding lane for the other shell chords (inspect.ts) — so
         // ⌘R / ⌘⇧I / ⌘⇧M / ⌘⇧E / ⌘⇧H behave identically wherever focus is.
-        if (m.id === 'reload') reloadActive();
-        else if (m.id === 'inspector') toggleRightPanel('inspector');
-        else if (m.id === 'assistant' && isNativeApp()) toggleRightPanel('assistant');
-        else if (m.id === 'comments') toggleRightPanel('comments');
-        else if (m.id === 'changes') toggleRightPanel('changes');
-        else if (m.id === 'timeline') toggleTimeline();
-        else if (m.id === 'export') setExportDialog({ mode: 'export' });
-        else if (m.id === 'handoff') setExportDialog({ mode: 'handoff' });
+        //
+        // SECURITY — every one of these is a chord the user pressed INSIDE the
+        // canvas they are looking at, so it gets the same `activeWin` gate as
+        // its siblings. Ungated, a background canvas could reload the active
+        // file out from under an edit or pop the Export/Handoff dialog on
+        // demand — a modal-timing primitive, and the mirror image of the
+        // present-enter branch that was already hardened against modal HIDING.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin) {
+          if (m.id === 'reload') reloadActive();
+          else if (m.id === 'inspector') toggleRightPanel('inspector');
+          else if (m.id === 'assistant' && isNativeApp()) toggleRightPanel('assistant');
+          else if (m.id === 'comments') toggleRightPanel('comments');
+          else if (m.id === 'changes') toggleRightPanel('changes');
+          else if (m.id === 'timeline') toggleTimeline();
+          else if (m.id === 'export') setExportDialog({ mode: 'export' });
+          else if (m.id === 'handoff') setExportDialog({ mode: 'handoff' });
+        }
       } else if (m.dgn === 'open-export') {
         // Plan C — the in-canvas toolbar / context menu route here so they open
         // the SAME shell Export dialog as the menubar (one look, all settings).
         // Carry the context-menu's scope hint (e.g. "Export selection").
-        setExportDialog({
-          mode: 'export',
-          scope: m.detail && typeof m.detail.scope === 'string' ? m.detail.scope : undefined,
-        });
+        //
+        // SECURITY — gated with `shell-shortcut` above rather than separately:
+        // both reach the same `setExportDialog`, so leaving this one open would
+        // hand back the capability the other now refuses.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin) {
+          setExportDialog({
+            mode: 'export',
+            scope: m.detail && typeof m.detail.scope === 'string' ? m.detail.scope : undefined,
+          });
+        }
       } else if (m.dgn === 'open-timeline-request') {
         // Artboard-chrome context menu's "Open Timeline" (video-comp artboards
         // only). Scope the Timeline to the right-clicked artboard, then open it.
-        if (typeof m.artboardId === 'string') setCanvasActiveArtboard(m.artboardId.slice(0, 120));
-        setTimelineOpen(true);
+        // SECURITY — same class: a context-menu action from the canvas in view.
+        const activeWin = activePath ? iframesRef.current.get(activePath)?.contentWindow : null;
+        if (e.source === activeWin) {
+          if (typeof m.artboardId === 'string') setCanvasActiveArtboard(m.artboardId.slice(0, 120));
+          setTimelineOpen(true);
+        }
       } else if (m.dgn === 'loaded' && m.file) {
         // iframe finished loading — drop the compile skeleton, push current
         // comments + carry over focused pin if any
@@ -14190,6 +14272,12 @@ function App() {
     (panelSide[id] || PANEL_SIDES_DEFAULTS[id]) === 'left' ? dragSide === 'sb' : dragSide === 'rp';
   const activeCanvasFile =
     activePath && activePath !== SYSTEM_TAB && /\.(tsx|html)$/i.test(activePath) ? activePath : null;
+  // Issue #74 — drives the chat panel's "Implement N comments" quick action.
+  // Canvas-wide on purpose: the verb operates on every open comment of the
+  // active canvas, so it is deliberately NOT scoped to the current selection.
+  const activeOpenComments = activeCanvasFile
+    ? openCount(commentsByFile[activeCanvasFile])
+    : 0;
 
   // Render a panel body by id (width undefined ⇒ fills the .st-dockslot wrapper,
   // which owns the resizable width). Assistant is handled separately below as an
@@ -14236,6 +14324,7 @@ function App() {
           onGetLatest={gitGetLatest}
           canvasKinds={cfg?.canvasKinds}
           syncStatus={syncStatus}
+          onLinkedHub={setCloudLinkedHub}
         />
       );
     if (id === 'changes')
@@ -14258,6 +14347,14 @@ function App() {
           // server-side (`projectReadOnly`, the manifest's role matrix), and
           // they are unchanged by this flag.
           historyOnly={!!cfg.cloud}
+          // DDR-218 (fix 8) — the DESKTOP half of the same withdrawal: a repo
+          // linked+credentialed to Maude Cloud is cloud-managed (the cell
+          // commits every edit as it lands), so the local Changes surface is
+          // the second save mechanism the sync RCA's user was confused by.
+          // Live: CloudBar lifts every link change (resolve/attach/detach)
+          // into `cloudLinkedHub`. Same presentation-not-a-control rule as
+          // `historyOnly` above; Disconnect restores the panel in place.
+          cloudManaged={!cfg.cloud && !!cloudLinkedHub?.credentialed}
           resizing={resizingFor('changes')}
           onClose={() => setChangesOpen(false)}
           onCommit={gitCommit}
@@ -14512,6 +14609,7 @@ function App() {
                   hidden={leftActive !== 'assistant'}
                   activeCanvas={activeCanvasFile}
                   selected={selected}
+                  openComments={activeOpenComments}
                   designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
                   resizing={resizingFor('assistant')}
                   onClose={() => setAssistantOpen(false)}
@@ -14586,6 +14684,7 @@ function App() {
                   hidden={rightActive !== 'assistant'}
                   activeCanvas={activeCanvasFile}
                   selected={selected}
+                  openComments={activeOpenComments}
                   designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
                   resizing={resizingFor('assistant')}
                   onClose={() => setAssistantOpen(false)}
@@ -15496,8 +15595,15 @@ function App() {
         onClose={() => setQuickSetupOpen(false)}
         onStartTour={() => startTour(QUICK_SETUP_TOUR)}
         onBringBrand={() => setBrandUploadOpen(true)}
+        onImportFigma={() => setFigmaImportOpen(true)}
       />
       <BrandUploadPanel open={brandUploadOpen} onClose={() => setBrandUploadOpen(false)} />
+      {figmaImportOpen && (
+        <FigmaImportPanel
+          onClose={() => setFigmaImportOpen(false)}
+          onImported={() => loadTree()}
+        />
+      )}
       {usageNudge && !tourSteps && !collabNudge && (
         <div className="mdcc-tour-nudge" role="status" aria-live="polite">
           <div className="mdcc-tour-nudge__body">

package/apps/studio/client/export-center.jsx

@@ -293,6 +293,10 @@ function etaLabel(job) {
 }
 
 function StatusPill({ job }) {
+  // A degraded export is `done` — the file is real — but it is NOT clean, and a
+  // plain "Ready" pill is exactly how a muted mp4 shipped unnoticed for four
+  // attempts (RCA issue-mp4-audio-export-html5audio-silent-degrade).
+  const degraded = job.status === 'done' && !!job.degraded;
   const statusText =
     job.status === 'queued'
       ? 'Queued'
@@ -301,17 +305,43 @@ function StatusPill({ job }) {
           ? `${job.progress.current} of ${job.progress.total}`
           : 'Rendering…'
         : job.status === 'done'
-          ? 'Ready'
+          ? degraded && job.degraded.audioDropped
+            ? 'Ready · no audio'
+            : degraded
+              ? 'Ready · degraded'
+              : 'Ready'
           : 'Failed';
   const eta = job.status === 'running' ? etaLabel(job) : null;
   return (
-    <span className={`st-export-pill st-export-pill--${job.status}`}>
+    <span
+      className={`st-export-pill st-export-pill--${job.status}${
+        degraded ? ' st-export-pill--degraded' : ''
+      }`}
+    >
       {statusText}
       {eta ? ` · ${eta}` : ''}
     </span>
   );
 }
 
+/**
+ * The "your file is missing something" row. Rendered on a `done` job that came
+ * back degraded — in the panel row and in the completion toast, because the
+ * whole failure mode of this bug was that neither surface said anything.
+ */
+function DegradedNote({ degraded }) {
+  if (!degraded) return null;
+  return (
+    <div className="st-export-degraded" data-testid="export-degraded-note">
+      <span aria-hidden="true">⚠</span>{' '}
+      {degraded.audioDropped
+        ? 'Exported without audio.'
+        : 'Exported with reduced fidelity.'}
+      {degraded.remedy ? <div className="st-export-degraded__fix">{degraded.remedy}</div> : null}
+    </div>
+  );
+}
+
 export function ExportBadge({ center }) {
   const busy = center.busyCount > 0;
   return (
@@ -350,8 +380,14 @@ export function ExportToast({ center }) {
         ×
       </button>
       <div className="st-toast-hd">
-        <span aria-hidden="true">{pending ? '⋯' : ok ? '⬇' : '⚠'}</span>
-        {pending ? 'Exporting…' : ok ? 'Export ready' : 'Export failed'}
+        <span aria-hidden="true">{pending ? '⋯' : ok && !job.degraded ? '⬇' : '⚠'}</span>
+        {pending
+          ? 'Exporting…'
+          : ok
+            ? job.degraded
+              ? 'Export ready — with a problem'
+              : 'Export ready'
+            : 'Export failed'}
       </div>
       <div className="st-toast-title">{jobLabel(job)}</div>
       {pending ? (
@@ -364,6 +400,7 @@ export function ExportToast({ center }) {
           {ok ? (job.filename ?? 'Ready to download.') : (job.error ?? 'Something went wrong.')}
         </div>
       )}
+      {ok && <DegradedNote degraded={job.degraded} />}
       {ok && (
         <div className="st-toast-actions">
           <button
@@ -437,6 +474,7 @@ export function ExportPanel({ center }) {
                   {(job.status === 'queued' || job.status === 'running') && (
                     <ProgressBar progress={job.progress} />
                   )}
+                  {job.status === 'done' && <DegradedNote degraded={job.degraded} />}
                   {job.status === 'done' && (
                     <div className="st-export-item__ft">
                       <span className="st-export-item__filename">{job.filename}</span>

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

@@ -1058,9 +1058,29 @@ function ChatEmpty() {
   );
 }
 
-function QuickActions() {
+function QuickActions({ openComments = 0 }) {
   return (
     <div className="chat-quick">
+      {/* Issue #74 — the reporter asked for a button that IMPLEMENTS the
+          comments they already dropped on the canvas, not one that adds a new
+          one. `/design:edit` already owns the whole behaviour (edit.md §3: a
+          generic feedback string + open comments → iterate each as a scoped
+          edit, resolve each after it lands), so this is purely a shortcut to
+          the phrasing that triggers it. Shown only when there IS something to
+          implement — a permanently-disabled verb would just be noise.
+          Prefill, never fire blind: same rule as QUICK_ACTIONS above, so the
+          user can narrow the ask ("…but skip the one about the colour")
+          before sending. */}
+      {openComments > 0 ? (
+        <ThreadPrimitive.Suggestion
+          prompt="/design:edit fix open comments"
+          send={false}
+          className="btn btn--ghost btn--sm chat-qa chat-qa--comments"
+          data-testid="chat-qa-implement-comments"
+        >
+          {`✓ Implement ${openComments} comment${openComments === 1 ? '' : 's'}`}
+        </ThreadPrimitive.Suggestion>
+      ) : null}
       {QUICK_ACTIONS.map((a) => (
         <ThreadPrimitive.Suggestion
           key={a.label}
@@ -1495,6 +1515,7 @@ function ChatThread({
   activeCanvas,
   selected,
   designRel,
+  openComments,
   transcriptView,
   onSetTranscriptView,
   onPermissionRequest,
@@ -1735,7 +1756,7 @@ function ChatThread({
           ) : (
             <ErrorCard error={turnError} onRetry={retryLastTurn} />
           )}
-          <QuickActions />
+          <QuickActions openComments={openComments} />
           <Composer
             activeCanvas={activeCanvas}
             chatCtx={ctxDismissed ? null : chatCtx}
@@ -1766,6 +1787,7 @@ export default function ChatPanel({
   activeCanvas,
   selected,
   designRel,
+  openComments = 0,
   width,
   resizing,
   onClose,
@@ -2288,6 +2310,7 @@ export default function ChatPanel({
                 activeCanvas={activeCanvas}
                 selected={selected}
                 designRel={designRel}
+                openComments={openComments}
                 transcriptView={transcriptView}
                 onSetTranscriptView={setTranscriptView}
                 onPermissionRequest={onPermissionRequest}

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

@@ -189,6 +189,34 @@ function projectFromHubUrl(hubUrl, cloudHost) {
   return norm(host.slice(0, -(cloudHost.length + 1)).replace(/^view-/, ''));
 }
 
+/**
+ * Is this project row the one THIS folder is already linked to?
+ *
+ * Fix 7 of the 2026-08-10 sync RCA: every row used to render the same
+ * `Connect <name>` button, including the project this folder was already
+ * syncing with — the UI lying about an established link. Only a CREDENTIALED
+ * link counts (the `linkedHub` half alone comes from a committed config.json —
+ * attacker-authorable, B2), so a linked-but-uncredentialed row still offers
+ * Connect: it genuinely needs the sign-in.
+ *
+ * Addresses inside the configured cloud zone compare by the project label they
+ * carry (`projectFromHubUrl`, NFKD-folded like the platform); addresses that
+ * carry none (self-hosts, e2e stubs at `http://127.0.0.1:<port>`) fall back to
+ * an exact origin match, so two stubs on different ports never collapse.
+ */
+export function isLinkedProjectRow({ projectUrl, linkedHubUrl, linkedHubCredentialed, cloudUrl }) {
+  if (!linkedHubUrl || !linkedHubCredentialed) return false;
+  const cloudHost = hostOf(cloudUrl);
+  const linked = projectFromHubUrl(linkedHubUrl, cloudHost);
+  const row = projectFromHubUrl(projectUrl, cloudHost);
+  if (linked && row) return linked === row;
+  try {
+    return new URL(String(projectUrl)).origin === new URL(String(linkedHubUrl)).origin;
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Does this folder look like the cloud project a link is naming?
  *
@@ -326,6 +354,7 @@ function Spark({ size = 15 }) {
 function Icon({ name, size = 15 }) {
   const p = {
     'chevron-up': <polyline points="3.5 10 8 5.5 12.5 10" />,
+    check: <polyline points="3 8.5 6.5 12 13 4.5" />,
     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" />
@@ -369,7 +398,11 @@ function Icon({ name, size = 15 }) {
   );
 }
 
-export default function CloudBar({ syncStatus }) {
+// `onLinkedHub` lifts the resolved link state to the app shell (DDR-218): the
+// GitPanel's cloud-managed posture turns on the same `linkedHub.credentialed`
+// fact this panel's Connected row does, and CloudBar owns every action that
+// changes it (status resolve, attach, detach) — so it reports, the app decides.
+export default function CloudBar({ syncStatus, onLinkedHub }) {
   const [state, setState] = useState('loading'); // loading | out | in
   const [email, setEmail] = useState(null);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -417,6 +450,7 @@ export default function CloudBar({ syncStatus }) {
           linkedHub: r.json?.linkedHub ?? null,
           resolved: true,
         });
+        onLinkedHub?.(r.json?.linkedHub ?? null);
         if (r.ok && r.json?.connected) {
           setEmail(r.json.email);
           setState('in');
@@ -476,11 +510,22 @@ export default function CloudBar({ syncStatus }) {
     setPending(null);
     if (r.ok && r.json?.ok) {
       setConnected({ project: r.json.project ?? pending.project, sync: r.json.sync });
+      adoptLink(r.json.url);
     } else {
       setError(r.json?.error || 'The workspace could not be connected.');
     }
   }
 
+  // A successful attach IS a credentialed link — mirror it into `local` so the
+  // project list flips to Connected without a second status fetch (the server
+  // just wrote both halves: linkedHub in config.json + the hub credential).
+  function adoptLink(url) {
+    if (typeof url === 'string' && url) {
+      setLocal((l) => ({ ...l, linkedHub: { url, credentialed: true } }));
+      onLinkedHub?.({ url, credentialed: true });
+    }
+  }
+
   // Escape answers the decision modal the same way the scrim does: Not now.
   // Declining must always be the cheap move — the dashboard re-mints a code on
   // the next "Open in Maude".
@@ -562,12 +607,29 @@ export default function CloudBar({ syncStatus }) {
     setBusy('');
     if (r.ok && r.json?.ok) {
       setConnected({ project: r.json.project ?? projectId, sync: r.json.sync });
+      adoptLink(r.json.url);
     } else {
       setError(r.json?.error || 'The workspace could not be connected.');
     }
     setMenuOpen(false);
   }
 
+  /** The in-app `maude design unlink` — drops the link AND stops syncing now. */
+  async function disconnect() {
+    setBusy('disconnect');
+    setError('');
+    const r = await api('/_api/cloud/detach', { method: 'POST' });
+    setBusy('');
+    setMenuOpen(false);
+    if (r.ok && r.json?.ok) {
+      setLocal((l) => ({ ...l, linkedHub: null }));
+      setConnected(null);
+      onLinkedHub?.(null);
+    } else {
+      setError(r.json?.error || 'The workspace could not be disconnected.');
+    }
+  }
+
   async function signOut() {
     setMenuOpen(false);
     await api('/_api/cloud/signout', { method: 'POST' });
@@ -801,6 +863,35 @@ export default function CloudBar({ syncStatus }) {
                       <Icon name="external" size={15} /> View {p.name || p.id} in the browser
                       <span className="gi-menu-login" style={{ marginLeft: 'auto' }}>viewer</span>
                     </button>
+                  ) : isLinkedProjectRow({
+                      projectUrl: p.url,
+                      linkedHubUrl: local.linkedHub?.url,
+                      linkedHubCredentialed: local.linkedHub?.credentialed,
+                      cloudUrl,
+                    }) ? (
+                    // The project this folder is ALREADY linked to. Connected is
+                    // a state, not an action — the one action left is leaving.
+                    // (Same wrapper shape as the "Loading projects…" row; the
+                    // button is the focusable menu entry.)
+                    <div
+                      key={p.id}
+                      className="gi-menu-item is-connected"
+                      data-testid={`cloud-project-${p.id}`}
+                    >
+                      <Icon name="check" size={15} /> {p.name || p.id}
+                      <span className="gi-menu-login" style={{ marginLeft: 'auto' }}>Connected</span>
+                      <button
+                        type="button"
+                        className="btn btn--ghost btn--sm"
+                        role="menuitem"
+                        disabled={busy === 'disconnect'}
+                        onClick={disconnect}
+                        aria-label={`Disconnect this folder from ${p.name || p.id}`}
+                        data-testid={`cloud-disconnect-${p.id}`}
+                      >
+                        {busy === 'disconnect' ? 'Disconnecting…' : 'Disconnect'}
+                      </button>
+                    </div>
                   ) : (
                     <button
                       key={p.id}