{  "sdk": 7,  "id": "build-order",  "name": "Build order",  "blurb": "Finds the rounds a set of packages can be built in, and draws the dependency graph with its longest chain marked.",  "version": "1.0.0",  "capabilities": ["pure"],  "runtime": { "entry": "index.ts", "thread": "main" },  "kinds": ["group", "fields", "graph", "error"],  "card": "live",  "cardFields": 2,  "autoRun": true,  "inputs": [    {      "id": "deps",      "type": "textarea",      "label": "Packages",      "description": "One per line, as name: dependency, dependency. A name with no colon has no dependencies.",      "primary": true,      "dir": "ltr",      "rows": 8,      "maxLength": 4000,      "default": "app: api-client, ui-kit\nadmin: api-client, ui-kit, auth\napi-client: http, schema\nui-kit: icons\nauth: http\nhttp: core\nschema: core\nicons: core"    }  ],  "samples": [    {      "label": "Diamond",      "input": { "deps": "app: left, right\nleft: base\nright: base" }    },    {      "label": "A cycle",      "input": { "deps": "a: b\nb: c\nc: a" }    },    {      "label": "Not a name",      "input": { "deps": "app: api client" }    }  ],  "help": "README.md",  "tags": ["dependencies", "graph"]}

/** * Build order: which packages can be built in which round, drawn as the dependency graph they come from. * * The tool exists so the `graph` output kind added in contract version 7 has a real tool behind it, and it * is a real tool rather than a stub because a renderer nobody uses is a renderer nobody has looked at. It * covers what a graph result needs to get right: a layered graph laid out by the runtime, a highlighted path * (the longest chain, which bounds how fast a build can be), badges, a graph as one part of a group beside * fields, and the case where the answer is that there is no answer, a cycle, drawn with the cycle marked. */import type { Graph, Output, Tool } from "@toolbench/sdk"; // A type alias, not an interface: an interface does not satisfy the SDK's index-signature constraint.type Input = { deps: string }; type Parsed = { order: string[]; needs: Map<string, string[]> } | { error: string; at: number; len: number }; /** * One package per line, `name: dependency, dependency`. A name with no colon is a package with no * dependencies; a dependency never declared on a line of its own is one too. Blank lines are skipped. */export function parse(text: string): Parsed {  const order: string[] = [];  const needs = new Map<string, string[]>();  const add = (name: string) => {    if (!needs.has(name)) (needs.set(name, []), order.push(name));  };  const name = /^[A-Za-z0-9@._/-]+$/;  let at = 0;  for (const line of text.split("\n")) {    const start = at;    at += line.length + 1;    if (!line.trim()) continue;    const colon = line.indexOf(":");    const head = (colon < 0 ? line : line.slice(0, colon)).trim();    if (!name.test(head)) return { error: `"${head || line.trim()}" is not a package name. Use letters, digits and . _ - / @.`, at: start + line.indexOf(head || line.trim()), len: (head || line.trim()).length };    add(head);    if (colon < 0) continue;    const list = line.slice(colon + 1);    let from = start + colon + 1;    for (const part of list.split(",")) {      const dep = part.trim();      const offset = from + part.indexOf(dep);      from += part.length + 1;      if (!dep) continue;      if (!name.test(dep)) return { error: `"${dep}" is not a package name.`, at: offset, len: dep.length };      if (dep === head) return { error: `"${head}" depends on itself.`, at: offset, len: dep.length };      const mine = needs.get(head)!;      if (!mine.includes(dep)) mine.push(dep);    }  }  for (const deps of [...needs.values()]) for (const dep of deps) add(dep);  return { order, needs };} /** The first cycle met walking the packages in the order they were written, as names, closed. */function cycleIn(order: string[], needs: Map<string, string[]>): string[] | undefined {  const state = new Map<string, number>();  const path: string[] = [];  const walk = (n: string): string[] | undefined => {    state.set(n, 1);    path.push(n);    for (const d of needs.get(n)!) {      if (state.get(d) === 1) return [...path.slice(path.indexOf(d)), d];      if (!state.has(d)) {        const found = walk(d);        if (found) return found;      }    }    path.pop();    state.set(n, 2);    return undefined;  };  for (const n of order) {    if (state.has(n)) continue;    const found = walk(n);    if (found) return found;  }  return undefined;} function graphOf(order: string[], needs: Map<string, string[]>, round: Map<string, number> | undefined, highlight: string[]): Graph {  return {    label: "Package dependencies",    // Dependencies below what needs them, so the build reads upwards, round by round.    direction: "BT",    // The badge is the round a package builds in.    nodes: order.map((id) => (round ? { id, badge: String(round.get(id)) } : { id })),    // From a dependency to what needs it: the arrow says "is built before".    edges: order.flatMap((pkg) => needs.get(pkg)!.map((dep) => ({ from: dep, to: pkg }))),    highlight,  };} export default {  run({ deps }): Output {    const parsed = parse(deps);    if ("error" in parsed) return { kind: "error", message: parsed.error, input: "deps", at: parsed.at, len: parsed.len };    const { order, needs } = parsed;    if (order.length === 0) return { kind: "error", message: "No packages. Write one per line, as name: dependency, dependency.", input: "deps" };     const cycle = cycleIn(order, needs);    if (cycle) {      // Drawn against the direction of the edges, so the highlighted path runs the way the arrows do.      const path = [...cycle].reverse();      return {        kind: "group",        parts: [          { kind: "fields", fields: [{ label: "Build order", value: "none", note: "a cycle", tone: "bad", role: "verdict" }, { label: "Cycle", value: cycle.join(" → ") }] },          { kind: "graph", graph: graphOf(order, needs, undefined, path) },        ],      };    }     // The round each package can be built in: one more than its latest dependency.    const round = new Map<string, number>();    const level = (n: string): number => {      const known = round.get(n);      if (known !== undefined) return known;      const r = 1 + Math.max(0, ...needs.get(n)!.map(level));      round.set(n, r);      return r;    };    for (const n of order) level(n);    const rounds = Math.max(...round.values());    const built = [...order].sort((a, b) => round.get(a)! - round.get(b)! || order.indexOf(a) - order.indexOf(b));    const widest = Math.max(...Array.from({ length: rounds }, (_, r) => built.filter((n) => round.get(n) === r + 1).length));    // The longest chain, from the first package in the last round down through a dependency a round lower.    const chain = [built.find((n) => round.get(n) === rounds)!];    while (round.get(chain.at(-1)!)! > 1) {      const top = chain.at(-1)!;      chain.push(needs.get(top)!.find((d) => round.get(d) === round.get(top)! - 1)!);    }    const up = [...chain].reverse();    return {      kind: "group",      parts: [        {          kind: "fields",          fields: [            { label: "Build order", value: built.join(", "), role: "verdict" },            { label: "Rounds", value: String(rounds), note: `up to ${widest} at once` },            { label: "Longest chain", value: up.join(" → "), note: `${up.length} package${up.length === 1 ? "" : "s"}` },          ],        },        { kind: "graph", graph: graphOf(order, needs, round, up) },      ],    };  },} satisfies Tool<Input>;

<tool-host tool="build-order" mode="embed"></tool-host>

{  "sdk": 3,  "id": "histogram",  "name": "Histogram",  "blurb": "Bins a list of numbers and draws the counts as bars, with the running total on a second axis.",  "version": "1.0.0",  "capabilities": ["pure"],  "runtime": { "entry": "index.ts", "thread": "main" },  "kinds": ["series", "error"],  "card": "live",  "autoRun": true,  "inputs": [    {      "id": "values",      "type": "textarea",      "label": "Measurements",      "description": "Numbers separated by spaces, commas or newlines. Units are yours; the tool does not care.",      "dir": "ltr",      "rows": 4,      "maxLength": 20000,      "default": "2 3 3 4 4 4 5 5 5 5 6 6 6 7 7 8 9 11 14 18"    },    {      "id": "bins",      "type": "number",      "label": "Bins",      "description": "Equal-width buckets between the smallest and largest value. More bins show finer shape and more empty buckets.",      "unit": "bins",      "default": 8,      "min": 2,      "max": 30,      "step": 1    }  ],  "samples": [    {      "label": "Even spread",      "input": { "values": "1 2 2 3 3 3 4 4 5", "bins": 4 }    },    {      "label": "One spike",      "input": { "values": "1 1 1 1 1 1 1 1 1 20" }    },    {      "label": "All the same",      "input": { "values": "7 7 7 7 7" }    },    {      "label": "Not a number",      "input": { "values": "2 3 4 nope 6" }    }  ],  "help": "README.md",  "tags": ["statistics", "chart"]}

