@1agh/maude 0.27.0 → 0.28.0

package/plugins/design/dev-server/artboard-activity-overlay.tsx

@@ -0,0 +1,67 @@
+/**
+ * @file       artboard-activity-overlay.tsx — Phase 13 / DDR-029 overlay.
+ * @scope      plugins/design/dev-server/artboard-activity-overlay.tsx
+ * @purpose    The "agent works here" chrome for a single artboard: an animated
+ *             rim + a top-right `editing — <label>` badge. Rendered by
+ *             `DCArtboard` as a world-coord sibling of the `<article>`, so it
+ *             pans/zooms with the artboard for free.
+ *
+ * Decorative — `aria-hidden` + `pointer-events:none`. All visual styling
+ * (border, pulse keyframes, reduced-motion fallback) lives in the inspector
+ * style block injected by `inspect.ts` (single injection point — DDR-029), so
+ * this component only places the box and toggles `data-fading` for the 200 ms
+ * cross-fade out when the file goes idle.
+ */
+
+import type { CSSProperties } from 'react';
+
+export interface OverlayRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export function ArtboardActivityOverlay({
+  rect,
+  label,
+  active,
+  color,
+}: {
+  rect: OverlayRect;
+  label: string;
+  /** true = editing now (pulse, opacity 1); false = idle, cross-fading out. */
+  active: boolean;
+  /**
+   * Per-agent presence color (Phase 13.2 / DDR-078). Overrides the default
+   * `--mdcc-activity` hue so each agent's rim + badge carry its own color.
+   * Omitted for manual / non-agent edits (default inspector blue).
+   */
+  color?: string;
+}) {
+  const style: CSSProperties = {
+    position: 'absolute',
+    left: rect.x,
+    top: rect.y,
+    width: rect.w,
+    height: rect.h,
+    pointerEvents: 'none',
+    // The injected CSS reads `var(--mdcc-activity)`; setting it here recolors the
+    // border, the ::after glow, and the badge background in one shot.
+    ...(color ? ({ '--mdcc-activity': color } as CSSProperties) : {}),
+  };
+  return (
+    <div
+      className="dc-activity-rim"
+      data-fading={active ? undefined : 'true'}
+      aria-hidden
+      style={style}
+    >
+      {/* Phase 13.3 — full-artboard scan beam (top→bottom sweep). Styled +
+          animated by the injected inspector CSS; this just mounts the cover. */}
+      <div className="dc-activity-scan" />
+      <span className="dc-activity-badge">editing — {label}</span>
+    </div>
+  );
+}
+ArtboardActivityOverlay.displayName = 'ArtboardActivityOverlay';

package/plugins/design/dev-server/canvas-comment-mount.tsx

