@1agh/maude 0.19.1 → 0.21.0

package/plugins/design/dev-server/use-keyboard-discipline.tsx

@@ -0,0 +1,125 @@
+/**
+ * @file       use-keyboard-discipline.tsx — T29 (Wave 3)
+ * @scope      plugins/design/dev-server/use-keyboard-discipline.tsx
+ * @purpose    Keyboard nudge + Cmd+A select-all-in-artboard. Bail when focus
+ *             is inside an input / textarea / contenteditable so typing
+ *             into the dev-server's own inputs (file tree filter, etc.)
+ *             never collides.
+ *
+ *             Scope decision — arrow nudge applies to **artboards** only.
+ *             User content inside artboards has no live-position channel
+ *             (canvas surface is HTML; element positions are CSS-derived
+ *             from the compiled JSX, not directly manipulable). Element
+ *             nudge would require either an ephemeral CSS-transform overlay
+ *             (cleaner) or a TSX rewrite channel (heavier). Out of scope
+ *             for this wave — the artboard channel + dragBus.commitPositions
+ *             already exists, so we leverage that and document the
+ *             limitation here.
+ *
+ *             Cmd+D duplicate is also deferred — same architectural reason
+ *             (no duplicate channel). Esc is owned by the input-router's
+ *             onEscape callback, so we don't duplicate it here.
+ *
+ *             Distance:
+ *               • Arrow      → 1 world-unit step (DDR-028 world units, not
+ *                              screen px).
+ *               • Shift+Arrow → 10 world-unit step.
+ */
+
+import { useEffect } from 'react';
+
+import { useArtboardsContext, useDragStateContext } from './canvas-lib.tsx';
+import { isEditableTarget } from './input-router.tsx';
+import { type Selection, useSelectionSet } from './use-selection-set.tsx';
+
+const STEP_SMALL = 1;
+const STEP_LARGE = 10;
+
+export interface NudgeInput {
+  key: string;
+  shift: boolean;
+}
+
+/**
+ * Map a keyboard event into a (dx, dy) delta in world units. Returns null
+ * when the key isn't an arrow. Exported for unit tests.
+ */
+export function nudgeDelta(input: NudgeInput): { dx: number; dy: number } | null {
+  const step = input.shift ? STEP_LARGE : STEP_SMALL;
+  switch (input.key) {
+    case 'ArrowLeft':
+      return { dx: -step, dy: 0 };
+    case 'ArrowRight':
+      return { dx: step, dy: 0 };
+    case 'ArrowUp':
+      return { dx: 0, dy: -step };
+    case 'ArrowDown':
+      return { dx: 0, dy: step };
+    default:
+      return null;
+  }
+}
+
+export function useKeyboardDiscipline(): void {
+  const selSet = useSelectionSet();
+  const artboardsCtx = useArtboardsContext();
+  const dragBus = useDragStateContext();
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (isEditableTarget(e.target)) return;
+
+      // Cmd+A → select all stamped elements in the active artboard.
+      const isMeta = e.metaKey || e.ctrlKey;
+      if (isMeta && e.key.toLowerCase() === 'a') {
+        if (!artboardsCtx) return;
+        const id = artboardsCtx.activeArtboardId;
+        if (!id) return;
+        const root = document.querySelector(`[data-dc-screen="${id}"] .dc-artboard-body`);
+        if (!root) return;
+        const stamped = root.querySelectorAll('[data-cd-id]');
+        if (stamped.length === 0) return;
+        const hits: Selection[] = [];
+        for (const el of stamped) {
+          const cdId = el.getAttribute('data-cd-id');
+          if (!cdId) continue;
+          hits.push({
+            id: cdId,
+            selector: `[data-cd-id="${cdId}"]`,
+            artboardId: id,
+            tag: el.tagName.toLowerCase(),
+          });
+        }
+        if (hits.length === 0) return;
+        e.preventDefault();
+        selSet.replace(hits);
+        return;
+      }
+
+      // Arrow nudge — artboards only (see file header for the why).
+      const delta = nudgeDelta({ key: e.key, shift: e.shiftKey });
+      if (!delta) return;
+      if (isMeta || e.altKey) return; // modifier combos reserved for future
+      if (!artboardsCtx || !dragBus) return;
+
+      const artboardSelections = selSet.selected.filter((s) => !!s.artboardId && !s.id);
+      if (artboardSelections.length === 0) return;
+      const ids = new Set(artboardSelections.map((s) => s.artboardId as string));
+      const targets = artboardsCtx.artboards.filter((r) => ids.has(r.id));
+      if (targets.length === 0) return;
+
+      e.preventDefault();
+      const moved = targets.map((r) => ({
+        id: r.id,
+        x: Math.round(r.x + delta.dx),
+        y: Math.round(r.y + delta.dy),
+      }));
+      dragBus.commitPositions(moved);
+    };
+
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [selSet, artboardsCtx, dragBus]);
+}

