UX-1330 - feat(sql): add SQL query workspace with Iceberg bridge

[c-julin]

Summary

Adds a SQL query workspace to Console for querying Redpanda SQL: a catalog tree, SQL editor, results view, and an Iceberg bridge wizard.

Refs: UX-1330

Changes

• New frontend/src/components/pages/sql/ module: sql-workspace, sql-editor, sql-results, catalog-tree, sql-wizard, shared sql-types
• New /sql route and react-query/api/sql data layer
• Follow-up styling passes: design tokens instead of off-token colours/ad-hoc classes, inline styles moved to classes
• Vendored redpanda-ui registry component updates and supporting dependency bumps; zod pinned to ^4.3.6

Notes

• Backend (Go) changes for SQL auth/config are intentionally excluded — they ship in a separate PR.
• Draft: screenshots and final QA to follow.

🤖 Generated with Claude Code

[c-julin]

@claude review

[github-actions]

Claude finished @c-julin's task in 2m 51s —— View job

---

Code Review — SQL query workspace with Iceberg bridge

Reviewed the diff against origin/master. This is a large, well-structured feature: the type layer, data layer, and components are cleanly separated, comments explain the why (especially the tricky overlay-layout and Oxla => notation), and test coverage is present for most modules. Nice work overall. Below are the issues I found, grouped by severity.

🐞 Bugs / correctness

1. WITH (CTE) and other valid read queries are rejected as "not allowed". In sql-workspace.tsx:459-482, gating is firstKeyword(sql) !== 'SELECT'. A perfectly valid read query like WITH t AS (SELECT …) SELECT * FROM t has first keyword WITH, so it's blocked with "Only SELECT statements are supported in this release." Same for a query wrapped in parens (SELECT …) — FIRST_KEYWORD_RE (sql.tsx:20) is anchored to ^[A-Za-z_], so a leading ( yields '' → rejected. CTEs are common in analytics SQL; this will surprise users. Consider allowing WITH (and treating it as a read) or at least documenting the limitation in the error copy. Fix this →

2. DataGrid loses column widths / scroll on bridge resolution. SuccessGrid (sql-results.tsx:291-351) calls buildColumns(cols) and buildRowKeys(run.rows) directly in render, not memoized. The grid is keyed by run.token, but when the bridge lag query resolves the workspace passes a new run object with the same token (sql-workspace.tsx:647 { ...run, bridge }), so SuccessGrid re-renders (not remounts) and hands DataGrid a fresh columns array — resetting any user column-resize. Wrap columns/rowKeys in useMemo keyed on run.columns / run.rows. Fix this →

3. Duplicate "Iceberg" badge can render twice. In catalog-tree.tsx:336-350, both the isIceberg and tiered branches render an identical <Badge>Iceberg</Badge>. They're only mutually exclusive via catalog.engine; a Redpanda-catalog table with table.iceberg === true and a tiered backing topic would show two identical badges. Worth collapsing to a single computed flag.

⚡ Performance

4. N+1 topic-config requests in the catalog tree. Each TableRow calls useTopicIcebergQuery(table.topicName) (catalog-tree.tsx:302), firing a separate GetTopicConfigurations request per table just to decide whether to show the "Iceberg" badge — up to CAT_LIMIT (20) parallel requests per expanded namespace, and more as you load/expand. For clusters with many topic-backed tables this is a lot of chatter. Consider deriving the tiered flag from the already-fetched ListTables/topic list, or batching, or only fetching on hover/expand. Worth confirming this is acceptable for the target cluster sizes.

🔒 Minor / data-handling

5. CSV export is open to formula injection. exportData (sql-results.tsx:207-231) quotes values containing " , \n but doesn't neutralize cells beginning with = + - @. When opened in Excel/Sheets those are interpreted as formulas. Low risk for a SQL result viewer, but easy to harden by prefixing such cells with a '.

6. Dead mode param. SqlEditor.onRun is typed (sql, mode: RunMode) (sql-editor.tsx:55) and distinguishes selection vs whole-tab runs, but the workspace's doRun(sql) (sql-workspace.tsx:456) ignores mode. Either drop the param or wire it through if it's meant to matter later.

♿ Accessibility

7. Tree isn't a single tab stop. handleTreeKeyDown (catalog-tree.tsx:144-191) implements arrow-key roving correctly, but the treeitem buttons keep their default tabIndex=0, so Tab steps through every row instead of entering the tree once and roving with arrows (the WAI-ARIA tree pattern). Consider roving tabIndex (active row 0, rest -1).

