[ { "path": ".dockerignore", "content": "# Ignore node_modules (local dependencies)\nnode_modules\n\n# Ignore build artifacts\ndist\n\n# Ignore configuration files that shouldn't be shared\n.env\n.vscode\n.idea\n\n# Ignore miscellaneous system files and logs\n.DS_Store\nnpm-debug.log\nyarn-debug.log\nyarn-error.log\npackage-lock.json\n\n# Ignore Git-specific files\n.git\n.gitignore\n\n/docs" }, { "path": ".github/ISSUE_TEMPLATE/bug.yml", "content": "name: 🐞 Bug Report\ndescription: Found something that doesn't work as expected?\nbody:\n - type: dropdown\n id: Environment\n attributes:\n label: Environment\n description: How are you using Duck-UI?\n options:\n - NPM build\n - Docker\n - Other\n validations:\n required: true\n - type: textarea\n id: repro\n attributes:\n label: How did you encounter the bug?\n description: How can this bug be reproduced? Please provide steps to reproduce.\n placeholder: |-\n 1. Run Docker container... \n 2. npm run build...\n 3. Go to...\n validations:\n required: true\n - type: textarea\n id: expected\n attributes:\n label: What did you expect?\n description: What it supposed to happen? What did you expect to see?\n validations:\n required: true\n - type: textarea\n id: actual\n attributes:\n label: Actual Result\n description: What was the accual result?\n validations:\n required: true\n - type: dropdown\n id: Browser\n attributes:\n label: Browser\n description: What browser are you using?\n options:\n - Chrome\n - Firefox\n - Edge\n - Safari\n - Brave\n - Other\n validations:\n required: true\n # browser version with instructions to check it \n - type: textarea\n id: browser-version\n attributes:\n label: Browser Version\n description: What version of the browser are you using?\n placeholder: e.g. 125.0.0\n validations:\n required: true\n - type: textarea\n id: version\n attributes:\n label: Version\n description: What version of Duck-UI are you using?\n placeholder: e.g. 1.5.0\n validations:\n required: true\n - type: markdown\n attributes:\n value: |-\n ### All done, now, just submit the issue and I will do my best to take care of it! 🙏\n validations:\n required: false\n" }, { "path": ".github/ISSUE_TEMPLATE/feature.yml", "content": "name: 💡 Feature Request\ndescription: Tell us about something Duck-UI doesn't do yet, but should!\nbody:\n - type: textarea\n id: idea\n attributes:\n label: Idea Statement\n description: Which is the feature you would like to see implemented?\n placeholder: |-\n I want to be able to do anything I want, whenever I want. Because my ideas are the best.\n validations:\n required: true\n - type: textarea\n id: expected\n attributes:\n label: Feature implementation brainstorm\n description: All your ideas are welcome, let's brainstorm together.\n placeholder: |-\n Create the next big feature that will all our problems.\n validations:\n required: false\n - type: markdown\n attributes:\n value: |-\n ## Thanks 🙏\n validations:\n required: false\n" }, { "path": ".github/workflows/2-docker-build.yml", "content": "# .github/workflows/2-docker-build.yml\nname: Build and Push Docker Image\n\non:\n push:\n branches:\n - main\n paths-ignore:\n - '**.md'\n - 'docs/**'\n pull_request:\n branches:\n - main\n paths-ignore:\n - '**.md'\n - 'docs/**'\n\njobs:\n build:\n runs-on: ubuntu-latest\n if: |\n (!contains(github.event.head_commit.message, 'docker-false') && !contains(github.event.head_commit.message, 'docs-only')) ||\n contains(github.event.head_commit.message, 'docker-only')\n permissions:\n contents: read\n packages: write\n \n steps:\n - name: Checkout repository\n uses: actions/checkout@v4\n with:\n fetch-depth: 0\n\n - name: Set up Docker Buildx\n uses: docker/setup-buildx-action@v3\n\n - name: Log in to GitHub Container Registry\n if: github.event_name != 'pull_request'\n uses: docker/login-action@v3\n with:\n registry: ghcr.io\n username: ${{ github.repository_owner }}\n password: ${{ secrets.GHCR_PAT }}\n\n - name: Extract metadata (tags, labels)\n id: meta\n uses: docker/metadata-action@v5\n with:\n images: ghcr.io/${{ github.repository }}\n tags: |\n type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}\n type=sha,format=long\n type=ref,event=pr\n\n - name: Build and push Docker image\n uses: docker/build-push-action@v5\n with:\n context: .\n platforms: linux/amd64,linux/arm64\n push: ${{ github.event_name != 'pull_request' }}\n tags: ${{ steps.meta.outputs.tags }}\n labels: ${{ steps.meta.outputs.labels }}\n cache-from: type=gha\n cache-to: type=gha,mode=max" }, { "path": ".github/workflows/ci.yml", "content": "name: CI\n\non:\n push:\n branches: [main]\n paths-ignore:\n - \"**.md\"\n - \"docs/**\"\n pull_request:\n branches: [main]\n paths-ignore:\n - \"**.md\"\n - \"docs/**\"\n\njobs:\n lint:\n name: Lint & Format\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: oven-sh/setup-bun@v2\n with:\n bun-version: latest\n - run: bun install --frozen-lockfile\n - run: bun run lint\n - run: bun run format:check\n\n typecheck:\n name: Type Check\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: oven-sh/setup-bun@v2\n with:\n bun-version: latest\n - run: bun install --frozen-lockfile\n - run: bun run typecheck\n\n test:\n name: Test\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: oven-sh/setup-bun@v2\n with:\n bun-version: latest\n - run: bun install --frozen-lockfile\n - run: bun run test\n\n build:\n name: Build\n runs-on: ubuntu-latest\n needs: [lint, typecheck, test]\n steps:\n - uses: actions/checkout@v4\n - uses: oven-sh/setup-bun@v2\n with:\n bun-version: latest\n - run: bun install --frozen-lockfile\n - run: bun run build\n - name: Upload build artifacts\n uses: actions/upload-artifact@v4\n with:\n name: dist\n path: dist/\n retention-days: 7\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\npackage-lock.json\nyarn.lock\npnpm-lock.yaml\n\n# Editor directories and files\n.vscode/*\n/vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n.env\n\npost.md\nCLAUDE.md" }, { "path": ".husky/pre-commit", "content": "bunx lint-staged\n" }, { "path": ".prettierignore", "content": "dist\nnode_modules\nbun.lockb\n*.wasm\npublic\ndocs/.vitepress/cache\ndocs/.vitepress/dist\n" }, { "path": ".prettierrc", "content": "{\n \"semi\": true,\n \"singleQuote\": false,\n \"trailingComma\": \"es5\",\n \"tabWidth\": 2,\n \"printWidth\": 100,\n \"bracketSpacing\": true,\n \"arrowParens\": \"always\",\n \"endOfLine\": \"lf\"\n}\n" }, { "path": "Dockerfile", "content": "# Use an official Node runtime as a parent image with bun\nFROM oven/bun:1-alpine AS build\n\nARG DUCK_UI_BASEPATH=\"/\"\n\n# Set the working directory\nWORKDIR /app\n\n# Copy package.json and bun.lockb (if exists)\nCOPY package.json bun.lockb* ./\n\n# Install dependencies\nRUN bun install --frozen-lockfile\n\n# Bundle app source inside Docker image\nCOPY . .\n\n# Build the app\nRUN bun run build\n\n# Use a second stage to reduce image size\nFROM oven/bun:1-alpine\n\n# Set the working directory for the second stage\nWORKDIR /app\n\n# Copy the build directory from the first stage to the second stage\nCOPY --from=build /app/dist /app\n\n# Copy the injection script and serve config (COOP/COEP headers for OPFS)\nCOPY inject-env.js /app/\nCOPY serve.json /app/\n\n# Install just serve for serving the built app\nRUN bun add serve\n\n# Expose port 5522\nEXPOSE 5522\n\n# Define environment variables\nENV DUCK_UI_EXTERNAL_CONNECTION_NAME=\"\"\nENV DUCK_UI_EXTERNAL_HOST=\"\"\nENV DUCK_UI_EXTERNAL_PORT=\"\"\nENV DUCK_UI_EXTERNAL_USER=\"\"\nENV DUCK_UI_EXTERNAL_PASS=\"\"\nENV DUCK_UI_EXTERNAL_DATABASE_NAME=\"\"\n\n# Create user and change ownership\nRUN addgroup -S duck-group -g 1001 && adduser -S duck-user -u 1001 -G duck-group\nRUN chown -R duck-user:duck-group /app\n\nUSER duck-user\n\n# Run the injection script then serve using bunx\nCMD bun inject-env.js && bunx serve -s -l 5522 -c serve.json" }, { "path": "LICENSE.md", "content": "# License\n\n## DUCK UI - Apache License 2.0\n\nCopyright 2025 Caio Ricciuti \n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n\n## What does this mean?\n\nThe Apache License 2.0 is a permissive open source license that provides users with extensive freedom to use, modify, and distribute the software, while also offering robust legal protection through its patent grant and clear contribution terms.\n\n### You are free to:\n\n- ✅ Use the software commercially\n- ✅ Modify the software\n- ✅ Distribute the software\n- ✅ Use the software for private use\n- ✅ Sublicense the software\n- ✅ Use patents claims of contributors to the code\n\n### Under the following conditions:\n\n- ℹī¸ Include the original copyright notice\n- ℹī¸ Include a copy of the license\n- ℹī¸ State significant changes made to the software\n- ℹī¸ Include the NOTICE file (if present) with attribution notes\n\n### With the understanding that:\n\n- ⚠ī¸ The software is provided \"as is\", without warranty of any kind\n- ⚠ī¸ The authors cannot be held liable for damages\n- ⚠ī¸ Trademark use is not granted except as required for describing the origin of the work\n\n## Key Benefits of Apache 2.0\n\n### Patent Protection\nUnlike simpler licenses like MIT, Apache 2.0 includes an express patent grant from contributors to users. This means that if a contributor has patents that cover their contribution, they automatically grant you a license to use those patents.\n\n### Clear Contribution Terms\nThe license explicitly states that any contributions are assumed to be under the same Apache 2.0 license unless otherwise specified, providing clarity for collaborative development.\n\n### Compatibility\nApache 2.0 is compatible with many other open source licenses and is widely accepted in both open source and commercial contexts.\n\n## Third-Party Licenses\n\nCH-UI is built on top of several open-source projects. We'd like to acknowledge and give credit to these projects:\n\n- [ClickHouse](https://github.com/ClickHouse/ClickHouse) - Apache 2.0 License\n- [React](https://github.com/facebook/react) - MIT License\n- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) - MIT License\n- [Zustand](https://github.com/pmndrs/zustand) - MIT License\n- [Monaco Editor](https://github.com/microsoft/monaco-editor) - MIT License\n- [Lucide Icons](https://github.com/lucide-icons/lucide) - ISC License\n\nFor the full text of these licenses, please visit the respective project repositories." }, { "path": "README.md", "content": "# \"Duck-UI Duck-UI\n\nDuck-UI is a web-based interface for interacting with DuckDB, a high-performance analytical database system. This project leverages DuckDB's WebAssembly (WASM) capabilities to provide a seamless and efficient user experience directly in the browser.\n\n# [Official Docs](https://duckui.com?utm_source=github&utm_medium=readme) 🚀\n# [Demo](https://demo.duckui.com?utm_source=github&utm_medium=readme) đŸ’ģ\n\n\n## Features\n\n- **SQL Editor**: Write and execute SQL queries with syntax highlighting and auto-completion.\n- **Data Import**: Import data from CSV, JSON, Parquet, and Arrow files.\n- **Data Explorer**: Browse and manage databases and tables.\n- **Query History**: View and manage your recent SQL queries.\n\n## Getting Started\n\n\n### Docker (Recommended)\n\n```bash\ndocker run -p 5522:5522 ghcr.io/caioricciuti/duck-ui:latest\n```\n\nOpen your browser and navigate to `http://localhost:5522`.\n\n### Environment Variables\n\nYou can customize Duck-UI behavior using environment variables:\n\n```bash\n# For external DuckDB connections\ndocker run -p 5522:5522 \\\n -e DUCK_UI_EXTERNAL_CONNECTION_NAME=\"My DuckDB Server\" \\\n -e DUCK_UI_EXTERNAL_HOST=\"http://duckdb-server\" \\\n -e DUCK_UI_EXTERNAL_PORT=\"8000\" \\\n -e DUCK_UI_EXTERNAL_USER=\"username\" \\\n -e DUCK_UI_EXTERNAL_PASS=\"password\" \\\n -e DUCK_UI_EXTERNAL_DATABASE_NAME=\"my_database\" \\\n -e DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS=\"true\" \\\n ghcr.io/caioricciuti/duck-ui:latest\n```\n\n| Runtime Variable | Description | Default |\n|----------|-------------|---------|\n| `DUCK_UI_EXTERNAL_CONNECTION_NAME` | Name for the external connection | \"\" |\n| `DUCK_UI_EXTERNAL_HOST` | Host URL for external DuckDB | \"\" |\n| `DUCK_UI_EXTERNAL_PORT` | Port for external DuckDB | null |\n| `DUCK_UI_EXTERNAL_USER` | Username for external connection | \"\" |\n| `DUCK_UI_EXTERNAL_PASS` | Password for external connection | \"\" |\n| `DUCK_UI_EXTERNAL_DATABASE_NAME` | Database name for external connection | \"\" |\n| `DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS` | Allow unsigned extensions in DuckDB | false |\n| `DUCK_UI_DUCKDB_WASM_USE_CDN` | Load DuckDB WASM from CDN (ignored when build-time `DUCK_UI_DUCKDB_WASM_CDN_ONLY=true`) | false |\n| `DUCK_UI_DUCKDB_WASM_BASE_URL` | Custom CDN base URL (used when `DUCK_UI_DUCKDB_WASM_USE_CDN=true`) | auto jsDelivr |\n\n| Build-time Variable | Description | Default |\n|----------|-------------|---------|\n| `DUCK_UI_DUCKDB_WASM_CDN_ONLY` | Build a CDN-only artifact (local DuckDB WASM assets are not bundled). | false |\n\nWhen `DUCK_UI_DUCKDB_WASM_CDN_ONLY=true`, runtime `DUCK_UI_DUCKDB_WASM_USE_CDN=false` cannot switch back to local WASM.\n\n\n\n### Prerequisites\n\n- Node.js >= 20.x\n- npm >= 10.x\n\n### Installation\n\n1. Clone the repository:\n\n ```bash\n git clone https://github.com/caioricciuti/duck-ui.git\n cd duck-ui\n ```\n\n2. Install dependencies:\n\n ```bash\n npm install\n # or\n yarn install\n ```\n\n### Running the Application\n\n1. Start the development server:\n\n ```bash\n npm run dev\n # or\n yarn dev\n ```\n\n2. Open your browser and navigate to `http://localhost:5173`.\n\n### Building for Production\n\nTo create a production build, run:\n\n```bash\nnpm run build\n# or\nyarn build\n```\n\nThe output will be in the `dist` directory.\n\n### Running with Docker\n\n1. Build the Docker image:\n\n ```bash\n docker build -t duck-ui .\n ```\n\n2. Run the Docker container:\n\n ```bash\n docker run -p 5522:5522 duck-ui\n ```\n\n3. Open your browser and navigate to `http://localhost:5522`.\n\n## Usage\n\n### SQL Editor\n\n- Write your SQL queries in the editor.\n- Use `Cmd/Ctrl + Enter` to execute the query.\n- View the results in the results pane.\n\n### Data Import\n\n- Click on the \"Import Files\" button to upload CSV, JSON, Parquet, or Arrow files.\n- Configure the table name and import settings.\n- For CSV files, you can customize import options:\n - Header row detection\n - Auto-detection of column types\n - Delimiter specification\n - Error handling (ignore errors, null padding for missing columns)\n- View the imported data in the Data Explorer.\n\n### Data Explorer\n\n- Browse through the databases and tables.\n- Preview table data and view table schemas.\n- Delete tables if needed.\n\n### Query History\n\n- Access your recent queries from the Query History section.\n- Copy queries to the clipboard or re-execute them.\n\n### Theme Toggle\n\n- Switch between light and dark themes using the theme toggle button.\n\n### Keyboard Shortcuts\n\n- `Cmd/Ctrl + B`: Expand/Shrink Sidebar\n- `Cmd/Ctrl + K`: Open Search Bar\n- `Cmd/Ctrl + Enter`: Run Query\n- `Cmd/Ctrl + Shift + Enter`: Run highlighted query\n\n## Contributing\n\nContributions are welcome! Please follow these steps to contribute:\n\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature/your-feature`).\n3. Commit your changes (`git commit -m 'Add some feature'`).\n4. Push to the branch (`git push origin feature/your-feature`).\n5. Open a pull request.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.\n\n## Acknowledgements\n\n- [DuckDB](https://duckdb.org/)\n- [React](https://reactjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Zustand](https://github.com/pmndrs/zustand)\n- [Lucide Icons](https://lucide.dev/)\n\n## Contact\n\nFor any inquiries or support, please contact [Caio Ricciuti](https://github.com/caioricciuti).\n\n## Sponsors\n\nThis project is sponsored by:\n\n### [Ibero Data](https://iberodata.es/) \n\"Ibero\n\n### [qxip](https://qxip.net/?utm_source=duck-ui&utm_medium=sponsorship) \n\n\"qxip\"\n\n\n\n
\n\nWant to be a sponsor? [Contact us](mailto:caio.ricciuti+sponsorship@outlook.com).\n" }, { "path": "components.json", "content": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": false,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"tailwind.config.js\",\n \"css\": \"src/index.css\",\n \"baseColor\": \"neutral\",\n \"cssVariables\": true,\n \"prefix\": \"\"\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\",\n \"ui\": \"@/components/ui\",\n \"lib\": \"@/lib\",\n \"hooks\": \"@/hooks\"\n },\n \"iconLibrary\": \"lucide\"\n}" }, { "path": "docker-compose.yml", "content": "services:\n duck-ui:\n image: ghcr.io/caioricciuti/duck-ui:latest\n restart: always\n ports:\n - \"${DUCK_UI_PORT:-5522}:5522\"\n environment:\n # External connection (optional)\n - DUCK_UI_EXTERNAL_CONNECTION_NAME=${DUCK_UI_EXTERNAL_CONNECTION_NAME:-}\n - DUCK_UI_EXTERNAL_HOST=${DUCK_UI_EXTERNAL_HOST:-}\n - DUCK_UI_EXTERNAL_PORT=${DUCK_UI_EXTERNAL_PORT:-}\n - DUCK_UI_EXTERNAL_USER=${DUCK_UI_EXTERNAL_USER:-}\n - DUCK_UI_EXTERNAL_PASS=${DUCK_UI_EXTERNAL_PASS:-}\n - DUCK_UI_EXTERNAL_DATABASE_NAME=${DUCK_UI_EXTERNAL_DATABASE_NAME:-}\n # DuckDB configuration\n - DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS=${DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS:-false}" }, { "path": "eslint.config.js", "content": "import js from '@eslint/js'\nimport globals from 'globals'\nimport reactHooks from 'eslint-plugin-react-hooks'\nimport reactRefresh from 'eslint-plugin-react-refresh'\nimport tseslint from 'typescript-eslint'\n\nexport default tseslint.config(\n { ignores: ['dist', 'docs'] },\n {\n extends: [js.configs.recommended, ...tseslint.configs.recommended],\n files: ['**/*.{ts,tsx}'],\n languageOptions: {\n ecmaVersion: 2020,\n globals: globals.browser,\n },\n plugins: {\n 'react-hooks': reactHooks,\n 'react-refresh': reactRefresh,\n },\n rules: {\n ...reactHooks.configs.recommended.rules,\n 'react-refresh/only-export-components': [\n 'warn',\n { allowConstantExport: true },\n ],\n '@typescript-eslint/no-unused-vars': [\n 'error',\n { argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' },\n ],\n },\n },\n)\n" }, { "path": "index.html", "content": "\n\n \n \n \n \n Duck UI\n \n \n
\n \n \n\n" }, { "path": "inject-env.js", "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst indexHtmlPath = path.join(__dirname, \"index.html\");\nlet indexHtmlContent = fs.readFileSync(indexHtmlPath, \"utf8\");\n\n// Inject the environment variables\nconst envVars = {\n DUCK_UI_EXTERNAL_CONNECTION_NAME:\n process.env.DUCK_UI_EXTERNAL_CONNECTION_NAME || \"\",\n DUCK_UI_EXTERNAL_HOST: process.env.DUCK_UI_EXTERNAL_HOST || \"\",\n DUCK_UI_EXTERNAL_PORT: process.env.DUCK_UI_EXTERNAL_PORT || null,\n DUCK_UI_EXTERNAL_USER: process.env.DUCK_UI_EXTERNAL_USER || \"\",\n DUCK_UI_EXTERNAL_PASS: process.env.DUCK_UI_EXTERNAL_PASS || \"\",\n DUCK_UI_EXTERNAL_DATABASE_NAME:\n process.env.DUCK_UI_EXTERNAL_DATABASE_NAME || \"\",\n // Add new configuration for DuckDB settings\n DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS:\n process.env.DUCK_UI_ALLOW_UNSIGNED_EXTENSIONS === \"true\" || false,\n DUCK_UI_DUCKDB_WASM_USE_CDN:\n process.env.DUCK_UI_DUCKDB_WASM_USE_CDN === \"true\" || false,\n DUCK_UI_DUCKDB_WASM_BASE_URL:\n process.env.DUCK_UI_DUCKDB_WASM_BASE_URL || \"\"\n};\n\nconst scriptContent = `\n\n`;\n\n// Insert the script just before the closing tag\nindexHtmlContent = indexHtmlContent.replace(\n \"\",\n `${scriptContent}`\n);\n\nfs.writeFileSync(indexHtmlPath, indexHtmlContent);\n\nconsole.log(\"Environment variables injected successfully\");\n" }, { "path": "package.json", "content": "{\n \"name\": \"duck-ui\",\n \"private\": true,\n \"version\": \"0.0.39\",\n \"release_date\": \"2026-04-13\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc -b && vite build\",\n \"lint\": \"eslint .\",\n \"format\": \"prettier --write \\\"src/**/*.{ts,tsx,css}\\\"\",\n \"format:check\": \"prettier --check \\\"src/**/*.{ts,tsx,css}\\\"\",\n \"typecheck\": \"tsc --noEmit\",\n \"preview\": \"vite preview\",\n \"test\": \"vitest run\",\n \"test:watch\": \"vitest\",\n \"prepare\": \"husky\"\n },\n \"dependencies\": {\n \"@dnd-kit/core\": \"^6.3.1\",\n \"@dnd-kit/sortable\": \"^10.0.0\",\n \"@duckdb/duckdb-wasm\": \"1.33.1-dev45.0\",\n \"@hookform/resolvers\": \"^5.2.2\",\n \"@mlc-ai/web-llm\": \"^0.2.82\",\n \"@radix-ui/react-accordion\": \"^1.2.12\",\n \"@radix-ui/react-alert-dialog\": \"^1.1.15\",\n \"@radix-ui/react-aspect-ratio\": \"^1.1.8\",\n \"@radix-ui/react-checkbox\": \"^1.3.3\",\n \"@radix-ui/react-collapsible\": \"^1.1.12\",\n \"@radix-ui/react-context-menu\": \"^2.2.16\",\n \"@radix-ui/react-dialog\": \"^1.1.15\",\n \"@radix-ui/react-dropdown-menu\": \"^2.1.16\",\n \"@radix-ui/react-hover-card\": \"^1.1.15\",\n \"@radix-ui/react-label\": \"^2.1.8\",\n \"@radix-ui/react-menubar\": \"^1.1.16\",\n \"@radix-ui/react-navigation-menu\": \"^1.2.14\",\n \"@radix-ui/react-popover\": \"^1.1.15\",\n \"@radix-ui/react-progress\": \"^1.1.8\",\n \"@radix-ui/react-radio-group\": \"^1.3.8\",\n \"@radix-ui/react-scroll-area\": \"^1.2.10\",\n \"@radix-ui/react-select\": \"^2.2.6\",\n \"@radix-ui/react-separator\": \"^1.1.8\",\n \"@radix-ui/react-slot\": \"^1.2.4\",\n \"@radix-ui/react-switch\": \"^1.2.6\",\n \"@radix-ui/react-tabs\": \"^1.1.13\",\n \"@radix-ui/react-tooltip\": \"^1.2.8\",\n \"@tailwindcss/typography\": \"^0.5.19\",\n \"@tailwindcss/vite\": \"^4.2.2\",\n \"@tanstack/react-table\": \"^8.21.3\",\n \"@tanstack/react-virtual\": \"^3.13.23\",\n \"@types/dompurify\": \"^3.2.0\",\n \"class-variance-authority\": \"^0.7.1\",\n \"clsx\": \"^2.1.1\",\n \"cmdk\": \"^1.1.1\",\n \"date-fns\": \"^4.1.0\",\n \"dompurify\": \"^3.3.3\",\n \"exceljs\": \"^4.4.0\",\n \"framer-motion\": \"^12.38.0\",\n \"html2canvas\": \"^1.4.1\",\n \"lucide-react\": \"^0.546.0\",\n \"marked\": \"^17.0.6\",\n \"monaco-editor\": \"^0.55.1\",\n \"openai\": \"^6.34.0\",\n \"papaparse\": \"^5.5.3\",\n \"react\": \"^19.2.5\",\n \"react-dom\": \"^19.2.5\",\n \"react-error-boundary\": \"^6.1.1\",\n \"react-hook-form\": \"^7.72.1\",\n \"react-markdown\": \"^10.1.0\",\n \"react-resizable-panels\": \"^3.0.6\",\n \"react-router\": \"^7.14.0\",\n \"sonner\": \"^2.0.7\",\n \"sql-formatter\": \"^15.7.3\",\n \"tailwind-merge\": \"^3.5.0\",\n \"uplot\": \"^1.6.32\",\n \"vaul\": \"^1.1.2\",\n \"zod\": \"^4.3.6\",\n \"zustand\": \"^5.0.12\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^9.39.4\",\n \"@types/node\": \"^24.12.2\",\n \"@types/papaparse\": \"^5.5.2\",\n \"@types/react\": \"^19.2.14\",\n \"@types/react-dom\": \"^19.2.3\",\n \"@vitejs/plugin-react\": \"^5.2.0\",\n \"baseline-browser-mapping\": \"^2.10.18\",\n \"esbuild\": \"^0.25.12\",\n \"eslint\": \"^9.39.4\",\n \"eslint-plugin-react-hooks\": \"^7.0.1\",\n \"eslint-plugin-react-refresh\": \"^0.4.26\",\n \"globals\": \"^16.5.0\",\n \"husky\": \"^9.1.7\",\n \"lint-staged\": \"^16.4.0\",\n \"prettier\": \"^3.8.2\",\n \"tailwindcss\": \"^4.2.2\",\n \"typescript\": \"~5.9.3\",\n \"typescript-eslint\": \"^8.58.2\",\n \"vite\": \"^7.3.2\",\n \"vitest\": \"^4.1.4\"\n },\n \"description\": \"Duck-UI is a web-based interface for interacting with DuckDB, a high-performance analytical database system. This project leverages DuckDB's WebAssembly (WASM) capabilities to provide a seamless and efficient user experience directly in the browser.\",\n \"main\": \"eslint.config.js\",\n \"directories\": {\n \"doc\": \"docs\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/caioricciuti/duck-ui.git\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"bugs\": {\n \"url\": \"https://github.com/caioricciuti/duck-ui/issues\"\n },\n \"homepage\": \"https://github.com/caioricciuti/duck-ui#readme\",\n \"lint-staged\": {\n \"src/**/*.{ts,tsx,css}\": \"prettier --write\"\n },\n \"overrides\": {\n \"brace-expansion\": \"^2.0.3\",\n \"picomatch\": \"^4.0.4\",\n \"flatted\": \"^3.4.2\"\n }\n}\n" }, { "path": "public/databases/README.md", "content": "# Embedded Databases\n\nThis directory allows you to embed DuckDB database files (`.db`) that will be automatically loaded when DuckUI starts. This is perfect for:\n\n- Deploying DuckUI with demo data\n- Distributing pre-configured databases\n- Creating self-contained analytical dashboards\n\n## How to Add Your Database\n\n1. **Place your `.db` file in this directory**\n ```\n public/databases/my-database.db\n ```\n\n2. **Register it in `manifest.json`**\n ```json\n {\n \"databases\": [\n {\n \"name\": \"My Database\",\n \"file\": \"my-database.db\",\n \"description\": \"Description of your database\",\n \"autoLoad\": true\n }\n ]\n }\n ```\n\n3. **Build and deploy**\n ```bash\n bun run build\n ```\n\n## Manifest Format\n\nEach database entry in `manifest.json` supports:\n\n- **`name`** (required): Display name in the UI\n- **`file`** (required): Filename of the `.db` file in this directory\n- **`description`** (optional): Description shown in the UI\n- **`autoLoad`** (optional, default: `true`): Whether to load on startup\n\n## Example\n\n```json\n{\n \"databases\": [\n {\n \"name\": \"Sales Demo\",\n \"file\": \"sales-demo.db\",\n \"description\": \"Sample sales data from 2023\",\n \"autoLoad\": true\n },\n {\n \"name\": \"Analytics\",\n \"file\": \"analytics.db\",\n \"description\": \"Web analytics data\",\n \"autoLoad\": false\n }\n ]\n}\n```\n\n## Notes\n\n- Database files are fetched and loaded in the browser\n- Large database files will increase initial load time\n- All databases are loaded into memory (consider file sizes)\n- You can attach/detach databases dynamically from the SQL editor\n" }, { "path": "public/databases/manifest.json", "content": "{\n \"databases\": []\n}\n" }, { "path": "serve.json", "content": "{\n \"headers\": [\n {\n \"source\": \"**/*\",\n \"headers\": [\n { \"key\": \"Cross-Origin-Opener-Policy\", \"value\": \"same-origin\" },\n { \"key\": \"Cross-Origin-Embedder-Policy\", \"value\": \"credentialless\" }\n ]\n }\n ]\n}\n" }, { "path": "src/components/charts/ChartVisualizationPro.tsx", "content": "/**\n * Professional Chart Visualization Component\n * Features: Auto-chart, live preview, multi-series, customization, export\n * Powered by uPlot (canvas-based, lightweight)\n */\n\nimport React, { useState, useRef, useMemo, useEffect, useCallback } from \"react\";\nimport uPlot from \"uplot\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { MultiSelect } from \"@/components/ui/multi-select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Download,\n BarChart3,\n LineChart,\n PieChart as PieChartIcon,\n ScatterChart,\n AreaChart,\n Settings2,\n RotateCcw,\n Layers,\n TrendingUp,\n CircleDot,\n ArrowUpDown,\n} from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport { useTheme } from \"@/components/theme/theme-provider\";\nimport { formatNumber, formatNumberWithSuffix, shortenLabel } from \"@/lib/chartUtils\";\nimport { transformData, isNumericColumn, suggestChartTypes } from \"@/lib/chartDataTransform\";\nimport { exportChartAsPNG } from \"@/lib/chartExport\";\nimport UPlotChart from \"./UPlotChart\";\nimport { tooltipPlugin } from \"./tooltipPlugin\";\nimport type { QueryResult, ChartConfig, ChartType, DataTransform } from \"@/store\";\n\ninterface ChartVisualizationProProps {\n result: QueryResult;\n chartConfig?: ChartConfig;\n onConfigChange: (config: ChartConfig | undefined) => void;\n}\n\n// Enhanced color palette\nconst DEFAULT_COLORS = [\n \"#D99B43\",\n \"#8B5CF6\",\n \"#3B82F6\",\n \"#10B981\",\n \"#F59E0B\",\n \"#EF4444\",\n \"#EC4899\",\n \"#6366F1\",\n \"#14B8A6\",\n \"#F97316\",\n];\n\n// Chart type display labels with icons\nconst CHART_TYPE_INFO: Record = {\n bar: { label: \"Bar\", icon: BarChart3 },\n grouped_bar: { label: \"Grouped Bar\", icon: Layers },\n stacked_bar: { label: \"Stacked Bar\", icon: Layers },\n line: { label: \"Line\", icon: LineChart },\n area: { label: \"Area\", icon: AreaChart },\n stacked_area: { label: \"Stacked Area\", icon: TrendingUp },\n pie: { label: \"Pie\", icon: PieChartIcon },\n donut: { label: \"Donut\", icon: CircleDot },\n scatter: { label: \"Scatter\", icon: ScatterChart },\n};\n\n// ── SVG Pie/Donut Chart ──────────────────────────────────────────────────────\n\nfunction PieChartDisplay({\n data,\n xKey,\n yKey,\n colors,\n isDonut,\n innerRadius = 0.45,\n theme,\n}: {\n data: Record[];\n xKey: string;\n yKey: string;\n colors: string[];\n isDonut: boolean;\n innerRadius?: number;\n theme: string;\n}) {\n const [hoveredIdx, setHoveredIdx] = useState(null);\n const total = data.reduce((sum, row) => sum + (Number(row[yKey]) || 0), 0);\n\n if (total === 0)\n return (\n
No data
\n );\n\n const slices: { label: string; value: number; pct: number; color: string }[] = [];\n let cumAngle = -Math.PI / 2;\n const arcs: {\n d: string;\n color: string;\n midAngle: number;\n pct: number;\n label: string;\n value: number;\n }[] = [];\n\n data.forEach((row, i) => {\n const value = Number(row[yKey]) || 0;\n const pct = value / total;\n const angle = pct * 2 * Math.PI;\n const startAngle = cumAngle;\n const endAngle = cumAngle + angle;\n const midAngle = startAngle + angle / 2;\n const color = colors[i % colors.length];\n\n slices.push({ label: String(row[xKey]), value, pct, color });\n\n const outerR = 1;\n const innerR = isDonut ? innerRadius : 0;\n const largeArc = angle > Math.PI ? 1 : 0;\n\n const x1 = Math.cos(startAngle) * outerR;\n const y1 = Math.sin(startAngle) * outerR;\n const x2 = Math.cos(endAngle) * outerR;\n const y2 = Math.sin(endAngle) * outerR;\n const ix1 = Math.cos(endAngle) * innerR;\n const iy1 = Math.sin(endAngle) * innerR;\n const ix2 = Math.cos(startAngle) * innerR;\n const iy2 = Math.sin(startAngle) * innerR;\n\n const d = isDonut\n ? `M ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} L ${ix1} ${iy1} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix2} ${iy2} Z`\n : `M 0 0 L ${x1} ${y1} A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2} Z`;\n\n arcs.push({ d, color, midAngle, pct, label: String(row[xKey]), value });\n cumAngle = endAngle;\n });\n\n const strokeColor = theme === \"dark\" ? \"#1a1a1a\" : \"#fff\";\n\n return (\n
\n {/* Chart */}\n
\n \n {arcs.map((arc, i) => {\n const isHovered = hoveredIdx === i;\n const tx = isHovered ? Math.cos(arc.midAngle) * 0.06 : 0;\n const ty = isHovered ? Math.sin(arc.midAngle) * 0.06 : 0;\n return (\n \n setHoveredIdx(i)}\n onMouseLeave={() => setHoveredIdx(null)}\n />\n {arc.pct >= 0.05 && (\n \n {`${(arc.pct * 100).toFixed(0)}%`}\n \n )}\n \n );\n })}\n {/* Donut center total */}\n {isDonut && (\n \n \n Total\n \n \n {formatNumberWithSuffix(total)}\n \n \n )}\n \n {/* Hover tooltip */}\n {hoveredIdx !== null && (\n
\n
{slices[hoveredIdx].label}
\n
\n {formatNumber(slices[hoveredIdx].value)} ({(slices[hoveredIdx].pct * 100).toFixed(1)}\n %)\n
\n
\n )}\n
\n {/* Legend */}\n
\n {slices.map((s, i) => (\n setHoveredIdx(i)}\n onMouseLeave={() => setHoveredIdx(null)}\n >\n \n \n {s.label}\n \n \n {formatNumberWithSuffix(s.value)}\n \n \n {(s.pct * 100).toFixed(1)}%\n \n
\n ))}\n
\n \n );\n}\n\n// ── XY Chart Legend ──────────────────────────────────────────────────────────\n\nfunction ChartLegend({\n series,\n colors,\n onToggle,\n}: {\n series: { label: string; show: boolean }[];\n colors: string[];\n onToggle: (idx: number) => void;\n}) {\n if (series.length <= 1) return null;\n return (\n
\n {series.map((s, i) => (\n onToggle(i)}\n type=\"button\"\n >\n \n {s.label}\n \n ))}\n
\n );\n}\n\n// ── Main Component ───────────────────────────────────────────────────────────\n\nexport const ChartVisualizationPro: React.FC = ({\n result,\n chartConfig,\n onConfigChange,\n}) => {\n const { theme } = useTheme();\n const chartRef = useRef(null);\n const uPlotRef = useRef(null);\n const [hiddenSeries, setHiddenSeries] = useState>(new Set());\n\n // Get numeric columns for Y-axis\n const numericColumns = useMemo(\n () => result.columns.filter((col) => isNumericColumn(result.data, col)),\n [result]\n );\n\n // Auto-chart: detect best config when no config exists\n const autoDetect = useCallback((): ChartConfig => {\n const xAxis =\n result.columns.find((col) => !isNumericColumn(result.data, col)) || result.columns[0] || \"\";\n const yCol = numericColumns[0] || result.columns[1] || \"\";\n const suggested = suggestChartTypes(result, xAxis, yCol);\n const type = (suggested[0] || \"bar\") as ChartType;\n return {\n type,\n xAxis,\n yAxis: yCol,\n colors: DEFAULT_COLORS,\n showGrid: true,\n showValues: false,\n smooth: false,\n legend: { show: true, position: \"bottom\" },\n };\n }, [result, numericColumns]);\n\n // On mount: auto-generate config if none provided\n useEffect(() => {\n if (!chartConfig && result.data.length > 0) {\n onConfigChange(autoDetect());\n }\n }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n // Live config update helper\n const updateConfig = useCallback(\n (updates: Partial) => {\n const base = chartConfig || autoDetect();\n onConfigChange({ ...base, ...updates });\n },\n [chartConfig, autoDetect, onConfigChange]\n );\n\n const updateTransform = useCallback(\n (updates: Partial) => {\n const base = chartConfig || autoDetect();\n onConfigChange({ ...base, transform: { ...base.transform, ...updates } });\n },\n [chartConfig, autoDetect, onConfigChange]\n );\n\n // Current effective config\n const config = chartConfig || autoDetect();\n\n // Selected Y columns (from series or single yAxis)\n const selectedYColumns = useMemo(() => {\n if (config.series?.length) return config.series.map((s) => s.column);\n if (config.yAxis) return [config.yAxis];\n return [];\n }, [config]);\n\n const handleYColumnsChange = useCallback(\n (cols: string[]) => {\n const series = cols.map((col, idx) => ({\n column: col,\n label: col,\n color: DEFAULT_COLORS[idx % DEFAULT_COLORS.length],\n }));\n updateConfig({\n series: series.length > 1 ? series : undefined,\n yAxis: series.length === 1 ? cols[0] : undefined,\n });\n },\n [updateConfig]\n );\n\n // Transform data based on configuration\n const transformedData = useMemo(() => {\n return transformData(result, config.transform, config.xAxis, config.yAxis || config.series);\n }, [result, config.transform, config.xAxis, config.yAxis, config.series]);\n\n const handleExportPNG = async () => {\n if (!chartRef.current) {\n toast.error(\"No chart to export\");\n return;\n }\n try {\n const fileName = `chart-${Date.now()}.png`;\n const bg = theme === \"dark\" ? \"#1a1a1a\" : \"#ffffff\";\n await exportChartAsPNG(chartRef.current, fileName, bg);\n toast.success(\"Chart exported as PNG\");\n } catch (error) {\n toast.error(\n `Failed to export chart: ${error instanceof Error ? error.message : \"Unknown error\"}`\n );\n }\n };\n\n // ── Build uPlot options + data ──────────────────────────────────────────────\n\n const { uPlotOptions, uPlotData, seriesInfo } = useMemo(() => {\n if (!config.xAxis || (!config.yAxis && (!config.series || config.series.length === 0))) {\n return { uPlotOptions: null, uPlotData: null, seriesInfo: [] };\n }\n\n const chartData = transformedData.map((row) => {\n const newRow: Record = { ...row };\n if (config.yAxis) newRow[config.yAxis] = Number(row[config.yAxis]) || 0;\n if (config.series) {\n config.series.forEach((s) => {\n newRow[s.column] = Number(row[s.column]) || 0;\n });\n }\n return newRow;\n });\n\n const yKeys: string[] =\n config.series?.map((s) => s.column) ?? (config.yAxis ? [config.yAxis] : []);\n const colors = config.colors || DEFAULT_COLORS;\n const isDark = theme === \"dark\";\n\n const xs = chartData.map((_, i) => i);\n const seriesData = yKeys.map((key) =>\n chartData.map((row) => (Number(row[key]) || 0) as number)\n );\n\n const isStacked = config.type === \"stacked_bar\" || config.type === \"stacked_area\";\n const stackedData = isStacked\n ? seriesData.reduce((acc, curr) => {\n if (acc.length === 0) return [curr];\n const prev = acc[acc.length - 1];\n acc.push(curr.map((v, i) => v + prev[i]));\n return acc;\n }, [])\n : seriesData;\n\n const finalSeriesData = isStacked ? stackedData : seriesData;\n\n const isBarType = [\"bar\", \"stacked_bar\", \"grouped_bar\"].includes(config.type);\n const isAreaType = [\"area\", \"stacked_area\"].includes(config.type);\n const isLineType = config.type === \"line\";\n const isScatter = config.type === \"scatter\";\n const useSmooth = config.smooth && (isLineType || isAreaType);\n\n const xLabels = chartData.map((row) => shortenLabel(String(row[config.xAxis])));\n\n const barsBuilder = isBarType\n ? uPlot.paths.bars!({\n size: [0.6, 100],\n radius: 0.2,\n gap: yKeys.length > 1 && config.type === \"grouped_bar\" ? 2 : 0,\n })\n : undefined;\n\n const splineBuilder = useSmooth ? uPlot.paths.spline!() : undefined;\n\n // Build series config\n const sInfo: { label: string; color: string }[] = [];\n const uSeries: uPlot.Series[] = [\n { label: config.xAxis },\n ...yKeys.map((key, i) => {\n const color = config.series?.[i]?.color || colors[i % colors.length];\n const seriesLabel = config.series?.[i]?.label || key;\n sInfo.push({ label: seriesLabel, color });\n\n const s: uPlot.Series = {\n label: seriesLabel,\n stroke: color,\n width: isBarType ? 0 : 2,\n fill: isBarType || isAreaType ? color + (isAreaType ? \"66\" : \"cc\") : undefined,\n points: { show: isScatter, size: isScatter ? 8 : 4 },\n paths: isBarType\n ? barsBuilder\n : useSmooth\n ? splineBuilder\n : isScatter\n ? () => null\n : undefined,\n };\n\n if (config.type === \"grouped_bar\" && yKeys.length > 1) {\n const groupBars = uPlot.paths.bars!({\n size: [0.6 / yKeys.length, 100],\n radius: 0.2,\n align: i === 0 ? -1 : i === yKeys.length - 1 ? 1 : 0,\n });\n s.paths = groupBars;\n }\n\n return s;\n }),\n ];\n\n const needsRotation = chartData.length > 10;\n const maxLabelLen = Math.max(...xLabels.map((l) => l.length), 1);\n const xAxisSize = needsRotation ? Math.min(120, 40 + maxLabelLen * 5) : 60;\n\n const uAxes: uPlot.Axis[] = [\n {\n stroke: isDark ? \"#888\" : \"#666\",\n grid: { stroke: isDark ? \"rgba(255,255,255,0.08)\" : \"rgba(0,0,0,0.08)\", width: 1 },\n ticks: { stroke: isDark ? \"rgba(255,255,255,0.15)\" : \"rgba(0,0,0,0.15)\", width: 1 },\n values: (_u: uPlot, vals: number[]) => vals.map((v) => xLabels[v] ?? \"\"),\n gap: 8,\n size: xAxisSize,\n font: \"12px system-ui, sans-serif\",\n labelFont: \"12px system-ui, sans-serif\",\n rotate: needsRotation ? -45 : 0,\n },\n {\n stroke: isDark ? \"#888\" : \"#666\",\n grid: config.showGrid\n ? {\n stroke: isDark ? \"rgba(255,255,255,0.08)\" : \"rgba(0,0,0,0.08)\",\n width: 1,\n dash: [4, 4],\n }\n : { show: false },\n ticks: { stroke: isDark ? \"rgba(255,255,255,0.15)\" : \"rgba(0,0,0,0.15)\", width: 1 },\n values: (_u: uPlot, vals: number[]) => vals.map((v) => formatNumberWithSuffix(v)),\n gap: 8,\n size: 70,\n font: \"12px system-ui, sans-serif\",\n labelFont: \"12px system-ui, sans-serif\",\n },\n ];\n\n // Data labels hook for bar charts\n const hooks: uPlot.Plugin[\"hooks\"] = {};\n if (config.showValues && isBarType) {\n hooks.draw = [\n (u: uPlot) => {\n const ctx = u.ctx;\n ctx.save();\n ctx.font = \"10px system-ui, sans-serif\";\n ctx.fillStyle = isDark ? \"#ccc\" : \"#333\";\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"bottom\";\n\n for (let si = 1; si < u.series.length; si++) {\n if (!u.series[si].show) continue;\n for (let di = 0; di < u.data[si].length; di++) {\n const val = u.data[si][di];\n if (val == null) continue;\n const cx = u.valToPos(u.data[0][di]!, \"x\", true);\n const cy = u.valToPos(val, \"y\", true);\n ctx.fillText(formatNumberWithSuffix(val as number), cx, cy - 4);\n }\n }\n ctx.restore();\n },\n ];\n }\n\n const opts: Omit = {\n scales: { x: { time: false } },\n series: uSeries,\n axes: uAxes,\n cursor: {\n drag: { x: false, y: false },\n points: {\n size: 6,\n fill: (u: uPlot, i: number) =>\n (typeof u.series[i].stroke === \"function\"\n ? (u.series[i].stroke as (self: uPlot, seriesIdx: number) => string)(u, i)\n : u.series[i].stroke) as string,\n stroke: \"transparent\",\n width: 0,\n },\n },\n legend: { show: false },\n plugins: [tooltipPlugin(xLabels, { stacked: isStacked }), { hooks }],\n padding: [16, 16, 8, 0],\n };\n\n const data: uPlot.AlignedData = isStacked\n ? ([xs, ...finalSeriesData.reverse()] as uPlot.AlignedData)\n : ([xs, ...finalSeriesData] as uPlot.AlignedData);\n\n return { uPlotOptions: opts, uPlotData: data, seriesInfo: sInfo };\n }, [config, transformedData, theme]);\n\n const legendState = useMemo(\n () => seriesInfo.map((s, i) => ({ label: s.label, show: !hiddenSeries.has(i) })),\n [seriesInfo, hiddenSeries]\n );\n\n const handleLegendToggle = useCallback((idx: number) => {\n setHiddenSeries((prev) => {\n const next = new Set(prev);\n if (next.has(idx)) {\n next.delete(idx);\n } else {\n next.add(idx);\n }\n // Toggle series visibility on the uPlot instance\n if (uPlotRef.current) {\n uPlotRef.current.setSeries(idx + 1, { show: !next.has(idx) });\n }\n return next;\n });\n }, []);\n\n // ── Render ──────────────────────────────────────────────────────────────────\n\n const renderChart = () => {\n if (config.type === \"pie\" || config.type === \"donut\") {\n const chartData = transformedData.map((row) => ({\n ...row,\n [config.xAxis]: String(row[config.xAxis]),\n [config.yAxis || config.series?.[0]?.column || \"\"]:\n Number(row[config.yAxis || config.series?.[0]?.column || \"\"]) || 0,\n }));\n return (\n \n );\n }\n\n if (!uPlotOptions || !uPlotData) return null;\n\n return (\n
\n
\n {\n uPlotRef.current = u;\n }}\n />\n
\n s.color)}\n onToggle={handleLegendToggle}\n />\n
\n );\n };\n\n if (!result || !result.data || result.data.length === 0) {\n return (\n
\n
\n
No data available for visualization
\n
\n
\n );\n }\n\n const isLineOrArea = [\"line\", \"area\", \"stacked_area\"].includes(config.type);\n\n return (\n
\n {/* Compact Toolbar */}\n
\n {/* Chart Type */}\n updateConfig({ type: value as ChartType })}\n >\n \n \n \n \n {Object.entries(CHART_TYPE_INFO).map(([value, info]) => {\n const Icon = info.icon;\n return (\n \n \n \n {info.label}\n \n \n );\n })}\n \n \n\n {/* X-Axis */}\n \n\n {/* Y-Axis */}\n
\n ({\n label: col,\n value: col,\n color: selectedYColumns.includes(col)\n ? DEFAULT_COLORS[selectedYColumns.indexOf(col) % DEFAULT_COLORS.length]\n : DEFAULT_COLORS[idx % DEFAULT_COLORS.length],\n }))}\n selected={selectedYColumns}\n onChange={handleYColumnsChange}\n placeholder=\"Values...\"\n className=\"h-8 text-xs\"\n />\n
\n\n {/* Settings Popover */}\n \n \n \n \n \n
\n