/** * A histogram of pasted numbers. * * The tool exists so the runtime's `bar` shape and a `series`-only result (no group around the chart) * have a real tool behind them. queue-explorer already draws two line series on two axes, so the * second axis here is not new; bars are, and so is a chart that is the whole output. A card of this * tool also marks no input `primary`, which is the documented fallback: the card shows the first * input and has to cope. * * Equal-width bins, counts on the left, running percent on the right. The reader picks the bin * count. Automatic width rules (Sturges, Freedman-Diaconis) are a different tool. * * ⚠️ This is the tool that carries `autoRun`, and it earned it by being boring. * * `autoRun` is for tools that are genuinely instant, and "instant" has to hold for the worst input the * manifest permits, not the default one. Here that is 20,000 characters of `values` against 30 bins: a * linear scan for numbers, one pass to bin them, and two small maps. Measured at that bound, 0.3 ms * warm and 1.4 ms cold. There is no input a reader can type that changes the shape of that work, which * is the property `autoRun` actually requires and the reason regex-explainer cannot have it. */import type { Chart, Output, Tool } from "@toolbench/sdk"; // A type alias, not an interface: an interface does not satisfy the SDK's index-signature constraint.type Input = { values: string; bins: number }; export type ParsedValues = { values: number[] } | { error: string; at: number; len: number }; /** * Parse a list of numbers. * * A comma sitting between two digits is refused. The tokenizer also splits on commas, so `1,204` * would otherwise become 1 and 204 and every figure on the chart would look reasonable and all of * them would be wrong. */export function parseValues(text: string): ParsedValues {  const grouped = /(\d),(\d)/.exec(text);  if (grouped && grouped.index !== undefined) {    return {      error: "A comma between digits is not a thousands separator. Separate numbers with spaces, or with a comma and a space.",      at: grouped.index + 1,      len: 1,    };  }   const values: number[] = [];  const token = /[^\s,;]+/g;  let match = token.exec(text);  while (match !== null) {    const value = Number(match[0]);    if (!Number.isFinite(value)) {      return { error: `"${match[0]}" is not a number.`, at: match.index, len: match[0].length };    }    values.push(value);    match = token.exec(text);  }  return { values };} /** Kill binary-float crumbs so a midpoint of 2.5 stays 2.5 in fixtures. */export function cleanNumber(value: number): number {  const rounded = Math.round(value * 1e10) / 1e10;  return Object.is(rounded, -0) ? 0 : rounded;} export function percent(part: number, whole: number): number {  return cleanNumber(Math.round((part / whole) * 1000) / 10);} export type Bins = { x: number[]; counts: number[]; cumulative: number[] }; /** * Equal-width bins over [min, max]. * * The last bin is closed on the right so `max` is not pushed into a bin that does not exist. When * every value is the same there is no width to split, so the result is one bar at that value. */export function binValues(values: number[], bins: number): Bins {  const n = values.length;  const min = Math.min(...values);  const max = Math.max(...values);   if (min === max) {    return { x: [cleanNumber(min)], counts: [n], cumulative: [100] };  }   const width = (max - min) / bins;  const counts = Array.from({ length: bins }, () => 0);  for (const value of values) {    const index = value === max ? bins - 1 : Math.min(bins - 1, Math.floor((value - min) / width));    counts[index] = (counts[index] as number) + 1;  }   const x = counts.map((_, i) => cleanNumber(min + (i + 0.5) * width));  const cumulative: number[] = [];  let running = 0;  for (const count of counts) {    running += count;    cumulative.push(percent(running, n));  }  return { x, counts, cumulative };} function chartOf(bins: Bins): Chart {  return {    xLabel: "Bin midpoint",    yLabel: "Count",    yLabelRight: "Cumulative",    x: bins.x,    series: [      { label: "Count", points: bins.counts, shape: "bar" },      { label: "Cumulative", points: bins.cumulative, unit: "%", shape: "line", axis: "right" },    ],  };} const tool: Tool<Input> = {  run({ values, bins }) {    const parsed = parseValues(values);    if ("error" in parsed) {      return { kind: "error", message: parsed.error, input: "values", at: parsed.at, len: parsed.len };    }    if (parsed.values.length === 0) {      return { kind: "error", message: "No numbers yet. Paste measurements separated by spaces, commas or newlines.", input: "values" };    }     return { kind: "series", chart: chartOf(binValues(parsed.values, bins)) };  },}; export default tool;

<tool-host tool="histogram" mode="embed"></tool-host>

{  "sdk": 3,  "id": "percentiles",  "name": "Percentiles",  "blurb": "Paste latencies; get p50 to p99.9, and see why the two common definitions disagree.",  "version": "1.3.0",  "capabilities": ["pure"],  "runtime": { "entry": "index.ts", "thread": "main" },  "card": "live",  "cardFields": 4,  "kinds": ["group", "fields", "table", "error"],  "help": "README.md",  "tags": ["statistics", "performance"],  "inputs": [    {      "id": "values",      "type": "textarea",      "label": "Measurements",      "description": "Numbers separated by spaces, commas, semicolons or newlines. A comma between digits is refused, because 1,204 could be one number or two: write 1204, or put a space after each comma. Units are yours; the tool does not care.",      "primary": true,      "rows": 4,      "dir": "ltr",      "maxLength": 200000,      "default": "12 14 15 15 16 18 19 21 24 28 31 35 42 51 68 91 140 220 480 1200"    },    {      "id": "method",      "type": "select",      "label": "Definition",      "description": "Nearest-rank picks a measurement you actually observed. Linear interpolates between two.",      "default": "nearest",      "options": [        { "value": "nearest", "label": "Nearest rank" },        { "value": "linear", "label": "Linear interpolation" }      ]    }  ],  "samples": [    {      "label": "Two clusters",      "input": { "values": "2 2 3 3 3 4 4 4 5 5 5 6 6 7 7 180 190 195 210 240 260 300 340 900" }    },    {      "label": "Definitions disagree",      "input": { "values": "3 4 4 5 6 7 9 14 40 260", "method": "linear" }    },    {      "label": "Definitions agree",      "input": { "values": "98 99 99 100 100 100 101 101 101 102 102 103", "method": "nearest" }    },    {      "label": "Not a number",      "input": { "values": "12, 14, 15, 18ms, 21, 24, 31, 44" }    }  ],  "links": [    { "label": "Why you cannot average percentiles", "href": "https://www.solarwinds.com/blog/why-percentiles-dont-work-the-way-you-think" }  ]}

/** * Percentiles, and the two definitions of them that disagree. * * The tool exists because of a specific, common mistake: **percentiles do not average.** A dashboard * showing "mean p99 across five hosts" is showing a number that corresponds to no event that ever * happened. This computes the true percentile of the pooled measurements, and shows the naive average * of the per-chunk percentiles beside it, so the size of the lie is visible rather than argued about. * * The second thing it shows is that "the p99" is not one number. Nearest-rank returns a value you * actually measured; linear interpolation returns a point between two measurements. On small or * skewed samples they differ by a lot, and neither is wrong — but a comparison between two systems * using different definitions is meaningless. * * Deliberately pure: no clock, no randomness, no I/O. Which is why every number below is covered by a * fixture with a hand-checked expectation. */import type { Field, Output, Tool } from "@toolbench/sdk"; type Method = "nearest" | "linear"; const PERCENTILES = [50, 90, 95, 99, 99.9] as const; /** A type alias, not an interface: see the note on `Tool` in the SDK. */type Input = {  values: string;  method: string;}; /** * Nearest-rank: the smallest measurement at or above the p-th position. Always a real observation. * Linear: interpolates between the two measurements either side of the position — the definition * numpy and R's type 7 use by default. */export function percentile(sorted: number[], p: number, method: Method): number {  if (sorted.length === 0) return Number.NaN;  if (sorted.length === 1) return sorted[0] as number;  if (method === "nearest") {    const rank = Math.ceil((p / 100) * sorted.length);    const index = Math.min(sorted.length - 1, Math.max(0, rank - 1));    return sorted[index] as number;  }  const h = ((sorted.length - 1) * p) / 100;  const lo = Math.floor(h);  const hi = Math.min(sorted.length - 1, lo + 1);  const weight = h - lo;  return (sorted[lo] as number) * (1 - weight) + (sorted[hi] as number) * weight;} /** * A comma sitting between two digits is a thousands grouping, not a list separator. The tokenizer * splits on commas, so without this check a pasted `1,204 980 1,100 1,340` becomes seven * measurements, min 1 and mean 232.4, and nothing says the input was misread. */function groupingComma(text: string): { error: string; at: number } | null {  const hit = /[^\s;]*\d,\d[^\s;]*/.exec(text);  if (hit === null) return null;  /*   * Says what was found and how to say it instead. "is not a number" was both untrue, since 1,204 is a   * number to every reader, and self-contradicting, since the shared advice told them to separate with   * commas while a comma was the thing being refused.   */  return {    error: `"${hit[0]}" has a comma between digits, which could be a thousands grouping. Write digits only, or put a space after each comma`,    at: hit.index,  };} /** Parses forgivingly, but reports the exact character where it gave up. */function parse(text: string): { values: number[] } | { error: string; at: number } {  /*   * Before the token scan, so the whole text is judged as text. The cost is precedence: an input holding   * both a grouped number and an earlier unparseable token reports the grouping, not the earlier token.   * Both are refusals and the reader fixes both, so the offset being the second problem is the lesser   * evil against scanning twice.   */  const grouped = groupingComma(text);  if (grouped !== null) return grouped;  const values: number[] = [];  const token = /[^\s,;]+/g;  let match: RegExpExecArray | null = token.exec(text);  while (match !== null) {    const value = Number(match[0]);    if (!Number.isFinite(value)) {      return { error: `"${match[0]}" is not a number. Separate measurements with spaces, commas or newlines`, at: match.index };    }    values.push(value);    match = token.exec(text);  }  return { values };} function round(value: number): string {  if (!Number.isFinite(value)) return "n/a";  if (Number.isInteger(value)) return String(value);  return value.toFixed(Math.abs(value) < 10 ? 2 : 1);} const tool: Tool<Input> = {  run({ values, method }) {    const parsed = parse(values);    if ("error" in parsed) {      return { kind: "error", message: `${parsed.error}.`, input: "values", at: parsed.at, len: 1 };    }    if (parsed.values.length === 0) {      return { kind: "error", message: "No measurements yet. Paste some numbers.", input: "values" };    }     const chosen: Method = method === "linear" ? "linear" : "nearest";    const sorted = [...parsed.values].sort((a, b) => a - b);    const n = sorted.length;    const sum = sorted.reduce((a, b) => a + b, 0);     const summary: Field[] = [      { label: "count", value: String(n) },      { label: "p50", value: round(percentile(sorted, 50, chosen)) },      { label: "p99", value: round(percentile(sorted, 99, chosen)) },      { label: "max", value: round(sorted[n - 1] as number) },      { label: "mean", value: round(sum / n), note: "shown for contrast: it is not a percentile" },      { label: "min", value: round(sorted[0] as number) },    ];     /*     * The comparison that makes the point. Split the measurements into four equal chunks — the way     * a real system splits across hosts or minutes — take each chunk's p99, and average those.     * That average is what most dashboards report. The true p99 of everything pooled is beside it.     */    const chunks = splitInto(sorted, 4);    const perChunk = chunks.map((chunk) => percentile([...chunk].sort((a, b) => a - b), 99, chosen));    const naive = perChunk.reduce((a, b) => a + b, 0) / perChunk.length;    const truth = percentile(sorted, 99, chosen);    const drift = truth === 0 ? 0 : ((naive - truth) / truth) * 100;     const rows = PERCENTILES.map((p) => {      const nearest = percentile(sorted, p, "nearest");      const linear = percentile(sorted, p, "linear");      const gap = nearest === 0 ? 0 : ((linear - nearest) / nearest) * 100;      return [        { text: `p${p}`, mono: true },        { text: round(nearest), mono: true },        { text: round(linear), mono: true },        { text: `${gap >= 0 ? "+" : ""}${gap.toFixed(1)}%`, mono: true, tone: Math.abs(gap) > 5 ? ("warn" as const) : ("normal" as const) },      ];    });     return {      kind: "group",      parts: [        { kind: "fields", fields: summary },        {          kind: "table",          caption: "The same data under both definitions. A comparison across systems using different ones means nothing.",          columns: [            { label: "", mono: true },            { label: "Nearest rank", align: "end", mono: true },            { label: "Linear", align: "end", mono: true },            { label: "Difference", align: "end", mono: true },          ],          rows,        },        {          kind: "fields",          fields: [            { label: "true p99", value: round(truth), group: "Averaging percentiles", note: "of all measurements pooled" },            { label: "averaged p99", value: round(naive), group: "Averaging percentiles", note: "mean of four chunks' p99, which is what a dashboard usually shows" },            {              label: "error",              value: `${drift >= 0 ? "+" : ""}${drift.toFixed(1)}%`,              group: "Averaging percentiles",              tone: Math.abs(drift) > 10 ? "bad" : Math.abs(drift) > 2 ? "warn" : "good",              note: "how wrong the averaged figure is",            },          ],        },      ],    } satisfies Output;  },}; function splitInto<T>(items: T[], count: number): T[][] {  const size = Math.ceil(items.length / count);  const chunks: T[][] = [];  for (let i = 0; i < items.length; i += size) chunks.push(items.slice(i, i + size));  return chunks;} export default tool;

