feat(admin): Add terminal-style SQL Shell for ClickHouse tracing

Add a new SQL Shell page to snuba-admin that provides a terminal-style
interface for executing ClickHouse queries with tracing. Features include:

- Dark terminal aesthetic with monospace font
- Shell commands: USE, SHOW STORAGES, PROFILE ON/OFF, TRACE RAW/FORMATTED
- SQL query execution with full tracing support
- Command history with up/down arrow navigation (persisted to localStorage)
- Keyboard shortcuts: Enter to execute, Ctrl+L to clear
- Query results displayed in table format with trace summaries
- Prominent link in nav bar for easy access

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: phacops

snuba/admin/static/data.tsx

@@ -4,6 +4,7 @@ import AuditLog from "SnubaAdmin/runtime_config/auditlog";
 import ClickhouseMigrations from "SnubaAdmin/clickhouse_migrations";
 import ClickhouseQueries from "SnubaAdmin/clickhouse_queries";
 import TracingQueries from "SnubaAdmin/tracing";
+import SQLShellPage from "SnubaAdmin/sql_shell";
 import SnQLToSQL from "SnubaAdmin/snql_to_sql";
 import Kafka from "SnubaAdmin/kafka";
 import QuerylogQueries from "SnubaAdmin/querylog";
@@ -63,6 +64,11 @@ const NAV_ITEMS = [
     display: "🔎 ClickHouse Tracing",
     component: TracingQueries,
   },
+  {
+    id: "sql-shell",
+    display: "💻 SQL Shell",
+    component: SQLShellPage,
+  },
   {
     id: "rpc-endpoints",
     display: "🔌 RPC Endpoints",

snuba/admin/static/nav.tsx

@@ -28,7 +28,17 @@ function Nav(props: NavProps) {
   return (
     <nav style={navStyle}>
       <ul style={ulStyle}>
-        {NAV_ITEMS.map((item) =>
+        <li key="sql-shell-featured">
+          <a
+            style={active === "sql-shell" ? { ...sqlShellLinkStyle, ...sqlShellActiveStyle } : sqlShellLinkStyle}
+            className={active === "sql-shell" ? "nav-link-active" : "nav-link"}
+            onClick={() => navigate("sql-shell")}
+          >
+            💻 SQL Shell
+          </a>
+        </li>
+        <li style={dividerStyle} />
+        {NAV_ITEMS.filter((item) => item.id !== "sql-shell").map((item) =>
           allowedTools?.includes(item.id) || allowedTools?.includes("all") ? (
             item.id === active ? (
               <li key={item.id} >
@@ -74,4 +84,24 @@ const linkStyle = {
   padding: 20,
 };
 
+const sqlShellLinkStyle = {
+  display: "block",
+  textDecoration: "none",
+  cursor: "pointer",
+  padding: "16px 20px",
+  backgroundColor: "#1a1a2e",
+  color: "#00ff00",
+  fontWeight: "bold" as const,
+  borderLeft: "3px solid #00ff00",
+};
+
+const sqlShellActiveStyle = {
+  backgroundColor: "#0f3d0f",
+};
+
+const dividerStyle = {
+  borderBottom: `1px solid ${COLORS.NAV_BORDER}`,
+  margin: "8px 0",
+};
+
 export default Nav;

snuba/admin/static/sql_shell/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Title } from "@mantine/core";
+import Client from "SnubaAdmin/api_client";
+import SQLShell from "SnubaAdmin/sql_shell/shell";
+
+interface SQLShellPageProps {
+  api: Client;
+}
+
+function SQLShellPage({ api }: SQLShellPageProps) {
+  return (
+    <div>
+      <Title order={2} style={{ marginBottom: "16px" }}>
+        SQL Shell - ClickHouse Tracing
+      </Title>
+      <SQLShell api={api} />
+    </div>
+  );
+}
+
+export default SQLShellPage;