@1agh/maude 1.2.0 → 1.3.1

package/apps/studio/managed-projects.ts

@@ -0,0 +1,172 @@
+// Preparing a MANAGED project — plan T19–T22 (DDR-241 follow-on).
+//
+// A designer who was added to a project should be able to open it without
+// choosing a folder, having Git, or pasting a token. The desktop does that in
+// two halves:
+//
+//   1. HERE (the running studio, which holds the Maude Cloud device session or
+//      takes a team-server sign-in): obtain and store the hub credential, then
+//      ask the project what it looks like (its bootstrap) — name, canvas
+//      groups — so the local copy can be declared correctly before it exists.
+//   2. The native shell (`managed_project_open`) creates the project's own
+//      copy under the app's data directory from exactly what this returns,
+//      and switches to it; the sync runtime then brings everything down.
+//
+// Nothing here writes into the folder this studio is serving.
+
+import { createCloudEndpoints } from './cloud/endpoints.ts';
+import type { Context } from './context.ts';
+import { getHubRecord, normalizeUrl } from './sync/hubs-config.ts';
+import { signInToWorkspace } from './sync/workspace-signin.ts';
+
+export type PrepareInput =
+  | { kind: 'cloud'; projectId: string }
+  | { kind: 'handoff'; code: string; claimedProject?: string }
+  | { kind: 'hub'; url: string; email: string; password: string }
+  /** A team server this machine already holds a credential for. */
+  | { kind: 'known-hub'; url: string };
+
+export interface PreparedProject {
+  ok: true;
+  serverUrl: string;
+  /** Stable id on that server — the managed copy is keyed by (server, id). */
+  projectId: string;
+  name: string;
+  role: string | null;
+  canvasGroups: string[];
+  /** The project's save mode, when the server says ('transactions' | 'legacy'). */
+  mode: string | null;
+}
+
+export type PrepareResult = PreparedProject | { ok: false; error: string; status: number };
+
+const GROUP = /^[\p{L}\p{N}][\p{L}\p{N} _-]{0,59}$/u;
+
+/** Canvas groups a project uses, from its manifest when it does not declare them. */
+export function groupsFromBootstrap(boot: {
+  canvasGroups?: unknown;
+  docs?: { path: string | null; retired?: boolean }[];
+  dirs?: string[];
+}): string[] {
+  const out = new Set<string>();
+  const add = (g: unknown) => {
+    if (typeof g === 'string' && GROUP.test(g)) out.add(g);
+  };
+  if (Array.isArray(boot.canvasGroups)) {
+    for (const g of boot.canvasGroups)
+      add(typeof g === 'string' ? g : (g as { path?: unknown })?.path);
+  }
+  for (const d of boot.docs ?? []) {
+    if (d.retired || !d.path) continue;
+    const first = d.path.split('/')[0];
+    if (d.path.includes('/')) add(first);
+  }
+  for (const dir of boot.dirs ?? []) add(dir.split('/')[0]);
+  if (out.size === 0) {
+    out.add('system');
+    out.add('ui');
+  }
+  return [...out].slice(0, 32);
+}
+
+function sameServer(a: string | undefined, b: string): boolean {
+  if (!a) return false;
+  try {
+    return normalizeUrl(a) === normalizeUrl(b);
+  } catch {
+    return false;
+  }
+}
+
+async function bootstrapOf(url: string, token: string): Promise<Record<string, unknown> | null> {
+  try {
+    const res = await fetch(`${url}/api/projects/current/v1/bootstrap`, {
+      headers: { authorization: `Bearer ${token}` },
+      signal: AbortSignal.timeout(10_000),
+    });
+    if (!res.ok) return null;
+    return (await res.json()) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+export async function prepareManagedProject(
+  ctx: Context,
+  input: PrepareInput
+): Promise<PrepareResult> {
+  let serverUrl: string;
+  let projectId: string | null = null;
+  let role: string | null = null;
+  let name: string | null = null;
+
+  if (input.kind === 'cloud' || input.kind === 'handoff') {
+    const cloud = createCloudEndpoints(ctx);
+    const r =
+      input.kind === 'cloud'
+        ? await cloud.openManaged(input.projectId)
+        : await cloud.openManagedCode(input.code, input.claimedProject);
+    const j = r.json as {
+      ok?: boolean;
+      url?: string;
+      role?: string;
+      project?: string;
+      error?: string;
+    };
+    if (!j.ok || !j.url)
+      return { ok: false, error: j.error ?? 'The project could not be opened.', status: r.status };
+    serverUrl = j.url;
+    projectId = j.project ?? (input.kind === 'cloud' ? input.projectId : null);
+    role = j.role ?? null;
+    name = projectId;
+  } else if (input.kind === 'hub') {
+    const r = await signInToWorkspace({
+      url: input.url,
+      email: input.email,
+      password: input.password,
+    });
+    if (!r.json.ok) return { ok: false, error: r.json.error, status: r.status };
+    serverUrl = r.json.url;
+    role = r.json.user.role;
+  } else {
+    try {
+      serverUrl = normalizeUrl(input.url);
+    } catch {
+      return { ok: false, error: "That doesn't look like a workspace address.", status: 400 };
+    }
+    if (!getHubRecord(serverUrl)?.token) {
+      return { ok: false, error: 'Sign in to that workspace first.', status: 401 };
+    }
+  }
+
+  const token = getHubRecord(serverUrl)?.token;
+  if (!token)
+    return { ok: false, error: 'The sign-in could not be saved on this computer.', status: 500 };
+  const boot = await bootstrapOf(serverUrl, token);
+  if (boot && typeof boot.projectId === 'string') projectId ??= boot.projectId;
+  // SIGN IN AGAIN (T20): a new credential for the server this studio is
+  // already syncing with. Reopening the same project attaches to this very
+  // process (the shell never starts a second one for a running project), and
+  // the running runtime still holds the credential the project refused — so
+  // cycle it onto the one just stored. The link is unchanged and never re-read
+  // from disk; only the credential is new, and this process wrote it.
+  if (input.kind !== 'known-hub' && sameServer(ctx.cfg?.linkedHub?.url, serverUrl)) {
+    try {
+      await ctx.syncControl?.restart();
+    } catch (err) {
+      console.error('[managed] could not restart sync on the new sign-in:', err);
+    }
+  }
+  const host = new URL(serverUrl).host;
+  projectId ??= host;
+  if (!/^[A-Za-z0-9._-]{1,128}$/.test(projectId)) projectId = host.replace(/[^A-Za-z0-9._-]/g, '-');
+  return {
+    ok: true,
+    serverUrl,
+    projectId,
+    name: name ?? (projectId === 'local' ? host : projectId),
+    role,
+    canvasGroups: groupsFromBootstrap((boot ?? {}) as Parameters<typeof groupsFromBootstrap>[0]),
+    mode: boot && typeof boot.mode === 'string' ? boot.mode : null,
+  };
+}

package/apps/studio/notifications.tsx

@@ -0,0 +1,292 @@
+/** Shared shell/canvas notifications. Sonner owns layout, gestures and announcements;
+ * our clock also pauses for app overlays, hidden queue entries and Save dialogs. */
+import {
+  type CSSProperties,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react';
+import { Toaster, toast } from 'sonner';
+
+export type NoticeKind = 'info' | 'success' | 'error' | 'warning' | 'undo';
+export interface Notice {
+  id?: string;
+  title: string;
+  description?: string;
+  content?: ReactNode;
+  kind?: NoticeKind;
+  group?: string;
+  duration?: number;
+  /** Change only for a new lifecycle phase, never for a progress update. */
+  timerKey?: string;
+  paused?: boolean;
+  action?: { label: string; onClick: () => void };
+  onDismiss?: () => void;
+}
+type Entry = Notice & { id: string };
+let entries: Entry[] = [];
+let sequence = 0;
+const listeners = new Set<() => void>();
+const publish = () => {
+  for (const listener of listeners) listener();
+};
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+const snapshot = () => entries;
+
+export function notify(notice: Notice): string {
+  const id = notice.id ?? `notice-${++sequence}`;
+  const existing = entries.findIndex((entry) => entry.id === id);
+  if (existing < 0) entries = [...entries, { ...notice, id }];
+  else entries = entries.map((entry) => (entry.id === id ? { ...notice, id } : entry));
+  publish();
+  return id;
+}
+
+let canvasSlot = 0;
+let canvasWindowStart = -Infinity;
+let canvasWindowCount = 0;
+/** Untrusted canvas traffic gets two reusable slots, leaving room for shell notices.
+ * Limit publications as well as retention; editing can emit dozens per second. */
+export function notifyCanvasText(title: string, kind: NoticeKind = 'info'): string | null {
+  const now = Date.now();
+  if (now < canvasWindowStart || now - canvasWindowStart >= 1000) {
+    canvasWindowStart = now;
+    canvasWindowCount = 0;
+  }
+  if (canvasWindowCount >= 5) return null;
+  canvasWindowCount++;
+  const previousUndo =
+    kind === 'undo'
+      ? entries.find((entry) => entry.group === 'canvas' && entry.kind === 'undo')
+      : undefined;
+  const id = previousUndo?.id ?? `canvas-notice-${canvasSlot++ % 2}`;
+  return notify({
+    id,
+    title: title.slice(0, 4000),
+    kind,
+    group: 'canvas',
+    timerKey: `${++sequence}`,
+  });
+}
+
+/** Programmatic removal (unmount/navigation) does not acknowledge the notice. */
+export function dismissNotice(id: string): void {
+  entries = entries.filter((entry) => entry.id !== id);
+  publish();
+}
+function acknowledge(id: string) {
+  const entry = entries.find((item) => item.id === id);
+  dismissNotice(id);
+  entry?.onDismiss?.();
+}
+
+export function noticeDuration(entry: Notice): number {
+  return (
+    entry.duration ??
+    (entry.action || ['error', 'warning', 'undo'].includes(entry.kind ?? '') ? 10_000 : 5_000)
+  );
+}
+
+/** Keep full diagnostics in their owning panel, including for screen readers. */
+export function summarizeNoticeText(text: string): string {
+  const compact = text.trim().replace(/\s+/g, ' ');
+  return compact.length > 280 ? `${compact.slice(0, 279)}…` : compact;
+}
+
+function NoticeCard({ entry }: { entry: Entry }) {
+  return (
+    <div
+      className="maude-notice"
+      data-kind={entry.kind ?? 'info'}
+      data-testid={`notice-${entry.id}`}
+    >
+      <button
+        type="button"
+        className="maude-notice-close"
+        aria-label="Dismiss notification"
+        onClick={(event) => {
+          event.currentTarget.blur();
+          acknowledge(entry.id);
+        }}
+      >
+        ×
+      </button>
+      <div className="maude-notice-title">{summarizeNoticeText(entry.title)}</div>
+      {entry.description && (
+        <div className="maude-notice-summary">{summarizeNoticeText(entry.description)}</div>
+      )}
+      {entry.content}
+      {entry.action && (
+        <button
+          type="button"
+          className="maude-notice-action"
+          onClick={(event) => {
+            event.currentTarget.blur();
+            entry.action?.onClick();
+            acknowledge(entry.id);
+          }}
+        >
+          {entry.action.label}
+        </button>
+      )}
+    </div>
+  );
+}
+
+function MountedNotice({
+  entry,
+  visible,
+  paused,
+}: {
+  entry: Entry;
+  visible: boolean;
+  paused: boolean;
+}) {
+  const duration = noticeDuration(entry);
+  const presentationId = useRef<string | null>(null);
+  const remaining = useRef(duration);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: a new lifecycle phase gets a fresh duration.
+  useEffect(() => {
+    remaining.current = duration;
+  }, [duration, entry.timerKey]);
+  // Keep the clock outside Sonner's card: hiding a group must preserve its time.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: restart the clock when its lifecycle phase changes.
+  useEffect(() => {
+    if (!visible || paused || entry.paused || duration === Infinity) return;
+    const started = Date.now();
+    const timer = setTimeout(() => acknowledge(entry.id), Math.max(0, remaining.current));
+    return () => {
+      clearTimeout(timer);
+      remaining.current = Math.max(0, remaining.current - (Date.now() - started));
+    };
+  }, [visible, paused, entry.paused, duration, entry.timerKey, entry.id]);
+  // Sonner invokes onDismiss even for programmatic removal. Invalidate the
+  // presentation before hiding so opening history never acknowledges a job.
+  useEffect(() => {
+    if (visible) {
+      const token = presentationId.current ?? `${entry.id}:view-${++sequence}`;
+      presentationId.current = token;
+      toast.custom(() => <NoticeCard entry={entry} />, {
+        id: token,
+        duration: Infinity,
+        onDismiss: () => {
+          if (presentationId.current === token) acknowledge(entry.id);
+        },
+      });
+    } else if (presentationId.current) {
+      const token = presentationId.current;
+      presentationId.current = null;
+      toast.dismiss(token);
+    }
+  }, [entry, visible]);
+  useEffect(
+    () => () => {
+      const token = presentationId.current;
+      presentationId.current = null;
+      if (token) toast.dismiss(token);
+    },
+    []
+  );
+  return null;
+}
+
+const NOTICE_CSS = `
+.maude-notifications [data-sonner-toaster] { --width: min(360px, calc(100vw - 32px)); z-index: 8000; }
+.maude-notifications [data-sonner-toast] { width: var(--width); }
+.maude-notifications [data-sonner-toast][data-expanded=false][data-front=false] {
+  overflow: hidden; border-radius: var(--radius-md, 8px);
+}
+.maude-notifications[data-paused=true] { visibility: hidden; pointer-events: none; }
+.maude-notice { box-sizing: border-box; position: relative; width: 100%; padding: 16px;
+  border: 1px solid var(--border-default, #45454c); border-left: 3px solid var(--accent, #d63b1f);
+  border-radius: var(--radius-md, 8px); background: var(--bg-2, #26262b); color: var(--fg-0, #fafafa);
+  box-shadow: 0 8px 28px #0004; font: 13px/1.5 var(--font-sans, system-ui, sans-serif);
+  display: flex; flex-direction: column; gap: 8px; overflow-wrap: anywhere; }
+.maude-notice[data-kind=error], .maude-notice[data-kind=warning] { border-left-color: var(--status-error, #d65b4d); }
+.maude-notice-title { font-weight: 600; padding-right: 20px; }
+.maude-notice-summary, .maude-notice-title, .maude-notice .st-export-degraded {
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
+  overflow-wrap: anywhere; }
+.maude-notice-summary { color: var(--fg-1, #ddd); }
+.maude-notice-close { position: absolute; right: 8px; top: 8px; border: 0; border-radius: 4px;
+  background: transparent; color: inherit; cursor: pointer; font-size: 18px; padding: 0 6px; }
+.maude-notice-action { align-self: flex-start; border: 0; background: transparent; color: inherit;
+  font: inherit; text-decoration: underline; cursor: pointer; padding: 2px 0; }
+.maude-notice button:focus-visible { outline: 2px solid var(--accent, #d63b1f); outline-offset: 2px; }
+.maude-notice .st-toast-actions { flex-wrap: wrap; }
+@media (prefers-reduced-motion: reduce) {
+  .maude-notifications [data-sonner-toast], .maude-notifications [data-sonner-toaster] {
+    animation: none !important; transition: none !important;
+  }
+}`;
+
+const NO_GROUPS: string[] = [];
+export function NotificationHost({
+  paused = false,
+  hiddenGroups = NO_GROUPS,
+}: {
+  paused?: boolean;
+  hiddenGroups?: string[];
+}) {
+  const notices = useSyncExternalStore(subscribe, snapshot, snapshot);
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hidden, setHidden] = useState(() => typeof document !== 'undefined' && document.hidden);
+  useEffect(() => {
+    const change = () => setHidden(document.hidden);
+    document.addEventListener('visibilitychange', change);
+    return () => document.removeEventListener('visibilitychange', change);
+  }, []);
+  useEffect(() => {
+    if (!notices.length) {
+      setHovered(false);
+      setFocused(false);
+    }
+    // Removing a focused DOM node does not reliably emit blur in browsers.
+    if (focused && !hostRef.current?.contains(document.activeElement)) setFocused(false);
+  }, [notices, focused]);
+  const visible = notices.filter((entry) => !hiddenGroups.includes(entry.group ?? ''));
+  // Publish only the latest three; older entries keep their clocks while waiting.
+  // This also keeps visibility and clocks aligned when a hidden group returns.
+  const timedIds = new Set(visible.slice(-3).map((entry) => entry.id));
+  return (
+    <div
+      ref={hostRef}
+      className="maude-notifications"
+      data-paused={paused}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
+      onFocusCapture={() => setFocused(true)}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false);
+      }}
+    >
+      <style>{NOTICE_CSS}</style>
+      <Toaster
+        position="bottom-left"
+        offset={{ left: 16, bottom: 84 }}
+        mobileOffset={{ left: 16, right: 16, bottom: 84 }}
+        visibleToasts={3}
+        expand={focused}
+        style={{ '--width': 'min(360px, calc(100vw - 32px))' } as CSSProperties}
+        containerAriaLabel="Notifications"
+      />
+      {notices.map((entry) => (
+        <MountedNotice
+          key={entry.id}
+          entry={entry}
+          visible={timedIds.has(entry.id)}
+          paused={paused || hovered || focused || hidden || !timedIds.has(entry.id)}
+        />
+      ))}
+    </div>
+  );
+}

