npm - @markbrutx/promptbook-viewer - Versions diffs - 0.2.0 → 0.4.1 - Mend

@markbrutx/promptbook-viewer 0.2.0 → 0.4.1

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 (22) hide show

package/dist/index.d.ts +1 -1
package/dist/index.d.ts.map +1 -1
package/dist/web/assets/index-DCrrFaqQ.css +1 -0
package/dist/web/assets/index-_hu1t2tv.js +51 -0
package/dist/web/index.html +2 -2
package/dist/web/promptbook-logo.png +0 -0
package/dist/web/promptbook-mini.png +0 -0
package/package.json +8 -3
package/src/index.ts +1 -0
package/src/web/App.tsx +51 -40
package/src/web/api.ts +46 -12
package/src/web/colors.ts +3 -3
package/src/web/components/Addons.tsx +95 -33
package/src/web/components/FragmentView.tsx +2 -2
package/src/web/main.tsx +3 -8
package/src/web/mount.tsx +27 -0
package/src/web/public/promptbook-logo.png +0 -0
package/src/web/public/promptbook-mini.png +0 -0
package/src/web/styles.css +253 -61
package/src/web/types.ts +1 -1
package/dist/web/assets/index-BCBuW76o.css +0 -1
package/dist/web/assets/index-BwIAKPNq.js +0 -51

package/dist/web/index.html CHANGED Viewed

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>promptbook viewer</title>
-    <script type="module" crossorigin src="/assets/index-BwIAKPNq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BCBuW76o.css">
+    <script type="module" crossorigin src="/assets/index-_hu1t2tv.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DCrrFaqQ.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/web/promptbook-logo.png CHANGED Viewed

Binary file

package/dist/web/promptbook-mini.png ADDED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@markbrutx/promptbook-viewer",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "description": "Storybook-for-prompts: a local web app that renders a prompts folder via @markbrutx/promptbook-core.",
   "type": "module",
   "license": "MIT",
@@ -25,7 +25,12 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./web": {
+      "types": "./src/web/mount.tsx",
+      "default": "./src/web/mount.tsx"
+    },
+    "./web/styles.css": "./src/web/styles.css"
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -43,7 +48,7 @@
     "check": "biome check ."
   },
   "dependencies": {
-    "@markbrutx/promptbook-core": "^0.2.0"
+    "@markbrutx/promptbook-core": "^0.4.1"
   },
   "devDependencies": {
     "@biomejs/biome": "latest",

package/src/index.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export type {
   AnnotationsResponse,
   BookResponse,
   BooksResponse,
+  CodePromptSummary,
   CompositionSummary,
   FragmentSummary,
   LintResponse,

package/src/web/App.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { api } from "./api.js";
+import type { Api } from "./api.js";
 import { Addons } from "./components/Addons.js";
 import { Canvas } from "./components/Canvas.js";
 import { CodePromptView } from "./components/CodePromptView.js";
@@ -47,7 +47,17 @@ function controlKeys(composition: CompositionSummary | undefined): string[] {
   return [...keys];
 }
-export function App() {
+/** Props passed to the viewer's root component. */
+export interface AppProps {
+  /** API surface the viewer talks to. The CLI viewer wires the default fetch
+   * implementation; the static demo site supplies an in-browser one. */
+  api: Api;
+  /** Subscribe to hot-reload events. When omitted, no live-reload wiring runs
+   * (e.g. the static-mount path). The unsubscribe callback is returned. */
+  subscribeReload?: (callback: (changedBook: string | undefined) => void) => () => void;
+}
+export function App({ api, subscribeReload }: AppProps) {
   const [books, setBooks] = useState<WorkspaceBook[]>([]);
   const [activeBook, setActiveBook] = useState<string | null>(null);
   const [book, setBook] = useState<BookResponse | null>(null);
@@ -75,28 +85,34 @@ export function App() {
       setBooks([]);
       return [];
     }
-  }, []);
+  }, [api.books]);
-  const loadAnnotations = useCallback(async (which: string | null) => {
-    try {
-      const { annotations: next } = await api.annotations(which);
-      setAnnotations(next);
-    } catch {
-      setAnnotations([]);
-    }
-  }, []);
+  const loadAnnotations = useCallback(
+    async (which: string | null) => {
+      try {
+        const { annotations: next } = await api.annotations(which);
+        setAnnotations(next);
+      } catch {
+        setAnnotations([]);
+      }
+    },
+    [api.annotations],
+  );
-  const loadBook = useCallback(async (which: string | null) => {
-    try {
-      const next = await api.book(which);
-      setBook(next);
-      setError(null);
-      return next;
-    } catch (e) {
-      setError((e as Error).message);
-      return null;
-    }
-  }, []);
+  const loadBook = useCallback(
+    async (which: string | null) => {
+      try {
+        const next = await api.book(which);
+        setBook(next);
+        setError(null);
+        return next;
+      } catch (e) {
+        setError((e as Error).message);
+        return null;
+      }
+    },
+    [api.book],
+  );
   // Discover the workspace's books, then activate the first one.
   useEffect(() => {
@@ -127,25 +143,20 @@ export function App() {
   }, [activeBook, loadBook, loadAnnotations]);
   // Hot-reload: refetch the book list, and the active book's tree when it (or
-  // an unknown path) changed. The new book object is a fresh reference, so the
-  // resolve/used-in effects below re-run automatically; the selection persists.
+  // an unknown path) changed. The CLI viewer wires this to its SSE stream; the
+  // static demo site omits it entirely (no live reload). The selection persists.
   useEffect(() => {
-    const source = new EventSource("/api/events");
-    source.addEventListener("reload", (event) => {
-      let changed: string | undefined;
-      try {
-        changed = (JSON.parse((event as MessageEvent).data) as { book?: string }).book;
-      } catch {
-        changed = undefined;
-      }
+    if (subscribeReload === undefined) {
+      return;
+    }
+    return subscribeReload((changed) => {
       void loadBooks();
       const active = activeBookRef.current;
       if (active !== null && (changed === undefined || changed === active)) {
         void loadBook(active);
       }
     });
-    return () => source.close();
-  }, [loadBook, loadBooks]);
+  }, [loadBook, loadBooks, subscribeReload]);
   const compositions = book?.compositions ?? [];
   const selectedComposition =
@@ -176,7 +187,7 @@ export function App() {
           setError((e as Error).message);
         }
       });
