@markbrutx/promptbook-viewer 0.1.0 → 0.3.0

package/src/web/api.ts

@@ -3,6 +3,7 @@ import type {
   Annotation,
   AnnotationsResponse,
   BookResponse,
+  BooksResponse,
   Context,
   LintResponse,
   ResolveResponse,
@@ -30,15 +31,30 @@ async function sendJson<T>(method: "POST" | "DELETE", path: string, body?: unkno
   return (await res.json()) as T;
 }
 
+/** Append `?book=<name>` so a request targets the active book in the workspace. */
+function scoped(path: string, book: string | null): string {
+  if (book === null || book === "") {
+    return path;
+  }
+  const sep = path.includes("?") ? "&" : "?";
+  return `${path}${sep}book=${encodeURIComponent(book)}`;
+}
+
 export const api = {
-  book: () => getJson<BookResponse>("/api/book"),
-  resolve: (prompt: string, context: Context) =>
-    sendJson<ResolveResponse>("POST", "/api/resolve", { prompt, context }),
-  lint: (prompt: string, context: Context) =>
-    sendJson<LintResponse>("POST", "/api/lint", { prompt, context }),
-  usedIn: (fragmentId: string) => getJson<UsedInResponse>(`/api/used-in/${encodeURIComponent(fragmentId)}`),
-  annotations: () => getJson<AnnotationsResponse>("/api/annotations"),
-  annotate: (body: AnnotateRequest) => sendJson<Annotation>("POST", "/api/annotate", body),
-  resolveAnnotation: (id: string) =>
-    sendJson<{ id: string; removed: boolean }>("DELETE", `/api/annotations/${encodeURIComponent(id)}`),
+  books: () => getJson<BooksResponse>("/api/books"),
+  book: (book: string | null) => getJson<BookResponse>(scoped("/api/book", book)),
+  resolve: (book: string | null, prompt: string, context: Context) =>
+    sendJson<ResolveResponse>("POST", scoped("/api/resolve", book), { prompt, context }),
+  lint: (book: string | null, prompt: string, context: Context) =>
+    sendJson<LintResponse>("POST", scoped("/api/lint", book), { prompt, context }),
+  usedIn: (book: string | null, fragmentId: string) =>
+    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) =>
+    sendJson<{ id: string; removed: boolean }>(
+      "DELETE",
+      scoped(`/api/annotations/${encodeURIComponent(id)}`, book),
+    ),
 };

package/src/web/components/Sidebar.tsx

@@ -2,8 +2,12 @@ import type { ReactNode } from "react";
 import { fragmentAccent } from "../colors.js";
 import type { Selection } from "../selection.js";
 import type { CompositionTreeNode, FragmentGroup, GroupNode } from "../tree.js";