package/apps/studio/runtime-bundle.ts

@@ -47,6 +47,8 @@ export const RUNTIME_PACKAGES = [
   'react-dom/client',
   'react/jsx-runtime',
   'react/jsx-dev-runtime',
+  // Toasts in standalone canvases resolve without node_modules in packaged installs.
+  'sonner',
   // Pixi.js v8 — per-iframe runtime bundle for the non-destructive photo editor
   // (feature-photo-editor). The canvas-lib `<PhotoLayer>` reaches the WebGL
   // compositor (`photo/pipeline.ts`) through a LAZY runtime `import('pixi.js')`,

package/apps/studio/server.ts

@@ -14,6 +14,7 @@
 // else binds to a port. The orchestrator (slash commands) reads _server.json
 // to detect a live instance and avoid duplicate boots.
 
+import path from 'node:path';
 import { createAcp } from './acp/index.ts';
 import { cancelInstall, cancelSignin } from './acp/login-state.ts';
 import { createActivity } from './activity.ts';
@@ -78,7 +79,23 @@ let collab: ReturnType<typeof createCollab> | null = null;
 let inspectHandle: ReturnType<typeof createInspectRegistry> | null = null;
 
 const api = createApi(ctx, {
-  onCommentsChanged: (file, comments) => {
+  onCommentsChanged: (file, comments, base) => {
+    // Accepted-revisions mode (DDR-241): the change is PROPOSED; the room's
+    // document changes when the project publishes it. Fire-and-forget — the
+    // proposal is durable in the outbox before this returns, and the sidebar
+    // below already shows the author their own comment.
+    const runtime = ctx.syncControl?.current?.();
+    const proposed = runtime?.proposeLane?.(
+      api.fileSlug(file),
+      'comments',
+      JSON.stringify(comments),
+      base ? { baseText: JSON.stringify(base) } : {}
+    );
+    if (proposed) {
+      void proposed.catch(() => {});
+      ctx.bus.emit('comments', { file, comments });
+      return;
+    }
     // Phase 8 Task 3 — bridge into the live Y.Array so collab peers see the
     // change without waiting for cold-open re-seeding. No-op when no room is
     // live for this canvas slug.
@@ -98,9 +115,18 @@ const api = createApi(ctx, {
   },
   // Phase 8 Task 5 — same bridge for annotations. PUT /_api/annotations writes
   // the SVG blob to disk; we mirror it into the live Y.Map for collab peers.
-  onAnnotationsChanged: (file, svg) => {
+  onAnnotationsChanged: (file, svg, writeId, base) => {
+    const runtime = ctx.syncControl?.current?.();
+    const proposed = runtime?.proposeLane?.(api.fileSlug(file), 'annotations', svg, {
+      ...(writeId ? { writeId } : {}),
+      ...(base !== undefined ? { baseText: base } : {}),
+    });
+    if (proposed) {
+      void proposed.catch(() => {});
+      return;
+    }
     if (collab) {
-      collab.registry.syncRoomFromAnnotations(api.fileSlug(file), svg);
+      collab.registry.syncRoomFromAnnotations(api.fileSlug(file), svg, writeId);
     }
   },
   // feature-file-tree-drag-drop-folders (Task 3) — moveCanvas's collab guard
@@ -120,6 +146,13 @@ const api = createApi(ctx, {
       return false;
     }
   },
+  proposeFolder: (op) => ctx.syncControl?.current?.()?.proposeFolder?.(op) ?? null,
+  onMetaChanged: (file, text, baseText) => {
+    const proposed = ctx.syncControl
+      ?.current?.()
+      ?.proposeLane?.(api.fileSlug(file), 'meta', text, baseText ? { baseText } : {});
+    if (proposed) void proposed.catch(() => {});
+  },
   flushAndDropRoom: async (slug) => {
     if (collab) await collab.registry.forceDrop(slug);
   },
@@ -136,6 +169,19 @@ inspectHandle = inspects;
 // arrives without a vouched session.
 await inspects.for('').load();
 
+// Semantic structural notifications include remote sync operations as well as
+// API actions. Keep every session's agent/inspector context on the live path.
+ctx.bus.on('canvas-list-update', (change) => {
+  if (!change?.rel) return;
+  const file = path.posix.join(ctx.paths.designRel, change.rel);
+  if (change.action === 'moved' && change.fromRel) {
+    const fromFile = path.posix.join(ctx.paths.designRel, change.fromRel);
+    for (const inspect of inspects.all()) inspect.retarget(fromFile, file);
+  } else if (change.action === 'removed') {
+    for (const inspect of inspects.all()) inspect.remove(file);
+  }
+});
+
 collab = createCollab(ctx, api);
 const aiActivity = createAiActivity(ctx);
 
@@ -152,6 +198,16 @@ ctx.bus.on('ai-activity', (payload: { file: string; entry: AiActivityEntry | nul
     payload.entry ? { name: payload.entry.author, since: payload.entry.startedAt } : null
   );
 });
+// T16 — an AI edit whose heartbeat went silent (the driver crashed) did not
+// finish: whatever it wrote stays unpublished for the person's decision. An
+// explicit /end already closed its action, so this is a no-op then.
+ctx.bus.on('ai-activity', (payload: { file: string; entry: AiActivityEntry | null }) => {
+  if (payload.entry) return;
+  void ctx.syncControl
+    ?.current?.()
+    ?.endAiAction?.(`edit:${payload.file}`, 'failed')
+    ?.catch(() => {});
+});
 const gitLifecycle = createGitLifecycle(ctx, collab.registry);
 // Phase 13 / DDR-029 — fs-watch-driven canvas activity overlay. Subscribes to
 // `fs:any` and emits `activity:change`; ws.ts forwards it to canvas iframes.