@@ -27,9 +27,12 @@
  */
 
 import {
+  Component,
   type ComponentType,
+  Fragment,
   type ReactNode,
   createElement,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -347,6 +350,27 @@ export interface MountCanvasOptions {
   commentsEnabled: boolean;
 }
 
+// The lite provider tree wrapping a canvas component (tool + selection +
+// comment layer). Pulled out so both the live render and the error-fallback
+// render build the identical envelope.
+//
+// NB: the CanvasActivityProvider (Phase 13 / DDR-029) is NOT mounted here — it
+// lives inside `DesignCanvas` (canvas-lib). comment-mount.js and canvas-lib are
+// SEPARATE bundles, so a context provided here would be a different instance
+// from the one DCArtboard (canvas-lib) consumes. Same reasoning the real
+// ToolProvider lives in DesignCanvas, not in this layer's MaybeToolProvider.
+function buildCanvasTree(Canvas: ComponentType, file: string | undefined): ReactNode {
+  return createElement(
+    MaybeToolProvider,
+    null,
+    createElement(
+      MaybeSelectionSetProvider,
+      null,
+      createElement(CommentHost, { file }, createElement(Canvas))
+    )
+  );
+}
+
 export function mountCanvas(Canvas: ComponentType, opts: MountCanvasOptions): void {
   const root = createRoot(opts.rootEl);
   if (!opts.commentsEnabled) {
@@ -354,15 +378,146 @@ export function mountCanvas(Canvas: ComponentType, opts: MountCanvasOptions): vo
     return;
   }
   const file = opts.file ?? deriveFile();
-  root.render(
+  root.render(createElement(CanvasHmrRuntime, { initialCanvas: Canvas, file }));
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Phase 13.1 / DDR-077 — HMR error resilience during agent editing.
+//
+// When an agent (`/design:edit` / `/design:new`) live-edits a canvas, a
+// half-saved file (missing import, undefined symbol, transpile error) used to
+// blank the canvas to white: the shell did `location.reload()` straight into the
+// broken module. The shell now soft-reloads (import-before-swap, see
+// `templates/_shell.html`) so a build/import error never tears down the good
+// render. This runtime closes the remaining gap — a *render-time* throw — by
+// keeping the last good canvas mounted via an error boundary and surfacing a
+// "holding last good" toast instead of a white screen. Strictly gated by the
+// shell on agent-active; manual edits keep the plain reload (so this is inert
+// for solo hand-editing). The runtime exposes its swap/hold API on
+// `window.__maudeCanvasRuntime` (the same window-handshake style the shell
+// already uses for `__canvas_rel__` etc.).
+
+export interface CanvasRuntimeApi {
+  /** Swap in a freshly-imported canvas module's default export (success path). */
+  remount: (next: ComponentType) => void;
+  /** Show/hide the "holding last good" toast (build-error path from the shell). */
+  setHolding: (on: boolean, message?: string) => void;
+}
+
+const RUNTIME_KEY = '__maudeCanvasRuntime';
+
+/**
+ * Fires `onOk` only when its subtree COMMITS — i.e. renders without throwing. A
+ * render-time throw in the canvas unwinds to the boundary before this commits,
+ * so `onOk` never runs and `lastGood` is not advanced to a broken module.
+ */
+function OkSignal({
+  Canvas,
+  file,
+  onOk,
+}: {
+  Canvas: ComponentType;
+  file: string | undefined;
+  onOk: () => void;
+}) {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: fire once per mount (key=attempt remounts this).
+  useEffect(() => {
+    onOk();
+  }, []);
+  return buildCanvasTree(Canvas, file);
+}
+
+export class CanvasErrorBoundary extends Component<
+  {
+    attempt: number;
+    onError: () => void;
+    fallback: () => ReactNode;
+    children: ReactNode;
+  },
+  { hasError: boolean }
+> {
+  state = { hasError: false };
+  static getDerivedStateFromError(): { hasError: boolean } {
+    return { hasError: true };
+  }
+  componentDidCatch(): void {
+    this.props.onError();
+  }
+  componentDidUpdate(prev: { attempt: number }): void {
+    // A new canvas (new attempt) arrived → clear the error and try rendering it.
+    if (prev.attempt !== this.props.attempt && this.state.hasError) {
+      this.setState({ hasError: false });
+    }
+  }
+  render(): ReactNode {
+    if (this.state.hasError) return this.props.fallback();
+    return this.props.children;
+  }
+}
+
+function HmrHoldingToast({ message }: { message?: string }): ReactNode {
+  return createElement(
+    'div',
+    {
+      className: 'dc-hmr-holding',
+      role: 'status',
+      'aria-live': 'polite',
+      title: message ? `Holding last working render — ${message}` : 'Holding last working render',
+    },
+    '⏸ build error — držím poslední funkční verzi'
+  );
+}
+
+function CanvasHmrRuntime({
+  initialCanvas,
+  file,
+}: {
+  initialCanvas: ComponentType;
+  file: string | undefined;
+}): ReactNode {
+  const [{ canvas, attempt }, setCanvasState] = useState({ canvas: initialCanvas, attempt: 0 });
+  const [holding, setHoldingState] = useState<{ on: boolean; message?: string }>({ on: false });
+  const lastGood = useRef<ComponentType | null>(null);
+  const canvasRef = useRef(canvas);
+  canvasRef.current = canvas;
+
+  // Publish the runtime API for the shell HMR client.
+  useEffect(() => {
+    const api: CanvasRuntimeApi = {
+      remount: (next) => setCanvasState((s) => ({ canvas: next, attempt: s.attempt + 1 })),
+      setHolding: (on, message) => setHoldingState(on ? { on: true, message } : { on: false }),
+    };
+    (window as unknown as Record<string, unknown>)[RUNTIME_KEY] = api;
+    return () => {
+      (window as unknown as Record<string, unknown>)[RUNTIME_KEY] = undefined;
+    };
+  }, []);
+
+  const handleOk = useCallback(() => {
+    lastGood.current = canvasRef.current;
+    // The new canvas rendered clean → drop any holding state.
+    setHoldingState((h) => (h.on ? { on: false } : h));
+  }, []);
+
+  const handleError = useCallback(() => {
+    setHoldingState({ on: true, message: 'render error' });
+  }, []);
+
+  const fallback = useCallback((): ReactNode => {
+    const LG = lastGood.current;
+    return LG ? buildCanvasTree(LG, file) : null;
+  }, [file]);
+
+  return createElement(
+    Fragment,
+    null,
     createElement(
-      MaybeToolProvider,
-      null,
-      createElement(
-        MaybeSelectionSetProvider,
-        null,
-        createElement(CommentHost, { file }, createElement(Canvas))
-      )
-    )
+      CanvasErrorBoundary,
+      { attempt, onError: handleError, fallback },
+      // key=attempt → each soft-reload remounts a fresh subtree (and resets the
+      // boundary's child), matching the clean-slate semantics of a full reload.
+      createElement(OkSignal, { key: attempt, Canvas: canvas, file, onOk: handleOk })
+    ),
+    holding.on ? createElement(HmrHoldingToast, { message: holding.message }) : null
   );
 }

package/plugins/design/dev-server/canvas-lib.tsx

@@ -90,12 +90,19 @@ import {
   useReducedMotion as _useReducedMotion,
 } from 'motion/react';
 
+import { ArtboardActivityOverlay } from './artboard-activity-overlay.tsx';
 import { CanvasShell } from './canvas-shell.tsx';
 import {
   buildMoveArtboardsRecord,
   diffLayoutPositions,
 } from './commands/move-artboards-command.ts';
+import { AgentPresenceProvider, useAgentPresence } from './use-agent-presence.tsx';
 import { type DragState, useArtboardDrag } from './use-artboard-drag.tsx';
+import {
+  CanvasActivityProvider,
+  matchesArtboard,
+  useCanvasActivity,
+} from './use-canvas-activity.tsx';
 import { CollabProvider, canvasSlugFromPath } from './use-collab.tsx';
 import { useSelectionSetOptional } from './use-selection-set.tsx';
 import { MaybeToolProvider, useToolModeOptional } from './use-tool-mode.tsx';
@@ -1192,9 +1199,22 @@ export function DesignCanvas(props: DesignCanvasProps) {
     </MaybeToolProvider>
   );
   return (
-    <UndoStackProvider canvasFile={canvasFile}>
-      {collabSlug ? <CollabProvider slug={collabSlug}>{inner}</CollabProvider> : inner}
-    </UndoStackProvider>
+    // Phase 13 / DDR-029 — the activity context MUST be provided here (canvas-lib
+    // bundle) so DCArtboard's `useCanvasActivity()` reads the SAME context
+    // instance. Providing it from comment-mount.js (a separate bundle) would
+    // create a second ActivityContext the consumer never sees. `canvasFile` is
+    // normalized to the server's design-root-relative activity key inside the
+    // provider (falls back to window.__canvas_rel__).
+    <CanvasActivityProvider file={canvasFile}>
+      {/* Phase 13.2 / DDR-078 — agent presence. Same canvas-lib-bundle rule as
+          the activity context: provided here so DCArtboard + ParticipantsChrome
+          (both canvas-lib) read one context instance. */}
+      <AgentPresenceProvider file={canvasFile}>
+        <UndoStackProvider canvasFile={canvasFile}>
+          {collabSlug ? <CollabProvider slug={collabSlug}>{inner}</CollabProvider> : inner}
+        </UndoStackProvider>
+      </AgentPresenceProvider>
+    </CanvasActivityProvider>
   );
 }
 DesignCanvas.displayName = 'DesignCanvas';
@@ -1510,6 +1530,12 @@ export function DCArtboard({
   const toolMode = useToolModeOptional();
   const selSet = useSelectionSetOptional();
   const dragBus = useDragStateContext();
+  // Phase 13 / DDR-029 — live "agent works here" overlay. Inert (present=false)
+  // outside CanvasActivityProvider, so specimens / legacy mounts never show it.
+  const activity = useCanvasActivity();
+  // Phase 13.2 / DDR-078 — when an agent is the editor, tint the overlay with
+  // its presence color + show its funny name instead of the generic file label.
+  const agent = useAgentPresence();
   const rect = ctx ? ctx.rectFor(id) : null;
 
   // Drag hook — always called (hook rules). Inert outside DesignCanvas
@@ -1583,19 +1609,40 @@ export function DCArtboard({
 
   const handleProps = dragHook.bindHandle();
 
+  // Phase 13 — overlay when THIS canvas is active and the change scope includes
+  // this artboard (null scope = file-level = every artboard). Rendered as a
+  // world-coord sibling of the <article> so it pans/zooms with the artboard.
+  const showActivity = activity.present && matchesArtboard(activity.artboardIds, id);
+  // Agent-driven → funny name + agent color; manual edit → file label + default hue.
+  const activityLabel = agent
+    ? agent.name
+    : activity.artboardIds
+      ? `${activity.fileLabel}:${label}`
+      : activity.fileLabel;
+
   return (
-    <article
-      className={`dc-artboard dc-positioned${isInDrag ? ' dc-dragging' : ''}`}
-      data-dc-screen={id}
-      aria-current={isActive ? 'true' : undefined}
-      style={{ left: liveX, top: liveY, width: rect.w, height: rect.h }}
-      {...handleProps}
-    >
-      <button type="button" className="dc-artboard-label sku" aria-label={`Artboard ${label}`}>
-        {label}
-      </button>
-      <div className="dc-artboard-body">{children}</div>
-    </article>
+    <>
+      <article
+        className={`dc-artboard dc-positioned${isInDrag ? ' dc-dragging' : ''}`}
+        data-dc-screen={id}
+        aria-current={isActive ? 'true' : undefined}
+        style={{ left: liveX, top: liveY, width: rect.w, height: rect.h }}
+        {...handleProps}
+      >
+        <button type="button" className="dc-artboard-label sku" aria-label={`Artboard ${label}`}>
+          {label}
+        </button>
+        <div className="dc-artboard-body">{children}</div>
+      </article>
+      {showActivity ? (
+        <ArtboardActivityOverlay
+          rect={{ x: liveX, y: liveY, w: rect.w, h: rect.h }}
+          label={activityLabel}
+          active={activity.active}
+          color={agent?.color}
+        />
+      ) : null}
+    </>
   );
 }
 DCArtboard.displayName = 'DCArtboard';

package/plugins/design/dev-server/config.schema.json

@@ -206,7 +206,8 @@
         },
         "syncTsx": {
           "type": "boolean",
-          "description": "DDR-072 — project-level TSX sync opt-in. When true, ALL .tsx canvases sync to this hub without a per-canvas .meta.json \"syncable\": true. A per-canvas \"syncable\": false still excludes individual canvases (the sidecar always wins). Inert unless the cross-origin sandbox is active (MAUDE_CANVAS_ORIGIN_SPLIT != 0) — the DDR-060 Lock-2 coupling is preserved. Broadens the WebRTC/self-nav exfil residual to every synced canvas, so only enable for hubs you operate or fully trust; the dev-server prints a loud boot banner against non-loopback hubs."
+          "default": true,
+          "description": "DDR-079 (supersedes DDR-072) — project-level TSX sync, ON BY DEFAULT. Omit the field to sync ALL .tsx canvases to this hub (the common case: a linked teammate sees the project's TSX without a hidden opt-in). Set false to opt the whole project OUT. A per-canvas .meta.json \"syncable\": false still excludes one canvas (the sidecar always wins). Inert unless the cross-origin sandbox is active (MAUDE_CANVAS_ORIGIN_SPLIT != 0) — the DDR-060 Lock-2 coupling is preserved. TSX bodies execute, so syncing broadens a WebRTC/self-nav exfil residual to every synced canvas — link only hubs you operate or trust; the dev-server prints a loud boot banner against non-loopback hubs."
         }
       },
       "additionalProperties": false