Chart Settings

\n\n {/* Sort */}\n
\n \n
\n \n updateTransform({ sortBy: v === \"__none__\" ? undefined : v })\n }\n >\n \n \n \n \n None\n {result.columns.map((col) => (\n \n {col}\n \n ))}\n \n \n {config.transform?.sortBy && (\n updateTransform({ sortOrder: v as \"asc\" | \"desc\" })}\n >\n \n \n \n \n Asc\n Desc\n \n \n )}\n
\n
\n\n {/* Limit */}\n
\n \n {\n const v = e.target.value ? parseInt(e.target.value, 10) : undefined;\n updateTransform({ limit: v });\n }}\n />\n
\n\n {/* Aggregation */}\n
\n \n \n updateTransform({\n aggregation: v as \"sum\" | \"avg\" | \"count\" | \"min\" | \"max\" | \"none\",\n groupBy: v !== \"none\" ? config.xAxis : undefined,\n })\n }\n >\n \n \n \n \n None\n Sum\n Average\n Count\n Min\n Max\n \n \n
\n\n {/* Toggles */}\n
\n
\n \n updateConfig({ showValues: v })}\n />\n
\n
\n \n updateConfig({ showGrid: v })}\n />\n
\n {isLineOrArea && (\n
\n \n updateConfig({ smooth: v })}\n />\n
\n )}\n
\n
\n \n \n\n {/* Export */}\n \n\n {/* Clear / Reset */}\n {\n onConfigChange(undefined);\n // Will auto-detect on next render\n setTimeout(() => onConfigChange(autoDetect()), 0);\n }}\n title=\"Reset chart\"\n >\n \n \n
\n\n {/* Chart Display */}\n
\n {renderChart()}\n
\n
\n );\n};\n\nexport default React.memo(ChartVisualizationPro);\n" }, { "path": "src/components/charts/UPlotChart.tsx", "content": "import { useRef, useEffect, useCallback } from \"react\";\nimport uPlot from \"uplot\";\nimport \"uplot/dist/uPlot.min.css\";\n\ninterface UPlotChartProps {\n options: Omit;\n data: uPlot.AlignedData;\n className?: string;\n onInit?: (chart: uPlot) => void;\n}\n\nexport default function UPlotChart({ options, data, className, onInit }: UPlotChartProps) {\n const containerRef = useRef(null);\n const chartRef = useRef(null);\n\n const create = useCallback(() => {\n if (!containerRef.current) return;\n const el = containerRef.current;\n const { width, height } = el.getBoundingClientRect();\n if (width === 0 || height === 0) return;\n\n chartRef.current?.destroy();\n const chart = new uPlot({ ...options, width, height }, data, el);\n chartRef.current = chart;\n onInit?.(chart);\n }, [options, data, onInit]);\n\n useEffect(() => {\n create();\n\n const el = containerRef.current;\n if (!el) return;\n\n const ro = new ResizeObserver((entries) => {\n const { width: w, height: h } = entries[0].contentRect;\n if (w > 0 && h > 0) {\n chartRef.current?.setSize({ width: w, height: h });\n }\n });\n ro.observe(el);\n\n return () => {\n ro.disconnect();\n chartRef.current?.destroy();\n chartRef.current = null;\n };\n }, [create]);\n\n return
;\n}\n" }, { "path": "src/components/charts/tooltipPlugin.ts", "content": "import uPlot from \"uplot\";\nimport { formatNumberWithSuffix } from \"@/lib/chartUtils\";\n\nfunction escapeHtml(str: string): string {\n return str\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\nexport interface TooltipPluginOptions {\n stacked?: boolean;\n}\n\nexport function tooltipPlugin(xLabels: string[], opts?: TooltipPluginOptions): uPlot.Plugin {\n let tooltip: HTMLDivElement;\n let over: HTMLElement;\n const isStacked = opts?.stacked ?? false;\n\n return {\n hooks: {\n init(u: uPlot) {\n over = u.over;\n\n tooltip = document.createElement(\"div\");\n tooltip.className = \"uplot-tooltip\";\n tooltip.style.display = \"none\";\n tooltip.style.position = \"absolute\";\n tooltip.style.pointerEvents = \"none\";\n tooltip.style.zIndex = \"100\";\n over.appendChild(tooltip);\n\n over.addEventListener(\"mouseenter\", () => {\n tooltip.style.display = \"block\";\n });\n over.addEventListener(\"mouseleave\", () => {\n tooltip.style.display = \"none\";\n });\n },\n\n setSize() {\n // bounds recalculated in setCursor via over.clientWidth/Height\n },\n\n setCursor(u: uPlot) {\n const { idx, left, top } = u.cursor;\n if (idx == null || left == null || top == null) {\n tooltip.style.display = \"none\";\n return;\n }\n\n const xLabel = escapeHtml(xLabels[idx] ?? String(u.data[0][idx]));\n let html = `
${xLabel}
`;\n\n let total = 0;\n const rows: { label: string; color: string; val: number | null }[] = [];\n\n for (let i = 1; i < u.series.length; i++) {\n const s = u.series[i];\n if (!s.show) continue;\n const rawVal = u.data[i][idx];\n const val = rawVal != null ? (rawVal as number) : null;\n const color =\n typeof s.stroke === \"function\"\n ? (s.stroke as (self: uPlot, seriesIdx: number) => string)(u, i)\n : s.stroke;\n const safeLabel = typeof s.label === \"string\" ? escapeHtml(s.label) : \"\";\n const safeColor = typeof color === \"string\" ? escapeHtml(color) : \"\";\n\n if (val != null) total += val;\n rows.push({ label: safeLabel, color: safeColor, val });\n }\n\n for (const row of rows) {\n const formatted = row.val != null ? formatNumberWithSuffix(row.val) : \"\\u2014\";\n const pct =\n isStacked && row.val != null && total > 0\n ? ` (${((row.val / total) * 100).toFixed(1)}%)`\n : \"\";\n html += `
\n \n ${row.label}\n ${formatted}${pct}\n
`;\n }\n\n if (isStacked && rows.length > 1) {\n html += `
\n Total\n ${formatNumberWithSuffix(total)}\n
`;\n }\n\n tooltip.innerHTML = html;\n\n const tooltipW = tooltip.offsetWidth;\n const tooltipH = tooltip.offsetHeight;\n const overW = over.clientWidth;\n const overH = over.clientHeight;\n const pad = 12;\n\n let posLeft = left + pad;\n let posTop = top - tooltipH / 2;\n\n if (posLeft + tooltipW > overW) posLeft = left - tooltipW - pad;\n if (posTop < 0) posTop = 0;\n if (posTop + tooltipH > overH) posTop = overH - tooltipH;\n\n tooltip.style.left = posLeft + \"px\";\n tooltip.style.top = posTop + \"px\";\n tooltip.style.display = \"block\";\n },\n },\n };\n}\n" }, { "path": "src/components/cloud/CloudBrowser.tsx", "content": "/**\n * Cloud Browser Component\n * Displays cloud storage connections and allows browsing/importing files\n */\n\nimport { useState, useEffect } from \"react\";\nimport { useDuckStore } from \"@/store\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n DropdownMenuSeparator,\n} from \"@/components/ui/dropdown-menu\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport {\n Cloud,\n CloudOff,\n Plus,\n MoreVertical,\n Trash2,\n Link,\n Unlink,\n AlertCircle,\n Loader2,\n} from \"lucide-react\";\nimport { CloudConnectionModal } from \"./CloudConnectionModal\";\nimport type { CloudConnection } from \"@/store\";\n\n// Provider icons/colors\nconst PROVIDER_CONFIG = {\n s3: { label: \"S3\", color: \"text-orange-500\", bgColor: \"bg-orange-500/10\" },\n gcs: { label: \"GCS\", color: \"text-blue-500\", bgColor: \"bg-blue-500/10\" },\n azure: { label: \"Azure\", color: \"text-cyan-500\", bgColor: \"bg-cyan-500/10\" },\n};\n\ninterface CloudConnectionItemProps {\n connection: CloudConnection;\n onConnect: () => void;\n onDisconnect: () => void;\n onRemove: () => void;\n}\n\nfunction CloudConnectionItem({\n connection,\n onConnect,\n onDisconnect,\n onRemove,\n}: CloudConnectionItemProps) {\n const [isLoading, setIsLoading] = useState(false);\n const config = PROVIDER_CONFIG[connection.type];\n\n const handleConnect = async () => {\n setIsLoading(true);\n try {\n await onConnect();\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleDisconnect = async () => {\n setIsLoading(true);\n try {\n await onDisconnect();\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n
\n
\n
\n \n
\n
\n
\n {connection.name}\n \n {config.label}\n \n {connection.isConnected && }\n
\n {connection.lastError && (\n \n \n \n
\n \n Error\n
\n \n \n

{connection.lastError}

\n \n \n \n )}\n
\n
\n\n \n \n \n \n \n {connection.isConnected ? (\n \n \n Disconnect\n \n ) : (\n \n \n Connect\n \n )}\n \n \n \n Remove\n \n \n \n
\n );\n}\n\nexport default function CloudBrowser() {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const cloudConnections = useDuckStore((s) => s.cloudConnections);\n const cloudSupportStatus = useDuckStore((s) => s.cloudSupportStatus);\n const isCloudStorageInitialized = useDuckStore((s) => s.isCloudStorageInitialized);\n const initCloudStorage = useDuckStore((s) => s.initCloudStorage);\n const connectCloudStorage = useDuckStore((s) => s.connectCloudStorage);\n const disconnectCloudStorage = useDuckStore((s) => s.disconnectCloudStorage);\n const removeCloudConnection = useDuckStore((s) => s.removeCloudConnection);\n\n // Initialize cloud storage on mount\n useEffect(() => {\n if (!isCloudStorageInitialized) {\n initCloudStorage();\n }\n }, [isCloudStorageInitialized, initCloudStorage]);\n\n const handleConnect = async (id: string) => {\n await connectCloudStorage(id);\n };\n\n const handleDisconnect = async (id: string) => {\n await disconnectCloudStorage(id);\n };\n\n const handleRemove = async (id: string) => {\n await removeCloudConnection(id);\n };\n\n // Show warning if cloud storage is not supported\n const showWarning = cloudSupportStatus && !cloudSupportStatus.httpfsAvailable;\n\n return (\n
\n {/* Header */}\n
\n \n Cloud\n \n \n \n \n setIsModalOpen(true)}\n >\n \n \n \n Add Cloud Connection\n \n \n
\n\n {/* Warning Banner */}\n {showWarning && (\n
\n
\n \n

\n Cloud storage has limited support in browsers. Consider using HTTPS URLs instead.\n

\n
\n
\n )}\n\n {/* Connections List */}\n {cloudConnections.length === 0 ? (\n
\n \n

No cloud connections

\n setIsModalOpen(true)}\n >\n Add your first connection\n \n
\n ) : (\n
\n {cloudConnections.map((conn) => (\n handleConnect(conn.id)}\n onDisconnect={() => handleDisconnect(conn.id)}\n onRemove={() => handleRemove(conn.id)}\n />\n ))}\n
\n )}\n\n {/* Add Connection Modal */}\n setIsModalOpen(false)} />\n
\n );\n}\n" }, { "path": "src/components/cloud/CloudConnectionModal.tsx", "content": "/**\n * Cloud Connection Modal\n * Form for adding/editing S3, GCS, and Azure cloud storage connections\n */\n\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { z } from \"zod\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from \"@/components/ui/form\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Input } from \"@/components/ui/input\";\nimport { Button } from \"@/components/ui/button\";\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Loader2, Cloud, AlertTriangle } from \"lucide-react\";\nimport { useDuckStore } from \"@/store\";\nimport type { CloudConnection } from \"@/store\";\n\ninterface CloudConnectionModalProps {\n isOpen: boolean;\n onClose: () => void;\n existingConnection?: CloudConnection;\n}\n\n// Form validation schema\nconst cloudConnectionSchema = z\n .object({\n name: z.string().min(1, \"Name is required\"),\n type: z.enum([\"s3\", \"gcs\", \"azure\"]),\n // S3 fields\n bucket: z.string().optional(),\n region: z.string().optional(),\n accessKeyId: z.string().optional(),\n secretAccessKey: z.string().optional(),\n endpoint: z.string().optional(),\n // GCS fields\n hmacKeyId: z.string().optional(),\n hmacSecret: z.string().optional(),\n // Azure fields\n accountName: z.string().optional(),\n accountKey: z.string().optional(),\n containerName: z.string().optional(),\n })\n .refine(\n (data) => {\n // Validate required fields based on type\n if (data.type === \"s3\") {\n return data.bucket && data.accessKeyId && data.secretAccessKey;\n }\n if (data.type === \"gcs\") {\n return data.bucket && data.hmacKeyId && data.hmacSecret;\n }\n if (data.type === \"azure\") {\n return data.containerName && data.accountName && data.accountKey;\n }\n return true;\n },\n {\n message: \"Please fill in all required fields for the selected provider\",\n }\n );\n\ntype CloudConnectionFormData = z.infer;\n\nexport function CloudConnectionModal({\n isOpen,\n onClose,\n existingConnection,\n}: CloudConnectionModalProps) {\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [isTesting, setIsTesting] = useState(false);\n const [testResult, setTestResult] = useState<{ success: boolean; error?: string } | null>(null);\n\n const addCloudConnection = useDuckStore((s) => s.addCloudConnection);\n const cloudSupportStatus = useDuckStore((s) => s.cloudSupportStatus);\n\n const form = useForm({\n resolver: zodResolver(cloudConnectionSchema),\n defaultValues: {\n name: existingConnection?.name || \"\",\n type: existingConnection?.type || \"s3\",\n bucket: existingConnection?.bucket || \"\",\n region: existingConnection?.region || \"us-east-1\",\n accessKeyId: existingConnection?.accessKeyId || \"\",\n secretAccessKey: existingConnection?.secretAccessKey || \"\",\n endpoint: existingConnection?.endpoint || \"\",\n hmacKeyId: existingConnection?.hmacKeyId || \"\",\n hmacSecret: existingConnection?.hmacSecret || \"\",\n accountName: existingConnection?.accountName || \"\",\n accountKey: existingConnection?.accountKey || \"\",\n containerName: existingConnection?.containerName || \"\",\n },\n });\n\n const selectedType = form.watch(\"type\");\n\n const onSubmit = async (data: CloudConnectionFormData) => {\n setIsSubmitting(true);\n try {\n await addCloudConnection({\n name: data.name,\n type: data.type,\n bucket: data.bucket,\n region: data.region,\n accessKeyId: data.accessKeyId,\n secretAccessKey: data.secretAccessKey,\n endpoint: data.endpoint,\n hmacKeyId: data.hmacKeyId,\n hmacSecret: data.hmacSecret,\n accountName: data.accountName,\n accountKey: data.accountKey,\n containerName: data.containerName,\n });\n onClose();\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const handleTest = async () => {\n setIsTesting(true);\n setTestResult(null);\n\n // For testing, we'd need to add the connection first, test it, then remove if failed\n // For now, show a message about the support status\n setTimeout(() => {\n if (!cloudSupportStatus?.httpfsAvailable) {\n setTestResult({\n success: false,\n error:\n \"Cloud storage (httpfs) is not available in this browser. Direct S3/GCS/Azure access may not work due to CORS restrictions.\",\n });\n } else if (!cloudSupportStatus?.secretsSupported) {\n setTestResult({\n success: false,\n error: \"DuckDB secrets are not supported. Cloud storage authentication may not work.\",\n });\n } else {\n setTestResult({\n success: true,\n });\n }\n setIsTesting(false);\n }, 500);\n };\n\n return (\n \n \n \n \n \n {existingConnection ? \"Edit\" : \"Add\"} Cloud Connection\n \n \n Connect to cloud storage (S3, Google Cloud Storage, or Azure Blob Storage)\n \n \n\n {/* Support Status Warning */}\n {cloudSupportStatus && !cloudSupportStatus.httpfsAvailable && (\n \n \n \n Cloud storage support is limited in this browser. The httpfs extension is not\n available. You may need to use HTTPS URLs directly instead of s3:// or gcs://\n protocols.\n \n \n )}\n\n
\n \n {/* Connection Name */}\n (\n \n Connection Name\n \n \n \n \n \n )}\n />\n\n {/* Provider Type */}\n (\n \n Provider\n \n \n S3-compatible includes MinIO, Cloudflare R2, DigitalOcean Spaces\n \n \n \n )}\n />\n\n {/* S3 Fields */}\n {selectedType === \"s3\" && (\n <>\n (\n \n Bucket Name *\n \n \n \n \n \n )}\n />\n\n (\n \n Region\n \n \n \n \n \n )}\n />\n\n (\n \n Access Key ID *\n \n \n \n \n \n )}\n />\n\n (\n \n Secret Access Key *\n \n \n \n \n \n )}\n />\n\n (\n \n Custom Endpoint (Optional)\n \n \n \n For S3-compatible services like MinIO or R2\n \n \n )}\n />\n \n )}\n\n {/* GCS Fields */}\n {selectedType === \"gcs\" && (\n <>\n (\n \n Bucket Name *\n \n \n \n \n \n )}\n />\n\n (\n \n HMAC Key ID *\n \n \n \n \n Generate HMAC keys in GCP Console under Cloud Storage Settings\n \n \n \n )}\n />\n\n (\n \n HMAC Secret *\n \n \n \n \n \n )}\n />\n \n )}\n\n {/* Azure Fields */}\n {selectedType === \"azure\" && (\n <>\n (\n \n Container Name *\n \n \n \n \n \n )}\n />\n\n (\n \n Storage Account Name *\n \n \n \n \n \n )}\n />\n\n (\n \n Account Key *\n \n \n \n \n \n )}\n />\n \n )}\n\n {/* Test Result */}\n {testResult && (\n \n \n {testResult.success ? \"Cloud storage support is available!\" : testResult.error}\n \n \n )}\n\n \n \n \n \n \n \n
\n \n );\n}\n" }, { "path": "src/components/command-palette/CommandPalette.tsx", "content": "import { useEffect, useState, useMemo } from \"react\";\nimport {\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/components/ui/command\";\nimport { useDuckStore } from \"@/store\";\nimport { useTheme } from \"@/components/theme/theme-provider\";\nimport {\n Terminal,\n Home,\n Cable,\n Brain,\n Settings,\n Sun,\n Moon,\n Database,\n Table,\n Bookmark,\n} from \"lucide-react\";\nimport type { EditorTabType } from \"@/store\";\nimport {\n getSavedQueries,\n type SavedQuery,\n} from \"@/services/persistence/repositories/savedQueryRepository\";\n\nexport default function CommandPalette() {\n const [open, setOpen] = useState(false);\n const { theme, setTheme } = useTheme();\n\n const tabs = useDuckStore((s) => s.tabs);\n const activeTabId = useDuckStore((s) => s.activeTabId);\n const createTab = useDuckStore((s) => s.createTab);\n const setActiveTab = useDuckStore((s) => s.setActiveTab);\n const toggleBrainPanel = useDuckStore((s) => s.toggleBrainPanel);\n const databases = useDuckStore((s) => s.databases);\n const connectionList = useDuckStore((s) => s.connectionList);\n const currentConnection = useDuckStore((s) => s.currentConnection);\n const setCurrentConnection = useDuckStore((s) => s.setCurrentConnection);\n const currentProfileId = useDuckStore((s) => s.currentProfileId);\n const savedQueriesVersion = useDuckStore((s) => s.savedQueriesVersion);\n\n const [savedQueries, setSavedQueries] = useState([]);\n\n // Load saved queries when palette opens\n useEffect(() => {\n if (open && currentProfileId) {\n getSavedQueries(currentProfileId)\n .then(setSavedQueries)\n .catch(() => {});\n }\n }, [open, currentProfileId, savedQueriesVersion]);\n\n // Keyboard shortcut\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n setOpen((o) => !o);\n }\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, []);\n\n const openOrFocusTab = (type: EditorTabType, title: string) => {\n const existing = tabs.find((t) => t.type === type);\n if (existing) {\n setActiveTab(existing.id);\n } else {\n createTab(type, \"\", title);\n }\n setOpen(false);\n };\n\n const openTabs = useMemo(() => tabs.filter((t) => t.id !== activeTabId), [tabs, activeTabId]);\n\n const tableEntries = useMemo(() => {\n const entries: { database: string; table: string }[] = [];\n for (const db of databases) {\n for (const table of db.tables) {\n entries.push({ database: db.name, table: table.name });\n }\n }\n return entries;\n }, [databases]);\n\n return (\n \n \n \n No results found.\n\n {/* Quick Actions */}\n \n {\n createTab(\"sql\", \"\");\n setOpen(false);\n }}\n >\n \n New SQL Tab\n \n openOrFocusTab(\"home\", \"Home\")}>\n \n Home\n \n openOrFocusTab(\"connections\", \"Connections\")}>\n \n Connections\n \n openOrFocusTab(\"brain\", \"Duck Brain\")}>\n \n Duck Brain\n \n openOrFocusTab(\"settings\", \"Settings\")}>\n \n Settings\n \n {\n toggleBrainPanel();\n setOpen(false);\n }}\n >\n \n Toggle AI Panel\n \n {\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n setOpen(false);\n }}\n >\n {theme === \"dark\" ? (\n \n ) : (\n \n )}\n {theme === \"dark\" ? \"Light Theme\" : \"Dark Theme\"}\n \n \n\n {/* Open Tabs */}\n {openTabs.length > 0 && (\n <>\n \n \n {openTabs.map((tab) => (\n {\n setActiveTab(tab.id);\n setOpen(false);\n }}\n >\n \n {tab.title || tab.type}\n {tab.type}\n \n ))}\n \n \n )}\n\n {/* Connections */}\n {connectionList.connections.length > 1 && (\n <>\n \n \n {connectionList.connections\n .filter((c) => c.id !== currentConnection?.id)\n .map((conn) => (\n {\n await setCurrentConnection(conn.id);\n setOpen(false);\n }}\n >\n \n Switch to {conn.name}\n {conn.scope}\n \n ))}\n \n \n )}\n\n {/* Saved Queries */}\n {savedQueries.length > 0 && (\n <>\n \n \n {savedQueries.map((query) => (\n {\n createTab(\"sql\", query.sql_text, query.name);\n setOpen(false);\n }}\n >\n \n {query.name}\n \n ))}\n \n \n )}\n\n {/* Tables */}\n {tableEntries.length > 0 && (\n <>\n \n \n {tableEntries.map(({ database, table }) => (\n {\n const query = `SELECT * FROM \"${database}\".\"${table}\" LIMIT 100`;\n createTab(\"sql\", query, table);\n setOpen(false);\n }}\n >\n \n {database}.{table}\n SELECT\n \n ))}\n \n \n )}\n \n \n );\n}\n" }, { "path": "src/components/common/FloatingActionButton.tsx", "content": "import { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { LucideIcon } from \"lucide-react\";\n\ninterface FloatingActionButtonProps {\n onClick: () => void;\n icon: LucideIcon;\n label: string;\n disabled?: boolean;\n className?: string;\n variant?: \"default\" | \"outline\" | \"secondary\";\n}\n\nexport const FloatingActionButton: React.FC = ({\n onClick,\n icon: Icon,\n label,\n disabled = false,\n className,\n variant = \"default\",\n}) => {\n return (\n \n \n {label}\n \n );\n};\n\nexport default FloatingActionButton;\n" }, { "path": "src/components/common/ImportOptionsPopover.tsx", "content": "import React, { useState } from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Import, Table, Link2 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ImportOptions {\n tableName: string;\n importMode: \"table\" | \"view\";\n}\n\ninterface ImportOptionsPopoverProps {\n fileName: string;\n onImport: (options: ImportOptions) => void;\n children: React.ReactNode;\n disabled?: boolean;\n}\n\n/**\n * Generate a valid table name from a filename\n */\nfunction generateTableName(fileName: string): string {\n return fileName\n .replace(/\\.[^.]+$/, \"\") // Remove extension\n .replace(/[^a-zA-Z0-9_]/g, \"_\") // Replace special chars with underscore\n .replace(/^[0-9]/, \"_$&\") // Ensure doesn't start with number\n .replace(/_+/g, \"_\") // Collapse multiple underscores\n .replace(/^_|_$/g, \"\"); // Trim leading/trailing underscores\n}\n\nconst ImportOptionsPopover: React.FC = ({\n fileName,\n onImport,\n children,\n disabled = false,\n}) => {\n const [open, setOpen] = useState(false);\n const [tableName, setTableName] = useState(generateTableName(fileName));\n const [importMode, setImportMode] = useState<\"table\" | \"view\">(\"table\");\n\n const handleImport = () => {\n if (!tableName.trim()) return;\n onImport({ tableName: tableName.trim(), importMode });\n setOpen(false);\n };\n\n const handleOpenChange = (isOpen: boolean) => {\n if (isOpen) {\n // Reset to defaults when opening\n setTableName(generateTableName(fileName));\n setImportMode(\"table\");\n }\n setOpen(isOpen);\n };\n\n return (\n \n \n {children}\n \n \n
\n
\n

Import Options

\n

\n {fileName}\n

\n
\n\n
\n \n setTableName(e.target.value)}\n placeholder=\"table_name\"\n className=\"h-8 text-sm\"\n />\n
\n\n
\n \n
\n setImportMode(\"table\")}\n >\n
\n Table\n \n setImportMode(\"view\")}\n >\n \n View\n \n \n

\n {importMode === \"table\"\n ? \"Copies data into DuckDB (faster queries)\"\n : \"Links to file (fresh data, less memory)\"}\n

\n \n\n \n \n {importMode === \"table\" ? \"Import\" : \"Link\"}\n \n \n \n \n );\n};\n\nexport default ImportOptionsPopover;\n" }, { "path": "src/components/connection/ConnectionsModal.tsx", "content": "// ConnectionManager.tsx\nimport React from \"react\";\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n SheetFooter,\n} from \"@/components/ui/sheet\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport * as z from \"zod\";\nimport {\n Form,\n FormControl,\n FormDescription,\n FormField,\n FormItem,\n FormLabel,\n FormMessage,\n} from \"@/components/ui/form\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Button } from \"@/components/ui/button\";\nimport { useDuckStore } from \"@/store\";\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Info } from \"lucide-react\";\n\nconst scopeEnum = z.enum([\"External\", \"OPFS\"]);\nconst nameSchema = z\n .string()\n .min(2, {\n message: \"Connection name must be at least 2 characters.\",\n })\n .max(30, {\n message: \"Connection name must not exceed 30 characters.\",\n });\n\nconst opfsSchema = z.object({\n name: nameSchema,\n scope: z.literal(scopeEnum.enum.OPFS),\n path: z.string().min(1, {\n message: \"Path is required.\",\n }),\n});\n\nconst externalSchema = z.object({\n name: nameSchema,\n scope: z.literal(scopeEnum.enum.External),\n host: z.string().url({\n message: \"Host must be a valid URL.\",\n }),\n port: z\n .string()\n .refine((val) => !isNaN(parseInt(val, 10)) || val === \"\", {\n message: \"Port must be a number.\",\n })\n .optional(),\n database: z.string().optional(),\n user: z.string().optional(),\n password: z.string().optional(),\n authMode: z.enum([\"none\", \"password\", \"api_key\"]).optional(),\n apiKey: z.string().optional(),\n});\n\nconst connectionSchema = z.discriminatedUnion(\"scope\", [opfsSchema, externalSchema]);\n\ntype ConnectionFormValues = z.infer;\n\ninterface ConnectionManagerProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n onSubmit: (values: ConnectionFormValues) => Promise;\n initialValues?: ConnectionFormValues;\n isEditMode?: boolean;\n}\n\nconst ConnectionManager: React.FC = ({\n open,\n onOpenChange,\n onSubmit,\n initialValues,\n isEditMode = false,\n}) => {\n const form = useForm({\n resolver: zodResolver(connectionSchema),\n defaultValues: initialValues || {\n name: \"Local DuckDB\",\n scope: \"External\" as const,\n host: \"http://localhost:9999\",\n port: \"\",\n database: \"\",\n user: \"\",\n password: \"\",\n authMode: \"none\" as const,\n apiKey: \"\",\n },\n mode: \"onChange\",\n });\n\n const currentScope = form.watch(\"scope\");\n const isLoadingExternalConnection = useDuckStore((s) => s.isLoadingExternalConnection);\n\n const handleSubmit = async (values: ConnectionFormValues) => {\n await onSubmit(values);\n form.reset();\n onOpenChange(false);\n };\n\n return (\n \n \n \n {isEditMode ? \"Edit Connection\" : \"Add New Connection\"}\n \n {isEditMode\n ? \"Modify existing connection details.\"\n : \"Connect to a DuckDB instance or browser storage.\"}\n \n \n\n
\n
\n \n (\n \n Connection Name\n \n \n \n \n \n )}\n />\n\n (\n \n Connection Type\n \n \n \n )}\n />\n\n {/* External Connection Fields */}\n {currentScope === \"External\" && (\n <>\n \n \n \n

Start HTTP server in DuckDB:

\n 
\n                        {`INSTALL httpserver FROM community;\nLOAD httpserver;\nSELECT httpserve_start('0.0.0.0', 9999, '');`}\n
\n \n \n\n (\n \n Host URL\n \n \n \n Full URL including protocol (http/https)\n \n \n )}\n />\n\n (\n \n Database (optional)\n \n \n \n \n \n )}\n />\n\n (\n \n Authentication\n \n \n \n )}\n />\n\n {form.watch(\"authMode\") === \"password\" && (\n
\n (\n \n Username\n \n \n \n \n \n )}\n />\n (\n \n Password\n \n \n \n \n \n )}\n />\n
\n )}\n\n {form.watch(\"authMode\") === \"api_key\" && (\n (\n \n API Key\n \n \n \n \n \n )}\n />\n )}\n \n )}\n\n {/* OPFS Fields */}\n {currentScope === \"OPFS\" && (\n <>\n \n \n \n Data persists in your browser across sessions.\n \n \n\n (\n \n Database File\n \n \n \n \n Filename for your database (e.g., data.db)\n \n \n \n )}\n />\n \n )}\n\n \n onOpenChange(false)}\n disabled={isLoadingExternalConnection}\n >\n Cancel\n \n \n \n \n \n
\n \n \n );\n};\n\nexport default ConnectionManager;\n" }, { "path": "src/components/duck-brain/DuckBrainCodeBlock.tsx", "content": "import React from \"react\";\nimport { Copy, Play, FileInput, Check, Loader2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { toast } from \"sonner\";\nimport { cn } from \"@/lib/utils\";\nimport type { QueryResultArtifact } from \"@/store\";\nimport ResultsArtifact from \"./ResultsArtifact\";\n\ninterface DuckBrainCodeBlockProps {\n sql: string;\n messageId: string;\n queryResult?: QueryResultArtifact;\n onExecute?: (messageId: string, sql: string) => void;\n onInsert?: (sql: string) => void;\n className?: string;\n}\n\nconst DuckBrainCodeBlock: React.FC = ({\n sql,\n messageId,\n queryResult,\n onExecute,\n onInsert,\n className,\n}) => {\n const [copied, setCopied] = React.useState(false);\n const isRunning = queryResult?.status === \"running\";\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(sql);\n setCopied(true);\n toast.success(\"SQL copied to clipboard\");\n setTimeout(() => setCopied(false), 2000);\n } catch {\n toast.error(\"Failed to copy\");\n }\n };\n\n const handleExecute = () => {\n if (onExecute && !isRunning) {\n onExecute(messageId, sql);\n }\n };\n\n const handleRetry = () => {\n handleExecute();\n };\n\n return (\n
\n {/* SQL Code Block */}\n
\n {/* SQL Code */}\n 
\n          {sql}\n
\n\n {/* Actions */}\n
\n \n\n {onInsert && (\n onInsert(sql)}\n className=\"h-7 text-xs gap-1\"\n >\n \n Insert\n \n )}\n\n {onExecute && (\n \n {isRunning ? (\n <>\n \n Running...\n \n ) : (\n <>\n \n Run\n \n )}\n \n )}\n
\n
\n\n {/* Results Artifact */}\n {queryResult && queryResult.status !== \"pending\" && (\n \n )}\n
\n );\n};\n\nexport default DuckBrainCodeBlock;\n" }, { "path": "src/components/duck-brain/DuckBrainInput.tsx", "content": "import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { Send, Square, Loader2, Table2, Columns } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn } from \"@/lib/utils\";\nimport type { DatabaseInfo } from \"@/store\";\nimport SchemaAutocomplete, {\n buildSchemaSuggestions,\n type SchemaSuggestion,\n} from \"./SchemaAutocomplete\";\n\n// Render text with styled @ mentions\nconst renderWithMentions = (text: string) => {\n const mentionRegex = /@([\\w.]+)/g;\n const parts: React.ReactNode[] = [];\n let lastIndex = 0;\n let match;\n\n while ((match = mentionRegex.exec(text)) !== null) {\n // Add text before the mention\n if (match.index > lastIndex) {\n parts.push(\n \n {text.slice(lastIndex, match.index)}\n \n );\n }\n\n // Add the mention as a styled pill\n const mention = match[1];\n const isColumn = mention.includes(\".\");\n parts.push(\n \n {isColumn ? : }\n {mention}\n \n );\n\n lastIndex = match.index + match[0].length;\n }\n\n // Add remaining text\n if (lastIndex < text.length) {\n parts.push(\n \n {text.slice(lastIndex)}\n \n );\n }\n\n return parts.length > 0 ? parts : text;\n};\n\ninterface DuckBrainInputProps {\n onSend: (message: string) => void;\n onAbort?: () => void;\n isGenerating: boolean;\n disabled?: boolean;\n placeholder?: string;\n databases?: DatabaseInfo[];\n className?: string;\n}\n\nconst DuckBrainInput: React.FC = ({\n onSend,\n onAbort,\n isGenerating,\n disabled = false,\n placeholder = \"Ask Duck Brain to write SQL... (@ for tables)\",\n databases = [],\n className,\n}) => {\n const [input, setInput] = useState(\"\");\n const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);\n const [suggestions, setSuggestions] = useState([]);\n const [activeIndex, setActiveIndex] = useState(0);\n const [mentionStart, setMentionStart] = useState(null);\n const textareaRef = useRef(null);\n const containerRef = useRef(null);\n\n // Auto-resize textarea\n useEffect(() => {\n const textarea = textareaRef.current;\n if (textarea) {\n textarea.style.height = \"auto\";\n textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;\n }\n }, [input]);\n\n // Detect @ mentions and filter suggestions\n const handleInputChange = useCallback(\n (e: React.ChangeEvent) => {\n const value = e.target.value;\n const cursorPos = e.target.selectionStart || 0;\n setInput(value);\n\n // Find the @ before cursor\n const textBeforeCursor = value.slice(0, cursorPos);\n const lastAtIndex = textBeforeCursor.lastIndexOf(\"@\");\n\n if (lastAtIndex !== -1) {\n // Check if there's a space between @ and cursor (mention ended)\n const textAfterAt = textBeforeCursor.slice(lastAtIndex + 1);\n const hasSpace = /\\s/.test(textAfterAt);\n\n if (!hasSpace) {\n // Active mention - show suggestions\n setMentionStart(lastAtIndex);\n const filter = textAfterAt;\n const filtered = buildSchemaSuggestions(databases, filter);\n setSuggestions(filtered);\n setIsAutocompleteOpen(filtered.length > 0);\n setActiveIndex(0);\n return;\n }\n }\n\n // No active mention\n setIsAutocompleteOpen(false);\n setMentionStart(null);\n },\n [databases]\n );\n\n // Insert selected suggestion\n const insertSuggestion = useCallback(\n (suggestion: SchemaSuggestion) => {\n if (mentionStart === null) return;\n\n const before = input.slice(0, mentionStart);\n const cursorPos = textareaRef.current?.selectionStart || input.length;\n const after = input.slice(cursorPos);\n\n // Insert with @ prefix so it renders as a pill\n const insertText = `@${suggestion.fullPath}`;\n const newInput = `${before}${insertText} ${after}`;\n\n setInput(newInput);\n setIsAutocompleteOpen(false);\n setMentionStart(null);\n\n // Focus and set cursor position\n setTimeout(() => {\n const newCursorPos = before.length + insertText.length + 1;\n textareaRef.current?.focus();\n textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n }, 0);\n },\n [input, mentionStart]\n );\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n // Handle autocomplete navigation\n if (isAutocompleteOpen && suggestions.length > 0) {\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setActiveIndex((prev) => (prev + 1) % suggestions.length);\n return;\n case \"ArrowUp\":\n e.preventDefault();\n setActiveIndex((prev) => (prev === 0 ? suggestions.length - 1 : prev - 1));\n return;\n case \"Tab\":\n case \"Enter\":\n if (suggestions[activeIndex]) {\n e.preventDefault();\n insertSuggestion(suggestions[activeIndex]);\n return;\n }\n break;\n case \"Escape\":\n e.preventDefault();\n setIsAutocompleteOpen(false);\n return;\n }\n }\n\n // Regular Enter to send (if not in autocomplete)\n if (e.key === \"Enter\" && !e.shiftKey && !isAutocompleteOpen) {\n e.preventDefault();\n handleSubmit();\n }\n };\n\n const handleSubmit = (e?: React.FormEvent) => {\n e?.preventDefault();\n if (!input.trim() || isGenerating || disabled) return;\n\n onSend(input.trim());\n setInput(\"\");\n setIsAutocompleteOpen(false);\n };\n\n // Close autocomplete when clicking outside\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n setIsAutocompleteOpen(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, []);\n\n // Check if input has any @ mentions to show overlay\n const hasMentions = /@[\\w.]+/.test(input);\n\n return (\n
\n {/* Visual overlay for styled mentions */}\n {hasMentions && (\n \n
\n {renderWithMentions(input)}\n
\n \n )}\n \n\n {/* Schema Autocomplete Popover */}\n \n\n
\n {isGenerating ? (\n \n \n \n ) : (\n \n {disabled ? : }\n \n )}\n
\n \n );\n};\n\nexport default DuckBrainInput;\n" }, { "path": "src/components/duck-brain/DuckBrainMessages.tsx", "content": "import React, { useRef, useEffect } from \"react\";\nimport { User, Bot, Table2, Columns } from \"lucide-react\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\nimport type { DuckBrainMessage } from \"@/store\";\nimport DuckBrainCodeBlock from \"./DuckBrainCodeBlock\";\nimport MarkdownContent from \"./MarkdownContent\";\n\n// Render @ mentions as styled pills\nconst renderMentions = (content: string) => {\n // Match @table_name or @table.column patterns\n const mentionRegex = /@([\\w.]+)/g;\n const parts: (string | React.ReactNode)[] = [];\n let lastIndex = 0;\n let match;\n\n while ((match = mentionRegex.exec(content)) !== null) {\n // Add text before the mention\n if (match.index > lastIndex) {\n parts.push(content.slice(lastIndex, match.index));\n }\n\n // Add the mention as a pill\n const mention = match[1];\n const isColumn = mention.includes(\".\");\n parts.push(\n \n {isColumn ? : }\n {mention}\n \n );\n\n lastIndex = match.index + match[0].length;\n }\n\n // Add remaining text\n if (lastIndex < content.length) {\n parts.push(content.slice(lastIndex));\n }\n\n return parts.length > 0 ? parts : content;\n};\n\ninterface DuckBrainMessagesProps {\n messages: DuckBrainMessage[];\n streamingContent: string;\n isGenerating: boolean;\n onExecuteSQL?: (messageId: string, sql: string) => void;\n onInsertSQL?: (sql: string) => void;\n className?: string;\n}\n\nconst DuckBrainMessages: React.FC = ({\n messages,\n streamingContent,\n isGenerating,\n onExecuteSQL,\n onInsertSQL,\n className,\n}) => {\n const scrollRef = useRef(null);\n const bottomRef = useRef(null);\n\n // Auto-scroll to bottom on new messages\n useEffect(() => {\n bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages, streamingContent]);\n\n const formatTime = (date: Date) => {\n return new Date(date).toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n };\n\n if (messages.length === 0 && !isGenerating) {\n return (\n
\n
\n \n