+import type { WorkspaceBook } from "../types.js";
 
 interface SidebarProps {
+  books: WorkspaceBook[];
+  activeBook: string | null;
+  onSelectBook: (name: string) => void;
   tree: CompositionTreeNode[];
   fragmentGroups: FragmentGroup[];
   selection: Selection | null;
@@ -12,6 +16,35 @@ interface SidebarProps {
   onSelectFragment: (id: string) => void;
 }
 
+/** Brand header + (when the workspace holds more than one book) a book switcher. */
+function BookSwitcher({
+  books,
+  activeBook,
+  onSelectBook,
+}: {
+  books: WorkspaceBook[];
+  activeBook: string | null;
+  onSelectBook: (name: string) => void;
+}) {
+  return (
+    <header className="sidebar-brand">
+      <img className="sidebar-logo" src="/promptbook-logo.png" alt="promptbook" />
+      {books.length > 1 ? (
+        <label className="book-switcher">
+          <span className="book-switcher-label">Book</span>
+          <select value={activeBook ?? ""} onChange={(event) => onSelectBook(event.target.value)}>
+            {books.map((b) => (
+              <option key={b.name} value={b.name}>
+                {b.name}
+              </option>
+            ))}
+          </select>
+        </label>
+      ) : null}
+    </header>
+  );
+}
+
 function isVariantSelected(selection: Selection | null, composition: string, variant: string): boolean {
   return (
     selection?.kind === "variant" && selection.composition === composition && selection.variant === variant
@@ -129,6 +162,9 @@ function GroupItem({
 }
 
 export function Sidebar({
+  books,
+  activeBook,
+  onSelectBook,
   tree,
   fragmentGroups,
   selection,
@@ -139,6 +175,7 @@ export function Sidebar({
   const handlers: NodeHandlers = { onSelectVariant, onSelectCode };
   return (
     <nav className="sidebar">
+      <BookSwitcher books={books} activeBook={activeBook} onSelectBook={onSelectBook} />
       <section>
         <h2 className="sidebar-title">Compositions</h2>
         {tree.length === 0 ? (

package/src/web/index.html

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <title>promptbook viewer</title>
   </head>
   <body>

package/src/web/styles.css

@@ -34,6 +34,36 @@ body {
   background: var(--panel);
 }
 
+.sidebar-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 4px 4px 12px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
+.sidebar-logo {
+  width: 168px;
+  max-width: 80%;
+  height: auto;
+  display: block;
+  margin: 8px auto 4px;
+}
+
+.book-switcher {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.book-switcher-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+
 .sidebar-title {
   font-size: 11px;
   text-transform: uppercase;
@@ -201,6 +231,11 @@ input {
   background: #fff;
 }
 
+.book-switcher select {
+  flex: 1;
+  width: auto;
+}
+
 /* Controls */
 .control-row {
   display: grid;

package/src/web/types.ts

@@ -6,6 +6,7 @@ export type {
   Annotation,
   AnnotationsResponse,
   BookResponse,
+  BooksResponse,
   CodePromptSummary,
   CompositionSummary,
   FragmentSummary,
@@ -14,4 +15,5 @@ export type {
   Segment,
   UsedInResponse,
   VariantSummary,
+  WorkspaceBook,
 } from "../shared/types.js";

package/dist/web/assets/index-B2Wxtb-f.css

@@ -1 +0,0 @@
-:root{--bg: #fff;--panel: #f6f8fa;--border: #e1e4e8;--text: #1f2328;--muted: #6e7781;--accent: #4f46e5;--warn: #b35900;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px;color:var(--text)}*{box-sizing:border-box}body{margin:0;background:var(--bg)}.layout{display:grid;grid-template-columns:260px minmax(0,1fr) 380px;height:100vh}.sidebar{border-right:1px solid var(--border);overflow-y:auto;padding:12px;background:var(--panel)}.sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px}.tree{list-style:none;margin:0;padding-left:12px}.tree-folder,.tree-composition{cursor:pointer;font-weight:600;padding:2px 0}.tree-item,.link{display:inline-flex;align-items:center;gap:6px;width:100%;text-align:left;background:none;border:none;padding:3px 6px;border-radius:5px;color:var(--text);cursor:pointer;font:inherit}.tree-item:hover{background:#eaeef2}.tree-item.active{background:var(--accent);color:#fff}.link{width:auto;color:var(--accent);padding:0;text-decoration:underline}.swatch{width:10px;height:10px;border-radius:2px;flex:none}.canvas{overflow-y:auto;padding:20px 24px}.canvas-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.canvas-title{font-size:18px;margin:0;display:flex;align-items:center;gap:8px}.legend{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0 0 14px;font-size:12px;color:var(--muted)}.legend li{display:inline-flex;align-items:center;gap:5px}.prompt{display:flex;flex-direction:column;gap:14px}.segment{position:relative;margin:0;padding:16px 12px 12px;border-radius:6px;border:1px solid var(--border);white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;line-height:1.5}.segment-tag{position:absolute;top:0;right:0;font-size:10px;padding:1px 6px;background:#0000000f;border-bottom-left-radius:6px;font-family:system-ui,sans-serif;color:var(--muted)}.rail{border-left:1px solid var(--border);overflow-y:auto;padding:16px;background:var(--panel)}.rail section,.addons section{margin-bottom:18px}.rail h3,.addons h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}.rail h4{margin:12px 0 4px;font-size:12px}select,input{width:100%;padding:4px 6px;border:1px solid var(--border);border-radius:5px;font:inherit;background:#fff}.control-row{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:8px;margin-bottom:6px}.control-key{font-family:ui-monospace,monospace;font-size:12px;color:var(--muted)}.control-add{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:6px}.control-add button{border:1px solid var(--border);border-radius:5px;background:#fff;cursor:pointer;padding:0 10px}.rules,.findings,.warnings,.used-list{list-style:none;margin:0;padding:0}.rules li{padding:4px 0;border-bottom:1px solid var(--border);font-size:12px}.rules li.skipped{color:var(--muted)}.rule-mark{margin-right:6px}.rule-action{font-weight:600;margin-right:6px}.rule-effect{font-family:ui-monospace,monospace;margin-top:2px}.rule-reason{color:var(--muted);margin-top:2px}.order{font-family:ui-monospace,monospace;font-size:12px;word-break:break-word}.finding{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border);font-size:12px}.finding-sev{text-transform:uppercase;font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;background:#eaeef2}.finding.error .finding-sev{background:#ffd7d5;color:#a40e26}.finding.warning .finding-sev{background:#fff1c2;color:var(--warn)}.finding-rule{font-family:ui-monospace,monospace;color:var(--muted)}.diff-body{margin:8px 0 0;font-family:ui-monospace,monospace;font-size:12px;border:1px solid var(--border);border-radius:6px;overflow-x:auto;background:#fff}.diff-row{padding:0 8px;white-space:pre-wrap}.diff-row.add{background:#e6ffec}.diff-row.remove{background:#ffebe9}.diff-mark{display:inline-block;width:12px;color:var(--muted)}.annot-mark{background:#fff3b0;border-bottom:2px solid var(--warn);border-radius:2px;padding:0 1px}.annot-popover{position:fixed;z-index:20;width:280px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px #00000029}.annot-popover textarea{width:100%;min-height:64px;resize:vertical;margin:6px 0}.annot-actions{display:flex;justify-content:flex-end;gap:10px;align-items:center}.annot-actions button[type=button]:last-child{border:1px solid var(--border);border-radius:5px;background:var(--accent);color:#fff;padding:4px 12px;cursor:pointer}.annot-actions button[disabled]{opacity:.5;cursor:default}.annot-quote{margin:0;font-style:italic;color:var(--muted);font-size:12px;word-break:break-word}.annot-list{list-style:none;margin:0;padding:0}.annot-list li{padding:8px 0;border-bottom:1px solid var(--border)}.annot-comment{margin:4px 0;font-size:13px;word-break:break-word}.annot-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px}.badge{font-size:12px;padding:2px 8px;border-radius:999px;background:#eaeef2;white-space:nowrap}.badge-code{font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:#2b2b40;color:#fff}.code-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.code-tab{font:inherit;font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer}.code-tab.active{background:var(--accent);border-color:var(--accent)}.code-diff{margin-top:18px}.tokens{font-size:20px;font-weight:600;margin:0}.muted{color:var(--muted)}.warn{color:var(--warn)}.used-list li{padding:3px 0}