@1agh/maude 0.35.0 → 0.36.1

package/apps/studio/canvas-shell.tsx

@@ -47,6 +47,12 @@ import {
   useViewportControllerContext,
   type ViewportControllerHandle,
 } from './canvas-lib.tsx';
+import {
+  buildEditSourceRecord,
+  type EditSourceApplyFn,
+  type EditSourceOp,
+  type EditSourcePayload,
+} from './commands/edit-source-command.ts';
 import { type AlignMode, alignLabel, equalSpacingLabel } from './commands/equal-spacing-command.ts';
 import {
   ContextMenuProvider,
@@ -92,7 +98,7 @@ import {
   useSelectionSet,
 } from './use-selection-set.tsx';
 import { useToolMode } from './use-tool-mode.tsx';
-import { useUndoStack } from './use-undo-stack.tsx';
+import { useUndoSinks, useUndoStack } from './use-undo-stack.tsx';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Styles — halos render as `position: fixed` siblings of the canvas. Reading
@@ -1372,6 +1378,28 @@ function CanvasRouter({
   const annotSel = useAnnotationSelection();
   const ctxMenu = useContextMenu();
   const undoStack = useUndoStack();
+  const undoSinks = useUndoSinks();
+  // Latest undo stack, read inside long-lived listeners (text-edit dblclick)
+  // without making them a hook dependency — avoids re-binding on every undo op.
+  const undoStackRef = useRef(undoStack);
+  undoStackRef.current = undoStack;
+
+  // Phase: inline-edit undo (DDR-103/104 follow-up). Wire the `editSourceApplyFn`
+  // sink so an `edit-source` command's do()/undo() reaches the main-origin-only
+  // `/_api/edit-*` write — which the untrusted canvas iframe can't call (DDR-054).
+  // It posts `dgn:'apply-edit'` to the parent shell, which performs the write.
+  useEffect(() => {
+    const applyFn: EditSourceApplyFn = (apply) => {
+      try {
+        window.parent.postMessage({ dgn: 'apply-edit', ...apply }, '*');
+      } catch {
+        /* detached / cross-origin teardown — nothing to apply */
+      }
+    };
+    undoSinks.setSink('editSourceApplyFn', applyFn);
+    return () => undoSinks.setSink('editSourceApplyFn', undefined);
+  }, [undoSinks]);
+
   // Shell View-menu zoom bridge (dgn:'zoom') — same controller the zoom pill uses.
   const zoomController = useViewportControllerContext();
   // Shell View-menu chrome-visibility bridge (dgn:'view-chrome') — minimap /
@@ -1520,6 +1548,35 @@ function CanvasRouter({
         }
         return;
       }
+      // Inline-edit undo (DDR-103/104 follow-up). The shell's inspector posts
+      // this AFTER it has applied a CSS / attribute edit (`/_api/edit-css` /
+      // `/_api/edit-attr`), so we RECORD it onto the in-canvas undo stack
+      // (append without re-running do() — the edit already landed) and Cmd+Z
+      // can invert it. Inline TEXT edits originate in this iframe and record
+      // themselves directly (see commitEdit). PARENT-ORIGIN ONLY (DDR-054):
+      // a hostile canvas self-post must not be able to plant fake undo entries.
+      if (m.dgn === 'record-edit') {
+        if (e.source !== window.parent) return;
+        const p = (m as { payload?: Partial<EditSourcePayload> }).payload;
+        if (
+          p &&
+          (p.op === 'css' || p.op === 'text' || p.op === 'attr') &&
+          typeof p.canvas === 'string' &&
+          typeof p.id === 'string'
+        ) {
+          undoStack.record(
+            buildEditSourceRecord({
+              op: p.op as EditSourceOp,
+              canvas: p.canvas,
+              id: p.id,
+              key: typeof p.key === 'string' ? p.key : '',
+              before: typeof p.before === 'string' ? p.before : null,
+              after: typeof p.after === 'string' ? p.after : null,
+            })
+          );
+        }
+        return;
+      }
       if (m.dgn === 'request-layers') {
         postLayersTree((m as { artboardId?: string }).artboardId ?? null);
         return;
@@ -1605,11 +1662,25 @@ function CanvasRouter({
       if (text === original.trim()) return;
       const cdId = elx.getAttribute('data-cd-id');
       if (!cdId) return;
+      const file = deriveFile();
       try {
-        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file: deriveFile(), text }, '*');
+        window.parent.postMessage({ dgn: 'edit-text', id: cdId, file, text }, '*');
       } catch {
         /* detached / cross-origin */
       }
+      // Record onto the in-canvas undo stack so Cmd+Z reverts the rewrite. The
+      // edit already posted above (record, don't re-run do()). before/after are
+      // the trimmed bodies the edit-text endpoint persists.
+      undoStackRef.current.record(
+        buildEditSourceRecord({
+          op: 'text',
+          canvas: file,
+          id: cdId,
+          key: '',
+          before: original.trim(),
+          after: text,
+        })
+      );
     }
     const onDbl = (e: MouseEvent): void => {
       if (editing) return;

package/apps/studio/client/app.jsx

@@ -449,10 +449,11 @@ const STICONS = {
       <polyline points="3 12.8 3 13.6 13 13.6 13 12.8" />
     </>
   ),
+  // lucide `rotate-cw`, scaled from the 24px source into our 16px viewBox.
   reload: (
     <>
-      <path d="M3.2 8a5 5 0 1 1 1.4 3.5" />
-      <polyline points="3.2 11.4 3.2 8 6.6 8" />
+      <path d="M14 8a6 6 0 1 1-2-4.47L14 5.33" />
+      <path d="M14 2v3.33h-3.33" />
     </>
   ),
   help: (
@@ -1092,10 +1093,23 @@ function FileRow({ file, activePath, onOpen, onDelete, openCount: oc, depth, kin
   // Delete only real canvases in a deletable group (onDelete is undefined for the
   // DS group + runtime files); the server enforces the rest.
   const canDelete = isCanvas && typeof onDelete === 'function' && kind !== 'runtime';
+  // Stable hook for the desktop E2E harness (data-testid convention — see the
+  // `desktop-e2e` skill): canvas rows only, slug derived from the relative path
+  // (e.g. `ui/Smoke.tsx` → `canvas-row-ui-smoke`).
+  const testId = isCanvas
+    ? 'canvas-row-' +
+      file.path
+        .replace(/^\.[^/]+\//, '') // strip the leading designRoot dot-folder (.design/)
+        .replace(CANVAS_EXT_RE, '')
+        .replace(/[^a-z0-9]+/gi, '-')
+        .toLowerCase()
+        .replace(/^-+|-+$/g, '')
+    : undefined;
   const row = (
     <button
       type="button"
       role="treeitem"
+      data-testid={testId}
       aria-selected={isSel}
       aria-disabled={inert ? 'true' : undefined}
       tabIndex={isSel ? 0 : -1}
@@ -1383,6 +1397,8 @@ function Sidebar({
   onToggleSection,
   onNewBoard,
   onDeleteBoard,
+  onRefresh,
+  refreshing,
   collapsed,
   onCollapse,
   width,
@@ -1457,6 +1473,19 @@ function Sidebar({
           >
             <StIcon name="plus" size={15} />
           </button>
+          {onRefresh && (
+            <button
+              type="button"
+              className={'st-iconbtn st-refresh' + (refreshing ? ' is-spinning' : '')}
+              data-tip="Refresh files · ⇧⌘R"
+              aria-label="Refresh files"
+              aria-busy={refreshing || undefined}
+              disabled={refreshing}
+              onClick={() => onRefresh()}
+            >
+              <StIcon name="reload" size={15} />
+            </button>
+          )}
           <span
             className="st-live"
             data-tip={wsConnected ? 'live · file index synced' : 'reconnecting…'}
@@ -1553,7 +1582,7 @@ function Sidebar({
         </div>
       </div>
 
-      <div className="st-tree" role="tree" aria-label="Project file tree">
+      <div className="st-tree" role="tree" aria-label="Project file tree" data-testid="canvas-list">
         {filteredGroups.map((g) => {
           // Hide gitignored runtime / orphan-only project sections by default.
           // Active search overrides — if the user typed a query, they want hits
@@ -2748,6 +2777,7 @@ function Viewport({
             src={canvasUrl(t.path, cfg)}
             className={t.path === activePath ? 'active' : ''}
             data-path={t.path}
+            data-testid={t.path === activePath ? 'canvas-frame' : undefined}
             onLoad={() => onIframeLoad?.(t.path)}
             // T2 (9.1-A) — only sandbox + delegate clipboard when the canvas is
             // served cross-origin (canvasOrigin present = the split is on). In
@@ -3136,6 +3166,7 @@ function StatusBar({
             (changesCount > 0 ? ' has-changes' : unpushed > 0 ? ' has-unpushed' : '')
           }
           onClick={onOpenChanges}
+          data-testid="open-changes"
           data-tip="Open Changes · ⌘⇧G"
           data-tip-pos="top"
           aria-label="Open Changes panel"
@@ -4125,7 +4156,7 @@ function TokenPopover({ kind, groups, current, onPick, label, swatchBg, seedHex,
   );
 }
 
-function CssKnobs({ el, cfg, onOptimistic }) {
+function CssKnobs({ el, cfg, onOptimistic, onRecordEdit, onUndoRedo }) {
   const editable = !!el.id;
   const computed = el.computed || {};
   // Phase 12.3 — optimistic local overlay over the selection's authored / custom
@@ -4217,47 +4248,88 @@ function CssKnobs({ el, cfg, onOptimistic }) {
       value,
     });
   };
+  // Record an inline edit onto the canvas undo stack (Cmd+Z). The edit has
+  // already POSTed `/_api/edit-*`; the canvas iframe APPENDS the record (no
+  // re-run). `before`/`after` null = the prop/attr was/becomes unset.
+  const record = (op, key, before, after) => {
+    onRecordEdit?.({
+      op,
+      canvas: el.file,
+      id: el.id,
+      key,
+      before: before == null || before === '' ? null : before,
+      after: after == null || after === '' ? null : after,
+    });
+  };
   const commit = (property, raw) => {
     const value = (raw || '').trim();
     if (!editable || !value) return;
-    if (value === (authored[property] ?? '').trim()) return; // no-op
+    const before = authored[property] ?? null;
+    if (value === (before ?? '').trim()) return; // no-op
     optimistic(property, value);
     setA(property, value); // reflect in the panel immediately (no reload → no reselect)
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, value }, property);
+    record('css', property, before, value);
   };
   // A custom CSS property (Advanced) — same write, but the panel surfaces it from
   // the customStyles map, so overlay THERE.
   const commitCustom = (property, raw) => {
     const value = (raw || '').trim();
-    if (!editable || !property.trim() || !value) return;
-    optimistic(property.trim(), value);
-    setC(property.trim(), value);
-    post('/_api/edit-css', { canvas: el.file, id: el.id, property: property.trim(), value }, property.trim());
+    const prop = property.trim();
+    if (!editable || !prop || !value) return;
+    const before = customStyles[prop] ?? null;
+    optimistic(prop, value);
+    setC(prop, value);
+    post('/_api/edit-css', { canvas: el.file, id: el.id, property: prop, value }, prop);
+    record('css', prop, before, value);
   };
   const commitAttr = (attr, raw) => {
     const a = (attr || '').trim();
     const value = (raw || '').trim();
     if (!editable || !a || !value) return;
+    const before = attrs[a] ?? null;
     setT(a, value);
     post('/_api/edit-attr', { canvas: el.file, id: el.id, attr: a, value }, `@${a}`);
+    record('attr', a, before, value);
   };
   // Phase 12.3 — reset (remove the inline prop / attr → back to class/inherited).
   const reset = (property) => {
     if (!editable) return;
+    const before = authored[property] ?? null;
     optimistic(property, null);
     setA(property, null);
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+    record('css', property, before, null);
   };
   const resetCustom = (property) => {
     if (!editable) return;
+    const before = customStyles[property] ?? null;
     optimistic(property, null);
     setC(property, null);
     post('/_api/edit-css', { canvas: el.file, id: el.id, property, reset: true }, property);
+    record('css', property, before, null);
   };
   const resetAttr = (attr) => {
     if (!editable) return;
+    const before = attrs[attr] ?? null;
     setT(attr, null);
     post('/_api/edit-attr', { canvas: el.file, id: el.id, attr, reset: true }, `@${attr}`);
+    record('attr', attr, before, null);
+  };
+  // Cmd+Z / Cmd+Shift+Z (or Cmd+Y) inside the inspector forwards to the canvas
+  // undo stack — Figma-parity: a property field reverts the last DOCUMENT edit,
+  // not field text. Without this, an edit committed with focus still in the
+  // inspector couldn't be undone (the iframe's own keydown never sees the key).
+  const onKnobKeyDown = (e) => {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey) return;
+    const k = e.key.toLowerCase();
+    if (k === 'z') {
+      e.preventDefault();
+      onUndoRedo?.(e.shiftKey ? 'redo' : 'undo');
+    } else if (k === 'y') {
+      e.preventDefault();
+      onUndoRedo?.('redo');
+    }
   };
   // Phase 12.3 (W2.2) — Figma/Webflow scrub: drag a number field horizontally to
   // change its value. Live preview via optimistic apply on every move (no source
@@ -4695,7 +4767,7 @@ function CssKnobs({ el, cfg, onOptimistic }) {
   const attrRows = Object.entries(attrs);
 
   return (
-    <div className="st-cp" key={el.id} data-tour="css-panel">
+    <div className="st-cp" key={el.id} data-tour="css-panel" onKeyDown={onKnobKeyDown}>
       <div className="st-cp-id">
         <span className="st-cp-idtag">
           {el.tag || 'element'}
@@ -5241,6 +5313,8 @@ function InspectorPanel({
   onHoverLayer,
   cfg,
   onOptimistic,
+  onRecordEdit,
+  onUndoRedo,
   tab: tabProp,
   onTabChange,
   width,
@@ -5414,7 +5488,13 @@ function InspectorPanel({
             )}
           </>
         ) : (
-          <CssKnobs el={el} cfg={cfg} onOptimistic={onOptimistic} />
+          <CssKnobs
+            el={el}
+            cfg={cfg}
+            onOptimistic={onOptimistic}
+            onRecordEdit={onRecordEdit}
+            onUndoRedo={onUndoRedo}
+          />
         )}
       </div>
     </aside>
@@ -6303,6 +6383,50 @@ function App() {
 
   const reloadTree = useCallback(() => loadTree(), [loadTree]);
 
+  // User-facing tree refresh with a visible spin. The header button and ⌘⇧R call
+  // this so the reload icon spins for at least one beat — even when /_index-data
+  // returns instantly — so the action registers visually ("something is
+  // happening"). The min-duration race keeps the spin from flashing for one
+  // frame on a fast read; the ref guard ignores re-entrant clicks. The passive
+  // focus backstop below uses the plain reloadTree (no icon to animate).
+  const [treeRefreshing, setTreeRefreshing] = useState(false);
+  const treeRefreshingRef = useRef(false);
+  const refreshTree = useCallback(async () => {
+    if (treeRefreshingRef.current) return;
+    treeRefreshingRef.current = true;
+    setTreeRefreshing(true);
+    try {
+      await Promise.all([loadTree(), new Promise((r) => setTimeout(r, 550))]);
+    } finally {
+      treeRefreshingRef.current = false;
+      setTreeRefreshing(false);
+    }
+  }, [loadTree]);
+
+  // Backstop for the desktop sidecar: re-list the tree whenever the window
+  // regains focus. The fs-watch → canvas-list-update auto-refresh can drop
+  // events in a `bun --compile` standalone binary (recursive fs.watch is
+  // unreliable there) and across a sidecar respawn / WS reconnect, leaving a
+  // stale tree after a canvas was created from the ACP chat or a terminal.
+  // `/_index-data` is a cheap read and people tab away to the agent and back, so
+  // this turns "switch projects to force a refresh" into "just come back to the
+  // window". Debounced so a rapid blur/focus burst coalesces to one re-read.
+  useEffect(() => {
+    let t = null;
+    const onFocus = () => {
+      if (t) clearTimeout(t);
+      t = setTimeout(() => {
+        t = null;
+        reloadTree();
+      }, 150);
+    };
+    window.addEventListener('focus', onFocus);
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      if (t) clearTimeout(t);
+    };
+  }, [reloadTree]);
+
   // Phase 22 — create a blank brief board from the tree header. POSTs to the
   // main-origin-only /_api/canvas (the untrusted canvas iframe can't reach it),
   // then refreshes the tree and opens the new board so it's immediately the
@@ -6463,6 +6587,47 @@ function App() {
             if (!j.ok) console.warn('[edit-text]', j.error || 'failed');
           })
           .catch(() => {});
+      } else if (m.dgn === 'apply-edit' && m.id && (m.op === 'css' || m.op === 'text' || m.op === 'attr')) {
+        // Inline-edit undo/redo (DDR-103/104 follow-up). The canvas iframe's
+        // `edit-source` command can't call the main-origin-only `/_api/edit-*`
+        // routes (DDR-054), so it asks us to re-apply the before/after value.
+        // `value` null = reset (remove the inline prop / attr). For CSS we also
+        // optimistically repaint so the revert shows before the HMR reload.
+        const op = m.op;
+        const value = typeof m.value === 'string' ? m.value : null;
+        let url;
+        let body;
+        if (op === 'css') {
+          url = '/_api/edit-css';
+          body =
+            value == null
+              ? { canvas: m.canvas, id: m.id, property: m.key, reset: true }
+              : { canvas: m.canvas, id: m.id, property: m.key, value };
+          applyOptimisticStyle({ id: m.id, prop: m.key, value });
+        } else if (op === 'attr') {
+          url = '/_api/edit-attr';
+          body =
+            value == null
+              ? { canvas: m.canvas, id: m.id, attr: m.key, reset: true }
+              : { canvas: m.canvas, id: m.id, attr: m.key, value };
+        } else {
+          url = '/_api/edit-text';
+          body = { canvas: m.canvas, id: m.id, text: value ?? '' };
+        }
+        editApplyChainRef.current = editApplyChainRef.current
+          .catch(() => {})
+          .then(() =>
+            fetch(url, {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(body),
+            })
+              .then((r) => r.json().catch(() => ({})))
+              .then((j) => {
+                if (!j.ok) console.warn('[apply-edit]', op, j.error || 'failed');
+              })
+              .catch(() => {})
+          );
       } else if (m.dgn === 'layers-tree') {
         // Phase 12 Task 4 — browsable layers tree for the active artboard.
         setLayersTree({ artboardId: m.artboardId, nodes: Array.isArray(m.tree) ? m.tree : [] });
@@ -6716,6 +6881,28 @@ function App() {
     [activePath]
   );
 
+  // Inline-edit undo (DDR-103/104 follow-up). The inspector calls this after it
+  // POSTs `/_api/edit-css` / `/_api/edit-attr`, so the canvas iframe records the
+  // edit on its undo stack and Cmd+Z can invert it. The iframe gates this to
+  // parent-origin posts (DDR-054). See `commands/edit-source-command.ts`.
+  const recordSourceEdit = useCallback(
+    (payload) => {
+      if (!activePath || activePath === SYSTEM_TAB || !payload) return;
+      const el = iframesRef.current.get(activePath);
+      if (el && el.contentWindow) {
+        try {
+          el.contentWindow.postMessage({ dgn: 'record-edit', payload }, '*');
+        } catch {}
+      }
+    },
+    [activePath]
+  );
+
+  // Serializes `apply-edit` source writes from canvas undo/redo so a rapid
+  // multi-Cmd+Z on the same property lands on disk in dispatch order (the
+  // iframe sink is fire-and-forget, so without this the POSTs could race).
+  const editApplyChainRef = useRef(Promise.resolve());
+
   const resolveComment = useCallback((id) => {
     wsSend({ type: 'comments-patch', id, patch: { status: 'resolved' } });
   }, []);
@@ -6784,6 +6971,28 @@ function App() {
         setPaletteOpen((v) => !v);
         return;
       }
+      // Cmd+Z / Cmd+Shift+Z / Cmd+Y — forward to the active canvas's undo stack
+      // when focus is in the shell chrome (not a text field, not the canvas
+      // iframe). Inside the canvas iframe the canvas owns Cmd+Z; inside an editable
+      // field native undo wins (the inspector's CssKnobs forwards on its own). This
+      // makes inspector CSS / inline text / attr edits undoable from anywhere.
+      if (meta && !e.altKey && (e.key === 'z' || e.key === 'Z' || e.key === 'y' || e.key === 'Y')) {
+        if (!inEditable && !inCanvasIframe && activePath && activePath !== SYSTEM_TAB) {
+          e.preventDefault();
+          const redo = e.key === 'y' || e.key === 'Y' || e.shiftKey;
+          postToActiveCanvas({ dgn: redo ? 'redo' : 'undo' });
+          return;
+        }
+      }
+      // Cmd+Shift+R — refresh the FILES tree (re-read /_index-data). The fs-watch
+      // → canvas-list-update auto-refresh can miss events in the compiled desktop
+      // sidecar (recursive fs.watch is unreliable in a bun --compile binary), and
+      // ⌘R is taken by canvas-iframe reload, so this is the manual escape hatch.
+      if (meta && e.shiftKey && (e.key === 'r' || e.key === 'R')) {
+        e.preventDefault();
+        refreshTree();
+        return;
+      }
       // Cmd+R — reload active iframe (override browser reload)
       if (meta && (e.key === 'r' || e.key === 'R')) {
         e.preventDefault();
@@ -6933,6 +7142,7 @@ function App() {
     return () => window.removeEventListener('keydown', onKey);
   }, [
     reloadActive,
+    refreshTree,
     selected,
     activePath,
     focusedCommentId,
@@ -7216,6 +7426,8 @@ function App() {
             onToggleSection={toggleSection}
             onNewBoard={createBoard}
             onDeleteBoard={deleteBoard}
+            onRefresh={refreshTree}
+            refreshing={treeRefreshing}
             collapsed={!sidebarOpen}
             onCollapse={() => setSidebarOpen(false)}
             width={sbSize.w}
@@ -7300,6 +7512,8 @@ function App() {
               onTabChange={setInspectorTab}
               onClose={() => setInspectorOpen(false)}
               onOptimistic={applyOptimisticStyle}
+              onRecordEdit={recordSourceEdit}
+              onUndoRedo={(dir) => postToActiveCanvas({ dgn: dir })}
               layersTree={layersTree}
               onSelectLayer={(n) =>
                 postToActiveCanvas({

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

@@ -411,6 +411,7 @@ export default function GitPanel({
       <button
         type="button"
         className="btn btn--primary gp-publish"
+        data-testid="git-publish"
         data-tour="publish"
         disabled={!!busy}
         onClick={() =>
@@ -435,6 +436,7 @@ export default function GitPanel({
       className={'st-rpanel gp-panel' + (resizing ? ' is-resizing' : '')}
       style={width ? { width, flexBasis: width } : undefined}
       aria-label="Changes"
+      data-testid="git-panel"
     >
       <div className="gp-head">
         <div className="gp-panel-hd">
@@ -494,6 +496,7 @@ export default function GitPanel({
                   <button
                     type="button"
                     className="btn btn--sm"
+                    data-testid="git-get-latest"
                     disabled={!!busy}
                     onClick={() =>
                       run('getLatest', onGetLatest, {
@@ -559,6 +562,7 @@ export default function GitPanel({
                 <button
                   type="button"
                   className="btn btn--ghost btn--sm"
+                  data-testid="git-get-latest"
                   data-tour="pull"
                   disabled={!!busy}
                   onClick={() =>
@@ -639,6 +643,7 @@ export default function GitPanel({
               </label>
               <textarea
                 className="gp-msg"
+                data-testid="git-commit-message"
                 placeholder="Describe what changed in this version…"
                 aria-label="Describe what changed in this version"
                 rows={2}
@@ -665,6 +670,7 @@ export default function GitPanel({
                 <button
                   type="button"
                   className="btn btn--ghost btn--sm"
+                  data-testid="git-save-all"
                   disabled={!message.trim() || !!busy}
                   title="Save every change"
                   onClick={async () => {