<tool-host tool="percentiles" mode="embed"></tool-host>

{  "sdk": 1,  "id": "queue-explorer",  "name": "Queue explorer",  "blurb": "Move the arrival rate and watch latency go vertical before capacity runs out, with a simulation checking the formula.",  "version": "1.1.0",  "capabilities": ["pure"],  "runtime": { "entry": "index.ts", "thread": "worker" },  "timeoutMs": 8000,  "card": "live",  "cardFields": 3,  "kinds": ["group", "series", "fields", "error"],  "help": "README.md",  "tags": ["queueing", "capacity", "simulation"],  "inputs": [    {      "id": "arrivals",      "type": "number",      "label": "Arrival rate",      "unit": "req/s",      "description": "How much work shows up per second.",      "primary": true,      "default": 800,      "min": 1,      "max": 5000,      "step": 10    },    {      "id": "service",      "primary": true,      "type": "number",      "label": "Service time",      "unit": "ms",      "description": "How long one request takes when nothing is queued. Capacity is 1000 ÷ this.",      "default": 1,      "min": 0.1,      "max": 100,      "step": 0.1    },    {      "id": "samples",      "type": "number",      "label": "Simulation samples",      "unit": "arrivals",      "description": "More samples narrow the gap between the simulation and the formula. This is the input that makes the tool slow, which is why it runs in a worker.",      "default": 200000,      "min": 1000,      "max": 5000000,      "step": 1000    },    {      "id": "seed",      "type": "number",      "label": "Random seed",      "description": "Fixed, so the same inputs always give the same simulation. A tool nobody can reproduce is a tool nobody can test.",      "default": 42,      "min": 1,      "max": 999999,      "step": 1    }  ],  "links": [    { "label": "Little's law", "href": "https://en.wikipedia.org/wiki/Little%27s_law" },    { "label": "M/M/1 queue", "href": "https://en.wikipedia.org/wiki/M/M/1_queue" }  ]}

