@jmcombs/pi-steward 0.0.0

package/ui/components/slots.ts

@@ -0,0 +1,114 @@
+/**
+ * The SLOTS panel: how many concurrent requests each loaded model is running.
+ *
+ * A "slot" is one request lane inside a single model's `llama-server` — a model
+ * loaded with `--parallel 4` has four of them, and its context is split across
+ * them. It is not a seat for a model (that ceiling is the router's `max models`,
+ * shown in CONFIG). So the panel reads as one compact chip per loaded model:
+ * a colored dot, the model's short name, and how many of its slots are busy.
+ * The per-slot context detail — how full each lane's context is — rides on the
+ * chip's hover title rather than taking a row of its own. With nothing loaded
+ * the panel collapses to a single empty note.
+ */
+
+import type { SlotGroupVm, SlotsVm } from "../../core/select.js";
+import type { View } from "../dom.js";
+import { el, setAttr, setText, setVar, syncRows } from "../dom.js";
+
+interface ChipView {
+  root: HTMLElement;
+  dot: HTMLElement;
+  name: HTMLElement;
+  count: HTMLElement;
+  rate: HTMLElement;
+  peak: HTMLElement;
+}
+
+function createChip(): ChipView {
+  const dot = el("span", { class: "slot-chip__dot", attrs: { "aria-hidden": "true" } });
+  const name = el("span", { class: "slot-chip__name" });
+  const count = el("span", { class: "slot-chip__count" });
+  const rate = el("span", { class: "slot-chip__rate" });
+  const peak = el("span", { class: "slot-chip__peak" });
+  const root = el("div", { class: "slot-chip", children: [dot, name, count, rate, peak] });
+  return { root, dot, name, count, rate, peak };
+}
+
+/** The hover text: each of the model's slots and how full its context is. */
+function chipTitle(group: SlotGroupVm): string {
+  const lanes = group.slots.map((slot) => `slot ${slot.id}: ${slot.detail}`).join("\n");
+  return `${group.modelLabel} — ${group.summary}\n${lanes}`;
+}
+
+export function createSlotsStrip(): View<SlotsVm> {
+  const chips: ChipView[] = [];
+  const summary = el("span", { class: "slots__summary" });
+  const row = el("div", { class: "slots__chips" });
+  const empty = el("span", { class: "slots__empty", attrs: { hidden: true } });
+
+  const root = el("section", {
+    class: "slots",
+    attrs: { "aria-labelledby": "steward-slots-title" },
+    children: [
+      el("div", {
+        class: "slots__head",
+        children: [
+          el("h2", { class: "eyebrow", text: "Slots", attrs: { id: "steward-slots-title" } }),
+          summary,
+        ],
+      }),
+      empty,
+      row,
+    ],
+  });
+
+  return {
+    el: root,
+    update(vm) {
+      setText(summary, vm.totalSummary);
+      setText(empty, vm.emptyLabel);
+      // The note stands in for the chip row only when nothing is loaded.
+      setAttr(empty, "hidden", !vm.empty);
+
+      syncRows(row, chips, vm.empty ? 0 : vm.groups.length, createChip);
+      vm.groups.forEach((group, index) => {
+        const chip = chips[index];
+        if (chip === undefined) return;
+        const busy = group.busy > 0;
+        setVar(chip.dot, "model-color", group.modelColor);
+        setText(chip.name, group.modelLabel);
+        setText(chip.count, group.summary);
+        // A generating model shows how fast, right beside the fraction: the chip
+        // reads `2/4 busy · 63 t/s`. Idle models, and ones whose child lacks
+        // `--metrics`, have no rate, so the segment is dropped.
+        setText(chip.rate, `· ${group.rateLabel}`);
+        setAttr(chip.rate, "hidden", group.rateLabel === "");
+        // The busiest lane's context fill rides beside the fraction on a busy
+        // chip — the ambient overflow signal — colored by threshold but never
+        // color-only, since the percentage is printed. Idle chips carry none,
+        // and neither does a busy chip whose lanes have not reported a fill: an
+        // absent reading leaves the segment out rather than printing `0%`.
+        const showPeak = busy && group.peakLabel !== "";
+        setText(chip.peak, `· ${group.peakLabel}`);
+        setVar(chip.peak, "fg", group.peakColor);
+        setAttr(chip.peak, "hidden", !showPeak);
+        // A busy chip is called out so activity is legible without reading the
+        // fraction; the color alone never carries it.
+        setAttr(chip.root, "data-busy", busy ? "true" : "false");
+        // The whole chip is one label so a screen reader reads "model, 1/4 busy"
+        // (with the peak when busy) as a unit; the detail is on the title for a
+        // pointer user.
+        const ratePhrase = group.rateLabel === "" ? "" : `, ${group.rateLabel}`;
+        const peakPhrase = showPeak ? `, peak ${group.peakLabel} context` : "";
+        setAttr(
+          chip.root,
+          "aria-label",
+          busy
+            ? `${group.modelLabel}, ${group.summary}${ratePhrase}${peakPhrase}`
+            : `${group.modelLabel}, ${group.summary}`,
+        );
+        setAttr(chip.root, "title", chipTitle(group));
+      });
+    },
+  };
+}

