@markbrutx/promptbook-viewer 0.1.0

package/src/web/styles.css

@@ -0,0 +1,484 @@
+: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 */
+.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: 0.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 */
+.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: rgba(0, 0, 0, 0.06);
+  border-bottom-left-radius: 6px;
+  font-family: system-ui, sans-serif;
+  color: var(--muted);
+}
+
+/* Right rail */
+.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: 0.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;
+}
+
+/* Controls */
+.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;
+}
+
+/* Explain + lint */
+.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 */
+.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);
+}
+
+/* Annotations */
+.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 rgba(0, 0, 0, 0.16);
+}
+
+.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: 0.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;
+}
+
+/* Shared */
+.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: 0.06em;
+  background: #2b2b40;
+  color: #fff;
+}
+
+/* Code-prompt canvas */
+.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;
+}

package/src/web/tree.ts

@@ -0,0 +1,134 @@
+import type { CodePromptSummary, CompositionSummary, FragmentSummary, VariantSummary } from "./types.js";
+
+/** A selectable variant (composition assembled under a named context). */
+interface VariantNode {
+  type: "variant";
+  composition: string;
+  variant: VariantSummary;
+}
+
+/** A composition leaf in the sidebar; its variants render when expanded. */
+interface CompositionNode {
+  type: "composition";
+  /** Full composition name (path-like, e.g. `assistant/terse`). */
+  name: string;
+  /** Last path segment, shown as the leaf label. */
+  label: string;
+  variants: VariantNode[];
+}
+
+/** A code-prompt leaf in the sidebar; its samples render when expanded. */
+interface CodePromptNode {
+  type: "code";
+  /** Full code-prompt name (path-like). */
+  name: string;
+  /** Last path segment, shown as the leaf label. */
+  label: string;
+  /** Sample labels, in declaration order. */
+  samples: string[];
+}
+
+/** A folder grouping path-like prompt names (Storybook-style headings). */
+export interface GroupNode {
+  type: "group";
+  label: string;
+  children: CompositionTreeNode[];
+}
+
+export type CompositionTreeNode = GroupNode | CompositionNode | CodePromptNode;
+
+/** The implicit, context-free variant every composition always has. */
+export const DEFAULT_VARIANT: VariantSummary = { name: "Default", context: {} };
+
+function variantNodes(composition: CompositionSummary): VariantNode[] {
+  const variants = [DEFAULT_VARIANT, ...composition.variants];
+  return variants.map((variant) => ({ type: "variant", composition: composition.name, variant }));
+}
+
+/** Walk/create folder groups for a path-like name, returning the leaf's group + label. */
+function leafSlot(root: GroupNode, name: string): { group: GroupNode; label: string } {
+  const segments = name.split("/").filter((s) => s !== "");
+  let group = root;
+  for (const segment of segments.slice(0, -1)) {
+    let next = group.children.find(
+      (child): child is GroupNode => child.type === "group" && child.label === segment,
+    );
+    if (next === undefined) {
+      next = { type: "group", label: segment, children: [] };
+      group.children.push(next);
+    }
+    group = next;
+  }
+  return { group, label: segments[segments.length - 1] ?? name };
+}
+
+/**
+ * Build the hierarchical prompt tree: compositions and code-prompts side by
+ * side in one menu. A `/` in a name nests it under folder groups (like
+ * Storybook titles); the final segment is the leaf. Groups sort before leaves;
+ * leaves (composition or code) sort alphabetically at each level.
+ */
+export function buildCompositionTree(
+  compositions: CompositionSummary[],
+  codePrompts: CodePromptSummary[] = [],
+): CompositionTreeNode[] {
+  const root: GroupNode = { type: "group", label: "", children: [] };
+
+  for (const composition of compositions) {
+    const { group, label } = leafSlot(root, composition.name);
+    group.children.push({
+      type: "composition",
+      name: composition.name,
+      label,
+      variants: variantNodes(composition),
+    });
+  }
+  for (const codePrompt of codePrompts) {
+    const { group, label } = leafSlot(root, codePrompt.name);
+    group.children.push({
+      type: "code",
+      name: codePrompt.name,
+      label,
+      samples: codePrompt.samples.map((s) => s.label),
+    });
+  }
+
+  sortGroup(root);
+  return root.children;
+}
+
+function sortGroup(group: GroupNode): void {
+  group.children.sort((a, b) => {
+    const aGroup = a.type === "group";
+    const bGroup = b.type === "group";
+    if (aGroup !== bGroup) {
+      return aGroup ? -1 : 1;
+    }
+    return a.label.localeCompare(b.label);
+  });
+  for (const child of group.children) {
+    if (child.type === "group") {
+      sortGroup(child);
+    }
+  }
+}
+
+/** A group of fragments sharing a `kind` (or "other" when unset). */
+export interface FragmentGroup {
+  kind: string;
+  fragments: FragmentSummary[];
+}
+
+/** Group fragments by `kind` for the sidebar's Fragments section. */
+export function buildFragmentGroups(fragments: FragmentSummary[]): FragmentGroup[] {
+  const byKind = new Map<string, FragmentSummary[]>();
+  for (const fragment of fragments) {
+    const kind = fragment.kind ?? "other";
+    const list = byKind.get(kind) ?? [];
+    list.push(fragment);
+    byKind.set(kind, list);
+  }
+  return [...byKind.entries()]
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([kind, list]) => ({ kind, fragments: list }));
+}

package/src/web/types.ts

@@ -0,0 +1,17 @@
+// Single import surface for the web app: core scalar/trace types plus the
+// wire DTOs. Everything here is type-only and erased from the bundle.
+export type { Context, ContextValue, Trace, When } from "@markbrutx/promptbook-core";
+export type {
+  AnnotateRequest,
+  Annotation,
+  AnnotationsResponse,
+  BookResponse,
+  CodePromptSummary,
+  CompositionSummary,
+  FragmentSummary,
+  LintResponse,
+  ResolveResponse,
+  Segment,
+  UsedInResponse,
+  VariantSummary,
+} from "../shared/types.js";