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

@markbrutx/promptbook-viewer 0.1.0 → 0.2.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 (42) hide show

package/dist/index.d.ts +1 -1
package/dist/index.d.ts.map +1 -1
package/dist/server/api.d.ts +4 -5
package/dist/server/api.d.ts.map +1 -1
package/dist/server/api.js +49 -12
package/dist/server/api.js.map +1 -1
package/dist/server/book-source.d.ts +24 -0
package/dist/server/book-source.d.ts.map +1 -1
package/dist/server/book-source.js +39 -0
package/dist/server/book-source.js.map +1 -1
package/dist/server/server.d.ts +1 -1
package/dist/server/server.d.ts.map +1 -1
package/dist/server/server.js +21 -8
package/dist/server/server.js.map +1 -1
package/dist/server/workspace.d.ts +13 -0
package/dist/server/workspace.d.ts.map +1 -0
package/dist/server/workspace.js +55 -0
package/dist/server/workspace.js.map +1 -0
package/dist/shared/types.d.ts +9 -0
package/dist/shared/types.d.ts.map +1 -1
package/dist/web/assets/index-BCBuW76o.css +1 -0
package/dist/web/assets/index-BwIAKPNq.js +51 -0
package/dist/web/favicon.png +0 -0
package/dist/web/index.html +3 -2
package/dist/web/promptbook-logo.png +0 -0
package/package.json +19 -2
package/src/index.ts +2 -0
package/src/server/api.ts +57 -18
package/src/server/book-source.ts +67 -0
package/src/server/server.ts +22 -9
package/src/server/workspace.ts +64 -0
package/src/shared/types.ts +11 -0
package/src/web/App.tsx +91 -28
package/src/web/api.ts +26 -10
package/src/web/components/Sidebar.tsx +37 -0
package/src/web/index.html +1 -0
package/src/web/public/favicon.png +0 -0
package/src/web/public/promptbook-logo.png +0 -0
package/src/web/styles.css +35 -0
package/src/web/types.ts +2 -0
package/dist/web/assets/index-B2Wxtb-f.css +0 -1
package/dist/web/assets/index-C8f_6lr_.js +0 -51

package/dist/web/favicon.png ADDED Viewed

Binary file

package/dist/web/index.html CHANGED Viewed

@@ -3,9 +3,10 @@
   <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>
-    <script type="module" crossorigin src="/assets/index-C8f_6lr_.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B2Wxtb-f.css">
+    <script type="module" crossorigin src="/assets/index-BwIAKPNq.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BCBuW76o.css">
   </head>
   <body>
     <div id="root"></div>

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

Binary file

package/package.json CHANGED Viewed

