@1agh/maude 0.56.0 → 0.58.0

package/apps/studio/api.ts

@@ -117,6 +117,33 @@ export const SKIP_DIRS = new Set([
 ]);
 const HIDDEN_OK = new Set(['.ai', '.claude', '.design']);
 
+// feature-studio-file-preview — binary/media extensions the tree lists so a
+// DS's assets/{fonts,graphics,logos,photos,...} files show up (previously
+// only their parent folders did, via findFiles's dirsOut accounting). Kept as
+// an explicit enumerated list rather than a broad pattern so it can never
+// accidentally widen to swallow runtime JSON — findFiles already excludes
+// `_`-prefixed entries before this list is even consulted.
+const PREVIEW_ASSET_EXTS = [
+  '.svg',
+  '.png',
+  '.jpg',
+  '.jpeg',
+  '.gif',
+  '.webp',
+  '.avif',
+  '.woff',
+  '.woff2',
+  '.ttf',
+  '.otf',
+  '.mp4',
+  '.webm',
+  '.mov',
+  '.mp3',
+  '.wav',
+  '.ogg',
+  '.m4a',
+];
+
 // ---------- File tree ----------
 
 /**
@@ -181,7 +208,31 @@ async function findFiles(
     if (e.isDirectory()) {
       dirsOut?.push(rel);
       out.push(...(await findFiles(full, rel, exts, dirsOut)));
-    } else if (exts.some((x) => e.name.toLowerCase().endsWith(x))) out.push(rel);
+    } else if (e.isFile() && exts.some((x) => e.name.toLowerCase().endsWith(x))) {
+      // feature-studio-file-preview security review — `e.isFile()` (not just
+      // "not a directory") excludes symlinks: a symlink Dirent is neither
+      // isDirectory() nor isFile(), so without this check a symlink dropped
+      // into an assets/ folder (e.g. pointing at ~/.ssh/id_rsa, named to fit
+      // an allowlisted extension) would be listed and, since this feature
+      // makes every listed row one-click-fetchable, served straight into the
+      // preview panel.
+      //
+      // A HARDLINK survives `isFile()` (hardlinks are, by design, ordinary
+      // files — same inode, indistinguishable from the "original" at the
+      // Dirent level), so it needs a second check: `nlink > 1` means this
+      // directory entry shares its inode with at least one other name
+      // somewhere on the filesystem. A design system's own assets are never
+      // legitimately multiply-linked, so excluding them closes the same
+      // one-click-disclosure path for a hardlink planted at, say, a
+      // teammate's readable dotfile.
+      try {
+        const st = await lstat(full);
+        if (st.nlink > 1) continue;
+      } catch {
+        continue;
+      }
+      out.push(rel);
+    }
   }
   return out;
 }
@@ -5268,15 +5319,29 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
       const isDs = g.label === 'Design system' || /^system(\/|$)/.test(g.path);
       // Always include canvas sidecars (`.meta.json`, `.css`, `.registry.json`)
       // so the client can nest them under their primary `.tsx` / `.html`. DS
-      // groups additionally surface `.md` for README + SKILL docs.
+      // groups additionally surface `.md` for README + SKILL docs, plus
+      // PREVIEW_ASSET_EXTS (images/fonts/video/audio) so assets/ subfolders
+      // list their files instead of rendering as permanently-empty tree nodes
+      // (feature-studio-file-preview) — click-time behavior lives client-side
+      // in FileRow's previewKind() branch.
       // feature-file-tree-drag-drop-folders (Task 6) — `dirs` accumulates
       // every directory in this group (incl. empty ones) via the SAME
       // traversal, so a freshly `mkdir`'d folder with no files yet is still
       // representable in the tree.
       const dirs: string[] = [];
       const filePaths = isDs
-        ? await findFiles(groupAbs, groupRel, ['.tsx', '.html', '.md', '.css', '.json'], dirs)
-        : await findFiles(groupAbs, groupRel, ['.tsx', '.html', '.css', '.json'], dirs);
+        ? await findFiles(
+            groupAbs,
+            groupRel,
+            ['.tsx', '.html', '.md', '.css', '.json', ...PREVIEW_ASSET_EXTS],
+            dirs
+          )
+        : await findFiles(
+            groupAbs,
+            groupRel,
+            ['.tsx', '.html', '.css', '.json', ...PREVIEW_ASSET_EXTS],
+            dirs
+          );
       // DDR-093 — record each `.tsx` canvas's design system. canvasUrl() only
       // injects tokens for `.tsx`, so skip everything else. Path-owned DS wins
       // (system/<ds>/…); otherwise the sidecar's `meta.designSystem`, defaulting

package/apps/studio/build.ts

@@ -24,7 +24,6 @@ import { browserslistToTargets, bundle as lcssBundle } from 'lightningcss';
 import { cloudStubPlugin } from './cloud-build.ts';
 
 const ROOT = dirname(fileURLToPath(import.meta.url));
-const DIST = join(ROOT, 'dist');
 
 const ARGS = new Set(process.argv.slice(2));
 const FLAG_TARGET = process.argv.find((a) => a.startsWith('--target='))?.slice('--target='.length);
@@ -33,6 +32,34 @@ const MODE: 'dev' | 'release' | 'dry' = ARGS.has('--dry-run')
   : ARGS.has('--release')
     ? 'release'
     : 'dev';
+
+// DEV-ONLY override, so a test can build somewhere disposable.
+//
+// `test/bundle-smoke.test.ts` shells out to this script to prove the bundle
+// still parses — and, until this existed, wrote its unminified DEV output
+// straight over the COMMITTED release artifacts (14 MB where 2 MB ships). What
+// is committed is what ships, so a suite run silently staged a broken release.
+// CLAUDE.md recorded this as "observed, root cause unconfirmed"; it is this.
+//
+// REFUSED OUTSIDE DEV, and that guard is the whole point of the variable being
+// safe. DIST is the write target for every artifact — client bundle, styles,
+// dist/runtime/*, and the compiled server binary. One environment variable
+// reaching a release runner would send all of them to a scratch directory, exit
+// 0 with normal-looking size lines, and leave packaging to ship the COMMITTED
+// artifacts instead. `check-runtime-bundles.sh` would validate those stale
+// files and pass; `check-client-boots.mjs` would boot them and pass. Every gate
+// green, nothing built actually shipped — a silent downgrade primitive with no
+// diff and no red CI. This repo's doctrine is "what is committed is what ships"
+// AND "verify the built artifact"; an unguarded override severs the two.
+if (process.env.MAUDE_DIST_DIR && MODE !== 'dev') {
+  console.error(
+    `[build] MAUDE_DIST_DIR is a dev/test-only override and must not be set for a --${MODE} build.\n` +
+      `        Refusing to build: a release that writes elsewhere ships the previously committed\n` +
+      `        artifacts while every packaging gate stays green.`
+  );
+  process.exit(2);
+}
+const DIST = process.env.MAUDE_DIST_DIR || join(ROOT, 'dist');
 const WATCH = ARGS.has('--watch');
 /** Cloud Phase 27 D1 — build the CELL's variant (secret-bearing surfaces
  *  removed from the binary, not merely un-routed). `--cloud` with `--release`. */