✅ Things I liked / verified

• Token-based stale-run guard (RUN_TOKEN) correctly drops out-of-order responses.
• useInvalidateSqlCatalog after CREATE, and the takenTopics exclusion in the wizard, are correct.
• The duplicate ListTables for the Redpanda catalog (workspace + CatalogNode) dedupes via the Connect-Query cache key — no double fetch.
• localStorage access is consistently guarded and try/catch-wrapped.
• Env/feature gating (route-utils.tsx:262) cleanly splits embedded (enableSqlInConsole) vs standalone (REDPANDA_SQL).

Notes

• I reviewed statically; I did not run bun run type:check / lint / test in this environment. Recommend confirming the full suite per AGENTS.md before merge.
• Backend Go changes are out of scope per the PR description.

_{None of the above is blocking on its own, but #1 (CTE rejection) and #4 (N+1 requests) are worth addressing before this ships widely.}
· branch jc/sql-bridge-query

[c-julin]

@claude review

[github-actions]

Claude finished @c-julin's task in 2m 33s —— View job

---

Code Review — SQL query workspace with Iceberg bridge (round 2)

Re-reviewed against origin/master after the fix(sql): address PR review feedback commit. First, the previous round is genuinely resolved — verified each:

Prior item	Status
#1 WITH/CTE rejected	✅ isReadQuery now allows SELECT+WITH; firstKeyword strips leading parens/comments (sql.tsx:21-35)
#2 DataGrid resets widths on bridge resolve	✅ columns/rowKeys memoized (sql-results.tsx:302-303)
#3 Duplicate Iceberg badge	✅ single isIceberg || tiered flag (catalog-tree.tsx:350)
#4 N+1 topic-config requests	✅ useTopicIcebergQuery gated on row isOpen (catalog-tree.tsx:314-316)
#5 CSV formula injection	✅ CSV_FORMULA_RE neutralizes = + - @ cells (sql-results.tsx:58,221)
#6 Dead mode param	✅ onRun is now (sql: string) => void
#7 Tree single tab stop	✅ roving tabIndex via rovingId/rowTabIndex (catalog-tree.tsx:550,564)

Nice turnaround. A few fresh observations from this pass, none blocking:

🔒 Read-only gate is client-side only

isReadQuery (sql.tsx:33) checks only the first keyword, so SELECT 1; DELETE FROM cars; or any trailing statement passes the gate. That's fine as a UX affordance, but it must not be treated as the authorization boundary — the viewer/read-only enforcement has to live server-side (the Go PR). Worth a code comment making explicit that this gate is cosmetic, so nobody later mistakes it for security.

⚡ Every single-table SELECT fires 2 metric queries

In doRun, bridgeTopicForQuery(sql, completionCatalogs) (sql-workspace.tsx:463) returns a topic for any query referencing a single catalog=>table ref — including non-tiered tables (the fallback returns the table/topic name regardless of tiering, sql.tsx:60-67). That sets bridgeTopic, which enables two useExecuteInstantQuery calls (iceberg_topic_translation_lag + iceberg_topic_commit_lag) on every run, even for plain non-Iceberg tables where the series come back empty. Consider only enabling the lag queries when the referenced table is known-tiered, to avoid two observability round-trips per ordinary SELECT. Fix this →

📤 CSV export: header row isn't escaped/neutralized

exportData (sql-results.tsx:215) builds the header as cols.map((c) => c.name).join(',') with no quoting or formula-prefixing, while body cells get both. A quoted-identifier column name containing a ,, ", or newline would misalign the CSV, and one starting with = + - @ is still a formula-injection vector in the header. Run column names through the same escape/neutralize path as body cells. Fix this →

🐛 Minor: side effects inside a state updater (closeTab)

closeTab (sql-editor.tsx:455-470) calls nextTabId() (mutates a ref) and setActiveId(...) inside the setTabs updater. State updaters should be pure — under React StrictMode or concurrent rendering the updater can run twice, double-bumping the id ref and leaving id gaps / a momentary active-id mismatch. The app doesn't currently use StrictMode so it's latent, but addTab already does it the clean way (compute id first, then call setters); mirroring that in closeTab would make it robust. Fix this →

Nits

• bridgeTopicForQuery (sql.tsx:39) runs BRIDGE_REF_RE over the raw statement, so a catalog=>table pattern inside a string literal or comment would be matched. Only affects the bridge indicator, so low impact.
• The Iceberg "tiered" badge on a Redpanda-catalog table only appears once the row is expanded (consequence of the N+1 fix gating the topic-config fetch on isOpen). Reasonable trade-off; just flagging the UX behavior in case a collapsed-state badge is expected.

✅ Verified good

• Token guard (RUN_TOKEN) still correctly drops out-of-order responses.
• Overlay layout teardown / scroll-lock release on display:none (embedded host) is carefully handled.
• localStorage access consistently guarded + try/catch-wrapped (history, studio mode).
• fullscreen-routes path matching is /-segment-bounded (won't match /mysql), derived from staticData.fullscreen — single source of truth.
• Completion source correctly models Oxla's => arrow notation and rewrites a typed . to =>.

Notes

• Reviewed statically; I did not run bun run type:check / lint / test in this environment — please confirm the suite per AGENTS.md before merge.
• Backend Go changes are out of scope per the PR description.

Nothing here is blocking. The read-only-gate-is-cosmetic note and the per-SELECT double metric query are the two most worth a look.
· branch jc/sql-bridge-query

[malinskibeniamin]

Review — SQL query workspace + Iceberg bridge (#2495)

Multi-hat review (ponytail, security, resilience, regular, adversarial, visual, test-perf, thermo-nuclear) against merge-base 44fc8fe2. This is a large, well-structured feature (~4k LOC) with good test coverage on the leaf components. Inline comments cover the actionable findings; this summary holds the value gate, the open question for the backend reviewer, what was cleared, and P3/follow-ups.

Open question (sets final severity of two inline findings)

The PR notes backend SQL auth/config ships separately. Does SQLService.ExecuteQuery independently enforce (a) read-only and (b) the SQL license / enableSqlInConsole gate server-side? If yes, the /sql route guard and the SELECT-only gate are defense-in-depth/UX; if no, the client gate is the only barrier and both rise in severity.

Cleared with evidence (not issues)

• No XSS in results rendering — all cells render as React text children; no dangerouslySetInnerHTML/setHTML; CSV/JSON export goes through Blob.
• CREATE TABLE interpolation is safe — tableName is zod-validated ^[a-z_][a-z0-9_]*$; topic comes from the server topic list and Kafka topic names can't contain a quote.
• zod@^4.3.6 is pre-existing on master, not introduced here.
• routeTree.gen.ts is genuine codegen output.
• Editor outline: none is paired with a caret + active-line highlight (conventional focus indication); icon buttons' title provides a fallback accessible name — minor, not posted.

P3 / follow-ups (not posted inline)

• sql-workspace.tsx (657 LOC — the core logic: doRun gate, run-token guard, useStudioMode persistence, helpers) has no test file, while every leaf component does. Add coverage for the gate branches and cellValueForColumn/resultRowFromProto.
• The bridge lag useMemo can briefly pair the new topic name with the previous topic's lag during a topic switch (transient display inaccuracy) — gate on isFetching.
• completionCatalogs → editor extensions rebuild on every redpandaTablesData refetch (new object ref) → editor reconfiguration churn; stabilize the schema memo.
• bun.lock dropped the top-level configVersion: 0 — confirm the bun version matches CI to avoid frozen-install drift.
• catalog-tree.tsx uses biome-ignore noExcessiveCognitiveComplexity on TableRow/NamespaceNode rather than extracting sub-components.
• globals.css carries a UX-1259 dark-mode border fix inside this UX-1330 PR — note it in the description for traceability.
• A11y polish: disabled "Run selection" button has no tooltip explaining why; DataGrid and the table-specific icon buttons would benefit from explicit aria-labels.
• sqlRole defaults to viewer standalone (admin injected by cloud-ui via federation) — a one-line comment would stop it reading as missing wiring.

Value gate

Major improvement: a full SQL query workspace (catalog tree, CodeMirror editor, results grid, Iceberg bridge wizard) — net-new product capability. Value: HIGH. Steelman not needed.

Counts

Posted inline: P1 ×3, P2 ×7, P3 ×2. Plus ~8 P3/follow-ups in this summary. No P0.

🤖 Multi-hat review via Claude Code

[malinskibeniamin]

Left some comments