Hi

\",\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport {\n parseProject,\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\"\nurls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's _extremely importing_ to note that `parseProject` and other\nStandard Library utilities ONLY RUN ON THE SERVER. If you need access to this\ndata on the client, run it in the server and pass it to the client by splicing\nit into the HTML page or by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use\n `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})`\n instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode\n symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use:\n `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys)\n unless otherwise specified\n- **View Source:** Add a view source link by importing & using\n `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the\n client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add\n `` to HTML to capture\n client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local\n resolution; Avoid catches that merely log or return 500s. Let errors bubble up\n with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but\n generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure\n compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer\n simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with\n `?deps=react@18.2.0,react-dom@18.2.0` and start the file with\n `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same\n version\n- **Styling:** Default to using TailwindCSS via\n `` unless otherwise\n specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project\n files:\n ```ts\n import {\n readFile,\n serveFile,\n } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n\n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to\n see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:**\n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of\n React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with\n `export default app.fetch // This is the entry point for HTTP vals`",[],[279],"66a1c2b6-eb1e-11f0-bb15-42dde27851f2",".vtignore","019b942e-5d52-736e-b2a7-1a0e8c4fe56d",["D",1767717625107],".git\n.vscode\n.cursor\n.DS_Store\nnode_modules\nvendor",[],[286],"66a1bf00-eb1e-11f0-bb15-42dde27851f2",".gitignore","019b942e-5d52-736e-b2a7-14dc92d081f7",["D",1767717625107],"# dependencies (bun install)\nnode_modules\n\n# output\nout\ndist\n*.tgz\n\n# code coverage\ncoverage\n*.lcov\n\n# logs\nlogs\n_.log\nreport.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json\n\n# dotenv environment variable files\n.env\n.env.development.local\n.env.test.local\n.env.production.local\n.env.local\n\n# caches\n.eslintcache\n.cache\n*.tsbuildinfo\n\n# IntelliJ based IDEs\n.idea\n\n# Finder (MacOS) folder config\n.DS_Store\n",[],[293],["D",1767717625107],[],[18,75],["D",1767717625107],[],[18,87],["D",1767717625107],[],[18,92],["D",1767717625107],[231,232,233],[18],"66a1a4b6-eb1e-11f0-bb15-42dde27851f2","main.tsx","019b942e-5d52-736e-b2a6-fd1580ba7657","019b942e-5d52-736e-b2a7-01d0de27a2ee",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\nimport ReactDOM from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./App.tsx\";\nimport { ErrorBoundary } from \"./components/ErrorBoundary.tsx\";\n\nconst root = document.getElementById(\"root\");\n\nif (root) {\n ReactDOM.createRoot(root).render(\n \n \n \n \n ,\n );\n} else {\n // Show error to user\n document.body.innerHTML =\n '

Failed to initialize application: Root element not found

';\n}\n",[],[319,312],"frontend","66a198b8-eb1e-11f0-bb15-42dde27851f2","index.html","019b942e-5d52-736e-b2a6-fb8a4a2cc15a",["D",1767717625107],"\n\n\n \n \n SQLite Explorer\n\n \n \n \n \n\n \n \n \n\n \n \n\n\n

\n \n\n\n",[],[319,321],"66a17d74-eb1e-11f0-bb15-42dde27851f2","App.tsx","019b942e-5d52-736e-b2a6-f450033513f3",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { QueryResult, SchemaItem } from \"../shared/types.ts\";\nimport { AppHeader } from \"./components/AppHeader.tsx\";\nimport { EditorSection } from \"./components/EditorSection.tsx\";\nimport { PaginationBar } from \"./components/PaginationBar.tsx\";\nimport { Table } from \"./components/Table.tsx\";\nimport { TablesList } from \"./components/TablesList.tsx\";\nimport { useCodeEditor } from \"./hooks/useCodeEditor.ts\";\nimport { useDownload } from \"./hooks/useDownload.ts\";\nimport { useQueryExecution } from \"./hooks/useQueryExecution.ts\";\nimport { useTableSelection } from \"./hooks/useTableSelection.ts\";\n\nexport function App() {\n const [tables, setTables] = useState([]);\n const [selectedTable, setSelectedTable] = useState(null);\n const [isLoadingSchema, setIsLoadingSchema] = useState(true);\n const [isAuthenticated, setIsAuthenticated] = useState(true);\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n const [currentPage, setCurrentPage] = useState(1);\n\n const { code, setCode, getActiveStatement, editorRef } = useCodeEditor();\n const { result, error, isLoading, executeQuery } = useQueryExecution();\n const { saveQuery } = useTableSelection(selectedTable, setCode);\n const { downloadQuery } = useDownload();\n\n useEffect(() => {\n setCurrentPage(1);\n }, [result]);\n\n useEffect(() => {\n const loadSchema = async () => {\n try {\n const response = await fetch(\"/api/schema\");\n if (response.status === 401) {\n setIsAuthenticated(false);\n return;\n }\n const data = await response.json();\n const allItems = [...data.tables, ...data.views];\n setTables(allItems);\n setIsAuthenticated(true);\n } catch (_err) {\n setTables([]);\n } finally {\n setIsLoadingSchema(false);\n }\n };\n\n loadSchema();\n }, []);\n\n useEffect(() => {\n const handleResize = () => {\n if (window.innerWidth < 1024) {\n setIsSidebarOpen(false);\n } else {\n setIsSidebarOpen(true);\n }\n };\n handleResize();\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n const handleRun = () => {\n const statement = getActiveStatement();\n if (statement) {\n executeQuery(statement);\n if (selectedTable) {\n saveQuery(selectedTable, statement);\n }\n }\n };\n\n const handleDownloadJSON = async () => {\n const statement = getActiveStatement();\n if (statement) {\n await downloadQuery(statement, \"json\");\n }\n };\n\n const handleDownloadCSV = async () => {\n const statement = getActiveStatement();\n if (statement) {\n await downloadQuery(statement, \"csv\");\n }\n };\n\n if (!isAuthenticated) {\n return (\n