Hi! I'm Duck Brain

\n

Ask me to write SQL queries for your data

\n
\n
\n );\n }\n\n return (\n \n
\n {messages.map((message) => (\n \n {message.role === \"assistant\" && (\n
\n \n
\n )}\n\n \n \n {message.role === \"user\" ? (\n

{renderMentions(message.content)}

\n ) : (\n \n )}\n
\n\n {/* SQL Code Block for assistant messages with extracted SQL */}\n {message.role === \"assistant\" && message.sql && (\n \n )}\n\n \n {formatTime(message.timestamp)}\n \n \n\n {message.role === \"user\" && (\n
\n \n
\n )}\n \n ))}\n\n {/* Streaming response */}\n {isGenerating && streamingContent && (\n
\n
\n \n
\n
\n
\n

\n {streamingContent}\n \n

\n
\n
\n
\n )}\n\n {/* Loading indicator */}\n {isGenerating && !streamingContent && (\n
\n
\n \n
\n
\n
\n \n \n \n
\n
\n
\n )}\n\n
\n
\n \n );\n};\n\nexport default DuckBrainMessages;\n" }, { "path": "src/components/duck-brain/DuckBrainPanel.tsx", "content": "import React, { useCallback, useMemo } from \"react\";\nimport { Brain, X, Loader2, AlertCircle, Download, Trash2, RefreshCw, Cloud } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { useDuckStore, type AIProviderType } from \"@/store\";\nimport { AVAILABLE_MODELS, DEFAULT_MODEL } from \"@/lib/duckBrain\";\nimport { OPENAI_MODELS, ANTHROPIC_MODELS } from \"@/lib/duckBrain/providers/types\";\nimport DuckBrainMessages from \"./DuckBrainMessages\";\nimport DuckBrainInput from \"./DuckBrainInput\";\nimport { toast } from \"sonner\";\n\ninterface DuckBrainPanelProps {\n tabId: string;\n}\n\nconst DuckBrainPanel: React.FC = React.memo(({ tabId }) => {\n const duckBrain = useDuckStore((s) => s.duckBrain);\n const databases = useDuckStore((s) => s.databases);\n const toggleBrainPanel = useDuckStore((s) => s.toggleBrainPanel);\n const initializeDuckBrain = useDuckStore((s) => s.initializeDuckBrain);\n const generateSQL = useDuckStore((s) => s.generateSQL);\n const abortGeneration = useDuckStore((s) => s.abortGeneration);\n const clearBrainMessages = useDuckStore((s) => s.clearBrainMessages);\n const executeQueryInChat = useDuckStore((s) => s.executeQueryInChat);\n const updateTabQuery = useDuckStore((s) => s.updateTabQuery);\n const setAIProvider = useDuckStore((s) => s.setAIProvider);\n\n const {\n modelStatus,\n downloadProgress,\n downloadStatus,\n isWebGPUSupported,\n error,\n messages,\n isGenerating,\n streamingContent,\n aiProvider = \"webllm\",\n providerConfigs = {},\n } = duckBrain;\n\n // Get the display name for the current provider/model\n const providerDisplayInfo = useMemo(() => {\n if (aiProvider === \"openai\") {\n const config = providerConfigs.openai;\n if (config?.apiKey) {\n const model = OPENAI_MODELS.find((m) => m.id === config.modelId);\n return { name: model?.name || \"GPT-4o Mini\", isCloud: true };\n }\n } else if (aiProvider === \"anthropic\") {\n const config = providerConfigs.anthropic;\n if (config?.apiKey) {\n const model = ANTHROPIC_MODELS.find((m) => m.id === config.modelId);\n return { name: model?.name || \"Claude Sonnet 4\", isCloud: true };\n }\n } else if (aiProvider === \"openai-compatible\") {\n const config = providerConfigs[\"openai-compatible\"];\n if (config?.baseUrl && config?.modelId) {\n return { name: config.modelId, isCloud: true };\n }\n }\n // Default to local model\n const localModel = AVAILABLE_MODELS.find((m) => m.id === duckBrain.currentModel);\n return { name: localModel?.displayName || \"Local Model\", isCloud: false };\n }, [aiProvider, providerConfigs, duckBrain.currentModel]);\n\n // Build list of available providers for selector\n const availableProviders = useMemo(() => {\n const providers: { value: AIProviderType; label: string }[] = [];\n\n // Add WebLLM if model is loaded or loading\n if (modelStatus === \"ready\" || modelStatus === \"downloading\" || modelStatus === \"loading\") {\n const localModel = AVAILABLE_MODELS.find((m) => m.id === duckBrain.currentModel);\n providers.push({\n value: \"webllm\",\n label: localModel?.displayName || \"Local Model\",\n });\n }\n\n // Add OpenAI if configured\n if (providerConfigs.openai?.apiKey) {\n const model = OPENAI_MODELS.find((m) => m.id === providerConfigs.openai?.modelId);\n providers.push({\n value: \"openai\",\n label: model?.name || \"GPT-4o Mini\",\n });\n }\n\n // Add Anthropic if configured\n if (providerConfigs.anthropic?.apiKey) {\n const model = ANTHROPIC_MODELS.find((m) => m.id === providerConfigs.anthropic?.modelId);\n providers.push({\n value: \"anthropic\",\n label: model?.name || \"Claude Sonnet 4\",\n });\n }\n\n // Add OpenAI-Compatible if configured\n if (\n providerConfigs[\"openai-compatible\"]?.baseUrl &&\n providerConfigs[\"openai-compatible\"]?.modelId\n ) {\n providers.push({\n value: \"openai-compatible\",\n label: providerConfigs[\"openai-compatible\"].modelId,\n });\n }\n\n return providers;\n }, [modelStatus, duckBrain.currentModel, providerConfigs]);\n\n const handleSend = useCallback(\n async (message: string) => {\n await generateSQL(message);\n },\n [generateSQL]\n );\n\n const handleExecuteSQL = useCallback(\n async (messageId: string, sql: string) => {\n try {\n const result = await executeQueryInChat(messageId, sql);\n if (result) {\n toast.success(`Query returned ${result.rowCount} rows`);\n }\n } catch {\n // Error is already handled in the store and shown in ResultsArtifact\n }\n },\n [executeQueryInChat]\n );\n\n const handleInsertSQL = useCallback(\n (sql: string) => {\n updateTabQuery(tabId, sql);\n toast.success(\"SQL inserted into editor\");\n },\n [updateTabQuery, tabId]\n );\n\n const handleInitialize = useCallback(async () => {\n await initializeDuckBrain(DEFAULT_MODEL.id);\n }, [initializeDuckBrain]);\n\n // Render WebGPU not supported state\n if (isWebGPUSupported === false) {\n return (\n
\n
\n
\n \n \n \n

WebGPU Not Supported

\n

\n Duck Brain requires WebGPU for local AI processing. Please use Chrome 113+ or Edge\n 113+.\n

\n \n \n
\n
\n );\n }\n\n // Check if external provider is configured\n const hasExternalProvider =\n (aiProvider === \"openai\" && providerConfigs.openai?.apiKey) ||\n (aiProvider === \"anthropic\" && providerConfigs.anthropic?.apiKey) ||\n (aiProvider === \"openai-compatible\" &&\n providerConfigs[\"openai-compatible\"]?.baseUrl &&\n providerConfigs[\"openai-compatible\"]?.modelId);\n\n // Render idle state (not initialized) - only for WebLLM without external provider\n if ((modelStatus === \"idle\" || modelStatus === \"checking\") && !hasExternalProvider) {\n return (\n
\n
\n
\n
\n \n

Initialize Duck Brain

\n

\n Download an AI model to enable natural language to SQL conversion. This runs 100%\n locally in your browser.\n

\n
\n

\n Model: {DEFAULT_MODEL.displayName}\n

\n

\n Size: {DEFAULT_MODEL.size}\n

\n

First load downloads the model. Future loads use cache.

\n
\n \n
\n
\n
\n );\n }\n\n // Render downloading/loading state\n if (modelStatus === \"downloading\" || modelStatus === \"loading\") {\n return (\n
\n
\n
\n
\n \n

\n {modelStatus === \"downloading\" ? \"Downloading Model...\" : \"Loading Model...\"}\n

\n \n

\n {downloadStatus || `${downloadProgress}%`}\n

\n
\n
\n
\n );\n }\n\n // Render error state\n if (modelStatus === \"error\") {\n return (\n
\n
\n
\n
\n \n

Failed to Load Model

\n

\n {error || \"An unknown error occurred\"}\n

\n \n
\n
\n
\n );\n }\n\n // Render ready state with chat interface\n return (\n
\n 0}\n />\n\n {/* Status Badge & Provider Selector */}\n
\n
\n \n \n Ready\n \n {/* Provider selector - show when multiple providers available */}\n {availableProviders.length > 1 ? (\n setAIProvider(value as AIProviderType)}\n >\n \n
\n {providerDisplayInfo.isCloud && }\n \n
\n \n \n {availableProviders.map((p) => (\n \n {p.label}\n \n ))}\n \n \n ) : (\n
\n {providerDisplayInfo.isCloud && }\n {providerDisplayInfo.name}\n
\n )}\n
\n
\n\n {/* Messages */}\n \n\n {/* Input */}\n
\n \n
\n
\n );\n});\n\n// Header component\ninterface HeaderProps {\n onClose: () => void;\n onClear?: () => void;\n showClear?: boolean;\n}\n\nconst Header: React.FC = ({ onClose, onClear, showClear }) => (\n
\n
\n \n Duck Brain\n
\n
\n {showClear && onClear && (\n \n )}\n \n
\n
\n);\n\nexport default DuckBrainPanel;\n" }, { "path": "src/components/duck-brain/MarkdownContent.tsx", "content": "import React from \"react\";\nimport ReactMarkdown, { Components } from \"react-markdown\";\nimport { cn } from \"@/lib/utils\";\n\ninterface MarkdownContentProps {\n content: string;\n skipCodeBlocks?: boolean;\n className?: string;\n}\n\n/**\n * Renders markdown content with custom styling.\n * When skipCodeBlocks is true, removes ```sql...``` blocks since they're handled separately.\n */\nconst MarkdownContent: React.FC = ({\n content,\n skipCodeBlocks = false,\n className,\n}) => {\n // Remove ALL code blocks if they're handled separately by DuckBrainCodeBlock\n // Uses two passes to catch all variations:\n // 1. Fenced blocks with language identifier and newline: ```sql\\n...\\n```\n // 2. Fallback for any remaining code blocks: ```...```\n const processedContent = skipCodeBlocks\n ? content\n .replace(/```\\w*\\n[\\s\\S]*?```/g, \"\") // Code blocks with newline after lang\n .replace(/```[\\s\\S]*?```/g, \"\") // Any remaining code blocks\n .replace(/\\n{3,}/g, \"\\n\\n\") // Collapse multiple blank lines\n .trim()\n : content;\n\n // If nothing left after removing code blocks, don't render\n if (!processedContent) {\n return null;\n }\n\n const components: Components = {\n // Inline code styling\n code: ({ className: codeClassName, children, ...props }) => {\n // Check if this is a code block (has language class) vs inline code\n const isCodeBlock = codeClassName?.includes(\"language-\");\n\n if (isCodeBlock) {\n return (\n 
\n            \n              {children}\n            \n
\n );\n }\n\n // Inline code\n return (\n \n {children}\n \n );\n },\n // Paragraph styling\n p: ({ children }) =>

{children}

,\n // Strong/bold\n strong: ({ children }) => {children},\n // Emphasis/italic\n em: ({ children }) => {children},\n // Unordered list\n ul: ({ children }) =>
    {children}
,\n // Ordered list\n ol: ({ children }) =>
    {children}
