@1agh/maude 0.15.0

package/plugins/design/dev-server/bin/smoke.sh

@@ -0,0 +1,272 @@
+#!/usr/bin/env bash
+# smoke.sh — batch-screenshot every UI canvas + preview specimen.
+# Catches "build green ≠ user-visible green" regressions that bypass the
+# per-canvas hooks in /design:edit step 7 / /design:new step 9 — typically
+# dev-server infra changes or bulk multi-canvas migrations. See DDR-021.
+#
+# Usage:
+#   smoke.sh [--root <repo>]
+#            [--out-dir <dir>]
+#            [--include-system 0|1]   (default 1)
+#            [--timeout <secs>]       (default 8)
+#            [--engine auto|agent-browser|playwright]
+#
+# Reads:
+#   $DESIGN_ROOT/_server.json   (must exist — caller runs server-up.sh first)
+#   $DESIGN_ROOT/ui/*.tsx       (canvases)
+#   $DESIGN_ROOT/system/*/preview/*.tsx   (specimens, when --include-system 1)
+#
+# Writes:
+#   <out-dir>/<slug>.png        (one screenshot per canvas)
+#   <out-dir>/report.tsv        (machine-parseable summary)
+#   <out-dir>/report.md         (human-readable summary, links every PNG)
+#
+# Stdout: one line per canvas, tab-separated:
+#   STATUS \t FILE \t SCREENSHOT \t DETAIL
+# Stderr: diagnostic / progress.
+# Exit:   0 = all green / 3 = at least one blank/error / 1 = missing deps / 2 = bad args.
+
+REPO=""
+OUT_DIR=""
+INCLUDE_SYSTEM=1
+TIMEOUT=8
+ENGINE="auto"
+
+while [ $# -gt 0 ]; do
+  case "$1" in
+    --root)           REPO="$2"; shift 2 ;;
+    --out-dir)        OUT_DIR="$2"; shift 2 ;;
+    --include-system) INCLUDE_SYSTEM="$2"; shift 2 ;;
+    --timeout)        TIMEOUT="$2"; shift 2 ;;
+    --engine)         ENGINE="$2"; shift 2 ;;
+    --help|-h)
+      sed -n '2,28p' "$0" | sed 's/^# \?//'
+      exit 0
+      ;;
+    *)
+      echo "smoke.sh: unknown arg '$1' (try --help)" >&2
+      exit 2
+      ;;
+  esac
+done
+
+# ---------- resolve repo + design root ----------
+if [ -z "$REPO" ]; then
+  REPO="${CLAUDE_PROJECT_DIR:-$(git rev-parse --show-toplevel 2>/dev/null || pwd)}"
+fi
+DESIGN_ROOT="$REPO/.design"
+[ -d "$DESIGN_ROOT" ] || { echo "smoke.sh: no .design/ under $REPO" >&2; exit 1; }
+
+STATE="$DESIGN_ROOT/_server.json"
+[ -f "$STATE" ] || { echo "smoke.sh: $STATE missing — run server-up.sh first" >&2; exit 1; }
+
+if command -v jq >/dev/null 2>&1; then
+  PORT=$(jq -r .port "$STATE" 2>/dev/null)
+else
+  PORT=$(sed -nE 's/.*"port"[[:space:]]*:[[:space:]]*([0-9]+).*/\1/p' "$STATE" | head -n1)
+fi
+[ -n "$PORT" ] || { echo "smoke.sh: no port in $STATE" >&2; exit 1; }
+
+# ---------- resolve out-dir ----------
+if [ -z "$OUT_DIR" ]; then
+  TS=$(date +%Y%m%d-%H%M%S)
+  OUT_DIR="$DESIGN_ROOT/_history/_smoke/$TS"
+fi
+mkdir -p "$OUT_DIR"
+
+# ---------- engine resolution ----------
+if [ "$ENGINE" = "auto" ]; then
+  if command -v agent-browser >/dev/null 2>&1; then
+    ENGINE="agent-browser"
+  else
+    ENGINE="playwright"
+  fi
+fi
+echo "→ smoke engine: $ENGINE | port: $PORT | out: $OUT_DIR" >&2
+
+# ---------- collect canvases ----------
+CANVASES=""
+if [ -d "$DESIGN_ROOT/ui" ]; then
+  while IFS= read -r f; do
+    base=$(basename "$f")
+    case "$base" in _*) continue ;; esac
+    CANVASES="$CANVASES$f"$'\n'
+  done < <(find "$DESIGN_ROOT/ui" -maxdepth 1 -type f -name '*.tsx' 2>/dev/null | sort)
+fi
+
+if [ "$INCLUDE_SYSTEM" = "1" ] && [ -d "$DESIGN_ROOT/system" ]; then
+  while IFS= read -r f; do
+    base=$(basename "$f")
+    case "$base" in _*) continue ;; esac
+    CANVASES="$CANVASES$f"$'\n'
+  done < <(find "$DESIGN_ROOT/system" -type f -name '*.tsx' -path '*/preview/*' 2>/dev/null | sort)
+fi
+
+CANVASES=$(printf '%s' "$CANVASES" | sed '/^$/d')
+COUNT=$(printf '%s' "$CANVASES" | grep -c .)
+[ "$COUNT" -gt 0 ] || { echo "smoke.sh: no canvases found (ui/*.tsx or system/*/preview/*.tsx)" >&2; exit 1; }
+echo "→ found $COUNT canvases" >&2
+
+# ---------- helpers ----------
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+SLUG_HELPER="$SCRIPT_DIR/slug.sh"
+
+urlencode_path() {
+  # Encode spaces only — leaves /, ., etc alone. Server resolves these.
+  printf '%s' "$1" | sed 's/ /%20/g'
+}
+
+# Probe a canvas via agent-browser. Returns three lines on stdout:
+#   <status>   one of OK / BLANK / ERROR
+#   <detail>   short summary string
+#   <screenshot-path-or-empty>
+probe_agent_browser() {
+  local url="$1"
+  local out_png="$2"
+
+  agent-browser open "$url" >/dev/null 2>&1 || { echo "ERROR"; echo "open-failed"; echo ""; return; }
+
+  # Poll for any DC marker — [data-dc-screen], [data-dc-slot], [data-cd-id].
+  # Specimens may not have any of these, so we also accept body innerText > 0.
+  local poll=0
+  local mounted=0
+  while [ $poll -lt "$TIMEOUT" ]; do
+    sleep 1
+    poll=$((poll + 1))
+    local raw
+    raw=$(agent-browser eval "document.querySelectorAll('[data-dc-screen],[data-dc-slot],[data-cd-id]').length + (document.body && document.body.innerText.trim().length > 0 ? 1000 : 0)" 2>/dev/null)
+    raw=$(printf '%s' "$raw" | tr -d '[:space:]')
+    case "$raw" in
+      ''|*[!0-9]*) continue ;;
+      0) continue ;;
+      *) mounted=1; break ;;
+    esac
+  done
+
+  # Capture screenshot regardless — the PNG is evidence even on failure.
+  agent-browser screenshot --full "$out_png" >/dev/null 2>&1 || true
+
+  if [ $mounted -eq 0 ]; then
+    echo "BLANK"
+    echo "no-dc-markers-no-text-after-${TIMEOUT}s"
+    echo "$out_png"
+    return
+  fi
+
+  # Probe for visible error overlays (react-error-overlay, common patterns).
+  local err
+  err=$(agent-browser eval "(() => {
+    const sel = ['#__react-error-overlay', '.react-error-overlay', '[data-error-overlay]', 'pre.error-stack'];
+    for (const s of sel) { const el = document.querySelector(s); if (el && el.innerText) return el.innerText.slice(0, 120); }
+    const body = document.body && document.body.innerText || '';
+    if (body.startsWith('Error:') || body.startsWith('SyntaxError:') || body.startsWith('ReferenceError:')) return body.slice(0, 120);
+    return '';
+  })()" 2>/dev/null)
+  # Strip wrapping quotes that agent-browser eval adds for strings.
+  err=$(printf '%s' "$err" | sed 's/^"//; s/"$//; s/^\\n//; s/\\n$//')
+
+  if [ -n "$err" ] && [ "$err" != "null" ] && [ "$err" != "undefined" ]; then
+    echo "ERROR"
+    echo "$err"
+    echo "$out_png"
+    return
+  fi
+
+  # PNG size sanity — < 2 KB usually means blank background only.
+  if [ -s "$out_png" ]; then
+    local size
+    size=$(wc -c < "$out_png" 2>/dev/null | tr -d ' ')
+    if [ -n "$size" ] && [ "$size" -lt 2048 ]; then
+      echo "BLANK"
+      echo "png-${size}B"
+      echo "$out_png"
+      return
+    fi
+  fi
+
+  echo "OK"
+  echo "ok"
+  echo "$out_png"
+}
+
+# ---------- iterate ----------
+TSV="$OUT_DIR/report.tsv"
+MD="$OUT_DIR/report.md"
+printf 'status\tfile\tscreenshot\tdetail\n' > "$TSV"
+{
+  echo "# Smoke report — $(date '+%Y-%m-%d %H:%M:%S')"
+  echo
+  echo "- repo: \`$REPO\`"
+  echo "- port: $PORT"
+  echo "- canvases: $COUNT"
+  echo
+  echo "| status | file | screenshot | detail |"
+  echo "|---|---|---|---|"
+} > "$MD"
+
+FAILED=0
+N=0
+while IFS= read -r CANVAS; do
+  [ -z "$CANVAS" ] && continue
+  N=$((N + 1))
+  REL="${CANVAS#$DESIGN_ROOT/}"
+  REL_ENC=$(urlencode_path "$REL")
+  URL="http://localhost:$PORT/$REL_ENC"
+  SLUG=$(bash "$SLUG_HELPER" "$REL" 2>/dev/null || printf '%s' "$REL" | tr '/ ' '__' | tr '[:upper:]' '[:lower:]')
+  OUT_PNG="$OUT_DIR/$SLUG.png"
+
+  printf '  [%d/%d] %s … ' "$N" "$COUNT" "$REL" >&2
+
+  if [ "$ENGINE" = "agent-browser" ]; then
+    RESULT=$(probe_agent_browser "$URL" "$OUT_PNG")
+  else
+    # Playwright fallback — coarser: just screenshot, accept any PNG > 2 KB as OK.
+    # See _screenshot-playwright.mjs for the underlying tool.
+    bash "$SCRIPT_DIR/screenshot.sh" --url "$URL" --full --out "$OUT_PNG" --engine playwright --timeout "$TIMEOUT" >/dev/null 2>&1
+    if [ -s "$OUT_PNG" ]; then
+      SIZE=$(wc -c < "$OUT_PNG" | tr -d ' ')
+      if [ "$SIZE" -lt 2048 ]; then
+        RESULT=$'BLANK\npng-'"$SIZE"$'B\n'"$OUT_PNG"
+      else
+        RESULT=$'OK\nok\n'"$OUT_PNG"
+      fi
+    else
+      RESULT=$'ERROR\nno-png\n'"$OUT_PNG"
+    fi
+  fi
+
+  STATUS=$(printf '%s\n' "$RESULT" | sed -n '1p')
+  DETAIL=$(printf '%s\n' "$RESULT" | sed -n '2p')
+  SHOT=$(printf '%s\n' "$RESULT" | sed -n '3p')
+
+  case "$STATUS" in
+    OK)    SYM="✓"; echo "$SYM" >&2 ;;
+    BLANK) SYM="✗"; FAILED=$((FAILED + 1)); echo "$SYM blank ($DETAIL)" >&2 ;;
+    ERROR) SYM="⚠"; FAILED=$((FAILED + 1)); echo "$SYM error ($DETAIL)" >&2 ;;
+    *)     SYM="?"; FAILED=$((FAILED + 1)); echo "? unknown ($STATUS)" >&2 ;;
+  esac
+
+  printf '%s\t%s\t%s\t%s\n' "$STATUS" "$REL" "$SHOT" "$DETAIL" >> "$TSV"
+  printf '| %s %s | `%s` | [`%s`](%s) | %s |\n' "$SYM" "$STATUS" "$REL" "$(basename "$SHOT")" "$(basename "$SHOT")" "$DETAIL" >> "$MD"
+
+  printf '%s\t%s\t%s\t%s\n' "$STATUS" "$REL" "$SHOT" "$DETAIL"
+done <<< "$CANVASES"
+
+{
+  echo
+  if [ $FAILED -eq 0 ]; then
+    echo "**Result:** ✓ all $COUNT canvases rendered."
+  else
+    echo "**Result:** ✗ $FAILED / $COUNT canvases failed."
+  fi
+} >> "$MD"
+
+echo "→ report: $MD" >&2
+echo "→ tsv:    $TSV" >&2
+
+if [ $FAILED -gt 0 ]; then
+  echo "✗ smoke: $FAILED / $COUNT canvases failed" >&2
+  exit 3
+fi
+echo "✓ smoke: all $COUNT canvases rendered" >&2
+exit 0

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