package/ui/components/sparkline.ts

@@ -0,0 +1,59 @@
+/**
+ * The throughput-history cell: the window's tokens/second as bars, with a dashed
+ * rule at its average.
+ *
+ * The axis's left end is measured rather than assumed — see {@link SparkVm} —
+ * because samples close on the browser's snapshot clock and a strip built for
+ * two minutes really spans a little more.
+ */
+
+import type { SparkVm } from "../../core/select.js";
+import type { View } from "../dom.js";
+import { el, setStyle, setText, setVar, syncRows } from "../dom.js";
+
+interface Bar {
+  root: HTMLElement;
+}
+
+function createBar(): Bar {
+  return { root: el("div", { class: "spark__bar" }) };
+}
+
+export function createSparkline(): View<SparkVm> {
+  const bars: Bar[] = [];
+  const summary = el("span", { class: "spark__summary" });
+  const average = el("div", { class: "spark__avg" });
+  const plot = el("div", { class: "spark__bars" });
+  const axisStart = el("span", { text: "" });
+
+  const root = el("div", {
+    class: "metric",
+    children: [
+      el("div", {
+        class: "spark__head",
+        children: [el("span", { class: "eyebrow", text: "Throughput history" }), summary],
+      }),
+      el("div", { class: "spark__plot", children: [average, plot] }),
+      el("div", {
+        class: "spark__axis",
+        children: [axisStart, el("span", { text: "now" })],
+      }),
+    ],
+  });
+
+  return {
+    el: root,
+    update(vm) {
+      setText(summary, vm.summary);
+      setText(axisStart, vm.axisStart);
+      setStyle(average, "bottom", `${vm.averageLine}%`);
+      syncRows(plot, bars, vm.bars.length, createBar);
+      vm.bars.forEach((bar, index) => {
+        const node = bars[index];
+        if (node === undefined) return;
+        setStyle(node.root, "height", `${bar.height}%`);
+        setVar(node.root, "fill", bar.color);
+      });
+    },
+  };
+}

package/ui/components/toolbar.ts