,\n // List item\n li: ({ children }) =>
  • {children}
    • ,\n // Links\n a: ({ href, children }) => (\n \n {children}\n \n ),\n // Blockquote\n blockquote: ({ children }) => (\n
    \n {children}\n
    \n ),\n // Headings (rarely used in chat but good to have)\n h1: ({ children }) =>

    {children}

    ,\n h2: ({ children }) =>

    {children}

    ,\n h3: ({ children }) =>

    {children}

    ,\n // Horizontal rule\n hr: () =>
    ,\n };\n\n return (\n
    \n {processedContent}\n
    \n );\n};\n\nexport default MarkdownContent;\n" }, { "path": "src/components/duck-brain/ResultsArtifact.tsx", "content": "import React, { useState } from \"react\";\nimport { Loader2, AlertCircle, ChevronDown, ChevronUp, Table2, RotateCcw } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Collapsible, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport type { QueryResultArtifact } from \"@/store\";\n\ninterface ResultsArtifactProps {\n queryResult: QueryResultArtifact;\n onRetry?: () => void;\n className?: string;\n}\n\nconst MAX_INLINE_ROWS = 5;\nconst MAX_INLINE_COLUMNS = 6;\n\nconst ResultsArtifact: React.FC = ({ queryResult, onRetry, className }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const { status, data, error } = queryResult;\n\n // Running state\n if (status === \"running\") {\n return (\n \n \n Executing query...\n \n );\n }\n\n // Error state\n if (status === \"error\") {\n return (\n \n
    \n \n
    \n

    Query failed

    \n

    \n {error || \"Unknown error occurred\"}\n

    \n
    \n {onRetry && (\n \n )}\n
    \n \n );\n }\n\n // Pending state - shouldn't normally show, but handle it\n if (status === \"pending\" || !data) {\n return null;\n }\n\n // Success state - show results\n const { columns, columnTypes, data: rows, rowCount } = data;\n const hasMoreRows = rowCount > MAX_INLINE_ROWS;\n const hasMoreColumns = columns.length > MAX_INLINE_COLUMNS;\n const displayRows = isExpanded ? rows.slice(0, 50) : rows.slice(0, MAX_INLINE_ROWS);\n const displayColumns = columns.slice(0, MAX_INLINE_COLUMNS);\n\n return (\n
    \n {/* Header */}\n
    \n
    \n \n Results\n \n {rowCount.toLocaleString()} row{rowCount !== 1 ? \"s\" : \"\"}\n \n
    \n
    \n\n {/* Table */}\n
    \n
    \n \n \n {displayColumns.map((col, i) => (\n \n
    \n {col}\n {columnTypes[i]}\n
    \n \n ))}\n {hasMoreColumns && (\n     \n )}\n \n \n \n {displayRows.map((row, rowIdx) => (\n \n {displayColumns.map((col) => (\n \n {formatCellValue(row[col])}\n \n ))}\n {hasMoreColumns && }\n \n ))}\n \n
    \n +{columns.length - MAX_INLINE_COLUMNS} more\n
    ...
    \n
    \n\n {/* Expand/Collapse */}\n {hasMoreRows && (\n \n \n \n \n \n )}\n \n );\n};\n\n// Helper to format cell values for display\nfunction formatCellValue(value: unknown): string {\n if (value === null || value === undefined) {\n return \"NULL\";\n }\n if (typeof value === \"boolean\") {\n return value ? \"true\" : \"false\";\n }\n if (typeof value === \"object\") {\n return JSON.stringify(value);\n }\n if (typeof value === \"number\") {\n // Format numbers nicely\n if (Number.isInteger(value)) {\n return value.toLocaleString();\n }\n return value.toLocaleString(undefined, { maximumFractionDigits: 4 });\n }\n return String(value);\n}\n\nexport default ResultsArtifact;\n" }, { "path": "src/components/duck-brain/SchemaAutocomplete.tsx", "content": "import React, { useEffect, useRef } from \"react\";\nimport { Table2, Columns3 } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport type { DatabaseInfo } from \"@/store\";\n\nexport interface SchemaSuggestion {\n type: \"table\" | \"column\";\n name: string;\n fullPath: string;\n tableName?: string;\n columnType?: string;\n rowCount?: number;\n}\n\ninterface SchemaAutocompleteProps {\n isOpen: boolean;\n suggestions: SchemaSuggestion[];\n activeIndex: number;\n onSelect: (suggestion: SchemaSuggestion) => void;\n position: { top: number; left: number };\n className?: string;\n}\n\n/**\n * Builds suggestions from database schema\n */\nexport function buildSchemaSuggestions(\n databases: DatabaseInfo[],\n filter: string = \"\"\n): SchemaSuggestion[] {\n const suggestions: SchemaSuggestion[] = [];\n const lowerFilter = filter.toLowerCase();\n\n // Check if filter contains a dot (table.column)\n const dotIndex = filter.indexOf(\".\");\n const tableFilter = dotIndex > 0 ? filter.slice(0, dotIndex).toLowerCase() : null;\n const columnFilter = dotIndex > 0 ? filter.slice(dotIndex + 1).toLowerCase() : null;\n\n for (const db of databases) {\n for (const table of db.tables) {\n const tableName = db.name === \"memory\" ? table.name : `${db.name}.${table.name}`;\n\n // If filtering for columns of a specific table\n if (tableFilter) {\n if (table.name.toLowerCase() === tableFilter || tableName.toLowerCase() === tableFilter) {\n // Show columns for this table\n for (const col of table.columns) {\n if (!columnFilter || col.name.toLowerCase().startsWith(columnFilter)) {\n suggestions.push({\n type: \"column\",\n name: col.name,\n fullPath: `${table.name}.${col.name}`,\n tableName: table.name,\n columnType: col.type,\n });\n }\n }\n }\n } else {\n // Show tables matching filter\n if (!lowerFilter || table.name.toLowerCase().startsWith(lowerFilter)) {\n suggestions.push({\n type: \"table\",\n name: table.name,\n fullPath: tableName,\n rowCount: table.rowCount,\n });\n }\n }\n }\n }\n\n // Sort: tables first, then columns, alphabetically\n return suggestions\n .sort((a, b) => {\n if (a.type !== b.type) return a.type === \"table\" ? -1 : 1;\n return a.name.localeCompare(b.name);\n })\n .slice(0, 10); // Limit to 10 suggestions\n}\n\nconst SchemaAutocomplete: React.FC = ({\n isOpen,\n suggestions,\n activeIndex,\n onSelect,\n position,\n className,\n}) => {\n const listRef = useRef(null);\n\n // Scroll active item into view\n useEffect(() => {\n if (listRef.current && activeIndex >= 0) {\n const activeItem = listRef.current.children[activeIndex] as HTMLElement;\n activeItem?.scrollIntoView({ block: \"nearest\" });\n }\n }, [activeIndex]);\n\n if (!isOpen || suggestions.length === 0) {\n return null;\n }\n\n return (\n \n
    \n {suggestions.map((suggestion, index) => (\n onSelect(suggestion)}\n className={cn(\n \"w-full px-3 py-1.5 text-left text-sm flex items-center gap-2\",\n \"hover:bg-accent\",\n index === activeIndex && \"bg-accent\"\n )}\n >\n {suggestion.type === \"table\" ? (\n \n ) : (\n \n )}\n
    \n {suggestion.name}\n {suggestion.type === \"table\" && (\n \n {suggestion.rowCount ? `${suggestion.rowCount.toLocaleString()} rows` : \"table\"}\n \n )}\n {suggestion.type === \"column\" && suggestion.columnType && (\n {suggestion.columnType}\n )}\n
    \n \n ))}\n
    \n
    \n ↑↓ navigate\n ·\n Tab select\n ·\n Esc close\n
    \n \n );\n};\n\nexport default SchemaAutocomplete;\n" }, { "path": "src/components/editor/SqlEditor.tsx", "content": "import React, { useRef, useEffect, useState, useCallback } from \"react\";\nimport {\n Play,\n Loader2,\n Lightbulb,\n Command,\n Edit,\n Share2,\n Brain,\n Bookmark,\n ListTree,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { useDuckStore } from \"@/store\";\nimport { useTheme } from \"../theme/theme-provider\";\nimport { cn } from \"@/lib/utils\";\nimport { createEditor, useMonacoConfig, type EditorInstance } from \"./monacoConfig\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { Input } from \"@/components/ui/input\";\nimport { toast } from \"sonner\";\nimport { Badge } from \"@/components/ui/badge\";\nimport FloatingActionButton from \"@/components/common/FloatingActionButton\";\nimport { copyQueryURL } from \"@/hooks/useQueryFromURL\";\nimport SaveQueryDialog from \"@/components/saved-queries/SaveQueryDialog\";\nimport { ExplainPlanViewer } from \"@/components/workspace/ExplainPlanViewer\";\n\ninterface SqlEditorProps {\n tabId: string;\n title: string;\n className?: string;\n}\n\nconst SqlEditor: React.FC = ({ tabId, title, className }) => {\n const editorRef = useRef(null);\n const editorInstanceRef = useRef(null);\n const { theme } = useTheme();\n const tabs = useDuckStore((s) => s.tabs);\n const executeQuery = useDuckStore((s) => s.executeQuery);\n const isExecuting = useDuckStore((s) => !!s.executingTabs[tabId]);\n const updateTabTitle = useDuckStore((s) => s.updateTabTitle);\n const toggleBrainPanel = useDuckStore((s) => s.toggleBrainPanel);\n const duckBrain = useDuckStore((s) => s.duckBrain);\n const currentProfileId = useDuckStore((s) => s.currentProfileId);\n const monacoConfig = useMonacoConfig(theme);\n\n const currentTab = tabs.find((tab) => tab.id === tabId);\n const currentContent =\n currentTab?.type === \"sql\" && typeof currentTab.content === \"string\" ? currentTab.content : \"\";\n\n const [isEditingTitle, setIsEditingTitle] = useState(false);\n const [currentTitle, setCurrentTitle] = useState(title);\n const [saveDialogOpen, setSaveDialogOpen] = useState(false);\n const [explainOpen, setExplainOpen] = useState(false);\n const [explainText, setExplainText] = useState(\"\");\n\n // Stable callback for query execution\n const stableExecuteCallback = useCallback(\n async (query: string, queryTabId: string) => {\n await executeQuery(query, queryTabId);\n },\n [executeQuery] // Add executeQuery as a dependency\n );\n\n // Editor initialization effect\n useEffect(() => {\n if (!editorRef.current) return;\n\n // Initialize editor with stable configuration\n editorInstanceRef.current = createEditor(\n editorRef.current,\n monacoConfig,\n currentContent,\n tabId,\n stableExecuteCallback\n );\n\n // Cleanup function\n return () => {\n if (editorInstanceRef.current) {\n editorInstanceRef.current.dispose();\n editorInstanceRef.current = null;\n }\n };\n }, [tabId, monacoConfig, stableExecuteCallback]); // Keep stableExecuteCallback\n\n // Content sync effect\n useEffect(() => {\n const editor = editorInstanceRef.current?.editor;\n if (editor && currentContent !== editor.getValue()) {\n const position = editor.getPosition();\n editor.setValue(currentContent);\n if (position) {\n editor.setPosition(position);\n }\n }\n }, [currentContent]); // Only depend on currentContent\n\n const handleExecuteQuery = async () => {\n const editor = editorInstanceRef.current?.editor;\n if (!editor || isExecuting) return;\n\n const query = editor.getValue().trim();\n if (!query) return;\n\n try {\n await executeQuery(query, tabId);\n } catch (error) {\n console.error(\"Query execution failed:\", error);\n toast.error(\"Query execution failed\");\n }\n };\n\n const handleTitleChange = (e: React.ChangeEvent) => {\n setCurrentTitle(e.target.value);\n };\n\n const handleTitleSubmit = () => {\n if (currentTitle.trim()) {\n updateTabTitle(tabId, currentTitle);\n setIsEditingTitle(false);\n toast.success(`Tab title updated to ${currentTitle}`);\n } else {\n setCurrentTitle(title);\n setIsEditingTitle(false);\n toast.error(\"Title cannot be empty\");\n }\n };\n\n const handleTitleEdit = () => {\n setIsEditingTitle(true);\n };\n\n const handleExplainQuery = async () => {\n const editor = editorInstanceRef.current?.editor;\n if (!editor || isExecuting) return;\n\n const query = editor.getValue().trim();\n if (!query) return;\n\n try {\n // Run without tabId so the result is returned without overwriting the tab's data\n const result = await executeQuery(`EXPLAIN ANALYZE ${query}`);\n if (result && result.data?.length > 0) {\n // DuckDB returns rows with explain_key / explain_value — the analyzed_plan row has the full plan\n const planRow = result.data.find((row) => row[\"explain_key\"] === \"analyzed_plan\");\n const planText = planRow\n ? String(planRow[\"explain_value\"])\n : result.data.map((row) => String(row[\"explain_value\"] ?? \"\")).join(\"\\n\");\n setExplainText(planText);\n setExplainOpen(true);\n }\n } catch (error) {\n console.error(\"Explain failed:\", error);\n toast.error(\"Explain query failed\");\n }\n };\n\n const handleShareQuery = async () => {\n const editor = editorInstanceRef.current?.editor;\n if (!editor) return;\n\n const query = editor.getValue().trim();\n if (!query) {\n toast.error(\"No query to share\");\n return;\n }\n\n const success = await copyQueryURL(query, false);\n if (success) {\n toast.success(\"Query URL copied to clipboard\");\n } else {\n toast.error(\"Failed to copy URL\");\n }\n };\n\n return (\n
    \n {/* Header */}\n
    \n {/* Title (always visible) */}\n
    \n {isEditingTitle ? (\n {\n if (e.key === \"Enter\") {\n handleTitleSubmit();\n } else if (e.key === \"Escape\") {\n setCurrentTitle(title);\n setIsEditingTitle(false);\n }\n }}\n autoFocus\n />\n ) : (\n
    \n {currentTitle}\n
    \n )}\n
    \n\n {/* Desktop Actions */}\n
    \n
    \n \n \n \n \n \n \n
    \n

    \n \n SQL Editor Shortcuts\n

    \n
    \n
    \n
    \n Run Query\n \n Ctrl + Enter\n \n
    \n
    \n Run Selected\n \n Ctrl + Shift + Enter\n \n
    \n
    \n     \n     \n     \n
    \n \n \n \n \n \n \n

    Copy shareable URL

    \n     \n     \n     \n \n \n \n setSaveDialogOpen(true)}\n variant=\"ghost\"\n size=\"icon\"\n className=\"h-9 w-9\"\n disabled={!currentContent.trim() || !currentProfileId}\n >\n \n \n \n \n

    Save Query

    \n     \n     \n     \n \n \n \n \n \n \n \n \n

    {duckBrain.isPanelOpen ? \"Close Duck Brain\" : \"Open Duck Brain\"}

    \n     \n     \n     \n \n \n \n \n \n \n \n \n

    Explain Plan

    \n     \n     \n     \n \n {isExecuting ? (\n \n ) : (\n \n )}\n {isExecuting ? \"Running...\" : \"Run Query\"}\n \n
    \n
    \n\n {/* Editor */}\n
    \n
    \n
    \n\n {/* Mobile FAB */}\n \n\n \n\n \n
    \n );\n};\n\nexport default SqlEditor;\n" }, { "path": "src/components/editor/monacoConfig.ts", "content": "// monacoConfig.ts\nimport * as monaco from \"monaco-editor\";\nimport { useDuckStore } from \"@/store\";\nimport { useMemo } from \"react\";\nimport type { editor } from \"monaco-editor\";\nimport { toast } from \"sonner\";\nimport editorWorker from \"monaco-editor/esm/vs/editor/editor.worker?worker\";\nimport { format } from \"sql-formatter\";\nimport { sqlEscapeString } from \"@/lib/sqlSanitize\";\n\n// Types\nexport interface EditorInstance {\n editor: editor.IStandaloneCodeEditor;\n dispose: () => void;\n}\n\ninterface EditorConfig {\n language: string;\n theme: string;\n automaticLayout: boolean;\n tabSize: number;\n minimap: { enabled: boolean };\n padding: { top: number };\n suggestOnTriggerCharacters: boolean;\n quickSuggestions: boolean;\n wordBasedSuggestions: boolean;\n fontSize: number;\n lineNumbers: \"on\" | \"off\" | \"relative\";\n scrollBeyondLastLine: boolean;\n cursorBlinking: \"blink\" | \"smooth\" | \"phase\" | \"expand\" | \"solid\";\n matchBrackets: \"always\" | \"never\" | \"near\";\n rulers: number[];\n}\n\n// Worker configuration\nself.MonacoEnvironment = {\n getWorker(_workerId: string) {\n return new editorWorker();\n },\n};\n\n// Create editor instance\nexport const createEditor = (\n container: HTMLElement,\n config: EditorConfig,\n initialContent: string,\n tabId: string,\n executeQueryFn: (query: string, tabId: string) => Promise\n): EditorInstance => {\n const editor = monaco.editor.create(container, {\n ...config,\n value: initialContent,\n wordBasedSuggestions: config.wordBasedSuggestions ? \"allDocuments\" : \"off\",\n bracketPairColorization: { enabled: true },\n guides: { bracketPairs: true, indentation: true },\n renderWhitespace: \"selection\",\n smoothScrolling: true,\n cursorSmoothCaretAnimation: \"on\",\n formatOnPaste: true,\n formatOnType: true,\n snippetSuggestions: \"inline\",\n suggest: {\n preview: true,\n showMethods: true,\n showFunctions: true,\n showVariables: true,\n showWords: true,\n showColors: true,\n },\n });\n\n // Add commands\n editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, async () => {\n const query = editor.getValue().trim();\n if (!query) {\n toast.error(\"Please enter a query to execute\");\n return;\n }\n try {\n await executeQueryFn(query, tabId);\n } catch (err) {\n toast.error(\n `Query execution failed: ${err instanceof Error ? err.message : \"Unknown error\"}`\n );\n }\n });\n\n editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyF, () => {\n const formatAction = editor.getAction(\"editor.action.formatDocument\");\n formatAction?.run();\n });\n\n // Add context menu actions\n editor.addAction({\n id: \"execute-selection\",\n label: \"Execute Selected Query\",\n keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.Enter],\n contextMenuGroupId: \"navigation\",\n run: async (ed) => {\n const selection = ed.getSelection();\n const selectedText = selection ? ed.getModel()?.getValueInRange(selection) : \"\";\n\n if (selectedText?.trim()) {\n try {\n await executeQueryFn(selectedText.trim(), tabId);\n } catch (err) {\n toast.error(\n `Query execution failed: ${err instanceof Error ? err.message : \"Unknown error\"}`\n );\n }\n }\n },\n });\n\n editor.addAction({\n id: \"format-sql\",\n label: \"Format SQL\",\n keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyF],\n contextMenuGroupId: \"modification\",\n run: (ed) => {\n const text = ed.getValue();\n try {\n const formatted = format(text, {\n language: \"sql\",\n keywordCase: \"upper\",\n indentStyle: \"standard\",\n linesBetweenQueries: 2,\n });\n ed.setValue(formatted);\n } catch {\n toast.error(\"Failed to format SQL\");\n }\n },\n });\n\n // Setup content change listener with debounce\n let timeoutId: number;\n const disposable = editor.onDidChangeModelContent(() => {\n clearTimeout(timeoutId);\n timeoutId = window.setTimeout(() => {\n const newValue = editor.getValue();\n useDuckStore.getState().updateTabQuery(tabId, newValue);\n }, 300);\n });\n\n return {\n editor,\n dispose: () => {\n clearTimeout(timeoutId);\n disposable.dispose();\n editor.dispose();\n },\n };\n};\n\n// Create a lightweight editor for notebook cells (no auto-save to tab query)\nexport const createCellEditor = (\n container: HTMLElement,\n config: EditorConfig,\n initialContent: string,\n executeQueryFn: () => Promise,\n onContentChange: (value: string) => void\n): EditorInstance => {\n const editor = monaco.editor.create(container, {\n ...config,\n value: initialContent,\n wordBasedSuggestions: config.wordBasedSuggestions ? \"allDocuments\" : \"off\",\n bracketPairColorization: { enabled: true },\n guides: { bracketPairs: true, indentation: true },\n renderWhitespace: \"selection\",\n smoothScrolling: true,\n cursorSmoothCaretAnimation: \"on\",\n formatOnPaste: true,\n formatOnType: true,\n snippetSuggestions: \"inline\",\n suggest: {\n preview: true,\n showMethods: true,\n showFunctions: true,\n showVariables: true,\n showWords: true,\n showColors: true,\n },\n });\n\n // Ctrl/Cmd+Enter to run cell\n editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, async () => {\n const query = editor.getValue().trim();\n if (!query) return;\n try {\n await executeQueryFn();\n } catch (err) {\n toast.error(\n `Query execution failed: ${err instanceof Error ? err.message : \"Unknown error\"}`\n );\n }\n });\n\n // Shift+Enter to run cell (Jupyter-style)\n editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Enter, async () => {\n const query = editor.getValue().trim();\n if (!query) return;\n try {\n await executeQueryFn();\n } catch (err) {\n toast.error(\n `Query execution failed: ${err instanceof Error ? err.message : \"Unknown error\"}`\n );\n }\n });\n\n editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyF, () => {\n const formatAction = editor.getAction(\"editor.action.formatDocument\");\n formatAction?.run();\n });\n\n editor.addAction({\n id: \"format-sql\",\n label: \"Format SQL\",\n keybindings: [monaco.KeyMod.Alt | monaco.KeyCode.KeyF],\n contextMenuGroupId: \"modification\",\n run: (ed) => {\n const text = ed.getValue();\n try {\n const formatted = format(text, {\n language: \"sql\",\n keywordCase: \"upper\",\n indentStyle: \"standard\",\n linesBetweenQueries: 2,\n });\n ed.setValue(formatted);\n } catch {\n toast.error(\"Failed to format SQL\");\n }\n },\n });\n\n // Content change listener — calls provided callback instead of updateTabQuery\n let timeoutId: number;\n const disposable = editor.onDidChangeModelContent(() => {\n clearTimeout(timeoutId);\n timeoutId = window.setTimeout(() => {\n onContentChange(editor.getValue());\n }, 300);\n });\n\n return {\n editor,\n dispose: () => {\n clearTimeout(timeoutId);\n disposable.dispose();\n editor.dispose();\n },\n };\n};\n\n// Enhanced config hook with better defaults\nexport const useMonacoConfig = (theme: string): EditorConfig => {\n return useMemo(\n () => ({\n language: \"sql\",\n theme: theme === \"dark\" ? \"vs-dark\" : \"vs\",\n automaticLayout: true,\n tabSize: 2,\n minimap: { enabled: false },\n padding: { top: 10 },\n suggestOnTriggerCharacters: true,\n quickSuggestions: true,\n wordBasedSuggestions: false,\n fontSize: 12,\n lineNumbers: \"on\",\n scrollBeyondLastLine: false,\n cursorBlinking: \"blink\",\n matchBrackets: \"always\",\n rulers: [],\n }),\n [theme]\n );\n};\n\n// Register SQL formatting provider\nmonaco.languages.registerDocumentFormattingEditProvider(\"sql\", {\n provideDocumentFormattingEdits: (model) => {\n try {\n const formatted = format(model.getValue(), {\n language: \"sql\",\n keywordCase: \"upper\",\n indentStyle: \"standard\",\n linesBetweenQueries: 2,\n });\n\n return [\n {\n range: model.getFullModelRange(),\n text: formatted,\n },\n ];\n } catch (err) {\n console.error(\"SQL formatting failed:\", err);\n return [];\n }\n },\n});\n\n// Adapt to use the WASM autocompletion\ninterface AutocompleteItem {\n suggestion: string;\n}\nconst queryNative = async (\n connection: { query: (sql: string) => Promise<{ toArray: () => unknown[] }> },\n query: string\n): Promise => {\n const results = await connection.query(query);\n return results.toArray().map((row: unknown) => row as T);\n};\n\nmonaco.languages.registerCompletionItemProvider(\"sql\", {\n triggerCharacters: [\" \", \".\", \"(\", \",\"],\n async provideCompletionItems(model, position) {\n const word = model.getWordUntilPosition(position);\n const range = {\n startLineNumber: position.lineNumber,\n endLineNumber: position.lineNumber,\n startColumn: word.startColumn,\n endColumn: word.endColumn,\n };\n const textInRange = model.getValueInRange({\n startColumn: 0,\n endColumn: position.column,\n startLineNumber: position.lineNumber,\n endLineNumber: position.lineNumber,\n });\n\n // Get the connection and ensure it's valid\n const { connection } = useDuckStore.getState();\n if (!connection) {\n console.warn(\"No database connection available for autocompletion.\");\n return { suggestions: [] };\n }\n try {\n const escapedText = sqlEscapeString(textInRange);\n const query = `select suggestion from sql_auto_complete('${escapedText}')`;\n const items: AutocompleteItem[] = await queryNative(connection, query);\n\n const suggestions = items.map((item) => {\n return {\n label: String(item.suggestion),\n kind: monaco.languages.CompletionItemKind.Field,\n insertText: String(item.suggestion),\n range,\n };\n });\n\n return { suggestions };\n } catch (error) {\n console.error(\"Autocompletion query failed:\", error);\n return { suggestions: [] };\n }\n },\n});\n\n// Export everything needed\nexport default {\n createEditor,\n useMonacoConfig,\n};\n" }, { "path": "src/components/explorer/ColumnNode.tsx", "content": "import React, { useState } from \"react\";\nimport { ChevronRight, ChevronDown, Hash, Type, Calendar, ToggleLeft } from \"lucide-react\";\nimport { type ColumnStats } from \"@/store\";\n\ninterface ColumnNodeProps {\n stats: ColumnStats;\n}\n\nconst getTypeIcon = (type: string) => {\n const upperType = type.toUpperCase();\n if (\n upperType.includes(\"INT\") ||\n upperType.includes(\"DOUBLE\") ||\n upperType.includes(\"FLOAT\") ||\n upperType.includes(\"DECIMAL\")\n ) {\n return ;\n } else if (upperType.includes(\"DATE\") || upperType.includes(\"TIME\")) {\n return ;\n } else if (upperType.includes(\"BOOL\")) {\n return ;\n }\n return ;\n};\n\nconst getTypeColor = (type: string) => {\n const upperType = type.toUpperCase();\n if (\n upperType.includes(\"INT\") ||\n upperType.includes(\"DOUBLE\") ||\n upperType.includes(\"FLOAT\") ||\n upperType.includes(\"DECIMAL\")\n ) {\n return \"text-purple-500 bg-purple-500/10\";\n } else if (upperType.includes(\"DATE\") || upperType.includes(\"TIME\")) {\n return \"text-green-500 bg-green-500/10\";\n } else if (upperType.includes(\"BOOL\")) {\n return \"text-yellow-500 bg-yellow-500/10\";\n }\n return \"text-blue-500 bg-blue-500/10\";\n};\n\nconst getFillColor = (percentage: number) => {\n if (percentage >= 90) return \"bg-green-500\";\n if (percentage >= 50) return \"bg-yellow-500\";\n return \"bg-red-500\";\n};\n\nexport const ColumnNode: React.FC = ({ stats }) => {\n const [isExpanded, setIsExpanded] = useState(false);\n\n // Safe parsing function that handles both string and number types\n const parseValue = (value: string | number): number => {\n if (typeof value === \"number\") return value;\n if (typeof value === \"string\") {\n // Remove quotes if present\n const cleaned = value.replace(/\"/g, \"\");\n return parseFloat(cleaned) || 0;\n }\n return 0;\n };\n\n const nullPercentage = parseValue(stats.null_percentage);\n const fillPercentage = 100 - nullPercentage;\n const uniqueCount = stats.approx_unique ? parseValue(stats.approx_unique) : 0;\n const totalCount = parseValue(stats.count);\n\n const isNumeric =\n stats.column_type.toUpperCase().includes(\"INT\") ||\n stats.column_type.toUpperCase().includes(\"DOUBLE\") ||\n stats.column_type.toUpperCase().includes(\"FLOAT\") ||\n stats.column_type.toUpperCase().includes(\"DECIMAL\");\n\n return (\n
    \n setIsExpanded(!isExpanded)}\n >\n
    \n {isExpanded ? (\n \n ) : (\n \n )}\n\n
    \n {getTypeIcon(stats.column_type)}\n
    \n\n
    \n
    \n {stats.column_name}\n \n {stats.column_type}\n \n
    \n\n {!isExpanded && (\n
    \n
    \n
    \n
    \n \n
    \n \n {fillPercentage.toFixed(0)}%\n \n
    \n
    \n \n {uniqueCount.toLocaleString()} unique\n \n
    \n )}\n
    \n
    \n
    \n\n {isExpanded && (\n
    \n {/* Fill Percentage */}\n
    \n
    \n Data Fill\n {fillPercentage.toFixed(1)}%\n
    \n
    \n \n
    \n
    \n\n {/* Basic Stats */}\n
    \n
    \n Total:\n {totalCount.toLocaleString()}\n
    \n
    \n Unique:\n {uniqueCount.toLocaleString()}\n
    \n
    \n Nulls:\n {((nullPercentage / 100) * totalCount).toFixed(0)}\n
    \n
    \n Cardinality:\n \n {isNaN((uniqueCount / totalCount) * 100)\n ? \"0.0\"\n : ((uniqueCount / totalCount) * 100).toFixed(1)}\n %\n \n
    \n
    \n\n {/* Numeric Stats */}\n {isNumeric && stats.avg && (\n <>\n
    \n
    \n
    \n Min:\n {parseValue(stats.min!).toLocaleString()}\n
    \n
    \n Max:\n {parseValue(stats.max!).toLocaleString()}\n
    \n
    \n Avg:\n \n {parseValue(stats.avg).toLocaleString(undefined, {\n maximumFractionDigits: 2,\n })}\n \n
    \n {stats.std && (\n
    \n Std Dev:\n \n {parseValue(stats.std).toLocaleString(undefined, {\n maximumFractionDigits: 2,\n })}\n \n
    \n )}\n
    \n\n {stats.q25 && stats.q50 && stats.q75 && (\n <>\n
    \n
    \n
    \n Quartiles\n
    \n
    \n Q1 (25%):\n \n {parseValue(stats.q25).toLocaleString()}\n \n
    \n
    \n Q2 (50%):\n \n {parseValue(stats.q50).toLocaleString()}\n \n
    \n
    \n Q3 (75%):\n \n {parseValue(stats.q75).toLocaleString()}\n \n
    \n
    \n \n )}\n \n )}\n\n {/* String Stats */}\n {!isNumeric && stats.min && stats.max && (\n <>\n
    \n
    \n
    \n Min:\n \n {stats.min}\n \n
    \n
    \n Max:\n \n {stats.max}\n \n
    \n
    \n \n )}\n
    \n )}\n
    \n );\n};\n\nexport default ColumnNode;\n" }, { "path": "src/components/explorer/DataExplorer.tsx", "content": "import React, { useState, useCallback, lazy, Suspense } from \"react\";\nimport { useDuckStore } from \"@/store\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Database, EllipsisVertical, FileUp, Plus, RefreshCw, Server } from \"lucide-react\";\n\nconst FileImporter = lazy(() => import(\"./FileImporter\"));\nimport TreeNode, { TreeNodeData } from \"./TreeNode\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport FolderBrowser from \"@/components/folders/FolderBrowser\";\nimport CloudBrowser from \"@/components/cloud/CloudBrowser\";\nimport { type FileEntry, fileSystemService } from \"@/lib/fileSystem\";\nimport { type ImportOptions } from \"@/components/common/ImportOptionsPopover\";\nimport { toast } from \"sonner\";\n\nexport default function DataExplorer() {\n const [isSheetOpen, setIsSheetOpen] = useState(false);\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const databases = useDuckStore((s) => s.databases);\n const isLoading = useDuckStore((s) => s.isLoading);\n const currentConnection = useDuckStore((s) => s.currentConnection);\n const importFile = useDuckStore((s) => s.importFile);\n const fetchDatabasesAndTablesInfo = useDuckStore((s) => s.fetchDatabasesAndTablesInfo);\n const isFileSystemSupported = useDuckStore((s) => s.isFileSystemSupported);\n const schemaFetchError = useDuckStore((s) => s.schemaFetchError);\n const isLoadingDbTablesFetch = useDuckStore((s) => s.isLoadingDbTablesFetch);\n const [searchTerm, setSearchTerm] = useState(\"\");\n\n const handleSearch = (e: React.ChangeEvent) => {\n setSearchTerm(e.target.value);\n };\n\n // Handle file import from mounted folder\n const handleFolderFileImport = useCallback(\n async (folderId: string, file: FileEntry, options: ImportOptions) => {\n const { tableName, importMode } = options;\n const modeLabel = importMode === \"view\" ? \"Linking\" : \"Importing\";\n const resultLabel = importMode === \"view\" ? \"view\" : \"table\";\n\n try {\n toast.loading(`${modeLabel} ${file.name}...`, { id: \"folder-import\" });\n\n // Read file from folder\n const fileData = await fileSystemService.readFile(folderId, file.path);\n const buffer = await fileData.arrayBuffer();\n\n // Determine file type from extension\n const ext = file.extension.replace(\".\", \"\").toLowerCase();\n let fileType = ext;\n if (ext === \"jsonl\" || ext === \"ndjson\") fileType = \"json\";\n\n await importFile(file.name, buffer, tableName, fileType, undefined, { importMode });\n await fetchDatabasesAndTablesInfo();\n\n toast.success(`Created ${resultLabel} \"${tableName}\" from \"${file.name}\"`, {\n id: \"folder-import\",\n });\n } catch (error) {\n console.error(\"Failed to import file:\", error);\n toast.error(\n `Failed to import: ${error instanceof Error ? error.message : \"Unknown error\"}`,\n { id: \"folder-import\" }\n );\n }\n },\n [importFile, fetchDatabasesAndTablesInfo]\n );\n const buildTreeData = () => {\n const treeData: TreeNodeData[] = databases.map((db) => ({\n name: db.name,\n type: \"database\",\n children: db.tables.map((table) => ({\n name: table.name,\n type: \"table\",\n })),\n }));\n return treeData;\n };\n const treeData = buildTreeData();\n const isExternal = currentConnection?.scope === \"External\";\n\n const handleDragOver = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n if (e.dataTransfer.types.includes(\"Files\") && !isExternal) {\n setIsDraggingOver(true);\n }\n },\n [isExternal]\n );\n\n const handleDragLeave = useCallback((e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n // Only set false if we're leaving the container (not entering a child)\n if (e.currentTarget === e.target || !e.currentTarget.contains(e.relatedTarget as Node)) {\n setIsDraggingOver(false);\n }\n }, []);\n\n const handleDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n setIsDraggingOver(false);\n if (isExternal || !e.dataTransfer.files.length) return;\n setIsSheetOpen(true);\n },\n [isExternal]\n );\n\n return (\n \n {isDraggingOver && (\n
    \n
    \n \n

    Drop files to import

    \n
    \n
    \n )}\n {isLoading && (\n
    \n

    Loading databases...

    \n
    \n )}\n\n \n
    \n
    \n {isExternal ? (\n \n ) : (\n \n )}\n Explorer\n
    \n\n
    \n fetchDatabasesAndTablesInfo()}\n disabled={isLoadingDbTablesFetch}\n title=\"Refresh Schema\"\n >\n \n \n\n {/* Import menu - only show for non-external connections */}\n {!isExternal && (\n \n \n \n \n \n \n \n setIsSheetOpen(true)}>\n \n Import Data\n \n \n \n \n \n )}\n
    \n\n \n \n \n
    \n     \n\n \n
    \n {/* Databases Section */}\n {databases.length > 0 ? (\n
    \n \n
    \n \n Databases\n \n
    \n
      \n {treeData.map((node, index) => (\n {}}\n />\n ))}\n
    \n
    \n ) : (\n
    \n
    \n {isExternal ? (\n <>\n \n {schemaFetchError ? (\n <>\n

    Connection error

    \n

    \n {schemaFetchError}\n

    \n \n ) : (\n <>\n

    \n No schema found from the remote server.\n

    \n

    \n Try refreshing or run queries directly in the editor.\n

    \n \n )}\n \n ) : (\n <>\n \n

    \n No databases found. Start by importing some data!\n

    \n \n )}\n
    \n {isExternal ? (\n fetchDatabasesAndTablesInfo()}\n >\n \n Refresh Schema\n \n ) : (\n \n )}\n
    \n )}\n\n {/* Folder Browser Section - only show if supported and not external */}\n {isFileSystemSupported && !isExternal && (\n
    \n \n
    \n )}\n\n {/* Cloud Storage Section */}\n
    \n \n
    \n
    \n     \n \n );\n}\n" }, { "path": "src/components/explorer/FileImporter.tsx", "content": "import React, { useCallback, useState, useMemo, useRef, useEffect } from \"react\";\nimport { format } from \"date-fns\";\nimport {\n Upload,\n FileWarning,\n FileCheck,\n Loader2,\n X,\n FileIcon,\n Calendar,\n HardDrive,\n AlertTriangle,\n RefreshCw,\n Link as LinkIcon,\n Link2,\n Code,\n ArrowLeft,\n Check,\n ChevronDown,\n ChevronUp,\n Eye,\n Table,\n} from \"lucide-react\";\nimport { useDuckStore, type QueryResult } from \"@/store\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport DuckUITable from \"@/components/table/DuckUItable\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"@/components/ui/sheet\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { cn, generateUUID } from \"@/lib/utils\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { z } from \"zod\";\nimport { toast } from \"sonner\";\n\n// Constants\nconst ACCEPTED_FILE_TYPES = {\n \"text/csv\": [\".csv\"],\n \"application/json\": [\".json\"],\n \"application/octet-stream\": [\".parquet\", \".arrow\", \".db\", \".ddb\"],\n \"application/vnd.duckdb\": [\".duckdb\", \".db\", \".ddb\"],\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\": [\".xlsx\"],\n} as const;\n\nconst MAX_FILE_SIZE = 3 * 1024 * 1024 * 1024; // 3GB\nconst SUPPORTED_FILE_EXTENSIONS = [\n \"csv\",\n \"json\",\n \"parquet\",\n \"arrow\",\n \"duckdb\",\n \"db\",\n \"ddb\",\n \"xlsx\",\n] as const;\nconst MAX_CONCURRENT_UPLOADS = 3;\nconst PREVIEW_ROW_LIMIT = 20;\n\n// DuckDB types for schema customization\nconst DUCKDB_TYPES = [\n \"VARCHAR\",\n \"INTEGER\",\n \"BIGINT\",\n \"DOUBLE\",\n \"DECIMAL\",\n \"DATE\",\n \"TIMESTAMP\",\n \"BOOLEAN\",\n \"JSON\",\n \"BLOB\",\n] as const;\n\n// Types\ntype FileExtension = (typeof SUPPORTED_FILE_EXTENSIONS)[number];\n\ninterface FileWithPreview extends File {\n preview?: string;\n}\n\ninterface UploadError {\n id: string;\n message: string;\n file?: string;\n severity: \"error\" | \"warning\";\n}\n\ninterface FileImportState {\n fileName: string;\n status: \"pending\" | \"uploading\" | \"processing\" | \"success\" | \"error\";\n progress?: number;\n error?: string;\n}\n\n// CSV import options\ninterface CsvImportOptions {\n ignoreErrors: boolean;\n nullPadding: boolean;\n allVarchar: boolean;\n header: boolean;\n delimiter: string;\n autoDetect: boolean;\n // Advanced options\n quote?: string;\n escape?: string;\n skip?: number;\n nullStr?: string;\n dateFormat?: string;\n timestampFormat?: string;\n sampleSize?: number;\n}\n\n// Schema customization\ninterface SchemaColumn {\n originalName: string;\n newName: string;\n type: string;\n included: boolean;\n}\n\ninterface FileImporterProps {\n isSheetOpen: boolean;\n setIsSheetOpen: (open: boolean) => void;\n context?: string;\n}\n\ninterface FileDetailsProps {\n file: FileWithPreview;\n tableName: string;\n onTableNameChange: (name: string) => void;\n status: FileImportState;\n onRemove: () => void;\n onRetry: () => void;\n csvOptions?: CsvImportOptions;\n onCsvOptionsChange?: (options: CsvImportOptions) => void;\n}\n\n// Utility Functions\nconst formatFileSize = (bytes: number): string => {\n if (bytes === 0) return \"0 Bytes\";\n const k = 1024;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;\n};\n\nconst getErrorSuggestion = (errorMessage: string): string | null => {\n const lowerError = errorMessage.toLowerCase();\n\n // Network/URL errors\n if (\n lowerError.includes(\"fetch\") ||\n lowerError.includes(\"network\") ||\n lowerError.includes(\"cors\")\n ) {\n return \"Check your internet connection and ensure the URL is publicly accessible. CORS restrictions may prevent access to some URLs.\";\n }\n\n // File format errors\n if (\n lowerError.includes(\"invalid\") &&\n (lowerError.includes(\"csv\") || lowerError.includes(\"json\") || lowerError.includes(\"parquet\"))\n ) {\n return \"The file format may be corrupted or not match the expected structure. Try opening the file locally to verify its contents.\";\n }\n\n // Parsing errors\n if (lowerError.includes(\"parse\") || lowerError.includes(\"syntax\")) {\n return \"Data parsing failed. Consider adjusting CSV options like delimiter, quote character, or enabling 'ignore errors'.\";\n }\n\n // Type detection errors\n if (lowerError.includes(\"type\") || lowerError.includes(\"column\")) {\n return \"Column type detection failed. Try enabling 'auto-detect types' or manually specify column types in schema customization.\";\n }\n\n // Authentication errors\n if (\n lowerError.includes(\"401\") ||\n lowerError.includes(\"403\") ||\n lowerError.includes(\"unauthorized\")\n ) {\n return \"Access denied. The URL may require authentication or the resource is not publicly accessible.\";\n }\n\n // Not found errors\n if (lowerError.includes(\"404\") || lowerError.includes(\"not found\")) {\n return \"The file was not found at the specified URL. Verify the URL is correct and the file still exists.\";\n }\n\n // Memory/size errors\n if (lowerError.includes(\"memory\") || lowerError.includes(\"out of\")) {\n return \"The file may be too large to process. Try importing a smaller file or use sampling options.\";\n }\n\n // Table name errors\n if (lowerError.includes(\"table\") && lowerError.includes(\"exist\")) {\n return \"A table with this name already exists. Choose a different name or the existing table will be replaced.\";\n }\n\n return null;\n};\n\nconst getFileIcon = (fileType: string) => {\n const iconProps = { className: \"w-8 h-8\" };\n switch (fileType.toLowerCase()) {\n case \"csv\":\n return ;\n case \"json\":\n return ;\n case \"parquet\":\n return ;\n case \"arrow\":\n return ;\n case \"duckdb\":\n return ;\n case \"xlsx\":\n return ;\n default:\n return ;\n }\n};\n\n// Zod Schema for Table Name Validation\nconst tableNameSchema = z\n .string()\n .trim()\n .min(1, \"Table name cannot be empty\")\n .regex(/^[a-zA-Z0-9_]+$/, \"Table name can only contain letters, numbers, and underscores\");\n\nconst FileDetails: React.FC = ({\n file,\n tableName,\n onTableNameChange,\n status,\n onRemove,\n onRetry,\n csvOptions,\n onCsvOptionsChange,\n}) => {\n const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);\n const fileType = file.name.split(\".\").pop()?.toLowerCase() || \"\";\n const lastModified = new Date(file.lastModified);\n const isCsvFile = fileType === \"csv\";\n\n const tableNameError = useMemo(() => {\n try {\n tableNameSchema.parse(tableName);\n return null;\n } catch (error) {\n return error instanceof z.ZodError ? error.issues[0].message : \"Invalid table name\";\n }\n }, [tableName]);\n\n // Handle CSV option changes\n const handleCsvOptionChange = (\n key: keyof CsvImportOptions,\n value: string | boolean | number | undefined\n ) => {\n if (onCsvOptionsChange && csvOptions) {\n onCsvOptionsChange({\n ...csvOptions,\n [key]: value,\n });\n }\n };\n\n return (\n
    \n
    \n
    {getFileIcon(fileType)}
    \n\n
    \n
    \n
    \n

    {file.name}

    \n
    \n \n \n \n \n {formatFileSize(file.size)}\n \n File size\n \n \n\n \n \n \n \n {format(lastModified, \"MMM dd, yyyy\")}\n \n Last modified\n \n \n\n {fileType}\n
    \n
    \n
    \n {status.status === \"error\" && (\n \n \n \n )}\n \n \n \n
    \n
    \n\n
    \n \n onTableNameChange(e.target.value)}\n placeholder=\"Enter table name\"\n className=\"max-w-md p-2 ml-1\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n {tableNameError &&

    {tableNameError}

    }\n

    \n This name will be used to reference the table in SQL queries\n

    \n
    \n\n {/* CSV import options */}\n {isCsvFile && csvOptions && (\n
    \n
    \n

    CSV Import Options

    \n setShowAdvancedOptions(!showAdvancedOptions)}\n >\n {showAdvancedOptions ? \"Hide Options\" : \"Show Options\"}\n \n
    \n\n {showAdvancedOptions && (\n
    \n
    \n
    \n handleCsvOptionChange(\"header\", e.target.checked)}\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n className=\"h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary\"\n />\n \n
    \n\n
    \n handleCsvOptionChange(\"autoDetect\", e.target.checked)}\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n className=\"h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary\"\n />\n \n
    \n\n
    \n handleCsvOptionChange(\"ignoreErrors\", e.target.checked)}\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n className=\"h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary\"\n />\n \n
    \n\n
    \n handleCsvOptionChange(\"nullPadding\", e.target.checked)}\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n className=\"h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary\"\n />\n \n
    \n
    \n\n
    \n \n
    \n handleCsvOptionChange(\"delimiter\", e.target.value)}\n placeholder=\"Delimiter character\"\n className=\"h-8\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n
    \n

    \n Common values: , (comma), ; (semicolon), tab, pipe (|)\n

    \n
    \n\n {/* Advanced CSV Options */}\n
    \n
    Advanced Options
    \n\n
    \n
    \n \n handleCsvOptionChange(\"quote\", e.target.value)}\n placeholder={`\" (default)`}\n className=\"h-8 text-xs\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n
    \n\n
    \n \n handleCsvOptionChange(\"escape\", e.target.value)}\n placeholder={`\" (default)`}\n className=\"h-8 text-xs\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n
    \n\n
    \n \n \n handleCsvOptionChange(\"skip\", parseInt(e.target.value, 10) || undefined)\n }\n placeholder=\"0\"\n className=\"h-8 text-xs\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n
    \n\n
    \n \n \n handleCsvOptionChange(\n \"sampleSize\",\n parseInt(e.target.value, 10) || undefined\n )\n }\n placeholder=\"Auto\"\n className=\"h-8 text-xs\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n
    \n
    \n\n
    \n \n handleCsvOptionChange(\"nullStr\", e.target.value)}\n placeholder=\"Empty values treated as NULL\"\n className=\"h-8 text-xs\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n

    \n Values matching this string will be treated as NULL\n

    \n
    \n\n
    \n
    \n \n handleCsvOptionChange(\"dateFormat\", e.target.value)}\n placeholder=\"ISO 8601\"\n className=\"h-8 text-xs\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n
    \n\n
    \n \n handleCsvOptionChange(\"timestampFormat\", e.target.value)}\n placeholder=\"ISO 8601\"\n className=\"h-8 text-xs\"\n disabled={status.status === \"uploading\" || status.status === \"processing\"}\n />\n
    \n
    \n
    \n
    \n )}\n
    \n )}\n\n {status.status === \"uploading\" && status.progress !== undefined && (\n
    \n Uploading... {status.progress}%\n \n
    \n )}\n\n {status.status === \"success\" && (\n
    \n \n Successfully imported\n
    \n )}\n\n {status.status === \"error\" && status.error && (\n
    \n \n {status.error}\n
    \n )}\n
    \n
    \n
    \n );\n};\n\nconst FileImporter: React.FC = ({ isSheetOpen, setIsSheetOpen }) => {\n const importFile = useDuckStore((s) => s.importFile);\n const executeQuery = useDuckStore((s) => s.executeQuery);\n const [activeTab, setActiveTab] = useState(\"upload\");\n const [files, setFiles] = useState([]);\n const [tableNames, setTableNames] = useState>({});\n const [isUploading, setIsUploading] = useState(false);\n const [errors, setErrors] = useState([]);\n const [importStates, setImportStates] = useState>({});\n const [csvOptions, setCsvOptions] = useState>({});\n const [isDragActive, setIsDragActive] = useState(false);\n const [importMode, setImportMode] = useState<\"table\" | \"view\">(\"table\");\n const fileInputRef = useRef(null);\n const abortControllerRef = useRef(null);\n\n // URL import state\n const [urlInput, setUrlInput] = useState(\"\");\n const [urlTableName, setUrlTableName] = useState(\"\");\n const [isUrlImporting, setIsUrlImporting] = useState(false);\n\n // Preview state (Phase 2 - used in PreviewTable component)\n const [isPreviewMode, setIsPreviewMode] = useState(false);\n const [isPreviewing, setIsPreviewing] = useState(false);\n const [previewData, setPreviewData] = useState(null);\n const [previewSource, setPreviewSource] = useState<\"file\" | \"url\" | null>(null);\n const [previewFileName, setPreviewFileName] = useState(\"\");\n const [previewTableName, setPreviewTableName] = useState(\"\");\n\n // Schema customization state (Phase 2 - used in SchemaEditor component)\n const [schemaColumns, setSchemaColumns] = useState([]);\n const [isSchemaCustomizing, setIsSchemaCustomizing] = useState(false);\n\n // Query import state (Phase 2 - Query Import feature)\n const [queryInput, setQueryInput] = useState(\"\");\n const [queryTableName, setQueryTableName] = useState(\"\");\n const [isQueryImporting, setIsQueryImporting] = useState(false);\n\n // Default CSV import options\n const defaultCsvOptions: CsvImportOptions = {\n ignoreErrors: true,\n nullPadding: true,\n allVarchar: false,\n header: true,\n delimiter: \",\",\n autoDetect: true,\n };\n\n const hasFilesToImport = useMemo(() => files.length > 0, [files]);\n\n const allFilesSuccess = useMemo(() => {\n if (!files.length) return false;\n return files.every((file) => importStates[file.name]?.status === \"success\");\n }, [files, importStates]);\n\n const validateFile = (file: File): UploadError[] => {\n const errors: UploadError[] = [];\n const extension = file.name.split(\".\").pop()?.toLowerCase() as FileExtension;\n\n if (!extension || !SUPPORTED_FILE_EXTENSIONS.includes(extension)) {\n errors.push({\n id: generateUUID(),\n file: file.name,\n message: `Unsupported file type: .${extension}`,\n severity: \"error\",\n });\n toast.error(`Unsupported file type: .${extension}`);\n }\n\n if (file.size > MAX_FILE_SIZE) {\n errors.push({\n id: generateUUID(),\n file: file.name,\n message: `File exceeds maximum size of ${formatFileSize(MAX_FILE_SIZE)}`,\n severity: \"error\",\n });\n toast.warning(`File exceeds maximum size of ${formatFileSize(MAX_FILE_SIZE)}`);\n }\n\n return errors;\n };\n\n const updateImportState = (fileName: string, state: Partial) => {\n setImportStates((prev) => ({\n ...prev,\n [fileName]: {\n ...prev[fileName],\n ...state,\n },\n }));\n };\n\n const onFileChange = useCallback(\n (newFiles: File[]) => {\n setErrors([]);\n const newErrors: UploadError[] = [];\n const validFiles: FileWithPreview[] = [];\n\n newFiles.forEach((file) => {\n const fileErrors = validateFile(file);\n if (fileErrors.length > 0) {\n newErrors.push(...fileErrors);\n } else {\n validFiles.push(\n Object.assign(file, {\n preview: URL.createObjectURL(file),\n })\n );\n }\n });\n\n if (newErrors.length > 0) {\n setErrors(newErrors);\n }\n\n setFiles((prevFiles) => [...prevFiles, ...validFiles]);\n\n const newTableNames = validFiles.reduce>(\n (acc, file) => ({\n ...acc,\n [file.name]: file.name\n .replace(/\\.[^/.]+$/, \"\")\n .replace(/[^a-zA-Z0-9_]/g, \"_\")\n .toLowerCase(),\n }),\n {}\n );\n\n setTableNames((prev) => ({ ...prev, ...newTableNames }));\n\n // Initialize CSV options for any CSV files\n const newCsvOptions = validFiles.reduce>((acc, file) => {\n const extension = file.name.split(\".\").pop()?.toLowerCase();\n if (extension === \"csv\") {\n acc[file.name] = { ...defaultCsvOptions };\n }\n return acc;\n }, {});\n\n setCsvOptions((prev) => ({ ...prev, ...newCsvOptions }));\n\n const initialImportStates = validFiles.reduce>(\n (acc, file) => {\n acc[file.name] = {\n fileName: file.name,\n status: \"pending\",\n };\n return acc;\n },\n {}\n );\n\n setImportStates((prev) => ({ ...prev, ...initialImportStates }));\n },\n [toast]\n );\n\n const handleDrop = useCallback(\n (event: React.DragEvent) => {\n event.preventDefault();\n setIsDragActive(false);\n if (!event.dataTransfer.files || event.dataTransfer.files.length === 0) return;\n onFileChange(Array.from(event.dataTransfer.files));\n },\n [onFileChange]\n );\n\n const handleDragOver = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n setIsDragActive(true);\n }, []);\n\n const handleDragLeave = useCallback((event: React.DragEvent) => {\n event.preventDefault();\n setIsDragActive(false);\n }, []);\n\n const handleFileInputChange = useCallback(\n (event: React.ChangeEvent) => {\n if (event.target.files && event.target.files.length > 0) {\n onFileChange(Array.from(event.target.files));\n }\n if (fileInputRef.current) {\n fileInputRef.current.value = \"\";\n }\n },\n [onFileChange]\n );\n\n const handleFileUpload = async () => {\n setIsUploading(true);\n setErrors([]);\n\n try {\n const uploadPromises = files.map(async (file) => {\n const state = importStates[file.name];\n if (state?.status === \"success\") return;\n\n const cleanTableName = tableNames[file.name];\n try {\n tableNameSchema.parse(cleanTableName);\n } catch (error) {\n const errorMessage =\n error instanceof z.ZodError ? error.issues[0].message : \"Invalid table name\";\n setErrors((prev) => [\n ...prev,\n {\n id: generateUUID(),\n message: errorMessage,\n file: file.name,\n severity: \"error\",\n },\n ]);\n updateImportState(file.name, {\n status: \"error\",\n error: errorMessage,\n });\n toast.error(`Invalid table name for ${file.name}`);\n return;\n }\n\n updateImportState(file.name, { status: \"processing\" });\n\n try {\n const fileType = file.name.split(\".\").pop()?.toLowerCase() as FileExtension;\n const arrayBuffer = await file.arrayBuffer();\n\n // Add options for import\n const importOptions: Record = {\n importMode, // \"table\" or \"view\"\n };\n if (fileType === \"csv\" && csvOptions[file.name]) {\n importOptions.csv = csvOptions[file.name];\n }\n\n await importFile(\n file.name,\n arrayBuffer,\n cleanTableName,\n fileType,\n undefined,\n importOptions\n );\n updateImportState(file.name, { status: \"success\" });\n toast.success(`Successfully imported ${file.name}`);\n } catch (e) {\n const errorMessage = e instanceof Error ? e.message : \"Unknown error\";\n updateImportState(file.name, {\n status: \"error\",\n error: errorMessage,\n });\n setErrors((prev) => [\n ...prev,\n {\n id: generateUUID(),\n message: errorMessage,\n file: errorMessage === \"File processing aborted\" ? undefined : file.name,\n severity: \"error\",\n },\n ]);\n toast.error(`Error importing ${file.name}`);\n }\n });\n\n // Run promises with concurrency control\n const concurrencyQueue = [];\n for (let i = 0; i < uploadPromises.length; i += MAX_CONCURRENT_UPLOADS) {\n const chunk = uploadPromises.slice(i, i + MAX_CONCURRENT_UPLOADS);\n concurrencyQueue.push(Promise.all(chunk));\n }\n\n await Promise.all(concurrencyQueue);\n\n if (allFilesSuccess) {\n setIsSheetOpen(false);\n setFiles([]);\n setTableNames({});\n setImportStates({});\n toast.success(\"All files imported successfully\");\n }\n } catch (e) {\n console.error(\"Error uploading: \", e);\n toast.error(\"Error uploading files\");\n } finally {\n setIsUploading(false);\n }\n };\n\n const handleCancelUpload = useCallback(() => {\n abortControllerRef.current?.abort();\n setIsUploading(false);\n toast.warning(\"Upload cancelled\");\n }, [toast]);\n\n const removeFile = useCallback(\n (fileName: string) => {\n setFiles((prev) => prev.filter((file) => file.name !== fileName));\n setTableNames((prev) => {\n const newNames = { ...prev };\n delete newNames[fileName];\n return newNames;\n });\n setErrors((prev) => prev.filter((error) => error.file !== fileName));\n setImportStates((prev) => {\n const newStates = { ...prev };\n delete newStates[fileName];\n return newStates;\n });\n\n const file = files.find((f) => f.name === fileName);\n if (file?.preview) {\n URL.revokeObjectURL(file.preview);\n }\n\n toast.info(`Removed ${fileName}`);\n },\n [files, toast]\n );\n\n const retryFileUpload = useCallback(\n (fileName: string) => {\n setImportStates((prev) => ({\n ...prev,\n [fileName]: {\n ...prev[fileName],\n status: \"pending\",\n error: undefined,\n },\n }));\n toast.info(`Retrying upload for ${fileName}`);\n },\n [toast]\n );\n\n // Preview handlers - Phase 2\n const handlePreviewUrl = async (url: string, tableName: string) => {\n setIsPreviewing(true);\n setErrors([]);\n\n try {\n const urlPath = url.split(\"?\")[0];\n const extension = urlPath.split(\".\").pop()?.toLowerCase();\n\n let previewQuery = \"\";\n if (extension === \"csv\") {\n previewQuery = `SELECT * FROM read_csv('${url}', auto_detect=true, header=true) LIMIT ${PREVIEW_ROW_LIMIT}`;\n } else if (extension === \"json\") {\n previewQuery = `SELECT * FROM read_json('${url}', auto_detect=true) LIMIT ${PREVIEW_ROW_LIMIT}`;\n } else if (extension === \"parquet\") {\n previewQuery = `SELECT * FROM read_parquet('${url}') LIMIT ${PREVIEW_ROW_LIMIT}`;\n } else {\n throw new Error(`Unsupported file type for preview: .${extension}`);\n }\n\n const result = await executeQuery(previewQuery);\n if (result && !result.error) {\n setPreviewData(result);\n setPreviewSource(\"url\");\n setPreviewFileName(url);\n setPreviewTableName(tableName);\n setIsPreviewMode(true);\n\n // Initialize schema columns from preview\n const initialSchema: SchemaColumn[] = result.columns.map((col, idx) => ({\n originalName: col,\n newName: col,\n type: result.columnTypes[idx] || \"VARCHAR\",\n included: true,\n }));\n setSchemaColumns(initialSchema);\n }\n } catch (e) {\n const errorMessage = e instanceof Error ? e.message : \"Unknown error\";\n toast.error(`Preview failed: ${errorMessage}`);\n setErrors([\n {\n id: generateUUID(),\n message: errorMessage,\n severity: \"error\",\n },\n ]);\n } finally {\n setIsPreviewing(false);\n }\n };\n\n // Wrapper for preview with validation\n const handlePreview = async () => {\n if (!urlInput.trim()) {\n toast.error(\"Please enter a URL\");\n return;\n }\n\n if (!urlTableName.trim()) {\n toast.error(\"Please enter a table name\");\n return;\n }\n\n try {\n tableNameSchema.parse(urlTableName);\n } catch (error) {\n const errorMessage =\n error instanceof z.ZodError ? error.issues[0].message : \"Invalid table name\";\n toast.error(errorMessage);\n return;\n }\n\n await handlePreviewUrl(urlInput, urlTableName);\n };\n\n // Exit preview mode\n const handleBackFromPreview = () => {\n setIsPreviewMode(false);\n setPreviewData(null);\n setPreviewSource(null);\n setPreviewFileName(\"\");\n setPreviewTableName(\"\");\n setSchemaColumns([]);\n };\n\n // Import from preview (with optional schema customization)\n const handleImportFromPreview = async () => {\n if (!previewFileName || !previewTableName) return;\n\n setIsUrlImporting(true);\n setErrors([]);\n\n try {\n if (previewSource === \"url\") {\n const url = previewFileName;\n const urlPath = url.split(\"?\")[0];\n const extension = urlPath.split(\".\").pop()?.toLowerCase();\n\n // Build column selection and casting based on schema customization\n const includedColumns = schemaColumns.filter((col) => col.included);\n const hasSchemaChanges = schemaColumns.some(\n (col) => col.newName !== col.originalName || !col.included\n );\n\n let columnSelection = \"*\";\n if (hasSchemaChanges && includedColumns.length > 0) {\n columnSelection = includedColumns\n .map((col) => {\n if (col.newName !== col.originalName) {\n return `\"${col.originalName}\" AS \"${col.newName}\"`;\n }\n return `\"${col.originalName}\"`;\n })\n .join(\", \");\n }\n\n let query = \"\";\n const createType = importMode === \"view\" ? \"VIEW\" : \"TABLE\";\n const resultType = importMode === \"view\" ? \"view\" : \"table\";\n\n if (extension === \"csv\") {\n query = `CREATE OR REPLACE ${createType} ${previewTableName} AS SELECT ${columnSelection} FROM read_csv('${url}', auto_detect=true, ignore_errors=true, header=true)`;\n } else if (extension === \"json\") {\n query = `CREATE OR REPLACE ${createType} ${previewTableName} AS SELECT ${columnSelection} FROM read_json('${url}', auto_detect=true, ignore_errors=true)`;\n } else if (extension === \"parquet\") {\n query = `CREATE OR REPLACE ${createType} ${previewTableName} AS SELECT ${columnSelection} FROM read_parquet('${url}')`;\n } else {\n throw new Error(`Unsupported file type: .${extension}`);\n }\n\n await executeQuery(query);\n toast.success(`Successfully created ${resultType} '${previewTableName}'`);\n\n // Reset state and close sheet\n handleBackFromPreview();\n setIsSheetOpen(false);\n }\n } catch (e) {\n const errorMessage = e instanceof Error ? e.message : \"Unknown error\";\n setErrors([\n {\n id: generateUUID(),\n message: errorMessage,\n severity: \"error\",\n },\n ]);\n toast.error(`Failed to import: ${errorMessage}`);\n } finally {\n setIsUrlImporting(false);\n }\n };\n\n // Schema customization handlers\n const handleToggleColumn = (originalName: string) => {\n setSchemaColumns((prev) =>\n prev.map((col) =>\n col.originalName === originalName ? { ...col, included: !col.included } : col\n )\n );\n };\n\n const handleRenameColumn = (originalName: string, newName: string) => {\n setSchemaColumns((prev) =>\n prev.map((col) => (col.originalName === originalName ? { ...col, newName } : col))\n );\n };\n\n const handleChangeColumnType = (originalName: string, type: string) => {\n setSchemaColumns((prev) =>\n prev.map((col) => (col.originalName === originalName ? { ...col, type } : col))\n );\n };\n\n // Handle URL import\n const handleUrlImport = async () => {\n if (!urlInput.trim()) {\n toast.error(\"Please enter a URL\");\n return;\n }\n\n if (!urlTableName.trim()) {\n toast.error(\"Please enter a table name\");\n return;\n }\n\n try {\n tableNameSchema.parse(urlTableName);\n } catch (error) {\n const errorMessage =\n error instanceof z.ZodError ? error.issues[0].message : \"Invalid table name\";\n toast.error(errorMessage);\n return;\n }\n\n setIsUrlImporting(true);\n setErrors([]);\n\n try {\n // Detect file type from URL\n const url = urlInput.trim();\n const urlPath = url.split(\"?\")[0]; // Remove query params\n const extension = urlPath.split(\".\").pop()?.toLowerCase();\n\n let query = \"\";\n\n // Build import query based on file type and import mode\n const createType = importMode === \"view\" ? \"VIEW\" : \"TABLE\";\n const resultType = importMode === \"view\" ? \"view\" : \"table\";\n\n if (extension === \"csv\") {\n query = `CREATE OR REPLACE ${createType} ${urlTableName} AS SELECT * FROM read_csv('${url}', auto_detect=true, ignore_errors=true, header=true)`;\n } else if (extension === \"json\") {\n query = `CREATE OR REPLACE ${createType} ${urlTableName} AS SELECT * FROM read_json('${url}', auto_detect=true, ignore_errors=true)`;\n } else if (extension === \"parquet\") {\n query = `CREATE OR REPLACE ${createType} ${urlTableName} AS SELECT * FROM read_parquet('${url}')`;\n } else {\n throw new Error(`Unsupported file type: .${extension}. Supported: CSV, JSON, Parquet`);\n }\n\n await executeQuery(query);\n\n toast.success(`Successfully created ${resultType} '${urlTableName}' from URL`);\n setUrlInput(\"\");\n setUrlTableName(\"\");\n setIsSheetOpen(false);\n } catch (e) {\n const errorMessage = e instanceof Error ? e.message : \"Unknown error\";\n setErrors([\n {\n id: generateUUID(),\n message: errorMessage,\n severity: \"error\",\n },\n ]);\n toast.error(`Failed to import from URL: ${errorMessage}`);\n } finally {\n setIsUrlImporting(false);\n }\n };\n\n // Handle Query Import\n const handleQueryImport = async () => {\n if (!queryInput.trim()) {\n toast.error(\"Please enter a SQL query\");\n return;\n }\n\n if (!queryTableName.trim()) {\n toast.error(\"Please enter a table name\");\n return;\n }\n\n try {\n tableNameSchema.parse(queryTableName);\n } catch (error) {\n const errorMessage =\n error instanceof z.ZodError ? error.issues[0].message : \"Invalid table name\";\n toast.error(errorMessage);\n return;\n }\n\n setIsQueryImporting(true);\n setErrors([]);\n\n try {\n const userQuery = queryInput.trim();\n const createType = importMode === \"view\" ? \"VIEW\" : \"TABLE\";\n const resultType = importMode === \"view\" ? \"view\" : \"table\";\n\n // Wrap user query in CREATE statement\n const wrappedQuery = `CREATE OR REPLACE ${createType} ${queryTableName} AS ${userQuery}`;\n\n await executeQuery(wrappedQuery);\n\n toast.success(`Successfully created ${resultType} '${queryTableName}' from query result`);\n setQueryInput(\"\");\n setQueryTableName(\"\");\n setIsSheetOpen(false);\n } catch (e) {\n const errorMessage = e instanceof Error ? e.message : \"Unknown error\";\n setErrors([\n {\n id: generateUUID(),\n message: errorMessage,\n severity: \"error\",\n },\n ]);\n toast.error(`Failed to execute query: ${errorMessage}`);\n } finally {\n setIsQueryImporting(false);\n }\n };\n\n useEffect(() => {\n return () => {\n files.forEach((file) => {\n if (file.preview) {\n URL.revokeObjectURL(file.preview);\n }\n });\n };\n }, [files]);\n\n return (\n \n \n \n {isPreviewMode ? \"Preview Data\" : \"Import Data\"}\n \n \n\n {/* Preview Mode UI */}\n {isPreviewMode && previewData && (\n
    \n {/* Header with file info and navigation */}\n \n \n
    \n
    \n

    \n Preview:{\" \"}\n {previewFileName.length > 50\n ? `...${previewFileName.slice(-47)}`\n : previewFileName}\n

    \n

    \n Table Name: {previewTableName}\n

    \n

    \n Showing first {PREVIEW_ROW_LIMIT} rows â€ĸ {previewData.rowCount} total rows\n

    \n
    \n \n
    \n     \n     \n\n {/* Preview Table */}\n \n \n \n \n \n\n {/* Schema Customization */}\n \n \n
    \n
    \n
    \n

    Schema Customization

    \n

    \n Customize column names, types, and visibility before importing\n

    \n
    \n setIsSchemaCustomizing(!isSchemaCustomizing)}\n >\n {isSchemaCustomizing ? (\n <>\n \n Hide\n \n ) : (\n <>\n \n Customize\n \n )}\n \n
    \n\n {isSchemaCustomizing && (\n
    \n
    \n \n \n \n \n \n \n \n \n \n \n {schemaColumns.map((col) => (\n \n \n \n \n \n \n ))}\n \n
    IncludeOriginal NameNew NameType
    \n handleToggleColumn(col.originalName)}\n />\n \n \n {col.originalName}\n \n \n \n handleRenameColumn(col.originalName, e.target.value)\n }\n disabled={!col.included}\n className=\"h-8 text-xs\"\n placeholder=\"Column name\"\n />\n \n \n handleChangeColumnType(col.originalName, value)\n }\n disabled={!col.included}\n >\n \n \n \n \n {DUCKDB_TYPES.map((type) => (\n \n {type}\n \n ))}\n \n \n
    \n
    \n
    \n

    \n {schemaColumns.filter((col) => col.included).length} of{\" \"}\n {schemaColumns.length} columns will be imported\n

    \n
    \n
    \n )}\n
    \n     \n     \n\n {/* Action Buttons */}\n
    \n \n \n
    \n\n {/* Errors */}\n {errors.length > 0 && (\n
    \n {errors.map((error) => {\n const suggestion = getErrorSuggestion(error.message);\n return (\n \n \n \n Error\n \n \n
    \n

    {error.message}

    \n {suggestion && (\n

    \n Suggestion: {suggestion}\n

    \n )}\n
    \n     \n     \n );\n })}\n
    \n )}\n
    \n )}\n\n {/* Import Tabs (when not in preview mode) */}\n {!isPreviewMode && (\n \n \n \n \n Upload Files\n \n \n \n From URL\n \n \n \n From Query\n \n \n\n {/* Upload Files Tab */}\n \n \n \n \n \n {isDragActive ? (\n

    Drop the files here ...

    \n ) : (\n <>\n
    \n

    Drag & drop files here, or

    \n \n

    \n Supported formats: CSV, JSON, Parquet, Arrow and DuckDB\n

    \n

    \n Maximum file size: {formatFileSize(MAX_FILE_SIZE)}\n

    \n
    \n \n )}\n
    \n\n {hasFilesToImport && (\n
    \n
    \n

    Files to Import

    \n
    \n Mode:\n
    \n setImportMode(\"table\")}\n >\n Import (Table)\n \n setImportMode(\"view\")}\n >\n Link (View)\n \n
    \n
    \n
    \n {importMode === \"view\" && (\n

    \n Views reference the original file without copying data. Queries re-read the\n file each time, using less memory but may be slower.\n

    \n )}\n
    \n {files.map((file) => {\n const fileType = file.name.split(\".\").pop()?.toLowerCase();\n const isCsvFile = fileType === \"csv\";\n\n return (\n \n setTableNames((prev) => ({\n ...prev,\n [file.name]: name,\n }))\n }\n status={\n importStates[file.name] || {\n fileName: file.name,\n status: \"pending\",\n }\n }\n csvOptions={isCsvFile ? csvOptions[file.name] : undefined}\n onCsvOptionsChange={\n isCsvFile\n ? (options) =>\n setCsvOptions((prev) => ({\n ...prev,\n [file.name]: options,\n }))\n : undefined\n }\n onRemove={() => removeFile(file.name)}\n onRetry={() => retryFileUpload(file.name)}\n />\n );\n })}\n
    \n
    \n )}\n\n {errors.length > 0 && (\n
    \n {errors.map((error) => {\n const suggestion = getErrorSuggestion(error.message);\n return (\n \n \n {error.severity === \"error\" ? (\n \n ) : (\n \n )}\n {error.severity === \"error\" ? \"Error\" : \"Warning\"}\n \n \n
    \n

    \n {error.file ? `${error.file}: ${error.message}` : error.message}\n

    \n {suggestion && (\n

    \n Suggestion: {suggestion}\n

    \n )}\n
    \n     \n \n );\n })}\n
    \n )}\n\n {hasFilesToImport && (\n
    \n \n\n {isUploading && (\n \n \n Cancel\n \n )}\n
    \n )}\n \n \n\n {/* URL Import Tab */}\n \n \n
    \n
    \n

    Import from URL

    \n

    \n DuckDB can directly read files from HTTP/HTTPS URLs. Supports CSV, JSON, and\n Parquet files.\n

    \n
    \n\n
    \n \n setUrlInput(e.target.value)}\n placeholder=\"https://example.com/data.csv\"\n disabled={isUrlImporting || isPreviewing}\n />\n

    \n Enter a direct URL to a CSV, JSON, or Parquet file\n

    \n
    \n\n
    \n \n setUrlTableName(e.target.value)}\n placeholder=\"my_table\"\n disabled={isUrlImporting || isPreviewing}\n />\n
    \n\n
    \n \n
    \n setImportMode(\"table\")}\n disabled={isUrlImporting || isPreviewing}\n >\n \n Table\n \n setImportMode(\"view\")}\n disabled={isUrlImporting || isPreviewing}\n >\n \n View\n \n \n

    \n {importMode === \"view\"\n ? \"View references URL directly (fresh data, less memory)\"\n : \"Table copies data into DuckDB (faster queries)\"}\n

    \n \n\n {errors.length > 0 && (\n
    \n {errors.map((error) => {\n const suggestion = getErrorSuggestion(error.message);\n return (\n \n \n \n Error\n \n \n
    \n

    {error.message}

    \n {suggestion && (\n

    \n Suggestion: {suggestion}\n

    \n )}\n
    \n     \n     \n );\n })}\n
    \n )}\n\n
    \n \n {isPreviewing ? (\n <>\n \n Loading Preview...\n \n ) : (\n <>\n \n Preview\n \n )}\n \n \n {isUrlImporting ? (\n <>\n \n Importing...\n \n ) : (\n <>\n \n Import Directly\n \n )}\n \n
    \n \n \n \n\n {/* Query Import Tab */}\n \n \n
    \n
    \n

    Import from Query Result

    \n

    \n Execute a SQL query and create a table from the result. Use DuckDB functions\n like read_csv, read_json, read_parquet, or query existing tables.\n

    \n
    \n\n
    \n \n setQueryInput(e.target.value)}\n placeholder=\"SELECT * FROM read_csv('https://example.com/data.csv')\"\n disabled={isQueryImporting}\n rows={8}\n className=\"font-mono text-sm\"\n />\n

    \n Enter any SELECT query. The result will be saved to a new table.\n

    \n
    \n\n
    \n \n setQueryTableName(e.target.value)}\n placeholder=\"my_table\"\n disabled={isQueryImporting}\n />\n
    \n\n
    \n \n
    \n setImportMode(\"table\")}\n disabled={isQueryImporting}\n >\n
    \n Table\n \n setImportMode(\"view\")}\n disabled={isQueryImporting}\n >\n \n View\n \n \n

    \n {importMode === \"view\"\n ? \"View re-runs query each time (always fresh)\"\n : \"Table stores result (faster queries)\"}\n

    \n \n\n {/* Examples */}\n
    \n

    Example Queries:

    \n
    \n

    \n â€ĸ Import from URL:\n
    \n \n SELECT * FROM read_csv('https://example.com/data.csv')\n \n

    \n

    \n â€ĸ Filter data:\n
    \n \n SELECT * FROM read_json('data.json') WHERE age > 21\n \n

    \n

    \n â€ĸ Join tables:\n
    \n \n SELECT a.*, b.name FROM table1 a JOIN table2 b ON a.id = b.id\n \n

    \n
    \n
    \n\n {errors.length > 0 && (\n
    \n {errors.map((error) => {\n const suggestion = getErrorSuggestion(error.message);\n return (\n \n \n \n Error\n \n \n
    \n

    {error.message}

    \n {suggestion && (\n

    \n Suggestion: {suggestion}\n

    \n )}\n
    \n     \n     \n );\n })}\n
    \n )}\n\n \n {isQueryImporting ? (\n <>\n \n Executing Query...\n \n ) : (\n <>\n \n Execute and Import\n \n )}\n \n \n \n \n \n )}\n \n \n );\n};\n\nexport default FileImporter;\n" }, { "path": "src/components/explorer/TreeNode.tsx", "content": "// TreeNode.tsx\nimport React, { useState, useCallback, useMemo, useEffect } from \"react\";\nimport {\n ChevronRight,\n ChevronDown,\n Database,\n Table,\n FileSpreadsheet,\n Trash,\n TerminalIcon,\n MoreVertical,\n Loader2,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuTrigger,\n} from \"@/components/ui/context-menu\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { toast } from \"sonner\";\nimport { useDuckStore, type ColumnStats } from \"@/store\";\nimport { ColumnNode } from \"./ColumnNode\";\n\nexport interface TreeNodeData {\n name: string;\n type: \"database\" | \"table\" | \"view\";\n children?: TreeNodeData[];\n query?: string;\n}\n\ninterface TreeNodeProps {\n node: TreeNodeData;\n level: number;\n searchTerm: string;\n parentDatabaseName?: string;\n refreshData: () => void;\n}\n\nconst TreeNode: React.FC = React.memo(\n ({ node, level, searchTerm, parentDatabaseName, refreshData }) => {\n const [isOpen, setIsOpen] = useState(false);\n const [columnStats, setColumnStats] = useState([]);\n const [isLoadingStats, setIsLoadingStats] = useState(false);\n const toggleOpen = useCallback(() => setIsOpen((open) => !open), []);\n\n const createTab = useDuckStore((s) => s.createTab);\n const executeQuery = useDuckStore((s) => s.executeQuery);\n const deleteTable = useDuckStore((s) => s.deleteTable);\n const fetchDatabasesAndTablesInfo = useDuckStore((s) => s.fetchDatabasesAndTablesInfo);\n const fetchTableColumnStats = useDuckStore((s) => s.fetchTableColumnStats);\n\n // Fetch column stats when table is expanded\n useEffect(() => {\n const loadColumnStats = async () => {\n if (isOpen && node.type === \"table\" && parentDatabaseName && columnStats.length === 0) {\n setIsLoadingStats(true);\n try {\n const stats = await fetchTableColumnStats(parentDatabaseName, node.name);\n setColumnStats(stats);\n } catch (error) {\n console.error(\"Failed to fetch column stats:\", error);\n } finally {\n setIsLoadingStats(false);\n }\n }\n };\n\n loadColumnStats();\n }, [\n isOpen,\n node.type,\n node.name,\n parentDatabaseName,\n columnStats.length,\n fetchTableColumnStats,\n ]);\n\n const getIcon = useMemo(() => {\n switch (node.type) {\n case \"database\":\n return ;\n case \"table\":\n case \"view\":\n return
    ;\n default:\n return null;\n }\n }, [node.type]);\n\n const handleQueryData = useCallback(\n (databaseName: string, tableName: string) => async () => {\n const query = `SELECT * FROM \"${databaseName}\".\"${tableName}\" LIMIT 100`;\n\n createTab(\"sql\", query, tableName);\n\n const tabId = useDuckStore.getState().activeTabId;\n if (tabId) {\n await executeQuery(query, tabId);\n }\n toast.success(`Querying table \"${tableName}\"`);\n },\n [createTab, executeQuery, toast]\n );\n\n const handleDeleteTable = useCallback(\n (databaseName: string, tableName: string) => async () => {\n try {\n await deleteTable(tableName, databaseName);\n toast.success(`Table \"${tableName}\" deleted successfully.`);\n await fetchDatabasesAndTablesInfo();\n refreshData();\n } catch (error) {\n toast.error(\n `Failed to delete table \"${tableName}\": ${\n error instanceof Error ? error.message : \"Unknown error\"\n }`\n );\n }\n },\n [deleteTable, toast, fetchDatabasesAndTablesInfo, refreshData]\n );\n\n const handleShowSchema = useCallback(\n (databaseName: string, tableName: string) => async () => {\n const query = `DESCRIBE \"${databaseName}\".\"${tableName}\"`;\n\n createTab(\"sql\", query, `${tableName} Schema`);\n\n const tabId = useDuckStore.getState().activeTabId;\n if (tabId) {\n await executeQuery(query, tabId);\n }\n toast.success(`Showing schema for table \"${tableName}\"`);\n },\n [createTab, executeQuery, toast]\n );\n\n const contextMenuOptions = useMemo(\n () => ({\n database: [],\n table: [\n {\n label: \"Query Table\",\n icon: ,\n action: parentDatabaseName\n ? handleQueryData(parentDatabaseName, node.name)\n : () => {\n toast.error(\"Parent database name is undefined.\");\n },\n },\n {\n label: \"Show Schema\",\n icon: ,\n action: parentDatabaseName\n ? handleShowSchema(parentDatabaseName, node.name)\n : () => {\n toast.error(\"Parent database name is undefined.\");\n },\n },\n {\n label: \"Delete Table\",\n icon: ,\n action: parentDatabaseName\n ? handleDeleteTable(parentDatabaseName, node.name)\n : () => {\n toast.error(\"Parent database name is undefined.\");\n },\n },\n ],\n }),\n [parentDatabaseName, node.name, handleQueryData, handleDeleteTable, handleShowSchema]\n );\n\n const matchesSearch = node.name.toLowerCase().includes(searchTerm.toLowerCase());\n const childrenMatchSearch = node.children?.some(\n (child) =>\n child.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n child.children?.some((grandchild) =>\n grandchild.name.toLowerCase().includes(searchTerm.toLowerCase())\n )\n );\n\n const shouldRender = !searchTerm || matchesSearch || childrenMatchSearch;\n\n return shouldRender ? (\n <>\n \n \n 0 ? \"ml-4\" : \"\"}`}\n onClick={toggleOpen}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n toggleOpen();\n }\n }}\n >\n
    \n {node.children ? (\n isOpen ? (\n \n ) : (\n \n )\n ) : (\n
    \n )}\n {getIcon}\n
    \n

    {node.name}

    \n
    \n
    \n
    \n {contextMenuOptions[node.type as keyof typeof contextMenuOptions].length > 0 && (\n \n \n \n \n \n {contextMenuOptions[node.type as keyof typeof contextMenuOptions].map(\n (option, index) => (\n \n {option.icon}\n {option.label}\n \n )\n )}\n \n \n )}\n
    \n
    \n     \n \n {contextMenuOptions[node.type as keyof typeof contextMenuOptions].map(\n (option, index) => (\n \n {option.icon}\n {option.label}\n \n )\n )}\n \n {(isOpen || searchTerm) && node.children && (\n
    \n {node.children.length > 0 ? (\n node.children.map((child) => (\n \n ))\n ) : (\n
    \n Nothing to show\n
    \n )}\n
    \n )}\n\n {/* Render column stats for tables */}\n {isOpen && node.type === \"table\" && (\n
    \n {isLoadingStats ? (\n
    \n \n Loading column statistics...\n
    \n ) : columnStats.length > 0 ? (\n columnStats.map((stats) => )\n ) : null}\n
    \n )}\n     \n \n ) : null;\n }\n);\n\nexport default TreeNode;\n" }, { "path": "src/components/folders/FolderBrowser.tsx", "content": "import React, { useEffect, useState, useCallback } from \"react\";\nimport {\n FolderOpen,\n FolderPlus,\n ChevronRight,\n ChevronDown,\n File,\n RefreshCw,\n X,\n AlertCircle,\n FileSpreadsheet,\n FileJson,\n Database,\n Import,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { useDuckStore, type MountedFolderInfo } from \"@/store\";\nimport {\n fileSystemService,\n type FSEntry,\n type FileEntry,\n type FolderEntry,\n SUPPORTED_EXTENSIONS,\n} from \"@/lib/fileSystem\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuTrigger,\n} from \"@/components/ui/context-menu\";\nimport { toast } from \"sonner\";\nimport ImportOptionsPopover, { type ImportOptions } from \"@/components/common/ImportOptionsPopover\";\n\ninterface FolderBrowserProps {\n onFileSelect?: (folderId: string, file: FileEntry) => void;\n onFileImport?: (folderId: string, file: FileEntry, options: ImportOptions) => void;\n className?: string;\n}\n\n// File type icon mapping\nconst getFileIcon = (extension: string) => {\n switch (extension.toLowerCase()) {\n case \".csv\":\n case \".tsv\":\n case \".xlsx\":\n case \".xls\":\n return ;\n case \".json\":\n case \".jsonl\":\n case \".ndjson\":\n return ;\n case \".parquet\":\n case \".arrow\":\n case \".ipc\":\n return ;\n case \".duckdb\":\n case \".db\":\n return ;\n default:\n return ;\n }\n};\n\n// Format file size\nconst formatSize = (bytes: number): string => {\n if (bytes === 0) return \"0 B\";\n const k = 1024;\n const sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + \" \" + sizes[i];\n};\n\n// File node component\ninterface FileNodeProps {\n entry: FSEntry;\n folderId: string;\n level: number;\n onFileSelect?: (folderId: string, file: FileEntry) => void;\n onFileImport?: (folderId: string, file: FileEntry, options: ImportOptions) => void;\n}\n\nconst FileNode: React.FC = ({\n entry,\n folderId,\n level,\n onFileSelect,\n onFileImport,\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [children, setChildren] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const loadChildren = useCallback(async () => {\n if (entry.type !== \"folder\") return;\n\n setIsLoading(true);\n try {\n const folderEntry = entry as FolderEntry;\n const entries: FSEntry[] = [];\n\n for await (const child of folderEntry.handle.values()) {\n if (child.kind === \"file\") {\n const fileHandle = child as FileSystemFileHandle;\n const ext =\n child.name.lastIndexOf(\".\") > 0\n ? child.name.slice(child.name.lastIndexOf(\".\")).toLowerCase()\n : \"\";\n\n if (!SUPPORTED_EXTENSIONS.includes(ext)) continue;\n\n try {\n const file = await fileHandle.getFile();\n entries.push({\n name: child.name,\n path: `${entry.path}/${child.name}`,\n type: \"file\",\n size: file.size,\n lastModified: new Date(file.lastModified),\n extension: ext,\n handle: fileHandle,\n });\n } catch {\n // Skip files we can't read\n }\n } else if (child.kind === \"directory\") {\n entries.push({\n name: child.name,\n path: `${entry.path}/${child.name}`,\n type: \"folder\",\n handle: child as FileSystemDirectoryHandle,\n });\n }\n }\n\n // Sort: folders first, then files\n entries.sort((a, b) => {\n if (a.type !== b.type) return a.type === \"folder\" ? -1 : 1;\n return a.name.localeCompare(b.name);\n });\n\n setChildren(entries);\n } catch (error) {\n console.error(\"Failed to load folder contents:\", error);\n } finally {\n setIsLoading(false);\n }\n }, [entry]);\n\n const handleToggle = async () => {\n if (entry.type === \"folder\") {\n if (!isExpanded && children.length === 0) {\n await loadChildren();\n }\n setIsExpanded(!isExpanded);\n }\n };\n\n const handleFileClick = () => {\n if (entry.type === \"file\" && onFileSelect) {\n onFileSelect(folderId, entry as FileEntry);\n }\n };\n\n const handleImport = (options: ImportOptions) => {\n if (entry.type === \"file\" && onFileImport) {\n onFileImport(folderId, entry as FileEntry, options);\n }\n };\n\n const isFile = entry.type === \"file\";\n const fileEntry = entry as FileEntry;\n\n return (\n
  • \n \n \n \n {entry.type === \"folder\" ? (\n <>\n {isLoading ? (\n \n ) : isExpanded ? (\n \n ) : (\n \n )}\n \n \n ) : (\n <>\n \n {getFileIcon(fileEntry.extension)}\n \n )}\n {entry.name}\n {isFile && (\n <>\n \n e.stopPropagation()}\n className={cn(\n \"opacity-0 group-hover:opacity-100 p-1 rounded transition-opacity\",\n \"hover:bg-primary/20 text-primary\"\n )}\n >\n \n \n \n \n {formatSize(fileEntry.size)}\n \n \n )}\n \n \n \n {isFile && (\n \n handleImport({\n tableName: entry.name\n .replace(/\\.[^.]+$/, \"\")\n .replace(/[^a-zA-Z0-9_]/g, \"_\")\n .replace(/^[0-9]/, \"_$&\"),\n importMode: \"table\",\n })\n }\n >\n Quick Import as Table\n \n )}\n \n \n\n {entry.type === \"folder\" && isExpanded && children.length > 0 && (\n
      \n {children.map((child) => (\n \n ))}\n
    \n )}\n
    • \n );\n};\n\n// Mounted folder component\ninterface MountedFolderNodeProps {\n folder: MountedFolderInfo;\n onFileSelect?: (folderId: string, file: FileEntry) => void;\n onFileImport?: (folderId: string, file: FileEntry, options: ImportOptions) => void;\n onUnmount: (id: string) => void;\n onRequestPermission: (id: string) => void;\n}\n\nconst MountedFolderNode: React.FC = ({\n folder,\n onFileSelect,\n onFileImport,\n onUnmount,\n onRequestPermission,\n}) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [files, setFiles] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n\n const loadFiles = useCallback(async () => {\n setIsLoading(true);\n try {\n const entries = await fileSystemService.listFiles(folder.id, {\n recursive: false,\n filterSupported: true,\n });\n setFiles(entries);\n } catch (error) {\n console.error(\"Failed to load files:\", error);\n if (error instanceof Error && error.message === \"Permission denied\") {\n toast.error(\"Permission required. Click to grant access.\");\n }\n } finally {\n setIsLoading(false);\n }\n }, [folder.id]);\n\n const handleToggle = async () => {\n if (!folder.hasPermission) {\n onRequestPermission(folder.id);\n return;\n }\n\n if (!isExpanded && files.length === 0) {\n await loadFiles();\n }\n setIsExpanded(!isExpanded);\n };\n\n return (\n
  • \n \n \n \n {isLoading ? (\n \n ) : isExpanded ? (\n \n ) : (\n \n )}\n \n {folder.name}\n {!folder.hasPermission && (\n \n \n \n \n Click to grant permission\n \n )}\n \n \n \n \n \n Refresh\n \n onUnmount(folder.id)} className=\"text-destructive\">\n \n Unmount\n \n \n \n\n {isExpanded && files.length > 0 && (\n
      \n {files.map((entry) => (\n \n ))}\n
    \n )}\n\n {isExpanded && files.length === 0 && !isLoading && (\n

    No supported files found

    \n )}\n
    • \n );\n};\n\nconst FolderBrowser: React.FC = ({ onFileSelect, onFileImport, className }) => {\n const mountedFolders = useDuckStore((s) => s.mountedFolders);\n const isFileSystemSupported = useDuckStore((s) => s.isFileSystemSupported);\n const initFileSystem = useDuckStore((s) => s.initFileSystem);\n const mountFolder = useDuckStore((s) => s.mountFolder);\n const unmountFolder = useDuckStore((s) => s.unmountFolder);\n const refreshFolderPermissions = useDuckStore((s) => s.refreshFolderPermissions);\n\n const [isInitialized, setIsInitialized] = useState(false);\n\n // Initialize file system on mount\n useEffect(() => {\n const init = async () => {\n await initFileSystem();\n setIsInitialized(true);\n };\n init();\n }, [initFileSystem]);\n\n // Refresh permissions on visibility change (tab focus)\n useEffect(() => {\n const handleVisibilityChange = () => {\n if (document.visibilityState === \"visible\" && isInitialized) {\n refreshFolderPermissions();\n }\n };\n\n document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n return () => document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n }, [isInitialized, refreshFolderPermissions]);\n\n const handleRequestPermission = async (folderId: string) => {\n try {\n const granted = await fileSystemService.requestPermission(folderId);\n if (granted) {\n await refreshFolderPermissions();\n toast.success(\"Permission granted\");\n } else {\n toast.error(\"Permission denied\");\n }\n } catch {\n toast.error(\"Failed to request permission\");\n }\n };\n\n const handleFileImport = async (folderId: string, file: FileEntry, options: ImportOptions) => {\n if (onFileImport) {\n onFileImport(folderId, file, options);\n }\n };\n\n if (!isFileSystemSupported) {\n return (\n
    \n

    \n File System Access not supported.\n
    \n Use Chrome or Edge 86+.\n

    \n
    \n );\n }\n\n return (\n \n
    \n {/* Header with Add Folder button */}\n
    \n \n Files\n \n \n \n \n \n Add folder\n \n
    \n\n {/* Mounted folders list */}\n {mountedFolders.length > 0 ? (\n
      \n {mountedFolders.map((folder) => (\n \n ))}\n
    \n ) : (\n
    \n \n

    No folders mounted

    \n \n
    \n )}\n
    \n     \n );\n};\n\nexport default FolderBrowser;\n" }, { "path": "src/components/layout/ConnectionSwitcher.tsx", "content": "import * as React from \"react\";\nimport { ChevronDown, Circle, Loader2, Cable } from \"lucide-react\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\nimport { useDuckStore } from \"@/store\";\n\ninterface ConnectionSwitcherProps {\n className?: string;\n}\n\nexport default function ConnectionSwitcher({ className }: ConnectionSwitcherProps) {\n const connectionList = useDuckStore((s) => s.connectionList);\n const currentConnection = useDuckStore((s) => s.currentConnection);\n const setCurrentConnection = useDuckStore((s) => s.setCurrentConnection);\n const isLoading = useDuckStore((s) => s.isLoading);\n const fetchDatabasesAndTablesInfo = useDuckStore((s) => s.fetchDatabasesAndTablesInfo);\n const tabs = useDuckStore((s) => s.tabs);\n const createTab = useDuckStore((s) => s.createTab);\n const setActiveTab = useDuckStore((s) => s.setActiveTab);\n const [isOpen, setIsOpen] = React.useState(false);\n\n // Helper to open or focus Connections tab\n const openConnectionsTab = () => {\n const existing = tabs.find((t) => t.type === \"connections\");\n if (existing) {\n setActiveTab(existing.id);\n } else {\n createTab(\"connections\", \"\", \"Connections\");\n }\n };\n\n const activeConnection = currentConnection || connectionList.connections[0];\n\n const handleConnectionChange = async (connectionId: string) => {\n try {\n await setCurrentConnection(connectionId);\n await fetchDatabasesAndTablesInfo();\n setIsOpen(false);\n } catch (error) {\n console.error(\"Failed to switch connection:\", error);\n }\n };\n\n const getStatusColor = (scope: string) => {\n switch (scope) {\n case \"WASM\":\n return \"bg-green-500\";\n case \"External\":\n return \"bg-blue-500\";\n case \"OPFS\":\n return \"bg-purple-500\";\n default:\n return \"bg-gray-500\";\n }\n };\n\n return (\n
    \n \n \n \n {isLoading ? (\n \n ) : (\n \n )}\n \n {activeConnection?.name}\n \n \n {activeConnection?.scope}\n \n \n \n \n\n \n \n Switch Connection\n \n\n {connectionList.connections.map((connection) => (\n handleConnectionChange(connection.id)}\n className={cn(\n \"flex items-center gap-2 cursor-pointer\",\n activeConnection?.id === connection.id && \"bg-accent\"\n )}\n >\n \n {connection.name}\n \n {connection.scope}\n \n \n ))}\n\n \n\n {\n openConnectionsTab();\n setIsOpen(false);\n }}\n >\n \n Manage Connections\n \n \n \n
    \n );\n}\n" }, { "path": "src/components/layout/MobileNavDrawer.tsx", "content": "import { useState } from \"react\";\nimport { Menu, Github, BookText, Cable, Sun, Moon, Brain } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from \"@/components/ui/sheet\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { useTheme } from \"@/components/theme/theme-provider\";\nimport { useDuckStore, type EditorTabType } from \"@/store\";\nimport ConnectionSwitcher from \"./ConnectionSwitcher\";\n\nexport const MobileNavDrawer = () => {\n const [open, setOpen] = useState(false);\n const { theme, setTheme } = useTheme();\n const tabs = useDuckStore((s) => s.tabs);\n const setActiveTab = useDuckStore((s) => s.setActiveTab);\n const createTab = useDuckStore((s) => s.createTab);\n\n const toggleTheme = () => {\n setTheme(theme === \"dark\" ? \"light\" : \"dark\");\n };\n\n const openOrFocusTab = (type: EditorTabType, title: string) => {\n const existing = tabs.find((t) => t.type === type);\n if (existing) {\n setActiveTab(existing.id);\n } else {\n createTab(type, \"\", title);\n }\n setOpen(false);\n };\n\n const handleExternalLink = (url: string) => {\n window.open(url, \"_blank\");\n setOpen(false);\n };\n\n return (\n \n \n \n \n \n \n \n \"Duck-UI\"\n Duck-UI\n \n \n\n
    \n {/* Connection Switcher */}\n
    \n

    Connection

    \n \n
    \n\n \n\n {/* Navigation */}\n
    \n

    Navigate

    \n openOrFocusTab(\"home\", \"Home\")}\n >\n Home\n \n openOrFocusTab(\"connections\", \"Connections\")}\n >\n \n Manage Connections\n \n openOrFocusTab(\"brain\", \"Duck Brain\")}\n >\n \n Duck Brain Settings\n \n
    \n\n \n\n {/* External Links */}\n
    \n

    Resources

    \n \n handleExternalLink(\n \"https://github.com/caioricciuti/duck-ui?utm_source=duck-ui&utm_medium=mobile-nav\"\n )\n }\n >\n \n GitHub\n \n \n handleExternalLink(\"https://duckui.com?utm_source=duck-ui&utm_medium=mobile-nav\")\n }\n >\n \n Documentation\n \n
    \n\n \n\n {/* Theme Toggle */}\n
    \n

    Appearance

    \n \n
    \n
    \n     \n     \n );\n};\n\nexport default MobileNavDrawer;\n" }, { "path": "src/components/layout/Sidebar.tsx", "content": "/**\n * Sidebar Component\n * Minimalist icon-only sidebar with tooltips\n */\n\nimport { useState } from \"react\";\nimport {\n Home,\n Database,\n Cable,\n Brain,\n Moon,\n Sun,\n HelpCircle,\n Github,\n BookOpen,\n Search,\n History,\n Circle,\n Settings,\n Bookmark,\n ChevronRight,\n} from \"lucide-react\";\nimport { useDuckStore, type EditorTabType } from \"@/store\";\nimport { setSetting } from \"@/services/persistence/repositories/settingsRepository\";\nimport { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useTheme } from \"@/components/theme/theme-provider\";\nimport { Separator } from \"@/components/ui/separator\";\nimport QueryHistory from \"../workspace/QueryHistory\";\nimport SavedQueriesPanel from \"@/components/saved-queries/SavedQueriesPanel\";\nimport PasswordDialog from \"@/components/profile/PasswordDialog\";\nimport ProfileAvatar from \"@/components/profile/ProfileAvatar\";\n\ninterface SidebarProps {\n isExplorerOpen: boolean;\n onToggleExplorer: () => void;\n}\n\nexport default function Sidebar({ isExplorerOpen, onToggleExplorer }: SidebarProps) {\n const { theme, setTheme } = useTheme();\n const tabs = useDuckStore((s) => s.tabs);\n const activeTabId = useDuckStore((s) => s.activeTabId);\n const createTab = useDuckStore((s) => s.createTab);\n const setActiveTab = useDuckStore((s) => s.setActiveTab);\n const currentConnection = useDuckStore((s) => s.currentConnection);\n const currentProfile = useDuckStore((s) => s.currentProfile);\n const profiles = useDuckStore((s) => s.profiles);\n const switchProfile = useDuckStore((s) => s.switchProfile);\n const [historyOpen, setHistoryOpen] = useState(false);\n const [savedQueriesOpen, setSavedQueriesOpen] = useState(false);\n const [switchTarget, setSwitchTarget] = useState<(typeof profiles)[0] | null>(null);\n\n // Get connection status color\n const getConnectionColor = (scope?: string) => {\n switch (scope) {\n case \"WASM\":\n return \"text-green-500\";\n case \"External\":\n return \"text-blue-500\";\n case \"OPFS\":\n return \"text-purple-500\";\n default:\n return \"text-gray-500\";\n }\n };\n\n // Helper to open or focus a singleton tab\n const openOrFocusTab = (type: EditorTabType, title: string) => {\n const existing = tabs.find((t) => t.type === type);\n if (existing) {\n setActiveTab(existing.id);\n } else {\n createTab(type, \"\", title);\n }\n };\n\n // Check if a tab type is active\n const isTabActive = (type: EditorTabType) => {\n const activeTab = tabs.find((t) => t.id === activeTabId);\n return activeTab?.type === type;\n };\n\n // Mutual exclusion for right panels\n const openHistory = () => {\n setSavedQueriesOpen(false);\n setHistoryOpen(!historyOpen);\n };\n\n const openSavedQueries = () => {\n setHistoryOpen(false);\n setSavedQueriesOpen(!savedQueriesOpen);\n };\n\n // Profile switching\n const handleSwitchProfile = (profile: (typeof profiles)[0]) => {\n if (profile.hasPassword) {\n setSwitchTarget(profile);\n } else {\n switchProfile(profile.id);\n }\n };\n\n const otherProfiles = profiles.filter((p) => p.id !== currentProfile?.id);\n\n return (\n <>\n \n {/* Profile Avatar */}\n
    \n \n \n \n \n \n \n \n \n {currentProfile?.name || \"Duck-UI\"}\n \n \n \n \n \n
    \n
    {currentProfile?.name}
    \n
    Active
    \n
    \n     \n {otherProfiles.length > 0 && (\n <>\n \n \n Switch Profile\n \n {otherProfiles.map((p) => (\n handleSwitchProfile(p)}>\n \n {p.name}\n \n \n ))}\n \n )}\n \n openOrFocusTab(\"settings\", \"Settings\")}>\n \n Settings\n \n     \n     \n
    \n\n {/* Main Navigation */}\n
    \n {/* Home */}\n \n \n \n openOrFocusTab(\"home\", \"Home\")}\n aria-label=\"Home\"\n >\n \n \n \n Home\n \n \n\n {/* Explorer Toggle */}\n \n \n \n \n \n \n \n \n {isExplorerOpen ? \"Hide Explorer\" : \"Show Explorer\"}\n \n \n \n\n \n\n {/* Connections */}\n \n \n \n openOrFocusTab(\"connections\", \"Connections\")}\n aria-label=\"Connections\"\n >\n \n \n \n Connections\n \n \n\n {/* Brain */}\n \n \n \n openOrFocusTab(\"brain\", \"Duck Brain\")}\n aria-label=\"Duck Brain\"\n >\n \n \n \n Duck Brain\n \n \n\n \n\n {/* Search */}\n \n \n \n {\n document.dispatchEvent(\n new KeyboardEvent(\"keydown\", { key: \"k\", metaKey: true })\n );\n }}\n aria-label=\"Search\"\n >\n \n \n \n \n Search ({navigator.platform?.includes(\"Mac\") ? \"⌘\" : \"Ctrl+\"}K)\n \n \n \n\n {/* Saved Queries */}\n \n \n \n \n \n \n \n Saved Queries\n \n \n\n {/* Query History */}\n \n \n \n \n \n \n \n Query History\n \n \n
    \n\n {/* Bottom Actions */}\n
    \n {/* Connection Status Pill */}\n \n \n \n openOrFocusTab(\"connections\", \"Connections\")}\n aria-label=\"Connection status\"\n >\n \n \n \n \n
    \n
    {currentConnection?.name || \"No connection\"}
    \n
    \n {currentConnection?.scope || \"Click to manage\"}\n
    \n
    \n     \n     \n     \n\n {/* Settings */}\n \n \n \n openOrFocusTab(\"settings\", \"Settings\")}\n aria-label=\"Settings\"\n >\n \n \n \n Settings\n \n \n\n {/* Theme Toggle */}\n \n \n \n {\n const newTheme = theme === \"dark\" ? \"light\" : \"dark\";\n setTheme(newTheme);\n const profileId = useDuckStore.getState().currentProfileId;\n if (profileId) {\n setSetting(profileId, \"theme\", \"mode\", JSON.stringify(newTheme)).catch(\n () => {}\n );\n }\n }}\n aria-label={theme === \"dark\" ? \"Switch to light mode\" : \"Switch to dark mode\"}\n >\n {theme === \"dark\" ? : }\n \n \n \n {theme === \"dark\" ? \"Light Mode\" : \"Dark Mode\"}\n \n \n \n\n {/* Help Dropdown */}\n \n \n \n \n \n \n \n \n \n \n Help\n \n \n \n window.open(\"https://github.com/caioricciuti/duck-ui\", \"_blank\")}\n >\n \n GitHub\n \n window.open(\"https://duckui.com\", \"_blank\")}>\n \n Documentation\n \n \n \n
    \n \n\n {/* Query History Panel */}\n {historyOpen && (\n
    \n
    \n Query History\n setHistoryOpen(false)}\n >\n Close×\n \n
    \n
    \n \n
    \n
    \n )}\n\n {/* Saved Queries Panel */}\n {savedQueriesOpen && (\n
    \n setSavedQueriesOpen(false)} />\n
    \n )}\n\n {/* Password Dialog for Profile Switching */}\n {switchTarget && (\n {\n if (!open) setSwitchTarget(null);\n }}\n profile={switchTarget}\n onSubmit={async (password) => {\n await switchProfile(switchTarget.id, password);\n setSwitchTarget(null);\n }}\n />\n )}\n \n );\n}\n" }, { "path": "src/components/notebook/MarkdownRenderer.tsx", "content": "import { useMemo } from \"react\";\nimport { marked } from \"marked\";\nimport DOMPurify from \"dompurify\";\n\ninterface MarkdownRendererProps {\n content: string;\n className?: string;\n}\n\nmarked.setOptions({\n breaks: true,\n gfm: true,\n});\n\nexport function MarkdownRenderer({ content, className }: MarkdownRendererProps) {\n const html = useMemo(() => {\n if (!content.trim()) return \"\";\n const raw = marked.parse(content, { async: false }) as string;\n return DOMPurify.sanitize(raw);\n }, [content]);\n\n if (!content.trim()) {\n return (\n

    \n Empty markdown cell. Click to edit.\n

    \n );\n }\n\n return
    ;\n}\n" }, { "path": "src/components/notebook/NotebookCell.tsx", "content": "import React, { useRef, useEffect, useState, useCallback, useMemo } from \"react\";\nimport {\n Play,\n Loader2,\n Trash2,\n ChevronUp,\n ChevronDown,\n Code,\n Type,\n ChevronRight,\n BarChart3,\n Table,\n Plus,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\nimport { useDuckStore } from \"@/store\";\nimport type { NotebookCell as NotebookCellType, QueryResult, ChartConfig } from \"@/store/types\";\nimport { useTheme } from \"@/components/theme/theme-provider\";\nimport {\n createCellEditor,\n useMonacoConfig,\n type EditorInstance,\n} from \"@/components/editor/monacoConfig\";\nimport { MarkdownRenderer } from \"./MarkdownRenderer\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport DuckUiTable from \"@/components/table/DuckUItable\";\nimport ChartVisualizationPro from \"@/components/charts/ChartVisualizationPro\";\nimport { ErrorBoundary, type FallbackProps } from \"react-error-boundary\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nconst CellErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => (\n
    \n

    \n {error instanceof Error ? error.message : \"Render error\"}\n

    \n \n
    \n);\n\ninterface NotebookCellProps {\n cell: NotebookCellType;\n tabId: string;\n cellIndex: number;\n totalCells: number;\n isRunning: boolean;\n onRun: (cellId: string) => void;\n onAddCell: (afterCellId: string, type: \"sql\" | \"markdown\") => void;\n}\n\nexport function NotebookCellComponent({\n cell,\n tabId,\n cellIndex,\n totalCells,\n isRunning,\n onRun,\n onAddCell,\n}: NotebookCellProps) {\n const [isEditing, setIsEditing] = useState(cell.type === \"sql\" || !cell.content);\n const [isFocused, setIsFocused] = useState(false);\n const editorRef = useRef(null);\n const editorInstanceRef = useRef(null);\n const textareaRef = useRef(null);\n const { theme } = useTheme();\n const monacoConfig = useMonacoConfig(theme);\n\n const updateCellContent = useDuckStore((s) => s.updateNotebookCellContent);\n const updateCellChartConfig = useDuckStore((s) => s.updateNotebookCellChartConfig);\n const removeCell = useDuckStore((s) => s.removeNotebookCell);\n const moveCell = useDuckStore((s) => s.moveNotebookCell);\n const toggleCollapsed = useDuckStore((s) => s.toggleNotebookCellCollapsed);\n const toggleCellType = useDuckStore((s) => s.toggleNotebookCellType);\n\n const hasResult =\n cell.type === \"sql\" && cell.result && !cell.result.error && cell.result.data.length > 0;\n const hasError = cell.type === \"sql\" && cell.result?.error;\n\n // Status indicator\n const statusColor = useMemo(() => {\n if (isRunning) return \"bg-blue-500 animate-pulse\";\n if (hasError) return \"bg-red-500\";\n if (hasResult) return \"bg-green-500\";\n return \"bg-muted-foreground/30\";\n }, [isRunning, hasError, hasResult]);\n\n // Stable callbacks for the cell editor\n const executeCallback = useCallback(async () => {\n onRun(cell.id);\n }, [onRun, cell.id]);\n\n const contentChangeCallback = useCallback(\n (value: string) => {\n updateCellContent(tabId, cell.id, value);\n },\n [tabId, cell.id, updateCellContent]\n );\n\n // SQL cell: Monaco editor\n useEffect(() => {\n if (cell.type !== \"sql\" || !editorRef.current) return;\n\n const compactConfig = {\n ...monacoConfig,\n lineNumbers: \"on\" as const,\n minimap: { enabled: false },\n scrollBeyondLastLine: false,\n padding: { top: 8 },\n fontSize: 13,\n };\n\n editorInstanceRef.current = createCellEditor(\n editorRef.current,\n compactConfig,\n cell.content,\n executeCallback,\n contentChangeCallback\n );\n\n // Auto-resize editor height based on content\n const editor = editorInstanceRef.current.editor;\n const updateHeight = () => {\n const lineCount = editor.getModel()?.getLineCount() ?? 1;\n const lineHeight = 19;\n const minHeight = 60;\n const maxHeight = 400;\n const height = Math.min(Math.max(lineCount * lineHeight + 16, minHeight), maxHeight);\n if (editorRef.current) {\n editorRef.current.style.height = `${height}px`;\n editor.layout();\n }\n };\n\n const contentDisposable = editor.onDidChangeModelContent(updateHeight);\n updateHeight();\n\n return () => {\n contentDisposable.dispose();\n if (editorInstanceRef.current) {\n editorInstanceRef.current.dispose();\n editorInstanceRef.current = null;\n }\n };\n }, [cell.type, cell.id, monacoConfig, executeCallback, contentChangeCallback]);\n\n // Sync content if changed externally\n useEffect(() => {\n if (cell.type !== \"sql\") return;\n const editor = editorInstanceRef.current?.editor;\n if (editor && cell.content !== editor.getValue()) {\n const position = editor.getPosition();\n editor.setValue(cell.content);\n if (position) editor.setPosition(position);\n }\n }, [cell.content, cell.type]);\n\n // Markdown cell: auto-resize textarea\n const handleMarkdownChange = (e: React.ChangeEvent) => {\n updateCellContent(tabId, cell.id, e.target.value);\n // Auto-resize\n if (textareaRef.current) {\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n };\n\n const handleMarkdownKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Escape\") {\n setIsEditing(false);\n }\n };\n\n // Auto-focus textarea on edit\n useEffect(() => {\n if (cell.type === \"markdown\" && isEditing && textareaRef.current) {\n textareaRef.current.focus();\n // Auto-resize on mount\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n }, [isEditing, cell.type]);\n\n const handleChartConfigChange = useCallback(\n (config: ChartConfig | undefined) => {\n updateCellChartConfig(tabId, cell.id, config);\n },\n [updateCellChartConfig, tabId, cell.id]\n );\n\n return (\n setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n >\n {/* Cell header */}\n
    \n {/* Status dot */}\n
    \n\n {/* Cell type badge */}\n toggleCellType(tabId, cell.id)}\n >\n {cell.type === \"sql\" ? (\n <>\n \n SQL\n \n ) : (\n <>\n \n MD\n \n )}\n \n\n [{cellIndex + 1}]\n\n {/* Spacer */}\n
    \n\n {/* Cell actions */}\n
    \n {cell.type === \"sql\" && (\n onRun(cell.id)}\n disabled={isRunning}\n >\n {isRunning ? (\n \n ) : (\n \n )}\n \n )}\n\n {cell.type === \"sql\" && hasResult && (\n toggleCollapsed(tabId, cell.id)}\n >\n \n \n )}\n\n moveCell(tabId, cell.id, \"up\")}\n disabled={cellIndex === 0}\n >\n \n \n moveCell(tabId, cell.id, \"down\")}\n disabled={cellIndex === totalCells - 1}\n >\n \n \n removeCell(tabId, cell.id)}\n disabled={totalCells <= 1}\n >\n \n \n
    \n
    \n\n {/* Cell body */}\n
    \n {cell.type === \"sql\" ? (\n
    \n ) : isEditing ? (\n cell.content.trim() && setIsEditing(false)}\n placeholder=\"Write markdown here...\"\n className=\"w-full p-3 bg-transparent resize-none outline-none text-sm font-mono min-h-[60px]\"\n />\n ) : (\n
    setIsEditing(true)}>\n \n
    \n )}\n
    \n\n {/* SQL cell results */}\n {cell.type === \"sql\" && cell.result && !cell.collapsed && (\n
    \n {cell.result.error ? (\n
    \n {cell.result.error}\n
    \n ) : cell.result.data.length > 0 ? (\n \n ) : (\n
    \n Query executed successfully. {cell.result.rowCount} rows returned.\n
    \n )}\n
    \n )}\n\n {/* Add cell button between cells */}\n
    \n \n \n \n \n \n \n \n onAddCell(cell.id, \"sql\")}>\n \n SQL Cell\n \n onAddCell(cell.id, \"markdown\")}>\n \n Markdown Cell\n \n \n \n
    \n
    \n );\n}\n\n// Results sub-component with table/chart tabs\nfunction CellResults({\n result,\n chartConfig,\n onChartConfigChange,\n}: {\n result: QueryResult;\n chartConfig?: ChartConfig;\n onChartConfigChange: (config: ChartConfig | undefined) => void;\n}) {\n return (\n \n \n \n
    \n Table\n \n \n \n Chart\n \n \n \n
    \n \n \n \n
    \n     \n \n
    \n \n \n \n
    \n     \n \n );\n}\n" }, { "path": "src/components/notebook/NotebookTab.tsx", "content": "import { useState, useCallback, useRef, useMemo } from \"react\";\nimport { useDuckStore } from \"@/store\";\nimport type { NotebookCell } from \"@/store/types\";\nimport { NotebookCellComponent } from \"./NotebookCell\";\nimport { NotebookToolbar } from \"./NotebookToolbar\";\nimport { toast } from \"sonner\";\n\ninterface NotebookTabProps {\n tabId: string;\n}\n\nexport default function NotebookTab({ tabId }: NotebookTabProps) {\n const tabs = useDuckStore((s) => s.tabs);\n const addCell = useDuckStore((s) => s.addNotebookCell);\n const updateCellResult = useDuckStore((s) => s.updateNotebookCellResult);\n const executeQuery = useDuckStore((s) => s.executeQuery);\n\n const currentTab = tabs.find((t) => t.id === tabId);\n const cells = useMemo((): NotebookCell[] => {\n if (!currentTab || currentTab.type !== \"notebook\" || typeof currentTab.content !== \"string\") {\n return [];\n }\n try {\n return JSON.parse(currentTab.content) as NotebookCell[];\n } catch {\n return [];\n }\n }, [currentTab]);\n\n const [runningCells, setRunningCells] = useState>(new Set());\n const [isRunningAll, setIsRunningAll] = useState(false);\n const abortRef = useRef(false);\n\n const runCell = useCallback(\n async (cellId: string) => {\n const currentCells = useDuckStore.getState().getNotebookCells(tabId);\n const cell = currentCells.find((c: NotebookCell) => c.id === cellId);\n if (!cell || cell.type !== \"sql\" || !cell.content.trim()) return;\n\n setRunningCells((prev) => new Set(prev).add(cellId));\n\n try {\n const result = await executeQuery(cell.content.trim());\n if (result) {\n updateCellResult(tabId, cellId, result);\n }\n } catch (error) {\n updateCellResult(tabId, cellId, {\n columns: [],\n columnTypes: [],\n data: [],\n rowCount: 0,\n error: error instanceof Error ? error.message : \"Unknown error\",\n });\n } finally {\n setRunningCells((prev) => {\n const next = new Set(prev);\n next.delete(cellId);\n return next;\n });\n }\n },\n [tabId, executeQuery, updateCellResult]\n );\n\n const runAllCells = useCallback(async () => {\n const currentCells = useDuckStore.getState().getNotebookCells(tabId);\n const sqlCells = currentCells.filter((c: NotebookCell) => c.type === \"sql\" && c.content.trim());\n if (sqlCells.length === 0) return;\n\n setIsRunningAll(true);\n abortRef.current = false;\n\n let completed = 0;\n for (const cell of sqlCells) {\n if (abortRef.current) break;\n await runCell(cell.id);\n completed++;\n }\n\n setIsRunningAll(false);\n if (!abortRef.current) {\n toast.success(`Executed ${completed} cell${completed !== 1 ? \"s\" : \"\"}`);\n }\n }, [tabId, runCell]);\n\n const handleAddCell = useCallback(\n (afterCellId: string, type: \"sql\" | \"markdown\") => {\n addCell(tabId, afterCellId, type);\n },\n [addCell, tabId]\n );\n\n const handleAddCellAtEnd = useCallback(\n (type: \"sql\" | \"markdown\") => {\n const lastCell = cells[cells.length - 1];\n addCell(tabId, lastCell?.id, type);\n },\n [addCell, tabId, cells]\n );\n\n return (\n
    \n \n\n
    \n
    \n {cells.map((cell, index) => (\n \n ))}\n
    \n
    \n
    \n );\n}\n" }, { "path": "src/components/notebook/NotebookToolbar.tsx", "content": "import { Play, Loader2, Plus, Code, Type } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\ninterface NotebookToolbarProps {\n onRunAll: () => void;\n onAddCell: (type: \"sql\" | \"markdown\") => void;\n isRunning: boolean;\n cellCount: number;\n}\n\nexport function NotebookToolbar({\n onRunAll,\n onAddCell,\n isRunning,\n cellCount,\n}: NotebookToolbarProps) {\n return (\n
    \n \n\n \n \n \n \n \n onAddCell(\"sql\")}>\n \n SQL Cell\n \n onAddCell(\"markdown\")}>\n \n Markdown Cell\n \n \n \n\n \n {cellCount} cell{cellCount !== 1 ? \"s\" : \"\"}\n \n
    \n );\n}\n" }, { "path": "src/components/profile/PasswordDialog.tsx", "content": "import { useState } from \"react\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Alert, AlertDescription } from \"@/components/ui/alert\";\nimport { Loader2 } from \"lucide-react\";\nimport type { Profile } from \"@/store/types\";\nimport ProfileAvatar from \"./ProfileAvatar\";\n\ninterface PasswordDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n profile: Profile;\n onSubmit: (password: string) => Promise;\n}\n\nexport default function PasswordDialog({\n open,\n onOpenChange,\n profile,\n onSubmit,\n}: PasswordDialogProps) {\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async () => {\n if (!password.trim()) return;\n setIsLoading(true);\n setError(null);\n try {\n await onSubmit(password);\n setPassword(\"\");\n } catch {\n setError(\"Incorrect password\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleOpenChange = (next: boolean) => {\n if (!next) {\n setPassword(\"\");\n setError(null);\n }\n onOpenChange(next);\n };\n\n return (\n \n \n \n Unlock Profile\n \n Enter your password to unlock this profile\n \n \n
    \n
    \n \n {profile.name}\n
    \n
    \n \n setPassword(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") handleSubmit();\n }}\n autoFocus\n placeholder=\"Enter password\"\n />\n
    \n {error && (\n \n {error}\n \n )}\n
    \n \n \n \n \n     \n     \n );\n}\n" }, { "path": "src/components/profile/ProfileAvatar.tsx", "content": "import { useTheme } from \"@/components/theme/theme-provider\";\nimport { cn } from \"@/lib/utils\";\nimport Logo from \"/logo.png\";\nimport LogoLight from \"/logo-light.png\";\n\nconst sizeMap = {\n sm: { img: \"h-4\", text: \"text-sm leading-none\" },\n md: { img: \"h-6\", text: \"text-lg leading-none\" },\n lg: { img: \"h-10\", text: \"text-3xl leading-none\" },\n xl: { img: \"h-14\", text: \"text-5xl leading-none\" },\n};\n\ninterface ProfileAvatarProps {\n avatarEmoji: string;\n size?: keyof typeof sizeMap;\n className?: string;\n}\n\nexport default function ProfileAvatar({ avatarEmoji, size = \"md\", className }: ProfileAvatarProps) {\n const { theme } = useTheme();\n const s = sizeMap[size];\n\n if (avatarEmoji === \"logo\") {\n return (\n \n );\n }\n\n return {avatarEmoji};\n}\n" }, { "path": "src/components/profile/ProfileEditor.tsx", "content": "import { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport ProfileAvatar from \"./ProfileAvatar\";\n\nconst AVATAR_OPTIONS = [\n \"logo\",\n \"\\u{1F986}\",\n \"\\u{1F424}\",\n \"\\u{1F985}\",\n \"\\u{1F427}\",\n \"\\u{1F989}\",\n \"\\u{1F426}\",\n \"\\u{1F99C}\",\n \"\\u{1F438}\",\n \"\\u{1F43B}\",\n \"\\u{1F98A}\",\n \"\\u{1F431}\",\n \"\\u{1F436}\",\n \"\\u{1F43C}\",\n \"\\u{1F981}\",\n \"\\u{1F428}\",\n \"\\u{1F42F}\",\n \"\\u{1F430}\",\n \"\\u{1F419}\",\n \"\\u{1F98B}\",\n \"\\u{1F31F}\",\n];\n\ninterface ProfileEditorProps {\n mode: \"create\" | \"edit\";\n initialValues?: { name: string; avatarEmoji: string };\n onSave: (values: { name: string; avatarEmoji: string; password?: string }) => void;\n onCancel: () => void;\n}\n\nexport default function ProfileEditor({\n mode,\n initialValues,\n onSave,\n onCancel,\n}: ProfileEditorProps) {\n const [name, setName] = useState(initialValues?.name ?? \"\");\n const [avatarEmoji, setAvatarEmoji] = useState(initialValues?.avatarEmoji ?? \"logo\");\n const [passwordEnabled, setPasswordEnabled] = useState(false);\n const [password, setPassword] = useState(\"\");\n const [confirmPassword, setConfirmPassword] = useState(\"\");\n const [emojiOpen, setEmojiOpen] = useState(false);\n\n const passwordMismatch =\n passwordEnabled && password !== confirmPassword && confirmPassword.length > 0;\n const passwordTooShort = passwordEnabled && password.length > 0 && password.length < 4;\n\n const isValid =\n name.trim().length > 0 &&\n (!passwordEnabled || (password.length >= 4 && password === confirmPassword));\n\n const handleSave = () => {\n if (!isValid) return;\n onSave({\n name: name.trim(),\n avatarEmoji,\n ...(passwordEnabled && password ? { password } : {}),\n });\n };\n\n return (\n
    \n
    \n \n setName(e.target.value)}\n maxLength={30}\n placeholder=\"Profile name\"\n autoFocus={mode === \"create\"}\n />\n
    \n\n
    \n \n \n \n \n \n \n
    \n {AVATAR_OPTIONS.map((option) => (\n {\n setAvatarEmoji(option);\n setEmojiOpen(false);\n }}\n >\n \n \n ))}\n
    \n     \n     \n
    \n\n {mode === \"create\" && (\n
    \n
    \n \n \n
    \n {passwordEnabled && (\n
    \n
    \n \n setPassword(e.target.value)}\n placeholder=\"Min 4 characters\"\n />\n {passwordTooShort && (\n

    Password must be at least 4 characters

    \n )}\n
    \n
    \n \n setConfirmPassword(e.target.value)}\n placeholder=\"Confirm password\"\n />\n {passwordMismatch && (\n

    Passwords don't match

    \n )}\n
    \n
    \n )}\n
    \n )}\n\n
    \n {mode === \"create\" && (\n \n )}\n \n
    \n
    \n );\n}\n" }, { "path": "src/components/profile/ProfilePicker.tsx", "content": "import { useState } from \"react\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { Lock, UserPlus, Loader2 } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport type { Profile } from \"@/store/types\";\nimport PasswordDialog from \"./PasswordDialog\";\nimport ProfileEditor from \"./ProfileEditor\";\nimport ProfileAvatar from \"./ProfileAvatar\";\n\nimport Logo from \"/logo.png\";\n\ninterface ProfilePickerProps {\n profiles: Profile[];\n onSelectProfile: (profileId: string, password?: string) => Promise;\n onCreateProfile: (name: string, password?: string, avatarEmoji?: string) => Promise;\n}\n\nexport default function ProfilePicker({\n profiles,\n onSelectProfile,\n onCreateProfile,\n}: ProfilePickerProps) {\n const [selectedProfile, setSelectedProfile] = useState(null);\n const [showPasswordDialog, setShowPasswordDialog] = useState(false);\n const [showCreateDialog, setShowCreateDialog] = useState(profiles.length === 0);\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSelectProfile = async (profile: Profile) => {\n if (profile.hasPassword) {\n setSelectedProfile(profile);\n setShowPasswordDialog(true);\n } else {\n setIsLoading(true);\n try {\n await onSelectProfile(profile.id);\n } finally {\n setIsLoading(false);\n }\n }\n };\n\n const handlePasswordSubmit = async (password: string) => {\n if (!selectedProfile) return;\n await onSelectProfile(selectedProfile.id, password);\n setShowPasswordDialog(false);\n };\n\n const handleCreate = async (values: { name: string; avatarEmoji: string; password?: string }) => {\n setIsLoading(true);\n try {\n await onCreateProfile(values.name, values.password, values.avatarEmoji);\n setShowCreateDialog(false);\n } finally {\n setIsLoading(false);\n }\n };\n\n return (\n
    \n
    \n \"Duck-UI\"\n

    \n {profiles.length === 0 ? \"Welcome to Duck-UI\" : \"Choose Profile\"}\n

    \n\n {profiles.length > 0 && (\n <>\n
    \n {profiles.map((profile) => (\n !isLoading && handleSelectProfile(profile)}\n >\n \n \n {profile.name}\n \n {formatDistanceToNow(new Date(profile.lastActive), { addSuffix: true })}\n \n {profile.hasPassword && (\n \n \n Protected\n \n )}\n \n \n ))}\n
    \n\n {isLoading && (\n
    \n \n Loading profile...\n
    \n )}\n\n \n \n )}\n\n \n

    \n Your profiles are stored locally on your device. Creating a profile does not share any\n data... This application is 100% offline and private by design, it's runs on the client\n side and does not send any data to any server.\n

    \n
    \n\n {selectedProfile && (\n \n )}\n\n \n \n \n Create Profile\n Create a new user profile\n \n setShowCreateDialog(false)}\n />\n \n \n
    \n );\n}\n" }, { "path": "src/components/saved-queries/SaveQueryDialog.tsx", "content": "import { useState, useEffect } from \"react\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from \"@/components/ui/dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { Loader2 } from \"lucide-react\";\nimport { toast } from \"sonner\";\nimport { useDuckStore } from \"@/store\";\nimport { saveQuery } from \"@/services/persistence/repositories/savedQueryRepository\";\n\ninterface SaveQueryDialogProps {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n defaultName: string;\n sqlText: string;\n}\n\nexport default function SaveQueryDialog({\n open,\n onOpenChange,\n defaultName,\n sqlText,\n}: SaveQueryDialogProps) {\n const [name, setName] = useState(defaultName);\n const [description, setDescription] = useState(\"\");\n const [isSaving, setIsSaving] = useState(false);\n const currentProfileId = useDuckStore((s) => s.currentProfileId);\n const bumpSavedQueriesVersion = useDuckStore((s) => s.bumpSavedQueriesVersion);\n\n // Reset form when dialog opens\n useEffect(() => {\n if (open) {\n setName(defaultName);\n setDescription(\"\");\n }\n }, [open, defaultName]);\n\n const handleSave = async () => {\n if (!name.trim() || !currentProfileId) return;\n setIsSaving(true);\n try {\n await saveQuery(currentProfileId, {\n name: name.trim(),\n sqlText,\n description: description.trim() || undefined,\n });\n bumpSavedQueriesVersion();\n toast.success(\"Query saved\");\n onOpenChange(false);\n } catch {\n toast.error(\"Failed to save query\");\n } finally {\n setIsSaving(false);\n }\n };\n\n return (\n \n \n \n Save Query\n \n Save the current query for later use\n \n \n
    \n
    \n \n setName(e.target.value)}\n placeholder=\"Query name\"\n autoFocus\n onKeyDown={(e) => {\n if (e.key === \"Enter\") handleSave();\n }}\n />\n
    \n
    \n \n setDescription(e.target.value)}\n placeholder=\"What does this query do?\"\n rows={2}\n />\n
    \n
    \n \n \n \n \n     \n     \n );\n}\n" }, { "path": "src/components/saved-queries/SavedQueriesPanel.tsx", "content": "import { useState, useEffect, useRef } from \"react\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { MoreVertical, Bookmark, X } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { toast } from \"sonner\";\nimport { useDuckStore } from \"@/store\";\nimport {\n getSavedQueries,\n updateSavedQuery,\n deleteSavedQuery,\n type SavedQuery,\n} from \"@/services/persistence/repositories/savedQueryRepository\";\n\ninterface SavedQueriesPanelProps {\n onClose: () => void;\n}\n\nexport default function SavedQueriesPanel({ onClose }: SavedQueriesPanelProps) {\n const currentProfileId = useDuckStore((s) => s.currentProfileId);\n const createTab = useDuckStore((s) => s.createTab);\n const savedQueriesVersion = useDuckStore((s) => s.savedQueriesVersion);\n const bumpSavedQueriesVersion = useDuckStore((s) => s.bumpSavedQueriesVersion);\n const [queries, setQueries] = useState([]);\n const [loading, setLoading] = useState(true);\n const [editingId, setEditingId] = useState(null);\n const [editName, setEditName] = useState(\"\");\n const renameInputRef = useRef(null);\n\n useEffect(() => {\n if (!currentProfileId) return;\n getSavedQueries(currentProfileId)\n .then(setQueries)\n .catch(console.error)\n .finally(() => setLoading(false));\n }, [currentProfileId, savedQueriesVersion]);\n\n useEffect(() => {\n if (editingId && renameInputRef.current) {\n renameInputRef.current.focus();\n renameInputRef.current.select();\n }\n }, [editingId]);\n\n const handleOpen = (query: SavedQuery) => {\n createTab(\"sql\", query.sql_text, query.name);\n };\n\n const handleStartRename = (query: SavedQuery) => {\n setEditingId(query.id);\n setEditName(query.name);\n };\n\n const handleFinishRename = async (id: string) => {\n if (!editName.trim()) {\n setEditingId(null);\n return;\n }\n try {\n await updateSavedQuery(id, { name: editName.trim() });\n setQueries((prev) => prev.map((q) => (q.id === id ? { ...q, name: editName.trim() } : q)));\n bumpSavedQueriesVersion();\n } catch {\n toast.error(\"Failed to rename query\");\n }\n setEditingId(null);\n };\n\n const handleDelete = async (id: string) => {\n try {\n await deleteSavedQuery(id);\n setQueries((prev) => prev.filter((q) => q.id !== id));\n bumpSavedQueriesVersion();\n toast.success(\"Query deleted\");\n } catch {\n toast.error(\"Failed to delete query\");\n }\n };\n\n return (\n
    \n
    \n \n \n Saved Queries\n \n \n
    \n\n \n {loading ? (\n
    \n {[1, 2, 3].map((i) => (\n \n ))}\n
    \n ) : queries.length === 0 ? (\n
    \n \n

    No saved queries yet

    \n

    Save a query from the editor toolbar

    \n
    \n ) : (\n
    \n {queries.map((query) => (\n handleOpen(query)}\n >\n \n
    \n
    \n {editingId === query.id ? (\n setEditName(e.target.value)}\n onBlur={() => handleFinishRename(query.id)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") handleFinishRename(query.id);\n if (e.key === \"Escape\") setEditingId(null);\n }}\n onClick={(e) => e.stopPropagation()}\n className=\"h-6 text-sm font-medium px-1\"\n />\n ) : (\n {query.name}\n )}\n 
    \n                        {query.sql_text.length > 100\n                          ? query.sql_text.slice(0, 100) + \"...\"\n                          : query.sql_text}\n
    \n \n {formatDistanceToNow(new Date(query.updated_at), { addSuffix: true })}\n \n
    \n \n \n e.stopPropagation()}\n >\n \n \n \n \n {\n e.stopPropagation();\n handleOpen(query);\n }}\n >\n Open in new tab\n \n {\n e.stopPropagation();\n handleStartRename(query);\n }}\n >\n Rename\n \n \n {\n e.stopPropagation();\n handleDelete(query.id);\n }}\n >\n Delete\n \n \n \n
    \n     \n \n ))}\n
    \n )}\n     \n
    \n );\n}\n" }, { "path": "src/components/table/CellValueViewer.tsx", "content": "import React, { useState, useMemo } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Copy, X, ChevronDown, ChevronUp } from \"lucide-react\";\nimport { toast } from \"sonner\";\n\ninterface CellValueViewerProps {\n value: unknown;\n columnName: string;\n rowIndex: number;\n onClose: () => void;\n}\n\nexport const CellValueViewer: React.FC = ({\n value,\n columnName,\n rowIndex,\n onClose,\n}) => {\n const [isMinimized, setIsMinimized] = useState(false);\n\n // Detect value type and format accordingly\n // eslint-disable-next-line react-hooks/preserve-manual-memoization\n const { displayValue, valueType } = useMemo(() => {\n if (value === null || value === undefined) {\n return { displayValue: \"NULL\", valueType: \"null\", isFormatted: false };\n }\n\n // Check if it's JSON\n if (typeof value === \"object\") {\n try {\n return {\n displayValue: JSON.stringify(value, null, 2),\n valueType: \"json\",\n isFormatted: true,\n };\n } catch {\n return {\n displayValue: String(value),\n valueType: \"object\",\n isFormatted: false,\n };\n }\n }\n\n // Check if string value is JSON\n if (typeof value === \"string\") {\n try {\n const parsed = JSON.parse(value);\n if (typeof parsed === \"object\") {\n return {\n displayValue: JSON.stringify(parsed, null, 2),\n valueType: \"json\",\n isFormatted: true,\n };\n }\n } catch {\n // Not JSON, return as string\n }\n\n // Check if it's a long text\n if (value.length > 100) {\n return {\n displayValue: value,\n valueType: \"text\",\n isFormatted: false,\n };\n }\n }\n\n // Check if it's a number\n if (typeof value === \"number\" || typeof value === \"bigint\") {\n return {\n displayValue: String(value),\n valueType: \"number\",\n isFormatted: false,\n };\n }\n\n // Default string\n return {\n displayValue: String(value),\n valueType: \"string\",\n isFormatted: false,\n };\n }, [value]);\n\n const handleCopy = () => {\n navigator.clipboard.writeText(displayValue);\n toast.success(\"Copied to clipboard\");\n };\n\n if (isMinimized) {\n return (\n \n setIsMinimized(false)}>\n
    \n \n {columnName} (Row {rowIndex + 1})\n \n
    \n {\n e.stopPropagation();\n setIsMinimized(false);\n }}\n >\n \n \n {\n e.stopPropagation();\n onClose();\n }}\n >\n \n \n
    \n
    \n     \n     \n );\n }\n\n return (\n \n \n
    \n
    \n Cell Value\n

    \n {columnName} â€ĸ Row {rowIndex + 1} â€ĸ {valueType}\n

    \n
    \n
    \n \n setIsMinimized(true)}\n >\n \n \n \n
    \n
    \n     \n \n
    \n {valueType === \"json\" ? (\n 
    \n              {displayValue}\n
    \n ) : valueType === \"text\" ? (\n
    \n {displayValue}\n
    \n ) : valueType === \"null\" ? (\n
    {displayValue}
    \n ) : (\n
    \n {displayValue}\n
    \n )}\n
    \n     \n     \n );\n};\n\nexport default CellValueViewer;\n" }, { "path": "src/components/table/ColumnStatsPanel.tsx", "content": "import React, { useMemo } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronDown, ChevronUp, X } from \"lucide-react\";\nimport { useTheme } from \"@/components/theme/theme-provider\";\n\ntype DataRow = Record;\n\ninterface ColumnStats {\n columnName: string;\n totalCount: number;\n nullCount: number;\n uniqueCount: number;\n dataType: string;\n min?: number | string;\n max?: number | string;\n avg?: number;\n topValues?: { value: unknown; count: number }[];\n}\n\ninterface ColumnStatsPanelProps {\n data: DataRow[];\n onClose: () => void;\n isMinimized: boolean;\n onToggleMinimize: () => void;\n}\n\nconst calculateColumnStats = (data: DataRow[], columnName: string): ColumnStats => {\n const values = data.map((row) => row[columnName]);\n const totalCount = values.length;\n const nullCount = values.filter((v) => v === null || v === undefined).length;\n const nonNullValues = values.filter((v) => v !== null && v !== undefined);\n const uniqueValues = new Set(nonNullValues);\n const uniqueCount = uniqueValues.size;\n\n // Determine data type\n let dataType = \"mixed\";\n if (nonNullValues.length > 0) {\n const firstValue = nonNullValues[0];\n if (typeof firstValue === \"number\" || typeof firstValue === \"bigint\") {\n dataType = \"number\";\n } else if (typeof firstValue === \"string\") {\n dataType = \"string\";\n } else if (typeof firstValue === \"boolean\") {\n dataType = \"boolean\";\n } else if (firstValue instanceof Date) {\n dataType = \"date\";\n }\n }\n\n const stats: ColumnStats = {\n columnName,\n totalCount,\n nullCount,\n uniqueCount,\n dataType,\n };\n\n // Calculate stats for numeric columns\n if (dataType === \"number\") {\n const numericValues = nonNullValues.map((v) =>\n typeof v === \"bigint\" ? Number(v) : v\n ) as number[];\n if (numericValues.length > 0) {\n stats.min = Math.min(...numericValues);\n stats.max = Math.max(...numericValues);\n stats.avg = numericValues.reduce((sum, v) => sum + v, 0) / numericValues.length;\n }\n }\n\n // Calculate top values (for categorical data)\n if (dataType === \"string\" || dataType === \"boolean\" || uniqueCount <= 20) {\n const valueCounts = new Map();\n nonNullValues.forEach((value) => {\n const key = String(value);\n valueCounts.set(key, (valueCounts.get(key) || 0) + 1);\n });\n\n stats.topValues = Array.from(valueCounts.entries())\n .map(([value, count]) => ({ value, count }))\n .sort((a, b) => b.count - a.count)\n .slice(0, 10);\n }\n\n return stats;\n};\n\nconst MiniChart: React.FC<{ stats: ColumnStats }> = ({ stats }) => {\n const { theme } = useTheme();\n\n if (!stats.topValues || stats.topValues.length === 0) {\n return
    No chart data available
    ;\n }\n\n const chartData = stats.topValues.slice(0, 8).map((item) => ({\n name:\n String(item.value).length > 15\n ? String(item.value).substring(0, 15) + \"...\"\n : String(item.value),\n value: item.count,\n }));\n\n const maxValue = Math.max(...chartData.map((d) => d.value));\n\n const colors =\n theme === \"dark\"\n ? [\"#8b5cf6\", \"#a78bfa\", \"#c4b5fd\", \"#ddd6fe\", \"#ede9fe\"]\n : [\"#7c3aed\", \"#8b5cf6\", \"#a78bfa\", \"#c4b5fd\", \"#ddd6fe\"];\n\n return (\n
    \n
    \n {chartData.map((item, i) => (\n 0 ? (item.value / maxValue) * 100 : 0}%`,\n backgroundColor: colors[i % colors.length],\n minHeight: item.value > 0 ? 2 : 0,\n }}\n title={`${item.name}: ${item.value}`}\n />\n ))}\n
    \n
    \n {chartData.map((item, i) => (\n \n {item.name}\n
    \n ))}\n
    \n \n );\n};\n\nconst ColumnStatCard: React.FC<{ stats: ColumnStats }> = ({ stats }) => {\n return (\n \n \n \n {stats.columnName}\n \n

    {stats.dataType}

    \n     \n \n
    \n
    \n Total:{\" \"}\n {stats.totalCount.toLocaleString()}\n
    \n
    \n Unique:{\" \"}\n {stats.uniqueCount.toLocaleString()}\n
    \n
    \n Nulls:{\" \"}\n {stats.nullCount.toLocaleString()}\n
    \n
    \n Fill:{\" \"}\n \n {(((stats.totalCount - stats.nullCount) / stats.totalCount) * 100 || 0).toFixed(1)}%\n \n
    \n
    \n\n {stats.dataType === \"number\" && stats.min !== undefined && (\n
    \n
    \n Min:{\" \"}\n {Number(stats.min).toLocaleString()}\n
    \n
    \n Max:{\" \"}\n {Number(stats.max).toLocaleString()}\n
    \n {stats.avg !== undefined && (\n
    \n Avg:{\" \"}\n \n {stats.avg.toLocaleString(undefined, { maximumFractionDigits: 2 })}\n \n
    \n )}\n
    \n )}\n\n
    \n \n
    \n     \n     \n );\n};\n\nexport const ColumnStatsPanel: React.FC = ({\n data,\n onClose,\n isMinimized,\n onToggleMinimize,\n}) => {\n const columnStats = useMemo(() => {\n if (!data || data.length === 0 || !data[0]) return [];\n\n const columns = Object.keys(data[0]).filter((key) => key !== \"__row_number__\");\n return columns.map((col) => calculateColumnStats(data, col));\n }, [data]);\n\n if (isMinimized) {\n return (\n \n \n
    \n \n Column Statistics ({columnStats.length} columns)\n \n
    \n {\n e.stopPropagation();\n onToggleMinimize();\n }}\n >\n \n \n {\n e.stopPropagation();\n onClose();\n }}\n >\n \n \n
    \n
    \n     \n     \n );\n }\n\n return (\n \n \n
    \n
    \n Column Statistics\n

    \n {columnStats.length} columns â€ĸ {data.length.toLocaleString()} rows\n

    \n
    \n
    \n \n \n
    \n
    \n     \n \n
    \n {columnStats.map((stats) => (\n \n ))}\n
    \n     \n     \n );\n};\n\nexport default ColumnStatsPanel;\n" }, { "path": "src/components/table/DuckUItable.tsx", "content": "import React, { useState, useMemo, useEffect, useRef } from \"react\";\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type FilterFn,\n type ColumnFiltersState,\n type ColumnResizeMode,\n type PaginationState,\n type ColumnSizingState,\n type SortingState,\n} from \"@tanstack/react-table\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { formatBytes, formatDuration } from \"@/lib/utils\";\nimport {\n Download,\n Search,\n X,\n Clock,\n SlidersHorizontal,\n Grid3X3,\n Copy,\n MousePointer,\n MoreHorizontal,\n ChevronDown,\n ChevronUp,\n ChevronsUpDown,\n BarChart3,\n FolderOpen,\n FileSpreadsheet,\n FileJson,\n FileText,\n FileArchive,\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n DropdownMenuSeparator,\n} from \"@/components/ui/dropdown-menu\";\nimport { toast } from \"sonner\";\nimport { useDuckStore } from \"@/store\";\nimport { CellValueViewer } from \"./CellValueViewer\";\nimport { ColumnStatsPanel } from \"./ColumnStatsPanel\";\nimport { fileSystemService } from \"@/lib/fileSystem\";\n\n// Define a generic type for the data row\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype DataRow = Record;\n\n// Types for cell selection\ntype CellPosition = { row: number; col: string };\ntype ContextMenuPosition = { x: number; y: number };\n\n// Type for the component props\ninterface DuckTableProps {\n data: DataRow[];\n executionTime?: number | null;\n responseSize?: number | null;\n initialPageSize?: number;\n columnRenderers?: Record React.ReactNode>;\n tableHeight?: string | number;\n}\n\nconst globalFilterFn: FilterFn = (row, columnId, value) => {\n const cellValue = row.getValue(columnId);\n if (cellValue === null || cellValue === undefined) return false;\n const searchStr = String(cellValue).toLowerCase();\n const filterValue = String(value).toLowerCase();\n return searchStr.includes(filterValue);\n};\n\nconst DEFAULT_COLUMN_WIDTH = 150;\nconst MIN_COLUMN_WIDTH = 50;\nconst MAX_COLUMN_WIDTH = 1000; // Generous max for \"free\" resizing\nconst DEFAULT_MAX_AUTO_WIDTH = 250;\nconst DEFAULT_MIN_AUTO_WIDTH = 80;\nconst DEFAULT_SAMPLE_SIZE = 100;\n\n// Safe JSON stringify that handles BigInt\nconst safeStringify = (value: unknown): string => {\n if (value === null || value === undefined) return \"null\";\n if (typeof value === \"bigint\") return value.toString();\n if (typeof value === \"object\") {\n try {\n return JSON.stringify(value, (_, v) => (typeof v === \"bigint\" ? v.toString() : v));\n } catch {\n return String(value);\n }\n }\n return String(value);\n};\n\n// Calculate optimal column width based on content\nconst calculateOptimalWidth = (\n data: DataRow[],\n columnKey: string,\n minWidth: number = DEFAULT_MIN_AUTO_WIDTH,\n maxWidth: number = DEFAULT_MAX_AUTO_WIDTH,\n sampleSize: number = DEFAULT_SAMPLE_SIZE\n): number => {\n if (!data.length) return DEFAULT_COLUMN_WIDTH;\n\n // Sample data for performance\n const sample = data.slice(0, Math.min(sampleSize, data.length));\n\n // Calculate based on content length\n let maxLength = columnKey.length; // Start with header length\n\n sample.forEach((row) => {\n const value = row[columnKey];\n const strValue = safeStringify(value);\n maxLength = Math.max(maxLength, strValue.length);\n });\n\n // Rough estimation: 8px per character + padding\n const estimatedWidth = Math.max(minWidth, Math.min(maxWidth, maxLength * 8 + 20));\n\n return estimatedWidth;\n};\n\nconst DuckUITable: React.FC = ({\n data = [],\n executionTime,\n responseSize,\n initialPageSize = 25,\n columnRenderers,\n tableHeight = \"100%\",\n}) => {\n const tableContainerRef = useRef(null);\n const horizontalScrollRef = useRef(null);\n\n const [columnFilters, setColumnFilters] = useState([]);\n const [globalFilter, setGlobalFilter] = useState(\"\");\n const [globalFilterInput, setGlobalFilterInput] = useState(\"\");\n\n const [pagination, setPagination] = useState({\n pageIndex: 0,\n pageSize: initialPageSize,\n });\n const [enabledColumns, setEnabledColumns] = useState>({});\n const [showColumnSelector, setShowColumnSelector] = useState(false);\n const [columnSizing, setColumnSizing] = useState({});\n const [userResizedColumns, setUserResizedColumns] = useState>({});\n const [columnSelectorFilter, setColumnSelectorFilter] = useState(\"\");\n const [sorting, setSorting] = useState([]);\n\n // New spreadsheet features\n const [showRowNumbers, setShowRowNumbers] = useState(false);\n const [zebraStripes, setZebraStripes] = useState(true);\n const [showGridLines, setShowGridLines] = useState(false);\n const [showSpreadsheetOptions, setShowSpreadsheetOptions] = useState(false);\n\n // Cell selection state\n const [selectedCells, setSelectedCells] = useState>(new Set());\n const [lastSelectedCell, setLastSelectedCell] = useState(null);\n const [contextMenu, setContextMenu] = useState(null);\n // Drag selection state\n const [isDragging, setIsDragging] = useState(false);\n const [dragStart, setDragStart] = useState(null);\n const [dragEnd, setDragEnd] = useState(null);\n\n // Cell value viewer state\n const [viewedCell, setViewedCell] = useState<{\n value: unknown;\n columnName: string;\n rowIndex: number;\n } | null>(null);\n\n // Get mounted folders from store\n const mountedFolders = useDuckStore((state) => state.mountedFolders);\n\n // Column stats panel state\n const [showStatsPanel, setShowStatsPanel] = useState(false);\n const [statsPanelMinimized, setStatsPanelMinimized] = useState(false);\n\n const columnResizeMode = \"onChange\" as ColumnResizeMode;\n\n useEffect(() => {\n const handler = setTimeout(() => setGlobalFilter(globalFilterInput), 300);\n return () => clearTimeout(handler);\n }, [globalFilterInput]);\n\n useEffect(() => {\n if (globalFilter !== globalFilterInput) setGlobalFilterInput(globalFilter);\n }, [globalFilter]);\n\n // Initialize/Update enabled columns when data changes\n useEffect(() => {\n if (data && data.length > 0 && data[0]) {\n const allKeys = Object.keys(data[0]);\n const initialEnabledCols = allKeys.reduce(\n (acc, key) => {\n acc[key] = enabledColumns[key] === undefined ? true : enabledColumns[key];\n return acc;\n },\n {} as Record\n );\n setEnabledColumns(initialEnabledCols);\n\n const validUserResized: Record = {};\n allKeys.forEach((key) => {\n if (userResizedColumns[key] !== undefined) {\n validUserResized[key] = userResizedColumns[key];\n }\n });\n setUserResizedColumns(validUserResized);\n } else {\n setEnabledColumns({});\n setUserResizedColumns({});\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [data]); // Keep enabledColumns and userResizedColumns out to preserve user settings\n\n // Effect to initialize columnSizing or update it when userResizedColumns change\n useEffect(() => {\n if (data && data.length > 0 && data[0]) {\n const newSizingState: ColumnSizingState = {};\n Object.keys(data[0]).forEach((key) => {\n newSizingState[key] =\n userResizedColumns[key] !== undefined ? userResizedColumns[key] : DEFAULT_COLUMN_WIDTH; // Use default width\n });\n if (JSON.stringify(columnSizing) !== JSON.stringify(newSizingState)) {\n setColumnSizing(newSizingState);\n }\n } else if (Object.keys(columnSizing).length > 0) {\n setColumnSizing({});\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [data, userResizedColumns]); // columnSizing itself should not be a direct dependency here to avoid loops\n\n // Close column selector and context menu on outside click (Issue #5, #6)\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n\n // Close column selector if clicking outside\n if (showColumnSelector && !target.closest(\".column-selector-panel\")) {\n setShowColumnSelector(false);\n }\n\n // Close spreadsheet options if clicking outside\n if (showSpreadsheetOptions && !target.closest(\".spreadsheet-options-panel\")) {\n setShowSpreadsheetOptions(false);\n }\n\n // Close context menu on any click\n if (contextMenu) {\n setContextMenu(null);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n }, [showColumnSelector, showSpreadsheetOptions, contextMenu]);\n\n const columns = useMemo[]>(() => {\n if (!data || !data.length || !data[0]) return [];\n const keys = Object.keys(data[0]);\n const cols: ColumnDef[] = [];\n\n // Add row numbers column if enabled\n if (showRowNumbers) {\n cols.push({\n id: \"__row_number__\",\n accessorFn: (_, index) => index + 1,\n minSize: 50,\n maxSize: 70,\n size: 60,\n header: () => (\n \n #\n \n ),\n cell: ({ row }) => (\n
    \n {row.index + 1}\n
    \n ),\n enableColumnFilter: false,\n enableSorting: false,\n enableResizing: false,\n });\n }\n\n const dataCols = keys\n .map((key): ColumnDef => {\n return {\n id: key, // Explicit id to avoid TanStack Table misinterpreting numeric keys\n accessorFn: (row) => row[key], // Use accessorFn instead of accessorKey for direct property access\n minSize: MIN_COLUMN_WIDTH,\n maxSize: MAX_COLUMN_WIDTH,\n enableSorting: true,\n header: ({ column }) => (\n column.toggleSorting()}\n >\n {key}\n \n {column.getIsSorted() === \"asc\" ? (\n \n ) : column.getIsSorted() === \"desc\" ? (\n \n ) : (\n \n )}\n \n \n ),\n cell: ({ row }) => {\n const value = row.getValue(key);\n const titleAttribute = safeStringify(value);\n let displayValue: React.ReactNode;\n\n if (columnRenderers && columnRenderers[key] && value !== null && value !== undefined) {\n displayValue = columnRenderers[key](value);\n } else if (value === null || value === undefined) {\n displayValue = (\n null\n );\n } else if (typeof value === \"object\" || typeof value === \"bigint\") {\n // Properly stringify objects and BigInt for display\n const stringifiedValue = safeStringify(value);\n displayValue = stringifiedValue; // Use plain string for better copy behavior\n } else {\n displayValue = String(value); // Default to string\n }\n\n return (\n \n {displayValue}\n \n );\n },\n enableColumnFilter: false,\n filterFn: globalFilterFn,\n };\n })\n .filter((column) => {\n // Check both accessorKey (old) and id (new) for enabled columns\n const accessorKey = (column as unknown as { accessorKey?: string }).accessorKey;\n const columnId = (column as unknown as { id?: string }).id;\n const keyToCheck = columnId || accessorKey;\n return keyToCheck === undefined || enabledColumns[keyToCheck] !== false;\n });\n\n return [...cols, ...dataCols];\n }, [data, enabledColumns, columnRenderers, showRowNumbers]);\n\n const handleColumnSizeChange = (updater: React.SetStateAction) => {\n const newSizingFromTable = typeof updater === \"function\" ? updater(columnSizing) : updater;\n setColumnSizing(newSizingFromTable);\n setUserResizedColumns(newSizingFromTable);\n };\n\n const table = useReactTable({\n data,\n columns,\n columnResizeMode,\n state: {\n columnFilters,\n globalFilter,\n pagination,\n columnSizing,\n sorting,\n },\n onColumnFiltersChange: setColumnFilters,\n onGlobalFilterChange: setGlobalFilter,\n onPaginationChange: setPagination,\n onColumnSizingChange: handleColumnSizeChange,\n onSortingChange: setSorting,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n enableGlobalFilter: true,\n enableColumnResizing: true,\n enableSorting: true,\n debugTable: false,\n });\n\n const { rows } = table.getRowModel();\n const ROW_HEIGHT = 32; // Must match CSS and cell content height\n\n // Helper function to create selection range between two points\n const createSelectionRange = (start: CellPosition, end: CellPosition): Set => {\n const selection = new Set();\n if (!data || !data[0]) return selection;\n\n const columns = Object.keys(data[0]);\n const minRow = Math.min(start.row, end.row);\n const maxRow = Math.max(start.row, end.row);\n const startColIndex = columns.indexOf(start.col);\n const endColIndex = columns.indexOf(end.col);\n const minColIndex = Math.min(startColIndex, endColIndex);\n const maxColIndex = Math.max(startColIndex, endColIndex);\n\n for (let row = minRow; row <= maxRow && row < data.length; row++) {\n for (let colIdx = minColIndex; colIdx <= maxColIndex && colIdx < columns.length; colIdx++) {\n const col = columns[colIdx];\n if (col !== \"__row_number__\") {\n selection.add(`${row}::${col}`);\n }\n }\n }\n\n return selection;\n };\n\n // Keyboard handlers\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n // Ctrl/Cmd + C to copy selected cells\n if ((e.ctrlKey || e.metaKey) && e.key === \"c\" && selectedCells.size > 0) {\n e.preventDefault();\n\n // Get selected cells data organized by row and column\n const cellsByPosition = new Map();\n const rowIndices = new Set();\n const columnIds = new Set();\n\n selectedCells.forEach((cellKey) => {\n const [rowStr, colId] = cellKey.split(\"::\");\n const rowIndex = parseInt(rowStr);\n rowIndices.add(rowIndex);\n columnIds.add(colId);\n\n const row = rows[rowIndex];\n if (row) {\n const cell = row.getAllCells().find((c) => c.column.id === colId);\n if (cell) {\n cellsByPosition.set(cellKey, cell.getValue());\n }\n }\n });\n\n // Sort rows and columns\n const sortedRows = Array.from(rowIndices).sort((a, b) => a - b);\n const sortedCols = Array.from(columnIds);\n\n // Build TSV string for Excel/Sheets compatibility\n const tsvRows: string[] = [];\n sortedRows.forEach((rowIndex) => {\n const rowValues: string[] = [];\n sortedCols.forEach((colId) => {\n const cellKey = `${rowIndex}::${colId}`;\n const value = cellsByPosition.get(cellKey);\n if (value !== undefined) {\n const strValue = value === null ? \"\" : safeStringify(value);\n rowValues.push(strValue);\n } else if (selectedCells.has(cellKey)) {\n rowValues.push(\"\");\n }\n });\n if (rowValues.length > 0) {\n tsvRows.push(rowValues.join(\"\\t\"));\n }\n });\n\n const tsvContent = tsvRows.join(\"\\n\");\n navigator.clipboard.writeText(tsvContent).then(() => {\n toast.success(`Copied ${selectedCells.size} cells to clipboard`);\n\n // Visual feedback - flash selected cells\n const tempCells = new Set(selectedCells);\n setSelectedCells(new Set());\n setTimeout(() => setSelectedCells(tempCells), 100);\n });\n }\n\n // Ctrl/Cmd + A to select all\n if ((e.ctrlKey || e.metaKey) && e.key === \"a\") {\n e.preventDefault();\n const allCells = new Set();\n rows.forEach((row, rowIndex) => {\n row.getVisibleCells().forEach((cell) => {\n if (cell.column.id !== \"__row_number__\") {\n allCells.add(`${rowIndex}::${cell.column.id}`);\n }\n });\n });\n setSelectedCells(allCells);\n }\n\n // Escape to clear selection\n if (e.key === \"Escape\") {\n setSelectedCells(new Set());\n setContextMenu(null);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [selectedCells, rows]);\n\n // Handle mouse up globally for drag selection\n useEffect(() => {\n const handleMouseUp = () => {\n if (isDragging) {\n setIsDragging(false);\n if (dragEnd) {\n setLastSelectedCell(dragEnd);\n }\n }\n };\n\n if (isDragging) {\n document.addEventListener(\"mouseup\", handleMouseUp);\n return () => document.removeEventListener(\"mouseup\", handleMouseUp);\n }\n }, [isDragging, dragEnd, setLastSelectedCell]);\n\n // Auto-size columns when data changes\n useEffect(() => {\n if (data && data.length > 0 && data[0]) {\n const newSizing: ColumnSizingState = {};\n const keys = Object.keys(data[0]);\n\n keys.forEach((key) => {\n newSizing[key] = calculateOptimalWidth(data, key);\n });\n\n setColumnSizing(newSizing);\n setUserResizedColumns(newSizing);\n }\n }, [data]); // Trigger when data changes\n\n const rowVirtualizer = useVirtualizer({\n count: rows.length,\n estimateSize: () => ROW_HEIGHT,\n getScrollElement: () => horizontalScrollRef.current,\n overscan: 10, // Lowered slightly, adjust as needed\n });\n\n const virtualRows = rowVirtualizer.getVirtualItems();\n const paddingTop = virtualRows.length > 0 ? (virtualRows[0]?.start ?? 0) : 0;\n const paddingBottom =\n virtualRows.length > 0\n ? rowVirtualizer.getTotalSize() - (virtualRows[virtualRows.length - 1]?.end ?? 0)\n : 0;\n\n const exportToCSV = () => {\n if (!data || !data.length) return;\n const visibleKeys = table.getVisibleLeafColumns().map((c) => c.id);\n const headers = visibleKeys.length > 0 ? visibleKeys : data[0] ? Object.keys(data[0]) : [];\n if (headers.length === 0) return;\n\n const csvRows = [headers.join(\",\")];\n // Export based on current filter, but original data (not paginated)\n const dataToExport = table.getFilteredRowModel().rows.map((r) => r.original);\n\n for (const row of dataToExport) {\n const values = headers.map((header) => {\n const value = row[header];\n if (value === null || value === undefined) return \"\";\n if (typeof value === \"string\" && value.includes(\",\"))\n return `\"${value.replace(/\"/g, '\"\"')}\"`;\n if (typeof value === \"object\" || typeof value === \"bigint\")\n return `\"${safeStringify(value).replace(/\"/g, '\"\"')}\"`;\n return String(value);\n });\n csvRows.push(values.join(\",\"));\n }\n const blob = new Blob([csvRows.join(\"\\n\")], {\n type: \"text/csv;charset=utf-8;\",\n });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", `duck-ui-export-${new Date().toISOString().slice(0, 19)}.csv`);\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n toast.success(\"Exported to CSV\");\n };\n\n const exportToJSON = () => {\n if (!data || !data.length) return;\n\n const dataToExport = table.getFilteredRowModel().rows.map((r) => r.original);\n\n const jsonString = JSON.stringify(\n dataToExport,\n (_, v) => (typeof v === \"bigint\" ? v.toString() : v),\n 2\n );\n\n const blob = new Blob([jsonString], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", `duck-ui-export-${new Date().toISOString().slice(0, 19)}.json`);\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n\n toast.success(\"Exported to JSON\");\n };\n\n const exportToXLSX = async () => {\n if (!data || !data.length) return;\n\n try {\n // Dynamic import - only load ExcelJS when needed\n const ExcelJS = await import(\"exceljs\");\n\n const dataToExport = table.getFilteredRowModel().rows.map((r) => {\n const row: Record = {};\n Object.keys(r.original).forEach((key) => {\n const val = r.original[key];\n row[key] = typeof val === \"bigint\" ? val.toString() : val;\n });\n return row;\n });\n\n const workbook = new ExcelJS.Workbook();\n const worksheet = workbook.addWorksheet(\"Data\");\n\n const keys = Object.keys(dataToExport[0] || {});\n const maxWidth = 50;\n worksheet.columns = keys.map((key) => ({\n header: key,\n key,\n width: Math.min(\n maxWidth,\n Math.max(\n key.length,\n ...dataToExport.slice(0, 100).map((row) => String(row[key] || \"\").length)\n )\n ),\n }));\n\n worksheet.addRows(dataToExport);\n\n const buffer = await workbook.xlsx.writeBuffer();\n const blob = new Blob([buffer], {\n type: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", `duck-ui-export-${new Date().toISOString().slice(0, 19)}.xlsx`);\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n\n toast.success(\"Exported to Excel\");\n } catch (error) {\n console.error(\"XLSX export failed:\", error);\n toast.error(\"Failed to export to Excel\");\n }\n };\n\n const exportToDuckDB = async () => {\n if (!data || !data.length) return;\n\n try {\n toast.info(\"Preparing DuckDB export...\");\n\n const dataToExport = table.getFilteredRowModel().rows.map((r) => r.original);\n\n // Get current connection from store\n const { connection, db } = useDuckStore.getState();\n if (!connection || !db) {\n throw new Error(\"Database not initialized\");\n }\n\n // Use Parquet format (DuckDB native format)\n const fileName = `export_${new Date().toISOString().slice(0, 19)}.parquet`;\n\n // Create VALUES clause for the data\n const createValuesClause = () => {\n if (dataToExport.length === 0) return \"\";\n\n const keys = Object.keys(dataToExport[0]);\n const values = dataToExport.map((row) => {\n const rowValues = keys.map((key) => {\n const val = row[key];\n if (val === null || val === undefined) return \"NULL\";\n if (typeof val === \"string\") return `'${val.replace(/'/g, \"''\")}'`;\n if (typeof val === \"bigint\") return val.toString();\n if (typeof val === \"object\") return `'${JSON.stringify(val).replace(/'/g, \"''\")}'`;\n return String(val);\n });\n return `(${rowValues.join(\", \")})`;\n });\n\n return values.join(\", \");\n };\n\n const valuesClause = createValuesClause();\n const keys = Object.keys(dataToExport[0]);\n\n await connection.query(\n `COPY (SELECT * FROM (VALUES ${valuesClause}) AS t(${keys.map((k) => `\"${k}\"`).join(\", \")})) TO '${fileName}' (FORMAT 'parquet')`\n );\n\n const buffer = await db.copyFileToBuffer(fileName);\n await db.dropFile(fileName);\n\n // Convert Uint8Array to ArrayBuffer for Blob compatibility\n const arrayBuffer = buffer.buffer.slice(0) as ArrayBuffer;\n const blob = new Blob([arrayBuffer], { type: \"application/octet-stream\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.setAttribute(\"href\", url);\n link.setAttribute(\"download\", fileName);\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n URL.revokeObjectURL(url);\n\n toast.success(\"Exported to Parquet (DuckDB format)\");\n } catch (error) {\n console.error(\"DuckDB export failed:\", error);\n toast.error(\n \"Failed to export: \" + (error instanceof Error ? error.message : \"Unknown error\")\n );\n }\n };\n\n // Save to folder functions\n const saveToFolderAsCSV = async (folderId: string, folderName: string) => {\n if (!data || !data.length) return;\n\n try {\n const visibleKeys = table.getVisibleLeafColumns().map((c) => c.id);\n const headers = visibleKeys.length > 0 ? visibleKeys : data[0] ? Object.keys(data[0]) : [];\n if (headers.length === 0) return;\n\n const csvRows = [headers.join(\",\")];\n const dataToExport = table.getFilteredRowModel().rows.map((r) => r.original);\n\n for (const row of dataToExport) {\n const values = headers.map((header) => {\n const value = row[header];\n if (value === null || value === undefined) return \"\";\n if (typeof value === \"string\" && value.includes(\",\"))\n return `\"${value.replace(/\"/g, '\"\"')}\"`;\n if (typeof value === \"object\" || typeof value === \"bigint\")\n return `\"${safeStringify(value).replace(/\"/g, '\"\"')}\"`;\n return String(value);\n });\n csvRows.push(values.join(\",\"));\n }\n\n const content = csvRows.join(\"\\n\");\n const fileName = `export-${new Date().toISOString().slice(0, 19).replace(/:/g, \"-\")}.csv`;\n\n await fileSystemService.saveFile(folderId, fileName, content);\n toast.success(`Saved to ${folderName}/${fileName}`);\n } catch (error) {\n console.error(\"Save to folder failed:\", error);\n toast.error(\"Failed to save: \" + (error instanceof Error ? error.message : \"Unknown error\"));\n }\n };\n\n const saveToFolderAsJSON = async (folderId: string, folderName: string) => {\n if (!data || !data.length) return;\n\n try {\n const dataToExport = table.getFilteredRowModel().rows.map((r) => r.original);\n const jsonString = JSON.stringify(\n dataToExport,\n (_, v) => (typeof v === \"bigint\" ? v.toString() : v),\n 2\n );\n\n const fileName = `export-${new Date().toISOString().slice(0, 19).replace(/:/g, \"-\")}.json`;\n await fileSystemService.saveFile(folderId, fileName, jsonString);\n toast.success(`Saved to ${folderName}/${fileName}`);\n } catch (error) {\n console.error(\"Save to folder failed:\", error);\n toast.error(\"Failed to save: \" + (error instanceof Error ? error.message : \"Unknown error\"));\n }\n };\n\n const saveToFolderAsXLSX = async (folderId: string, folderName: string) => {\n if (!data || !data.length) return;\n\n try {\n const ExcelJS = await import(\"exceljs\");\n const dataToExport = table.getFilteredRowModel().rows.map((r) => {\n const row: Record = {};\n Object.keys(r.original).forEach((key) => {\n const val = r.original[key];\n row[key] = typeof val === \"bigint\" ? val.toString() : val;\n });\n return row;\n });\n\n const workbook = new ExcelJS.Workbook();\n const worksheet = workbook.addWorksheet(\"Data\");\n\n const keys = Object.keys(dataToExport[0] || {});\n const maxWidth = 50;\n worksheet.columns = keys.map((key) => ({\n header: key,\n key,\n width: Math.min(\n maxWidth,\n Math.max(\n key.length,\n ...dataToExport.slice(0, 100).map((row) => String(row[key] || \"\").length)\n )\n ),\n }));\n\n worksheet.addRows(dataToExport);\n\n const xlsxBuffer = await workbook.xlsx.writeBuffer();\n const fileName = `export-${new Date().toISOString().slice(0, 19).replace(/:/g, \"-\")}.xlsx`;\n\n await fileSystemService.saveFile(folderId, fileName, xlsxBuffer);\n toast.success(`Saved to ${folderName}/${fileName}`);\n } catch (error) {\n console.error(\"Save to folder failed:\", error);\n toast.error(\"Failed to save: \" + (error instanceof Error ? error.message : \"Unknown error\"));\n }\n };\n\n const saveToFolderAsParquet = async (folderId: string, folderName: string) => {\n if (!data || !data.length) return;\n\n try {\n const dataToExport = table.getFilteredRowModel().rows.map((r) => r.original);\n const { connection, db } = useDuckStore.getState();\n\n if (!connection || !db) {\n throw new Error(\"Database not initialized\");\n }\n\n const tempFileName = `temp_export_${Date.now()}.parquet`;\n\n const createValuesClause = () => {\n if (dataToExport.length === 0) return \"\";\n const keys = Object.keys(dataToExport[0]);\n const values = dataToExport.map((row) => {\n const rowValues = keys.map((key) => {\n const val = row[key];\n if (val === null || val === undefined) return \"NULL\";\n if (typeof val === \"string\") return `'${val.replace(/'/g, \"''\")}'`;\n if (typeof val === \"bigint\") return val.toString();\n if (typeof val === \"object\") return `'${JSON.stringify(val).replace(/'/g, \"''\")}'`;\n return String(val);\n });\n return `(${rowValues.join(\", \")})`;\n });\n return values.join(\", \");\n };\n\n const valuesClause = createValuesClause();\n const keys = Object.keys(dataToExport[0]);\n\n await connection.query(\n `COPY (SELECT * FROM (VALUES ${valuesClause}) AS t(${keys.map((k) => `\"${k}\"`).join(\", \")})) TO '${tempFileName}' (FORMAT 'parquet')`\n );\n\n const buffer = await db.copyFileToBuffer(tempFileName);\n await db.dropFile(tempFileName);\n\n const fileName = `export-${new Date().toISOString().slice(0, 19).replace(/:/g, \"-\")}.parquet`;\n // Create new ArrayBuffer copy to satisfy TypeScript\n const arrayBuffer = new ArrayBuffer(buffer.byteLength);\n new Uint8Array(arrayBuffer).set(buffer);\n await fileSystemService.saveFile(folderId, fileName, arrayBuffer);\n toast.success(`Saved to ${folderName}/${fileName}`);\n } catch (error) {\n console.error(\"Save to folder failed:\", error);\n toast.error(\"Failed to save: \" + (error instanceof Error ? error.message : \"Unknown error\"));\n }\n };\n\n const toggleColumnVisibility = (columnId: string) => {\n setEnabledColumns((prev) => ({ ...prev, [columnId]: !prev[columnId] }));\n };\n\n const toggleAllColumns = (value: boolean) => {\n if (!data || !data.length || !data[0]) return;\n setEnabledColumns(\n Object.keys(data[0]).reduce(\n (acc, key) => {\n acc[key] = value;\n return acc;\n },\n {} as Record\n )\n );\n };\n\n const ColumnSelector = () => {\n const allColumnKeys = data?.[0] ? Object.keys(data[0]) : [];\n\n // Memoize column keys to prevent re-renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const stableColumnKeys = useMemo(() => allColumnKeys, [JSON.stringify(allColumnKeys)]);\n\n // Simplified filtering for column selector\n const filteredColumnKeys = useMemo(() => {\n if (!columnSelectorFilter) return stableColumnKeys;\n return stableColumnKeys.filter((key) =>\n key.toLowerCase().includes(columnSelectorFilter.toLowerCase())\n );\n }, [stableColumnKeys, columnSelectorFilter]);\n\n if (!data || !data.length || !data[0]) return null;\n const visibleCount = Object.values(enabledColumns).filter(Boolean).length;\n const totalCount = allColumnKeys.length;\n\n return (\n \n \n
    \n

    \n Toggle Columns{\" \"}\n \n ({visibleCount}/{totalCount})\n \n

    \n
    \n toggleAllColumns(true)}\n >\n All\n \n toggleAllColumns(false)}\n >\n None\n \n setShowColumnSelector(false)}\n >\n \n \n
    \n
    \n
    \n \n setColumnSelectorFilter(e.target.value)}\n placeholder=\"Filter columns...\"\n className=\"pl-7 h-7 text-xs w-full\"\n />\n {columnSelectorFilter && (\n setColumnSelectorFilter(\"\")}\n >\n \n \n )}\n
    \n
    \n {filteredColumnKeys.map((columnId) => (\n
    \n toggleColumnVisibility(columnId)}\n />\n \n {columnId}\n \n
    \n ))}\n {filteredColumnKeys.length === 0 && (\n
    \n No columns match your filter.\n
    \n )}\n
    \n     \n     \n );\n };\n\n const SpreadsheetOptions = () => {\n return (\n \n \n
    \n

    Spreadsheet Options

    \n setShowSpreadsheetOptions(false)}\n >\n \n \n
    \n
    \n
    \n setShowRowNumbers(checked === true)}\n />\n \n
    \n
    \n setZebraStripes(checked === true)}\n />\n \n
    \n
    \n setShowGridLines(checked === true)}\n />\n \n
    \n
    \n     \n     \n );\n };\n\n const ContextMenu = () => {\n if (!contextMenu) return null;\n\n return (\n \n {\n // Trigger copy\n const e = new KeyboardEvent(\"keydown\", { key: \"c\", ctrlKey: true });\n window.dispatchEvent(e);\n setContextMenu(null);\n }}\n >\n \n Copy\n \n {\n // Select all\n const e = new KeyboardEvent(\"keydown\", { key: \"a\", ctrlKey: true });\n window.dispatchEvent(e);\n setContextMenu(null);\n }}\n >\n \n Select All\n \n {\n // Select row\n if (selectedCells.size > 0) {\n const firstCell = Array.from(selectedCells)[0];\n const rowIndex = parseInt(firstCell.split(\"::\")[0]);\n if (data[0]) {\n const rowCells = new Set();\n Object.keys(data[0]).forEach((key) => {\n if (key !== \"__row_number__\") {\n rowCells.add(`${rowIndex}::${key}`);\n }\n });\n setSelectedCells(rowCells);\n }\n }\n setContextMenu(null);\n }}\n >\n \n Select Row\n \n {\n // Select column\n if (selectedCells.size > 0) {\n const firstCell = Array.from(selectedCells)[0];\n const colId = firstCell.split(\"::\")[1];\n if (colId) {\n const colCells = new Set();\n for (let i = 0; i < data.length; i++) {\n colCells.add(`${i}::${colId}`);\n }\n setSelectedCells(colCells);\n }\n }\n setContextMenu(null);\n }}\n >\n \n Select Column\n \n
    \n {\n exportToCSV();\n setContextMenu(null);\n }}\n >\n \n Export...\n \n \n );\n };\n\n if (!data || data.length === 0) {\n return (\n
    \n No data available.\n
    \n );\n }\n\n return (\n \n
    \n {/* Top controls area */}\n
    \n
    \n
    \n \n setGlobalFilterInput(e.target.value)}\n className=\"pl-8 h-8 text-xs\"\n />\n
    \n {\n setGlobalFilterInput(\"\");\n table.resetColumnFilters(true);\n }}\n className=\"h-8 text-xs\"\n disabled={!globalFilterInput && !table.getState().columnFilters.length}\n >\n Clear Filters\n \n
    \n
    \n {executionTime !== null && executionTime !== undefined && (\n
    \n \n {formatDuration(executionTime)}\n
    \n )}\n {responseSize !== null && responseSize !== undefined && (\n
    \n {formatBytes(responseSize)}\n
    \n )}\n {data.length.toLocaleString()} rows\n
    \n
    \n {\n setShowStatsPanel(!showStatsPanel);\n if (!showStatsPanel) setStatsPanelMinimized(false);\n }}\n className=\"h-8 text-xs\"\n title=\"Show column statistics\"\n >\n \n Stats\n \n
    \n setShowColumnSelector(!showColumnSelector)}\n className=\"h-8 text-xs\"\n title=\"Configure visible columns\"\n >\n \n Columns\n \n {showColumnSelector && }\n
    \n
    \n setShowSpreadsheetOptions(!showSpreadsheetOptions)}\n className=\"h-8 text-xs\"\n title=\"Spreadsheet display options\"\n >\n \n View\n \n {showSpreadsheetOptions && }\n
    \n {Object.keys(userResizedColumns).length > 0 && (\n setUserResizedColumns({})}\n className=\"h-8 text-xs\"\n title=\"Reset column widths\"\n >\n Reset Size\n \n )}\n \n \n \n \n Export\n \n \n \n \n \n \n Export as CSV\n \n \n \n Export as JSON\n \n \n \n Export as Excel (XLSX)\n \n \n \n Export as Parquet\n \n\n {/* Save to Folder submenu */}\n {mountedFolders.length > 0 && (\n <>\n \n \n \n \n Save to Folder\n \n \n {mountedFolders.map((folder) => (\n \n \n \n {folder.name}\n \n \n saveToFolderAsCSV(folder.id, folder.name)}\n >\n \n Save as CSV\n \n saveToFolderAsJSON(folder.id, folder.name)}\n >\n \n Save as JSON\n \n saveToFolderAsXLSX(folder.id, folder.name)}\n >\n \n Save as Excel (XLSX)\n \n saveToFolderAsParquet(folder.id, folder.name)}\n >\n \n Save as Parquet\n \n \n \n ))}\n \n \n \n )}\n \n \n\n {/* Selection indicator */}\n {selectedCells.size > 0 && (\n
    \n \n {selectedCells.size} cell{selectedCells.size !== 1 ? \"s\" : \"\"} selected\n \n setSelectedCells(new Set())}\n className=\"h-6 px-2 text-xs hover:bg-primary/20\"\n >\n Clear\n \n
    \n )}\n
    \n
    \n\n {/* Main table area */}\n \n \n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n
    \n {headerGroup.headers.map((header) => (\n \n
    \n {flexRender(header.column.columnDef.header, header.getContext())}\n
    \n {header.column.getCanResize() && (\n \n \n \n )}\n \n ))}\n     \n ))}\n \n \n {paddingTop > 0 && (\n \n \n )}\n {virtualRows.map((virtualRow) => {\n const row = rows[virtualRow.index];\n if (!row) return null;\n return (\n \n {row.getVisibleCells().map((cell) => {\n const cellKey = `${virtualRow.index}::${cell.column.id}`;\n const isSelected = selectedCells.has(cellKey);\n\n return (\n {\n if (cell.column.id !== \"__row_number__\" && e.button === 0) {\n e.preventDefault();\n const currentPosition = {\n row: virtualRow.index,\n col: cell.column.id,\n };\n\n if (e.shiftKey && lastSelectedCell) {\n // Shift+click: select rectangular range using helper function\n const rangeSelection = createSelectionRange(\n lastSelectedCell,\n currentPosition\n );\n setSelectedCells(rangeSelection);\n } else if (e.ctrlKey || e.metaKey) {\n // Ctrl/Cmd+click: toggle cell in selection\n const newSelection = new Set(selectedCells);\n if (newSelection.has(cellKey)) {\n newSelection.delete(cellKey);\n } else {\n newSelection.add(cellKey);\n }\n setSelectedCells(newSelection);\n setLastSelectedCell(currentPosition);\n } else {\n // Regular click: select only this cell and start drag\n setSelectedCells(new Set([cellKey]));\n setLastSelectedCell(currentPosition);\n\n // Start drag selection\n setIsDragging(true);\n setDragStart(currentPosition);\n setDragEnd(currentPosition);\n }\n }\n }}\n onMouseEnter={() => {\n if (\n isDragging &&\n dragStart &&\n cell.column.id !== \"__row_number__\"\n ) {\n const currentPosition = {\n row: virtualRow.index,\n col: cell.column.id,\n };\n setDragEnd(currentPosition);\n\n // Update selection during drag\n const dragSelection = createSelectionRange(\n dragStart,\n currentPosition\n );\n setSelectedCells(dragSelection);\n }\n }}\n onContextMenu={(e) => {\n if (cell.column.id !== \"__row_number__\") {\n e.preventDefault();\n setContextMenu({\n x: e.clientX,\n y: e.clientY,\n });\n if (!selectedCells.has(cellKey)) {\n setSelectedCells(new Set([cellKey]));\n }\n }\n }}\n onDoubleClick={() => {\n if (cell.column.id !== \"__row_number__\") {\n const cellValue = cell.getValue();\n setViewedCell({\n value: cellValue,\n columnName: cell.column.id,\n rowIndex: virtualRow.index,\n });\n }\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n );\n })}\n \n );\n })}\n {paddingBottom > 0 && (\n \n \n )}\n {rows.length === 0 && (\n \n \n No results match your filters.\n \n \n )}\n \n
    \n
    \n
    \n
    \n
    \n
    \n\n {/* Pagination controls */}\n
    \n
    \n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n className=\"h-7 w-7 p-0 text-xs\"\n title=\"First page\"\n >\n ÂĢÂĢ\n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n className=\"h-7 w-7 p-0 text-xs\"\n title=\"Previous page\"\n >\n ÂĢ\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n className=\"h-7 w-7 p-0 text-xs\"\n title=\"Next page\"\n >\n Âģ\n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n className=\"h-7 w-7 p-0 text-xs\"\n title=\"Last page\"\n >\n ÂģÂģ\n \n
    \n
    \n \n Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount() || 1}\n \n {\n table.setPageSize(Number(e.target.value));\n }}\n className=\"text-xs border border-border/40 rounded-md h-7 px-2 bg-background\"\n title=\"Rows per page\"\n >\n {[10, 25, 50, 100, 200, 500, 1000, 5000, 10000].map((pageSize) => (\n \n ))}\n \n
    \n
    \n\n {/* Context Menu */}\n \n\n {/* Cell Value Viewer */}\n {viewedCell && (\n setViewedCell(null)}\n />\n )}\n\n {/* Column Stats Panel */}\n {showStatsPanel && (\n r.original)}\n onClose={() => setShowStatsPanel(false)}\n isMinimized={statsPanelMinimized}\n onToggleMinimize={() => setStatsPanelMinimized(!statsPanelMinimized)}\n />\n )}\n\n {/* Mobile stats */}\n
    \n \n {table.getFilteredRowModel().rows.length} of {data.length} rows\n \n
    \n {executionTime !== null && executionTime !== undefined && (\n
    \n \n {formatDuration(executionTime)}\n
    \n )}\n {responseSize !== null && responseSize !== undefined && (\n
    \n {formatBytes(responseSize)}\n
    \n )}\n
    \n
    \n
    \n \n );\n};\n\nexport default React.memo(DuckUITable);\n" }, { "path": "src/components/theme/mode-toggle.tsx", "content": "import { Moon, Sun } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { useTheme } from \"@/components/theme/theme-provider\";\n\nexport function ModeToggle() {\n const { setTheme } = useTheme();\n\n return (\n \n \n \n \n \n setTheme(\"light\")}>Light\n setTheme(\"dark\")}>Dark\n setTheme(\"system\")}>System\n \n \n );\n}\n" }, { "path": "src/components/theme/theme-provider.tsx", "content": "import { createContext, useContext, useEffect, useState } from \"react\";\n\ntype Theme = \"dark\" | \"light\" | \"system\";\n\ntype ThemeProviderProps = {\n children: React.ReactNode;\n defaultTheme?: Theme;\n storageKey?: string;\n};\n\ntype ThemeProviderState = {\n theme: Theme;\n setTheme: (theme: Theme) => void;\n};\n\nconst initialState: ThemeProviderState = {\n theme: \"system\",\n setTheme: () => null,\n};\n\nconst ThemeProviderContext = createContext(initialState);\n\nexport function ThemeProvider({\n children,\n defaultTheme = \"system\",\n storageKey = \"vite-ui-theme\",\n ...props\n}: ThemeProviderProps) {\n const [theme, setTheme] = useState(\n () => (localStorage.getItem(storageKey) as Theme) || defaultTheme\n );\n\n useEffect(() => {\n const root = window.document.documentElement;\n\n root.classList.remove(\"light\", \"dark\");\n\n if (theme === \"system\") {\n const systemTheme = window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ? \"dark\"\n : \"light\";\n\n root.classList.add(systemTheme);\n return;\n }\n\n root.classList.add(theme);\n }, [theme]);\n\n const value = {\n theme,\n setTheme: (theme: Theme) => {\n localStorage.setItem(storageKey, theme);\n setTheme(theme);\n },\n };\n\n return (\n \n {children}\n \n );\n}\n\nexport const useTheme = () => {\n const context = useContext(ThemeProviderContext);\n\n if (context === undefined) throw new Error(\"useTheme must be used within a ThemeProvider\");\n\n return context;\n};\n" }, { "path": "src/components/ui/accordion.tsx", "content": "import * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAccordionItem.displayName = \"AccordionItem\";\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n svg]:rotate-180\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n
    {children}
    \n \n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n" }, { "path": "src/components/ui/alert-dialog.tsx", "content": "import * as React from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\n\nimport { cn } from \"@/lib/utils\";\nimport { buttonVariants } from \"@/components/ui/button\";\n\nconst AlertDialog = AlertDialogPrimitive.Root;\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nconst AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes) => (\n
    \n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nconst AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes) => (\n \n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n};\n" }, { "path": "src/components/ui/alert.tsx", "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst alertVariants = cva(\n \"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\",\n {\n variants: {\n variant: {\n default: \"bg-background text-foreground\",\n destructive:\n \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nconst Alert = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & VariantProps\n>(({ className, variant, ...props }, ref) => (\n
    \n));\nAlert.displayName = \"Alert\";\n\nconst AlertTitle = React.forwardRef>(\n ({ className, ...props }, ref) => (\n \n )\n);\nAlertTitle.displayName = \"AlertTitle\";\n\nconst AlertDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
    \n));\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertTitle, AlertDescription };\n" }, { "path": "src/components/ui/aspect-ratio.tsx", "content": "\"use client\";\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\";\n\nconst AspectRatio = AspectRatioPrimitive.Root;\n\nexport { AspectRatio };\n" }, { "path": "src/components/ui/badge.tsx", "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst badgeVariants = cva(\n \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n {\n variants: {\n variant: {\n default: \"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n destructive:\n \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\n outline: \"text-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nexport interface BadgeProps\n extends React.HTMLAttributes, VariantProps {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n return
    ;\n}\n\nexport { Badge, badgeVariants };\n" }, { "path": "src/components/ui/breadcrumb.tsx", "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Breadcrumb = React.forwardRef<\n HTMLElement,\n React.ComponentPropsWithoutRef<\"nav\"> & {\n separator?: React.ReactNode;\n }\n>(({ ...props }, ref) =>