feat(results): drop format dropdown; add TSV view + FORMAT-clause raw passthrough

The editor toolbar's Output-format <select> (Table/TSV/JSON) overlapped the
results view switcher and was an awkward way to pick output. Remove it and make
the results view switcher the single place to choose how results render:
Table · Chart · JSON · TSV (new, client-side TabSeparatedWithNames over the
sorted rows, ClickHouse \N for nulls).

The dropdown's loved capability — "use any format in your SELECT" — is preserved
and made automatic: detectSqlFormat() spots a trailing `FORMAT …` clause and
runs the query raw, showing ClickHouse's response verbatim (CSV, Pretty,
Vertical, …) in the existing raw-text view.

Removes outputFormat state + KEYS.format + .tb-select CSS; adds Icon.tsv,
renderTsv, detectSqlFormat, and a nullText option on toTSV. 740 tests pass.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QGBS74oUsXarGkCRQKEFLu

Author: BorisTyshkevich

src/core/export.js

@@ -9,12 +9,15 @@ function cell(v) {
 /**
  * TabSeparated text: a header row of column names + one line per data row.
  * Backslashes, tabs and newlines are escaped ClickHouse-TSV style so embedded
- * whitespace can't break the column/row grid when pasted.
+ * whitespace can't break the column/row grid when pasted. `nullText` is emitted
+ * verbatim for null/undefined cells — '' (default) for Copy, or '\N' for the TSV
+ * result view so it mirrors `FORMAT TabSeparatedWithNames`.
  */
-export function toTSV(columns, rows) {
+export function toTSV(columns, rows, nullText = '') {
   const esc = (s) => s.replace(/\\/g, '\\\\').replace(/\t/g, '\\t').replace(/\n/g, '\\n').replace(/\r/g, '\\r');
+  const tsvCell = (v) => (v == null ? nullText : esc(String(v)));
   const head = columns.map((c) => esc(c.name)).join('\t');
-  const body = rows.map((row) => row.map((v) => esc(cell(v))).join('\t')).join('\n');
+  const body = rows.map((row) => row.map(tsvCell).join('\t')).join('\n');
   return rows.length ? head + '\n' + body : head;
 }
 

src/core/format.js

@@ -63,6 +63,17 @@ export function withStatementBreak(sql) {
   return s === '' || /[\s;]$/.test(s) ? s : s + '\n';
 }
 
+/**
+ * The trailing `FORMAT <Name>` clause of a query, or null. ClickHouse requires
+ * FORMAT to be the last clause, so we only match it at the end (optionally before
+ * a `;`). Lets the results panel switch to raw passthrough when the user picks an
+ * output format from their own SQL (e.g. `… FORMAT Pretty` / `FORMAT CSV`). Pure.
+ */
+export function detectSqlFormat(sql) {
+  const m = /\bFORMAT\s+([A-Za-z][A-Za-z0-9]*)\s*;?\s*$/i.exec(String(sql || ''));
+  return m ? m[1] : null;
+}
+
 /**
  * Derive a short display name for a saved query: "Query · <table>" when a
  * FROM clause is present, else the first 48 chars of the collapsed SQL.

src/state.js

@@ -12,15 +12,14 @@ export function tabChart(tab) {
   return tab && tab.chartCfg ? { cfg: cloneChartCfg(tab.chartCfg), key: tab.chartKey ?? null } : null;
 }
 
-/** Result views a saved query can remember (the raw TSV/JSON view is transient). */
-export const SAVED_VIEWS = new Set(['table', 'json', 'chart']);
+/** Result views a saved query can remember (a raw FORMAT-clause view is transient). */
+export const SAVED_VIEWS = new Set(['table', 'json', 'chart', 'tsv']);
 
 export const KEYS = {
   theme: 'asb:theme',
   sidebarPx: 'asb:sidebarPx',
   editorPct: 'asb:editorPct',
   sideSplitPct: 'asb:sideSplitPct',
-  format: 'asb:format',
   sidePanel: 'asb:sidePanel',
   saved: 'asb:saved',
   history: 'asb:history',
@@ -60,7 +59,6 @@ export function createState(read = { loadJSON, loadStr }) {
     abortController: null,
     resultView: 'table',
     resultSort: { col: null, dir: 'asc' },
-    outputFormat: read.loadStr(KEYS.format, 'Table'),
     sidePanel: read.loadStr(KEYS.sidePanel, 'saved'),
     savedQueries: read.loadJSON(KEYS.saved, []),
     history: read.loadJSON(KEYS.history, []),

src/styles.css

@@ -619,8 +619,14 @@ body {
   color: var(--fg); white-space: pre;
   background: var(--bg);
 }
+.tsv-view {
+  height: 100%; overflow: auto; padding: 12px 14px;
+  font-family: var(--mono); font-size: 11.5px;
+  color: var(--fg); white-space: pre; tab-size: 8;
+  background: var(--bg);
+}
 /* tabindex makes the pane keyboard-scrollable; suppress the focus ring. */
-.raw-text-view:focus, .json-view:focus { outline: none; }
+.raw-text-view:focus, .json-view:focus, .tsv-view:focus { outline: none; }
 
 /* ------------ chart view ------------ */
 /* `.res-body` is display:block, so height:100% (not flex:1) is what lets the
@@ -847,24 +853,6 @@ body {
 .tb-btn:hover { background: var(--bg-hover); color: var(--fg); }
 .tb-btn[disabled] { opacity: .4; cursor: not-allowed; }
 .tb-btn[disabled]:hover { background: transparent; color: var(--fg-mute); }
-.tb-select {
-  height: 26px;
-  padding: 0 26px 0 9px;
-  background-color: transparent;
-  background-repeat: no-repeat; background-position: right 8px center;
-  color: var(--fg-mute);
-  border: 1px solid var(--border);
-  border-radius: 5px;
-  font-size: 11.5px; font-family: inherit;
-  cursor: pointer; flex-shrink: 0;
-  appearance: none; -webkit-appearance: none;
-}
-[data-theme='dark'] .tb-select {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%23A0A0A8' d='M0 0h8L4 5z'/></svg>");
-}
-[data-theme='light'] .tb-select {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%2357575E' d='M0 0h8L4 5z'/></svg>");
-}
 
 /* ------------ SQL editor ------------ */
 .sql-editor {

src/ui/app.js

@@ -11,7 +11,7 @@ import {
 } from '../state.js';
 import { saveJSON, saveStr } from '../core/storage.js';
 import { decodeJwtPayload, isTokenExpired } from '../core/jwt.js';
-import { sqlString, inferQueryName, shortVersion, userShortName, withStatementBreak } from '../core/format.js';
+import { sqlString, inferQueryName, shortVersion, userShortName, withStatementBreak, detectSqlFormat } from '../core/format.js';
 import { resolveTarget } from '../core/target.js';
 import { toTSV, toCSV } from '../core/export.js';
 import { newResult, applyStreamLine } from '../core/stream.js';
@@ -378,14 +378,16 @@ export function createApp(env = {}) {
     await ensureConfig();
     if (!(await getToken())) { chCtx.onSignedOut(); return; }
 
-    const fmt = app.state.outputFormat || 'Table';
+    // Default to structured streaming (Table); if the user ends their SQL with a
+    // FORMAT clause, run raw and show ClickHouse's response verbatim (#format).
+    const fmt = detectSqlFormat(tab.sql) || 'Table';
     const t0 = now();
     tab.result = newResult(fmt);
     app.state.resultSort = { col: null, dir: 'asc' };
     // Keep the current Table/JSON/Chart tab across re-runs (#34); a saved-query
     // open passes its remembered view in opts.view to restore that instead.
     const view = opts && opts.view;
-    app.state.resultView = ['table', 'json', 'chart'].includes(view) ? view : app.state.resultView;
+    app.state.resultView = ['table', 'json', 'chart', 'tsv'].includes(view) ? view : app.state.resultView;
     app.state.running = true;
     app.state.runT0 = t0;
     app.state.runQueryId = cryptoObj.randomUUID ? cryptoObj.randomUUID() : 'q' + t0;
@@ -743,18 +745,11 @@ export function renderApp(app, helpers) {
     h('button', { class: 'new-tab', title: 'New query', onclick: () => app.actions.newTab() }, Icon.plus()));
 
   app.dom.runBtn = h('button', { class: 'run-btn', onclick: () => app.actions.run() }, Icon.play(), h('span', null, 'Run'), h('kbd', null, '⌘↵'));
-  app.dom.fmtSelect = h('select', {
-    class: 'tb-select', title: 'Output format',
-    onchange: (e) => { state.outputFormat = e.target.value; app.savePref('format', state.outputFormat); },
-  },
-    h('option', { value: 'Table', selected: state.outputFormat === 'Table' }, 'Table'),
-    h('option', { value: 'TSV', selected: state.outputFormat === 'TSV' }, 'TSV'),
-    h('option', { value: 'JSON', selected: state.outputFormat === 'JSON' }, 'JSON'));
   app.dom.fmtBtn = h('button', { class: 'tb-btn', title: 'Format SQL (⌘⇧↵)', onclick: () => app.actions.formatQuery() }, Icon.braces(), 'Format');
   app.dom.saveBtn = h('button', { class: 'tb-btn save-btn', onclick: () => app.actions.save() });
   app.dom.shareBtn = h('button', { class: 'tb-btn', title: 'Share query (copies link)', onclick: () => app.actions.share() }, Icon.share(), 'Share');
 
-  const editorToolbar = h('div', { class: 'ed-toolbar' }, app.dom.runBtn, app.dom.fmtBtn, app.dom.saveBtn, h('div', { style: { flex: '1' } }), app.dom.shareBtn, app.dom.fmtSelect);
+  const editorToolbar = h('div', { class: 'ed-toolbar' }, app.dom.runBtn, app.dom.fmtBtn, app.dom.saveBtn, h('div', { style: { flex: '1' } }), app.dom.shareBtn);
   app.dom.editorRegion = h('div', { class: 'editor-region', style: { height: state.editorPct + '%', minHeight: '0', overflow: 'hidden', flexShrink: '0' } });
   app.dom.resultsRegion = h('div', { class: 'results-region', style: { flex: '1', minHeight: '0', overflow: 'hidden' } });
   app.dom.editorResultsSplit = h('div', { class: 'row-resize', onmousedown: (e) => helpers.startDrag(e, 'row', dragCtx) });

src/ui/icons.js

@@ -59,6 +59,7 @@ export const Icon = {
   chart: () => svg('M2 10V7M5 10V4M8 10V6M11 10V2', 12, 12),
   json: () => svg('M4 1.5C2.5 1.5 2.5 3 2.5 4S2.5 5 1.5 6c1 1 1 2 1 2s0 1.5 1.5 1.5M8 1.5c1.5 0 1.5 1.5 1.5 2.5s0 1 1 2c-1 1-1 2-1 2s0 1.5-1.5 1.5', 12, 12),
   table2: () => iconEl('<rect x="1.5" y="2" width="9" height="8" rx=".5"/><path d="M1.5 4.5h9M1.5 7h9M4.5 4.5v5"/>', 12, 12),
+  tsv: () => svg('M2 3h8M2 6h8M2 9h8M5 2.5v7', 12, 12, { stroke: 1.3 }),
   shortcuts: () => iconEl('<rect x="1.5" y="3" width="9" height="6" rx="1"/><path d="M3.5 5h.01M6 5h.01M8.5 5h.01M3.5 7h5"/>', 12, 12, 1.3),
   copy: () => iconEl('<rect x="3.5" y="3.5" width="7" height="7" rx="1"/><path d="M2 8.5V2.5a1 1 0 0 1 1-1h6"/>', 12, 12),
   download: () => iconEl('<path d="M6 1.5v6.5M3.5 5.5L6 8l2.5-2.5"/><path d="M2 10h8"/>', 12, 12),

src/ui/results.js

@@ -7,6 +7,7 @@ import { Icon } from './icons.js';
 import { formatRows, formatBytes, isNumericType } from '../core/format.js';
 import { looksLikeHtml, prettyValue } from '../core/cell.js';
 import { sortRows } from '../core/sort.js';
+import { toTSV } from '../core/export.js';
 import { autoChart, schemaKey, chartFieldOptions, chartColors, chartJsConfig, chartCfgValid, normalizeChartCfg, unzoomChartEvent, CHART_ROW_CAP } from '../core/chart-data.js';
 
 const VIS_CAP = 5000;
@@ -103,6 +104,8 @@ export function renderResults(app) {
     inner.appendChild(renderJson(r));
   } else if (app.state.resultView === 'chart') {
     inner.appendChild(renderChart(app, r));
+  } else if (app.state.resultView === 'tsv') {
+    inner.appendChild(renderTsv(app, r));
   } else {
     inner.appendChild(renderTable(app, r));
   }
@@ -123,11 +126,12 @@ function buildToolbar(app, r) {
   const toolbar = h('div', { class: 'res-toolbar' });
   const tabs = h('div', { class: 'result-view-tabs' });
   const views = isRaw
-    ? [{ id: 'raw', label: r.rawFormat, icon: r.rawFormat === 'JSON' ? Icon.json() : Icon.table2() }]
+    ? [{ id: 'raw', label: r.rawFormat, icon: r.rawFormat === 'JSON' ? Icon.json() : Icon.tsv() }]
     : [
         { id: 'table', label: 'Table', icon: Icon.table2() },
         { id: 'json', label: 'JSON', icon: Icon.json() },
         { id: 'chart', label: 'Chart', icon: Icon.chart() },
+        { id: 'tsv', label: 'TSV', icon: Icon.tsv() },
       ];
   for (const v of views) {
     const isActive = app.state.resultView === v.id || (isRaw && v.id === 'raw');
@@ -184,6 +188,18 @@ export function renderJson(r) {
   return h('div', { class: 'json-view', tabindex: '0' }, JSON.stringify(arr, null, 2));
 }
 
+/**
+ * TSV view — a `<pre>` of the result as TabSeparatedWithNames, honoring the
+ * current column sort (like the table) and ClickHouse's `\N` null sentinel. A
+ * client-side approximation of `FORMAT TabSeparatedWithNames`; for an exact
+ * server format, end the query with an explicit `FORMAT …` clause (raw view).
+ */
+export function renderTsv(app, r) {
+  const { col, dir } = app.state.resultSort;
+  const rows = sortRows(r.rows, col, dir).slice(0, VIS_CAP);
+  return h('div', { class: 'tsv-view', tabindex: '0' }, toTSV(r.columns, rows, '\\N'));
+}
+
 export function renderTable(app, r) {
   const { col, dir } = app.state.resultSort;
   const rows = sortRows(r.rows, col, dir);

tests/unit/app.test.js

@@ -147,12 +147,6 @@ describe('renderApp shell', () => {
     expect(e.sessionStorage.getItem('oauth_verifier')).toBeNull();
     expect(e.sessionStorage.getItem('oauth_state')).toBeNull();
   });
-  it('changing the format select persists the choice', () => {
-    const { app } = rendered();
-    app.dom.fmtSelect.value = 'JSON';
-    app.dom.fmtSelect.dispatchEvent(new Event('change'));
-    expect(app.state.outputFormat).toBe('JSON');
-  });
   it('schema search updates the filter', () => {
     const { app } = rendered();
     app.dom.schemaSearchInput.value = 'foo';
@@ -346,14 +340,14 @@ describe('query run', () => {
     expect(app.activeTab().result.error).toContain('nope');
     expect(app.state.history.length).toBe(0);
   });
-  it('captures raw output (TSV)', async () => {
+  it('runs raw and captures the response when the SQL ends with a FORMAT clause', async () => {
     const { app } = appForRun([
       [(u, sql) => /SELECT 9/.test(sql), resp({ text: 'a\tb' })],
     ]);
-    app.state.outputFormat = 'TSV';
-    app.activeTab().sql = 'SELECT 9';
+    app.activeTab().sql = 'SELECT 9 FORMAT TabSeparatedWithNames';
     await app.actions.run();
     expect(app.activeTab().result.rawText).toBe('a\tb');
+    expect(app.activeTab().result.rawFormat).toBe('TabSeparatedWithNames'); // label for the raw tab
   });
 });
 

tests/unit/format.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import {
-  clamp, formatRows, formatBytes, timeAgo, sqlString, inferQueryName, isNumericType, shortVersion, userShortName, withStatementBreak,
+  clamp, formatRows, formatBytes, timeAgo, sqlString, inferQueryName, isNumericType, shortVersion, userShortName, withStatementBreak, detectSqlFormat,
 } from '../../src/core/format.js';
 
 describe('clamp', () => {
@@ -86,6 +86,21 @@ describe('withStatementBreak', () => {
   });
 });
 
+describe('detectSqlFormat', () => {
+  it('returns the trailing FORMAT clause name (case-insensitive keyword, allows ; and trailing ws)', () => {
+    expect(detectSqlFormat('SELECT 1 FORMAT Pretty')).toBe('Pretty');
+    expect(detectSqlFormat('SELECT * FROM t\nFORMAT JSONEachRow')).toBe('JSONEachRow');
+    expect(detectSqlFormat('select 1 format CSV')).toBe('CSV');
+    expect(detectSqlFormat('SELECT 1 FORMAT TabSeparatedWithNames ; ')).toBe('TabSeparatedWithNames');
+  });
+  it('returns null without a trailing FORMAT clause', () => {
+    expect(detectSqlFormat('SELECT 1')).toBeNull();
+    expect(detectSqlFormat("SELECT 'FORMAT JSON' AS x")).toBeNull(); // FORMAT not the trailing clause
+    expect(detectSqlFormat('')).toBeNull();
+    expect(detectSqlFormat(null)).toBeNull();
+  });
+});
+
 describe('inferQueryName', () => {
   it('uses FROM table when present', () => {
     expect(inferQueryName('SELECT * FROM system.tables')).toBe('Query · system.tables');

tests/unit/results.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { renderResults, renderJson, renderTable, renderChart, colResizeWidth, openCellDetail, installChartZoomFix } from '../../src/ui/results.js';
+import { renderResults, renderJson, renderTable, renderChart, renderTsv, colResizeWidth, openCellDetail, installChartZoomFix } from '../../src/ui/results.js';
 import { makeApp } from '../helpers/fake-app.js';
 import { newResult } from '../../src/core/stream.js';
 import { schemaKey } from '../../src/core/chart-data.js';
@@ -484,3 +484,19 @@ describe('installChartZoomFix', () => {
     expect(installChartZoomFix(null, null)).toBeNull();
   });
 });
+
+describe('renderTsv (TSV view)', () => {
+  it('renders TabSeparatedWithNames text with \\N for nulls, honoring the current sort', () => {
+    const app = appWithResult(tableResult());
+    const pre = renderTsv(app, app.activeTab().result);
+    expect(pre.className).toContain('tsv-view');
+    expect(pre.textContent).toBe('n\ts\n2\tb\n1\t\\N');
+  });
+  it('is the 4th view tab and renders through the switcher', () => {
+    const app = appWithResult(tableResult(), { resultView: 'tsv' });
+    renderResults(app);
+    const labels = [...app.dom.resultsRegion.querySelectorAll('.result-view-tab span')].map((s) => s.textContent);
+    expect(labels).toEqual(['Table', 'JSON', 'Chart', 'TSV']);
+    expect(app.dom.resultsRegion.querySelector('.tsv-view')).not.toBeNull();
+  });
+});