@markbrutx/promptbook-viewer 0.1.0

package/src/web/components/Sidebar.tsx

@@ -0,0 +1,178 @@
+import type { ReactNode } from "react";
+import { fragmentAccent } from "../colors.js";
+import type { Selection } from "../selection.js";
+import type { CompositionTreeNode, FragmentGroup, GroupNode } from "../tree.js";
+
+interface SidebarProps {
+  tree: CompositionTreeNode[];
+  fragmentGroups: FragmentGroup[];
+  selection: Selection | null;
+  onSelectVariant: (composition: string, variant: string) => void;
+  onSelectCode: (name: string, sample: string) => void;
+  onSelectFragment: (id: string) => void;
+}
+
+function isVariantSelected(selection: Selection | null, composition: string, variant: string): boolean {
+  return (
+    selection?.kind === "variant" && selection.composition === composition && selection.variant === variant
+  );
+}
+
+function isCodeSelected(selection: Selection | null, name: string, sample: string): boolean {
+  return selection?.kind === "code" && selection.name === name && selection.sample === sample;
+}
+
+type NodeHandlers = {
+  onSelectVariant: SidebarProps["onSelectVariant"];
+  onSelectCode: SidebarProps["onSelectCode"];
+};
+
+/** One selectable button under an expandable leaf (a variant, sample, or fragment). */
+interface LeafButton {
+  key: string;
+  label: string;
+  active: boolean;
+  onClick: () => void;
+}
+
+/** An expandable leaf: a label (with optional badge) over a list of select buttons. */
+function LeafItem({ label, badge, items }: { label: string; badge?: ReactNode; items: LeafButton[] }) {
+  return (
+    <li className="tree-leaf">
+      <details open>
+        <summary className="tree-composition">
+          {label}
+          {badge !== undefined ? <> {badge}</> : null}
+        </summary>
+        <ul className="tree">
+          {items.map((item) => (
+            <li key={item.key}>
+              <button
+                type="button"
+                className={`tree-item${item.active ? " active" : ""}`}
+                onClick={item.onClick}
+              >
+                {item.label}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </details>
+    </li>
+  );
+}
+
+function CompositionNodes({
+  nodes,
+  selection,
+  handlers,
+}: {
+  nodes: CompositionTreeNode[];
+  selection: Selection | null;
+  handlers: NodeHandlers;
+}) {
+  return (
+    <ul className="tree">
+      {nodes.map((node) => {
+        if (node.type === "group") {
+          return <GroupItem key={`g:${node.label}`} group={node} selection={selection} handlers={handlers} />;
+        }
+        if (node.type === "code") {
+          return (
+            <LeafItem
+              key={`x:${node.name}`}
+              label={node.label}
+              badge={<span className="badge badge-code">code</span>}
+              items={node.samples.map((sample) => ({
+                key: sample,
+                label: sample,
+                active: isCodeSelected(selection, node.name, sample),
+                onClick: () => handlers.onSelectCode(node.name, sample),
+              }))}
+            />
+          );
+        }
+        return (
+          <LeafItem
+            key={`c:${node.name}`}
+            label={node.label}
+            items={node.variants.map((variant) => ({
+              key: variant.variant.name,
+              label: variant.variant.name,
+              active: isVariantSelected(selection, node.name, variant.variant.name),
+              onClick: () => handlers.onSelectVariant(node.name, variant.variant.name),
+            }))}
+          />
+        );
+      })}
+    </ul>
+  );
+}
+
+function GroupItem({
+  group,
+  selection,
+  handlers,
+}: {
+  group: GroupNode;
+  selection: Selection | null;
+  handlers: NodeHandlers;
+}) {
+  return (
+    <li className="tree-group">
+      <details open>
+        <summary className="tree-folder">{group.label}</summary>
+        <CompositionNodes nodes={group.children} selection={selection} handlers={handlers} />
+      </details>
+    </li>
+  );
+}
+
+export function Sidebar({
+  tree,
+  fragmentGroups,
+  selection,
+  onSelectVariant,
+  onSelectCode,
+  onSelectFragment,
+}: SidebarProps) {
+  const handlers: NodeHandlers = { onSelectVariant, onSelectCode };
+  return (
+    <nav className="sidebar">
+      <section>
+        <h2 className="sidebar-title">Compositions</h2>
+        {tree.length === 0 ? (
+          <p className="muted">(none)</p>
+        ) : (
+          <CompositionNodes nodes={tree} selection={selection} handlers={handlers} />
+        )}
+      </section>
+
+      <section>
+        <h2 className="sidebar-title">Fragments</h2>
+        {fragmentGroups.map((group) => (
+          <details key={group.kind} className="tree-group" open>
+            <summary className="tree-folder">{group.kind}</summary>
+            <ul className="tree">
+              {group.fragments.map((fragment) => {
+                const active = selection?.kind === "fragment" && selection.id === fragment.id;
+                return (
+                  <li key={fragment.id}>
+                    <button
+                      type="button"
+                      className={`tree-item${active ? " active" : ""}`}
+                      onClick={() => onSelectFragment(fragment.id)}
+                    >
+                      <span className="swatch" style={{ background: fragmentAccent(fragment.id) }} />
+                      {fragment.id}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          </details>
+        ))}
+      </section>
+    </nav>
+  );
+}

package/src/web/diff.ts

@@ -0,0 +1,51 @@
+/** One row of a line diff: a line that is shared, added, or removed. */
+export interface DiffRow {
+  type: "equal" | "add" | "remove";
+  text: string;
+}
+
+/**
+ * Line-level diff of two texts via an LCS table. Lines present in both (in
+ * order) are "equal"; lines only in `a` are "remove", only in `b` are "add".
+ * Pure and deterministic — used by the variant Diff panel and unit-tested.
+ */
+export function diffLines(a: string, b: string): DiffRow[] {
+  const left = a.split("\n");
+  const right = b.split("\n");
+  const n = left.length;
+  const m = right.length;
+  const width = m + 1;
+
+  // Flat LCS table; `at` returns 0 past the edges so the recurrence is simple.
+  const lcs = new Array<number>((n + 1) * width).fill(0);
+  const at = (i: number, j: number): number => lcs[i * width + j] ?? 0;
+  for (let i = n - 1; i >= 0; i -= 1) {
+    for (let j = m - 1; j >= 0; j -= 1) {
+      lcs[i * width + j] = left[i] === right[j] ? at(i + 1, j + 1) + 1 : Math.max(at(i + 1, j), at(i, j + 1));
+    }
+  }
+
+  const rows: DiffRow[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < n && j < m) {
+    if (left[i] === right[j]) {
+      rows.push({ type: "equal", text: left[i] ?? "" });
+      i += 1;
+      j += 1;
+    } else if (at(i + 1, j) >= at(i, j + 1)) {
+      rows.push({ type: "remove", text: left[i] ?? "" });
+      i += 1;
+    } else {
+      rows.push({ type: "add", text: right[j] ?? "" });
+      j += 1;
+    }
+  }
+  for (; i < n; i += 1) {
+    rows.push({ type: "remove", text: left[i] ?? "" });
+  }
+  for (; j < m; j += 1) {
+    rows.push({ type: "add", text: right[j] ?? "" });
+  }
+  return rows;
+}

package/src/web/env.d.ts

@@ -0,0 +1,3 @@
+// Vite resolves CSS side-effect imports at build time; this declaration lets
+// the type-checker accept `import "./styles.css"` without pulling vite/client.
+declare module "*.css";

package/src/web/format.ts

@@ -0,0 +1,8 @@
+import type { Context, When } from "./types.js";
+
+/** Render a context/when bag as `k=v, k=v` (empty bag → ""). */
+export function kvLabel(bag: Context | When): string {
+  return Object.entries(bag)
+    .map(([k, v]) => `${k}=${v}`)
+    .join(", ");
+}

package/src/web/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>promptbook viewer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/src/web/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App.js";
+import "./styles.css";
+
+const container = document.getElementById("root");
+if (container === null) {
+  throw new Error("missing #root element");
+}
+
+createRoot(container).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/web/selection.ts

@@ -0,0 +1,5 @@
+/** What the user is currently inspecting: a composition variant, a code-prompt sample, or a fragment. */
+export type Selection =
+  | { kind: "variant"; composition: string; variant: string }
+  | { kind: "code"; name: string; sample: string }
+  | { kind: "fragment"; id: string };