package/plugins/design/dev-server/use-undo-stack.tsx

@@ -0,0 +1,355 @@
+/**
+ * @file       use-undo-stack.tsx — React Context + Provider for the undo stack
+ * @scope      plugins/design/dev-server/use-undo-stack.tsx
+ * @purpose    Wraps the pure `undoReducer` (undo-stack.ts) in React state,
+ *             owns the async runner that awaits side-effects before applying
+ *             the next state transition, exposes the `lastLabel` HUD signal,
+ *             AND persists the stack across canvas switches via
+ *             `window.top.__maude_undo_stacks` keyed by canvas file path
+ *             (DDR-050 rev 2).
+ *
+ * Two roles in one provider:
+ *   1. **State authority** — ref-as-store synchronously between awaited
+ *      side-effects (Cmd+Z at 30 Hz key-repeat needs to see its own writes).
+ *   2. **Sinks registry** — descendants (DesignCanvasInner for layout,
+ *      AnnotationsLayer for strokes) register their side-effect functions
+ *      via `useUndoSinks().setSink(name, fn)`. The provider merges them
+ *      and uses them when rebuilding commands from records.
+ */
+
+import {
+  type ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import {
+  type CommandRecord,
+  type CommandSinks,
+  type EditCommand,
+  type UndoStackState,
+  canRedo as canRedoOf,
+  canUndo as canUndoOf,
+  loadStackState,
+  rebuildCommand,
+  saveStackState,
+  undoReducer,
+} from './undo-stack.ts';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context shape
+
+export interface UndoStackValue {
+  /**
+   * Push a fresh command. The runner calls the rebuilt command's `do()` —
+   * the new state is committed only after the side-effect resolves.
+   * Awaiting the returned promise is optional.
+   */
+  push: (record: CommandRecord) => Promise<void>;
+  /** Undo the top of `past`. No-op when empty. */
+  undo: () => Promise<void>;
+  /** Redo the top of `future`. No-op when empty. */
+  redo: () => Promise<void>;
+  /** Drop both stacks (external edit). */
+  clear: (reason?: string) => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  /** Most recent operation label. HUD reads this. */
+  lastLabel: string | null;
+  /** Monotonic counter — HUD subscribes to bump dismiss timer per op. */
+  lastTick: number;
+}
+
+const UndoStackContext = createContext<UndoStackValue | null>(null);
+
+const NOOP_VALUE: UndoStackValue = {
+  push: () => Promise.resolve(),
+  undo: () => Promise.resolve(),
+  redo: () => Promise.resolve(),
+  clear: () => {},
+  canUndo: false,
+  canRedo: false,
+  lastLabel: null,
+  lastTick: 0,
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Sinks context — descendants register side-effect functions here.
+
+export interface UndoSinksValue {
+  /** Register or replace a sink. Pass `undefined` to unregister. */
+  setSink: <K extends keyof CommandSinks>(key: K, fn: CommandSinks[K]) => void;
+}
+
+const UndoSinksContext = createContext<UndoSinksValue | null>(null);
+
+const NOOP_SINKS: UndoSinksValue = { setSink: () => {} };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+
+export interface UndoStackProviderProps {
+  children: ReactNode;
+  /**
+   * Canvas file path (e.g. `.design/ui/Foo.tsx` or repo-relative). Required
+   * for cross-canvas persistence — the stack is keyed by this string in the
+   * `window.top.__maude_undo_stacks` Map. Two iframes with the same canvas
+   * file share one stack; switching canvases gets a fresh stack keyed under
+   * a different path.
+   *
+   * Optional only because some test harnesses mount the provider standalone;
+   * an empty / undefined value disables persistence (stack is ephemeral).
+   */
+  canvasFile?: string;
+  /**
+   * Optional async-failure hook. Fires when a command's `do()` / `undo()`
+   * throws or rejects. The reducer never commits the transition for a failed
+   * side-effect (push: cmd not appended; undo: stays in past; redo: stays in
+   * future). Defaults to a console.warn.
+   */
+  onCommandError?: (err: unknown, op: 'do' | 'undo', record: CommandRecord) => void;
+}
+
+export function UndoStackProvider({
+  children,
+  canvasFile,
+  onCommandError,
+}: UndoStackProviderProps) {
+  // Ref is the authoritative store — the async runner reads + writes it
+  // synchronously between awaited side-effects.
+  const stateRef = useRef<UndoStackState>(
+    canvasFile ? loadStackState(canvasFile) : { past: [], future: [] }
+  );
+  const [, setRenderToken] = useState(0);
+
+  // Sinks live in a ref so writes don't churn re-renders; the runner reads
+  // them on every push/undo/redo.
+  const sinksRef = useRef<CommandSinks>({});
+
+  // canvasFile ref tracks the current key — used for persistence + for
+  // re-hydration when the consumer remounts under a different file.
+  const fileRef = useRef<string | undefined>(canvasFile);
+
+  // Re-hydrate state when canvasFile changes (e.g. parent shell remounts
+  // the provider for a new canvas). For the typical iframe lifecycle the
+  // provider unmounts entirely on canvas switch so this branch is rarely
+  // hit — it's a safety net for test harnesses that swap files in place.
+  useEffect(() => {
+    if (canvasFile === fileRef.current) return;
+    fileRef.current = canvasFile;
+    stateRef.current = canvasFile ? loadStackState(canvasFile) : { past: [], future: [] };
+    setRenderToken((t) => t + 1);
+  }, [canvasFile]);
+
+  const writeState = useCallback((next: UndoStackState) => {
+    stateRef.current = next;
+    if (fileRef.current) saveStackState(fileRef.current, next);
+    setRenderToken((t) => t + 1);
+  }, []);
+
+  const [lastLabel, setLastLabel] = useState<string | null>(null);
+  const [lastTick, setLastTick] = useState(0);
+
+  // Serialize concurrent ops. Cmd+Z held down can repeat at ~30 Hz; the
+  // runner awaits each side-effect before applying state.
+  const inFlightRef = useRef<Promise<void>>(Promise.resolve());
+
+  const reportError = useCallback(
+    (err: unknown, op: 'do' | 'undo', record: CommandRecord) => {
+      if (onCommandError) {
+        onCommandError(err, op, record);
+        return;
+      }
+      console.warn(`[undo-stack] ${op} failed for "${record.label}":`, err);
+    },
+    [onCommandError]
+  );
+
+  const bumpLabel = useCallback((label: string | null) => {
+    setLastLabel(label);
+    setLastTick((t) => t + 1);
+  }, []);
+
+  const enqueue = useCallback((task: () => Promise<void>): Promise<void> => {
+    const next = inFlightRef.current.then(task, task);
+    inFlightRef.current = next.catch(() => {
+      /* swallow — per-op error already reported */
+    });
+    return next;
+  }, []);
+
+  /**
+   * Build a runnable EditCommand from a record using the iframe's current
+   * sinks. Returns `null` when the kind isn't registered or its required
+   * sink isn't bound — the runner skips the entry and bumps a label so the
+   * user sees `"(skipped: …)"` in the HUD instead of silent failure.
+   */
+  const build = useCallback((record: CommandRecord): EditCommand | null => {
+    return rebuildCommand(record, sinksRef.current);
+  }, []);
+
+  const push = useCallback(
+    (record: CommandRecord): Promise<void> =>
+      enqueue(async () => {
+        const cmd = build(record);
+        if (!cmd) {
+          bumpLabel(`(skipped: ${record.kind})`);
+          return;
+        }
+        try {
+          await cmd.do();
+        } catch (err) {
+          reportError(err, 'do', record);
+          return;
+        }
+        writeState(undoReducer(stateRef.current, { type: 'push', record }));
+        bumpLabel(record.label);
+      }),
+    [enqueue, build, reportError, bumpLabel, writeState]
+  );
+
+  const undo = useCallback(
+    (): Promise<void> =>
+      enqueue(async () => {
+        const cur = stateRef.current;
+        if (!canUndoOf(cur)) return;
+        const top = cur.past[cur.past.length - 1];
+        if (!top) return;
+        const cmd = build(top);
+        if (!cmd) {
+          bumpLabel(`(skipped: ${top.kind})`);
+          return;
+        }
+        try {
+          await cmd.undo();
+        } catch (err) {
+          reportError(err, 'undo', top);
+          return;
+        }
+        writeState(undoReducer(stateRef.current, { type: 'undo' }));
+        bumpLabel(`Undo: ${top.label}`);
+      }),
+    [enqueue, build, reportError, bumpLabel, writeState]
+  );
+
+  const redo = useCallback(
+    (): Promise<void> =>
+      enqueue(async () => {
+        const cur = stateRef.current;
+        if (!canRedoOf(cur)) return;
+        const top = cur.future[cur.future.length - 1];
+        if (!top) return;
+        const cmd = build(top);
+        if (!cmd) {
+          bumpLabel(`(skipped: ${top.kind})`);
+          return;
+        }
+        try {
+          await cmd.do();
+        } catch (err) {
+          reportError(err, 'do', top);
+          return;
+        }
+        writeState(undoReducer(stateRef.current, { type: 'redo' }));
+        bumpLabel(`Redo: ${top.label}`);
+      }),
+    [enqueue, build, reportError, bumpLabel, writeState]
+  );
+
+  const clear = useCallback(
+    (reason?: string) => {
+      writeState({ past: [], future: [] });
+      bumpLabel(reason ?? null);
+    },
+    [bumpLabel, writeState]
+  );
+
+  // External-edit invalidation. Listen for an explicit window event
+  // dispatched by client/hmr.mjs when an external .meta.json change arrives.
+  // The self-echo guard ignores our own PATCH bouncing back through fs-watch
+  // (see canvas-lib's `__maude_last_meta_self_write_at`).
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const onInvalidate = (ev: Event) => {
+      const w = window as unknown as { __maude_last_meta_self_write_at?: number };
+      const last = w.__maude_last_meta_self_write_at ?? 0;
+      if (Date.now() - last < 500) return;
+      const reason =
+        (ev as CustomEvent<{ reason?: string }>).detail?.reason ?? 'External edit detected';
+      writeState({ past: [], future: [] });
+      bumpLabel(reason);
+    };
+    window.addEventListener('maude:invalidate-undo', onInvalidate);
+    return () => window.removeEventListener('maude:invalidate-undo', onInvalidate);
+  }, [writeState, bumpLabel]);
+
+  // Sinks API exposed via a sibling context — descendants register their
+  // own side-effect functions without prop-drilling.
+  const sinksApi = useMemo<UndoSinksValue>(
+    () => ({
+      setSink: (key, fn) => {
+        if (fn === undefined) {
+          delete sinksRef.current[key];
+        } else {
+          (sinksRef.current as Record<string, unknown>)[key] = fn as unknown;
+        }
+      },
+    }),
+    []
+  );
+
+  const value = useMemo<UndoStackValue>(
+    () => ({
+      push,
+      undo,
+      redo,
+      clear,
+      canUndo: canUndoOf(stateRef.current),
+      canRedo: canRedoOf(stateRef.current),
+      lastLabel,
+      lastTick,
+    }),
+    // `stateRef.current` doesn't trigger memo invalidation; we depend on
+    // `lastTick` (bumped by every push/undo/redo/clear) as the proxy so the
+    // memoized canUndo/canRedo readouts re-evaluate on each transition.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [push, undo, redo, clear, lastLabel, lastTick]
+  );
+
+  return (
+    <UndoStackContext.Provider value={value}>
+      <UndoSinksContext.Provider value={sinksApi}>{children}</UndoSinksContext.Provider>
+    </UndoStackContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hooks
+
+export function useUndoStack(): UndoStackValue {
+  const ctx = useContext(UndoStackContext);
+  if (!ctx) throw new Error('useUndoStack must be used inside <UndoStackProvider>');
+  return ctx;
+}
+
+export function useUndoStackOptional(): UndoStackValue {
+  return useContext(UndoStackContext) ?? NOOP_VALUE;
+}
+
+/**
+ * Sinks-registration hook. Use a setSink call inside a useEffect — register
+ * on mount, unregister on unmount.
+ */
+export function useUndoSinks(): UndoSinksValue {
+  return useContext(UndoSinksContext) ?? NOOP_SINKS;
+}
+
+export { UndoStackContext, UndoSinksContext };
+
+// Re-export the EditCommand type for ergonomic single-import in consumers.
+export type { CommandRecord, EditCommand } from './undo-stack.ts';

package/plugins/design/dev-server/ws.ts

@@ -4,13 +4,60 @@
 import type { ServerWebSocket, WebSocketHandler } from 'bun';
 
 import type { Api } from './api.ts';
+import type { Collab, RoomConn } from './collab/index.ts';
 import type { Context } from './context.ts';
 import { createHmrBroadcaster } from './hmr-broadcast.ts';
 import type { Inspect } from './inspect.ts';
 
-export interface WsData {
-  id: string;
-  remote: string;
+/**
+ * Per-connection state. `kind` discriminates between the legacy JSON
+ * inspector channel (`/_ws`) and the Phase 8 binary collab channel
+ * (`/_ws/collab/:slug`). server.ts sets this at upgrade time.
+ */
+export type WsData =
+  | {
+      id: string;
+      remote: string;
+      kind: 'inspector';
+    }
+  | {
+      id: string;
+      remote: string;
+      kind: 'collab';
+      slug: string;
+    };
+
+/**
+ * Match the collab URL pattern and return the slug, or `null` if the path
+ * isn't a collab endpoint. Exported so server.ts owns the routing decision.
+ *
+ * Slug grammar matches `api.fileSlug` output: `[a-z0-9_-]+`. URL-encoded chars
+ * are rejected here — the legacy inspector path stays the catch-all.
+ */
+export function parseCollabSlug(pathname: string): string | null {
+  const m = pathname.match(/^\/_ws\/collab\/([a-z0-9_-]+)$/i);
+  return m ? (m[1] ?? null) : null;
+}
+
+/**
+ * DDR-047 — collab WS upgrades MUST come from a loopback host. The header
+ * carries `<host>:<port>` (or `<host>` if default-port); strip the port and
+ * compare against the loopback aliases. Anything else returns false → server.ts
+ * answers 403.
+ */
+export function isLoopbackHost(host: string | null): boolean {
+  if (!host) return false;
+  // Strip port. `[::1]:4399` keeps the `::1` bracketed; handle both shapes.
+  let h = host.trim().toLowerCase();
+  if (h.startsWith('[')) {
+    const close = h.indexOf(']');
+    if (close === -1) return false;
+    h = h.slice(1, close);
+  } else {
+    const colon = h.lastIndexOf(':');
+    if (colon !== -1) h = h.slice(0, colon);
+  }
+  return h === '127.0.0.1' || h === '::1' || h === 'localhost';
 }
 
 export interface Ws {
@@ -19,7 +66,7 @@ export interface Ws {
   clientCount(): number;
 }
 
-export function createWs(ctx: Context, api: Api, inspect: Inspect): Ws {
+export function createWs(ctx: Context, api: Api, inspect: Inspect, collab: Collab): Ws {
   const clients = new Set<ServerWebSocket<WsData>>();
 
   function send(ws: ServerWebSocket<WsData>, payload: unknown) {
@@ -32,7 +79,10 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect): Ws {
 
   function broadcast(payload: unknown) {
     const msg = typeof payload === 'string' ? payload : JSON.stringify(payload);
-    for (const ws of clients) send(ws, msg);
+    for (const ws of clients) {
+      if (ws.data.kind !== 'inspector') continue;
+      send(ws, msg);
+    }
   }
 
   // Wire bus -> WS broadcasts. inspect.ts emits 'selected' / 'active' after every
@@ -45,20 +95,86 @@ export function createWs(ctx: Context, api: Api, inspect: Inspect): Ws {
   ctx.bus.on('comments', ({ file, comments }: { file: string; comments: unknown[] }) =>
     broadcast({ type: 'comments', file, comments })
   );
+  // Phase 8 Task 4 — AI activity banner. `entry` is null on clear / explicit
+  // end / heartbeat-grace expiry; non-null carries { file, author, …timestamps }.
+  ctx.bus.on('ai-activity', ({ file, entry }: { file: string; entry: unknown }) =>
+    broadcast({ type: 'ai-activity', file, entry })
+  );
+  // Phase 8 Task 7 — git lifecycle. `.git/HEAD` watcher emits this AFTER
+  // registry.flushAll() so any in-flight Y.Doc state is already on disk by
+  // the time the client renders the reload prompt. Inspector clients +
+  // canvas iframes both subscribe.
+  ctx.bus.on('git-lifecycle', (payload: unknown) => broadcast({ type: 'git-lifecycle', payload }));
 
   // HMR broadcaster — turns fs:any change events into `canvas-hmr` messages.
   // The iframe-side client (in _shell.html) decides reload strategy from `mode`.
   createHmrBroadcaster(ctx, (msg) => broadcast(msg));
 
+  // Bind a connection to its room. Stored per-socket so close() can find the
+  // right room to disconnect from. Multiplexed via ws.data.id.
+  const collabConns = new Map<string, { roomSlug: string; conn: RoomConn }>();
+
+  function bindCollab(ws: ServerWebSocket<WsData>, slug: string): RoomConn {
+    const conn: RoomConn = {
+      id: ws.data.id,
+      send(payload: Uint8Array) {
+        try {
+          // Bun's ws.send accepts Uint8Array directly as binary.
+          ws.send(payload);
+        } catch {
+          /* close handler will clean up */
+        }
+      },
+    };
+    collabConns.set(ws.data.id, { roomSlug: slug, conn });
+    return conn;
+  }
+
   const handler: WebSocketHandler<WsData> = {
-    open(ws) {
+    async open(ws) {
+      if (ws.data.kind === 'collab') {
+        const room = collab.registry.get(ws.data.slug);
+        const conn = bindCollab(ws, ws.data.slug);
+        await room.connect(conn);
+        return;
+      }
       clients.add(ws);
       send(ws, { type: 'snapshot', state: inspect.state });
     },
-    close(ws) {
+    async close(ws) {
+      if (ws.data.kind === 'collab') {
+        const binding = collabConns.get(ws.data.id);
+        if (binding) {
+          collabConns.delete(ws.data.id);
+          const room = collab.registry.get(binding.roomSlug);
+          room.disconnect(binding.conn);
+          if (room.size() === 0) {
+            // Drop the room when the last peer leaves so memory doesn't grow
+            // unbounded across canvases over a long session.
+            await collab.registry.drop(binding.roomSlug);
+          }
+        }
+        return;
+      }
       clients.delete(ws);
     },
     async message(ws, raw) {
+      if (ws.data.kind === 'collab') {
+        const binding = collabConns.get(ws.data.id);
+        if (!binding) return;
+        // y-websocket frames are always binary. Coerce whatever Bun handed us.
+        const bytes =
+          typeof raw === 'string'
+            ? new TextEncoder().encode(raw)
+            : raw instanceof Uint8Array
+              ? raw
+              : new Uint8Array(raw as ArrayBufferLike);
+        const room = collab.registry.get(binding.roomSlug);
+        room.receive(binding.conn, bytes);
+        return;
+      }
+
+      // Inspector channel — legacy JSON message protocol.
       // biome-ignore lint/suspicious/noExplicitAny: JSON.parse result; narrowed by runtime discriminator checks below.
       let msg: any;
       try {