package/apps/studio/client/app.jsx

@@ -21,6 +21,11 @@ import { GRID_KEYWORD_UNITS, parseTrackList, serializeTrackList } from '../grid-
 // canvas-cursors.ts above.
 import { PAPER_PRESETS, resolvePrintArtboard } from '../print/units.ts';
 import { sizingModeOf, sizingModePatch } from '../sizing-mode.ts';
+// The single "what is the hub link doing" rule, shared with the cloud rail's
+// connect note so the two surfaces can never disagree. Pure data + strings —
+// same "pull only pure logic into the client bundle" shape as the imports
+// above (a type-only SyncStatusSnapshot import that Bun erases).
+import { syncPresentation } from '../sync/presentation.ts';
 import { canvasUrl } from './canvas-url.js';
 import { TreeRowMenu, useRowMenu } from './tree-row-menu.jsx';
 import { useTreeDrag } from './use-tree-drag.js';
@@ -33,6 +38,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 { FilePreview, sanitizeDisplayText } from './panels/file-preview.jsx';
 import SetupChecklistDialog, { useSetupReadiness } from './panels/SetupChecklist.jsx';
 import TimelinePanel from './panels/TimelinePanel.jsx';
 import { parseCompTimeline } from './panels/timeline-parse.js';
@@ -77,6 +83,7 @@ const Lu = ({ as: C, size = 14 }) => <C size={size} strokeWidth={1.75} style={{
 import { PhotoKnobs } from './photo-knobs.jsx';
 import {
   appIsFirstRun,
+  invoke,
   isNativeApp,
   onMenuReportBug,
   onUpdateReady,
@@ -183,6 +190,23 @@ function DockSlot({ side, width, open, ids, activeId, onPick, children, labels =
   );
 }
 const CANVAS_EXT_RE = /\.(tsx|html?)$/i;
+// feature-studio-file-preview — classifies a non-canvas tree row so FileRow
+// can open an inline preview instead of the old inert no-op. Kept in sync
+// with apps/studio/api.ts's PREVIEW_ASSET_EXTS (server won't list anything
+// outside this set anyway, but the client stays explicit rather than
+// assuming server-side filtering).
+const PREVIEW_KIND_RULES = [
+  [/\.md$/i, 'markdown'],
+  [/\.(css|json|txt|ya?ml)$/i, 'text'],
+  [/\.(svg|png|jpe?g|gif|webp|avif)$/i, 'image'],
+  [/\.(mp4|webm|mov)$/i, 'video'],
+  [/\.(mp3|wav|ogg|m4a)$/i, 'audio'],
+  [/\.(woff2?|ttf|otf)$/i, 'font'],
+];
+function previewKind(name) {
+  for (const [re, kind] of PREVIEW_KIND_RULES) if (re.test(name)) return kind;
+  return null;
+}
 // Shared testid-slug derivation (desktop-e2e skill convention: kebab-case,
 // designRoot-stripped, extension-stripped) — mirrors FileRow's inline
 // `canvas-row-<slug>` computation so DirRow / the row-menu trigger use the
@@ -203,14 +227,30 @@ const MDCC_VERSION = typeof __MDCC_VERSION__ !== 'undefined' ? __MDCC_VERSION__
 // handleAssistantAttention below (identical support/permission check +
 // try/catch, only the title/body differ). The in-app badge stays the
 // reliable signal if this silently fails for any reason.
+//
+// feature-acp-turn-notifications Task 6 — under Tauri, route through the
+// native `send_notification` command (notify.rs) instead of the Web `Notification` API.
+// This is the SAME native notifier the shell's cross-project poller uses for
+// every OTHER project, so the visible project now goes through the identical
+// OS-level path rather than a webview API whose behavior inside WKWebView was
+// never empirically confirmed (see Task 1's finding in the plan). Falls back
+// to the Web API on any failure — an older desktop build without the command,
+// or a plain browser tab — so the signal degrades rather than disappearing.
 function notifyDesktop(title, body) {
-  try {
-    if (typeof Notification !== 'undefined' && Notification.permission === 'granted') {
-      new Notification(title, { body });
+  const webFallback = () => {
+    try {
+      if (typeof Notification !== 'undefined' && Notification.permission === 'granted') {
+        new Notification(title, { body });
+      }
+    } catch {
+      /* best-effort — the in-app badge is the reliable signal */
     }
-  } catch {
-    /* best-effort — the in-app badge is the reliable signal */
+  };
+  if (isNativeApp()) {
+    invoke('send_notification', { title, body }).catch(webFallback);
+    return;
   }
+  webFallback();
 }
 
 function readInitialTheme() {
@@ -2002,7 +2042,9 @@ function DsFolderRow({ name, dsName, depth, defaultOpen, active, onOpenSystem, c
 function FileRow({
   file,
   activePath,
+  previewPath,
   onOpen,
+  onPreview,
   onDelete,
   openCount: oc,
   depth,
@@ -2013,12 +2055,20 @@ function FileRow({
   drag,
   menu,
 }) {
-  const isSel = file.path === activePath;
+  // feature-studio-file-preview (a11y fix) — a previewed row must expose
+  // aria-selected too, or a screen-reader user gets no confirmation their
+  // click did anything (a11y-auditor finding: state never changed).
+  const isSel = file.path === activePath || file.path === previewPath;
   const isCanvas = CANVAS_EXT_RE.test(file.name);
-  // Non-canvas rows (PROJECT *.md, RUNTIME _active.json, ...) are display-only —
-  // clicking them doesn't open an iframe; we leave the click as no-op + cursor
-  // hint via `aria-disabled`.
-  const inert = !isCanvas;
+  // feature-studio-file-preview — RUNTIME rows (_active.json, _server.json, …)
+  // stay inert no matter their extension: they're gitignored process state,
+  // never user-facing content, and must not become previewable just because
+  // `.json` also matches the `text` preview kind (DDR-115 exclusion).
+  const pKind = !isCanvas && kind !== 'runtime' ? previewKind(file.name) : null;
+  // Non-canvas, non-previewable rows (RUNTIME files, unrecognized extensions)
+  // are display-only — clicking them doesn't open anything; we leave the
+  // click as no-op + cursor hint via `aria-disabled`.
+  const inert = !isCanvas && !pKind;
   const label = isCanvas ? displayName(file.name) : file.name;
   // Delete only real canvases in a deletable group (onDelete is undefined for the
   // DS group + runtime files); the server enforces the rest.
@@ -2065,7 +2115,8 @@ function FileRow({
       style={{ paddingLeft: TREE_INDENT_BASE + depth * TREE_INDENT_STEP + 'px' }}
       title={file.path + (oc ? ` — ${oc} open` : inert ? ' (file index only)' : '')}
       onClick={() => {
-        if (!inert) onOpen(file.path);
+        if (isCanvas) onOpen(file.path);
+        else if (pKind) onPreview?.(file.path);
       }}
       onContextMenu={
         canMove ? (e) => menu.openAt(e, { kind: 'file', path: file.path, dir: fileDir }) : undefined
@@ -2136,7 +2187,9 @@ function CanvasRow({
   depth,
   kind,
   activePath,
+  previewPath,
   onOpen,
+  onPreview,
   onDelete,
   openCount: oc,
   showHidden,
@@ -2160,7 +2213,9 @@ function CanvasRow({
       <FileRow
         file={primary}
         activePath={activePath}
+        previewPath={previewPath}
         onOpen={onOpen}
+        onPreview={onPreview}
         onDelete={onDelete}
         openCount={oc}
         depth={depth}
@@ -2260,7 +2315,9 @@ function CanvasRow({
             key={sc.path}
             file={sc}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             openCount={0}
             depth={depth + 1}
             kind={kind}
@@ -2274,7 +2331,9 @@ function CanvasRow({
 function Tree({
   node,
   activePath,
+  previewPath,
   onOpen,
+  onPreview,
   commentsByFile,
   depth = 1,
   kind,
@@ -2302,8 +2361,20 @@ function Tree({
   const files = node._files || [];
   // VS Code-style sidecar grouping. Canvas (`.tsx`/`.html`) becomes the primary
   // row; same-basename non-canvas files (`.meta.json`, `.css`, …) collapse
-  // under it. Orphans surface only when `showHidden` is on.
+  // under it. Meta/doc orphans (README.md, tokens.css, …) surface only when
+  // `showHidden` is on; media/asset orphans (images, fonts, video, audio —
+  // feature-studio-file-preview) are content the user asked to see by
+  // default, not sidecar noise, so they always render.
   const { canvases, orphans } = useMemo(() => groupBySidecar(files), [files]);
+  const { mediaOrphans, metaOrphans } = useMemo(() => {
+    const media = [];
+    const meta = [];
+    for (const entry of orphans) {
+      const k = previewKind(entry.primary.name);
+      (k === 'image' || k === 'video' || k === 'audio' || k === 'font' ? media : meta).push(entry);
+    }
+    return { mediaOrphans: media, metaOrphans: meta };
+  }, [orphans]);
   const hasSearch = !!(search && search.trim());
   // DS-folder lookup: only meaningful at the top level of a DS group. The
   // server emits `dsFolders: [{name, folder}, ...]` so the client knows which
@@ -2329,7 +2400,9 @@ function Tree({
             primary={entry.primary}
             sidecars={entry.sidecars}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             onDelete={onDelete}
             openCount={openCount(commentsByFile[entry.primary.path])}
             depth={depth}
@@ -2343,13 +2416,28 @@ function Tree({
           />
         );
       })}
+      {mediaOrphans.map((entry) => (
+        <FileRow
+          key={entry.primary.path}
+          file={entry.primary}
+          activePath={activePath}
+          previewPath={previewPath}
+          onOpen={onOpen}
+          onPreview={onPreview}
+          openCount={openCount(commentsByFile[entry.primary.path])}
+          depth={depth}
+          kind={kind}
+        />
+      ))}
       {showHidden &&
-        orphans.map((entry) => (
+        metaOrphans.map((entry) => (
           <FileRow
             key={entry.primary.path}
             file={entry.primary}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             openCount={openCount(commentsByFile[entry.primary.path])}
             depth={depth}
             kind={kind}
@@ -2363,7 +2451,9 @@ function Tree({
           <Tree
             node={node[d]}
             activePath={activePath}
+            previewPath={previewPath}
             onOpen={onOpen}
+            onPreview={onPreview}
             commentsByFile={commentsByFile}
             depth={depth + 1}
             kind={kind}
@@ -2446,8 +2536,10 @@ function Sidebar({
   cloud,
   groups,
   activePath,
+  previewPath,
   activeDsName,
   onOpen,
+  onPreview,
   onOpenSystem,
   wsConnected,
   search,
@@ -2473,6 +2565,9 @@ function Sidebar({
   onMoveCanvas,
   onNewFolder,
   onDeleteFolder,
+  // 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,
 }) {
   const filteredGroups = useMemo(() => {
     if (!search) return groups;
@@ -2804,7 +2899,9 @@ function Sidebar({
                   <Tree
                     node={g.tree}
                     activePath={activePath}
+                    previewPath={previewPath}
                     onOpen={onOpen}
+                    onPreview={onPreview}
                     commentsByFile={commentsByFile}
                     depth={1}
                     kind={g.kind}
@@ -2846,7 +2943,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 /> : null}
+      {cloud === null ? <CloudBar syncStatus={syncStatus} /> : 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. */}
@@ -4180,10 +4277,38 @@ function Viewport({
   onIframeLoad,
   showQuickSetup,
   onStartQuickSetup,
+  previewPath,
 }) {
+  // feature-studio-file-preview (a11y fix) — a11y-auditor found the preview
+  // overlay gave keyboard/AT users no signal anything happened: the click
+  // stayed on the (unrelated) tree row, nothing was announced, and the
+  // scrollable region itself wasn't in the tab order. Moving focus onto the
+  // region on open covers all three: it's a real focus change (AT announces
+  // the new `role="region"` + its label), and a focused element with
+  // `overflow: auto` is keyboard-scrollable (arrow/Page keys) without a
+  // separate tabIndex fix.
+  const previewRef = useRef(null);
+  useEffect(() => {
+    if (previewPath) previewRef.current?.focus();
+  }, [previewPath]);
   return (
     <div className="viewport st-stage" data-tour="viewport">
-      {tabs.length === 0 && (
+      {previewPath && (
+        // feature-studio-file-preview — an overlay, not a tab: the canvas
+        // iframe (if any) stays mounted underneath so switching back to it
+        // is instant and never remounts. previewPath is intentionally never
+        // written into `tabs`/`activePath` (see App()'s onPreview).
+        <div
+          ref={previewRef}
+          className="st-file-preview-overlay"
+          role="region"
+          aria-label={`Preview: ${sanitizeDisplayText(basename(previewPath))}`}
+          tabIndex={0}
+        >
+          <FilePreview path={previewPath} kind={previewKind(basename(previewPath))} />
+        </div>
+      )}
+      {tabs.length === 0 && !previewPath && (
         <div className="st-empty">
           <div className="st-empty-brand">
             <span className="st-brand-mark">
@@ -4537,10 +4662,12 @@ function StatusBar({
   onToggleTheme,
   onClearSelected,
   syncStatus,
+  syncProject,
   changesCount = 0,
   unpushed = 0,
   changesOpen = false,
   onOpenChanges,
+  version,
 }) {
   const isSystem = activePath === SYSTEM_TAB;
   const text =
@@ -4559,32 +4686,21 @@ function StatusBar({
   // shapes: solo `{linked:false}` (hide), DDR-060 `{notSyncable,tsxCount,reason}`
   // (linked but 0 syncable), or the connection-state machine `{state,queuedOps,
   // flash,…}` (the common linked case the old notSyncable-only guard never
-  // showed — the "hub sync se neukazuje" bug). Map each to a label + dot tone.
+  // showed — the "hub sync se neukazuje" bug).
+  //
+  // The mapping used to live here, and it referenced `docs` ZERO times: it read
+  // `state` alone, so a link whose every document the hub had refused still
+  // showed a green dot and the word "synced". `syncPresentation` is now the one
+  // rule, shared with the cloud rail's connect note, so the two surfaces cannot
+  // give a person different answers about the same payload.
   const syncSlot = (() => {
-    if (!syncStatus || syncStatus.linked === false) return null;
-    if (syncStatus.notSyncable) {
-      return {
-        online: false,
-        label: `0 syncable${syncStatus.tsxCount > 0 ? ` · ${syncStatus.tsxCount} tsx` : ''}`,
-        title: syncStatus.reason || 'Linked to a hub, but no canvases are syncable.',
-      };
-    }
-    const q = syncStatus.queuedOps ?? 0;
-    const synced = syncStatus.state === 'online' || syncStatus.flash === 'synced';
-    if (synced) {
-      return {
-        online: true,
-        label: q > 0 ? `${q} ↑` : 'synced',
-        title: q > 0 ? `${q} edit(s) queued to push` : 'All changes synced to the hub',
-      };
-    }
+    const p = syncPresentation(syncStatus, { project: syncProject });
+    if (!p) return null;
+    const detail = p.names.length ? ` (${p.names.join(', ')})` : '';
     return {
-      online: false,
-      label: `${q} ↑`,
-      title:
-        syncStatus.state === 'connecting'
-          ? 'Connecting to the hub…'
-          : 'Offline — edits queued, will sync when the hub reconnects',
+      online: p.online,
+      label: p.label,
+      title: `${p.title}${detail}${p.next ? ` — ${p.next}` : ''}`,
     };
   })();
 
@@ -4675,6 +4791,19 @@ function StatusBar({
         </span>
       )}
 
+      {/* Which release this is. Reading it used to mean probing production by
+          hand — and the desktop, the browser and a cloud tab all serve the same
+          client, so one slot covers all three. Absent on an older server that
+          omits `version` from /_config, exactly as `cloud` and `canvasToken`
+          already are. */}
+      {version && (
+        <span className="st-sb-slot st-sb-version" role="group" aria-label="Maude version">
+          <span className="val" data-testid="statusbar-version">
+            v{version}
+          </span>
+        </span>
+      )}
+
       <button
         type="button"
         className="st-sb-theme"
@@ -9161,6 +9290,14 @@ function App() {
   const [project, setProject] = useState('Design');
   const [tabs, setTabs] = useState([]);
   const [activePath, setActivePath] = useState(null);
+  // feature-studio-file-preview — deliberately separate from `tabs`/
+  // `activePath`: a previewed file was never a canvas, so it must never
+  // trigger the WS `active`/`tabs` broadcasts, the compile-skeleton loading
+  // state, or iframe registration that openTab()/openSystem() drive.
+  const [previewPath, setPreviewPath] = useState(null);
+  const onPreview = useCallback((path) => {
+    setPreviewPath(path);
+  }, []);
   const [selected, setSelected] = useState(null);
   // Phase 12.3 — latest selection, readable from the (stale-closure) onMessage
   // handler so an HMR reload (triggered by a CSS/attr edit) can re-select the
@@ -9431,6 +9568,10 @@ function App() {
           // both of these went missing and the cloud studio rendered without
           // its chrome and with every canvas iframe unauthenticated.
           canvasToken: data.canvasToken,
+          // Which release this server is — rendered as the status-bar chip.
+          // Undefined on a server too old to report it, which is why the chip
+          // renders conditionally rather than printing `vundefined`.
+          version: data.version,
           // 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
@@ -11155,6 +11296,7 @@ function App() {
     });
     setActivePath(path);
     setFocusedCommentId(null);
+    setPreviewPath(null);
     // Canvas-compile skeleton — cleared by the iframe's dgn:'loaded' message,
     // the onLoad fallback timer (legacy .html), or a hard 15s cap.
     if (path !== SYSTEM_TAB) setLoadingPath(path);
@@ -14061,8 +14203,10 @@ function App() {
           readOnly={viewerMode}
           groups={groups}
           activePath={activePath}
+          previewPath={previewPath}
           activeDsName={activePath === SYSTEM_TAB ? (systemData?.ds?.name ?? null) : null}
           onOpen={openTab}
+          onPreview={onPreview}
           onOpenSystem={openSystem}
           wsConnected={wsConnected}
           search={search}
@@ -14087,6 +14231,7 @@ function App() {
           remoteSync={remoteSync}
           onGetLatest={gitGetLatest}
           canvasKinds={cfg?.canvasKinds}
+          syncStatus={syncStatus}
         />
       );
     if (id === 'changes')
@@ -14403,6 +14548,7 @@ function App() {
                 isNativeApp() && !viewerMode && !!setupReadiness && !setupReadiness.ready
               }
               onStartQuickSetup={() => setQuickSetupOpen(true)}
+              previewPath={previewPath}
             />
           </div>
           {rightActive && (
@@ -15147,10 +15293,12 @@ function App() {
           onToggleTheme={toggleTheme}
           onClearSelected={clearSelected}
           syncStatus={syncStatus}
+          syncProject={cfg?.cloud?.projectName || project}
           changesCount={unsavedCount}
           unpushed={gitStatus?.unpushed || 0}
           changesOpen={changesOpen}
           onOpenChanges={gitStatus?.repo ? () => setChangesOpen(true) : undefined}
+          version={cfg?.version}
         />
       </div>
       {presentMode && (

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

@@ -1855,6 +1855,11 @@ export default function ChatPanel({
   const connsRef = useRef(new Map()); // chatId → connection
   const busyRef = useRef(new Map()); // chatId → busy (aggregated for the menubar)
   const hydratedRef = useRef(new Map()); // chatId → initial messages
+  // chatId → the transcript LINE the hydration above covered (the
+  // `X-Maude-Chat-Seq` response header). Handed to the connection's `attach`
+  // so the server replays only what the client missed — Addendum Task 8's
+  // re-attach seam. Absent/0 for a chat that was never hydrated (a new chat).
+  const hydratedSeqRef = useRef(new Map());
   const [openChatIds, setOpenChatIds] = useState([]);
   const [activeChatId, setActiveChatId] = useState(null);
   const [busyChats, setBusyChats] = useState({}); // reactive: chatId → busy (for the dot)
@@ -1872,6 +1877,13 @@ export default function ChatPanel({
       const existing = connsRef.current.get(chatId);
       if (existing) return existing;
       const conn = createAcpConnection();
+      // Addendum Task 8 — bind BEFORE anything can open the socket. The `attach`
+      // frame goes out from `onopen` and is what subscribes this socket to the
+      // chat's server-side bridge (which now outlives its socket, so it may
+      // already be mid-turn from before a reload). `hydratedSeqRef` holds the
+      // transcript line the history fetch covered, so the server replays exactly
+      // the gap — no duplicated tail, no hole.
+      conn.bindChat(chatId, hydratedSeqRef.current.get(chatId) || 0);
       connsRef.current.set(chatId, conn);
       // Agent-generated title (session_info_update — fires at turn-end, so a
       // fresh chat shows the client's "New chat" heuristic until the first
@@ -1949,7 +1961,12 @@ export default function ChatPanel({
         return;
       }
       fetch(`/_api/acp/chat?id=${encodeURIComponent(id)}`)
-        .then((r) => r.json())
+        .then(async (r) => {
+          // Capture the seam marker alongside the body — see hydratedSeqRef.
+          const seq = Number(r.headers.get('X-Maude-Chat-Seq') || 0);
+          hydratedSeqRef.current.set(id, Number.isFinite(seq) ? seq : 0);
+          return r.json();
+        })
         .then((msgs) => openChat(id, toThreadMessages(msgs)))
         .catch(() => {});
     },
@@ -1965,6 +1982,7 @@ export default function ChatPanel({
       connsRef.current.delete(id);
       busyRef.current.delete(id);
       hydratedRef.current.delete(id);
+      hydratedSeqRef.current.delete(id);
       setBusyChats((prev) => {
         const next = { ...prev };
         delete next[id];