@1agh/maude 0.30.0 → 0.32.0

package/apps/studio/client/styles/_index.css

@@ -30,4 +30,6 @@
 @import url('./4-components-maude.css');
 /* Plan B — maude redesign of remaining legacy shell surfaces (HelpModal, tour, what's-new, SystemView, CommentBar). */
 @import url('./5-maude-overrides.css');
+/* Phase 31 (DDR-123) — ACP chat sidepanel (chat-* inside the Assistant st-rpanel). */
+@import url('./6-acp-chat.css');
 @import url('./5-utilities.css');

package/apps/studio/client/tour/collab-tour.js

@@ -0,0 +1,61 @@
+// collab-tour.js — the version-control "rychlý kurz" (Phase 29, epic E4).
+//
+// Teaches the two-layer collab model on the EXISTING tour engine (overlay.jsx) —
+// never a fork. Per the teaching-model DDR (this phase REVERSES the "hide the
+// duality" recommendation in collab-model-design.md § Part 2): we surface a visible
+// three-verb action-cycle and teach the live-vs-async split honestly, because the
+// cycle has to match real buttons in the app and pure-hiding is leaky.
+//
+// Step 1 is a centered, target-less step whose graphic is the two-layer infographic
+// (the engine already centers target-less steps; the `render` field is the only
+// addition). Steps 2-4 spotlight the real action controls via stable [data-tour]
+// anchors (save-local / publish / pull) — `changes: true` opens the Changes panel
+// first so the buttons exist. Step 5 points at the live presence layer; step 6 is
+// the one honest hard thing, centered.
+//
+// Vocabulary is the canonical set ONLY (teaching-model table) — no raw git terms:
+//   Save changes locally · Publish for everyone · Pull changes · Draft · Shared version.
+
+import CollabModelInfographic from '../panels/CollabModelInfographic.jsx';
+
+export const COLLAB_TOUR = [
+  {
+    // Centered, no target — the engine renders target-less steps centered, and the
+    // `render` field draws the infographic above the copy.
+    render: CollabModelInfographic,
+    title: 'Working together, in one picture',
+    body: 'There are two layers. Up top, being together just happens. Below, your work moves through three simple steps. Let’s walk them.',
+  },
+  {
+    target: "[data-tour='save-local']",
+    changes: true,
+    title: 'Save changes locally',
+    body: 'When something looks right, save it. That keeps a version on your computer you can always come back to — like a checkpoint, just for you.',
+    placement: 'left',
+  },
+  {
+    target: "[data-tour='publish']",
+    changes: true,
+    title: 'Publish for everyone',
+    body: 'Ready to share? Publish sends your saved work to the whole team. Think of it as putting your version on the shared shelf.',
+    placement: 'left',
+  },
+  {
+    target: "[data-tour='pull']",
+    changes: true,
+    title: 'Pull changes',
+    body: 'When teammates publish, Pull brings their work onto your computer so you’re both looking at the same thing.',
+    placement: 'left',
+  },
+  {
+    target: "[data-tour='status']",
+    title: 'Being together is automatic',
+    body: 'Cursors, who’s here, and comments need no buttons at all. When you’re both in a canvas, you see each other live — that’s the top layer, always on.',
+    placement: 'bottom',
+  },
+  {
+    // Centered — the one honest hard thing.
+    title: 'The one thing worth knowing',
+    body: 'When you’re here together, publishing already covers your teammate — they’ve seen it live, so Publish is just dropping a bookmark. Only when you work apart can two versions drift. If that happens, Maude shows you both and lets you pick — keep mine, keep theirs, or keep both. Never a confusing merge.',
+  },
+];

package/apps/studio/client/tour/overlay.jsx