\n \n

\n Please log in to access the SQLite Explorer\n

\n \n Login with Val Town\n \n

\n );\n }\n\n return (\n

\n setIsSidebarOpen((prev) => !prev)}\n actions={\n \n Logout\n \n }\n />\n

\n {/* Sidebar */}\n {isSidebarOpen && (\n

\n {isLoadingSchema ? (\n

\n Loading schema...\n

\n ) : (\n \n )}\n

\n )}\n\n

\n \n

\n\n \n\n

\n {error && (\n

\n {error}\n

\n )}\n {result && (\n \n )}\n {!error && !result && (\n

\n Run a query to see results here\n

\n )}\n

\n );\n}\n",[],[319,328],"66a17432-eb1e-11f0-bb15-42dde27851f2","useTableSelection.ts","019b942e-5d52-736e-b2a6-ec49ef71d516","019b942e-5d52-736e-b2a6-f1c5c1050bac",["D",1767717625107],"import { useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { generateDefaultQuery } from \"../../shared/sqlHelpers.ts\";\n\n/**\n * Custom hook for managing table selection and query persistence\n */\nexport function useTableSelection(\n selectedTable: string | null,\n onCodeChange: (code: string) => void,\n) {\n useEffect(() => {\n if (!selectedTable) return;\n\n // Try to load saved query from localStorage\n const savedQuery = localStorage.getItem(`saved-${selectedTable}`);\n\n if (savedQuery) {\n onCodeChange(savedQuery);\n } else {\n // Generate default SELECT query\n const defaultQuery = generateDefaultQuery(selectedTable, \"table\");\n onCodeChange(defaultQuery);\n }\n }, [selectedTable, onCodeChange]);\n\n // Save query to localStorage when it changes\n const saveQuery = (tableName: string, query: string) => {\n if (tableName && query.trim()) {\n localStorage.setItem(`saved-${tableName}`, query);\n }\n };\n\n return { saveQuery };\n}\n",[],[319,342,335],"hooks","66a16be0-eb1e-11f0-bb15-42dde27851f2","useQueryExecution.ts","019b942e-5d52-736e-b2a6-ebc277f6c0c3",["D",1767717625107],"import { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { QueryResult } from \"../../shared/types.ts\";\n\ninterface UseQueryExecutionResult {\n result: QueryResult | null;\n error: string | null;\n isLoading: boolean;\n executeQuery: (query: string) => Promise;\n clearResults: () => void;\n}\n\n/**\n * Custom hook for executing SQL queries\n */\nexport function useQueryExecution(): UseQueryExecutionResult {\n const [result, setResult] = useState(null);\n const [error, setError] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n\n const executeQuery = async (query: string) => {\n if (!query.trim()) {\n setError(\"Query cannot be empty\");\n return;\n }\n\n setIsLoading(true);\n setError(null);\n setResult(null);\n\n try {\n const response = await fetch(\"/api/query\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ query }),\n });\n\n // Handle authentication errors\n if (response.status === 401) {\n window.location.href = \"/auth/login\";\n return;\n }\n\n const data = await response.json();\n\n if (data.success) {\n setResult(data.data);\n } else {\n setError(data.error || \"Query failed\");\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : \"Unknown error occurred\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearResults = () => {\n setResult(null);\n setError(null);\n };\n\n return {\n result,\n error,\n isLoading,\n executeQuery,\n clearResults,\n };\n}\n",[],[319,342,344],"66a165dc-eb1e-11f0-bb15-42dde27851f2","useDownload.ts","019b942e-5d52-736e-b2a6-e4c4f3cb5d21",["D",1767717625107],"import { useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { getErrorMessage } from \"../../shared/types.ts\";\n\ntype DownloadFormat = \"csv\" | \"json\";\n\n/**\n * Custom hook for downloading query results\n */\nexport function useDownload() {\n const downloadQuery = useCallback(\n async (query: string, format: DownloadFormat) => {\n if (!query.trim()) {\n throw new Error(\"Cannot download: query is empty\");\n }\n\n try {\n const encodedQuery = encodeURIComponent(query);\n const url = `/api/download/${format}?query=${encodedQuery}`;\n\n // Trigger download by creating a temporary link\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = `results.${format}`;\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n } catch (err) {\n // Re-throw with a formatted error message\n throw new Error(\n `Failed to download ${format}: ${getErrorMessage(err)}`,\n );\n }\n },\n [],\n );\n\n return { downloadQuery };\n}\n",[],[319,342,351],"66a15e98-eb1e-11f0-bb15-42dde27851f2","useCodeEditor.ts","019b942e-5d52-736e-b2a6-e1e4848b3a47",["D",1767717625107],"import type { ReactCodeMirrorRef } from \"https://esm.sh/@uiw/react-codemirror@4.21.21?deps=react@18.2.0\";\nimport { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { getStatementAtPosition } from \"../../shared/sqlHelpers.ts\";\n\ninterface UseCodeEditorResult {\n code: string;\n setCode: (code: string) => void;\n getActiveStatement: () => string;\n editorRef: React.MutableRefObject;\n}\n\n/**\n * Custom hook for managing code editor state and extracting SQL statements\n */\nexport function useCodeEditor(): UseCodeEditorResult {\n const [code, setCode] = useState(\"\");\n const editorRef = useRef(null);\n\n /**\n * Get the SQL statement at the current cursor position\n * Falls back to entire code if cursor position can't be determined\n */\n const getActiveStatement = useCallback((): string => {\n if (!code.trim()) return \"\";\n\n try {\n // Try to get cursor position from CodeMirror editor\n const editor = editorRef.current;\n if (editor?.view?.state) {\n const cursorPosition = editor.view.state.selection.main.head;\n const statement = getStatementAtPosition(code, cursorPosition);\n return statement || code;\n }\n } catch (err) {\n console.error(\"Error getting cursor position:\", err);\n }\n\n // Fallback to entire code if cursor position unavailable\n return code;\n }, [code]);\n\n return {\n code,\n setCode,\n getActiveStatement,\n editorRef,\n };\n}\n",[],[319,342,358],"66a17a4a-eb1e-11f0-bb15-42dde27851f2",["D",1767717625107],[223,224,225,226],[319,342],"66a1507e-eb1e-11f0-bb15-42dde27851f2","ThemeToggle.tsx","019b942e-5d52-736e-b2a6-db238b20bfd3","019b942e-5d52-736e-b2a6-def8940f8f86",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function ThemeToggle() {\n const [isDark, setIsDark] = useState(false);\n\n // Initialize theme from localStorage or system preference\n useEffect(() => {\n const stored = localStorage.getItem(\"theme\");\n const prefersDark = window.matchMedia(\n \"(prefers-color-scheme: dark)\",\n ).matches;\n const shouldBeDark = stored === \"dark\" || (!stored && prefersDark);\n\n setIsDark(shouldBeDark);\n document.documentElement.classList.toggle(\"dark\", shouldBeDark);\n }, []);\n\n const toggleTheme = () => {\n const newIsDark = !isDark;\n setIsDark(newIsDark);\n document.documentElement.classList.toggle(\"dark\", newIsDark);\n localStorage.setItem(\"theme\", newIsDark ? \"dark\" : \"light\");\n };\n\n return (\n \n {isDark ? (\n \n Dark mode\n \n \n ) : (\n \n Light mode\n \n \n )}\n \n );\n}\n",[],[319,376,369],"components","66a13fda-eb1e-11f0-bb15-42dde27851f2","TablesList.tsx","019b942e-5d52-736e-b2a6-d7c6739d6a99",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { SchemaItem } from \"../../shared/types.ts\";\nimport { SearchSVG, TableSVG, ViewSVG } from \"./Icons.tsx\";\n\ninterface TablesListProps {\n tables: SchemaItem[];\n selectedTable: string | null;\n onTableSelect: (name: string) => void;\n}\n\nexport function TablesList({\n tables,\n selectedTable,\n onTableSelect,\n}: TablesListProps) {\n const [filter, setFilter] = useState(\"\");\n\n const handleClick = (name: string) => {\n // Toggle selection: if already selected, deselect it\n if (selectedTable === name) {\n onTableSelect(\"\");\n } else {\n onTableSelect(name);\n }\n };\n\n // Filter tables based on the filter text\n const filteredTables = tables.filter((item) =>\n item.name.toLowerCase().includes(filter.toLowerCase()),\n );\n\n return (\n

\n {/* Filter input */}\n

\n \n

\n setFilter(e.target.value)}\n placeholder=\"Filter tables...\"\n className=\"w-full pl-9 pr-3 py-1.5 text-sm rounded-lg border border-sand-300 dark:border-slate-600 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-warm-500 dark:focus:ring-warm-600 focus:border-transparent\"\n />\n

\n {filter && (\n

\n {filteredTables.length} of {tables.length} table\n {tables.length !== 1 ? \"s\" : \"\"}\n

\n )}\n

\n\n {/* Tables list */}\n

\n {filteredTables.map((item) => {\n const isSelected = selectedTable === item.name;\n\n return (\n handleClick(item.name)}\n className={`\n w-full flex items-center gap-2 px-3 py-1 rounded-lg text-left\n font-medium text-sm transition-all duration-200\n ${\n isSelected\n ? \"bg-warm-100 dark:bg-warm-900/30 text-warm-800 dark:text-warm-300 shadow-sm\"\n : \"text-slate-700 dark:text-slate-300 hover:bg-sand-200 dark:hover:bg-slate-700\"\n }\n `}\n >\n \n {item.type === \"table\" ? : }\n \n {item.name}\n \n );\n })}\n

\n );\n}\n",[],[319,376,378],"66a13350-eb1e-11f0-bb15-42dde27851f2","Table.tsx","019b942e-5d52-736e-b2a6-d031b296980f",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport type { SQLValue } from \"../../shared/types.ts\";\n\nexport const PAGE_SIZE = 100;\n\ninterface TableProps {\n headers: string[];\n rows: SQLValue[][];\n currentPage: number;\n}\n\nexport function Table({ headers, rows, currentPage }: TableProps) {\n // Calculate pagination\n const startIndex = (currentPage - 1) * PAGE_SIZE;\n const endIndex = startIndex + PAGE_SIZE;\n const paginatedRows = useMemo(\n () => rows.slice(startIndex, endIndex),\n [rows, startIndex, endIndex],\n );\n const createRows = (rows: SQLValue[][], headers: string[]) => {\n // Check if all rows are empty\n if (rows.every((subArray) => subArray.length === 0)) {\n const emptyRow = headers.map((header, index) => (\n \n {header}\n \n ));\n\n return {emptyRow};\n }\n\n return rows.map((row, rowIndex) => (\n \n {row.map((cell, cellIndex) => (\n \n {cell !== null && cell !== undefined ? (\n String(cell)\n ) : (\n \n null\n \n )}\n \n ))}\n \n ));\n };\n\n const tableRows = createRows(paginatedRows, headers);\n\n return (\n \n \n \n {headers.map((header, index) => (\n \n {header}\n \n ))}\n \n \n {tableRows}\n

\n );\n}\n",[],[319,376,385],"66a1250e-eb1e-11f0-bb15-42dde27851f2","PaginationBar.tsx","019b942e-5d52-736e-b2a6-cf8f67cda554",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type React from \"https://esm.sh/react@18.2.0\";\nimport type { QueryResult } from \"../../shared/types.ts\";\nimport { FirstSVG, LastSVG, NextSVG, PreviousSVG } from \"./Icons.tsx\";\nimport { PAGE_SIZE } from \"./Table.tsx\";\n\ninterface PaginationBarProps {\n currentPage: number;\n result: QueryResult;\n setCurrentPage: (value: React.SetStateAction) => void;\n}\n\ninterface PageButtonProps {\n icon: React.ReactNode;\n onClick: () => void;\n disabled: boolean;\n}\n\nconst PageButton = ({ icon, onClick, disabled }: PageButtonProps) => (\n \n {icon}\n \n);\n\nexport function PaginationBar({\n currentPage,\n result,\n setCurrentPage,\n}: PaginationBarProps) {\n return (\n result &&\n result.rows.length > PAGE_SIZE && (\n

\n Showing {(currentPage - 1) * PAGE_SIZE + 1} to{\" \"}\n {Math.min(currentPage * PAGE_SIZE, result.rows.length)} of{\" \"}\n {result.rows.length} rows\n

\n setCurrentPage(1)}\n disabled={currentPage === 1}\n icon={}\n />\n setCurrentPage((p) => Math.max(1, p - 1))}\n disabled={currentPage === 1}\n icon={}\n />\n \n Page {currentPage} / {Math.ceil(result.rows.length / PAGE_SIZE)}\n \n \n setCurrentPage((p) =>\n Math.min(Math.ceil(result.rows.length / PAGE_SIZE), p + 1),\n )\n }\n disabled={currentPage === Math.ceil(result.rows.length / PAGE_SIZE)}\n icon={}\n />\n \n setCurrentPage(Math.ceil(result.rows.length / PAGE_SIZE))\n }\n disabled={currentPage === Math.ceil(result.rows.length / PAGE_SIZE)}\n icon={}\n />\n