@@ -1,9 +1,26 @@
 {
   "name": "@markbrutx/promptbook-viewer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Storybook-for-prompts: a local web app that renders a prompts folder via @markbrutx/promptbook-core.",
   "type": "module",
   "license": "MIT",
+  "keywords": [
+    "prompt",
+    "prompt-engineering",
+    "prompt-management",
+    "llm",
+    "ai",
+    "viewer",
+    "storybook",
+    "composition"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/markbrutx/promptbook.git",
+    "directory": "packages/viewer"
+  },
+  "homepage": "https://github.com/markbrutx/promptbook#readme",
+  "bugs": "https://github.com/markbrutx/promptbook/issues",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,7 +43,7 @@
     "check": "biome check ."
   },
   "dependencies": {
-    "@markbrutx/promptbook-core": "^0.1.0"
+    "@markbrutx/promptbook-core": "^0.2.0"
   },
   "devDependencies": {
     "@biomejs/biome": "latest",

package/src/index.ts CHANGED Viewed

@@ -7,6 +7,7 @@ export type {
   Annotation,
   AnnotationsResponse,
   BookResponse,
+  BooksResponse,
   CompositionSummary,
   FragmentSummary,
   LintResponse,
@@ -16,4 +17,5 @@ export type {
   UsedInReference,
   UsedInResponse,
   VariantSummary,
+  WorkspaceBook,
 } from "./shared/types.js";

package/src/server/api.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import type { IncomingMessage, ServerResponse } from "node:http";
 import type { Context } from "@markbrutx/promptbook-core";
 import type { AnnotateRequest, ResolveRequest } from "../shared/types.js";
-import { type AnnotateInput, createAnnotationStore } from "./annotations.js";
-import type { BookSource } from "./book-source.js";
+import { type AnnotateInput, type AnnotationStore, createAnnotationStore } from "./annotations.js";
+import type { ResolvedBook, WorkspaceSource } from "./book-source.js";
 import {
   buildBookResponse,
   buildLintResponse,
@@ -12,8 +12,7 @@ import {
 import { serveStatic } from "./static.js";
 export interface RequestHandlerOptions {
-  source: BookSource;
-  promptsDir: string;
+  workspace: WorkspaceSource;
   /** Directory of the built web bundle (dist/web). */
   webRoot: string;
 }
@@ -21,8 +20,8 @@ export interface RequestHandlerOptions {
 /** A request handler plus the hook the folder watcher uses to push reloads. */
 export interface RequestHandler {
   handle(req: IncomingMessage, res: ServerResponse): void;
-  /** Invalidate the cached book and notify connected clients to refetch. */
-  notifyReload(): void;
+  /** Invalidate a changed book (or all) and notify clients to refetch. */
+  notifyReload(book?: string): void;
 }
 function sendJson(res: ServerResponse, status: number, payload: unknown): void {
@@ -80,48 +79,87 @@ function asAnnotateRequest(body: unknown): AnnotateInput {
   return input;
 }
+const EMPTY_BOOK = { compositions: [], codePrompts: [], fragments: [], warnings: [] } as const;
 export function createRequestHandler(options: RequestHandlerOptions): RequestHandler {
-  const { source, promptsDir, webRoot } = options;
+  const { workspace, webRoot } = options;
   const sseClients = new Set<ServerResponse>();
-  const annotations = createAnnotationStore(promptsDir);
+  const annotationStores = new Map<string, AnnotationStore>();
+  /** Per-book annotation queue, keyed by directory; bookless roots write at root. */
+  const annotationsFor = async (bookName: string | undefined): Promise<AnnotationStore> => {
+    const resolved = await workspace.resolve(bookName);
+    const dir = resolved?.book.dir ?? workspace.root;
+    let store = annotationStores.get(dir);
+    if (store === undefined) {
+      store = createAnnotationStore(dir);
+      annotationStores.set(dir, store);
+    }
+    return store;
+  };
+  /** Resolve the active book or throw a 400-worthy error when the workspace is empty. */
+  const requireBook = async (bookName: string | undefined): Promise<ResolvedBook> => {
+    const resolved = await workspace.resolve(bookName);
+    if (resolved === undefined) {
+      throw new Error("no book found in the workspace");
+    }
+    return resolved;
+  };
   const handle = async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
     const url = new URL(req.url ?? "/", "http://localhost");
     const path = url.pathname;
     const method = req.method ?? "GET";
+    const bookName = url.searchParams.get("book") ?? undefined;
     try {
+      if (path === "/api/books" && method === "GET") {
+        sendJson(res, 200, { books: await workspace.books() });
+        return;
+      }
       if (path === "/api/book" && method === "GET") {
-        sendJson(res, 200, buildBookResponse(await source.get(), promptsDir));
+        const resolved = await workspace.resolve(bookName);
+        if (resolved === undefined) {
+          sendJson(res, 200, EMPTY_BOOK);
+          return;
+        }
+        sendJson(res, 200, buildBookResponse(resolved.folder, resolved.book.dir));
         return;
       }
       if (path === "/api/resolve" && method === "POST") {
         const { prompt, context } = asResolveRequest(await readJsonBody(req));
-        sendJson(res, 200, buildResolveResponse(await source.get(), prompt, context));
+        const { folder } = await requireBook(bookName);
+        sendJson(res, 200, buildResolveResponse(folder, prompt, context));
         return;
       }
       if (path === "/api/lint" && method === "POST") {
         const { prompt, context } = asResolveRequest(await readJsonBody(req));
-        sendJson(res, 200, buildLintResponse(await source.get(), prompt, context));
+        const { folder } = await requireBook(bookName);
+        sendJson(res, 200, buildLintResponse(folder, prompt, context));
         return;
       }
       if (path.startsWith("/api/used-in/") && method === "GET") {
         const id = decodeURIComponent(path.slice("/api/used-in/".length));
-        sendJson(res, 200, buildUsedInResponse(await source.get(), id));
+        const { folder } = await requireBook(bookName);
+        sendJson(res, 200, buildUsedInResponse(folder, id));
         return;
       }
       if (path === "/api/annotate" && method === "POST") {
-        const annotation = await annotations.append(asAnnotateRequest(await readJsonBody(req)));
+        const store = await annotationsFor(bookName);
+        const annotation = await store.append(asAnnotateRequest(await readJsonBody(req)));
         sendJson(res, 200, annotation);
         return;
       }
       if (path === "/api/annotations" && method === "GET") {
-        sendJson(res, 200, { annotations: await annotations.list() });
+        const store = await annotationsFor(bookName);
+        sendJson(res, 200, { annotations: await store.list() });
         return;
       }
       if (path.startsWith("/api/annotations/") && method === "DELETE") {
         const id = decodeURIComponent(path.slice("/api/annotations/".length));
-        const removed = await annotations.remove(id);
+        const store = await annotationsFor(bookName);
+        const removed = await store.remove(id);
         sendJson(res, removed ? 200 : 404, { id, removed });
         return;
       }
@@ -154,10 +192,11 @@ export function createRequestHandler(options: RequestHandlerOptions): RequestHan
     handle(req, res) {
       void handle(req, res);
     },
-    notifyReload() {
-      source.invalidate();
+    notifyReload(book) {
+      workspace.invalidate(book);
+      const data = book !== undefined ? JSON.stringify({ book }) : "{}";
       for (const client of sseClients) {
-        client.write("event: reload\ndata: {}\n\n");
+        client.write(`event: reload\ndata: ${data}\n\n`);
       }
     },
   };

package/src/server/book-source.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Fixture, FsAdapter, PromptBook } from "@markbrutx/promptbook-core";
 import { loadFixtures, loadPrompts } from "@markbrutx/promptbook-core";
+import { type Book, loadWorkspaceBooks } from "./workspace.js";
 /** A loaded prompts folder plus the fixtures that supply named variants. */
 export interface LoadedFolder {
@@ -52,3 +53,69 @@ export function createBookSource(promptsDir: string, fs?: FsAdapter): BookSource
     },
   };
 }
+/** A book resolved for a request: its identity plus its loaded folder. */
+export interface ResolvedBook {
+  book: Book;
+  folder: LoadedFolder;
+}
+/**
+ * Caches a {@link BookSource} per book across a whole workspace, discovering the
+ * books under the root lazily. One viewer serves every book through a single
+ * switcher: `books()` lists them, `resolve(name)` loads one (defaulting to the
+ * first), and `invalidate(name)` drops one book's cache while always re-scanning
+ * the book set (so a new folder appears without a restart).
+ */
+export interface WorkspaceSource {
+  /** Root the workspace was discovered from (annotation fallback when bookless). */
+  root: string;
+  /** Discovered books (name + dir), re-scanned after {@link invalidate}. */
+  books(): Promise<Book[]>;
+  /** Load a book by name, or the first book when the name is missing/unknown. */
+  resolve(name?: string): Promise<ResolvedBook | undefined>;
+  /** Drop one book's cache (or none) and re-scan the book set. */
+  invalidate(name?: string): void;
+}
+export function createWorkspaceSource(root: string, fs?: FsAdapter): WorkspaceSource {
+  let bookList: Promise<Book[]> | undefined;
+  const sources = new Map<string, BookSource>();
+  const discover = (): Promise<Book[]> => {
+    if (bookList === undefined) {
+      bookList = loadWorkspaceBooks(root, fs);
+    }
+    return bookList;
+  };
+  const sourceFor = (book: Book): BookSource => {
+    let source = sources.get(book.name);
+    if (source === undefined) {
+      source = createBookSource(book.dir, fs);
+      sources.set(book.name, source);
+    }
+    return source;
+  };
+  return {
+    root,
+    books() {
+      return discover();
+    },
+    async resolve(name) {
+      const books = await discover();
+      if (books.length === 0) {
+        return undefined;
+      }
+      const book = books.find((b) => b.name === name) ?? (books[0] as Book);
+      return { book, folder: await sourceFor(book).get() };
+    },
+    invalidate(name) {
+      bookList = undefined;
+      if (name !== undefined) {
+        sources.get(name)?.invalidate();
+      }
+    },
+  };
+}

package/src/server/server.ts CHANGED Viewed

@@ -1,13 +1,14 @@
 import { spawn } from "node:child_process";
 import { type FSWatcher, watch } from "node:fs";
 import { createServer } from "node:http";
+import { sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import type { FsAdapter } from "@markbrutx/promptbook-core";
 import { createRequestHandler } from "./api.js";
-import { createBookSource } from "./book-source.js";
+import { createWorkspaceSource } from "./book-source.js";
 export interface ViewerOptions {
-  /** Folder containing `fragments/`, `rules/` and optional `fixtures/`. */
+  /** Workspace root (a single book, or a folder of sibling books). */
   promptsDir: string;
   /** Port to listen on; 0 (default) picks a free port. */
   port?: number;
@@ -41,15 +42,27 @@ function openBrowser(url: string): void {
   }
 }
-/** Watch the prompts folder and call `onChange` (debounced) on any edit. */
-function watchFolder(promptsDir: string, onChange: () => void): FSWatcher | undefined {
+/**
+ * Watch the workspace root and call `onChange` (debounced) with the changed
+ * book. A change path's first segment names its top-level book; when several
+ * books or unknown paths change in one window, `undefined` is passed so the
+ * client refetches the active book regardless.
+ */
+function watchFolder(rootDir: string, onChange: (book: string | undefined) => void): FSWatcher | undefined {
   try {
     let timer: NodeJS.Timeout | undefined;
-    const watcher = watch(promptsDir, { recursive: true }, () => {
+    let changed = new Set<string | undefined>();
+    const watcher = watch(rootDir, { recursive: true }, (_event, filename) => {
+      const name = typeof filename === "string" && filename.length > 0 ? filename : undefined;
+      changed.add(name === undefined ? undefined : name.split(sep)[0]);
       if (timer !== undefined) {
         clearTimeout(timer);
       }
-      timer = setTimeout(onChange, 50);
+      timer = setTimeout(() => {
+        const books = [...changed];
+        changed = new Set();
+        onChange(books.length === 1 ? books[0] : undefined);
+      }, 50);
     });
     watcher.on("error", () => {});
     return watcher;
@@ -66,8 +79,8 @@ function watchFolder(promptsDir: string, onChange: () => void): FSWatcher | unde
 export async function startViewer(options: ViewerOptions): Promise<Viewer> {
   const { promptsDir, port = 0, open = false, fs } = options;
   const webRoot = fileURLToPath(new URL("../web", import.meta.url));
-  const source = createBookSource(promptsDir, fs);
-  const handler = createRequestHandler({ source, promptsDir, webRoot });
+  const workspace = createWorkspaceSource(promptsDir, fs);
+  const handler = createRequestHandler({ workspace, webRoot });
   const server = createServer((req, res) => handler.handle(req, res));
   await new Promise<void>((resolve, reject) => {
@@ -79,7 +92,7 @@ export async function startViewer(options: ViewerOptions): Promise<Viewer> {
   const boundPort = typeof address === "object" && address !== null ? address.port : port;
   const url = `http://localhost:${boundPort}`;
-  const watcher = watchFolder(promptsDir, () => handler.notifyReload());
+  const watcher = watchFolder(promptsDir, (book) => handler.notifyReload(book));
   if (open) {
     openBrowser(url);

package/src/server/workspace.ts ADDED Viewed

@@ -0,0 +1,64 @@
+import { basename, join } from "node:path";
+import type { FsAdapter } from "@markbrutx/promptbook-core";
+import { nodeFs } from "@markbrutx/promptbook-core";
+/** A discovered prompts book: its folder name and absolute directory. */
+export interface Book {
+  name: string;
+  dir: string;
+}
+/** Folder names that are book internals or noise, never workspace sub-books. */
+const NON_BOOK_DIRS = new Set(["node_modules", "fragments", "rules", "code-prompts"]);
+/** Markers that make a folder a loadable book (a config or a loadable form). */
+const BOOK_MARKERS = ["promptbook.json", "rules", "code-prompts"];
+/** True when `dir` looks like a prompts book (has a config or a loadable form). */
+async function isBook(fs: FsAdapter, dir: string): Promise<boolean> {
+  let entries: string[];
+  try {
+    entries = await fs.readDir(dir);
+  } catch {
+    return false;
+  }
+  return BOOK_MARKERS.some((marker) => entries.includes(marker));
+}
+/**
+ * Find the books directly under `rootDir`: each non-internal subfolder that is
+ * itself a book. One level deep, sorted by name. This mirrors the CLI's
+ * discovery (kept as a server-local copy so the viewer never depends on the
+ * CLI), so `view` and `ls --all` see the same workspace.
+ */
+async function discoverBooks(rootDir: string, fs: FsAdapter = nodeFs()): Promise<Book[]> {
+  let entries: string[];
+  try {
+    entries = await fs.readDir(rootDir);
+  } catch {
+    return [];
+  }
+  const books: Book[] = [];
+  for (const name of [...entries].sort()) {
+    if (name.startsWith(".") || name.startsWith("_") || NON_BOOK_DIRS.has(name)) {
+      continue;
+    }
+    const dir = join(rootDir, name);
+    if (await isBook(fs, dir)) {
+      books.push({ name, dir });
+    }
+  }
+  return books;
+}
+/**
+ * Read a workspace from `rootDir`. When the root is itself a book it is the only
+ * book (back-compat single-book view, named after the folder); otherwise the
+ * root is a workspace of its sub-books.
+ */
+export async function loadWorkspaceBooks(rootDir: string, fs: FsAdapter = nodeFs()): Promise<Book[]> {
+  if (await isBook(fs, rootDir)) {
+    return [{ name: basename(rootDir), dir: rootDir }];
+  }
+  return discoverBooks(rootDir, fs);
+}

package/src/shared/types.ts CHANGED Viewed

@@ -68,6 +68,17 @@ export interface CodePromptSummary {
   sourceFile: string;
 }
+/** One book in the workspace, as `GET /api/books` lists it. */
+export interface WorkspaceBook {
+  name: string;
+  dir: string;
+}
+/** Response of `GET /api/books`: the switcher menu. */
+export interface BooksResponse {
+  books: WorkspaceBook[];
+}
 /** Response of `GET /api/book`. */
 export interface BookResponse {
   compositions: CompositionSummary[];

package/src/web/App.tsx CHANGED Viewed

@@ -17,6 +17,7 @@ import type {
   LintResponse,
   ResolveResponse,
   UsedInResponse,
+  WorkspaceBook,
 } from "./types.js";
 /** Order-independent key for comparing two contexts (variant identity). */
@@ -47,6 +48,8 @@ function controlKeys(composition: CompositionSummary | undefined): string[] {
 }
 export function App() {
+  const [books, setBooks] = useState<WorkspaceBook[]>([]);
+  const [activeBook, setActiveBook] = useState<string | null>(null);
   const [book, setBook] = useState<BookResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [selection, setSelection] = useState<Selection | null>(null);
@@ -58,19 +61,34 @@ export function App() {
   const [compareResolved, setCompareResolved] = useState<ResolveResponse | null>(null);
   const [annotations, setAnnotations] = useState<Annotation[]>([]);
   const requestId = useRef(0);
+  // Mirror activeBook into a ref so the (book-independent) SSE subscription can
+  // read the current book without re-subscribing on every switch.
+  const activeBookRef = useRef<string | null>(null);
+  activeBookRef.current = activeBook;
-  const loadAnnotations = useCallback(async () => {
+  const loadBooks = useCallback(async () => {
     try {
-      const { annotations: next } = await api.annotations();
+      const { books: next } = await api.books();
+      setBooks(next);
+      return next;
+    } catch {
+      setBooks([]);
+      return [];
+    }
+  }, []);
+  const loadAnnotations = useCallback(async (which: string | null) => {
+    try {
+      const { annotations: next } = await api.annotations(which);
       setAnnotations(next);
     } catch {
       setAnnotations([]);
     }
   }, []);
-  const loadBook = useCallback(async () => {
+  const loadBook = useCallback(async (which: string | null) => {
     try {
-      const next = await api.book();
+      const next = await api.book(which);
       setBook(next);
       setError(null);
       return next;
@@ -80,25 +98,54 @@ export function App() {
     }
   }, []);
-  // Initial load + pick the first composition's Default variant.
+  // Discover the workspace's books, then activate the first one.
+  useEffect(() => {
+    void loadBooks().then((list) => {
+      setActiveBook((current) => current ?? list[0]?.name ?? null);
+    });
+  }, [loadBooks]);
+  // Load the active book's tree + annotations and reset the selection to its
+  // first composition. Re-runs on every book switch (a fresh menu each time).
   useEffect(() => {
-    void loadBook().then((next) => {
+    if (activeBook === null) {
+      setBook(null);
+      setSelection(null);
+      return;
+    }
+    void loadBook(activeBook).then((next) => {
       const first = next?.compositions[0];
-      if (first !== undefined) {
-        setSelection({ kind: "variant", composition: first.name, variant: DEFAULT_VARIANT.name });
-        setContext({});
-      }
+      setSelection(
+        first !== undefined
+          ? { kind: "variant", composition: first.name, variant: DEFAULT_VARIANT.name }
+          : null,
+      );
+      setContext({});
+      setCompareVariant("");
     });
-    void loadAnnotations();
-  }, [loadBook, loadAnnotations]);
+    void loadAnnotations(activeBook);
+  }, [activeBook, loadBook, loadAnnotations]);
-  // Hot-reload: refetch the book on folder changes. The new book object is a
-  // fresh reference, so the resolve/used-in effects below re-run automatically.
+  // 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.
   useEffect(() => {
     const source = new EventSource("/api/events");
-    source.addEventListener("reload", () => void loadBook());
+    source.addEventListener("reload", (event) => {
+      let changed: string | undefined;
+      try {
+        changed = (JSON.parse((event as MessageEvent).data) as { book?: string }).book;
+      } catch {
+        changed = undefined;
+      }
+      void loadBooks();
+      const active = activeBookRef.current;
+      if (active !== null && (changed === undefined || changed === active)) {
+        void loadBook(active);
+      }
+    });
     return () => source.close();
-  }, [loadBook]);
+  }, [loadBook, loadBooks]);
   const compositions = book?.compositions ?? [];
   const selectedComposition =
@@ -113,7 +160,10 @@ export function App() {
     requestId.current += 1;
     const id = requestId.current;
     const { composition } = selection;
-    void Promise.all([api.resolve(composition, context), api.lint(composition, context)])
+    void Promise.all([
+      api.resolve(activeBook, composition, context),
+      api.lint(activeBook, composition, context),
+    ])
       .then(([r, l]) => {
         if (requestId.current === id) {
           setResolved(r);
@@ -126,7 +176,7 @@ export function App() {
           setError((e as Error).message);
         }
       });
-  }, [book, selection, context]);
+  }, [book, selection, context, activeBook]);
   useEffect(() => {
     if (book === null || selection?.kind !== "fragment") {
@@ -134,10 +184,10 @@ export function App() {
       return;
     }
     void api
-      .usedIn(selection.id)
+      .usedIn(activeBook, selection.id)
       .then(setUsedIn)
       .catch(() => setUsedIn(null));
-  }, [book, selection]);
+  }, [book, selection, activeBook]);
   // Resolve the comparison variant for the Diff panel.
   useEffect(() => {
@@ -147,10 +197,14 @@ export function App() {
     }
     const ctx = variantContext(selectedComposition, compareVariant);
     void api
-      .resolve(selection.composition, ctx)
+      .resolve(activeBook, selection.composition, ctx)
       .then(setCompareResolved)
       .catch(() => setCompareResolved(null));
-  }, [selection, compareVariant, selectedComposition]);
+  }, [selection, compareVariant, selectedComposition, activeBook]);
+  const selectBook = useCallback((name: string) => {
+    setActiveBook(name);
+  }, []);
   const selectVariant = useCallback(
     (composition: string, variant: string) => {
@@ -175,18 +229,24 @@ export function App() {
       if (selection?.kind !== "variant") {
         return;
       }
-      await api.annotate({ prompt: selection.composition, context, fragmentId, anchorText, comment });
-      await loadAnnotations();
+      await api.annotate(activeBook, {
+        prompt: selection.composition,
+        context,
+        fragmentId,
+        anchorText,
+        comment,
+      });
+      await loadAnnotations(activeBook);
     },
-    [selection, context, loadAnnotations],
+    [selection, context, activeBook, loadAnnotations],
   );
   const resolveAnnotation = useCallback(
     async (id: string) => {
-      await api.resolveAnnotation(id);
-      await loadAnnotations();
+      await api.resolveAnnotation(activeBook, id);
+      await loadAnnotations(activeBook);
     },
-    [loadAnnotations],
+    [activeBook, loadAnnotations],
   );
   // Annotations belonging to exactly the variant on screen (composition + context).
@@ -211,6 +271,9 @@ export function App() {
   return (
     <div className="layout">
       <Sidebar
+        books={books}
+        activeBook={activeBook}
+        onSelectBook={selectBook}
         tree={tree}
         fragmentGroups={fragmentGroups}
         selection={selection}