feat(site): wire viewerActions slot + stub /sql route

Demonstrates the new lib hook end-to-end:

- `viewerActions.tsx` — returns an `↗ SQL` link for parquet / csv /
  tsv kinds, pointing at `/sql?url=<getUrl(path)>`. Wired into the
  three FileTree mounts (MockDemo, HttpDemo, BucketBrowser).
- `SqlStub` — placeholder `/sql` route that echoes the requested URL
  inside a suggested `SELECT * FROM read_parquet(...) LIMIT 100`
  query. A real consumer would mount a DuckDB-WASM REPL here (see
  crashes' `SqlPage` for a reference impl).

Author: ryan-williams

site/src/App.tsx

@@ -4,6 +4,7 @@ import { MockDemo } from './routes/MockDemo'
 import { HttpDemo } from './routes/HttpDemo'
 import { S3Demo } from './routes/S3Demo'
 import { R2Demo } from './routes/R2Demo'
+import { SqlStub } from './routes/SqlStub'
 
 export function App() {
   return (
@@ -29,6 +30,7 @@ export function App() {
           <Route path="/s3/:slug/*" element={<S3Demo />} />
           <Route path="/r2" element={<R2Demo />} />
           <Route path="/r2/:slug/*" element={<R2Demo />} />
+          <Route path="/sql" element={<SqlStub />} />
         </Routes>
       </main>
     </>

site/src/components/BucketBrowser.tsx

@@ -15,6 +15,7 @@ import { renderJsonTree } from '../JsonTree'
 import { CsvViewer } from '../CsvViewer'
 import { NotebookViewer } from '../NotebookViewer'
 import { renderCode } from '../CodeHighlight'
+import { renderViewerActions } from '../viewerActions'
 import type { BucketEntry } from './BucketsPage'
 
 export interface BucketBrowserProps {
@@ -94,6 +95,7 @@ export function BucketBrowser({ seeds, lsKey, routeBase, buildStore }: BucketBro
         csvRenderer={CsvViewer}
         notebookRenderer={NotebookViewer}
         codeRenderer={renderCode}
+        viewerActions={renderViewerActions}
       />
     </div>
   )

site/src/routes/HttpDemo.tsx

@@ -8,6 +8,7 @@ import { renderJsonTree } from '../JsonTree'
 import { CsvViewer } from '../CsvViewer'
 import { NotebookViewer } from '../NotebookViewer'
 import { renderCode } from '../CodeHighlight'
+import { renderViewerActions } from '../viewerActions'
 
 // Default points at the deployed demo worker (CFW, multi-bucket).
 // Override via `VITE_HTTP_DEMO_BASE` (e.g. `http://localhost:8732/v1/files`
@@ -31,6 +32,7 @@ export function HttpDemo() {
         csvRenderer={CsvViewer}
         notebookRenderer={NotebookViewer}
         codeRenderer={renderCode}
+        viewerActions={renderViewerActions}
       />
       {atVirtualRoot && (
         <aside style={{ marginTop: '1em', fontSize: '0.9em', opacity: 0.85 }}>

site/src/routes/MockDemo.tsx

@@ -8,6 +8,7 @@ import { renderJsonTree } from '../JsonTree'
 import { CsvViewer } from '../CsvViewer'
 import { NotebookViewer } from '../NotebookViewer'
 import { renderCode } from '../CodeHighlight'
+import { renderViewerActions } from '../viewerActions'
 
 export function MockDemo() {
   const store = useMemo(() => MockStore(DEMO_FIXTURE, { pageSize: 100 }), [])
@@ -23,6 +24,7 @@ export function MockDemo() {
         csvRenderer={CsvViewer}
         notebookRenderer={NotebookViewer}
         codeRenderer={renderCode}
+        viewerActions={renderViewerActions}
       />
       <details style={{ marginTop: '2em', fontSize: '0.9em', opacity: 0.85 }}>
         <summary>How this works</summary>

site/src/routes/SqlStub.tsx

@@ -0,0 +1,42 @@
+/** Stub `/sql` route. Echoes the `?url=...` query param so the demo can
+ *  prove `viewerActions` wires through end-to-end. A real consumer
+ *  would mount a DuckDB-WASM REPL here (see crashes' `SqlPage` for a
+ *  reference impl). */
+import { useSearchParams } from 'react-router-dom'
+
+export function SqlStub() {
+  const [params] = useSearchParams()
+  const url = params.get('url') ?? ''
+  return (
+    <div style={{ maxWidth: 900, margin: '0 auto', padding: '1.5em' }}>
+      <h1 style={{ fontSize: '1.4em', margin: '0 0 0.3em' }}>SQL (stub)</h1>
+      <p style={{ fontSize: '0.95em', opacity: 0.8, margin: '0 0 0.8em' }}>
+        Placeholder route for the <code>viewerActions</code> demo. A real consumer would mount a
+        DuckDB-WASM REPL here and run e.g.
+      </p>
+      {url ? (
+        <pre style={{
+          background: 'rgba(127,127,127,0.08)',
+          padding: '0.6em 0.8em',
+          borderRadius: 4,
+          overflow: 'auto',
+          fontSize: '0.85em',
+          fontFamily: 'ui-monospace, monospace',
+          whiteSpace: 'pre-wrap',
+        }}>{`SELECT * FROM ${guessReader(url)}('${url}') LIMIT 100;`}</pre>
+      ) : (
+        <p style={{ opacity: 0.7 }}>No <code>?url=...</code> provided.</p>
+      )}
+      <p style={{ fontSize: '0.85em', opacity: 0.65, marginTop: '1em' }}>
+        Came from a file viewer? <a href={url} target="_blank" rel="noreferrer">open the raw file</a>.
+      </p>
+    </div>
+  )
+}
+
+function guessReader(url: string): string {
+  if (/\.parquet$|\.pqt$/i.test(url)) return 'read_parquet'
+  if (/\.csv$/i.test(url)) return 'read_csv'
+  if (/\.tsv$/i.test(url)) return 'read_csv'
+  return 'read_csv'
+}

site/src/viewerActions.tsx

@@ -0,0 +1,24 @@
+/** Demo `viewerActions` factory. Shows the slot's shape: render
+ *  consumer-specific links next to the download icon, scoped by file
+ *  kind. Here we surface an "↗ open in SQL" link for any tabular
+ *  format (parquet/csv) — wire your own DuckDB-WASM REPL behind the
+ *  `/sql` route to make it functional. */
+import { Link } from 'react-router-dom'
+import type { ViewerActionCtx } from '@rdub/file-tree/react'
+
+const linkStyle = { fontSize: '0.85em', textDecoration: 'none', opacity: 0.85 }
+
+export function renderViewerActions({ store, path, kind }: ViewerActionCtx) {
+  if (kind !== 'parquet' && kind !== 'text') return null
+  // For text we restrict to CSVs / TSVs (parquet is unconditional).
+  if (kind === 'text' && !/\.(csv|tsv)$/i.test(path)) return null
+  // Prefer the store's direct URL (the SQL page reads it via DuckDB
+  // `read_parquet` / `read_csv`); fall back to a relative path that a
+  // server-side route can resolve.
+  const url = typeof store.getUrl === 'function' ? store.getUrl(path) : path
+  return (
+    <Link to={`/sql?url=${encodeURIComponent(url)}`} title="Open in SQL REPL" style={linkStyle}>
+      ↗ SQL
+    </Link>
+  )
+}