-  }, [book, selection, context, activeBook]);
+  }, [book, selection, context, activeBook, api.lint, api.resolve]);
   useEffect(() => {
     if (book === null || selection?.kind !== "fragment") {
@@ -187,7 +198,7 @@ export function App() {
       .usedIn(activeBook, selection.id)
       .then(setUsedIn)
       .catch(() => setUsedIn(null));
-  }, [book, selection, activeBook]);
+  }, [book, selection, activeBook, api.usedIn]);
   // Resolve the comparison variant for the Diff panel.
   useEffect(() => {
@@ -200,7 +211,7 @@ export function App() {
       .resolve(activeBook, selection.composition, ctx)
       .then(setCompareResolved)
       .catch(() => setCompareResolved(null));
-  }, [selection, compareVariant, selectedComposition, activeBook]);
+  }, [selection, compareVariant, selectedComposition, activeBook, api.resolve]);
   const selectBook = useCallback((name: string) => {
     setActiveBook(name);
@@ -238,7 +249,7 @@ export function App() {
       });
       await loadAnnotations(activeBook);
     },
-    [selection, context, activeBook, loadAnnotations],
+    [selection, context, activeBook, loadAnnotations, api.annotate],
   );
   const resolveAnnotation = useCallback(
@@ -246,7 +257,7 @@ export function App() {
       await api.resolveAnnotation(activeBook, id);
       await loadAnnotations(activeBook);
     },
-    [activeBook, loadAnnotations],
+    [activeBook, loadAnnotations, api.resolveAnnotation],
   );
   // Annotations belonging to exactly the variant on screen (composition + context).