\n )\n );\n}\n",[],[319,376,392],"66a11faa-eb1e-11f0-bb15-42dde27851f2","Icons.tsx","019b942e-5d52-736e-b2a6-c8aa94b79806",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport {\n ChevronLeft,\n ChevronRight,\n ChevronsLeft,\n ChevronsRight,\n Download,\n Eye,\n PanelsTopLeft,\n PanelTop,\n Play,\n Search,\n Table2,\n} from \"https://esm.sh/lucide-react@0.479.0?deps=react@18.2.0\";\n\nexport const FirstSVG = () => ;\nexport const LastSVG = () => ;\nexport const PreviousSVG = () => ;\nexport const NextSVG = () => ;\nexport const RunSVG = () => ;\nexport const TableSVG = () => ;\nexport const ViewSVG = () => ;\nexport const DownloadSVG = () => ;\nexport const SearchSVG = () => ;\nexport const SidebarSVG = ({\n isSidebarOpen,\n className = \"size-4\",\n}: {\n isSidebarOpen: boolean;\n className: string;\n}) => {\n return isSidebarOpen ? (\n \n ) : (\n \n );\n};\n",[],[319,376,399],"66a1129e-eb1e-11f0-bb15-42dde27851f2","ErrorBoundary.tsx","019b942e-5d52-736e-b2a6-c7208e1823b1",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface Props {\n children: React.ReactNode;\n fallback?: React.ReactNode;\n}\n\ninterface State {\n hasError: boolean;\n error: Error | null;\n}\n\nexport class ErrorBoundary extends React.Component {\n constructor(props: Props) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error: Error): State {\n return { hasError: true, error };\n }\n\n override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {\n // In production, you could send to error tracking service\n // For now, errors are just stored in state and displayed\n void error;\n void errorInfo;\n }\n\n override render() {\n if (this.state.hasError) {\n if (this.props.fallback) {\n return this.props.fallback;\n }\n\n return (\n

\n Something went wrong\n

\n The application encountered an unexpected error. Please try\n refreshing the page.\n

\n {this.state.error && (\n

\n Error Details\n

\n                  {this.state.error.message}\n                  {\"\\n\\n\"}\n                  {this.state.error.stack}\n

\n )}\n window.location.reload()}\n className=\"mt-4 px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white rounded-md transition-colors\"\n >\n Refresh Page\n \n

\n );\n }\n\n return this.props.children;\n }\n}\n",[],[319,376,406],"66a0fb74-eb1e-11f0-bb15-42dde27851f2","EditorSection.tsx","019b942e-5d52-736e-b2a6-c2d6b2a7e52a",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { sql } from \"https://esm.sh/@codemirror/lang-sql@6.5.4\";\nimport { EditorView } from \"https://esm.sh/@codemirror/view@6.22.0\";\nimport CodeMirror, {\n type ReactCodeMirrorRef,\n} from \"https://esm.sh/@uiw/react-codemirror@4.21.21?deps=react@18.2.0\";\nimport { useCallback, useEffect, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { DownloadSVG, RunSVG } from \"./Icons.tsx\";\n\ninterface EditorSectionProps {\n code: string;\n onCodeChange: (code: string) => void;\n onRun: () => void;\n onDownloadJSON: () => void;\n onDownloadCSV: () => void;\n isLoading: boolean;\n editorRef?: React.MutableRefObject;\n}\n\ninterface ControlButtonProps {\n icon: React.ReactNode;\n label: string;\n onClick: () => void;\n disabled?: boolean;\n}\n\nconst ControlButton = ({\n icon,\n label,\n onClick,\n disabled,\n}: ControlButtonProps) => (\n \n {icon}\n {label}\n \n);\n\nexport function EditorSection({\n code,\n onCodeChange,\n onRun,\n onDownloadJSON,\n onDownloadCSV,\n isLoading,\n editorRef,\n}: EditorSectionProps) {\n const handleChange = useCallback(\n (value: string) => {\n onCodeChange(value);\n },\n [onCodeChange],\n );\n\n // Handle Cmd+Enter keyboard shortcut\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if ((event.metaKey || event.ctrlKey) && event.key === \"Enter\") {\n event.preventDefault();\n onRun();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n };\n }, [onRun]);\n\n // Custom theme matching our warm neutral color scheme\n const theme = useMemo(() => {\n const isDark = document.documentElement.classList.contains(\"dark\");\n return EditorView.theme(\n {\n \"&\": {\n backgroundColor: isDark ? \"#1e293b\" : \"#ffffff\",\n color: isDark ? \"#e2e8f0\" : \"#334155\",\n height: \"100%\",\n },\n \".cm-scroller\": {\n overflow: \"auto\",\n height: \"100%\",\n },\n \".cm-content\": {\n caretColor: isDark ? \"#f5ca99\" : \"#d88a3f\",\n },\n \".cm-cursor, .cm-dropCursor\": {\n borderLeftColor: isDark ? \"#f5ca99\" : \"#d88a3f\",\n },\n \"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection\":\n {\n backgroundColor: isDark ? \"#334155\" : \"#f5f1ea\",\n },\n \".cm-activeLine\": {\n backgroundColor: isDark ? \"#334155\" : \"#fdfcfb\",\n },\n \".cm-gutters\": {\n backgroundColor: isDark ? \"#0f172a\" : \"#faf8f5\",\n color: isDark ? \"#64748b\" : \"#94a3b8\",\n border: \"none\",\n minHeight: \"100%\",\n },\n \".cm-activeLineGutter\": {\n backgroundColor: isDark ? \"#1e293b\" : \"#f5f1ea\",\n },\n },\n { dark: isDark },\n );\n }, []);\n\n const isDisabled = !code.trim() || isLoading;\n\n return (\n