@@ -0,0 +1,267 @@
+#!/usr/bin/env bun
+// Build orchestrator for the dev-server.
+//
+// Three steps (run on demand):
+//   (a) Client JSX bundle:  client/app.jsx + React 19  ->  dist/client.bundle.js (IIFE, tree-shaken).
+//   (b) CSS bundle:         client/styles/_index.css (Lightning CSS, @layer, OKLCH fallback).
+//   (c) Server binary:      server.ts  ->  dist/maude-<platform>  (bun build --compile, per-platform).
+//
+// Modes:
+//   bun run build.ts                       -> dev build for current platform (no compile, no minify)
+//   bun run build.ts --release             -> release build for all platforms in the matrix
+//   bun run build.ts --release --target=bun-darwin-arm64
+//   bun run build.ts --watch               -> watch client + CSS; broadcast over HMR socket
+//   bun run build.ts --dry-run             -> exit 0 without writing files (smoke for CI / Task 2 validation)
+//
+// Per DDR-009 (Bun runtime authoritative) + DDR-012 (React 19 unified) + DDR-014 (Lightning CSS).
+
+import { existsSync, mkdirSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { browserslistToTargets, bundle as lcssBundle } from 'lightningcss';
+
+const ROOT = dirname(fileURLToPath(import.meta.url));
+const DIST = join(ROOT, 'dist');
+
+const ARGS = new Set(process.argv.slice(2));
+const FLAG_TARGET = process.argv.find((a) => a.startsWith('--target='))?.slice('--target='.length);
+const MODE: 'dev' | 'release' | 'dry' = ARGS.has('--dry-run')
+  ? 'dry'
+  : ARGS.has('--release')
+    ? 'release'
+    : 'dev';
+const WATCH = ARGS.has('--watch');
+
+const PLATFORM_MATRIX = [
+  'bun-darwin-arm64',
+  'bun-darwin-x64',
+  'bun-linux-x64',
+  'bun-linux-arm64',
+  'bun-linux-x64-musl',
+  'bun-linux-arm64-musl',
+  'bun-windows-x64',
+] as const;
+
+type PlatformTarget = (typeof PLATFORM_MATRIX)[number];
+
+function platformSlug(target: PlatformTarget): string {
+  // bun calls Windows "windows"; npm and process.platform call it "win32".
+  // Sub-package directories + the build-binaries.yml matrix slug use win32-x64.
+  const s = target.replace(/^bun-/, '');
+  return s === 'windows-x64' ? 'win32-x64' : s;
+}
+
+function currentTarget(): PlatformTarget {
+  const p = process.platform;
+  const a = process.arch;
+  if (p === 'darwin') return a === 'arm64' ? 'bun-darwin-arm64' : 'bun-darwin-x64';
+  if (p === 'linux') return a === 'arm64' ? 'bun-linux-arm64' : 'bun-linux-x64';
+  if (p === 'win32') return 'bun-windows-x64';
+  throw new Error(`Unsupported host platform: ${p}-${a}`);
+}
+
+function ensureDist() {
+  if (!existsSync(DIST)) mkdirSync(DIST, { recursive: true });
+}
+
+// ---------- (a) Client JSX bundle ----------
+
+async function buildClient(): Promise<{ outBytes: number; outPath: string }> {
+  ensureDist();
+  const outPath = join(DIST, 'client.bundle.js');
+  // Read package.json version at build time for the wordmark sub-line.
+  const pkg = JSON.parse(await Bun.file(join(ROOT, '..', '..', '..', 'package.json')).text());
+  const result = await Bun.build({
+    entrypoints: [join(ROOT, 'client/app.jsx')],
+    outdir: DIST,
+    target: 'browser',
+    // ESM — not IIFE. Bun.build's IIFE + full minify + React 19 hits a TDZ
+    // bug (`Cannot access 'VZ' before initialization`) because top-level
+    // `const`s get rotated past their declaration. ESM has stable hoisting
+    // semantics the minifier respects. Cost: `<script type="module">` in
+    // index.html (already set).
+    format: 'esm',
+    naming: 'client.bundle.js',
+    minify: MODE === 'release',
+    sourcemap: MODE === 'dev' ? 'inline' : 'none',
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(MODE === 'release' ? 'production' : 'development'),
+      __MDCC_VERSION__: JSON.stringify(pkg.version),
+    },
+  });
+  if (!result.success) {
+    const messages = result.logs.map((l) => l.message ?? String(l)).join('\n');
+    throw new Error(`Client build failed:\n${messages}`);
+  }
+  const out = Bun.file(outPath);
+  return { outBytes: out.size, outPath };
+}
+
+// ---------- (b) CSS bundle (Lightning CSS) ----------
+
+async function buildCss(): Promise<{ outBytes: number; outPath: string }> {
+  ensureDist();
+  const inputPath = join(ROOT, 'client/styles/_index.css');
+  const outPath = join(DIST, 'styles.css');
+  const { code } = lcssBundle({
+    filename: inputPath,
+    minify: MODE === 'release',
+    sourceMap: false,
+    targets: browserslistToTargets([
+      'Chrome >= 110',
+      'Safari >= 16',
+      'Firefox >= 110',
+      'Edge >= 110',
+    ]),
+    drafts: { customMedia: true },
+  });
+  await Bun.write(outPath, code);
+  return { outBytes: code.byteLength, outPath };
+}
+
+// ---------- (c) Server binary (bun build --compile, per-platform) ----------
+
+async function buildServerBinary(target: PlatformTarget): Promise<{ outPath: string }> {
+  ensureDist();
+  const slug = platformSlug(target);
+  const ext = slug.startsWith('win32') ? '.exe' : '';
+  const outPath = join(DIST, `maude-${slug}${ext}`);
+  const entry = join(ROOT, 'server.ts');
+  if (!existsSync(entry)) {
+    // T7 not landed yet — fall back to the .mjs entry so this script remains runnable mid-migration.
+    const legacy = join(ROOT, 'server.mjs');
+    if (!existsSync(legacy)) throw new Error(`Neither server.ts nor server.mjs exists in ${ROOT}`);
+    const proc = Bun.spawn(
+      [
+        'bun',
+        'build',
+        '--compile',
+        `--target=${target}`,
+        '--minify',
+        '--sourcemap',
+        `--outfile=${outPath}`,
+        legacy,
+      ],
+      { cwd: ROOT, stdout: 'inherit', stderr: 'inherit' }
+    );
+    const code = await proc.exited;
+    if (code !== 0)
+      throw new Error(`bun build --compile (legacy) failed for ${target} (exit ${code})`);
+    return { outPath };
+  }
+  const proc = Bun.spawn(
+    [
+      'bun',
+      'build',
+      '--compile',
+      `--target=${target}`,
+      '--minify',
+      '--sourcemap',
+      '--smol',
+      `--outfile=${outPath}`,
+      entry,
+    ],
+    { cwd: ROOT, stdout: 'inherit', stderr: 'inherit' }
+  );
+  const code = await proc.exited;
+  if (code !== 0) throw new Error(`bun build --compile failed for ${target} (exit ${code})`);
+  return { outPath };
+}
+
+// ---------- Watch mode ----------
+
+async function watch() {
+  await buildClient();
+  await buildCss();
+  console.log('[build:watch] initial build complete; watching client/ + server source...');
+
+  // Bun fs.watch is recursive on darwin/linux/win32.
+  const fs = await import('node:fs');
+  const seen = new Map<string, number>();
+  const debounce = 50;
+
+  const trigger = async (path: string) => {
+    const now = Date.now();
+    const last = seen.get(path) ?? 0;
+    if (now - last < debounce) return;
+    seen.set(path, now);
+    try {
+      if (path.endsWith('.css')) {
+        const r = await buildCss();
+        console.log(`[build:watch] CSS rebuilt (${r.outBytes} B)`);
+        broadcastHmr({ type: 'css-update', path: '/_client/styles.css', hash: now });
+      } else if (/\.(jsx|tsx|ts|mjs)$/.test(path)) {
+        const r = await buildClient();
+        console.log(`[build:watch] client rebuilt (${r.outBytes} B)`);
+        broadcastHmr({ type: 'module-update', path: '/_client/client.bundle.js', hash: now });
+      }
+    } catch (err) {
+      console.error('[build:watch] rebuild failed:', err);
+    }
+  };
+
+  fs.watch(join(ROOT, 'client'), { recursive: true }, (_, filename) => {
+    if (filename) void trigger(filename);
+  });
+}
+
+// HMR notifications: the dev-server (server.ts) owns the WS endpoint; here we just POST a hint.
+async function broadcastHmr(payload: object) {
+  try {
+    const port = Bun.env.MDCC_DEV_PORT ?? '4399';
+    await fetch(`http://localhost:${port}/_hmr`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+  } catch {
+    // server may not be running yet; ignore.
+  }
+}
+
+// ---------- Orchestrate ----------
+
+async function main() {
+  if (MODE === 'dry') {
+    console.log(`[build] --dry-run OK (mode=dry, target=${FLAG_TARGET ?? currentTarget()})`);
+    return;
+  }
+
+  if (WATCH) {
+    await watch();
+    // Keep alive — fs.watch holds the event loop.
+    await new Promise(() => {});
+    return;
+  }
+
+  console.log(`[build] mode=${MODE}`);
+
+  const t0 = performance.now();
+  const client = await buildClient();
+  const t1 = performance.now();
+  console.log(
+    `[build] client.bundle.js  ${client.outBytes.toLocaleString()} B  (${(t1 - t0).toFixed(0)} ms)`
+  );
+
+  const css = await buildCss();
+  const t2 = performance.now();
+  console.log(
+    `[build] styles.css        ${css.outBytes.toLocaleString()} B  (${(t2 - t1).toFixed(0)} ms)`
+  );
+
+  if (MODE === 'release') {
+    const targets: PlatformTarget[] = FLAG_TARGET
+      ? [FLAG_TARGET as PlatformTarget]
+      : [currentTarget()];
+    for (const target of targets) {
+      const t = performance.now();
+      const bin = await buildServerBinary(target);
+      console.log(`[build] ${bin.outPath}  (${(performance.now() - t).toFixed(0)} ms)`);
+    }
+  }
+}
+
+await main();
+
+export { buildClient, buildCss, buildServerBinary, PLATFORM_MATRIX, type PlatformTarget };