@@ -293,7 +304,7 @@ export function App() {
           title={selection.composition}
           subtitle={selection.variant}
           segments={resolved.segments}
-          tokens={lint?.tokens}
+          {...(lint?.tokens !== undefined ? { tokens: lint.tokens } : {})}
           annotations={variantAnnotations}
           onAnnotate={addAnnotation}
         />

package/src/web/api.ts CHANGED Viewed

@@ -10,6 +10,22 @@ import type {
   UsedInResponse,
 } from "./types.js";
+/**
+ * The viewer's UI talks to the world through this small interface only. The
+ * CLI viewer wires the fetch-based implementation below; the static demo site
+ * passes an in-browser implementation that resolves against a bundled book.
+ */
+export interface Api {
+  books(): Promise<BooksResponse>;
+  book(book: string | null): Promise<BookResponse>;
+  resolve(book: string | null, prompt: string, context: Context): Promise<ResolveResponse>;
+  lint(book: string | null, prompt: string, context: Context): Promise<LintResponse>;
+  usedIn(book: string | null, fragmentId: string): Promise<UsedInResponse>;
+  annotations(book: string | null): Promise<AnnotationsResponse>;
+  annotate(book: string | null, body: AnnotateRequest): Promise<Annotation>;
+  resolveAnnotation(book: string | null, id: string): Promise<{ id: string; removed: boolean }>;
+}
 async function getJson<T>(path: string): Promise<T> {
   const res = await fetch(path);
   if (!res.ok) {
@@ -19,11 +35,14 @@ async function getJson<T>(path: string): Promise<T> {
 }
 async function sendJson<T>(method: "POST" | "DELETE", path: string, body?: unknown): Promise<T> {
-  const res = await fetch(path, {
+  const init: RequestInit = {
     method,
     headers: { "content-type": "application/json" },
-    body: body === undefined ? undefined : JSON.stringify(body),
-  });
+  };
+  if (body !== undefined) {
+    init.body = JSON.stringify(body);
+  }
+  const res = await fetch(path, init);
   if (!res.ok) {
     const payload = (await res.json().catch(() => ({}))) as { error?: string };
     throw new Error(payload.error ?? `${path} → ${res.status}`);
@@ -40,21 +59,36 @@ function scoped(path: string, book: string | null): string {
   return `${path}${sep}book=${encodeURIComponent(book)}`;
 }
-export const api = {
+/** The fetch-based default API the CLI viewer uses. */
+export const api: Api = {
   books: () => getJson<BooksResponse>("/api/books"),
-  book: (book: string | null) => getJson<BookResponse>(scoped("/api/book", book)),
-  resolve: (book: string | null, prompt: string, context: Context) =>
+  book: (book) => getJson<BookResponse>(scoped("/api/book", book)),
+  resolve: (book, prompt, context) =>
     sendJson<ResolveResponse>("POST", scoped("/api/resolve", book), { prompt, context }),
-  lint: (book: string | null, prompt: string, context: Context) =>
+  lint: (book, prompt, context) =>
     sendJson<LintResponse>("POST", scoped("/api/lint", book), { prompt, context }),
-  usedIn: (book: string | null, fragmentId: string) =>
+  usedIn: (book, fragmentId) =>
     getJson<UsedInResponse>(scoped(`/api/used-in/${encodeURIComponent(fragmentId)}`, book)),
-  annotations: (book: string | null) => getJson<AnnotationsResponse>(scoped("/api/annotations", book)),
-  annotate: (book: string | null, body: AnnotateRequest) =>
-    sendJson<Annotation>("POST", scoped("/api/annotate", book), body),
-  resolveAnnotation: (book: string | null, id: string) =>
+  annotations: (book) => getJson<AnnotationsResponse>(scoped("/api/annotations", book)),
+  annotate: (book, body) => sendJson<Annotation>("POST", scoped("/api/annotate", book), body),
+  resolveAnnotation: (book, id) =>
     sendJson<{ id: string; removed: boolean }>(
       "DELETE",
       scoped(`/api/annotations/${encodeURIComponent(id)}`, book),
     ),
 };
+/** Subscribe to the CLI viewer's SSE hot-reload stream. */
+export function subscribeFetchReload(callback: (changedBook: string | undefined) => void): () => void {
+  const source = new EventSource("/api/events");
+  source.addEventListener("reload", (event) => {
+    let changed: string | undefined;
+    try {
+      changed = (JSON.parse((event as MessageEvent).data) as { book?: string }).book;
+    } catch {
+      changed = undefined;
+    }
+    callback(changed);
+  });
+  return () => source.close();
+}

package/src/web/colors.ts CHANGED Viewed

@@ -10,12 +10,12 @@ function hueOf(id: string): number {
   return (hash + 360) % 360;
 }
-/** Soft background tint for a fragment's segment. */
+/** Soft background tint for a fragment's segment. Dark mode native. */
 export function fragmentColor(id: string): string {
-  return `hsl(${hueOf(id)}deg 70% 88%)`;
+  return `hsl(${hueOf(id)}deg 55% 14%)`;
 }
 /** Saturated variant of {@link fragmentColor} for borders/legend swatches. */
 export function fragmentAccent(id: string): string {
-  return `hsl(${hueOf(id)}deg 60% 45%)`;
+  return `hsl(${hueOf(id)}deg 70% 62%)`;
 }

package/src/web/components/Addons.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
+import { useState } from "react";
 import { kvLabel } from "../format.js";
-import type { LintResponse, Trace, When } from "../types.js";
+import type { LintResponse, RuleTrace, Trace, When } from "../types.js";
 interface AddonsProps {
   trace: Trace;
@@ -13,7 +14,7 @@ function whenLabel(when: When): string {
 /** Lint findings panel: severity-tagged messages with the fragment/rule origin. */
 function LintPanel({ lint }: { lint: LintResponse | null }) {
   if (lint === null) {
-    return <p className="muted">—</p>;
+    return <p className="muted">no data</p>;
   }
   if (lint.findings.length === 0) {
     return <p className="muted">No findings ({lint.tokens} tokens).</p>;
@@ -32,46 +33,107 @@ function LintPanel({ lint }: { lint: LintResponse | null }) {
   );
 }
-/** Explain trace panel: which rules fired and why, plus the net effects. */
+function FiredRule({ rule }: { rule: RuleTrace }) {
+  return (
+    <li className="rule rule-fired">
+      <span className="rule-mark" aria-hidden>
+        ✓
+      </span>
+      <div className="rule-body">
+        <div className="rule-head">
+          <span className="rule-action">{rule.action}</span>
+          <span className="rule-when">when {whenLabel(rule.when)}</span>
+        </div>
+        {rule.effect ? <p className="rule-effect">{rule.effect}</p> : null}
+      </div>
+    </li>
+  );
+}
+function SkippedRule({ rule }: { rule: RuleTrace }) {
+  return (
+    <li className="rule rule-skipped">
+      <span className="rule-mark" aria-hidden>
+        ·
+      </span>
+      <div className="rule-body">
+        <div className="rule-head">
+          <span className="rule-action">{rule.action}</span>
+          <span className="rule-when">when {whenLabel(rule.when)}</span>
+        </div>
+        {rule.reason ? <p className="rule-reason">{rule.reason}</p> : null}
+      </div>
+    </li>
+  );
+}
+/** Explain trace panel: which rules fired, what they did, and (collapsed) the
+ *  rules that did not match — kept out of the way so the trace reads as a
+ *  trace, not as a list of errors. */
 function ExplainPanel({ trace }: { trace: Trace }) {
+  const fired = trace.rules.filter((r) => r.fired);
+  const skipped = trace.rules.filter((r) => !r.fired);
+  const [showSkipped, setShowSkipped] = useState(false);
   return (
     <div className="explain">
-      <h4>Rules</h4>
-      <ul className="rules">
-        {trace.rules.map((rule) => (
-          <li key={rule.index} className={rule.fired ? "fired" : "skipped"}>
-            <span className="rule-mark">{rule.fired ? "✓" : "·"}</span>
-            <span className="rule-action">{rule.action}</span>
-            <span className="muted">when {whenLabel(rule.when)}</span>
-            {rule.effect ? <div className="rule-effect">{rule.effect}</div> : null}
-            {rule.reason ? <div className="rule-reason">{rule.reason}</div> : null}
-          </li>
-        ))}
-        {trace.rules.length === 0 ? <li className="muted">No rules.</li> : null}
-      </ul>
+      <h4>Fired rules ({fired.length})</h4>
+      {fired.length === 0 ? (
+        <p className="muted small">No rules matched this context, so the base order is the final order.</p>
+      ) : (
+        <ul className="rules">
+          {fired.map((rule) => (
+            <FiredRule key={rule.index} rule={rule} />
+          ))}
+        </ul>
+      )}
+      {skipped.length > 0 ? (
+        <details
+          className="skipped-block"
+          open={showSkipped}
+          onToggle={(event) => setShowSkipped((event.target as HTMLDetailsElement).open)}
+        >
+          <summary className="skipped-summary">
+            {skipped.length} rule{skipped.length === 1 ? "" : "s"} didn't match
+          </summary>
+          <ul className="rules">
+            {skipped.map((rule) => (
+              <SkippedRule key={rule.index} rule={rule} />
+            ))}
+          </ul>
+        </details>
+      ) : null}
       <h4>Final order</h4>
       <p className="order">{trace.finalOrder.join(" → ") || "(empty)"}</p>
-      {trace.replaced.length > 0 ? (
-        <p>
-          <strong>replaced:</strong> {trace.replaced.map((r) => `${r.from}→${r.to}`).join(", ")}
-        </p>
-      ) : null}
-      {trace.added.length > 0 ? (
-        <p>
-          <strong>added:</strong> {trace.added.map((a) => a.id).join(", ")}
-        </p>
-      ) : null}
-      {trace.forbidden.length > 0 ? (
-        <p>
-          <strong>forbidden:</strong> {trace.forbidden.map((f) => f.id).join(", ")}
-        </p>
+      {trace.replaced.length > 0 || trace.added.length > 0 || trace.forbidden.length > 0 ? (
+        <dl className="effects">
+          {trace.replaced.length > 0 ? (
+            <>
+              <dt>replaced</dt>
+              <dd>{trace.replaced.map((r) => `${r.from} → ${r.to}`).join(", ")}</dd>
+            </>
+          ) : null}
+          {trace.added.length > 0 ? (
+            <>
+              <dt>added</dt>
+              <dd>{trace.added.map((a) => a.id).join(", ")}</dd>
+            </>
+          ) : null}
+          {trace.forbidden.length > 0 ? (
+            <>
+              <dt>forbidden</dt>
+              <dd>{trace.forbidden.map((f) => f.id).join(", ")}</dd>
+            </>
+          ) : null}
+        </dl>
       ) : null}
       {trace.unmatchedAxes.length > 0 ? (
-        <p className="warn">
-          <strong>unmatched axes:</strong>{" "}
+        <p className="notice">
+          <strong>Context axes some rule names but none matched:</strong>{" "}
           {trace.unmatchedAxes.map((axis) => `${axis.key}=${axis.value}`).join(", ")}
         </p>
       ) : null}
@@ -94,7 +156,7 @@ export function Addons({ trace, lint }: AddonsProps) {
     <aside className="addons">
       <section>
         <h3>Tokens</h3>
-        <p className="tokens">{lint ? `~${lint.tokens}` : "—"}</p>
+        <p className="tokens">{lint ? `~${lint.tokens}` : "·"}</p>
       </section>
       <section>
         <h3>Lint</h3>

package/src/web/components/FragmentView.tsx CHANGED Viewed

@@ -18,13 +18,13 @@ export function FragmentView({ fragment, usedIn, onSelectVariant }: FragmentView
             {fragment.id}
           </h1>
           <p className="muted">
-            {fragment.kind ?? "—"}
+            {fragment.kind ?? "·"}
             {fragment.tags.length > 0 ? ` · ${fragment.tags.join(", ")}` : ""} · {fragment.sourceFile}
           </p>
         </div>
       </header>
-      <pre className="segment" style={{ background: "#f6f8fa" }}>
+      <pre className="segment" style={{ background: "var(--panel)" }}>
         {fragment.body}
       </pre>

package/src/web/main.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { App } from "./App.js";
+import { api, subscribeFetchReload } from "./api.js";
+import { mountWebApp } from "./mount.js";
 import "./styles.css";
 const container = document.getElementById("root");
@@ -8,8 +7,4 @@ if (container === null) {
   throw new Error("missing #root element");
 }
-createRoot(container).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);
+mountWebApp({ container, api, subscribeReload: subscribeFetchReload });

package/src/web/mount.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { StrictMode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { App, type AppProps } from "./App.js";
+export type { App, AppProps } from "./App.js";
+export type { Api } from "./api.js";
+/** Arguments to {@link mountWebApp}. */
+export interface MountOptions extends AppProps {
+  /** DOM node to mount the React tree into. */
+  container: Element | DocumentFragment;
+  /** Wrap in `<StrictMode>`. Defaults to true. */
+  strict?: boolean;
+}
+/** Mount the viewer UI into `container` with the supplied API. */
+export function mountWebApp(options: MountOptions): { unmount: () => void; root: Root } {
+  const { container, api, subscribeReload, strict = true } = options;
+  const root = createRoot(container);
+  const appProps: AppProps = subscribeReload !== undefined ? { api, subscribeReload } : { api };
+  const tree = <App {...appProps} />;
+  root.render(strict ? <StrictMode>{tree}</StrictMode> : tree);
+  return {
+    root,
+    unmount: () => root.unmount(),
+  };
+}

package/src/web/public/promptbook-logo.png CHANGED Viewed

Binary file

package/src/web/public/promptbook-mini.png ADDED Viewed

Binary file