\n \n

\n\n

\n }\n label=\"Run\"\n onClick={onRun}\n disabled={isDisabled}\n />\n }\n label=\"JSON\"\n onClick={onDownloadJSON}\n disabled={isDisabled}\n />\n }\n label=\"CSV\"\n onClick={onDownloadCSV}\n disabled={isDisabled}\n />\n\n {isLoading && (\n \n loading...\n \n )}\n

\n );\n}\n",[],[319,376,413],"66a0f1a6-eb1e-11f0-bb15-42dde27851f2","AppHeader.tsx","019b942e-5d52-736e-b2a6-be588fb2b98d",["D",1767717625107],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\nimport { SidebarSVG } from \"./Icons.tsx\";\nimport { ThemeToggle } from \"./ThemeToggle.tsx\";\n\ninterface AppHeaderProps {\n showSidebarToggle?: boolean;\n isSidebarOpen?: boolean;\n onSidebarToggle?: () => void;\n containerWidthClass?: string;\n actions?: ReactNode;\n}\n\nexport function AppHeader({\n showSidebarToggle = false,\n isSidebarOpen = true,\n onSidebarToggle,\n containerWidthClass = \"max-w-full mx-auto\",\n actions,\n}: AppHeaderProps) {\n return (\n

\n \n

\n {showSidebarToggle && (\n \n \n \n )}\n

