@readymadeit/mcp 0.0.0-stage → 0.1.0

package/bundle/hkp-frontend/src/runtime/browser/services/sql-dump.ts

@@ -0,0 +1,192 @@
+/**
+ * SQL text that moves a database between runtimes: writing a dump of one, and
+ * deciding whether a dump may be run against another.
+ *
+ * Kept identical in hkp-frontend (src/runtime/browser/services/sql-dump.ts) and
+ * hkp-node (src/services/sql-dump.ts): a dump written by either runtime's `sql`
+ * is read by the other's, so the two must agree on the format. Change both.
+ *
+ * The format is an ordinary SQLite dump — what `sqlite3 file .dump` writes, and
+ * what `sqlite3 file < dump.sql` reads — with one difference: every CREATE
+ * says IF NOT EXISTS, so a dump loads into a database whose board has already
+ * created its (empty) tables from its schema.
+ */
+
+/** What a dump needs of a database: the rows of a statement. */
+export type DumpSource = {
+  query(sql: string): Record<string, unknown>[];
+};
+
+/** A name as an SQL identifier: `we"ird` becomes `"we""ird"`. */
+export function quoteIdentifier(name: string): string {
+  return `"${name.replace(/"/g, '""')}"`;
+}
+
+/** Text as an SQL string literal: `it's` becomes `'it''s'`. */
+function quoteText(text: string): string {
+  return `'${text.replace(/'/g, "''")}'`;
+}
+
+/**
+ * A stored CREATE statement that tolerates what it creates already existing.
+ *
+ * SQLite keeps each CREATE as it was written, minus any IF NOT EXISTS, with
+ * its leading keywords normalised — so the prefix is always one of these.
+ */
+function ifNotExists(sql: string): string {
+  return sql.replace(
+    /^CREATE (TABLE|UNIQUE INDEX|INDEX|TRIGGER|VIEW) /,
+    (prefix) => `${prefix}IF NOT EXISTS `,
+  );
+}
+
+/**
+ * The whole database as SQL: its tables with their rows, then its indexes,
+ * triggers and views, in one transaction — so loading it either brings in
+ * everything or, on a conflict, nothing.
+ *
+ * Rows are written by SQLite itself (`quote()`), so every value comes back
+ * exactly: text with its quotes and newlines, blobs as X'…', reals to the last
+ * digit. Columns are named in each INSERT, which is what lets a table with
+ * generated columns load.
+ *
+ * Throws on a virtual table: its contents live in tables of the module's
+ * own, and a dump that recreated both would load the rows twice.
+ */
+export function dumpDatabase(db: DumpSource): string {
+  const lines = ["PRAGMA foreign_keys=OFF;", "BEGIN TRANSACTION;"];
+
+  const tables = db.query(
+    "SELECT name, sql FROM sqlite_schema WHERE type = 'table' AND name NOT LIKE 'sqlite_%' ORDER BY rowid",
+  ) as { name: string; sql: string }[];
+
+  for (const { name, sql } of tables) {
+    if (/^CREATE VIRTUAL TABLE/i.test(sql)) {
+      throw new Error(
+        `'${name}' is a virtual table, which a dump cannot carry`,
+      );
+    }
+    lines.push(`${ifNotExists(sql)};`);
+    lines.push(...insertsFor(db, name));
+  }
+
+  const sequence = db.query(
+    "SELECT 1 FROM sqlite_schema WHERE type = 'table' AND name = 'sqlite_sequence'",
+  );
+  if (sequence.length > 0) {
+    // Where AUTOINCREMENT counts from, which a table's rows do not say: a row
+    // deleted before the dump still used its id up.
+    lines.push("DELETE FROM sqlite_sequence;");
+    lines.push(...insertsFor(db, "sqlite_sequence"));
+  }
+
+  const rest = db.query(
+    "SELECT sql FROM sqlite_schema WHERE type IN ('index', 'trigger', 'view') AND sql IS NOT NULL AND name NOT LIKE 'sqlite_%' ORDER BY rowid",
+  ) as { sql: string }[];
+  for (const { sql } of rest) {
+    lines.push(`${ifNotExists(sql)};`);
+  }
+
+  lines.push("COMMIT;");
+  return `${lines.join("\n")}\n`;
+}
+
+/** One INSERT per row of a table, as SQLite quotes its values. */
+function insertsFor(db: DumpSource, table: string): string[] {
+  const columns = (
+    db.query(`SELECT name FROM pragma_table_info(${quoteText(table)})`) as {
+      name: string;
+    }[]
+  ).map((column) => column.name);
+  if (columns.length === 0) {
+    return [];
+  }
+  const head = `INSERT INTO ${quoteIdentifier(table)}(${columns
+    .map(quoteIdentifier)
+    .join(",")}) VALUES(`;
+  const values = columns
+    .map((column) => `quote(${quoteIdentifier(column)})`)
+    .join(" || ',' || ");
+  const rows = db.query(
+    `SELECT ${quoteText(head)} || ${values} || ');' AS line FROM ${quoteIdentifier(table)}`,
+  ) as { line: string }[];
+  return rows.map((row) => row.line);
+}
+
+/**
+ * The statement with its string literals, quoted identifiers and comments
+ * blanked out, so what remains is what SQLite reads as code.
+ *
+ * One pass, left to right, because the order decides what is what: a quote
+ * inside a comment opens nothing, and `--` inside a string comments nothing
+ * out. Blanking each kind separately gets that wrong — `-- don't` followed by
+ * a statement and a later quote would blank the statement as if it were text.
+ */
+export function codeOf(sql: string): string {
+  let out = "";
+  let i = 0;
+  const skipTo = (end: string, from: number): number => {
+    const at = sql.indexOf(end, from);
+    return at === -1 ? sql.length : at + end.length;
+  };
+  while (i < sql.length) {
+    const c = sql[i];
+    const next = sql[i + 1];
+    if (c === "'" || c === '"' || c === "`") {
+      // Closed by the same character, which doubled stands for itself.
+      let j = i + 1;
+      while (j < sql.length) {
+        if (sql[j] === c) {
+          if (sql[j + 1] === c) {
+            j += 2;
+            continue;
+          }
+          break;
+        }
+        j += 1;
+      }
+      i = j + 1;
+      out += " ";
+    } else if (c === "[") {
+      i = skipTo("]", i + 1);
+      out += " ";
+    } else if (c === "-" && next === "-") {
+      i = skipTo("\n", i + 2);
+      out += " ";
+    } else if (c === "/" && next === "*") {
+      i = skipTo("*/", i + 2);
+      out += " ";
+    } else {
+      out += c;
+      i += 1;
+    }
+  }
+  return out;
+}
+
+/**
+ * Why SQL text may not be imported, or null when it may.
+ *
+ * An import runs text that arrived as data — on hkp-node possibly from a
+ * mounted endpoint nobody signed in to — so it is held to what a dump needs.
+ * A database is isolated by being its own file, and these are the statements
+ * that reach past that file: ATTACH opens any other file the process can
+ * read, VACUUM INTO writes one anywhere, load_extension runs native code, and
+ * a PRAGMA other than foreign_keys changes how the connection behaves for
+ * every statement after it.
+ */
+export function refuseImport(sql: string): string | null {
+  const code = codeOf(sql);
+  const reaching = code.match(/\b(ATTACH|DETACH|VACUUM|load_extension)\b/i);
+  if (reaching) {
+    return `an import may not use ${reaching[1].toUpperCase()}`;
+  }
+  for (const pragma of code.matchAll(
+    /\bPRAGMA\s+(?:[A-Za-z_]\w*\s*\.\s*)?([A-Za-z_]\w*)/gi,
+  )) {
+    if (pragma[1].toLowerCase() !== "foreign_keys") {
+      return `an import may not set PRAGMA ${pragma[1]}`;
+    }
+  }
+  return null;
+}