@@ -0,0 +1,211 @@
+/**
+ * The console toolbar: the active-model pill, the two chip groups, the search
+ * box, the line count, and the pause/copy/download controls.
+ *
+ * It lays out as two explicit rows rather than one wrapping row, so chips from
+ * different groups can never end up adjacent across a wrap and read as one
+ * control set.
+ */
+
+import type { FamilyChipVm, LevelChipVm, ToolbarVm } from "../../core/select.js";
+import type { FamilyFilter, LevelFilter } from "../../core/state.js";
+import type { View } from "../dom.js";
+import { el, setAttr, setText, setVar, syncRows } from "../dom.js";
+
+export interface ToolbarHandlers {
+  onLevel: (level: LevelFilter) => void;
+  onFamily: (family: FamilyFilter) => void;
+  onQuery: (query: string) => void;
+  onToggleProxy: () => void;
+  onTogglePause: () => void;
+  onCopy: () => void;
+  onDownload: () => void;
+}
+
+/** One chip in either group: a label, a count, and the value it selects. */
+interface ChipRow<T> {
+  root: HTMLElement;
+  label: HTMLElement;
+  count: HTMLElement;
+  value: T;
+}
+
+/** The vm both groups satisfy — the same component, a different axis. */
+interface ChipVm {
+  label: string;
+  countLabel: string;
+  ariaLabel: string;
+  active: boolean;
+  background: string;
+  color: string;
+  borderColor: string;
+}
+
+/**
+ * A group of chips. The record-type chips and the level chips are the same
+ * component with a different handler and vm, so there is one chip to style,
+ * one to keep accessible, and no second thing to keep in step.
+ */
+function createChipGroup<T>(
+  container: HTMLElement,
+  initial: T,
+  onPress: (value: T) => void,
+): { rows: ChipRow<T>[]; update: (chips: readonly (ChipVm & { value: T })[]) => void } {
+  const rows: ChipRow<T>[] = [];
+
+  function create(): ChipRow<T> {
+    const label = el("span", { class: "chip__label" });
+    // The count is its own span so it can hold the muted colour whatever the
+    // chip's state is: a zero must never read as a tick, least of all on ERROR.
+    const count = el("span", { class: "chip__count" });
+    const row: ChipRow<T> = {
+      root: el("button", { class: "chip", attrs: { type: "button" }, children: [label, count] }),
+      label,
+      count,
+      value: initial,
+    };
+    row.root.addEventListener("click", () => {
+      onPress(row.value);
+    });
+    return row;
+  }
+
+  return {
+    rows,
+    update(chips) {
+      syncRows(container, rows, chips.length, create);
+      chips.forEach((chip, index) => {
+        const row = rows[index];
+        if (row === undefined) return;
+        row.value = chip.value;
+        setText(row.label, chip.label);
+        setText(row.count, chip.countLabel);
+        setVar(row.root, "bg", chip.background);
+        setVar(row.root, "fg", chip.color);
+        setVar(row.root, "bd", chip.borderColor);
+        setAttr(row.root, "aria-pressed", String(chip.active));
+        // The visible label is `WARN 2`, which a screen reader would read as
+        // two unrelated tokens. The name says what the number is.
+        setAttr(row.root, "aria-label", chip.ariaLabel);
+      });
+    },
+  };
+}
+
+export function createToolbar(handlers: ToolbarHandlers): View<ToolbarVm> {
+  const families = el("div", {
+    class: "toolbar__chips",
+    attrs: { role: "group", "aria-label": "Record type" },
+  });
+  const levels = el("div", {
+    class: "toolbar__chips",
+    attrs: { role: "group", "aria-label": "Log level" },
+  });
+  const familyGroup = createChipGroup<FamilyFilter>(families, "any", handlers.onFamily);
+  const levelGroup = createChipGroup<LevelFilter>(levels, "all", handlers.onLevel);
+
+  const active = el("span", { class: "toolbar__active" });
+  const search = el("input", {
+    class: "search",
+    // A plain text input: `type="search"` would add a UA cancel button and, on
+    // WebKit, a searchfield appearance that overrides the box below.
+    attrs: { type: "text", id: "steward-search", placeholder: "search log…" },
+    on: {
+      input: (event) => {
+        const target = event.currentTarget;
+        if (target instanceof HTMLInputElement) handlers.onQuery(target.value);
+      },
+    },
+  });
+  const proxy = el("button", {
+    class: "chip chip--proxy",
+    attrs: { type: "button" },
+    on: { click: handlers.onToggleProxy },
+  });
+  const count = el("span", { class: "toolbar__count" });
+  const pause = el("button", {
+    class: "chip chip--pause",
+    attrs: { type: "button" },
+    on: { click: handlers.onTogglePause },
+  });
+  const copy = el("button", {
+    class: "btn btn--toolbar",
+    attrs: { type: "button" },
+    text: "Copy",
+    on: { click: handlers.onCopy },
+  });
+  const download = el("button", {
+    class: "btn btn--toolbar",
+    attrs: { type: "button" },
+    text: "Download",
+    on: { click: handlers.onDownload },
+  });
+
+  // Focus order: filter label → model pill → kind group → proxied toggle →
+  // level group → search → count → pause → copy → download.
+  const root = el("div", {
+    class: "toolbar",
+    children: [
+      el("div", {
+        class: "toolbar__row",
+        children: [
+          el("span", { class: "toolbar__label", text: "filter" }),
+          active,
+          el("span", { class: "toolbar__label", text: "kind" }),
+          families,
+          proxy,
+        ],
+      }),
+      el("div", {
+        class: "toolbar__row",
+        children: [
+          el("span", { class: "toolbar__label", text: "level" }),
+          levels,
+          el("label", {
+            class: "visually-hidden",
+            text: "Search the log",
+            attrs: { for: "steward-search" },
+          }),
+          search,
+          count,
+          pause,
+          copy,
+          download,
+        ],
+      }),
+    ],
+  });
+
+  return {
+    el: root,
+    update(vm) {
+      setText(active, vm.activeModelLabel);
+      setVar(active, "bg", vm.activeModelBackground);
+      setVar(active, "fg", vm.activeModelColor);
+
+      familyGroup.update(
+        vm.familyChips.map((chip: FamilyChipVm) => ({ ...chip, value: chip.family })),
+      );
+      levelGroup.update(vm.levelChips.map((chip: LevelChipVm) => ({ ...chip, value: chip.level })));
+
+      setText(proxy, vm.proxyToggle.label);
+      setAttr(proxy, "aria-pressed", String(vm.proxyToggle.pressed));
+      setAttr(proxy, "aria-label", vm.proxyToggle.ariaLabel);
+      setAttr(proxy, "title", vm.proxyToggle.title);
+
+      // The operator owns the field while typing; only correct it if the state
+      // and the box have genuinely drifted apart.
+      if (search.value !== vm.query) search.value = vm.query;
+
+      setText(count, vm.lineCountLabel);
+
+      setText(pause, vm.pauseLabel);
+      setVar(pause, "bg", vm.pauseBackground);
+      setVar(pause, "fg", vm.pauseColor);
+      setVar(pause, "bd", vm.pauseBorder);
+      setAttr(pause, "aria-pressed", String(vm.paused));
+
+      setText(copy, vm.copyLabel);
+    },
+  };
+}

