tablewalk 0.0.1

package/dist/client/features.css

@@ -0,0 +1,524 @@
+/* Export and query history.
+   Loaded after style.css and names no colour of its own: every value here is
+   a token from that file, so the two stay in step through a theme change. */
+
+/* ---------- export ---------- */
+
+.export {
+  /* Pushed to the far end of the result header: the stats on the left are
+     what you read, the action belongs where an action is looked for. */
+  margin-left: auto;
+  position: relative;
+}
+
+.export-summary {
+  list-style: none;
+  cursor: pointer;
+  padding: 4px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  color: var(--text-dim);
+  font-size: 12px;
+  user-select: none;
+}
+.export-summary::-webkit-details-marker { display: none; }
+.export-summary::after { content: " ▾"; color: var(--text-faint); }
+.export[open] .export-summary { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
+.export-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.export-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 20;
+  min-width: 15rem;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
+}
+
+.export-group { padding: 2px 0; }
+.export-group + .export-group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
+
+.export-kind {
+  display: block;
+  padding: 2px 8px;
+  font: 600 11px var(--mono);
+  letter-spacing: 0.04em;
+  color: var(--text-faint);
+}
+
+.export-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 5px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  font-size: 12.5px;
+}
+.export-item:hover:not(:disabled) { background: var(--surface-2); }
+.export-item:disabled { color: var(--text-dim); cursor: progress; }
+
+.export-columns-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.export-count { font: 11.5px var(--mono); color: var(--text-faint); }
+/* No bottom border: the group below already draws a top one at this seam, and
+   the two together were a double hairline six pixels apart. The padding stays
+   — it is what gave the rule room, and the rule it now belongs to is the
+   next group's. */
+.export-group:first-child { padding-bottom: 4px; margin-bottom: 2px; }
+
+/* ---------- the column chooser ---------- */
+
+dialog.cols { width: min(30rem, 92vw); }
+
+.col-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.col-actions button { padding: 3px 10px; font-size: 12px; }
+.col-count { margin-left: auto; font: 11.5px var(--mono); color: var(--text-faint); }
+
+.col-list {
+  max-height: min(24rem, 48vh);
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.col-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.col-row + .col-row { border-top: 1px solid var(--border); }
+.col-row:hover { background: var(--surface-2); }
+.col-row input { accent-color: var(--accent); align-self: center; }
+
+.col-name { font: 12.5px var(--mono); color: var(--text); }
+
+/* Type and provenance sit on the right, dim: they inform the choice without
+   competing with the name you are actually scanning for. */
+.col-type { margin-left: auto; font: 11.5px var(--mono); color: var(--text-dim); }
+/* "not shown" is information, not a warning: it says the export will re-run
+   the query to fetch that column, which is a fact rather than a problem. */
+.col-extra {
+  font-size: 11px;
+  color: var(--text-faint);
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  padding: 0 6px;
+}
+
+.export-note {
+  margin: 6px 4px 2px;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: var(--warn);
+}
+
+/* ---------- query history ---------- */
+
+/* The panel hangs off the query bar, so the bar is its positioning context.
+   style.css leaves it static; this is the one rule here that reaches back. */
+.querybar { position: relative; }
+
+.history-panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  width: min(38rem, 90vw);
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.22);
+}
+.history-panel[hidden] { display: none; }
+
+.history-list { list-style: none; margin: 0; padding: 0; }
+
+.history-item {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  width: 100%;
+  padding: 5px 8px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+}
+.history-item:hover { background: var(--surface-2); }
+
+.history-q {
+  flex: 1;
+  min-width: 0;
+  font: 12.5px var(--mono);
+  /* One line each: the list is scanned, and a wrapped four-line query would
+     push the rest of the history off the screen. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.history-age { color: var(--text-faint); font-size: 11.5px; flex: none; }
+
+.history-clear {
+  display: block;
+  width: 100%;
+  margin-top: 6px;
+  padding: 5px 8px;
+  border-top: 1px solid var(--border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 12px;
+  text-align: left;
+}
+.history-clear:hover { color: var(--danger); }
+
+.history-empty { margin: 0; padding: 10px; color: var(--text-dim); font-size: 12.5px; }
+
+/* ---------- schema export ---------- */
+
+.schema-export .export-menu { min-width: 19rem; }
+
+/* Not a warning, so not `--warn`: it states what is about to be exported.
+   Sitting above the formats because it qualifies all of them. */
+.schema-export .export-scope {
+  color: var(--text-dim);
+  margin: 2px 4px 6px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+/* Format name and what it is for, on one line — the name alone does not tell
+   anyone why they would pick Mermaid over SVG. */
+.schema-export .export-item {
+  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
+}
+/* The description never wraps: two lines per format turns a five-item menu
+   into a paragraph, and the name is what is being chosen between. */
+.schema-export .export-count { white-space: nowrap; }
+.schema-export .export-item .export-kind { padding: 0; color: var(--text); }
+.schema-export .export-item:hover .export-kind { color: var(--accent); }
+
+/* ---------- the reference peek ---------- */
+
+/* Positioned against the viewport rather than a container: the anchor can be
+   a cell inside a scrolling table, and a card that scrolls with it would be
+   half under the header by the time it was read. It is dismissed on scroll
+   instead, which is the honest answer to "the thing you were pointing at has
+   moved". */
+.peek {
+  position: fixed; z-index: 90;
+  min-width: 15rem; max-width: 26rem;
+  padding: 8px 10px 6px;
+  background: var(--surface);
+  border: 1px solid var(--border-strong); border-radius: 8px;
+  box-shadow: 0 10px 34px rgb(0 0 0 / 0.18);
+  /* A glance, never a target. Letting the pointer reach it would mean the
+     card had to survive being hovered, and it is dismissed by the pointer
+     leaving the chip. */
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .peek { transition: opacity var(--t-hover) var(--ease-out); @starting-style { opacity: 0; } }
+}
+
+.peek-head {
+  display: flex; align-items: baseline; gap: 8px;
+  padding-bottom: 6px; margin-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+.peek-table { font: 600 12px var(--mono); color: var(--text); }
+.peek-key { font: 11px var(--mono); color: var(--text-faint); font-variant-numeric: tabular-nums; }
+
+.peek-body { display: flex; flex-direction: column; gap: 3px; }
+/* A fixed name column so the values line up: a card whose values start at a
+   different place on every line reads as a list of sentences rather than as a
+   record. */
+.peek-line { display: grid; grid-template-columns: 7.5rem 1fr; gap: 10px; align-items: baseline; }
+.peek-name { font: 10.5px var(--mono); color: var(--text-faint); }
+.peek-value {
+  font: 12px var(--mono); color: var(--text);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.peek-value.null { color: var(--text-faint); font-style: italic; }
+
+.peek-foot {
+  margin-top: 6px; padding-top: 5px;
+  border-top: 1px solid var(--border);
+  font: 10px var(--mono); text-transform: uppercase; letter-spacing: 0.06em;
+  color: var(--text-faint);
+}
+
+/* ---------- first run ----------
+
+   The screen when nothing is connected. Sized like a page of prose rather
+   than a dialog: it is the only thing on screen, it has one action, and
+   centring a 60ch column is what every other reading surface in this tool
+   already does.
+
+   The chrome is hidden rather than disabled. A query bar over no database is
+   a control that invites a keystroke and cannot answer it, and a greyed one
+   still says "this is the main thing here" on a screen where the main thing
+   is the button below. */
+body.first-run .querybar,
+body.first-run .sidebar,
+body.first-run #write-toggle,
+body.first-run #sql-toggle,
+body.first-run #search-button,
+body.first-run #more-button,
+body.first-run .conn-picker {
+  display: none;
+}
+
+/* The label still names the state, and is still the way to the manager. */
+body.first-run #db-label {
+  color: var(--text-dim);
+}
+
+.welcome {
+  max-width: 60ch;
+  margin: clamp(2rem, 9vh, 5.5rem) auto;
+  padding: 0 1.5rem 4rem;
+}
+
+.welcome h1 {
+  font-size: 1.55rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin: 0 0 0.75rem;
+}
+
+.welcome-lede {
+  color: var(--text-dim);
+  line-height: 1.6;
+  margin: 0 0 1.75rem;
+}
+
+.welcome-go {
+  font-size: 0.95rem;
+  padding: 0.6rem 1.15rem;
+}
+
+.welcome-assure {
+  margin: 1.25rem 0 0;
+  padding: 0.8rem 0.95rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  color: var(--text-dim);
+  font-size: 0.86rem;
+  line-height: 1.55;
+}
+
+.welcome-assure strong { color: var(--text); font-weight: 600; }
+
+.welcome-examples {
+  margin-top: 2.5rem;
+  border-top: 1px solid var(--border);
+  padding-top: 1.5rem;
+}
+
+.welcome-examples h2 {
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-dim);
+  margin: 0 0 0.9rem;
+}
+
+.welcome-examples ul {
+  list-style: none;
+  margin: 0 0 1.4rem;
+  padding: 0;
+  display: grid;
+  gap: 0.45rem;
+}
+
+/* Label and target on one row, the labels aligned, so the three shapes read
+   as three of a kind rather than three sentences. */
+.welcome-examples li {
+  display: grid;
+  grid-template-columns: 11rem 1fr;
+  gap: 0.75rem;
+  align-items: baseline;
+  font-size: 0.86rem;
+}
+
+.welcome-ex-label { color: var(--text-dim); }
+
+.welcome-examples code,
+.welcome-config {
+  font-family: var(--mono);
+  font-size: 0.82rem;
+}
+
+.welcome-examples .note { line-height: 1.6; margin: 0 0 1rem; }
+
+.welcome-config {
+  margin: 0;
+  padding: 0.8rem 0.95rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  overflow-x: auto;
+  line-height: 1.5;
+}
+
+@media (max-width: 33rem) {
+  .welcome-examples li { grid-template-columns: 1fr; gap: 0.15rem; }
+}
+
+/* ---------- the tour ----------
+
+   A scrim, a ring around the thing being talked about, and a card beside it.
+   The scrim is light: this is a tool someone is trying to read, and a
+   near-black overlay makes the interface behind it unreadable at exactly the
+   moment the card is telling them to look at it. */
+/* The dim is painted by the ring's own outward shadow, not by this, so that
+   the one element being talked about is the one element at full strength. A
+   full-bleed layer with the ring on top of it tints the anchor as well —
+   which is the whole interface saying "look here" while making "here" the
+   hardest thing on screen to read.
+
+   This stays as the thing that catches a click outside. */
+.tour-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+}
+
+/* The stop with no anchor has no hole to punch, so the scrim paints it. */
+.tour-scrim.dim { background: var(--tour-veil); }
+
+:root { --tour-veil: color-mix(in srgb, var(--bg) 62%, transparent); }
+
+.tour-ring {
+  position: fixed;
+  z-index: 61;
+  border: 2px solid var(--accent);
+  border-radius: var(--radius);
+  /* Everything outside the ring, dimmed, in one shadow — which is what makes
+     the inside of it untouched. `100vmax` rather than a round number of
+     pixels so it still covers the corners of a very wide window. */
+  box-shadow: 0 0 0 100vmax var(--tour-veil);
+  pointer-events: none;
+  transition: top var(--t-popover) var(--ease-out), left var(--t-popover) var(--ease-out),
+              width var(--t-popover) var(--ease-out), height var(--t-popover) var(--ease-out);
+}
+
+.tour-card {
+  position: fixed;
+  z-index: 62;
+  width: min(23rem, calc(100vw - 2rem));
+  padding: 1rem 1.1rem 0.9rem;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 0.14);
+}
+
+.tour-step {
+  margin: 0 0 0.35rem;
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+
+.tour-title {
+  margin: 0 0 0.4rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.tour-body {
+  margin: 0;
+  font-size: 0.87rem;
+  line-height: 1.55;
+  color: var(--text-dim);
+}
+
+.tour-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  align-items: center;
+}
+
+/* Skip sits away from the two that move through the tour, so "leave" is never
+   the button next to the one the hand is already on. */
+.tour-skip { margin-right: auto; }
+
+.tour-actions button { font-size: 0.83rem; padding: 0.35rem 0.8rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .tour-ring { transition: none; }
+}
+
+/* The example query on the stop that explains the bar. Its own line, because
+   it is the thing to be typed rather than part of the sentence around it. */
+.tour-code {
+  display: block;
+  margin: 0 0 0.55rem;
+  padding: 0.4rem 0.55rem;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: var(--mono);
+  font-size: 0.79rem;
+  color: var(--text);
+  /* Wrapped rather than scrolled. A horizontal scrollbar inside a 23rem card
+     hides the end of the one line the reader is being asked to copy, and a
+     query reads perfectly well over two lines. */
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Connections that exist and would not open, on the screen you land on when
+   none of them did. The screen used to say "nothing connected" over a list of
+   things that were configured and broken, and offer adding another as the
+   only move — when the useful move is usually to fix or remove the one that
+   failed. */
+.welcome-trouble {
+  margin: 1.25rem 0 0;
+  padding: 0.85rem 1rem;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--danger);
+  border-radius: var(--radius);
+  background: var(--surface-2);
+  font-size: 0.86rem;
+}
+
+.welcome-trouble-head { margin: 0 0 0.5rem; }
+.welcome-trouble-head strong { color: var(--text); font-weight: 600; }
+
+.welcome-trouble ul {
+  list-style: none;
+  margin: 0 0 0.8rem;
+  padding: 0;
+  display: grid;
+  gap: 0.4rem;
+}
+
+.welcome-trouble li { display: grid; gap: 0.1rem; }
+
+.welcome-trouble-name { font-family: var(--mono); font-size: 0.8rem; color: var(--text); }
+.welcome-trouble-why { color: var(--text-dim); line-height: 1.45; }

package/dist/client/findvalue.js

@@ -0,0 +1,169 @@
+/**
+ * Which table mentions this?
+ *
+ * The question you have when a string arrives from somewhere else — an id in
+ * a stack trace, a reference from a support ticket, a name in a log — and you
+ * do not yet know which table it belongs to. Every other search in this tool
+ * starts by naming a table, which is precisely what you cannot do yet.
+ *
+ * The sweep behind it is the `find` tool the MCP server already offers, run
+ * through `/api/agent/call` — the same code path an agent takes, which is
+ * what makes the two sides agree about what a match is, what is capped and
+ * what was skipped. Anything else would be a second implementation of a
+ * bounded scan, and the second one is where the caps drift apart.
+ */
+import { api, el, findTable, openRecord, trapFocus } from './core.js';
+
+let panel = null;
+/** Undoes the focus trap, and hands the keyboard back where it came from. */
+let release = null;
+
+export function openFindValue(initial = '') {
+  if (panel) return;
+  panel = el('div', {
+    class: 'conn-manager find-value',
+    role: 'dialog',
+    'aria-modal': 'true',
+    'aria-label': 'Find a value',
+  });
+  document.body.append(panel);
+  release = trapFocus(panel);
+  document.addEventListener('keydown', onKey, true);
+
+  const results = el('div', { class: 'find-results' });
+  const input = el('input', {
+    type: 'search',
+    class: 'find-input',
+    placeholder: 'A value — a name, an id, a reference…',
+    'aria-label': 'Value to look for',
+    value: initial,
+    autocomplete: 'off',
+    spellcheck: 'false',
+  });
+
+  const run = async () => {
+    const value = input.value.trim();
+    if (!value) {
+      results.replaceChildren();
+      return;
+    }
+    results.replaceChildren(el('p', { class: 'loading', text: `Looking for “${value}”…` }));
+    let answer;
+    try {
+      answer = await api('/api/agent/call', { name: 'find', arguments: { value } });
+    } catch (err) {
+      results.replaceChildren(el('p', { class: 'note', text: err.message }));
+      return;
+    }
+    if (answer.isError) {
+      results.replaceChildren(el('p', { class: 'note', text: answer.content?.[0]?.text ?? 'That search failed.' }));
+      return;
+    }
+    results.replaceChildren(...report(answer.structuredContent ?? {}, value));
+  };
+
+  let timer = 0;
+  input.addEventListener('input', () => {
+    clearTimeout(timer);
+    /* Slower than a filter box on purpose: each keystroke is a scan of every
+       table, not a filter over rows already in hand. */
+    timer = setTimeout(() => void run(), 450);
+  });
+  input.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter') return;
+    e.preventDefault();
+    clearTimeout(timer);
+    void run();
+  });
+
+  panel.replaceChildren(el('div', { class: 'conn-inner' }, [
+    el('div', { class: 'conn-head' }, [
+      el('h2', { text: 'Find a value' }),
+      el('button', { type: 'button', class: 'ghost', text: '×', 'aria-label': 'Close', onclick: close }),
+    ]),
+    el('p', { class: 'find-note', text: 'Searches the text columns of every table, and uuid columns when the value is a whole uuid. Bounded: a few rows per table, and it says where it stopped.' }),
+    input,
+    results,
+  ]));
+  input.focus();
+  if (initial) void run();
+}
+
+function close() {
+  release?.();
+  release = null;
+  panel?.remove();
+  panel = null;
+  document.removeEventListener('keydown', onKey, true);
+}
+
+function onKey(e) {
+  if (e.key !== 'Escape' || !panel) return;
+  e.preventDefault();
+  close();
+}
+
+/**
+ * The answer, with everything the sweep is honest about kept.
+ *
+ * An empty result is only "not in this database" when nothing failed and
+ * nothing stopped it early, and the panel says which of those it was —
+ * dropping that would make the UI claim something the tool deliberately does
+ * not.
+ */
+function report(answer, value) {
+  const matches = answer.matches ?? [];
+  const parts = [];
+
+  if (!matches.length) {
+    parts.push(el('p', { class: 'note', text: `Nothing in ${answer.searched ?? 0} tables holds “${value}”.` }));
+  }
+
+  const byTable = new Map();
+  for (const match of matches) {
+    const list = byTable.get(match.table) ?? [];
+    list.push(match);
+    byTable.set(match.table, list);
+  }
+
+  for (const [tableId, found] of byTable) {
+    const table = findTable(tableId);
+    parts.push(el('div', { class: 'find-group' }, [
+      el('h3', { class: 'find-group-head' }, [
+        el('span', { text: table?.name ?? tableId }),
+        el('span', { class: 'find-count', text: `${found.length}${answer.moreIn?.includes(tableId) ? '+' : ''}` }),
+      ]),
+      ...found.map((match) => el('button', {
+        type: 'button',
+        class: 'find-hit',
+        /* The key is what makes a match walkable; without one there is
+           nothing to open, so it reads rather than pretends to be a link. */
+        disabled: !match.key,
+        title: match.key ? `Open ${tableId}` : 'This table has no key to open a row by',
+        onclick: () => {
+          close();
+          void openRecord(tableId, match.key, Object.values(match.values ?? {})[0] ?? String(Object.values(match.key)[0]));
+        },
+      }, [
+        el('span', { class: 'find-hit-columns', text: (match.columns ?? []).join(', ') }),
+        el('span', { class: 'find-hit-value', text: Object.values(match.values ?? {}).join(' · ') }),
+      ])),
+    ]));
+  }
+
+  /* What the sweep could not do. Said whether or not anything was found: a
+     failed table is the difference between "not here" and "not looked". */
+  if (answer.failed?.length) {
+    parts.push(el('p', { class: 'note find-warn' }, [
+      el('strong', { text: `${answer.failed.length} table${answer.failed.length === 1 ? '' : 's'} could not be searched: ` }),
+      el('span', { text: answer.failed.map((f) => f.table).join(', ') }),
+    ]));
+  }
+  if (answer.stopped) {
+    parts.push(el('p', {
+      class: 'note find-warn',
+      text: `Stopped at the ${answer.stopped}${answer.unreached ? `, with ${answer.unreached} tables unread` : ''}. Narrow the value to see the rest.`,
+    }));
+  }
+  return parts;
+}