feat(GLA-1098): asset-library auto-rebuild watcher + chunk-error UI + CI smoke

- watch-and-build.mjs: fs.watch over app/lib/components/pages, 5s debounce,
  npm run build + pm2 restart asset-library; runs as asset-library-watcher pm2 process
- ecosystem.config.js: register asset-library-watcher alongside asset-library
- ChunkErrorBanner.tsx: window error listener catches ChunkLoadError, shows
  "Library is rebuilding — refresh in 10s" overlay with auto-reload countdown
- layout.tsx: mount ChunkErrorBanner in root layout
- asset-library-smoke.yml: GitHub Actions job triggered on asset-library/** changes;
  npm ci → npm run build → next start → curl / (200) → curl /asset/:id (200)

Co-Authored-By: Paperclip <noreply@paperclip.ing>

Author: jqueguiner

.github/workflows/asset-library-smoke.yml

@@ -0,0 +1,61 @@
+name: Asset Library Smoke
+
+on:
+  pull_request:
+    branches: [master]
+    paths:
+      - "scripts/asset-library/**"
+      - ".github/workflows/asset-library-smoke.yml"
+
+jobs:
+  smoke:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    defaults:
+      run:
+        working-directory: scripts/asset-library
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+          cache-dependency-path: scripts/asset-library/package-lock.json
+
+      - name: Install
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        env:
+          NODE_ENV: production
+
+      - name: Start
+        run: node node_modules/.bin/next start -p 7700 &
+        env:
+          NODE_ENV: production
+
+      - name: Wait for server (30s)
+        run: |
+          for i in $(seq 1 30); do
+            if curl -sf -o /dev/null http://127.0.0.1:7700/; then
+              echo "server up after ${i}s"
+              exit 0
+            fi
+            sleep 1
+          done
+          echo "FAIL: server did not respond within 30s" >&2
+          exit 1
+
+      - name: Smoke — root (expect 200)
+        run: |
+          code=$(curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1:7700/)
+          [ "$code" = "200" ] || { echo "root: expected 200, got $code" >&2; exit 1; }
+
+      - name: Smoke — /asset/:id (expect 200, graceful not-found page)
+        run: |
+          code=$(curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1:7700/asset/ci-smoke-placeholder)
+          [ "$code" = "200" ] || { echo "/asset/ci-smoke-placeholder: expected 200, got $code" >&2; exit 1; }

scripts/asset-library/app/components/ChunkErrorBanner.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function ChunkErrorBanner() {
+  const [show, setShow] = useState(false);
+  const [countdown, setCountdown] = useState(10);
+
+  useEffect(() => {
+    function handleError(event: ErrorEvent) {
+      const isChunk =
+        event.error?.name === "ChunkLoadError" ||
+        String(event.message).includes("Loading chunk") ||
+        String(event.message).includes("Failed to fetch dynamically imported") ||
+        String(event.message).includes("ChunkLoadError");
+      if (isChunk) setShow(true);
+    }
+    window.addEventListener("error", handleError);
+    return () => window.removeEventListener("error", handleError);
+  }, []);
+
+  useEffect(() => {
+    if (!show) return;
+    if (countdown <= 0) {
+      window.location.reload();
+      return;
+    }
+    const t = setTimeout(() => setCountdown((c) => c - 1), 1000);
+    return () => clearTimeout(t);
+  }, [show, countdown]);
+
+  if (!show) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-neutral-950/90 backdrop-blur-sm">
+      <div className="max-w-sm w-full mx-4 rounded-xl border border-amber-700/60 bg-amber-950/40 p-8 text-center">
+        <div className="text-3xl mb-4 animate-spin inline-block">⟳</div>
+        <h2 className="text-lg font-semibold text-amber-200 mb-2">
+          Library is rebuilding
+        </h2>
+        <p className="text-sm text-amber-300/80 mb-4">
+          A code update is being applied. Refreshing in{" "}
+          <span className="font-bold text-amber-200">{countdown}s</span>.
+        </p>
+        <button
+          onClick={() => window.location.reload()}
+          className="text-xs text-amber-400 underline hover:text-amber-200"
+        >
+          Refresh now
+        </button>
+      </div>
+    </div>
+  );
+}

scripts/asset-library/app/layout.tsx

@@ -1,18 +1,33 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import Nav from "./components/Nav";
+import ChunkErrorBanner from "./components/ChunkErrorBanner";
 
 export const metadata: Metadata = {
   title: "Marketing Asset Library",
   description: "Review and approve marketing assets — Paperclip [review-and-ship] queue.",
 };
 
-
 export default function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en">
-      <body className="antialiased">{children}</body>
+      <body className="antialiased bg-neutral-950 text-neutral-100 min-h-screen overflow-x-hidden">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
+          <header className="mb-6">
+            <h1 className="text-xl font-semibold tracking-tight text-white mb-1">
+              OpenRunner · Marketing Asset Library
+            </h1>
+            <p className="text-xs text-neutral-500">
+              Internal review surface — <a href="http://127.0.0.1:7700/" className="underline hover:text-neutral-300">http://127.0.0.1:7700/</a>
+            </p>
+          </header>
+          <Nav />
+          <ChunkErrorBanner />
+          <main>{children}</main>
+        </div>
+      </body>
     </html>
   );
 }

scripts/asset-library/ecosystem.config.js

@@ -55,5 +55,19 @@ module.exports = {
         ...notifierEnv,
       },
     },
+    {
+      // Watches source dirs and triggers rebuild + pm2 restart on change.
+      // Debounced 5s so rapid multi-file saves don't stack builds.
+      name: "asset-library-watcher",
+      cwd: path.resolve(__dirname),
+      script: path.resolve(__dirname, "watch-and-build.mjs"),
+      interpreter: `/opt/homebrew/opt/node@20/bin/node`,
+      autorestart: true,
+      max_restarts: 5,
+      env: {
+        NODE_ENV: "production",
+        PATH: `/opt/homebrew/opt/node@20/bin:${process.env.PATH ?? ""}`,
+      },
+    },
   ],
 };

scripts/asset-library/watch-and-build.mjs

@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+// Sibling pm2 process: asset-library-watcher
+// Watches source dirs, debounces 5s, rebuilds + restarts asset-library.
+import { watch } from "node:fs";
+import { execSync } from "node:child_process";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname);
+
+const WATCH_DIRS = ["app", "lib", "components", "pages"];
+const DEBOUNCE_MS = 5000;
+
+const NODE_PATH = `/opt/homebrew/opt/node@20/bin:${process.env.PATH ?? ""}`;
+
+function log(msg) {
+  process.stdout.write(`[asset-library-watcher] ${new Date().toISOString()} ${msg}\n`);
+}
+
+let debounceTimer = null;
+let building = false;
+
+function triggerBuild(changedPath) {
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => {
+    if (building) {
+      log("build in progress — skipping");
+      return;
+    }
+    building = true;
+    log(`change: ${changedPath} — npm run build`);
+    try {
+      execSync("npm run build", {
+        cwd: ROOT,
+        stdio: "inherit",
+        env: { ...process.env, NODE_ENV: "production", PATH: NODE_PATH },
+      });
+      log("build done — pm2 restart asset-library");
+      execSync("pm2 restart asset-library", { stdio: "inherit" });
+      log("restarted");
+    } catch (err) {
+      log(`ERROR: ${err.message}`);
+    } finally {
+      building = false;
+    }
+  }, DEBOUNCE_MS);
+}
+
+let watching = 0;
+for (const dir of WATCH_DIRS) {
+  const abs = resolve(ROOT, dir);
+  try {
+    watch(abs, { recursive: true }, (_event, filename) => {
+      triggerBuild(`${abs}/${filename ?? "?"}`);
+    });
+    log(`watching ${abs}`);
+    watching++;
+  } catch (err) {
+    if (err.code === "ENOENT") {
+      log(`skip ${abs} — not found`);
+    } else {
+      throw err;
+    }
+  }
+}
+
+if (watching === 0) {
+  log("ERROR: no directories found to watch — exiting");
+  process.exit(1);
+}
+
+log("watcher ready");