package/ui/dom.ts

@@ -0,0 +1,120 @@
+/**
+ * The whole of Steward's view layer's framework.
+ *
+ * Components build elements once and then patch them, so the helpers here are
+ * split between construction (`el`, `svg`) and the guarded writers (`setText`,
+ * `setVar`, `setAttr`) the update paths use. The guards matter: the metrics
+ * poll runs every 1.6 s and the log stream faster than that, and writing a
+ * property that has not changed is what turns a live dashboard into a
+ * flickering one.
+ */
+
+export type Child = Node | string | null | undefined | false;
+
+/** What every component in `./components/` hands back: a node and a patcher. */
+export interface View<T> {
+  el: HTMLElement;
+  update(vm: T): void;
+}
+
+export interface ElementSpec {
+  class?: string;
+  text?: string;
+  /** Plain HTML attributes. `false` removes the attribute. */
+  attrs?: Record<string, string | number | boolean>;
+  /** CSS custom properties, written without their leading dashes. */
+  vars?: Record<string, string>;
+  on?: Record<string, (event: Event) => void>;
+  children?: Child[];
+}
+
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+export function el<K extends keyof HTMLElementTagNameMap>(
+  tag: K,
+  spec: ElementSpec = {},
+): HTMLElementTagNameMap[K] {
+  const node = document.createElement(tag);
+  if (spec.class !== undefined) node.className = spec.class;
+  if (spec.text !== undefined) node.textContent = spec.text;
+  if (spec.attrs) {
+    for (const [name, value] of Object.entries(spec.attrs)) setAttr(node, name, value);
+  }
+  if (spec.vars) {
+    for (const [name, value] of Object.entries(spec.vars)) setVar(node, name, value);
+  }
+  if (spec.on) {
+    for (const [type, handler] of Object.entries(spec.on)) node.addEventListener(type, handler);
+  }
+  if (spec.children) append(node, spec.children);
+  return node;
+}
+
+/** SVG needs its own namespace, and its attributes are not DOM properties. */
+export function svg(
+  tag: string,
+  attrs: Record<string, string>,
+  children: Element[] = [],
+): SVGElement {
+  const node = document.createElementNS(SVG_NS, tag);
+  for (const [name, value] of Object.entries(attrs)) node.setAttribute(name, value);
+  for (const child of children) node.appendChild(child);
+  return node;
+}
+
+export function append(parent: Node, children: readonly Child[]): void {
+  for (const child of children) {
+    if (child === null || child === undefined || child === false) continue;
+    parent.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
+  }
+}
+
+export function clear(node: Node): void {
+  while (node.firstChild !== null) node.removeChild(node.firstChild);
+}
+
+/** Writes `text` only when it differs, so unchanged rows are never touched. */
+export function setText(node: Node, text: string): void {
+  if (node.textContent !== text) node.textContent = text;
+}
+
+export function setAttr(node: Element, name: string, value: string | number | boolean): void {
+  if (value === false) {
+    node.removeAttribute(name);
+    return;
+  }
+  const next = value === true ? "" : String(value);
+  if (node.getAttribute(name) !== next) node.setAttribute(name, next);
+}
+
+/** Sets a CSS custom property, named without its leading `--`. */
+export function setVar(node: HTMLElement | SVGElement, name: string, value: string): void {
+  const property = `--${name}`;
+  if (node.style.getPropertyValue(property) !== value) node.style.setProperty(property, value);
+}
+
+export function setStyle(node: HTMLElement, property: string, value: string): void {
+  if (node.style.getPropertyValue(property) !== value) node.style.setProperty(property, value);
+}
+
+/**
+ * Grows or shrinks a list of row records so it is exactly `count` long,
+ * mirroring the change into `parent`. Callers keep their own handles on the
+ * pieces of each row, so patching a row afterwards costs no lookups.
+ */
+export function syncRows<R extends { root: HTMLElement }>(
+  parent: HTMLElement,
+  rows: R[],
+  count: number,
+  create: () => R,
+): void {
+  while (rows.length > count) {
+    const extra = rows.pop();
+    if (extra !== undefined) parent.removeChild(extra.root);
+  }
+  while (rows.length < count) {
+    const row = create();
+    rows.push(row);
+    parent.appendChild(row.root);
+  }
+}

