npm - @jamie-tam/forge - Versions diffs - 6.0.0 - Mend

@jamie-tam/forge 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (213) hide show

package/templates/wiki-html/dream-detail.html ADDED Viewed

@@ -0,0 +1,378 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Forge Wiki — Dream Detail</title>
+<meta name="forge-token" content="{{FORGE_TOKEN}}">
+<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css">
+<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html.min.js"></script>
+<style>
+  body { font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; }
+  .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+  .d2h-wrapper { font-size: 13px; }
+  .d2h-file-header { background: #f5f5f4; padding: 8px 12px; border-bottom: 1px solid #e7e5e4; }
+  .d2h-file-list-wrapper { display: none; }
+</style>
+</head>
+<body class="bg-stone-50 text-stone-900">
+<div id="root"></div>
+<script type="application/json" id="forge-state">{{FORGE_STATE}}</script>
+<script type="text/babel" data-presets="react">
+const STATE_TEXT = document.getElementById("forge-state").textContent;
+let STATE;
+try {
+  STATE = JSON.parse(STATE_TEXT);
+} catch (_e) {
+  // Preview mode — placeholder unreplaced. Render with realistic sample dream.
+  STATE = {
+    _previewMode: true,
+    dream: {
+      has_conflicts: true,
+      manifest: {
+        dream_id: "preview-2026-05-11-1200-phase4-close",
+        trigger: "phase-close",
+        trigger_detail: "Phase 4 lock (feature/auth-refactor)",
+        summary: "Consolidates Phase 4's prototype-iteration captures: merges two silent-stub gotchas with the same root cause, promotes the route-handler-naming pattern (settled across 4 features) into a convention, and prunes one completed investigation note that ADR 0042 superseded.",
+        scope: ["aiwiki/raw/", "aiwiki/gotchas/", "aiwiki/conventions/"],
+        created_at: "2026-05-11T12:00:00Z",
+        provider: "forge-local",
+        changed_pages: 1,
+        new_pages: 1,
+        deleted_pages: 1,
+        lint_status: "passed",
+        review_status: "pending",
+        reviewed_at: null,
+        base_file_hashes: {
+          "aiwiki/gotchas/2026-05-09-stub-logger-recur.md": "sha256:abc123",
+          "aiwiki/raw/2026-05-01-old-investigation.md": "sha256:def456",
+        },
+        operations: [
+          {op: "merge", files: ["aiwiki/gotchas/2026-05-08-stub-logger.md", "aiwiki/gotchas/2026-05-09-stub-logger-recur.md"], into: "aiwiki/gotchas/2026-05-09-stub-logger-recur.md", reason: "duplicate root cause — same silent-stub pattern in two contexts"},
+          {op: "promote", from: "aiwiki/raw/2026-05-10-handler-naming.md", into: "aiwiki/conventions/handler-naming.md", reason: "matches convention schema; pattern settled across 4 features"},
+          {op: "prune", file: "aiwiki/raw/2026-05-01-old-investigation.md", reason: "investigation completed; outcome superseded by ADR 0042"},
+        ],
+      },
+      files: [
+        {
+          path: "conventions/handler-naming.md",
+          kind: "new",
+          diff: "diff --git a/dev/null b/aiwiki/conventions/handler-naming.md\nnew file mode 100644\n--- /dev/null\n+++ b/aiwiki/conventions/handler-naming.md\n@@ -0,0 +1,18 @@\n+---\n+schema_id: convention\n+schema_version: 1\n+scope: folder:src/routes\n+date: 2026-05-11\n+status: active\n+---\n+\n+## The convention\n+\n+Route handlers live in `src/routes/{resource}.ts` and export a `{resource}Router` constant.\n+\n+## Rationale\n+\n+Separates handler logic (testable in isolation) from routing (testable as integration).\n+\n+## Example\n+\n+[src/routes/users.ts:1-24@e5f6789](src/routes/users.ts) — usersRouter mounts three handlers.\n",
+        },
+        {
+          path: "gotchas/2026-05-09-stub-logger-recur.md",
+          kind: "changed",
+          diff: "diff --git a/aiwiki/gotchas/2026-05-09-stub-logger-recur.md b/aiwiki/gotchas/2026-05-09-stub-logger-recur.md\n--- a/aiwiki/gotchas/2026-05-09-stub-logger-recur.md\n+++ b/aiwiki/gotchas/2026-05-09-stub-logger-recur.md\n@@ -1,8 +1,10 @@\n ---\n schema_id: gotcha\n severity: high\n-date: 2026-05-09\n-occurrences: 1\n+date: 2026-05-09\n+occurrences: 2\n+merged_from: [aiwiki/gotchas/2026-05-08-stub-logger.md]\n status: active\n ---\n \n ## What broke\n",
+          conflict: {
+            expected_hash: "sha256:abc123",
+            actual_hash: "sha256:xyz789",
+          },
+        },
+        {
+          path: "raw/2026-05-01-old-investigation.md",
+          kind: "deleted",
+          diff: "diff --git a/aiwiki/raw/2026-05-01-old-investigation.md b/dev/null\ndeleted file mode 100644\n--- a/aiwiki/raw/2026-05-01-old-investigation.md\n+++ /dev/null\n@@ -1,12 +0,0 @@\n-# Investigation: cache layer choice\n-\n-Started 2026-05-01. Explored SQLite vs Postgres vs in-memory.\n-\n-Outcome: see ADR 0042-token-storage.md\n",
+        },
+      ],
+    },
+  };
+}
+const TOKEN = STATE._previewMode ? "preview-token" : (document.querySelector('meta[name="forge-token"]')?.content || "");
+function lintBadgeClass(status) {
+  switch (status) {
+    case "passed": return "bg-emerald-100 text-emerald-800";
+    case "warnings": return "bg-amber-100 text-amber-800";
+    case "failed": return "bg-rose-100 text-rose-800";
+    default: return "bg-stone-100 text-stone-700";
+  }
+}
+function kindBadgeClass(kind) {
+  switch (kind) {
+    case "new": return "bg-emerald-100 text-emerald-800";
+    case "changed": return "bg-amber-100 text-amber-800";
+    case "deleted": return "bg-rose-100 text-rose-800";
+    default: return "bg-stone-100 text-stone-700";
+  }
+}
+function FileDiff({ file }) {
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    if (file.diff && typeof Diff2Html !== "undefined") {
+      try {
+        const html = Diff2Html.html(file.diff, {
+          drawFileList: false,
+          matching: "lines",
+          outputFormat: "side-by-side",
+          colorScheme: "light",
+        });
+        containerRef.current.innerHTML = html;
+      } catch (err) {
+        containerRef.current.innerHTML = `<pre class="text-xs p-4 bg-stone-100 overflow-x-auto">${escapeHtml(file.diff)}</pre>`;
+      }
+    } else {
+      containerRef.current.innerHTML = `<div class="p-4 text-sm text-stone-500">No diff available (binary file or external change).</div>`;
+    }
+  }, [file.diff]);
+  const conflictBorder = file.conflict ? "border-rose-300 ring-2 ring-rose-100" : "border-stone-200";
+  const conflictHeader = file.conflict ? "bg-rose-50 border-rose-200" : "bg-stone-100 border-stone-200";
+  return (
+    <div className={`border ${conflictBorder} bg-white rounded-lg overflow-hidden mb-4`}>
+      <div className={`flex items-center gap-2 px-4 py-3 ${conflictHeader} border-b`}>
+        <span className={`badge ${kindBadgeClass(file.kind)}`}>{file.kind}</span>
+        <span className="font-mono text-sm text-stone-900 flex-1">{file.path}</span>
+        {file.conflict ? (
+          <span className="badge bg-rose-100 text-rose-800" title={`Expected hash: ${file.conflict.expected_hash}\nActual hash: ${file.conflict.actual_hash}`}>
+            conflict
+          </span>
+        ) : null}
+      </div>
+      {file.conflict ? (
+        <div className="px-4 py-2 bg-rose-50 border-b border-rose-200 text-xs text-rose-800">
+          This file changed in <span className="font-mono">aiwiki/</span> after the dream was created. Accepting would overwrite that change. Rerun the dream to incorporate the new state, or reject this dream.
+        </div>
+      ) : null}
+      <div ref={containerRef} className="overflow-x-auto" />
+    </div>
+  );
+}
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, (c) => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
+}
+function OperationsLog({ operations }) {
+  if (!operations || operations.length === 0) {
+    return <div className="text-sm text-stone-500 italic">No operations recorded.</div>;
+  }
+  return (
+    <ul className="space-y-2">
+      {operations.map((op, i) => (
+        <li key={i} className="text-sm">
+          <span className="font-mono text-xs uppercase tracking-wide text-stone-500 mr-2">{op.op}</span>
+          {op.op === "merge" && op.files ? (
+            <span>
+              merged <span className="font-mono text-xs">{op.files.join(", ")}</span> → <span className="font-mono text-xs">{op.into}</span>
+            </span>
+          ) : op.op === "promote" ? (
+            <span>
+              promoted <span className="font-mono text-xs">{op.from}</span> → <span className="font-mono text-xs">{op.into}</span>
+            </span>
+          ) : op.op === "prune" ? (
+            <span>pruned <span className="font-mono text-xs">{op.file}</span></span>
+          ) : op.op === "addendum" ? (
+            <span>addendum to <span className="font-mono text-xs">{op.file}</span> ({op.addendum_section})</span>
+          ) : (
+            <span>{JSON.stringify(op)}</span>
+          )}
+          {op.reason ? <span className="text-stone-500"> — {op.reason}</span> : null}
+        </li>
+      ))}
+    </ul>
+  );
+}
+function PreviewBanner() {
+  return (
+    <div className="mb-6 p-3 bg-amber-50 border border-amber-200 rounded text-sm text-amber-900">
+      <span className="font-semibold">Preview mode.</span> Sample dream shown — this page expects to be served by <span className="font-mono text-xs bg-amber-100 px-1 py-0.5 rounded">forge wiki ui</span>, which loads real dreams from <span className="font-mono text-xs bg-amber-100 px-1 py-0.5 rounded">aiwiki/proposed/</span>. Accept and Reject buttons are disabled here.
+    </div>
+  );
+}
+function App() {
+  const { manifest, files, has_conflicts } = STATE.dream;
+  const [busy, setBusy] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [showRejectForm, setShowRejectForm] = React.useState(false);
+  const [rejectReason, setRejectReason] = React.useState("");
+  const previewMode = !!STATE._previewMode;
+  const acceptBlocked = has_conflicts === true;
+  async function postAction(action, body = {}) {
+    if (previewMode) {
+      setError("Preview mode — actions disabled. Run `forge wiki ui` in your project to accept or reject for real.");
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/dreams/${encodeURIComponent(manifest.dream_id)}/${action}`, {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+          "x-forge-token": TOKEN,
+          "x-forge-action": "1",
+        },
+        body: JSON.stringify(body),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        throw new Error(data.error || `HTTP ${res.status}`);
+      }
+      window.location.href = "/";
+    } catch (err) {
+      setError(err.message);
+      setBusy(false);
+    }
+  }
+  return (
+    <div className="max-w-5xl mx-auto p-8">
+      {previewMode ? <PreviewBanner /> : null}
+      <header className="mb-6 pb-6 border-b border-stone-200">
+        <div className="text-xs uppercase tracking-wide text-stone-500 mb-2">
+          <a href="/" className="hover:text-stone-700">← all dreams</a>
+        </div>
+        <h1 className="text-xl font-semibold text-stone-900 font-mono">{manifest.dream_id}</h1>
+        <div className="flex items-center gap-3 mt-3 flex-wrap">
+          <span className="badge bg-indigo-100 text-indigo-800">{manifest.trigger}</span>
+          <span className={`badge ${lintBadgeClass(manifest.lint_status)}`}>lint: {manifest.lint_status}</span>
+          <span className="text-xs text-stone-500">created {manifest.created_at}</span>
+          {manifest.provider ? (
+            <span className="text-xs text-stone-500">provider: {manifest.provider}</span>
+          ) : null}
+        </div>
+        {manifest.trigger_detail ? (
+          <p className="text-sm text-stone-600 mt-3">{manifest.trigger_detail}</p>
+        ) : null}
+      </header>
+      {manifest.summary ? (
+        <section className="mb-6 p-4 bg-white border-l-4 border-indigo-400 rounded-r">
+          <h2 className="text-xs uppercase tracking-wide text-stone-500 mb-2">Summary</h2>
+          <p className="text-sm text-stone-800 leading-relaxed">{manifest.summary}</p>
+        </section>
+      ) : null}
+      {acceptBlocked ? (
+        <section className="mb-6 p-4 bg-rose-50 border border-rose-300 rounded">
+          <div className="flex items-start gap-3">
+            <div className="text-rose-600 font-bold text-lg">⚠</div>
+            <div>
+              <div className="font-semibold text-rose-900">Concurrent changes detected — accept is blocked</div>
+              <p className="text-sm text-rose-800 mt-1">
+                One or more files this dream proposes to change have been modified in <span className="font-mono">aiwiki/</span> since the dream was created. Accepting would silently overwrite those changes. Rerun the dream to incorporate the new state, or reject and create a fresh one. Conflicting files are flagged below.
+              </p>
+            </div>
+          </div>
+        </section>
+      ) : null}
+      <section className="grid grid-cols-3 gap-4 mb-6">
+        <div className="border border-stone-200 bg-white rounded p-4 text-center">
+          <div className="text-2xl font-semibold text-emerald-700">+{manifest.new_pages}</div>
+          <div className="text-xs uppercase tracking-wide text-stone-500 mt-1">new</div>
+        </div>
+        <div className="border border-stone-200 bg-white rounded p-4 text-center">
+          <div className="text-2xl font-semibold text-amber-700">~{manifest.changed_pages}</div>
+          <div className="text-xs uppercase tracking-wide text-stone-500 mt-1">changed</div>
+        </div>
+        <div className="border border-stone-200 bg-white rounded p-4 text-center">
+          <div className="text-2xl font-semibold text-rose-700">−{manifest.deleted_pages}</div>
+          <div className="text-xs uppercase tracking-wide text-stone-500 mt-1">deleted</div>
+        </div>
+      </section>
+      {manifest.scope && manifest.scope.length > 0 ? (
+        <section className="mb-6">
+          <h2 className="text-sm uppercase tracking-wide text-stone-500 mb-2">Scope</h2>
+          <ul className="text-sm space-y-1">
+            {manifest.scope.map((s) => (
+              <li key={s} className="font-mono text-xs text-stone-700">{s}</li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+      <section className="mb-6">
+        <h2 className="text-sm uppercase tracking-wide text-stone-500 mb-2">Operations</h2>
+        <OperationsLog operations={manifest.operations} />
+      </section>
+      <section className="mb-8">
+        <h2 className="text-sm uppercase tracking-wide text-stone-500 mb-3">File changes ({files.length})</h2>
+        {files.length === 0 ? (
+          <div className="text-sm text-stone-500 italic">No file changes — operations only (e.g. prunes already applied).</div>
+        ) : (
+          files.map((f) => <FileDiff key={f.path} file={f} />)
+        )}
+      </section>
+      {error ? (
+        <div className="mb-4 p-3 bg-rose-50 border border-rose-200 rounded text-rose-800 text-sm">
+          {error}
+        </div>
+      ) : null}
+      <section className="sticky bottom-0 bg-stone-50/95 backdrop-blur border-t border-stone-200 -mx-8 px-8 py-4">
+        {showRejectForm ? (
+          <div className="space-y-3">
+            <label className="block text-sm">
+              <span className="text-stone-700">Reason for rejection (required):</span>
+              <textarea
+                value={rejectReason}
+                onChange={(e) => setRejectReason(e.target.value)}
+                rows={3}
+                className="mt-1 block w-full border border-stone-300 rounded p-2 text-sm font-mono"
+                placeholder="e.g. merged gotchas were not actually duplicates; root causes differ"
+              />
+            </label>
+            <div className="flex gap-3">
+              <button
+                disabled={busy || !rejectReason.trim()}
+                onClick={() => postAction("reject", { reason: rejectReason.trim() })}
+                className="px-4 py-2 bg-rose-600 hover:bg-rose-700 disabled:bg-stone-300 disabled:cursor-not-allowed text-white text-sm font-medium rounded"
+              >
+                {busy ? "Rejecting..." : "Confirm reject"}
+              </button>
+              <button
+                disabled={busy}
+                onClick={() => { setShowRejectForm(false); setRejectReason(""); setError(null); }}
+                className="px-4 py-2 bg-white hover:bg-stone-100 disabled:cursor-not-allowed text-stone-700 text-sm font-medium rounded border border-stone-300"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="flex gap-3">
+            <button
+              disabled={busy || acceptBlocked}
+              onClick={() => postAction("accept")}
+              title={acceptBlocked ? "Accept is blocked — conflicting files have changed in aiwiki/ since the dream was created" : ""}
+              className="px-5 py-2 bg-emerald-600 hover:bg-emerald-700 disabled:bg-stone-300 disabled:cursor-not-allowed text-white text-sm font-medium rounded"
+            >
+              {busy ? "Accepting..." : acceptBlocked ? "Accept blocked (conflicts)" : "Accept dream"}
+            </button>
+            <button
+              disabled={busy}
+              onClick={() => setShowRejectForm(true)}
+              className="px-5 py-2 bg-white hover:bg-stone-100 disabled:cursor-not-allowed text-stone-700 text-sm font-medium rounded border border-stone-300"
+            >
+              Reject...
+            </button>
+          </div>
+        )}
+        <p className="text-xs text-stone-500 mt-2">
+          {acceptBlocked
+            ? "Conflict resolution: rerun the dream so the consolidator sees the current aiwiki/ state, or reject this dream and let the next phase-close cycle produce a fresh one."
+            : "Accept performs an atomic swap of all proposed files into aiwiki/; the original state is archived to .forge/wiki-history/. Reject discards the proposal and logs the reason."}
+        </p>
+      </section>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+</script>
+</body>
+</html>

package/templates/wiki-html/dreams-list.html ADDED Viewed

@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Forge Wiki — Dream Review</title>
+<meta name="forge-token" content="{{FORGE_TOKEN}}">
+<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+<script src="https://cdn.tailwindcss.com"></script>
+<style>
+  body { font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif; }
+  .badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
+</style>
+</head>
+<body class="bg-stone-50 text-stone-900">
+<div id="root"></div>
+<script type="application/json" id="forge-state">{{FORGE_STATE}}</script>
+<script type="text/babel" data-presets="react">
+const STATE_TEXT = document.getElementById("forge-state").textContent;
+let STATE;
+try {
+  STATE = JSON.parse(STATE_TEXT);
+} catch (_e) {
+  // Preview mode — placeholder unreplaced. Render with sample data + banner.
+  STATE = {
+    _previewMode: true,
+    dreams: [
+      {
+        dream_id: "preview-2026-05-11-1200-phase4-close",
+        trigger: "phase-close",
+        trigger_detail: "Phase 4 lock (feature/auth-refactor)",
+        created_at: "2026-05-11T12:00:00Z",
+        age_human: "5m",
+        changed_pages: 2,
+        new_pages: 1,
+        deleted_pages: 1,
+        lint_status: "passed",
+        scope: ["aiwiki/raw/", "aiwiki/gotchas/", "aiwiki/conventions/"],
+      },
+      {
+        dream_id: "preview-2026-05-10-0830-precompact",
+        trigger: "pre-compact",
+        trigger_detail: "85% context threshold",
+        created_at: "2026-05-10T08:30:00Z",
+        age_human: "1d",
+        changed_pages: 0,
+        new_pages: 0,
+        deleted_pages: 3,
+        lint_status: "warnings",
+        scope: ["aiwiki/sessions/", "aiwiki/raw/"],
+      },
+    ],
+  };
+}
+function lintBadgeClass(status) {
+  switch (status) {
+    case "passed": return "bg-emerald-100 text-emerald-800";
+    case "warnings": return "bg-amber-100 text-amber-800";
+    case "failed": return "bg-rose-100 text-rose-800";
+    default: return "bg-stone-100 text-stone-700";
+  }
+}
+function triggerBadgeClass(trigger) {
+  switch (trigger) {
+    case "phase-close": return "bg-indigo-100 text-indigo-800";
+    case "pre-compact": return "bg-blue-100 text-blue-800";
+    case "manual": return "bg-stone-100 text-stone-700";
+    default: return "bg-stone-100 text-stone-700";
+  }
+}
+function DreamCard({ dream }) {
+  return (
+    <a
+      href={`/dreams/${encodeURIComponent(dream.dream_id)}`}
+      className="block border border-stone-200 bg-white rounded-lg p-5 hover:border-stone-400 hover:shadow-sm transition"
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2 mb-1">
+            <span className={`badge ${triggerBadgeClass(dream.trigger)}`}>{dream.trigger}</span>
+            <span className={`badge ${lintBadgeClass(dream.lint_status)}`}>lint: {dream.lint_status}</span>
+            <span className="text-xs text-stone-500">{dream.age_human}</span>
+          </div>
+          <div className="font-mono text-sm text-stone-900 truncate">{dream.dream_id}</div>
+          {dream.trigger_detail ? (
+            <div className="text-sm text-stone-600 mt-1">{dream.trigger_detail}</div>
+          ) : null}
+          {dream.scope && dream.scope.length > 0 ? (
+            <div className="text-xs text-stone-500 mt-2 truncate">
+              <span className="text-stone-400">scope: </span>{dream.scope.join(", ")}
+            </div>
+          ) : null}
+        </div>
+        <div className="text-right text-sm flex-shrink-0">
+          <div className="font-semibold text-stone-900">
+            {dream.changed_pages + dream.new_pages + dream.deleted_pages} files
+          </div>
+          <div className="text-xs text-stone-500 mt-1 space-x-2">
+            <span className="text-emerald-600">+{dream.new_pages}</span>
+            <span className="text-amber-600">~{dream.changed_pages}</span>
+            <span className="text-rose-600">−{dream.deleted_pages}</span>
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+}
+function PreviewBanner() {
+  return (
+    <div className="mb-6 p-3 bg-amber-50 border border-amber-200 rounded text-sm text-amber-900">
+      <span className="font-semibold">Preview mode.</span> Sample data shown — this page expects to be served by <span className="font-mono text-xs bg-amber-100 px-1 py-0.5 rounded">forge wiki ui</span>, which injects real state from <span className="font-mono text-xs bg-amber-100 px-1 py-0.5 rounded">aiwiki/proposed/</span>. Run <span className="font-mono text-xs bg-amber-100 px-1 py-0.5 rounded">forge wiki ui</span> in your project to see live dreams.
+    </div>
+  );
+}
+function App() {
+  const dreams = STATE.dreams || [];
+  return (
+    <div className="max-w-4xl mx-auto p-8">
+      {STATE._previewMode ? <PreviewBanner /> : null}
+      <header className="mb-8 pb-6 border-b border-stone-200">
+        <div className="text-xs uppercase tracking-wide text-stone-500 mb-2">forge wiki</div>
+        <h1 className="text-2xl font-semibold text-stone-900">Pending dream review</h1>
+        <p className="text-sm text-stone-600 mt-2">
+          {dreams.length === 0
+            ? "No pending dreams. The wiki is up to date."
+            : `${dreams.length} pending ${dreams.length === 1 ? "dream" : "dreams"} awaiting your review.`}
+        </p>
+      </header>
+      {dreams.length === 0 ? (
+        <div className="text-center py-12 text-stone-500">
+          <div className="text-5xl mb-4">✓</div>
+          <div>All clear. New dreams will appear here as they fire (phase close, pre-compact, manual).</div>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {dreams.map((d) => <DreamCard key={d.dream_id} dream={d} />)}
+        </div>
+      )}
+      <footer className="mt-12 pt-6 border-t border-stone-200 text-xs text-stone-500">
+        Forge wiki ui — dreams listed oldest first. Click a dream to review and accept/reject. Server stops on Ctrl-C in the launching terminal.
+      </footer>
+    </div>
+  );
+}
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
+</script>
+</body>
+</html>