/** * Queue explorer: why latency goes vertical before a system runs out of capacity. * * The intuition this exists to fix is expensive to lack. At 80% utilisation an M/M/1 queue holds four * jobs; at 95% it holds nineteen. Nobody plans for that curve by reasoning about it, so the tool draws * it, marks where you are on it, and shows the same numbers two independent ways. * * Two things make the code worth reading, and both are the reason this tool is in the example set: * *  1. **It proves its own arithmetic.** The closed-form M/M/1 result and a discrete-event Monte Carlo *     simulation are computed side by side. If they disagree beyond sampling error, one of them is *     wrong — and the tool says so rather than quietly presenting the formula as truth. *  2. **The randomness is seeded**, so a simulation is a *pure function* of its inputs. That is what *     lets a fixture assert a simulated mean, and it is the difference between a demo and something *     you can regression-test. * * It declares `thread: "worker"` because its running time is set by an input: at five million samples * it would drop frames on the main thread, and only a worker can be stopped. */import type { Chart, Field, Output, Tool } from "@toolbench/sdk"; type Input = {  arrivals: number;  service: number;  samples: number;  seed: number;}; /** * mulberry32 — small, fast, and good enough for queueing samples. * * Chosen over `Math.random()` for one reason: reproducibility. A tool whose output changes between * runs cannot have fixtures, and a simulation nobody can pin is a simulation nobody can trust. */function rng(seed: number): () => number {  let a = seed >>> 0;  return () => {    a = (a + 0x6d2b79f5) >>> 0;    let t = a;    t = Math.imul(t ^ (t >>> 15), t | 1);    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;  };} /** Inverse-transform sampling of an exponential. `1 - u` keeps it defined when u is 0. */const expo = (random: () => number, rate: number) => -Math.log(1 - random()) / rate; export interface Analytic {  rho: number;  /** Mean time in system, ms. */  w: number;  /** Mean time waiting, ms. */  wq: number;  /** Mean number in system. */  l: number;  /** Mean number waiting. */  lq: number;} /** Closed-form M/M/1. λ and μ are per second; the times come back in milliseconds. */export function analytic(lambda: number, mu: number): Analytic {  const rho = lambda / mu;  const w = 1 / (mu - lambda);  return {    rho,    w: w * 1000,    wq: (rho / (mu - lambda)) * 1000,    l: rho / (1 - rho),    lq: (rho * rho) / (1 - rho),  };} /** * Lindley's recursion: the waiting time of the next arrival is the previous one's wait, plus its * service, minus the gap since it arrived — floored at zero, because you cannot wait negative time. * * That single line is the whole simulation, which is part of why it is a good thing to publish. */export function simulate(  lambda: number,  mu: number,  samples: number,  seed: number,  onProgress?: (done: number, meanSoFar: number) => void,): number {  const random = rng(seed);  let wait = 0;  let total = 0;  const step = Math.max(1, Math.floor(samples / 20));  for (let i = 0; i < samples; i++) {    const service = expo(random, mu);    const gap = expo(random, lambda);    total += wait + service;    wait = Math.max(0, wait + service - gap);    if (onProgress && (i + 1) % step === 0) onProgress(i + 1, (total / (i + 1)) * 1000);  }  return (total / samples) * 1000;} const fmt = (value: number, digits = 2) =>  Number.isFinite(value) ? value.toFixed(digits) : "n/a"; function curve(mu: number, current: number): Chart {  /*   * The x axis is utilisation rather than arrival rate, because the shape is the point and it is the   * same shape for every system. Stopping at 0.98 is deliberate: the formula diverges at 1, and a   * chart whose last point is infinity tells you nothing about the interesting part.   */  const xs: number[] = [];  for (let rho = 0.05; rho <= 0.981; rho += 0.05) xs.push(Math.round(rho * 100) / 100);  const latency = xs.map((rho) => (1 / (mu - rho * mu)) * 1000);  const inSystem = xs.map((rho) => rho / (1 - rho));  return {    xLabel: "Utilisation",    yLabel: "Time in system",    yUnit: "ms",    xUnit: "ρ",    x: xs,    series: [      { label: "Time in system", points: latency, unit: "ms", shape: "line" },      { label: "Jobs in system", points: inSystem, unit: "jobs", shape: "line", axis: "right" },    ],    annotations: [{ x: Math.round(current * 100) / 100, label: `you are here (ρ ${fmt(current, 2)})` }],    yLabelRight: "Jobs in system",  };} const tool: Tool<Input> = {  async run({ arrivals, service, samples, seed }, ctx) {    const lambda = arrivals;    const mu = 1000 / service;     if (lambda >= mu) {      /*       * Not a crash, and not a number: at ρ ≥ 1 the queue never drains, so every "mean" is       * infinite. Saying that plainly, against the input that caused it, is the correct answer.       */      return {        kind: "error",        message:          `At ${arrivals} arrivals/s and ${service} ms of service, one server can handle ${fmt(mu, 0)}/s. ` +          "The queue never drains, so there is no steady state to report. Lower the arrival rate or speed up service.",        input: "arrivals",      };    }     const a = analytic(lambda, mu);     // Partial results, so a long run shows itself converging instead of hiding behind a bar.    // #region ctx    const simulated = simulate(lambda, mu, samples, seed, (done, meanSoFar) => {      if (ctx.signal.aborted) return;      ctx.progress(done / samples, {        kind: "fields",        fields: [          { label: "samples so far", value: done.toLocaleString() },          { label: "simulated mean", value: `${fmt(meanSoFar)} ms` },          { label: "formula says", value: `${fmt(a.w)} ms` },        ],      });    });    // #endregion     const error = a.w === 0 ? 0 : ((simulated - a.w) / a.w) * 100;    const agrees = Math.abs(error) < 5;     const fields: Field[] = [      { label: "utilisation", value: fmt(a.rho, 3), note: "ρ = arrivals ÷ capacity" },      { label: "time in system", value: `${fmt(a.w)} ms`, group: "Formula" },      { label: "time waiting", value: `${fmt(a.wq)} ms`, group: "Formula" },      { label: "jobs in system", value: fmt(a.l), group: "Formula" },      { label: "jobs waiting", value: fmt(a.lq), group: "Formula" },      { label: "time in system", value: `${fmt(simulated)} ms`, group: "Simulation", note: `${samples.toLocaleString()} samples, seed ${seed}` },      {        label: "difference",        value: `${error >= 0 ? "+" : ""}${fmt(error, 1)}%`,        group: "Simulation",        tone: agrees ? "good" : "warn",        note: agrees ? "the two methods agree" : "more samples would narrow this",      },    ];     return {      kind: "group",      parts: [        { kind: "series", chart: curve(mu, a.rho) },        { kind: "fields", fields },      ],    } satisfies Output;  },}; export default tool;

<tool-host tool="queue-explorer" mode="embed"></tool-host>

{  "sdk": 3,  "id": "regex-explainer",  "name": "Regex explainer",  "blurb": "Walks a JavaScript regular expression, shows what each piece means, and tests it against a subject.",  "version": "1.0.0",  "capabilities": ["pure"],  "runtime": { "entry": "index.ts", "thread": "worker" },  "kinds": ["group", "text", "code", "error"],  "card": "live",  "timeoutMs": 2000,  "inputs": [    {      "id": "pattern",      "type": "text",      "label": "Pattern",      "description": "A JavaScript regular expression, without the surrounding slashes.",      "primary": true,      "dir": "ltr",      "maxLength": 80,      "default": "(\\w+)\\s+(\\d+)"    },    {      "id": "subject",      "type": "textarea",      "label": "Subject",      "description": "The string to test the pattern against.",      "dir": "ltr",      "rows": 3,      "maxLength": 200,      "default": "user 42 ready"    },    {      "id": "flags",      "type": "select",      "label": "Flags",      "description": "JavaScript flags only. g returns every match; without it, only the first.",      "default": "none",      "options": [        { "value": "none", "label": "None" },        { "value": "i", "label": "Ignore case (i)" },        { "value": "m", "label": "Multiline (m)" },        { "value": "g", "label": "All matches (g)" },        { "value": "gi", "label": "All, ignore case (gi)" },        { "value": "s", "label": "Dotall (s)" }      ]    }  ],  "samples": [    {      "label": "Word and number",      "input": { "pattern": "(\\w+)\\s+(\\d+)", "subject": "user 42 ready", "flags": "none" }    },    {      "label": "Ignore case",      "input": { "pattern": "hello", "subject": "Hello there", "flags": "i" }    },    {      "label": "All matches",      "input": { "pattern": "\\d+", "subject": "a1 b22 c333", "flags": "g" }    },    {      "label": "Unclosed group",      "input": { "pattern": "(\\w+" }    }  ],  "help": "README.md",  "tags": ["regex", "text", "code"],  "links": [    { "label": "MDN: Regular expressions", "href": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions" }  ]}

/** * A JavaScript regular-expression explainer. * * The tool exists so the runtime's `text` renderer has a real tool behind it, and so `code` has one * outside the bench's own fixtures. It is a real explainer rather than a stub because a renderer * nobody has looked at is a renderer nobody has tested. * * ⚠️ Worker mode, with a timeout, and no `autoRun`. All three are the same decision. * * This tool compiles a pattern the reader typed and runs it against a subject the reader typed, which * makes it the one tool here that cannot bound its own running time. The refusal in `applyQuantifier` * catches the textbook `(a+)+` shape, and it is worth keeping because the message teaches something. * But it is a denylist, and the shapes it does not name are not rare: `(a|aa)+


  
  
  
  
  


  


Skip to content

  

    Toolbench
    
    

      GitHub
      
    
  


  

    
Gallery
    
Every feature of the runtime, live, beside the code that produces it.
  
  

    
    

       nests no repeat at * all, passes the check, and against 45 characters of `a` followed by a `b` it takes **28 seconds**. * Measured, not estimated. At 41 characters it is 4.2 s and at 37 it is 0.6 s, so a reader typing one * character at a time walks up that curve. * * Those figures are V8's. Measured across the browser suite: Chromium and Firefox both grind and reach * the timeout, while WebKit returns almost at once, because JavaScriptCore abandons a runaway backtrack * rather than running it out. Two engines in three will hang, so the rescue is not something to build * on, and an engine that happens to save you is not a bound. * * On the main thread there is nothing to terminate: `ctx.signal` only works for a tool that checks it, * and no tool can check anything while the regex engine is inside a match. See the table in * `runner.ts`, which is why the manifest rejects `timeoutMs` outside worker mode. So the engine gets a * thread of its own and 2 s to finish, and a pathological pattern becomes a timeout the reader can * read rather than a tab they have to close. Dropping `autoRun` is the other half: a tool that can * take 2 s must not start on a keystroke. * * ⚠️ `timeoutMs` is a top-level manifest key, NOT part of `runtime`, even though `thread` is and the * two only make sense together. Writing it inside `runtime` cost a CI round: nothing rejected it, * because validation looks for it at the top level and found nothing there, so the tool ran on the * 5,000 ms default and the browser test failed on a message naming the wrong number. A key in the * wrong object is silently ignored, which is the one way a manifest can lie. */import type { Output, Tool } from "@toolbench/sdk"; // A type alias, not an interface: an interface does not satisfy the SDK's index-signature constraint.type Input = { pattern: string; subject: string; flags: string }; export type WalkToken = { source: string; meaning: string; unbounded: boolean }; const SPECIAL_ESCAPE: Record<string, string> = {  d: "a digit",  D: "not a digit",  w: "a word character",  W: "not a word character",  s: "a whitespace character",  S: "not a whitespace character",  n: "a newline",  t: "a tab",  r: "a carriage return",  f: "a form feed",  v: "a vertical tab",  b: "a word boundary",  B: "not a word boundary",}; const FLAG_VALUES = new Set(["none", "i", "m", "g", "gi", "s"]); type GroupKind = "capture" | "noncapture" | "lookahead" | "negLookahead" | "lookbehind" | "negLookbehind" | "named"; type GroupFrame = { kind: GroupKind; n?: number; name?: string; start: number }; class WalkError extends Error {  constructor(message: string) {    super(message);    this.name = "WalkError";  }} /** True when a quantifier can match arbitrarily many times. `{2,5}` is not; `+`, `*` and `{2,}` are. */function isUnbounded(kind: "optional" | "star" | "plus" | "exact" | "min" | "range"): boolean {  return kind === "star" || kind === "plus" || kind === "min";} function quantifierPhrase(  kind: "optional" | "star" | "plus" | "exact" | "min" | "range",  n?: number,  m?: number,  lazy?: boolean,): string {  let phrase = "";  if (kind === "optional") phrase = ", optional";  else if (kind === "star") phrase = ", any number";  else if (kind === "plus") phrase = ", one or more";  else if (kind === "exact") phrase = `, exactly ${n}`;  else if (kind === "min") phrase = `, ${n} or more`;  else phrase = `, ${n} to ${m}`;  if (lazy) phrase += ", as few as possible";  return phrase;} function readQuantifier(pattern: string, from: number): { raw: string; kind: "optional" | "star" | "plus" | "exact" | "min" | "range"; n?: number; m?: number; lazy: boolean; next: number } | undefined {  const ch = pattern[from];  if (ch === "?" || ch === "*" || ch === "+") {    const kind = ch === "?" ? "optional" : ch === "*" ? "star" : "plus";    const lazy = pattern[from + 1] === "?";    return { raw: pattern.slice(from, from + (lazy ? 2 : 1)), kind, lazy, next: from + (lazy ? 2 : 1) };  }  if (ch !== "{") return undefined;  const match = /^\{(\d+)(?:,(\d*))?\}(\?)?/.exec(pattern.slice(from));  if (!match) return undefined;  const n = Number(match[1]);  const lazy = match[3] === "?";  if (match[0].includes(",") && match[2] === "") {    return { raw: match[0], kind: "min", n, lazy, next: from + match[0].length };  }  if (match[0].includes(",")) {    const m = Number(match[2]);    if (n > m) return undefined;    return { raw: match[0], kind: "range", n, m, lazy, next: from + match[0].length };  }  return { raw: match[0], kind: "exact", n, lazy, next: from + match[0].length };} function hexChar(pattern: string, from: number, width: number): { char: string; raw: string; next: number } | undefined {  const digits = pattern.slice(from, from + width);  if (digits.length < width || !/^[0-9A-Fa-f]+$/.test(digits)) return undefined;  return { char: String.fromCharCode(Number.parseInt(digits, 16)), raw: digits, next: from + width };} function closeMeaning(frame: GroupFrame): string {  if (frame.kind === "capture") return `end capture ${frame.n}`;  if (frame.kind === "named") return `end named capture "${frame.name}"`;  if (frame.kind === "lookahead") return "end positive lookahead";  if (frame.kind === "negLookahead") return "end negative lookahead";  if (frame.kind === "lookbehind") return "end positive lookbehind";  if (frame.kind === "negLookbehind") return "end negative lookbehind";  return "end group";} /** * Walk a pattern the JavaScript engine has already accepted. * * The meanings are the contract the fixtures pin. Changing a phrase is a fixture change, so the * wording is kept plain and stable: atom, then a comma, then the repeat. */export function walkPattern(pattern: string, flags: string): WalkToken[] {  const tokens: WalkToken[] = [];  const stack: GroupFrame[] = [];  let capture = 1;  let i = 0;  const multiline = flags.includes("m");  const dotall = flags.includes("s");   const push = (source: string, meaning: string, unbounded = false) => {    tokens.push({ source, meaning, unbounded });  };   const applyQuantifier = (source: string, meaning: string, atomUnbounded: boolean, groupInner?: WalkToken[]) => {    const q = readQuantifier(pattern, i);    if (!q) {      push(source, meaning, atomUnbounded);      return;    }    /*     * A denylist of one shape, kept for the explanation rather than for safety: `(a+)+` is what a     * reader is most likely to write by accident, and being told why beats being told it timed out.     *     * ⚠️ It is not the protection. `(a|aa)+


  
  
  
  
  


  


Skip to content

  

    Toolbench
    
    

      GitHub
      
    
  


  

    
Gallery
    
Every feature of the runtime, live, beside the code that produces it.
  
  

    
    

       nests no repeat, passes this check, and still runs for     * 28 s on 45 characters. The timeout in the manifest is the protection; see the file header.     */    if (groupInner && isUnbounded(q.kind) && groupInner.some((token) => token.unbounded)) {      throw new WalkError(        "This pattern nests a repeat inside another repeat, for example (a+)+. That can run for a very long time. Rewrite it without the outer repeat.",      );    }    i = q.next;    push(source + q.raw, meaning + quantifierPhrase(q.kind, q.n, q.m, q.lazy), atomUnbounded || isUnbounded(q.kind));  };   while (i < pattern.length) {    const ch = pattern[i] as string;     if (ch === "(") {      let kind: GroupKind = "capture";      let raw = "(";      let name: string | undefined;      let n: number | undefined;      i += 1;      if (pattern.startsWith("?:", i)) {        kind = "noncapture";        raw = "(?:";        i += 2;      } else if (pattern.startsWith("?=", i)) {        kind = "lookahead";        raw = "(?=";        i += 2;      } else if (pattern.startsWith("?!", i)) {        kind = "negLookahead";        raw = "(?!";        i += 2;      } else if (pattern.startsWith("?<=", i)) {        kind = "lookbehind";        raw = "(?<=";        i += 3;      } else if (pattern.startsWith("?<!", i)) {        kind = "negLookbehind";        raw = "(?<!";        i += 3;      } else if (pattern.startsWith("?<", i)) {        const named = /^<([^>]+)>/.exec(pattern.slice(i + 1));        if (named) {          kind = "named";          name = named[1];          raw = `(?<${name}>`;          i += 1 + named[0].length;          n = capture++;        }      }      if (kind === "capture") n = capture++;      const meaning =        kind === "capture"          ? `start capture ${n}`          : kind === "named"            ? `start named capture "${name}"`            : kind === "noncapture"              ? "start non-capturing group"              : kind === "lookahead"                ? "start positive lookahead"                : kind === "negLookahead"                  ? "start negative lookahead"                  : kind === "lookbehind"                    ? "start positive lookbehind"                    : "start negative lookbehind";      push(raw, meaning, false);      stack.push({        kind,        start: tokens.length,        ...(n !== undefined ? { n } : {}),        ...(name !== undefined ? { name } : {}),      });      continue;    }     if (ch === ")") {      i += 1;      const frame = stack.pop();      if (!frame) {        applyQuantifier(")", "a closing parenthesis", false);        continue;      }      const inner = tokens.slice(frame.start);      applyQuantifier(")", closeMeaning(frame), false, inner);      continue;    }     if (ch === "|") {      i += 1;      push("|", "or", false);      continue;    }     if (ch === "^") {      i += 1;      applyQuantifier("^", multiline ? "start of a line" : "start of the string", false);      continue;    }     if (ch === "quot;) {      i += 1;      applyQuantifier("quot;, multiline ? "end of a line" : "end of the string", false);      continue;    }     if (ch === ".") {      i += 1;      applyQuantifier(".", dotall ? "any character" : "any character except newline", false);      continue;    }     if (ch === "[") {      let j = i + 1;      const negated = pattern[j] === "^";      if (negated) j += 1;      while (j < pattern.length) {        if (pattern[j] === "\\" && j + 1 < pattern.length) {          j += 2;          continue;        }        if (pattern[j] === "]") break;        j += 1;      }      const end = pattern[j] === "]" ? j + 1 : pattern.length;      const raw = pattern.slice(i, end);      const body = pattern.slice(i + 1 + (negated ? 1 : 0), end - (pattern[j] === "]" ? 1 : 0));      i = end;      applyQuantifier(raw, negated ? `a character not in ${body}` : `a character in ${body}`, false);      continue;    }     if (ch === "\\") {      const next = pattern[i + 1];      if (next === undefined) {        i += 1;        applyQuantifier("\\", "a backslash", false);        continue;      }      if (next === "x") {        const hex = hexChar(pattern, i + 2, 2);        if (hex) {          i = hex.next;          applyQuantifier(`\\x${hex.raw}`, `the character ${hex.char}`, false);          continue;        }      }      if (next === "u") {        const hex = hexChar(pattern, i + 2, 4);        if (hex) {          i = hex.next;          applyQuantifier(`\\u${hex.raw}`, `the character ${hex.char}`, false);          continue;        }      }      if (next === "k" && pattern[i + 2] === "<") {        const named = /^<([^>]+)>/.exec(pattern.slice(i + 2));        if (named) {          i += 2 + named[0].length;          applyQuantifier(`\\k${named[0]}`, `a backreference to "${named[1]}"`, false);          continue;        }      }      if (/[1-9]/.test(next)) {        i += 2;        applyQuantifier(`\\${next}`, `a backreference to capture ${next}`, false);        continue;      }      const meaning = SPECIAL_ESCAPE[next] ?? `the character ${next}`;      i += 2;      applyQuantifier(`\\${next}`, meaning, false);      continue;    }     // Consecutive unquantified literals become one token so "hello" is one line, not five.    let raw = ch;    let text = ch;    i += 1;    while (i < pattern.length) {      const peek = pattern[i] as string;      if (peek === "\\" || peek === "(" || peek === ")" || peek === "|" || peek === "^" || peek === "quot; || peek === "." || peek === "[" || peek === "]" || peek === "?" || peek === "*" || peek === "+" || peek === "{") {        break;      }      if (readQuantifier(pattern, i + 1)) break;      raw += peek;      text += peek;      i += 1;    }    const noun = text.length === 1 ? `the character ${text}` : `the characters ${text}`;    applyQuantifier(raw, noun, false);  }   return tokens;} export function formatWalk(tokens: WalkToken[]): string {  const width = tokens.reduce((max, token) => Math.max(max, token.source.length), 0);  return tokens.map((token) => `${token.source.padEnd(width)}  ${token.meaning}`).join("\n");} export function formatRanges(matches: { text: string; index: number }[]): string {  if (matches.length === 0) return "Did not match.";   const bits = matches.map((match) => {    if (match.text.length === 0) return `empty at ${match.index}`;    return `${match.index}-${match.index + match.text.length - 1}`;  });   const list =    bits.length === 1 ? bits[0] : bits.length === 2 ? `${bits[0]} and ${bits[1]}` : `${bits.slice(0, -1).join(", ")}, and ${bits[bits.length - 1]}`;   const emptyOnly = matches.length === 1 && matches[0]!.text.length === 0;  if (emptyOnly) return `Matched once, an empty match at ${matches[0]!.index}.`;  if (matches.length === 1) return `Matched once, at ${list}.`;  return `Matched ${matches.length} times, at ${list}.`;} function caretLine(subject: string, matches: { text: string; index: number }[]): string | undefined {  if (!matches.some((match) => match.text.length > 0)) return undefined;  const marks = Array.from(subject, () => " ");  for (const match of matches) {    for (let i = 0; i < match.text.length; i++) {      const at = match.index + i;      if (at >= 0 && at < marks.length) marks[at] = "^";    }  }  // Trailing spaces would make the line as wide as the subject, but they are invisible in  // the renderer and a nuisance in fixtures. The carets that remain still sit under the match.  return marks.join("").replace(/ +$/, "");} export function collectMatches(  pattern: string,  flags: string,  subject: string,): { text: string; index: number; groups: (string | null)[] }[] {  const re = new RegExp(pattern, flags);  if (flags.includes("g")) {    return [...subject.matchAll(re)].map((match) => ({      text: match[0],      index: match.index ?? 0,      groups: Array.from(match).slice(1).map((group) => group ?? null),    }));  }  const match = re.exec(subject);  if (!match) return [];  return [    {      text: match[0],      index: match.index,      groups: Array.from(match).slice(1).map((group) => group ?? null),    },  ];} function matchRecord(matches: { text: string; index: number; groups: (string | null)[] }[]): string {  return JSON.stringify(    {      matchCount: matches.length,      matches: matches.map((match) => ({        text: match.text,        index: match.index,        groups: match.groups,      })),    },    null,    2,  );} const tool: Tool<Input> = {  run({ pattern, subject, flags }) {    if (pattern.length === 0) {      return { kind: "error", message: "Nothing to explain. Type a pattern.", input: "pattern" };    }    if (!FLAG_VALUES.has(flags)) {      return { kind: "error", message: `"${flags}" is not a flag combination this tool offers.`, input: "flags" };    }    // A select option cannot be an empty string, so "none" is the control's stand-in for no flags.    const engineFlags = flags === "none" ? "" : flags;     try {      new RegExp(pattern, engineFlags);    } catch (error) {      const detail = error instanceof Error ? error.message : String(error);      return { kind: "error", message: detail, input: "pattern" };    }     let tokens: WalkToken[];    try {      tokens = walkPattern(pattern, engineFlags);    } catch (error) {      if (error instanceof WalkError) {        return { kind: "error", message: error.message, input: "pattern" };      }      throw error;    }     const matches = collectMatches(pattern, engineFlags, subject);    const prose = formatRanges(matches);    const headline = engineFlags.length > 0 ? `${prose} Flags: ${engineFlags}.` : prose;    const walk = formatWalk(tokens);    const caret = caretLine(subject, matches);    const mono = caret === undefined ? `${walk}\n\n${subject}` : `${walk}\n\n${subject}\n${caret}`;     return {      kind: "group",      parts: [        { kind: "text", text: headline },        { kind: "text", text: mono, mono: true },        { kind: "code", lang: "json", source: matchRecord(matches) },      ],    } satisfies Output;  },}; export default tool;

<tool-host tool="regex-explainer" mode="embed"></tool-host>

{  "sdk": 2,  "id": "utf8-bytes",  "name": "UTF-8 bytes",  "blurb": "Shows the bytes behind a string, and marks every character that needs more than one of them.",  "version": "1.0.0",  "capabilities": ["pure"],  "runtime": { "entry": "index.ts", "thread": "main" },  "kinds": ["group", "fields", "bytes", "error"],  "card": "live",  "cardFields": 3,  "inputs": [    {      "id": "text",      "type": "textarea",      "label": "Text",      "description": "Any string. Emoji and combining marks are the interesting cases.",      "primary": true,      "rows": 2,      "maxLength": 512,      "default": "Héllo, 世界 👋"    }  ],  "help": "README.md",  "tags": ["encoding", "unicode", "bytes"],  "links": [    { "label": "UTF-8 (RFC 3629)", "href": "https://www.rfc-editor.org/rfc/rfc3629" }  ]}

/** * UTF-8 bytes, with the multi-byte characters marked. * * This tool exists to exercise the `bytes` output kind added in contract version 2, and it is a real * tool rather than a stub because a renderer nobody has looked at is a renderer nobody has tested. * It covers the cases that make `bytes` worth having: highlight ranges that start mid-row, a range * longer than one byte, and labels that carry meaning colour cannot. */import type { ByteRange, Output, Tool } from "@toolbench/sdk"; // A type alias, not an interface: an interface does not satisfy the SDK's index-signature constraint.type Input = { text: string }; /** Every code point, with its UTF-8 length. Iterating a string yields code points, not UTF-16 units. */function encode(text: string): { bytes: number[]; ranges: ByteRange[]; codePoints: number } {  const encoder = new TextEncoder();  const bytes: number[] = [];  const ranges: ByteRange[] = [];  let codePoints = 0;   for (const char of text) {    const encoded = [...encoder.encode(char)];    codePoints++;    /*     * Only multi-byte characters get a range. Marking every character would highlight the whole     * dump, which says nothing: the point of a highlight is that it is the exception.     */    if (encoded.length > 1) {      const point = char.codePointAt(0) ?? 0;      /*       * No tone. A four-byte character is information, not a severity, and `--tb-warn` is the same       * colour as `--tb-accent` in the default palette anyway, so the distinction would have been       * invisible while implying one existed. The label already says how many bytes it is.       */      ranges.push({        at: bytes.length,        len: encoded.length,        label: `U+${point.toString(16).toUpperCase().padStart(4, "0")} ${char}`,      });    }    bytes.push(...encoded);  }  return { bytes, ranges, codePoints };} export default {  run({ text }): Output {    if (text.length === 0) {      return { kind: "error", message: "Nothing to encode. Type some text.", input: "text" };    }     const { bytes, ranges, codePoints } = encode(text);    const ascii = bytes.length === codePoints;     return {      kind: "group",      parts: [        {          kind: "fields",          fields: [            { label: "Bytes", value: String(bytes.length) },            { label: "Characters", value: String(codePoints), note: "code points, not UTF-16 units" },            {              label: "Encoding",              value: ascii ? "pure ASCII" : `${ranges.length} multi-byte`,              // Only a real tone. "normal" is the default, so emitting it is noise that every              // fixture then has to repeat.              ...(ascii ? { tone: "good" as const } : {}),            },            {              label: "Overhead",              value: `${bytes.length - codePoints} byte${bytes.length - codePoints === 1 ? "" : "s"}`,              note: "what UTF-8 costs over one byte per character",            },          ],        },        {          kind: "bytes",          bytes,          caption: ascii ? "Every character is one byte" : "Highlighted runs are one character each",          ...(ranges.length > 0 ? { highlight: ranges } : {}),        },      ],    };  },} satisfies Tool<Input>;

<tool-host tool="utf8-bytes" mode="embed"></tool-host>

{  "sdk": 9,  "id": "rate-limits",  "name": "Which rate limit applies",  "blurb": "Matches each request against an ordered list of path limits, the first match winning, for the methods you choose.",  "version": "1.0.0",  "capabilities": ["pure"],  "runtime": { "entry": "index.ts", "thread": "main" },  "kinds": ["table", "error"],  "inputs": [    {      "id": "limits",      "type": "rows",      "label": "Limits",      "description": "A path prefix and its limit. The first matching path wins, so order matters.",      "minRows": 1,      "maxRows": 8,      "columns": [        { "id": "path", "type": "text", "label": "Path", "maxLength": 100, "dir": "ltr" },        { "id": "limit", "type": "number", "label": "Limit", "min": 1, "max": 10000, "step": 1, "unit": "req/s" }      ],      "default": [        { "path": "/api/login", "limit": 5 },        { "path": "/api", "limit": 500 }      ]    },    {      "id": "methods",      "type": "multiselect",      "label": "Limited methods",      "description": "Requests with any other method are not limited.",      "min": 1,      "default": ["POST", "PUT", "PATCH", "DELETE"],      "options": [        { "value": "GET", "label": "GET" },        { "value": "POST", "label": "POST" },        { "value": "PUT", "label": "PUT" },        { "value": "PATCH", "label": "PATCH" },        { "value": "DELETE", "label": "DELETE" },        { "value": "HEAD", "label": "HEAD" }      ]    },    {      "id": "requests",      "type": "textarea",      "label": "Requests",      "description": "One per line: a method and a path.",      "dir": "ltr",      "rows": 5,      "maxLength": 5000,      "default": "POST /api/login\nPOST /api/orders\nGET /api/orders/7\nDELETE /api/orders/7\nPOST /health"    }  ],  "samples": [    { "label": "Reads limited too", "input": { "methods": ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD"] } },    { "label": "A rule that never matches", "input": { "limits": [{ "path": "/api", "limit": 500 }, { "path": "/api/login", "limit": 5 }] } }  ]}

import type { Output, Row, Tool } from "@toolbench/sdk"; // A type alias, not an interface: an interface does not satisfy the SDK's index-signature constraint.type Input = { limits: Row[]; methods: string[]; requests: string }; export default {  run({ limits, methods, requests }): Output {    const rules = limits.map((row) => ({ path: String(row.path), limit: Number(row.limit) }));    for (const [i, rule] of rules.entries()) {      if (!rule.path.startsWith("/")) return { kind: "error", message: `"${rule.path}" must start with "/".`, input: "limits", row: i };      const same = rules.findIndex((other) => other.path === rule.path);      if (same < i) return { kind: "error", message: `Path "${rule.path}" is already in row ${same + 1}.`, input: "limits", row: i };      // A later prefix an earlier one covers can never match, which is what reordering the rows is for.      const covers = rules.findIndex((other, j) => j < i && rule.path.startsWith(other.path));      if (covers >= 0) return { kind: "error", message: `"${rule.path}" never matches: row ${covers + 1}, "${rules[covers]?.path}", matches it first. Move it above.`, input: "limits", row: i };    }    const rows: (string | number)[][] = [];    let offset = 0;    for (const line of requests.split("\n")) {      const at = offset;      offset += line.length + 1;      if (line.trim() === "") continue;      const [method = "", path = "", extra] = line.trim().split(/\s+/);      if (extra !== undefined || !path.startsWith("/")) {        return { kind: "error", message: `"${line.trim()}" is not a method and a path, such as "GET /api/orders".`, input: "requests", at, len: line.length };      }      const upper = method.toUpperCase();      const rule = methods.includes(upper) ? rules.findIndex((r) => path.startsWith(r.path)) : -1;      rows.push([`${upper} ${path}`, !methods.includes(upper) ? `${upper} is not limited` : rule < 0 ? "no rule matches" : `row ${rule + 1}, ${rules[rule]?.path}`, rule < 0 ? "none" : (rules[rule]?.limit ?? 0)]);    }    if (rows.length === 0) return { kind: "error", message: "No requests yet. Add one per line, a method and a path.", input: "requests" };    return { kind: "table", caption: "The limit each request meets, first match winning", columns: [{ label: "Request" }, { label: "Rule" }, { label: "Limit (req/s)", align: "end" }], rows };  },} satisfies Tool<Input>;

<tool-host tool="rate-limits" mode="embed"></tool-host>

<tool-host tool="utf8-bytes" mode="page"></tool-host>

<tool-host tool="percentiles" mode="card"></tool-host>

// Press Run once, on the reader's behalf, so the example opens with its answer.if (host.hasAttribute("data-run")) void host.run();

<tool-host tool="percentiles" mode="embed" layout="answer-first" data-run></tool-host>

<tool-host tool="percentiles" mode="embed" parts="1" more="expand" data-run></tool-host>

{  "samples": [    {      "label": "Two clusters",      "input": {        "values": "2 2 3 3 3 4 4 4 5 5 5 6 6 7 7 180 190 195 210 240 260 300 340 900"      }    },    {      "label": "Definitions disagree",      "input": {        "values": "3 4 4 5 6 7 9 14 40 260",        "method": "linear"      }    },    {      "label": "Definitions agree",      "input": {        "values": "98 99 99 100 100 100 101 101 101 102 102 103",        "method": "nearest"      }    },    {      "label": "Not a number",      "input": {        "values": "12, 14, 15, 18ms, 21, 24, 31, 44"      }    }  ]}

<tool-host tool="queue-explorer" mode="embed"></tool-host>

<tool-host tool="utf8-bytes" mode="embed" reset="none"></tool-host>

{  "id": "stack",  "type": "select",  "label": "Library",  "description": "Fills the read timeout, retries and backoff. Edit them afterwards.",  "default": "a",  "options": [    {      "value": "a",      "label": "Library A",      "sets": {        "read": 30,        "retries": 2,        "backoff": 200      }    },    {      "value": "b",      "label": "Library B",      "sets": {        "read": 60,        "retries": 3,        "backoff": 500      }    },    {      "value": "c",      "label": "Library C",      "sets": {        "read": 10,        "retries": 0,        "backoff": 0      }    },    {      "value": "custom",      "label": "Custom"    }  ]}

{  "id": "rtt",  "type": "number",  "label": "Round-trip time",  "unit": "ms",  "description": "Drag, use the arrow keys, or type an exact value.",  "primary": true,  "default": 80,  "min": 10,  "max": 500,  "step": 10,  "control": "slider"}

{  "autoRun": true}

{  "id": "order",  "type": "select",  "control": "segmented",  "label": "Byte order",  "description": "How multi-byte fields are read. {muted|Detect} needs a `0xFEFF` mark in the first two bytes.",  "default": "little",  "options": [    {      "value": "little",      "label": "Little-endian (x86)"    },    {      "value": "big",      "label": "Big-endian (network)"    },    {      "value": "auto",      "label": "Detect from header"    }  ]}

{  "id": "captured",  "type": "date",  "mode": "datetime",  "label": "Captured at",  "unit": "local time",  "description": "When the trace was taken, between **2020-01-01** and **2026-10-25**. Arrives as `2026-10-25T14:30`.",  "default": "2026-10-25T14:30",  "min": "2020-01-01T00:00",  "max": "2026-10-25T23:59"}

{  "id": "accent",  "type": "color",  "label": "Highlight colour",  "description": "Six hex digits, as `#rrggbb`. The swatch opens the system picker.",  "default": "#1f5aa8"}

{  "id": "token",  "type": "secret",  "label": "API token",  "description": "Used for this run only. {warn|Never put in a shared link.}",  "minLength": 16,  "maxLength": 64}

{  "id": "types",  "type": "multiselect",  "label": "Record types",  "description": "The records to ask each resolver for.",  "default": ["A", "AAAA", "MX"],  "min": 1,  "options": [    {      "value": "A",      "label": "A"    },    {      "value": "AAAA",      "label": "AAAA"    },    {      "value": "MX",      "label": "MX"    },    {      "value": "TXT",      "label": "TXT"    },    {      "value": "CNAME",      "label": "CNAME"    },    {      "value": "NS",      "label": "NS"    }  ]}

{  "id": "regions",  "type": "multiselect",  "label": "Regions",  "description": "Each chosen region asks every record type.",  "default": ["us-east-1", "us-west-2", "eu-west-1"],  "max": 4,  "options": [    {      "value": "us-east-1",      "label": "us-east-1"    },    {      "value": "us-east-2",      "label": "us-east-2"    },    {      "value": "us-west-1",      "label": "us-west-1"    },    {      "value": "us-west-2",      "label": "us-west-2"    },    {      "value": "ca-central-1",      "label": "ca-central-1"    },    {      "value": "eu-west-1",      "label": "eu-west-1"    },    {      "value": "eu-west-2",      "label": "eu-west-2"    },    {      "value": "eu-central-1",      "label": "eu-central-1"    },    {      "value": "eu-north-1",      "label": "eu-north-1"    },    {      "value": "ap-south-1",      "label": "ap-south-1"    },    {      "value": "ap-northeast-1",      "label": "ap-northeast-1"    },    {      "value": "ap-southeast-1",      "label": "ap-southeast-1"    },    {      "value": "ap-southeast-2",      "label": "ap-southeast-2"    },    {      "value": "sa-east-1",      "label": "sa-east-1"    }  ]}

{  "id": "hosts",  "type": "rows",  "label": "Hosts",  "description": "One host per row. Arrow keys on a handle move its row.",  "minRows": 1,  "maxRows": 8,  "columns": [    {      "id": "host",      "type": "text",      "label": "Host",      "maxLength": 253,      "dir": "ltr"    }  ],  "default": [    {      "host": "example.com"    },    {      "host": "api.example.com"    },    {      "host": "status.example.net"    }  ]}

{  "id": "limits",  "type": "rows",  "label": "Limits",  "description": "A path prefix and its limit. The first matching path wins, so order matters.",  "minRows": 1,  "maxRows": 8,  "columns": [    {      "id": "path",      "type": "text",      "label": "Path",      "maxLength": 100,      "dir": "ltr"    },    {      "id": "limit",      "type": "number",      "label": "Limit",      "min": 1,      "max": 10000,      "step": 1,      "unit": "req/s"    }  ],  "default": [    {      "path": "/api/login",      "limit": 5    },    {      "path": "/api",      "limit": 500    }  ]}

{  "id": "config",  "type": "textarea",  "label": "Client config",  "description": "JSON. Highlighted through the host's highlight hook when one is installed.",  "lang": "json",  "rows": 8,  "dir": "ltr",  "default": "{\n  \"name\": \"orders-client\",\n  \"enabled\": true,\n  \"timeouts\": {\n    \"connect\": 5,\n    \"read\": 30,\n    \"total\": null\n  },\n  \"retry\": {\n    \"attempts\": 3,\n    \"backoffMs\": 200,\n    \"multiplier\": 2.0,\n    \"jitter\": false,\n    \"on\": [\"502\", \"503\", \"504\"]\n  },\n  \"pool\": {\n    \"maxIdle\": 16,\n    \"maxPerHost\": 64,\n    \"idleTimeout\": 90\n  },\n  \"tls\": {\n    \"verify\": true,\n    \"minVersion\": \"1.2\",\n    \"alpn\": [\"h2\", \"http/1.1\"]\n  },\n  \"headers\": {\n    \"user-agent\": \"orders-client/4.1\",\n    \"accept\": \"application/json\",\n    \"x-request-budget-ms\": 2500\n  },\n  \"proxy\": null,\n  \"logging\": {\n    \"level\": \"warn\",\n    \"redact\": [\"authorization\", \"cookie\"],\n    \"sampleRate\": 0.05\n  },\n  \"aVeryLongKeyThatForcesTheLineToWrapInsideTheTextareaSoSoftWrapPositionsCanBeCompared\": \"value with spaces that also wraps across the visible width of the field\"\n}"}

// The runtime asks for a Node, never a string, so it never assigns innerHTML.export function highlight(source: string, lang: string): Node {  const out = document.createDocumentFragment();  for (const [cls, text] of tokens(source, lang)) {    if (!cls) {      out.append(text);      continue;    }    const span = document.createElement("span");    span.className = `t-${cls}`;    span.textContent = text;    out.append(span);  }  return out;}

{  "id": "machine",  "type": "textarea",  "label": "Machine",  "description": "One state or transition per line. # starts a comment.",  "primary": true,  "lang": "doors",  "grammar": {    "keywords": ["initial", "state", "on", "final"],    "comment": "#",    "operators": ["->", ":"],    "strings": "\""  },  "rows": 9,  "maxLength": 4000,  "dir": "ltr",  "default": "# A door that locks\ninitial closed\nstate open\nstate locked \"needs a key\"\non push: closed -> open\non pull: open -> closed\non lock: closed -> locked\non unlock: locked -> closed"}

{  "id": "values",  "type": "textarea",  "label": "Latencies",  "description": "Raw latencies, in the unit chosen below.\n- **Spaces or commas**: `41 38 37 1450`.\n- **One per line**: a column pasted from a spreadsheet.\n\nA negative value is {bad|refused}. Zeros are {good|kept}, and {muted|blank lines are ignored}.",  "default": "41 38 37 39 36 35 44 52 61 1450",  "rows": 3,  "maxLength": 20000,  "dir": "ltr",  "role": "data",  "primary": true}

{  "id": "slo",  "type": "number",  "label": "p99 target",  "description": "The p99 the service promises.",  "details": "Compared with the p99 of what you paste, by nearest rank: the smallest value with at least 99% of them at or below it.\n- A p99 equal to the target is a {bad|miss} only when the toggle below is on.\n- With fewer than 100 values, the p99 is the {warn|largest} one.\n\n{muted|A percentile of a few values says little.}",  "default": 300,  "min": 1,  "max": 60000,  "role": "threshold"}

{  "runtime": {    "entry": "index.ts",    "thread": "main"  },  "autoRun": true}

{  "runtime": {    "entry": "index.ts",    "thread": "worker"  },  "timeoutMs": 8000}

workerFactory: () => new Worker(new URL("./tool.worker.ts", import.meta.url), { type: "module" }),

const tools = { ...registry, ...fixtures }; createToolWorker({  load: async (id) => {    const entry = tools[id];    if (!entry) throw new Error(`the worker has no tool with id "${id}"`);    return (await entry.load()) as never;  },});

{  "kind": "group",  "parts": [    {      "kind": "fields",      "fields": [        {          "label": "Bytes",          "value": "19"        },        {          "label": "Characters",          "value": "11",          "note": "code points, not UTF-16 units"        },        {          "label": "Encoding",          "value": "4 multi-byte"        },        {          "label": "Overhead",          "value": "8 bytes",          "note": "what UTF-8 costs over one byte per character"        }      ]    },    {      "kind": "bytes",      "bytes": [72, 195, 169, 108, 108, 111, 44, 32, 228, 184, 150, 231, 149, 140, 32, 240, 159, 145, 139],      "caption": "Highlighted runs are one character each",      "highlight": [        {          "at": 1,          "len": 2,          "label": "U+00E9 é"        },        {          "at": 8,          "len": 3,          "label": "U+4E16 世"        },        {          "at": 11,          "len": 3,          "label": "U+754C 界"        },        {          "at": 15,          "len": 4,          "label": "U+1F44B 👋"        }      ]    }  ]}

// The runtime asks for a Node, never a string, so it never assigns innerHTML.export function highlight(source: string, lang: string): Node {  const out = document.createDocumentFragment();  for (const [cls, text] of tokens(source, lang)) {    if (!cls) {      out.append(text);      continue;    }    const span = document.createElement("span");    span.className = `t-${cls}`;    span.textContent = text;    out.append(span);  }  return out;}

{  "kind": "group",  "parts": [    {      "kind": "fields",      "fields": [        {          "label": "count",          "value": "20"        },        {          "label": "p50",          "value": "28"        },        {          "label": "p99",          "value": "1200"        },        {          "label": "max",          "value": "1200"        },        {          "label": "mean",          "value": "127",          "note": "shown for contrast: it is not a percentile"        },        {          "label": "min",          "value": "12"        }      ]    },    {      "kind": "table",      "caption": "The same data under both definitions. A comparison across systems using different ones means nothing.",      "columns": [        {          "label": "",          "mono": true        },        {          "label": "Nearest rank",          "align": "end",          "mono": true        },        {          "label": "Linear",          "align": "end",          "mono": true        },        {          "label": "Difference",          "align": "end",          "mono": true        }      ],      "rows": [        [          {            "text": "p50",            "mono": true          },          {            "text": "28",            "mono": true          },          {            "text": "29.5",            "mono": true          },          {            "text": "+5.4%",            "mono": true,            "tone": "warn"          }        ],        [          {            "text": "p90",            "mono": true          },          {            "text": "220",            "mono": true          },          {            "text": "246.0",            "mono": true          },          {            "text": "+11.8%",            "mono": true,            "tone": "warn"          }        ],        [          {            "text": "p95",            "mono": true          },          {            "text": "480",            "mono": true          },          {            "text": "516.0",            "mono": true          },          {            "text": "+7.5%",            "mono": true,            "tone": "warn"          }        ],        [          {            "text": "p99",            "mono": true          },          {            "text": "1200",            "mono": true          },          {            "text": "1063.2",            "mono": true          },          {            "text": "-11.4%",            "mono": true,            "tone": "warn"          }        ],        [          {            "text": "p99.9",            "mono": true          },          {            "text": "1200",            "mono": true          },          {            "text": "1186.3",            "mono": true          },          {            "text": "-1.1%",            "mono": true,            "tone": "normal"          }        ]      ]    },    {      "kind": "fields",      "fields": [        {          "label": "true p99",          "value": "1200",          "group": "Averaging percentiles",          "note": "of all measurements pooled"        },        {          "label": "averaged p99",          "value": "328",          "group": "Averaging percentiles",          "note": "mean of four chunks' p99, which is what a dashboard usually shows"        },        {          "label": "error",          "value": "-72.7%",          "group": "Averaging percentiles",          "tone": "bad",          "note": "how wrong the averaged figure is"        }      ]    }  ]}

{  "kind": "fields",  "fields": [    {      "label": "Mapped address",      "value": "192.0.2.10:54321",      "mono": true    },    {      "label": "Integrity",      "value": "No message integrity attribute present",      "tone": "warn",      "mono": false    },    {      "label": "Round trip",      "value": "42",      "note": "ms",      "mono": false    },    {      "label": "Transaction",      "value": "a1b2c3d4e5f6a7b8c9d0e1f2"    }  ]}

// One tool's result, restyled by role: the verdict drawn large, the stats as tiles.export const perTool = {  "styled-output": [    `.tb-field[data-role="verdict"] { display: block; padding: 0.75rem 1rem; border-radius: var(--tb-radius); border: 2px solid var(--tb-border); }.tb-field[data-role="verdict"][data-tone="bad"] { border-color: var(--tb-bad); }.tb-field[data-role="verdict"][data-tone="good"] { border-color: var(--tb-good); }.tb-field[data-role="verdict"] .tb-value { font-size: 1.4rem; font-weight: 700; }[data-role="stats"] .tb-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; }[data-role="stats"] .tb-field { grid-template-columns: 1fr; padding: 0.75rem; border: 1px solid var(--tb-border); border-radius: 8px; background: var(--tb-surface); }[data-role="stats"] .tb-value { font-size: 1.5rem; font-weight: 700; }`,  ],};

<tool-host tool="styled-output" mode="embed" id="styled"></tool-host>

const host = document.querySelector<Host>("#reveal-host");for (const button of document.querySelectorAll<HTMLButtonElement>("[data-reveal]")) {  // Opens the part if `parts` hid it, scrolls to it and moves focus there.  button.addEventListener("click", () => void host?.reveal(button.dataset.reveal ?? ""));}

<div class="reveal-demo">  <p class="reveal-buttons"><button type="button" class="button" data-reveal="stats">Show the stats</button> <button type="button" class="button" data-reveal="fields">Show the fields</button></p>  <tool-host tool="styled-output" mode="embed" parts="1" more="expand" id="reveal-host"></tool-host></div>

{  "kind": "table",  "caption": "Six instances, slowest p99 first",  "columns": [    {      "label": "Instance",      "wrap": "none",      "rowHeader": true    },    {      "label": "Requests",      "align": "end",      "mono": true,      "wrap": "none"    },    {      "label": "p50 ms",      "align": "end",      "mono": true,      "wrap": "none"    },    {      "label": "p99 ms",      "align": "end",      "mono": true,      "wrap": "none"    },    {      "label": "Status",      "wrap": "none"    },    {      "label": "Note",      "wrap": "prose"    }  ],  "rows": [    [      "host-4",      "24,954",      "41",      {        "text": "1,450",        "tone": "bad"      },      {        "text": "Over SLO",        "tone": "bad"      },      "Tail is 35x the median; one slow disk on this host."    ],    [      "host-1",      "18,301",      "38",      {        "text": "612",        "tone": "warn"      },      {        "text": "Near SLO",        "tone": "warn"      },      "Within budget, but rising since the last deploy."    ],    [      "host-2",      "17,880",      "37",      {        "text": "288",        "tone": "normal"      },      {        "text": "OK",        "tone": "good"      },      {        "text": "INC-2041",        "wrap": "none"      }    ],    [      "host-3",      "17,402",      "39",      {        "text": "270",        "tone": "normal"      },      {        "text": "OK",        "tone": "good"      },      {        "text": "Routine.",        "tone": "muted"      }    ],    [      "host-5",      "9,115",      "36",      {        "text": "241",        "tone": "normal"      },      {        "text": "OK",        "tone": "good"      },      "Half the traffic: drained for maintenance at 14:00."    ],    [      "host-6",      "212",      "35",      {        "text": "n/a",        "tone": "muted"      },      {        "text": "Too few",        "tone": "muted"      },      "Fewer than 1,000 requests, so p99 is not estimated."    ]  ]}

{  "id": "slo",  "type": "number",  "label": "p99 target",  "description": "The p99 the service promises.",  "details": "Compared with the p99 of what you paste, by nearest rank: the smallest value with at least 99% of them at or below it.\n- A p99 equal to the target is a {bad|miss} only when the toggle below is on.\n- With fewer than 100 values, the p99 is the {warn|largest} one.\n\n{muted|A percentile of a few values says little.}",  "default": 300,  "min": 1,  "max": 60000,  "role": "threshold"}

// One input by role and one by id: a property set on a row reaches only that row's control.export const INPUT_STYLES = /* css */ `.tb-field-row[data-role="threshold"] { --tb-input-border: var(--tb-accent); --tb-input-bg: var(--tb-accent-bg); }.tb-field-row[data-input="values"] { --tb-desc-fg: var(--tb-muted); }.tb-field-row[data-role="advanced"] { padding-top: 0.625rem; border-top: 1px dashed var(--tb-border); }`;

const log = document.querySelector("#events-log");for (const type of ["tool-input", "tool-run"]) {  // Both bubble out of the shadow root, so the listener could as well be on `document`.  document.querySelector("#events-host")?.addEventListener(type, (event) => {    const { detail } = event as CustomEvent<Record<string, unknown>>;    if (log) log.textContent = `${type} ${JSON.stringify(detail, null, 1).replace(/\s*\n\s*/g, " ")}`;  });}

<div class="events-demo">  <pre class="events-log" id="events-log">No events yet.</pre>  <tool-host tool="percentiles" mode="embed" id="events-host"></tool-host></div>

{  "kind": "series",  "chart": {    "xLabel": "Frame",    "yLabel": "Time",    "yUnit": "ms",    "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],    "series": [      {        "label": "Deadline",        "unit": "ms",        "points": [90, 110, 130, 150, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 370, 390, 410, 430, 450, 470]      },      {        "label": "Arrives",        "unit": "ms",        "points": [50, 70, 90, 110, null, 150, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 370, 390, 410, 430]      },      {        "label": "Released",        "unit": "ms",        "points": [50, 70, 90, 110, 250, 250, 250, 250, 250, 250, 250, 270, 290, 310, 330, 350, 370, 390, 410, 430]      }    ]  }}