package/ui/favicon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40" role="img" aria-labelledby="steward-mark-title">
+  <title id="steward-mark-title">Steward</title>
+  <!--
+    The Steward mark: a serving dome over two trays, the lower one at 55%.
+    Drawn entirely in currentColor so it inverts with the theme. A standalone
+    favicon has no host element to inherit `color` from, so the accent is
+    resolved here — the one place in the package that names it outside the
+    stylesheet's tokens (Path Blue, lightened for dark tab bars).
+  -->
+  <style>
+    svg { color: #3465a4; }
+    @media (prefers-color-scheme: dark) { svg { color: #7aa2d6; } }
+  </style>
+  <path d="M8 17C8 10.9 13.4 6 20 6s12 4.9 12 11" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
+  <rect x="4" y="21" width="32" height="5" rx="2.5" fill="currentColor"/>
+  <rect x="4" y="29.6" width="32" height="5" rx="2.5" fill="currentColor" opacity="0.55"/>
+</svg>

package/ui/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Steward</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="stylesheet" href="/ui/steward.css" />
+    <script>
+      // Applied before the first paint so a dark-mode operator never gets a
+      // flash of the light palette. main.ts owns the value from here on. The
+      // default (unset) is System, so an OS-dark machine must resolve to dark
+      // here too, not just an explicit "dark".
+      try {
+        const mode = localStorage.getItem("steward.theme") || "system";
+        const dark =
+          mode === "dark" ||
+          (mode === "system" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        if (dark) document.documentElement.setAttribute("data-theme", "dark");
+      } catch {
+        /* private browsing can refuse storage; the light default still works */
+      }
+    </script>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="rail" id="steward-rail" aria-label="Service, host, models and configuration"></aside>
+      <main class="main" id="steward-main" aria-label="Metrics, log console and slots"></main>
+    </div>
+    <p class="visually-hidden" id="steward-status" role="status" aria-live="polite"></p>
+    <script type="module" src="/ui/main.js"></script>
+  </body>
+</html>