@@ -225,6 +225,11 @@ export function TourOverlay({ steps, open, onClose, onComplete, bus, hasSelectio
   const needSelHint = !!step.requireSelection && !hasSelection;
   const needCanvasHint = (!!step.canvas || !!step.requireSelection) && hasCanvas === false;
 
+  // Optional per-step graphic (Phase 29 / E4): a component drawn above the copy —
+  // the collab tour uses it for the centered two-layer infographic step. Widens the
+  // card so the diagram has room.
+  const Graphic = step.render || null;
+
   return (
     <div className="mdcc-tour" role="presentation">
       {spot ? (
@@ -233,7 +238,7 @@ export function TourOverlay({ steps, open, onClose, onComplete, bus, hasSelectio
         <div className="mdcc-tour__scrim" aria-hidden="true" />
       )}
       <div
-        className="mdcc-tour__card"
+        className={'mdcc-tour__card' + (Graphic ? ' mdcc-tour__card--graphic' : '')}
         ref={cardRef}
         role="dialog"
         aria-modal="true"
@@ -244,6 +249,11 @@ export function TourOverlay({ steps, open, onClose, onComplete, bus, hasSelectio
         <div className="mdcc-tour__step">
           {i + 1} / {steps.length}
         </div>
+        {Graphic && (
+          <div className="mdcc-tour__graphic">
+            <Graphic />
+          </div>
+        )}
         <div className="mdcc-tour__title" id="mdcc-tour-title">
           {step.title}
         </div>

package/apps/studio/client/whats-new.jsx

@@ -48,20 +48,35 @@ export function useWhatsNew(currentVersion) {
   const [toastDismissed, setToastDismissed] = useState(() => readToastDismissed());
   const [panelOpen, setPanelOpen] = useState(false);
 
+  // Fetch the feed on mount AND whenever the window regains focus (Phase 32 /
+  // Task 5). The native shell can sit backgrounded for a long time; an auto-update
+  // (or a deploy of the web studio) bumps the feed while we're not looking, so we
+  // re-evaluate on focus to surface the ✦ badge without a full reload.
   useEffect(() => {
     let cancelled = false;
-    fetch('/_api/whats-new')
-      .then((r) => r.json())
-      .then((j) => {
-        if (cancelled) return;
-        setEntries(Array.isArray(j?.entries) ? j.entries : []);
-        if (typeof j?.version === 'string') setFeedVersion(j.version);
-      })
-      .catch(() => {
-        /* offline / restart — no banner */
-      });
+    const refresh = () => {
+      fetch('/_api/whats-new')
+        .then((r) => r.json())
+        .then((j) => {
+          if (cancelled) return;
+          setEntries(Array.isArray(j?.entries) ? j.entries : []);
+          if (typeof j?.version === 'string') setFeedVersion(j.version);
+        })
+        .catch(() => {
+          /* offline / restart — no banner */
+        });
+    };
+    refresh();
+    const onFocus = () => refresh();
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') refresh();
+    };
+    window.addEventListener('focus', onFocus);
+    document.addEventListener('visibilitychange', onVisible);
     return () => {
       cancelled = true;
+      window.removeEventListener('focus', onFocus);
+      document.removeEventListener('visibilitychange', onVisible);
     };
   }, []);
 

package/apps/studio/collab/registry.ts

@@ -58,6 +58,14 @@ export interface Registry {
    * updated stroke set without waiting for a cold-open re-seed.
    */
   syncRoomFromAnnotations(slug: string, svg: string): void;
+  /**
+   * Phase 30 — project agent editing-presence onto a slug's room awareness so
+   * it crosses the hub (the loopback `ai-activity` bus event does not). `null`
+   * clears it. No-op when no room is live for the slug — a peer that joins
+   * later will see the agent on the next ai-activity heartbeat. Soft heads-up;
+   * never a lock.
+   */
+  setAgentEditing(slug: string, state: { name: string; since: number } | null): void;
   /**
    * Phase 9 Task 5 — attach the hub-side Awareness (from a sync provider) for
    * a slug so the Room's Awareness (browser peers) is bridged bidirectionally
@@ -192,6 +200,10 @@ export function createRegistry(callbacks: RoomCallbacks): Registry {
     }, 'inspector-write');
   }
 
+  function setAgentEditing(slug: string, state: { name: string; since: number } | null): void {
+    rooms.get(slug)?.setAgentEditing(state);
+  }
+
   async function flushAll(): Promise<void> {
     await Promise.all(Array.from(rooms.values(), (r) => r.flush()));
   }
@@ -227,6 +239,7 @@ export function createRegistry(callbacks: RoomCallbacks): Registry {
     getDoc,
     syncRoomFromComments,
     syncRoomFromAnnotations,
+    setAgentEditing,
     attachHubAwareness,
     pin,
     unpin,

package/apps/studio/collab/room.ts

@@ -57,6 +57,15 @@ export interface Room {
   connect(conn: RoomConn): Promise<void>;
   disconnect(conn: RoomConn): void;
   receive(conn: RoomConn, payload: Uint8Array): void;
+  /**
+   * Phase 30 — project an agent's "editing" activity onto this room's awareness
+   * using the room's own (otherwise-unused) local awareness slot, so the soft
+   * editing-presence crosses the hub to remote peers (the loopback `ai-activity`
+   * bus event does not). `null` clears it. Idempotent — a re-set of the same
+   * `{name, since}` is a no-op (ai-activity heartbeats re-emit every 10 s).
+   * NOT a lock; never blocks a peer.
+   */
+  setAgentEditing(state: { name: string; since: number } | null): void;
   /** Force the debounced flush to fire now. DDR-051 §3 (branch-switch). */
   flush(): Promise<void>;
   /** Tear down — clears timers + removes awareness. */
@@ -192,6 +201,32 @@ export function createRoom(slug: string, callbacks: RoomCallbacks): Room {
     if (reply) conn.send(reply);
   }
 
+  // Phase 30 — agent editing-presence projected onto the room's own awareness
+  // slot. The key short-circuits redundant re-sets (ai-activity heartbeats
+  // re-emit the same entry every 10 s). The awareness `update` handler above
+  // broadcasts the change to local conns AND relays it to the hub via
+  // bridgeAwareness, so a remote peer's overlay attributes the edit.
+  let agentEditingKey: string | null = null;
+  function setAgentEditing(state: { name: string; since: number } | null): void {
+    if (destroyed) return;
+    const key = state ? `${state.name}${state.since}` : null;
+    if (key === agentEditingKey) return;
+    agentEditingKey = key;
+    if (state === null) {
+      awareness.setLocalState(null);
+      return;
+    }
+    awareness.setLocalState({
+      name: state.name,
+      color: '', // re-derived client-side from name; wire value is discarded
+      cursor: null,
+      selection: null,
+      annotationSelection: [],
+      viewport: { x: 0, y: 0, zoom: 1 },
+      editing: { since: state.since },
+    });
+  }
+
   async function destroy(): Promise<void> {
     destroyed = true;
     if (flushTimer) {
@@ -211,6 +246,7 @@ export function createRoom(slug: string, callbacks: RoomCallbacks): Room {
     connect,
     disconnect,
     receive,
+    setAgentEditing,
     flush,
     destroy,
     size: () => conns.size,

package/apps/studio/cursors-overlay.tsx

@@ -89,8 +89,15 @@ const CURSOR_CSS = `
   border-radius: var(--radius-sm, 2px) var(--radius-sm, 2px) 0 0;
   white-space: nowrap;
 }
+/* Phase 30 / DDR-120 — soft editing-presence. When a peer (human or a bridged
+ * agent) is actively editing this canvas, their cursor pulses gently and the
+ * label carries a ✎ mark. A heads-up, never a lock. */
+.dc-cursor--editing .dc-cursor-arrow { animation: dc-cursor-edit-pulse 1.6s ease-in-out infinite; }
+.dc-cursor-edit-mark { margin-left: 3px; opacity: 0.85; }
+@keyframes dc-cursor-edit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
 @media (prefers-reduced-motion: reduce) {
   .dc-cursor { transition: none !important; }
+  .dc-cursor--editing .dc-cursor-arrow { animation: none; }
 }
 `.trim();
 
@@ -119,8 +126,12 @@ const Cursor = memo(function Cursor({ peer, viewport }: CursorProps): JSX.Elemen
   // world → screen: screen = world * zoom + viewport.{x,y}
   const screenX = peer.cursor.x * viewport.zoom + viewport.x;
   const screenY = peer.cursor.y * viewport.zoom + viewport.y;
+  const editing = !!peer.editing;
   return (
-    <div className="dc-cursor" style={{ transform: `translate(${screenX}px, ${screenY}px)` }}>
+    <div
+      className={`dc-cursor${editing ? ' dc-cursor--editing' : ''}`}
+      style={{ transform: `translate(${screenX}px, ${screenY}px)` }}
+    >
       {/* DS colors-presence Pointer — one plain triangle glyph, tinted by its
           owner (the specimen's exact 24-grid path, no tail/notch). */}
       <svg
@@ -134,6 +145,11 @@ const Cursor = memo(function Cursor({ peer, viewport }: CursorProps): JSX.Elemen
       </svg>
       <div className="dc-cursor-label" style={{ background: peer.color }}>
         {peer.name}
+        {editing && (
+          <span className="dc-cursor-edit-mark" aria-hidden="true">
+            ✎
+          </span>
+        )}
       </div>
     </div>
   );