package/bundle/hkp-frontend/src/runtime/browser/services/sql-inspect.ts

@@ -0,0 +1,130 @@
+/**
+ * Looking into a SQL service's database without running anything of the
+ * board's: which tables there are, how many rows each holds, and the rows
+ * themselves a page at a time.
+ *
+ * Read only. Nothing here applies a schema, changes a row or reports to the
+ * board — the inspector is for seeing what a pipeline left behind, and a
+ * look that changed it would show something the board never did.
+ */
+import { Database, SqlRow } from "./sql-database";
+
+/** What a service's own statements do with a table. */
+export type TableUse = "writes" | "reads" | null;
+
+export type InspectedTable = {
+  name: string;
+  type: "table" | "view";
+  /** How many rows a table holds; a view is counted when it is looked at. */
+  rows: number | null;
+  /** The statement that created it, as SQLite keeps it. */
+  sql: string;
+  /** What the service's statement does with it, if it names it at all. */
+  use: TableUse;
+};
+
+export type InspectedRows = {
+  columns: string[];
+  rows: unknown[][];
+  /** Rows in the whole table, not only this page. */
+  total: number;
+};
+
+/** A name as an identifier: quoted, so any name SQLite accepts is read back. */
+export function quoteIdentifier(name: string): string {
+  return `"${name.replace(/"/g, '""')}"`;
+}
+
+/**
+ * The statement with comments and string literals blanked out, so a table name
+ * mentioned in a comment or a value is not taken for one the statement uses.
+ * Double-quoted identifiers stay: `"booking"` is the table `booking`.
+ */
+function codeOnly(sql: string): string {
+  return sql
+    .replace(/--[^\n]*/g, " ")
+    .replace(/\/\*[\s\S]*?\*\//g, " ")
+    .replace(/'(?:[^']|'')*'/g, "''");
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * Whether a statement writes a table, reads it, or does not name it.
+ *
+ * Written is what follows INSERT INTO, REPLACE INTO, UPDATE or DELETE FROM;
+ * any other mention is a read. A heuristic over the text rather than a parse,
+ * which is what an inspector pointing at the tables that matter needs.
+ */
+export function tableUse(name: string, statement: string): TableUse {
+  const code = codeOnly(statement);
+  const ident = `(?:"${escapeRegExp(name.replace(/"/g, '""'))}"|${escapeRegExp(name)}(?![\\w$]))`;
+  const writes = new RegExp(
+    `(?:\\binsert\\s+(?:or\\s+\\w+\\s+)?into|\\breplace\\s+into|\\bupdate(?:\\s+or\\s+\\w+)?|\\bdelete\\s+from)\\s+(?:main\\.)?${ident}`,
+    "i",
+  );
+  if (writes.test(code)) {
+    return "writes";
+  }
+  const mentioned = new RegExp(`(?<![\\w$])${ident}`, "i");
+  return mentioned.test(code) ? "reads" : null;
+}
+
+/** Every table and view in the database, the ones the statement uses first. */
+export function listTables(db: Database, statement: string): InspectedTable[] {
+  const found = db.query(
+    `SELECT name, type, IFNULL(sql, '') AS sql FROM sqlite_schema
+      WHERE type IN ('table', 'view') AND name NOT LIKE 'sqlite\\_%' ESCAPE '\\'
+      ORDER BY name`,
+  ) as Array<{ name: string; type: "table" | "view"; sql: string }>;
+  const order: Record<string, number> = { writes: 0, reads: 1 };
+  return found
+    .map((entry) => ({
+      name: entry.name,
+      type: entry.type,
+      sql: entry.sql,
+      rows: entry.type === "table" ? countRows(db, entry.name) : null,
+      use: tableUse(entry.name, statement),
+    }))
+    .sort(
+      (a, b) =>
+        (order[a.use ?? ""] ?? 2) - (order[b.use ?? ""] ?? 2) ||
+        a.name.localeCompare(b.name),
+    );
+}
+
+function countRows(db: Database, table: string): number {
+  const [row] = db.query(`SELECT count(*) AS n FROM ${quoteIdentifier(table)}`);
+  return Number(row?.n ?? 0);
+}
+
+/**
+ * A page of a table's rows, with its columns — taken from the table rather
+ * than the rows, so an empty table still shows what it holds.
+ */
+export function readRows(
+  db: Database,
+  table: string,
+  offset: number,
+  limit: number,
+): InspectedRows {
+  const exists = db.query(
+    "SELECT 1 FROM sqlite_schema WHERE type IN ('table', 'view') AND name = $name",
+    { $name: table },
+  );
+  if (exists.length === 0) {
+    throw new Error(`no table '${table}' in this database`);
+  }
+  const columns = (
+    db.query(`PRAGMA table_info(${quoteIdentifier(table)})`) as SqlRow[]
+  ).map((column) => String(column.name));
+  const rows = db
+    .query(`SELECT * FROM ${quoteIdentifier(table)} LIMIT $limit OFFSET $offset`, {
+      $limit: Math.max(0, Math.floor(limit)),
+      $offset: Math.max(0, Math.floor(offset)),
+    })
+    .map((row) => columns.map((column) => row[column]));
+  return { columns, rows, total: countRows(db, table) };
+}

package/bundle/hkp-frontend/src/runtime/browser/services/sql-inspector.css

@@ -0,0 +1,155 @@
+/* SQL inspector — the settings dialog's frame (settings/settings.css): tables
+   down the side as its navigation, the picked table's rows in the pane. */
+
+.hkp-set-nav-item.hkp-sqli-table {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  font-weight: 600;
+}
+
+.hkp-sqli-table-name {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hkp-sqli-table-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  font-size: 11.5px;
+  font-weight: 500;
+  color: var(--set-mid);
+}
+
+.hkp-sqli-use {
+  padding: 0 6px;
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-weight: 600;
+}
+.hkp-sqli-use--writes {
+  background: var(--set-warn-bg);
+  color: var(--set-warn);
+}
+.hkp-sqli-use--reads {
+  background: var(--set-ok-bg);
+  color: var(--set-ok);
+}
+
+.hkp-sqli-empty {
+  padding: 8px 10px;
+}
+
+.hkp-sqli-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.hkp-sqli-heading {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.hkp-sqli-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.hkp-sqli-error {
+  padding: 8px 24px;
+  border-bottom: 1px solid var(--set-line-soft);
+  color: var(--set-danger);
+  font-size: 12.5px;
+}
+
+.hkp-sqli-definition {
+  flex: 0 0 auto;
+  max-height: 30%;
+  overflow: auto;
+  margin: 0;
+  padding: 10px 24px;
+  border-bottom: 1px solid var(--set-line-soft);
+  background: var(--set-ground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  white-space: pre-wrap;
+  color: var(--set-ink);
+}
+
+/* The rows: scrolls both ways inside the pane, header kept in view. */
+.hkp-sqli-grid {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+}
+
+.hkp-sqli-grid table {
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 12.5px;
+  min-width: 100%;
+}
+
+.hkp-sqli-grid th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 7px 12px;
+  border-bottom: 1px solid var(--set-line);
+  background: var(--set-ground);
+  color: var(--set-mid);
+  font-weight: 700;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.hkp-sqli-grid td {
+  max-width: 360px;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--set-line-soft);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  color: var(--set-ink);
+}
+
+.hkp-sqli-grid th:first-child,
+.hkp-sqli-grid td:first-child {
+  padding-left: 24px;
+}
+
+.hkp-sqli-grid tbody tr:hover td {
+  background: var(--set-hover);
+}
+
+.hkp-sqli-null {
+  color: var(--set-mut) !important;
+  font-style: italic;
+}
+
+.hkp-sqli-pager {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 10px 24px;
+  border-top: 1px solid var(--set-line-soft);
+  background: var(--set-ground);
+}
+
+.hkp-sqli-grid .hkp-sqli-empty {
+  padding: 12px 24px;
+}

package/bundle/hkp-frontend/src/runtime/browser/services/sql-modes.ts

@@ -0,0 +1,27 @@
+/**
+ * The SQL service's modes and emit choices, shared by the service and its
+ * panel. A module of their own so the panel need not import the service, which
+ * imports the panel.
+ */
+
+export const MODES = [
+  "query",
+  "run",
+  "exec",
+  "databases",
+  "export",
+  "import",
+] as const;
+export type SqlMode = (typeof MODES)[number];
+
+/** The modes that run the configured statement, and need one. */
+export const STATEMENT_MODES: readonly SqlMode[] = ["query", "run", "exec"];
+
+/** What `export` hands on: SQL text that recreates the database, or the
+ *  SQLite file itself. */
+export const FORMATS = ["sql", "sqlite"] as const;
+export type SqlFormat = (typeof FORMATS)[number];
+
+/** Whether the statement's result travels onward, or the input it ran on. */
+export const EMITS = ["result", "input"] as const;
+export type SqlEmit = (typeof EMITS)[number];

package/bundle/hkp-frontend/src/runtime/browser/services/tests/TESTING_APPROACH.md

@@ -0,0 +1,169 @@
+# Service Unit Testing Approach
+
+A guide for writing tests for the non-UI services under `src/runtime/browser/services/`.
+
+Two completed examples to reference: `map-service.test.ts`, `timer-service.test.ts`.
+
+---
+
+## 1. Before Writing the First Test — Read the Service
+
+Open the service file and answer these questions before writing anything:
+
+| Question                                                       | Where to look                                             |
+| -------------------------------------------------------------- | --------------------------------------------------------- |
+| What modes/states does the service have?                       | Constructor defaults + `State` type                       |
+| What does `configure()` accept, and what are its side effects? | Destructured keys, `app.notify` calls                     |
+| What does `process()` do per mode?                             | Branching on `this.state.*` or `this.*` properties        |
+| Does it use timers, `sleep`, external calls?                   | `setTimeout`, `setInterval`, `fetch`, imports             |
+| Does it have helper methods that can be tested independently?  | Non-private methods other than configure/process          |
+| What does the descriptor export?                               | `export default { serviceName, serviceId, service, ... }` |
+
+For services that extend `ServiceBase`, check `getConfiguration()` — it returns `{ ...this.state, bypass }`.
+
+---
+
+## 2. Test File Location & Naming
+
+```
+src/runtime/browser/services/tests/<service-name>-service.test.ts
+```
+
+Always `.test.ts` (not `.tsx`) unless the service imports React components.  
+Import the service via a relative path from the `tests/` folder:
+
+```ts
+import FooDescriptor from "../base/Foo"; // or "../Foo" for top-level services
+const FooService = FooDescriptor.service; // or FooDescriptor.Map, etc.
+```
+
+---
+
+## 3. Standard Test Structure
+
+### Describe groups (in order)
+
+1. **Descriptor shape** — `serviceName`, `serviceId`, constructor produces callable methods
+2. **Default state** — every initial property value
+3. **`configure()` — property updates** — each key sets the right field and calls `app.notify` with correct payload
+4. **`configure()` — commands** (start/stop/restart/inject/etc.) — one group per logical command family
+5. **Core behaviour per mode** — one `describe` per mode (e.g. `replace mode`, `periodic mode`)
+6. **`process()` behaviour** — grouped by mode or scenario
+7. **Edge cases** — errors, empty input, boundary values, concurrent calls
+8. **Helper methods** (if any)
+9. **`destroy()`**
+
+### Mock app factory
+
+Every test creates a fresh `mockApp`. Keep it minimal — add only what the service actually calls:
+
+```ts
+function createMockApp() {
+  return {
+    notify: vi.fn(),
+    next: vi.fn(),
+    sendAction: vi.fn(),
+    // add others only if the service calls them
+  };
+}
+
+function createService() {
+  const app = createMockApp();
+  const svc = new FooService(app as any, "test-board", {} as any, "svc-1");
+  return { svc, app };
+}
+```
+
+---
+
+## 4. Fake Timers
+
+Any service that uses `setTimeout`, `setInterval`, or `sleep()` must use fake timers.  
+Scope them to the relevant `describe` block only — not the whole file:
+
+```ts
+describe("...", () => {
+  beforeEach(() => { vi.useFakeTimers(); });
+  afterEach(() => { vi.useRealTimers(); });
+
+  it("fires after 500 ms", () => {
+    // ...setup...
+    vi.advanceTimersByTime(500);
+    expect(app.next).toHaveBeenCalledTimes(1);
+  });
+
+  it("async process with sleep", async () => {
+    const p = svc.process({});
+    vi.advanceTimersByTime(200); // unblock the sleep
+    const result = await p;
+    expect(result).toEqual(...);
+  });
+});
+```
+
+---
+
+## 5. Async / Promise Tests
+
+If `configure()` or `process()` returns a promise, `await` it.  
+Verify the `try-catch` error recovery actually fires by checking what the service
+returns on bad input — if a `return` inside an `async` reduce is not `await`ed the
+catch is bypassed (this was fixed in `Map`).
+
+---
+
+## 6. What to Assert — Priority Order
+
+1. **Return value of `process()`** — shape, values, type
+2. **`app.notify` calls** — payload keys and values
+3. **`app.next` calls** — for services that push downstream
+4. **Internal state** — `this.running`, `this.counter`, etc. when observable
+5. **`getConfiguration()` / state** after configure calls
+
+Use `toHaveBeenCalledWith(service, { key: value })` for notify assertions — the first argument is always the service instance itself.
+
+---
+
+## 7. Bugs to Watch For (Discovered So Far)
+
+| Service | Bug                                                                                                                         | Fix                                                      |
+| ------- | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| `Map`   | `mapper` returned rather than `await`-ed the async reduce, so `try-catch` never caught rejected expression evaluations      | Added `await` to both the scalar and reduce return paths |
+| `Timer` | `clearTimer()` notified `running: false` but never set `this.running = false`, so `running` stayed `true` after `destroy()` | Set `this.running = false` inside `clearTimer()`         |
+| `Timer` | `until` check used `>` instead of `>=`, firing one extra tick beyond the limit                                              | Changed to `>=`                                          |
+
+Keep this table updated as new bugs are found.
+
+---
+
+## 8. Checklist Before Committing
+
+- [ ] All `describe` groups listed in §3 are present (skip only if genuinely inapplicable)
+- [ ] Fake timers are scoped to the right blocks (not global)
+- [ ] No real `sleep` / `setTimeout` calls in test code itself
+- [ ] Each `it` creates a fresh service instance (no shared state between tests)
+- [ ] `app.notify.mockClear()` used when asserting call counts mid-test
+- [ ] Failing tests prompted investigation of the service source — bugs fixed there, not worked around in the test
+
+---
+
+## 9. Services Completed
+
+| Service                   | Test file                          | Bugs found & fixed                            |
+| ------------------------- | ---------------------------------- | --------------------------------------------- |
+| `Map` (`base/Map.ts`)     | `map-service.test.ts` (59 tests)   | Async error recovery bypass                   |
+| `Timer` (`base/Timer.js`) | `timer-service.test.ts` (45 tests) | `clearTimer` running flag; `until` off-by-one |
+
+## 10. Services Still To Do
+
+Run `find src/runtime/browser/services -maxdepth 2 -name '*.ts' -o -name '*.tsx' -o -name '*.js' | grep -v test | grep -v UI` for the full list.  
+Good next candidates (pure logic, no browser APIs):
+
+- `Filter.tsx` — map + filter expression evaluation
+- `GroupBy.ts` — grouping logic
+- `Aggregator.ts` — interval-based aggregation
+- `Stack.tsx` — push/pop/peek operations
+- `Delay.tsx` — sleep-based delay
+- `Injector.ts` — property injection
+- `UuidGenerator.ts` — simple, good warm-up
+- `Switch.tsx` — routing by value