\n SQLite Explorer\n

\n \n {actions}\n

\n \n

\n );\n}\n",[],[319,376,420],"66a15d58-eb1e-11f0-bb15-42dde27851f2",["D",1767717625107],[214,215,216,217,218,219,220,221],[319,376],"66a1a95c-eb1e-11f0-bb15-42dde27851f2",["D",1767717625107],[213,222,227,228,229],[319],"66a0d4be-eb1e-11f0-bb15-42dde27851f2","sqlite.ts","019b942e-5d52-736e-b2a6-b516fc781c35","019b942e-5d52-736e-b2a6-bb85644d4fbd",["D",1767717625107],"import { API_URL } from \"https://esm.town/v/std/API_URL\";\nimport { LibsqlError, type TransactionMode } from \"npm:@libsql/client@0.6.0\";\nimport { z } from \"npm:zod@4.1.12\";\n\n/**\n * Every Val Town account comes with its own private\n * [SQLite database](https://www.sqlite.org/) that\n * is accessible from any of your vals.\n * ([Docs ↗](https://docs.val.town/std/sqlite))\n */\nexport const sqlite = {\n /**\n * Executes a SQLite statement.\n *\n * @param {InStatement} statement - The SQLite statement to execute.\n * @param {string} accessToken - the access token for the logged in user\n * @example String query:\n * `sqlite.execute(\"SELECT 1;\")`\n * @example Query with arguments:\n * `sqlite.execute({sql: \"SELECT * from books WHERE year > ?;\", args: [2020]})`\n */\n execute,\n\n /**\n * Executes a batch of SQLite statements.\n *\n * @param {InStatement[]} statements - An array of SQLite statements to execute.\n * @param {string} accessToken - the access token for the logged in user\n * @param {TransactionMode} [mode] - The transaction mode for the batch execution.\n */\n batch,\n};\n\n// ------------\n// Functions\n// ------------\n\nasync function execute(\n statement: InStatement,\n accessToken: string,\n): Promise {\n const res = await fetch(`${API_URL}/v1/sqlite/execute`, {\n method: \"POST\",\n headers: { Authorization: `Bearer ${accessToken}` },\n body: JSON.stringify({ statement }),\n });\n if (!res.ok) {\n throw createResError(await res.text());\n }\n return res.json();\n}\n\nasync function batch(\n statements: InStatement[],\n accessToken: string,\n mode?: TransactionMode,\n): Promise {\n const res = await fetch(`${API_URL}/v1/sqlite/batch`, {\n method: \"POST\",\n headers: { Authorization: `Bearer ${accessToken}` },\n body: JSON.stringify({ statements, mode }),\n });\n if (!res.ok) {\n throw createResError(await res.text());\n }\n return res.json();\n}\n\nfunction createResError(body: string) {\n try {\n const e = zLibsqlError.parse(JSON.parse(body));\n // e.message already contains the code, and LibsqlError adds the\n // code to the beginning, so we remove it here\n const msg = e.message.replace(e.code, \"\").replace(/^:\\s+/, \"\");\n return new LibsqlError(msg, e.code, e.rawCode);\n } catch (_) {\n // Failed to parse libsql error\n }\n return new Error(body);\n}\n\n// ------------\n// Helpers\n// ------------\n\nconst zLibsqlError = z.object({\n message: z.string(),\n code: z.string(),\n rawCode: z.number().optional(),\n});\n\n// We patch these types to only support JSON values\nexport type InValue = null | string | number | boolean;\nexport type InArgs = Array | Record;\nexport type InStatement =\n | {\n /**\n * The SQL statement to execute.\n */\n sql: string;\n\n /**\n * The arguments to bind to the SQL statement.\n */\n args: InArgs;\n }\n | string;\nexport interface ResultSet {\n /** Names of columns.\n *\n * Names of columns can be defined using the `AS` keyword in SQL:\n *\n * ```sql\n * SELECT author AS author, COUNT(*) AS count FROM books GROUP BY author\n * ```\n */\n columns: Array;\n\n /** Types of columns.\n *\n * The types are currently shown for types declared in a SQL table. For\n * column types of function calls, for example, an empty string is\n * returned.\n */\n columnTypes: Array;\n\n /** Rows produced by the statement. */\n rows: Array>;\n\n /** Number of rows that were affected by an UPDATE, INSERT or DELETE operation.\n *\n * This value is not specified for other SQL statements.\n */\n rowsAffected: number;\n\n /** ROWID of the last inserted row.\n *\n * This value is not specified if the SQL statement was not an INSERT or if the table was not a ROWID\n * table.\n */\n lastInsertRowid: bigint | undefined;\n}\n",[],[442,435],"backend","66a0beac-eb1e-11f0-bb15-42dde27851f2","index.http.ts",["D",1767717625107],"http","import {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport type { SessionData } from \"https://esm.town/v/std/oauth/session.ts\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono@latest\";\nimport { sqlToCSV, sqlToJSON } from \"../shared/exportHelpers.ts\";\nimport type { QueryResponse, SchemaResponse } from \"../shared/types.ts\";\nimport { getErrorMessage } from \"../shared/types.ts\";\nimport { sqlite } from \"./sqlite.ts\";\n\ntype Variables = { session: SessionData | null };\n\nconst app = new Hono<{ Variables: Variables }>();\n\napp.onError((err, _c) => {\n throw err;\n});\n\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\napp.use(\"/api/*\", async (c, next) => {\n const session = await getOAuthUserData(c.req.raw);\n\n if (!session) return c.json({ error: \"Unauthorized. Please log in.\" }, 401);\n c.set(\"session\", session);\n await next();\n});\n\n// API Routes\n\napp.get(\"/api/schema\", async (c) => {\n try {\n const session = c.get(\"session\");\n if (!session) return c.json({ error: \"Unauthorized. Please log in.\" }, 401);\n\n const data = await sqlite.batch(\n [\n `SELECT name FROM sqlite_schema WHERE type ='table' AND name NOT LIKE 'sqlite_%';`,\n `SELECT name FROM sqlite_schema WHERE type ='view' AND name NOT LIKE 'sqlite_%';`,\n ],\n session.accessToken,\n );\n\n const tables = data[0].rows.map((row) => ({\n name: row[0] as string,\n type: \"table\" as const,\n }));\n\n const views = data[1].rows.map((row) => ({\n name: row[0] as string,\n type: \"view\" as const,\n }));\n\n const response: SchemaResponse = { tables, views };\n return c.json(response);\n } catch (err) {\n console.error(\"Error getting schema\", err);\n return c.json({ error: getErrorMessage(err) }, 500);\n }\n});\n\napp.post(\"/api/query\", async (c) => {\n try {\n const session = c.get(\"session\");\n if (!session) return c.json({ error: \"Unauthorized. Please log in.\" }, 401);\n\n const body = await c.req.json();\n const query = body.query as string;\n\n if (!query || !query.trim()) {\n return c.json({ success: false, error: \"Query is required\" }, 400);\n }\n\n const result = await sqlite.execute(query, session.accessToken);\n\n const response: QueryResponse = {\n success: true,\n data: {\n columns: result.columns,\n rows: result.rows,\n },\n };\n\n return c.json(response);\n } catch (err) {\n return c.json({\n success: false,\n error: getErrorMessage(err),\n });\n }\n});\n\napp.get(\"/api/download/csv\", async (c) => {\n try {\n const session = c.get(\"session\");\n if (!session) return c.json({ error: \"Unauthorized. Please log in.\" }, 401);\n\n const query = c.req.query(\"query\");\n\n if (!query) {\n return c.text(\"Query parameter is required\", 400);\n }\n\n const result = await sqlite.execute(query, session.accessToken);\n const csv = sqlToCSV({ columns: result.columns, rows: result.rows });\n\n return new Response(csv, {\n headers: {\n \"Content-Type\": \"text/csv\",\n \"Content-Disposition\": 'attachment; filename=\"results.csv\"',\n },\n });\n } catch (err) {\n return c.text(`Failed to download CSV: ${getErrorMessage(err)}`, 500);\n }\n});\n\napp.get(\"/api/download/json\", async (c) => {\n try {\n const session = c.get(\"session\");\n if (!session) return c.json({ error: \"Unauthorized. Please log in.\" }, 401);\n\n const query = c.req.query(\"query\");\n if (!query) return c.text(\"Query parameter is required\", 400);\n\n const result = await sqlite.execute(query, session.accessToken);\n const jsonData = sqlToJSON({\n columns: result.columns,\n rows: result.rows,\n });\n\n return Response.json(jsonData, {\n headers: {\n \"Content-Disposition\": 'attachment; filename=\"results.json\"',\n },\n });\n } catch (err) {\n return c.text(`Failed to download JSON: ${getErrorMessage(err)}`, 500);\n }\n});\n\napp.get(\"/\", async (c) => {\n try {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n } catch (err) {\n return c.text(`Error loading application: ${getErrorMessage(err)}`, 500);\n }\n});\n\nexport default oauthMiddleware({\n scopes: [\"openid\", \"offline_access\", \"profile\", \"user_rw\", \"sqlite_rw\"],\n}, app.fetch);",[],[442,444],"66a0f034-eb1e-11f0-bb15-42dde27851f2",["D",1767717625107],[210,211],[442],"66a08b1c-eb1e-11f0-bb15-42dde27851f2","settings.local.json","019b942e-5d52-736e-b2a6-a8576d2ffece","019b942e-5d52-736e-b2a6-ae7e9f86e191",["D",1767717625107],"{\n \"permissions\": {\n \"allow\": [\n \"Bash(cat:*)\",\n \"mcp__val-town__get_val_detail\",\n \"mcp__val-town__list_files\",\n \"Bash(deno check:*)\",\n \"Bash(tree:*)\",\n \"Bash(find:*)\",\n \"Bash(git add:*)\",\n \"Bash(git commit -m \\\"$(cat <<''EOF''\\nImplement critical fixes and cleanup legacy code\\n\\nCritical Improvements:\\n- Add React Error Boundary for graceful error handling\\n- Implement pagination (100 rows/page) to prevent browser freeze\\n- Enable TypeScript strict mode (noImplicitAny, strict, lock)\\n- Remove all ''any'' types, add SQLValue type for type safety\\n- Add error type guards (isError, getErrorMessage)\\n- Remove all production console.log statements\\n- Fix Hono context typing with proper UserData types\\n\\nType Safety Enhancements:\\n- Replace any[][] with SQLValue[][] throughout\\n- Add type guards for safe error handling\\n- Properly type all React hooks and components\\n- Add ''override'' modifiers for class methods\\n- Zero type errors with strict mode enabled\\n\\nPerformance & UX:\\n- Paginated table with First/Previous/Next/Last controls\\n- Shows \\\"X to Y of Z rows\\\" indicator\\n- Only displays pagination when needed (>100 rows)\\n- Better error propagation in download handlers\\n\\nCode Cleanup:\\n- Remove 3 legacy directories (scripts/, sqliteExplorerApp/, sqliteExplorerApp_DEV/)\\n- Delete 11 legacy files (HTMX scripts, duplicate CSS, old helpers)\\n- Remove .DS_Store files\\n- Clean up duplicate export helpers\\n\\nDocumentation:\\n- Add comprehensive README.md with setup, API docs, architecture\\n- Include installation, deployment, and troubleshooting guides\\n- Document project structure and development workflow\\n\\nStats: -1046 lines of legacy code, +160 lines of improvements\\nType checks: ✓ backend ✓ frontend ✓ shared\\n\\n🤖 Generated with [Claude Code](https://claude.com/claude-code)\\n\\nCo-Authored-By: Claude \\nEOF\\n)\\\")\"\n ],\n \"deny\": [],\n \"ask\": []\n }\n}\n",[],[462,455],".claude","66a0bc36-eb1e-11f0-bb15-42dde27851f2",["D",1767717625107],[208],[462],["D",1767717625107],{"_11":12,"_144":81},{"_11":12,"_140":-5,"_80":81,"_31":79,"_141":142,"_143":30},{"_39":40,"_13":16,"_33":36,"_129":96,"_130":70,"_131":132,"_133":100,"_134":135,"_136":137,"_138":14,"_139":12},"ctx",{"_52":-5,"_165":504,"_505":506,"_507":508,"_509":30,"_510":30,"_511":30,"_512":24,"_513":-5,"_514":-7,"_515":-7,"_516":26,"_517":30,"_518":30,"_519":-5,"_520":30,"_521":30,"_522":30,"_523":-5},"ENV",{"_475":476,"_477":478,"_479":16,"_480":481,"_482":483,"_484":485,"_486":487,"_488":489,"_490":491,"_492":493,"_494":495,"_496":497,"_498":499,"_500":501,"_502":503},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · shared