fix: update @ai-sdk/amazon-bedrock to 3.0.62 for tool streaming support

- Use bedrock.anthropicBeta for Bedrock provider (not additionalModelRequestFields)
- Use top-level headers for direct Anthropic API
- Update @ai-sdk/amazon-bedrock to 3.0.62
- Add headers support to ModelConfig interface

.dockerignore

@@ -1,60 +0,0 @@
-# Dependencies
-node_modules
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Build output
-.next
-out
-dist
-build
-
-# Testing
-coverage
-.nyc_output
-
-# Environment variables
-.env
-.env*.local
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# Git
-.git
-.gitignore
-.gitattributes
-
-# IDE
-.vscode
-.idea
-*.swp
-*.swo
-*~
-
-# Operating System
-.DS_Store
-Thumbs.db
-
-# Documentation
-README.md
-*.md
-!env.example
-
-# CI/CD
-.github
-.gitlab-ci.yml
-.travis.yml
-
-# Docker
-Dockerfile
-.dockerignore
-docker-compose*.yml
-
-# Other
-*.log
-.cache
-.turbo
-

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-    "extends": ["next/core-web-vitals", "next/typescript"]
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
 }

.github/CONTRIBUTING.md

@@ -1,81 +0,0 @@
-# Contributing
-
-## Setup
-
-```bash
-git clone https://github.com/YOUR_USERNAME/next-ai-draw-io.git
-cd next-ai-draw-io
-npm install
-cp env.example .env.local
-npm run dev
-```
-
-## Code Style
-
-We use [Biome](https://biomejs.dev/) for linting and formatting:
-
-```bash
-npm run format   # Format code
-npm run lint     # Check lint errors
-npm run check    # Run all checks (CI)
-```
-
-Git hooks via Husky run automatically:
-- **Pre-commit**: Biome (format/lint) + TypeScript type check
-- **Pre-push**: Unit tests
-
-For a better experience, install the [Biome VS Code extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) for real-time linting and format-on-save.
-
-## Testing
-
-Run tests before submitting PRs:
-
-```bash
-npm run test        # Unit tests (Vitest)
-npm run test:e2e    # E2E tests (Playwright)
-```
-
-E2E tests use mocked API responses - no AI provider needed. Tests are in `tests/e2e/`.
-
-To run a specific test file:
-```bash
-npx playwright test tests/e2e/diagram-generation.spec.ts
-```
-
-To run tests with UI mode:
-```bash
-npx playwright test --ui
-```
-
-## Before You Start
-
-For **significant changes** (new features, architecture changes, large refactors, etc.), please **open an issue first** to discuss your proposal before writing code. This helps avoid wasted effort and ensures alignment with the project direction. Small bug fixes and minor improvements can go straight to a PR.
-
-## Pull Requests
-
-1. Create a feature branch
-2. Make changes (pre-commit runs lint + type check automatically)
-3. Run E2E tests with `npm run test:e2e`
-4. Push (pre-push runs unit tests automatically)
-5. Submit PR against `main` with a clear description
-
-CI will run the full test suite on your PR.
-
-## Using AI Tools
-
-AI-assisted contributions are welcome. But please **review the output before opening a PR**:
-
-1. **Review the code** — understand what was generated, don't just commit blindly
-2. **Write a PR description** — explain what changed and why
-3. **Rebase on latest `main`** — AI tools often work on stale branches, run `git rebase origin/main` before pushing
-4. **Clean up artifacts** — remove IDE configs (`.idea/`, `.kiro/`), env files, scratch notes, and throwaway test scripts that AI tools leave behind
-
-## Code Review
-
-This project uses GitHub Copilot for automated code review. If you receive review comments from Copilot on your PR:
-- **Valid suggestions**: Please address them in your code.
-- **Invalid or irrelevant suggestions**: Feel free to click "Resolve" to dismiss them.
-
-## Issues
-
-Include steps to reproduce, expected vs actual behavior, and AI provider used.

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: dayuanjiang
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
-thanks_dev: # Replace with a single thanks.dev username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,35 +0,0 @@
----
-name: Bug Report
-about: Report a bug to help us improve
-title: '[Bug] '
-labels: bug
-assignees: ''
----
-
-> **Note**: This template is just a guide. Feel free to ignore the format entirely - any feedback is welcome! Don't let the template stop you from sharing your thoughts.
-
-## Bug Description
-A brief description of the issue.
-
-## Steps to Reproduce
-1. Go to '...'
-2. Click on '...'
-3. Scroll to '...'
-4. See error
-
-## Expected Behavior
-What you expected to happen.
-
-## Actual Behavior
-What actually happened.
-
-## Screenshots
-If applicable, add screenshots to help explain the problem.
-
-## Environment
-- OS: [e.g. Windows 11, macOS 14]
-- Browser: [e.g. Chrome 120, Safari 17]
-- Version: [e.g. 1.0.0]
-
-## Additional Context
-Any other information about the problem.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +0,0 @@
-blank_issues_enabled: true
-contact_links:
-  - name: Discussions
-    url: https://github.com/DayuanJiang/next-ai-draw-io/discussions
-    about: Have questions or ideas? Feel free to start a discussion

.github/ISSUE_TEMPLATE/enhancement.md

@@ -1,24 +0,0 @@
----
-name: Enhancement
-about: Suggest an improvement to existing functionality
-title: '[Enhancement] '
-labels: enhancement
-assignees: ''
----
-
-> **Note**: This template is just a guide. Feel free to ignore the format entirely - any feedback is welcome! Don't let the template stop you from sharing your ideas.
-
-## Current Behavior
-Describe how the feature currently works.
-
-## Proposed Enhancement
-How you'd like this to be improved.
-
-## Motivation
-Why this enhancement would be beneficial.
-
-## Screenshots / Mockups
-If applicable, add screenshots or mockups to illustrate the proposed changes.
-
-## Additional Context
-Any other information about the enhancement request.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,25 +0,0 @@
----
-name: Feature Request
-about: Suggest a new feature for this project
-title: '[Feature] '
-labels: enhancement
-assignees: ''
----
-
-> **Note**: This template is just a guide. Feel free to ignore the format entirely - any feedback is welcome! Don't let the template stop you from sharing your ideas.
-
-## Feature Description
-A brief description of the feature you'd like.
-
-## Problem Context
-Is this related to a problem? Please describe.
-e.g. I'm always frustrated when [...]
-
-## Proposed Solution
-How you'd like this feature to work.
-
-## Alternatives Considered
-Any alternative solutions or features you've considered.
-
-## Additional Context
-Any other information or screenshots about the feature request.

.github/renovate.json

@@ -1,41 +0,0 @@
-{
-    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-    "extends": ["config:recommended"],
-    "schedule": ["after 10am on the first day of the month"],
-    "timezone": "Asia/Tokyo",
-    "packageRules": [
-        {
-            "matchUpdateTypes": ["minor", "patch"],
-            "matchPackagePatterns": ["*"],
-            "groupName": "minor and patch dependencies",
-            "automerge": true
-        },
-        {
-            "matchUpdateTypes": ["major"],
-            "matchPackagePatterns": ["*"],
-            "groupName": "major dependencies",
-            "automerge": false
-        },
-        {
-            "matchPackagePatterns": ["@ai-sdk/*"],
-            "groupName": "AI SDK packages"
-        },
-        {
-            "matchPackagePatterns": ["@radix-ui/*"],
-            "groupName": "Radix UI packages"
-        },
-        {
-            "matchPackagePatterns": ["electron", "electron-builder"],
-            "groupName": "Electron packages",
-            "automerge": false
-        },
-        {
-            "matchPackagePatterns": ["@ai-sdk/*", "ai", "next"],
-            "groupName": "Core framework packages",
-            "automerge": false
-        }
-    ],
-    "vulnerabilityAlerts": {
-        "enabled": true
-    }
-}

.github/workflows/auto-format.yml

@@ -1,54 +0,0 @@
-name: Auto Format
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-permissions:
-  contents: write
-
-jobs:
-  format:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: '24'
-
-      - name: Run Biome format
-        run: npx @biomejs/biome@latest check --write --no-errors-on-unmatched .
-
-      - name: Check for changes
-        id: changes
-        run: |
-          if git diff --quiet; then
-            echo "has_changes=false" >> $GITHUB_OUTPUT
-          else
-            echo "has_changes=true" >> $GITHUB_OUTPUT
-          fi
-
-      # For fork PRs, just fail if formatting is needed (can't push to forks)
-      - name: Fail if fork PR needs formatting
-        if: steps.changes.outputs.has_changes == 'true' && github.event.pull_request.head.repo.full_name != github.repository
-        run: |
-          echo "::error::This PR has formatting issues. Please run 'npx @biomejs/biome check --write .' locally and push the changes."
-          git diff --stat
-          exit 1
-
-      # For same-repo PRs, commit and push the changes
-      - name: Commit changes
-        if: steps.changes.outputs.has_changes == 'true' && github.event.pull_request.head.repo.full_name == github.repository
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-          git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
-          git add .
-          git commit -m "style: auto-format with Biome"
-          git push origin HEAD:${{ github.head_ref }}

.github/workflows/ci.yml

@@ -1,42 +0,0 @@
-name: CI
-
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-permissions:
-  contents: read
-
-jobs:
-  ci:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: '24'
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Type check
-        run: npx tsc --noEmit
-
-      - name: Lint check
-        run: npm run check
-
-      - name: Build
-        run: npm run build
-

.github/workflows/claude-code.yml

@@ -0,0 +1,118 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  claude:
+    if: |
+      (github.event_name == 'issue_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review_comment' && contains(github.event.comment.body, '@claude')) ||
+      (github.event_name == 'pull_request_review' && contains(github.event.review.body, '@claude')) ||
+      (github.event_name == 'issues' && contains(github.event.issue.body, '@claude'))
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      issues: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
+  pr-review:
+    if: github.event_name == 'pull_request_target'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_TO_ASSUME }}
+          aws-region: us-east-1
+
+      - name: Run Claude Code PR Review
+        uses: anthropics/claude-code-action@v1
+        with:
+          use_bedrock: "true"
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          allowed_non_write_users: "*"
+          prompt: |
+            REPO: ${{ github.repository }}
+            PR NUMBER: ${{ github.event.pull_request.number }}
+
+            This is a personal project - an AI-powered draw.io diagram generator built with:
+            - Next.js 15 with React 19
+            - Vercel AI SDK (streamText, useChat, tool calling)
+            - Multiple AI providers: Bedrock, Anthropic, OpenAI, Google, Azure, OpenRouter, Ollama
+
+            STEP 1: Check existing comments to avoid duplicates.
+            Run: `gh api repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/comments`
+
+            Build a list of files and line numbers that already have comments. For each existing comment:
+            - If the issue is FIXED in current code, resolve the thread using:
+              `gh api graphql -f query='mutation { resolveReviewThread(input: {threadId: "THREAD_ID"}) { thread { isResolved } } }'`
+            - If the issue still exists, remember this file:line - DO NOT create a new comment for it
+
+            STEP 2: Review the diff for issues, but SKIP any file:line that already has a comment.
+
+            Review this PR for these issues (report ALL that apply):
+            1. Bugs that would cause runtime errors or broken functionality
+            2. Security issues (exposed secrets, API key leaks)
+            3. AI SDK misuse - specifically check for:
+               - Client-side: Should use useChat/useCompletion/useObject hooks, NOT raw fetch()
+               - Server-side: Should use streamText/generateText/streamObject/generateObject
+               - Message handling: Access message.parts array, not legacy content property
+               - Tool definitions: Must use Zod schemas for inputSchema
+               - Status handling: Check status (submitted/streaming/ready/error) before actions
+               - Stream cleanup: Call stop() when aborting streams
+            4. Unrelated changes that should be in separate PRs (scope creep)
+            5. Suspicious .gitignore additions or accidentally committed files
+            6. UI/UX inconsistencies (e.g., alignment issues)
+
+            When reviewing AI SDK usage, fetch https://ai-sdk.dev/docs/ to verify correct patterns.
+            Key doc pages: /docs/ai-sdk-ui/chatbot, /docs/ai-sdk-core/generating-text, /docs/ai-sdk-core/tools-and-tool-calling
+
+            DO NOT comment on:
+            - Minor performance optimizations
+            - Code style preferences (unless clearly wrong)
+            - Type annotations that don't affect functionality
+
+            IMPORTANT:
+            - NEVER create a comment on a file:line that already has a comment - this causes duplicates
+            - For each NEW issue, use `mcp__github_inline_comment__create_inline_comment` to comment on the specific line
+            - ALWAYS include a suggested fix using GitHub's suggestion syntax: ```suggestion\n<fixed code>\n```
+            - Only say "LGTM" if there are truly ZERO new issues to report
+          claude_args: |
+            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh api:*),WebFetch(domain:ai-sdk.dev)"

.github/workflows/docker-build.yml

@@ -1,92 +0,0 @@
-name: Docker Build and Push
-
-on:
-  push:
-    branches:
-      - main
-      - master
-      - dev
-    tags:
-      - 'v*'
-  pull_request:
-    branches:
-      - main
-      - master
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-      
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to GitHub Container Registry
-        if: github.event_name != 'pull_request'
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata (tags, labels)
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-            type=sha,prefix=sha-
-            type=raw,value=latest,enable={{is_default_branch}}
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' }}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          platforms: linux/amd64,linux/arm64
-          build-args: |
-            NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=true
-
-      # Push to AWS ECR for App Runner auto-deploy
-      - name: Configure AWS credentials
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        uses: aws-actions/configure-aws-credentials@v5
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: ap-northeast-1
-
-      - name: Login to Amazon ECR
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        id: login-ecr
-        uses: aws-actions/amazon-ecr-login@v2
-
-      - name: Push to ECR (triggers App Runner auto-deploy)
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        env:
-          REPO_LOWER: ${{ github.repository }}
-        run: |
-          REPO_LOWER=$(echo "$REPO_LOWER" | tr '[:upper:]' '[:lower:]')
-          docker pull ghcr.io/${REPO_LOWER}:latest
-          docker tag ghcr.io/${REPO_LOWER}:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
-          docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
-

.github/workflows/electron-release.yml

@@ -1,113 +0,0 @@
-name: Electron Release
-
-on:
-  push:
-    tags:
-      - "v*"
-  workflow_dispatch:
-    inputs:
-      version:
-        description: "Version tag (e.g., v0.4.5)"
-        required: false
-
-jobs:
-  # Mac and Linux: Build and publish directly (no signing needed)
-  build-mac-linux:
-    permissions:
-      contents: write
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - os: macos-latest
-            platform: mac
-          - os: ubuntu-latest
-            platform: linux
-    runs-on: ${{ matrix.os }}
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          cache: "npm"
-
-      - name: Download draw.io static files for offline use
-        run: |
-          rm -rf public/drawio
-          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
-          mkdir -p public/drawio
-          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
-          rm -rf public/drawio/WEB-INF
-          rm -rf public/drawio/META-INF
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Build and publish
-        run: npm run dist:${{ matrix.platform }}
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-  # Windows: Build, sign with SignPath, then publish
-  build-windows:
-    permissions:
-      contents: write
-    runs-on: windows-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v6
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          cache: "npm"
-
-      - name: Download draw.io static files for offline use
-        shell: bash
-        run: |
-          rm -rf public/drawio
-          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
-          mkdir -p public/drawio
-          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
-          rm -rf public/drawio/WEB-INF
-          rm -rf public/drawio/META-INF
-
-      - name: Install dependencies
-        run: npm install
-
-      # Build WITHOUT publishing
-      - name: Build Windows app
-        run: npm run dist:win:build
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Upload unsigned artifacts for signing
-        uses: actions/upload-artifact@v6
-        id: upload-unsigned
-        with:
-          name: windows-unsigned
-          path: release/*.exe
-          retention-days: 1
-
-      - name: Sign with SignPath
-        uses: signpath/github-action-submit-signing-request@v2
-        with:
-          api-token: ${{ secrets.SIGNPATH_API_TOKEN }}
-          organization-id: '880a211d-2cd3-4e7b-8d04-3d1f8eb39df5'
-          project-slug: 'next-ai-draw-io'
-          signing-policy-slug: 'release-signing'
-          artifact-configuration-slug: 'windows-exe'
-          github-artifact-id: ${{ steps.upload-unsigned.outputs.artifact-id }}
-          wait-for-completion: true
-          output-artifact-directory: release-signed
-
-      - name: Upload signed artifacts to release
-        uses: softprops/action-gh-release@v2
-        with:
-          files: release-signed/*.exe
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -1,75 +0,0 @@
-name: Test
-
-on:
-  pull_request:
-    branches: [main]
-  push:
-    branches: [main]
-
-jobs:
-  lint-and-unit:
-    name: Lint & Unit Tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: "20"
-          cache: "npm"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run lint
-        run: npm run check
-
-      - name: Run unit tests
-        run: npm run test -- --run
-
-  e2e:
-    name: E2E Tests
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: "20"
-          cache: "npm"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Cache Playwright browsers
-        uses: actions/cache@v5
-        id: playwright-cache
-        with:
-          path: ~/.cache/ms-playwright
-          key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
-
-      - name: Install Playwright browsers
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: npx playwright install chromium --with-deps
-
-      - name: Install Playwright deps (cached)
-        if: steps.playwright-cache.outputs.cache-hit == 'true'
-        run: npx playwright install-deps chromium
-
-      - name: Build app
-        run: npm run build
-
-      - name: Run E2E tests
-        run: npm run test:e2e
-        env:
-          CI: true
-
-      - name: Upload test results
-        uses: actions/upload-artifact@v6
-        if: always()
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 7

.gitignore

@@ -2,8 +2,6 @@
 
 # dependencies
 /node_modules
-packages/*/node_modules
-packages/*/dist
 /.pnp
 .pnp.*
 .yarn/*
@@ -14,8 +12,6 @@ packages/*/dist
 
 # testing
 /coverage
-/playwright-report/
-/test-results/
 
 # next.js
 /.next/
@@ -44,35 +40,4 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 push-via-ec2.sh
-.claude/
-.playwright-mcp/
-# Cloudflare
-.dev.vars
-.open-next/
-.wrangler/
-.env*.local
-
-# Electron
-/dist-electron/
-/release/
-/electron-standalone/
-# Draw.io static files (downloaded during CI build)
-public/drawio/
-*.dmg
-*.exe
-*.AppImage
-*.deb
-*.rpm
-*.snap
-
-CLAUDE.md
-.spec-workflow
-
-# edgeone
-.edgeone
-opencode.json
-ai-models.json
-
-# local backups
-*.bak
-.gstack/
+.claude/settings.local.json

.husky/pre-commit

@@ -1,2 +0,0 @@
-npx lint-staged
-npx tsc --noEmit

.husky/pre-push

@@ -1,4 +0,0 @@
-# Skip if node_modules not installed (e.g., on EC2 push server)
-if [ -d "node_modules" ]; then
-  npm run test -- --run
-fi

.vscode/settings.json

@@ -1,23 +0,0 @@
-{
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.codeActionsOnSave": {
-        "source.fixAll.biome": "explicit",
-        "source.organizeImports.biome": "explicit"
-    },
-    "[javascript]": {
-        "editor.defaultFormatter": "biomejs.biome"
-    },
-    "[typescript]": {
-        "editor.defaultFormatter": "biomejs.biome"
-    },
-    "[javascriptreact]": {
-        "editor.defaultFormatter": "biomejs.biome"
-    },
-    "[typescriptreact]": {
-        "editor.defaultFormatter": "biomejs.biome"
-    },
-    "[json]": {
-        "editor.defaultFormatter": "biomejs.biome"
-    }
-}

Dockerfile

@@ -1,73 +0,0 @@
-# Multi-stage Dockerfile for Next.js
-
-# Stage 1: Install dependencies
-FROM node:24-alpine AS deps
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-# Copy package files
-COPY package.json package-lock.json* ./
-
-# Install dependencies
-ARG ELECTRON_SKIP_BINARY_DOWNLOAD=1
-RUN npm install
-
-# Stage 2: Build application
-FROM node:24-alpine AS builder
-WORKDIR /app
-
-# Copy node_modules from deps stage
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-# Disable Next.js telemetry during build
-ENV NEXT_TELEMETRY_DISABLED=1
-
-# Build-time argument for self-hosted draw.io URL
-ARG NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net
-ENV NEXT_PUBLIC_DRAWIO_BASE_URL=${NEXT_PUBLIC_DRAWIO_BASE_URL}
-
-# Build-time argument to show About link and Notice icon
-ARG NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=false
-ENV NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=${NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE}
-
-# Build-time argument for subdirectory deployment (e.g., /nextaidrawio)
-ARG NEXT_PUBLIC_BASE_PATH=""
-ENV NEXT_PUBLIC_BASE_PATH=${NEXT_PUBLIC_BASE_PATH}
-
-# Control sponsorship and self-hosting messaging in quota notifications.
-# Set NEXT_PUBLIC_SELFHOSTED="true" in self-hosted deployments to hide sponsorship/self-host links and related text in quota popups.
-ARG NEXT_PUBLIC_SELFHOSTED=""
-ENV NEXT_PUBLIC_SELFHOSTED="${NEXT_PUBLIC_SELFHOSTED}"
-
-# Build Next.js application (standalone mode)
-RUN npm run build
-
-# Stage 3: Production runtime
-FROM node:24-alpine AS runner
-WORKDIR /app
-
-ENV NODE_ENV=production
-ENV NEXT_TELEMETRY_DISABLED=1
-
-# Create non-root user for security
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-# Copy necessary files
-COPY --from=builder /app/public ./public
-
-# Copy standalone build output
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
-
-EXPOSE 3000
-
-ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
-
-# Start the application (HOSTNAME override needed for AWS App Runner)
-CMD ["sh", "-c", "HOSTNAME=0.0.0.0 exec node server.js"]
-

LICENSE

@@ -1,190 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to the Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   Copyright 2024 Dayuan Jiang
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

README.md

@@ -1,66 +1,26 @@
 # Next AI Draw.io
 
-<div align="center">
+A next.js web application that integrates AI capabilities with draw.io diagrams. This app allows you to create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
 
-**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
+https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 
-English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md)
+Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.app)
 
-[![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/)
+## Features
 
-[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
-[![Next.js](https://img.shields.io/badge/Next.js-16.x-black)](https://nextjs.org/)
-[![React](https://img.shields.io/badge/React-19.x-61dafb)](https://react.dev/)
-[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
+-   **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
+-   **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
+-   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
+-   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
+-   **AWS Architecture Diagram Support**: Specialized support for generating AWS architecture diagrams
+-   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
 
-[![Live Demo](./public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
-
-</div>
-
-A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
-
-> Note: Thanks to <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) sponsorship, the demo site now uses the powerful glm-4.7 model!
-
-
-https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
-
-
-
-## Table of Contents
-- [Next AI Draw.io](#next-ai-drawio)
-  - [Table of Contents](#table-of-contents)
-  - [Examples](#examples)
-  - [Features](#features)
-  - [MCP Server (Preview)](#mcp-server-preview)
-    - [Claude Code CLI](#claude-code-cli)
-  - [Getting Started](#getting-started)
-    - [Try it Online](#try-it-online)
-    - [Desktop Application](#desktop-application)
-    - [Run with Docker](#run-with-docker)
-    - [Installation](#installation)
-  - [Deployment](#deployment)
-    - [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages)
-    - [Deploy on Vercel](#deploy-on-vercel)
-    - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)
-  - [Multi-Provider Support](#multi-provider-support)
-  - [How It Works](#how-it-works)
-  - [Support \& Contact](#support--contact)
-  - [FAQ](#faq)
-  - [Star History](#star-history)
-
-## Examples
+## **Examples**
 
 Here are some example prompts and their generated diagrams:
 
 <div align="center">
 <table width="100%">
-  <tr>
-    <td colspan="2" valign="top" align="center">
-      <strong>Animated transformer connectors</strong><br />
-      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
-      <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
-    </td>
-  </tr>
   <tr>
     <td width="50%" valign="top">
       <strong>GCP architecture diagram</strong><br />
@@ -80,77 +40,44 @@ Here are some example prompts and their generated diagrams:
       <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
+      <strong>Animated transformer connectors</strong><br />
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td colspan="2" valign="top" align="center">
       <strong>Cat sketch prompt</strong><br />
       <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
-      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
+      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="260" />
     </td>
   </tr>
 </table>
 </div>
 
-## Features
+## How It Works
 
--   **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
--   **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
--   **PDF & Text File Upload**: Upload PDF documents and text files to extract content and generate diagrams from existing documents
--   **AI Reasoning Display**: View the AI's thinking process for supported models (OpenAI o1/o3, Gemini, Claude, etc.)
--   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
--   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
--   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
--   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
+The application uses the following technologies:
 
-## MCP Server (Preview)
+-   **Next.js**: For the frontend framework and routing
+-   **@ai-sdk/react**: For the chat interface and AI interactions
+-   **react-drawio**: For diagram representation and manipulation
 
-> **Preview Feature**: This feature is experimental and may not be stable.
+Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
 
-Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
+## Multi-Provider Support
 
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
+-   AWS Bedrock (default)
+-   OpenAI / OpenAI-compatible APIs (via `OPENAI_BASE_URL`)
+-   Anthropic
+-   Google AI
+-   Azure OpenAI
+-   Ollama
 
-### Claude Code CLI
-
-```bash
-claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
-```
-
-Then ask Claude to create diagrams:
-> "Create a flowchart showing user authentication with login, MFA, and session management"
-
-The diagram appears in your browser in real-time!
-
-See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
+Note that `claude-sonnet-4-5` has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice.
 
 ## Getting Started
 
-### Try it Online
-
-No installation needed! Try the app directly on our demo site:
-
-[![Live Demo](./public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
-
-
-
-> **Bring Your Own API Key**: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.
-
-### Desktop Application
-
-Download the native desktop app for your platform from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases):
-
-Supported platforms: Windows, macOS, Linux.
-
-### Run with Docker
-
-[Go to Docker Guide](./docs/en/docker.md)
-
 ### Installation
 
 1. Clone the repository:
@@ -158,106 +85,80 @@ Supported platforms: Windows, macOS, Linux.
 ```bash
 git clone https://github.com/DayuanJiang/next-ai-draw-io
 cd next-ai-draw-io
+```
+
+2. Install dependencies:
+
+```bash
 npm install
+# or
+yarn install
+```
+
+3. Configure your AI provider:
+
+Create a `.env.local` file in the root directory:
+
+```bash
 cp env.example .env.local
 ```
 
-See the [Provider Configuration Guide](./docs/en/ai-providers.md) for detailed setup instructions for each provider.
+Edit `.env.local` and configure your chosen provider:
 
-2. Run the development server:
+-   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama)
+-   Set `AI_MODEL` to the specific model you want to use
+-   Add the required API keys for your provider
+
+See the [Multi-Provider Support](#multi-provider-support) section above for provider-specific configuration examples.
+
+4. Run the development server:
 
 ```bash
 npm run dev
 ```
 
-3. Open [http://localhost:6002](http://localhost:6002) in your browser to see the application.
+5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
 
 ## Deployment
 
-### Deploy to EdgeOne Pages
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js.
 
-You can deploy with one click using [Tencent EdgeOne Pages](https://pages.edgeone.ai/).
-
-Deploy by this button: 
-
-[![Deploy to EdgeOne Pages](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
-
-Check out the [Tencent EdgeOne Pages documentation](https://pages.edgeone.ai/document/deployment-overview) for more details.
-
-Additionally, deploying through Tencent EdgeOne Pages will also grant you a [daily free quota for DeepSeek models](https://pages.edgeone.ai/document/edge-ai).
-
-### Deploy on Vercel 
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
 
+Or you can deploy by this button.
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
-The easiest way to deploy is using [Vercel](https://vercel.com/new), the creators of Next.js. Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
+Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
 
-See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+## Project Structure
 
-### Deploy on Cloudflare Workers
+```
+app/                  # Next.js application routes and pages
+  extract_xml.ts      # Utilities for XML processing
+components/           # React components
+  chat-input.tsx      # User input component for AI interaction
+  chatPanel.tsx       # Chat interface with diagram control
+  ui/                 # UI components (buttons, cards, etc.)
+lib/                  # Utility functions and helpers
+  utils.ts            # General utilities including XML conversion
+public/               # Static assets including example images
+```
 
-[Go to Cloudflare Deploy Guide](./docs/en/cloudflare-deploy.md)
+## TODOs
 
+-   [x] Allow the LLM to modify the XML instead of generating it from scratch everytime.
+-   [x] Improve the smoothness of shape streaming updates.
+-   [x] Add multiple AI provider support (OpenAI, Anthropic, Google, Azure, Ollama)
+-   [ ] Solve the bug that generation will fail for session that longer than 60s.
 
+## License
 
-## Multi-Provider Support
-
--   [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
--   AWS Bedrock (default)
--   OpenAI
--   Anthropic
--   Google AI
--   Google Vertex AI
--   Azure OpenAI
--   Ollama
--   OpenRouter
--   DeepSeek
--   SiliconFlow
--   ModelScope
--   SGLang
--   Vercel AI Gateway
-
-
-All providers except AWS Bedrock and OpenRouter support custom endpoints.
-
-📖 **[Detailed Provider Configuration Guide](./docs/en/ai-providers.md)** - See setup instructions for each provider.
-
-### Server-Side Multi-Model Configuration
-
-Administrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via `AI_MODELS_CONFIG` environment variable (JSON string) or `ai-models.json` file.
-
-**Model Requirements**: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
-
-Note that the `claude` series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
-
-
-## How It Works
-
-The application uses the following technologies:
-
--   **Next.js**: For the frontend framework and routing
--   **Vercel AI SDK** (`ai` + `@ai-sdk/*`): For streaming AI responses and multi-provider support
--   **react-drawio**: For diagram representation and manipulation
-
-Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
-
+This project is licensed under the MIT License.
 
 ## Support & Contact
 
-**Special thanks to [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) for sponsoring the API token usage of the demo site!** Register on the ARK platform to get 500K free tokens for all models!
-
-If you find this project useful, please consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help me host the live demo site!
-
 For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:
 
 -   Email: me[at]jiang.jp
 
-## FAQ
-
-See [FAQ](./docs/en/FAQ.md) for common issues and solutions.
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
-
 ---

app/[lang]/about/cn/page.tsx

@@ -1,388 +0,0 @@
-import type { Metadata } from "next"
-import Link from "next/link"
-import { FaGithub } from "react-icons/fa"
-import Image from "@/components/image-with-basepath"
-
-export const metadata: Metadata = {
-    title: "关于 - Next AI Draw.io",
-    description:
-        "AI驱动的图表创建工具 - 对话、绘制、可视化。使用自然语言创建AWS、GCP和Azure架构图。",
-    keywords: ["AI图表", "draw.io", "AWS架构", "GCP图表", "Azure图表", "LLM"],
-}
-
-export default function AboutCN() {
-    return (
-        <div className="min-h-screen bg-gray-50">
-            {/* Navigation */}
-            <header className="bg-white border-b border-gray-200">
-                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-                    <div className="flex items-center justify-between">
-                        <Link
-                            href="/"
-                            className="text-xl font-bold text-gray-900 hover:text-gray-700"
-                        >
-                            Next AI Draw.io
-                        </Link>
-                        <nav className="flex items-center gap-6 text-sm">
-                            <Link
-                                href="/"
-                                className="text-gray-600 hover:text-gray-900 transition-colors"
-                            >
-                                编辑器
-                            </Link>
-                            <Link
-                                href="/about/cn"
-                                className="text-blue-600 font-semibold"
-                            >
-                                关于
-                            </Link>
-                            <a
-                                href="https://github.com/DayuanJiang/next-ai-draw-io"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-gray-600 hover:text-gray-900 transition-colors"
-                                aria-label="在GitHub上查看"
-                            >
-                                <FaGithub className="w-5 h-5" />
-                            </a>
-                        </nav>
-                    </div>
-                </div>
-            </header>
-
-            {/* Main Content */}
-            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-                <article className="prose prose-lg max-w-none">
-                    {/* Title */}
-                    <div className="text-center mb-8">
-                        <h1 className="text-4xl font-bold text-gray-900 mb-2">
-                            Next AI Draw.io
-                        </h1>
-                        <p className="text-xl text-gray-600 font-medium">
-                            AI驱动的图表创建工具 - 对话、绘制、可视化
-                        </p>
-                    </div>
-
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
-                        <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
-                            {/* Header */}
-                            <div className="mb-4">
-                                <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    由字节跳动豆包提供支持
-                                </h3>
-                            </div>
-
-                            {/* Story */}
-                            <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
-                                <p>
-                                    好消息！感谢{" "}
-                                    <a
-                                        href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="font-semibold text-blue-600 hover:underline"
-                                    >
-                                        字节跳动豆包
-                                    </a>
-                                    的慷慨赞助，演示站点现已接入强大的{" "}
-                                    <span className="font-semibold text-amber-700">
-                                        glm-4.7
-                                    </span>{" "}
-                                    模型，图表生成效果更佳！点击链接注册即可领取{" "}
-                                    <span className="font-semibold text-amber-700">
-                                        50万免费Token
-                                    </span>
-                                    ，适用于所有模型！
-                                </p>
-                            </div>
-
-                            {/* Invite Poster */}
-                            <div className="text-center mb-5">
-                                <a
-                                    href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    <Image
-                                        src="/volcengine-invite.png"
-                                        alt="火山引擎方舟 Coding Plan"
-                                        width={300}
-                                        height={400}
-                                        className="mx-auto rounded-lg"
-                                    />
-                                </a>
-                            </div>
-
-                            {/* Bring Your Own Key */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    使用自己的 API Key
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    您也可以使用自己的 API
-                                    Key，支持多种服务商。点击聊天面板中的设置图标即可配置。
-                                </p>
-                                <p className="text-xs text-gray-500 max-w-md mx-auto">
-                                    您的 Key
-                                    仅保存在浏览器本地，不会被存储在服务器上。
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <p className="text-gray-700">
-                        一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
-                    </p>
-
-                    {/* Features */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        功能特性
-                    </h2>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li>
-                            <strong>LLM驱动的图表创建</strong>
-                            ：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
-                        </li>
-                        <li>
-                            <strong>基于图像的图表复制</strong>
-                            ：上传现有图表或图像，让AI自动复制和增强
-                        </li>
-                        <li>
-                            <strong>图表历史记录</strong>
-                            ：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
-                        </li>
-                        <li>
-                            <strong>交互式聊天界面</strong>
-                            ：与AI实时对话来完善您的图表
-                        </li>
-                        <li>
-                            <strong>AWS架构图支持</strong>
-                            ：专门支持生成AWS架构图
-                        </li>
-                        <li>
-                            <strong>动画连接器</strong>
-                            ：在图表元素之间创建动态动画连接器，实现更好的可视化效果
-                        </li>
-                    </ul>
-
-                    {/* Examples */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        示例
-                    </h2>
-                    <p className="text-gray-700 mb-6">
-                        以下是一些示例提示词及其生成的图表：
-                    </p>
-
-                    <div className="space-y-8">
-                        {/* Animated Transformer */}
-                        <div className="text-center">
-                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                动画Transformer连接器
-                            </h3>
-                            <p className="text-gray-600 mb-4">
-                                <strong>提示词：</strong> 给我一个带有
-                                <strong>动画连接器</strong>的Transformer架构图。
-                            </p>
-                            <Image
-                                src="/animated_connectors.svg"
-                                alt="带动画连接器的Transformer架构"
-                                width={480}
-                                height={360}
-                                className="mx-auto"
-                            />
-                        </div>
-
-                        {/* Cloud Architecture Grid */}
-                        <div className="grid md:grid-cols-2 gap-6">
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    GCP架构图
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用
-                                    <strong>GCP图标</strong>
-                                    生成一个GCP架构图。用户连接到托管在实例上的前端。
-                                </p>
-                                <Image
-                                    src="/gcp_demo.svg"
-                                    alt="GCP架构图"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    AWS架构图
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用
-                                    <strong>AWS图标</strong>
-                                    生成一个AWS架构图。用户连接到托管在实例上的前端。
-                                </p>
-                                <Image
-                                    src="/aws_demo.svg"
-                                    alt="AWS架构图"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Azure架构图
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用
-                                    <strong>Azure图标</strong>
-                                    生成一个Azure架构图。用户连接到托管在实例上的前端。
-                                </p>
-                                <Image
-                                    src="/azure_demo.svg"
-                                    alt="Azure架构图"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    猫咪素描
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong>{" "}
-                                    给我画一只可爱的猫。
-                                </p>
-                                <Image
-                                    src="/cat_demo.svg"
-                                    alt="猫咪绘图"
-                                    width={240}
-                                    height={240}
-                                    className="mx-auto"
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* How It Works */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        工作原理
-                    </h2>
-                    <p className="text-gray-700 mb-4">本应用使用以下技术：</p>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li>
-                            <strong>Next.js</strong>：用于前端框架和路由
-                        </li>
-                        <li>
-                            <strong>Vercel AI SDK</strong>（<code>ai</code> +{" "}
-                            <code>@ai-sdk/*</code>
-                            ）：用于流式AI响应和多提供商支持
-                        </li>
-                        <li>
-                            <strong>react-drawio</strong>：用于图表表示和操作
-                        </li>
-                    </ul>
-                    <p className="text-gray-700 mt-4">
-                        图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
-                    </p>
-
-                    {/* Multi-Provider Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        多提供商支持
-                    </h2>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-1">
-                        <li>
-                            <a
-                                href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-blue-600 hover:underline"
-                            >
-                                字节跳动豆包
-                            </a>
-                        </li>
-                        <li>AWS Bedrock（默认）</li>
-                        <li>
-                            OpenAI / OpenAI兼容API（通过{" "}
-                            <code>OPENAI_BASE_URL</code>）
-                        </li>
-                        <li>Anthropic</li>
-                        <li>Google AI</li>
-                        <li>Google Vertex AI</li>
-                        <li>Azure OpenAI</li>
-                        <li>Ollama</li>
-                        <li>OpenRouter</li>
-                        <li>DeepSeek</li>
-                        <li>SiliconFlow</li>
-                        <li>ModelScope</li>
-                    </ul>
-                    <p className="text-gray-700 mt-4">
-                        注意：<code>claude-sonnet-4-5</code>{" "}
-                        已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。
-                    </p>
-
-                    {/* Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        支持与联系
-                    </h2>
-                    <p className="text-gray-700 mb-4 font-semibold">
-                        特别感谢{" "}
-                        <a
-                            href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            字节跳动豆包
-                        </a>{" "}
-                        为本站提供 API Token 支持！
-                    </p>
-                    <p className="text-gray-700">
-                        如果您觉得这个项目有用，请考虑{" "}
-                        <a
-                            href="https://github.com/sponsors/DayuanJiang"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            赞助
-                        </a>{" "}
-                        来帮助托管在线演示站点！
-                    </p>
-                    <p className="text-gray-700 mt-2">
-                        如需支持或咨询，请在{" "}
-                        <a
-                            href="https://github.com/DayuanJiang/next-ai-draw-io"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            GitHub仓库
-                        </a>{" "}
-                        上提交issue或联系：me[at]jiang.jp
-                    </p>
-
-                    {/* CTA */}
-                    <div className="mt-12 text-center">
-                        <Link
-                            href="/"
-                            className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-                        >
-                            打开编辑器
-                        </Link>
-                    </div>
-                </article>
-            </main>
-
-            {/* Footer */}
-            <footer className="bg-white border-t border-gray-200 mt-16">
-                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                    <p className="text-center text-gray-600 text-sm">
-                        Next AI Draw.io - 开源AI驱动的图表生成器
-                    </p>
-                </div>
-            </footer>
-        </div>
-    )
-}

app/[lang]/about/ja/page.tsx

@@ -1,387 +0,0 @@
-import type { Metadata } from "next"
-import Link from "next/link"
-import { FaGithub } from "react-icons/fa"
-import Image from "@/components/image-with-basepath"
-
-export const metadata: Metadata = {
-    title: "概要 - Next AI Draw.io",
-    description:
-        "AI搭載のダイアグラム作成ツール - チャット、描画、可視化。自然言語でAWS、GCP、Azureアーキテクチャ図を作成。",
-    keywords: [
-        "AIダイアグラム",
-        "draw.io",
-        "AWSアーキテクチャ",
-        "GCPダイアグラム",
-        "Azureダイアグラム",
-        "LLM",
-    ],
-}
-
-export default function AboutJA() {
-    return (
-        <div className="min-h-screen bg-gray-50">
-            {/* Navigation */}
-            <header className="bg-white border-b border-gray-200">
-                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-                    <div className="flex items-center justify-between">
-                        <Link
-                            href="/"
-                            className="text-xl font-bold text-gray-900 hover:text-gray-700"
-                        >
-                            Next AI Draw.io
-                        </Link>
-                        <nav className="flex items-center gap-6 text-sm">
-                            <Link
-                                href="/"
-                                className="text-gray-600 hover:text-gray-900 transition-colors"
-                            >
-                                エディタ
-                            </Link>
-                            <Link
-                                href="/about/ja"
-                                className="text-blue-600 font-semibold"
-                            >
-                                概要
-                            </Link>
-                            <a
-                                href="https://github.com/DayuanJiang/next-ai-draw-io"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-gray-600 hover:text-gray-900 transition-colors"
-                                aria-label="GitHubで見る"
-                            >
-                                <FaGithub className="w-5 h-5" />
-                            </a>
-                        </nav>
-                    </div>
-                </div>
-            </header>
-
-            {/* Main Content */}
-            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-                <article className="prose prose-lg max-w-none">
-                    {/* Title */}
-                    <div className="text-center mb-8">
-                        <h1 className="text-4xl font-bold text-gray-900 mb-2">
-                            Next AI Draw.io
-                        </h1>
-                        <p className="text-xl text-gray-600 font-medium">
-                            AI搭載のダイアグラム作成ツール -
-                            チャット、描画、可視化
-                        </p>
-                    </div>
-
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
-                        <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
-                            {/* Header */}
-                            <div className="mb-4">
-                                <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    ByteDance Doubao提供
-                                </h3>
-                            </div>
-
-                            {/* Story */}
-                            <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
-                                <p>
-                                    朗報です！
-                                    <a
-                                        href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="font-semibold text-blue-600 hover:underline"
-                                    >
-                                        ByteDance Doubao
-                                    </a>
-                                    様のご支援により、デモサイトでは強力な{" "}
-                                    <span className="font-semibold text-amber-700">
-                                        glm-4.7
-                                    </span>{" "}
-                                    モデルを利用できるようになり、より高品質なダイアグラム生成が可能になりました。リンクから登録すると、すべてのモデルで使える{" "}
-                                    <span className="font-semibold text-amber-700">
-                                        50万トークン
-                                    </span>
-                                    が無料でもらえます！
-                                </p>
-                            </div>
-
-                            {/* Bring Your Own Key */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    自分のAPIキーを使用
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    お好みのプロバイダーで自分のAPIキーを使用することもできます。チャットパネルの設定アイコンをクリックして設定してください。
-                                </p>
-                                <p className="text-xs text-gray-500 max-w-md mx-auto">
-                                    キーはブラウザのローカルに保存され、サーバーには保存されません。
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <p className="text-gray-700">
-                        AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
-                    </p>
-
-                    {/* Features */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        機能
-                    </h2>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li>
-                            <strong>LLM搭載のダイアグラム作成</strong>
-                            ：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
-                        </li>
-                        <li>
-                            <strong>画像ベースのダイアグラム複製</strong>
-                            ：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
-                        </li>
-                        <li>
-                            <strong>ダイアグラム履歴</strong>
-                            ：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
-                        </li>
-                        <li>
-                            <strong>
-                                インタラクティブなチャットインターフェース
-                            </strong>
-                            ：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
-                        </li>
-                        <li>
-                            <strong>
-                                AWSアーキテクチャダイアグラムサポート
-                            </strong>
-                            ：AWSアーキテクチャダイアグラムの生成を専門的にサポート
-                        </li>
-                        <li>
-                            <strong>アニメーションコネクタ</strong>
-                            ：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
-                        </li>
-                    </ul>
-
-                    {/* Examples */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        例
-                    </h2>
-                    <p className="text-gray-700 mb-6">
-                        以下はいくつかのプロンプト例と生成されたダイアグラムです：
-                    </p>
-
-                    <div className="space-y-8">
-                        {/* Animated Transformer */}
-                        <div className="text-center">
-                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                アニメーションTransformerコネクタ
-                            </h3>
-                            <p className="text-gray-600 mb-4">
-                                <strong>プロンプト：</strong>{" "}
-                                <strong>アニメーションコネクタ</strong>
-                                付きのTransformerアーキテクチャ図を作成してください。
-                            </p>
-                            <Image
-                                src="/animated_connectors.svg"
-                                alt="アニメーションコネクタ付きTransformerアーキテクチャ"
-                                width={480}
-                                height={360}
-                                className="mx-auto"
-                            />
-                        </div>
-
-                        {/* Cloud Architecture Grid */}
-                        <div className="grid md:grid-cols-2 gap-6">
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    GCPアーキテクチャ図
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
-                                    <strong>GCPアイコン</strong>
-                                    を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
-                                </p>
-                                <Image
-                                    src="/gcp_demo.svg"
-                                    alt="GCPアーキテクチャ図"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    AWSアーキテクチャ図
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
-                                    <strong>AWSアイコン</strong>
-                                    を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
-                                </p>
-                                <Image
-                                    src="/aws_demo.svg"
-                                    alt="AWSアーキテクチャ図"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Azureアーキテクチャ図
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
-                                    <strong>Azureアイコン</strong>
-                                    を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
-                                </p>
-                                <Image
-                                    src="/azure_demo.svg"
-                                    alt="Azureアーキテクチャ図"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    猫のスケッチ
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong>{" "}
-                                    かわいい猫を描いてください。
-                                </p>
-                                <Image
-                                    src="/cat_demo.svg"
-                                    alt="猫の絵"
-                                    width={240}
-                                    height={240}
-                                    className="mx-auto"
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* How It Works */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        仕組み
-                    </h2>
-                    <p className="text-gray-700 mb-4">
-                        本アプリケーションは以下の技術を使用しています：
-                    </p>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li>
-                            <strong>Next.js</strong>
-                            ：フロントエンドフレームワークとルーティング
-                        </li>
-                        <li>
-                            <strong>Vercel AI SDK</strong>（<code>ai</code> +{" "}
-                            <code>@ai-sdk/*</code>
-                            ）：ストリーミングAIレスポンスとマルチプロバイダーサポート
-                        </li>
-                        <li>
-                            <strong>react-drawio</strong>
-                            ：ダイアグラムの表現と操作
-                        </li>
-                    </ul>
-                    <p className="text-gray-700 mt-4">
-                        ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
-                    </p>
-
-                    {/* Multi-Provider Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        マルチプロバイダーサポート
-                    </h2>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-1">
-                        <li>
-                            <a
-                                href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-blue-600 hover:underline"
-                            >
-                                ByteDance Doubao
-                            </a>
-                        </li>
-                        <li>AWS Bedrock（デフォルト）</li>
-                        <li>
-                            OpenAI / OpenAI互換API（<code>OPENAI_BASE_URL</code>
-                            経由）
-                        </li>
-                        <li>Anthropic</li>
-                        <li>Google AI</li>
-                        <li>Google Vertex AI</li>
-                        <li>Azure OpenAI</li>
-                        <li>Ollama</li>
-                        <li>OpenRouter</li>
-                        <li>DeepSeek</li>
-                        <li>SiliconFlow</li>
-                        <li>ModelScope</li>
-                    </ul>
-                    <p className="text-gray-700 mt-4">
-                        注：<code>claude-sonnet-4-5</code>
-                        はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
-                    </p>
-
-                    {/* Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        サポート＆お問い合わせ
-                    </h2>
-                    <p className="text-gray-700 mb-4 font-semibold">
-                        デモサイトのAPIトークン使用を支援してくださった{" "}
-                        <a
-                            href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            ByteDance Doubao
-                        </a>{" "}
-                        様に、心より感謝申し上げます。
-                    </p>
-                    <p className="text-gray-700">
-                        このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
-                        <a
-                            href="https://github.com/sponsors/DayuanJiang"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            スポンサー
-                        </a>{" "}
-                        をご検討ください！
-                    </p>
-                    <p className="text-gray-700 mt-2">
-                        サポートやお問い合わせについては、{" "}
-                        <a
-                            href="https://github.com/DayuanJiang/next-ai-draw-io"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            GitHubリポジトリ
-                        </a>{" "}
-                        でissueを開くか、ご連絡ください：me[at]jiang.jp
-                    </p>
-
-                    {/* CTA */}
-                    <div className="mt-12 text-center">
-                        <Link
-                            href="/"
-                            className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-                        >
-                            エディタを開く
-                        </Link>
-                    </div>
-                </article>
-            </main>
-
-            {/* Footer */}
-            <footer className="bg-white border-t border-gray-200 mt-16">
-                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                    <p className="text-center text-gray-600 text-sm">
-                        Next AI Draw.io -
-                        オープンソースAI搭載ダイアグラムジェネレーター
-                    </p>
-                </div>
-            </footer>
-        </div>
-    )
-}

app/[lang]/about/page.tsx

@@ -1,408 +0,0 @@
-import type { Metadata } from "next"
-import Link from "next/link"
-import { FaGithub } from "react-icons/fa"
-import Image from "@/components/image-with-basepath"
-
-export const metadata: Metadata = {
-    title: "About - Next AI Draw.io",
-    description:
-        "AI-Powered Diagram Creation Tool - Chat, Draw, Visualize. Create AWS, GCP, and Azure architecture diagrams with natural language.",
-    keywords: [
-        "AI diagram",
-        "draw.io",
-        "AWS architecture",
-        "GCP diagram",
-        "Azure diagram",
-        "LLM",
-    ],
-}
-
-export default function About() {
-    return (
-        <div className="min-h-screen bg-gray-50">
-            {/* Navigation */}
-            <header className="bg-white border-b border-gray-200">
-                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
-                    <div className="flex items-center justify-between">
-                        <Link
-                            href="/"
-                            className="text-xl font-bold text-gray-900 hover:text-gray-700"
-                        >
-                            Next AI Draw.io
-                        </Link>
-                        <nav className="flex items-center gap-6 text-sm">
-                            <Link
-                                href="/"
-                                className="text-gray-600 hover:text-gray-900 transition-colors"
-                            >
-                                Editor
-                            </Link>
-                            <Link
-                                href="/about"
-                                className="text-blue-600 font-semibold"
-                            >
-                                About
-                            </Link>
-                            <a
-                                href="https://github.com/DayuanJiang/next-ai-draw-io"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-gray-600 hover:text-gray-900 transition-colors"
-                                aria-label="View on GitHub"
-                            >
-                                <FaGithub className="w-5 h-5" />
-                            </a>
-                        </nav>
-                    </div>
-                </div>
-            </header>
-
-            {/* Main Content */}
-            <main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-                <article className="prose prose-lg max-w-none">
-                    {/* Title */}
-                    <div className="text-center mb-8">
-                        <h1 className="text-4xl font-bold text-gray-900 mb-2">
-                            Next AI Draw.io
-                        </h1>
-                        <p className="text-xl text-gray-600 font-medium">
-                            AI-Powered Diagram Creation Tool - Chat, Draw,
-                            Visualize
-                        </p>
-                    </div>
-
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
-                        <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
-                            {/* Header */}
-                            <div className="mb-4">
-                                <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    Sponsored by ByteDance Doubao
-                                </h3>
-                            </div>
-
-                            {/* Story */}
-                            <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
-                                <p>
-                                    Great news! Thanks to the generous
-                                    sponsorship from{" "}
-                                    <a
-                                        href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        className="font-semibold text-blue-600 hover:underline"
-                                    >
-                                        ByteDance Doubao
-                                    </a>
-                                    , the demo site now uses the powerful{" "}
-                                    <span className="font-semibold text-amber-700">
-                                        glm-4.7
-                                    </span>{" "}
-                                    model for better diagram generation! Sign up
-                                    via the link to get{" "}
-                                    <span className="font-semibold text-amber-700">
-                                        500K free tokens
-                                    </span>{" "}
-                                    for all models!
-                                </p>
-                            </div>
-
-                            {/* Bring Your Own Key */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    Bring Your Own API Key
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    You can also use your own API key with any
-                                    supported provider. Click the Settings icon
-                                    in the chat panel to configure your provider
-                                    and API key.
-                                </p>
-                                <p className="text-xs text-gray-500 max-w-md mx-auto">
-                                    Your key is stored locally in your browser
-                                    and is never stored on the server.
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-
-                    <p className="text-gray-700">
-                        A Next.js web application that integrates AI
-                        capabilities with draw.io diagrams. Create, modify, and
-                        enhance diagrams through natural language commands and
-                        AI-assisted visualization.
-                    </p>
-
-                    {/* Features */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        Features
-                    </h2>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li>
-                            <strong>LLM-Powered Diagram Creation</strong>:
-                            Leverage Large Language Models to create and
-                            manipulate draw.io diagrams directly through natural
-                            language commands
-                        </li>
-                        <li>
-                            <strong>Image-Based Diagram Replication</strong>:
-                            Upload existing diagrams or images and have the AI
-                            replicate and enhance them automatically
-                        </li>
-                        <li>
-                            <strong>Diagram History</strong>: Comprehensive
-                            version control that tracks all changes, allowing
-                            you to view and restore previous versions of your
-                            diagrams before the AI editing
-                        </li>
-                        <li>
-                            <strong>Interactive Chat Interface</strong>:
-                            Communicate with AI to refine your diagrams in
-                            real-time
-                        </li>
-                        <li>
-                            <strong>AWS Architecture Diagram Support</strong>:
-                            Specialized support for generating AWS architecture
-                            diagrams
-                        </li>
-                        <li>
-                            <strong>Animated Connectors</strong>: Create dynamic
-                            and animated connectors between diagram elements for
-                            better visualization
-                        </li>
-                    </ul>
-
-                    {/* Examples */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        Examples
-                    </h2>
-                    <p className="text-gray-700 mb-6">
-                        Here are some example prompts and their generated
-                        diagrams:
-                    </p>
-
-                    <div className="space-y-8">
-                        {/* Animated Transformer */}
-                        <div className="text-center">
-                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                Animated Transformer Connectors
-                            </h3>
-                            <p className="text-gray-600 mb-4">
-                                <strong>Prompt:</strong> Give me an{" "}
-                                <strong>animated connector</strong> diagram of
-                                transformer&apos;s architecture.
-                            </p>
-                            <Image
-                                src="/animated_connectors.svg"
-                                alt="Transformer Architecture with Animated Connectors"
-                                width={480}
-                                height={360}
-                                className="mx-auto"
-                            />
-                        </div>
-
-                        {/* Cloud Architecture Grid */}
-                        <div className="grid md:grid-cols-2 gap-6">
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    GCP Architecture Diagram
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a GCP
-                                    architecture diagram with{" "}
-                                    <strong>GCP icons</strong>. Users connect to
-                                    a frontend hosted on an instance.
-                                </p>
-                                <Image
-                                    src="/gcp_demo.svg"
-                                    alt="GCP Architecture Diagram"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    AWS Architecture Diagram
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an AWS
-                                    architecture diagram with{" "}
-                                    <strong>AWS icons</strong>. Users connect to
-                                    a frontend hosted on an instance.
-                                </p>
-                                <Image
-                                    src="/aws_demo.svg"
-                                    alt="AWS Architecture Diagram"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Azure Architecture Diagram
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an Azure
-                                    architecture diagram with{" "}
-                                    <strong>Azure icons</strong>. Users connect
-                                    to a frontend hosted on an instance.
-                                </p>
-                                <Image
-                                    src="/azure_demo.svg"
-                                    alt="Azure Architecture Diagram"
-                                    width={400}
-                                    height={300}
-                                    className="mx-auto"
-                                />
-                            </div>
-                            <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Cat Sketch
-                                </h3>
-                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Draw a cute cat for
-                                    me.
-                                </p>
-                                <Image
-                                    src="/cat_demo.svg"
-                                    alt="Cat Drawing"
-                                    width={240}
-                                    height={240}
-                                    className="mx-auto"
-                                />
-                            </div>
-                        </div>
-                    </div>
-
-                    {/* How It Works */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        How It Works
-                    </h2>
-                    <p className="text-gray-700 mb-4">
-                        The application uses the following technologies:
-                    </p>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li>
-                            <strong>Next.js</strong>: For the frontend framework
-                            and routing
-                        </li>
-                        <li>
-                            <strong>Vercel AI SDK</strong> (<code>ai</code> +{" "}
-                            <code>@ai-sdk/*</code>): For streaming AI responses
-                            and multi-provider support
-                        </li>
-                        <li>
-                            <strong>react-drawio</strong>: For diagram
-                            representation and manipulation
-                        </li>
-                    </ul>
-                    <p className="text-gray-700 mt-4">
-                        Diagrams are represented as XML that can be rendered in
-                        draw.io. The AI processes your commands and generates or
-                        modifies this XML accordingly.
-                    </p>
-
-                    {/* Multi-Provider Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        Multi-Provider Support
-                    </h2>
-                    <ul className="list-disc pl-6 text-gray-700 space-y-1">
-                        <li>
-                            <a
-                                href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-blue-600 hover:underline"
-                            >
-                                ByteDance Doubao
-                            </a>
-                        </li>
-                        <li>AWS Bedrock (default)</li>
-                        <li>
-                            OpenAI / OpenAI-compatible APIs (via{" "}
-                            <code>OPENAI_BASE_URL</code>)
-                        </li>
-                        <li>Anthropic</li>
-                        <li>Google AI</li>
-                        <li>Google Vertex AI</li>
-                        <li>Azure OpenAI</li>
-                        <li>Ollama</li>
-                        <li>OpenRouter</li>
-                        <li>DeepSeek</li>
-                        <li>SiliconFlow</li>
-                        <li>ModelScope</li>
-                    </ul>
-                    <p className="text-gray-700 mt-4">
-                        Note that <code>claude-sonnet-4-5</code> has trained on
-                        draw.io diagrams with AWS logos, so if you want to
-                        create AWS architecture diagrams, this is the best
-                        choice.
-                    </p>
-
-                    {/* Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        Support &amp; Contact
-                    </h2>
-                    <p className="text-gray-700 mb-4 font-semibold">
-                        Special thanks to{" "}
-                        <a
-                            href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            ByteDance Doubao
-                        </a>{" "}
-                        for sponsoring the API token usage of the demo site!
-                    </p>
-                    <p className="text-gray-700">
-                        If you find this project useful, please consider{" "}
-                        <a
-                            href="https://github.com/sponsors/DayuanJiang"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            sponsoring
-                        </a>{" "}
-                        to help host the live demo site!
-                    </p>
-                    <p className="text-gray-700 mt-2">
-                        For support or inquiries, please open an issue on the{" "}
-                        <a
-                            href="https://github.com/DayuanJiang/next-ai-draw-io"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="text-blue-600 hover:underline"
-                        >
-                            GitHub repository
-                        </a>{" "}
-                        or contact: me[at]jiang.jp
-                    </p>
-
-                    {/* CTA */}
-                    <div className="mt-12 text-center">
-                        <Link
-                            href="/"
-                            className="inline-block bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors"
-                        >
-                            Open Editor
-                        </Link>
-                    </div>
-                </article>
-            </main>
-
-            {/* Footer */}
-            <footer className="bg-white border-t border-gray-200 mt-16">
-                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-                    <p className="text-center text-gray-600 text-sm">
-                        Next AI Draw.io - Open Source AI-Powered Diagram
-                        Generator
-                    </p>
-                </div>
-            </footer>
-        </div>
-    )
-}

app/[lang]/layout.tsx

@@ -1,185 +0,0 @@
-import { GoogleAnalytics } from "@next/third-parties/google"
-import type { Metadata, Viewport } from "next"
-import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google"
-import { notFound } from "next/navigation"
-import { DiagramProvider } from "@/contexts/diagram-context"
-import { DictionaryProvider } from "@/hooks/use-dictionary"
-import type { Locale } from "@/lib/i18n/config"
-import { i18n } from "@/lib/i18n/config"
-import { getDictionary, hasLocale } from "@/lib/i18n/dictionaries"
-
-import "../globals.css"
-
-const plusJakarta = Plus_Jakarta_Sans({
-    variable: "--font-sans",
-    subsets: ["latin"],
-    weight: ["400", "500", "600", "700"],
-})
-
-const jetbrainsMono = JetBrains_Mono({
-    variable: "--font-mono",
-    subsets: ["latin"],
-    weight: ["400", "500"],
-})
-
-export const viewport: Viewport = {
-    width: "device-width",
-    initialScale: 1,
-    maximumScale: 1,
-    userScalable: false,
-}
-
-// Generate static params for all locales
-export async function generateStaticParams() {
-    return i18n.locales.map((locale) => ({ lang: locale }))
-}
-
-// Generate metadata per locale
-export async function generateMetadata({
-    params,
-}: {
-    params: Promise<{ lang: string }>
-}): Promise<Metadata> {
-    const { lang: rawLang } = await params
-    const lang = (
-        rawLang in { en: 1, zh: 1, ja: 1, "zh-Hant": 1 } ? rawLang : "en"
-    ) as Locale
-
-    // Default to English metadata
-    const titles: Record<Locale, string> = {
-        en: "Next AI Draw.io - AI-Powered Diagram Generator",
-        zh: "Next AI Draw.io - AI powered diagram generator",
-        ja: "Next AI Draw.io - AI-powered diagram generator",
-        "zh-Hant": "Next AI Draw.io - AI 驅動的圖表產生器",
-    }
-
-    const descriptions: Record<Locale, string> = {
-        en: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
-        zh: "Use AI to create AWS architecture diagrams, flowcharts, and technical diagrams. Free online tool integrated with draw.io and AI assistance for professional diagram creation.",
-        ja: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Create professional diagrams with a free online tool that integrates draw.io with an AI assistant.",
-        "zh-Hant":
-            "使用 AI 建立 AWS 架構圖、流程圖和技術圖表。免費線上工具整合 draw.io 與 AI 輔助，輕鬆建立專業圖表。",
-    }
-
-    return {
-        title: titles[lang],
-        description: descriptions[lang],
-        keywords: [
-            "AI diagram generator",
-            "AWS architecture",
-            "flowchart creator",
-            "draw.io",
-            "AI drawing tool",
-            "technical diagrams",
-            "diagram automation",
-            "free diagram generator",
-            "online diagram maker",
-        ],
-        authors: [{ name: "Next AI Draw.io" }],
-        creator: "Next AI Draw.io",
-        publisher: "Next AI Draw.io",
-        metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
-        openGraph: {
-            title: titles[lang],
-            description: descriptions[lang],
-            type: "website",
-            url: "https://next-ai-drawio.jiang.jp",
-            siteName: "Next AI Draw.io",
-            locale:
-                lang === "zh"
-                    ? "zh_CN"
-                    : lang === "zh-Hant"
-                      ? "zh_HK"
-                      : lang === "ja"
-                        ? "ja_JP"
-                        : "en_US",
-            images: [
-                {
-                    url: "/architecture.png",
-                    width: 1200,
-                    height: 630,
-                    alt: "Next AI Draw.io - AI-powered diagram creation tool",
-                },
-            ],
-        },
-        twitter: {
-            card: "summary_large_image",
-            title: titles[lang],
-            description: descriptions[lang],
-            images: ["/architecture.png"],
-        },
-        robots: {
-            index: true,
-            follow: true,
-            googleBot: {
-                index: true,
-                follow: true,
-                "max-video-preview": -1,
-                "max-image-preview": "large",
-                "max-snippet": -1,
-            },
-        },
-        icons: {
-            icon: "/favicon.ico",
-        },
-        alternates: {
-            languages: {
-                en: "/en",
-                zh: "/zh",
-                ja: "/ja",
-                "zh-Hant": "/zh-Hant",
-            },
-        },
-    }
-}
-
-export default async function RootLayout({
-    children,
-    params,
-}: Readonly<{
-    children: React.ReactNode
-    params: Promise<{ lang: string }>
-}>) {
-    const { lang } = await params
-    if (!hasLocale(lang)) notFound()
-    const validLang = lang as Locale
-    const dictionary = await getDictionary(validLang)
-
-    const jsonLd = {
-        "@context": "https://schema.org",
-        "@type": "SoftwareApplication",
-        name: "Next AI Draw.io",
-        applicationCategory: "DesignApplication",
-        operatingSystem: "Web Browser",
-        description:
-            "AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.",
-        url: "https://next-ai-drawio.jiang.jp",
-        inLanguage: validLang,
-        offers: {
-            "@type": "Offer",
-            price: "0",
-            priceCurrency: "USD",
-        },
-    }
-
-    return (
-        <html lang={validLang} suppressHydrationWarning>
-            <head>
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-                />
-            </head>
-            <body
-                className={`${plusJakarta.variable} ${jetbrainsMono.variable} antialiased`}
-            >
-                <DictionaryProvider dictionary={dictionary}>
-                    <DiagramProvider>{children}</DiagramProvider>
-                </DictionaryProvider>
-            </body>
-            {process.env.NEXT_PUBLIC_GA_ID && (
-                <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
-            )}
-        </html>
-    )
-}

app/[lang]/page.tsx

@@ -1,282 +0,0 @@
-"use client"
-import { usePathname, useRouter } from "next/navigation"
-import { Suspense, useCallback, useEffect, useRef, useState } from "react"
-import { DrawIoEmbed } from "react-drawio"
-import type { ImperativePanelHandle } from "react-resizable-panels"
-import ChatPanel from "@/components/chat-panel"
-import {
-    ResizableHandle,
-    ResizablePanel,
-    ResizablePanelGroup,
-} from "@/components/ui/resizable"
-import { useDiagram } from "@/contexts/diagram-context"
-import { i18n, type Locale } from "@/lib/i18n/config"
-import { isIndexedDBUsable } from "@/lib/session-storage"
-
-export default function Home() {
-    const {
-        drawioRef,
-        handleDiagramExport,
-        handleDiagramAutoSave,
-        onDrawioLoad,
-        resetDrawioReady,
-    } = useDiagram()
-    const router = useRouter()
-    const pathname = usePathname()
-    // Extract current language from pathname (e.g., "/zh/about" → "zh")
-    const currentLang = (pathname.split("/")[1] || i18n.defaultLocale) as Locale
-    const [isMobile, setIsMobile] = useState(false)
-    const [isChatVisible, setIsChatVisible] = useState(true)
-    const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
-    const [darkMode, setDarkMode] = useState(false)
-    const [isLoaded, setIsLoaded] = useState(false)
-    const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [isElectron, setIsElectron] = useState(false)
-    const [canPersist, setCanPersist] = useState(false)
-    const [canPersistChecked, setCanPersistChecked] = useState(false)
-    const [drawioBaseUrl, setDrawioBaseUrl] = useState(
-        process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net",
-    )
-
-    const chatPanelRef = useRef<ImperativePanelHandle>(null)
-    const isMobileRef = useRef(false)
-
-    // Load preferences from localStorage after mount
-    useEffect(() => {
-        // Restore saved locale and redirect if needed
-        const savedLocale = localStorage.getItem("next-ai-draw-io-locale")
-        if (savedLocale && i18n.locales.includes(savedLocale as Locale)) {
-            const pathParts = pathname.split("/").filter(Boolean)
-            const currentLocale = pathParts[0]
-            if (currentLocale !== savedLocale) {
-                pathParts[0] = savedLocale
-                router.replace(`/${pathParts.join("/")}`)
-                return // Wait for redirect
-            }
-        }
-
-        const savedUi = localStorage.getItem("drawio-theme")
-        if (savedUi === "min" || savedUi === "sketch") {
-            setDrawioUi(savedUi)
-        }
-
-        const savedDarkMode = localStorage.getItem("next-ai-draw-io-dark-mode")
-        if (savedDarkMode !== null) {
-            const isDark = savedDarkMode === "true"
-            setDarkMode(isDark)
-            document.documentElement.classList.toggle("dark", isDark)
-        } else {
-            const prefersDark = window.matchMedia(
-                "(prefers-color-scheme: dark)",
-            ).matches
-            setDarkMode(prefersDark)
-            document.documentElement.classList.toggle("dark", prefersDark)
-        }
-
-        // Detect Electron and use bundled draw.io files for offline use
-        // Note: react-drawio uses `new URL(baseUrl)` so we need absolute URL
-        // Include /index.html because Next.js doesn't auto-serve index.html for directories
-        const electronDetected =
-            !process.env.NEXT_PUBLIC_DRAWIO_BASE_URL &&
-            !!(window as unknown as { electronAPI?: unknown }).electronAPI
-        if (electronDetected) {
-            setIsElectron(true)
-            setDrawioBaseUrl(`${window.location.origin}/drawio/index.html`)
-        }
-
-        void (async () => {
-            const usable = await isIndexedDBUsable()
-            setCanPersist(usable)
-            setCanPersistChecked(true)
-        })()
-        setIsLoaded(true)
-    }, [pathname, router])
-
-    const handleDrawioLoad = useCallback(() => {
-        setIsDrawioReady(true)
-        onDrawioLoad()
-    }, [onDrawioLoad])
-
-    const handleDrawioAutoSave = useCallback(
-        (data: { xml?: string }) => {
-            handleDiagramAutoSave(data)
-            // Only suppress modified state when persistence is available
-            if (canPersist) {
-                drawioRef.current?.status({ message: "", modified: false })
-            }
-        },
-        [canPersist, drawioRef, handleDiagramAutoSave],
-    )
-
-    const handleDarkModeChange = () => {
-        const newValue = !darkMode
-        setDarkMode(newValue)
-        localStorage.setItem("next-ai-draw-io-dark-mode", String(newValue))
-        document.documentElement.classList.toggle("dark", newValue)
-        setIsDrawioReady(false)
-        resetDrawioReady()
-    }
-
-    const handleDrawioUiChange = () => {
-        const newUi = drawioUi === "min" ? "sketch" : "min"
-        localStorage.setItem("drawio-theme", newUi)
-        setDrawioUi(newUi)
-        setIsDrawioReady(false)
-        resetDrawioReady()
-    }
-
-    // Check mobile - reset draw.io before crossing breakpoint
-    const isInitialRenderRef = useRef(true)
-    useEffect(() => {
-        const checkMobile = () => {
-            const newIsMobile = window.innerWidth < 768
-            if (
-                !isInitialRenderRef.current &&
-                newIsMobile !== isMobileRef.current
-            ) {
-                setIsDrawioReady(false)
-                resetDrawioReady()
-            }
-            isMobileRef.current = newIsMobile
-            isInitialRenderRef.current = false
-            setIsMobile(newIsMobile)
-        }
-
-        checkMobile()
-        window.addEventListener("resize", checkMobile)
-        return () => window.removeEventListener("resize", checkMobile)
-    }, [resetDrawioReady])
-
-    const toggleChatPanel = () => {
-        const panel = chatPanelRef.current
-        if (panel) {
-            if (panel.isCollapsed()) {
-                panel.expand()
-                setIsChatVisible(true)
-            } else {
-                panel.collapse()
-                setIsChatVisible(false)
-            }
-        }
-    }
-
-    // Keyboard shortcut for toggling chat panel
-    useEffect(() => {
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if ((event.ctrlKey || event.metaKey) && event.key === "b") {
-                event.preventDefault()
-                toggleChatPanel()
-            }
-        }
-
-        window.addEventListener("keydown", handleKeyDown)
-        return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [])
-
-    return (
-        <div className="h-screen bg-background relative overflow-hidden">
-            <ResizablePanelGroup
-                id="main-panel-group"
-                direction={isMobile ? "vertical" : "horizontal"}
-                className="h-full"
-            >
-                <ResizablePanel
-                    id="drawio-panel"
-                    defaultSize={isMobile ? 50 : 67}
-                    minSize={20}
-                >
-                    <div
-                        className={`h-full relative ${
-                            isMobile ? "p-1" : "p-2"
-                        }`}
-                    >
-                        <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 relative">
-                            {isLoaded && canPersistChecked && (
-                                <div
-                                    className={`h-full w-full ${isDrawioReady ? "" : "invisible absolute inset-0"}`}
-                                >
-                                    <DrawIoEmbed
-                                        key={`${drawioUi}-${darkMode}-${currentLang}-${isElectron}`}
-                                        ref={drawioRef}
-                                        autosave
-                                        onAutoSave={handleDrawioAutoSave}
-                                        onExport={handleDiagramExport}
-                                        onLoad={handleDrawioLoad}
-                                        baseUrl={drawioBaseUrl}
-                                        configuration={
-                                            canPersist
-                                                ? { confirmExit: false }
-                                                : undefined
-                                        }
-                                        urlParameters={{
-                                            ui: drawioUi,
-                                            spin: false,
-                                            libraries: false,
-                                            // Disable modified tracking only when persistence is available
-                                            ...(canPersist && {
-                                                modified: false,
-                                                keepmodified: false,
-                                            }),
-                                            saveAndExit: false,
-                                            noSaveBtn: true,
-                                            noExitBtn: true,
-                                            dark: darkMode,
-                                            lang: currentLang,
-                                            // Enable offline mode in Electron to disable external service calls
-                                            ...(isElectron && {
-                                                offline: true,
-                                            }),
-                                        }}
-                                    />
-                                </div>
-                            )}
-                            {(!isLoaded || !isDrawioReady) && (
-                                <div className="h-full w-full bg-background flex items-center justify-center">
-                                    <span className="text-muted-foreground">
-                                        Draw.io panel is loading...
-                                    </span>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </ResizablePanel>
-
-                <ResizableHandle withHandle />
-
-                {/* Chat Panel */}
-                <ResizablePanel
-                    key={isMobile ? "mobile" : "desktop"}
-                    id="chat-panel"
-                    ref={chatPanelRef}
-                    defaultSize={isMobile ? 50 : 33}
-                    minSize={isMobile ? 20 : 15}
-                    maxSize={isMobile ? 80 : 50}
-                    collapsible={!isMobile}
-                    collapsedSize={isMobile ? 0 : 3}
-                    onCollapse={() => setIsChatVisible(false)}
-                    onExpand={() => setIsChatVisible(true)}
-                >
-                    <div className={`h-full ${isMobile ? "p-1" : "py-2 pr-2"}`}>
-                        <Suspense
-                            fallback={
-                                <div className="h-full bg-card rounded-xl border border-border/30 flex items-center justify-center text-muted-foreground">
-                                    Loading chat...
-                                </div>
-                            }
-                        >
-                            <ChatPanel
-                                isVisible={isChatVisible}
-                                onToggleVisibility={toggleChatPanel}
-                                drawioUi={drawioUi}
-                                onToggleDrawioUi={handleDrawioUiChange}
-                                darkMode={darkMode}
-                                onToggleDarkMode={handleDarkModeChange}
-                                isMobile={isMobile}
-                            />
-                        </Suspense>
-                    </div>
-                </ResizablePanel>
-            </ResizablePanelGroup>
-        </div>
-    )
-}

app/about/page.tsx

@@ -0,0 +1,336 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { FaGithub } from "react-icons/fa";
+
+export const metadata: Metadata = {
+    title: "About - AI-Powered Diagram Generator | Next AI Draw.io",
+    description: "Learn about Next AI Draw.io, a free AI-powered diagram creation tool. Create AWS architecture diagrams, flowcharts, and UML diagrams using Claude Sonnet and GPT-4. No login required.",
+    keywords: ["about AI diagram generator", "diagram tool features", "how to create diagrams", "AI drawing tool capabilities", "draw.io integration"],
+};
+
+export default function About() {
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Navigation */}
+            <header className="bg-white border-b border-gray-200">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+                    <div className="flex items-center justify-between">
+                        <Link href="/" className="text-xl font-bold text-gray-900 hover:text-gray-700">
+                            Next AI Draw.io
+                        </Link>
+                        <nav className="flex items-center gap-6 text-sm">
+                            <Link href="/" className="text-gray-600 hover:text-gray-900 transition-colors">
+                                Editor
+                            </Link>
+                            <Link href="/about" className="text-blue-600 font-semibold">
+                                About
+                            </Link>
+                            <a
+                                href="https://github.com/DayuanJiang/next-ai-draw-io"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                                aria-label="View on GitHub"
+                            >
+                                <FaGithub className="w-5 h-5" />
+                            </a>
+                        </nav>
+                    </div>
+                </div>
+            </header>
+
+            {/* Main Content */}
+            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+                <article>
+                    {/* Hero Section */}
+                    <header className="mb-12">
+                        <h1 className="text-4xl font-bold text-gray-900 mb-4">
+                            AI-Powered Diagram Generator | Create Professional Diagrams Instantly
+                        </h1>
+                        <p className="text-xl text-gray-600">
+                            Free, open-source diagram creation tool powered by AI. No login required, no installation needed.
+                        </p>
+                    </header>
+
+                    {/* Introduction */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-4">What is Next AI Draw.io?</h2>
+                        <div className="prose prose-lg max-w-none text-gray-700">
+                            <p className="mb-4">
+                                <strong>Next AI Draw.io</strong> is a free, AI-powered diagram creation tool that integrates seamlessly with draw.io.
+                                Generate AWS architecture diagrams, flowcharts, UML diagrams, and technical documentation diagrams using natural language
+                                prompts. No login required, no installation needed—start creating professional diagrams instantly in your browser.
+                            </p>
+                            <p className="mb-4">
+                                Our intelligent diagram generator uses advanced AI models including <strong>Claude Sonnet</strong> and <strong>GPT-4</strong> to
+                                understand your requirements and automatically create properly structured diagrams with appropriate symbols, layouts, and connections.
+                                Simply describe what you need, upload reference images, or ask the AI to modify existing diagrams with our targeted XML editing feature.
+                            </p>
+                            <p>
+                                Whether you're a software architect designing system infrastructure, a developer documenting APIs, a business analyst creating
+                                process flows, or a student working on technical assignments, Next AI Draw.io makes diagram creation fast, accurate, and effortless.
+                            </p>
+                        </div>
+                    </section>
+
+                    {/* Key Features */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Key Features</h2>
+                        <div className="grid md:grid-cols-2 gap-6">
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    AI-Powered Diagram Creation
+                                </h3>
+                                <p className="text-gray-700">
+                                    Generate diagrams from natural language descriptions using Claude Sonnet or GPT-4.
+                                    Describe your diagram in plain English, and watch the AI create it with proper symbols,
+                                    layouts, and connections automatically.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    AWS Architecture Diagrams
+                                </h3>
+                                <p className="text-gray-700">
+                                    Create professional cloud infrastructure diagrams with AWS-style icons and layouts.
+                                    Perfect for designing EC2 instances, Lambda functions, S3 buckets, RDS databases, VPCs,
+                                    and complete AWS solution architectures.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Image-Based Diagram Replication
+                                </h3>
+                                <p className="text-gray-700">
+                                    Upload existing diagrams or sketches, and the AI will automatically recreate them in draw.io format.
+                                    Modify uploaded images by describing the changes you want—the AI handles the rest.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Diagram History & Version Control
+                                </h3>
+                                <p className="text-gray-700">
+                                    Access previous versions of your diagrams and restore any version from your session history.
+                                    Never lose work—every AI modification is saved and can be undone with a single click.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Targeted XML Editing
+                                </h3>
+                                <p className="text-gray-700">
+                                    Precise diagram modifications using intelligent XML manipulation. Unlike full diagram regeneration,
+                                    targeted edits preserve your existing layout while making specific changes, ensuring consistent
+                                    and predictable results.
+                                </p>
+                            </div>
+
+                            <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-3 flex items-center">
+                                    <span className="text-blue-600 mr-2">✓</span>
+                                    Multi-Provider AI Support
+                                </h3>
+                                <p className="text-gray-700">
+                                    Choose between Claude Sonnet, GPT-4, and other leading AI models for optimal results.
+                                    Each model has unique strengths—select the one that best fits your diagram complexity and style.
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* Use Cases */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Popular Use Cases</h2>
+                        <div className="grid md:grid-cols-3 gap-6">
+                            <div className="bg-blue-50 p-6 rounded-lg border border-blue-200">
+                                <h3 className="text-xl font-semibold text-gray-900 mb-3">AWS Cloud Architecture</h3>
+                                <p className="text-gray-700 mb-4">
+                                    Design scalable cloud infrastructure with EC2 instances, Lambda functions, S3 storage,
+                                    RDS databases, and VPC networking. Perfect for solution architects, cloud engineers,
+                                    and DevOps teams planning AWS deployments.
+                                </p>
+                                <p className="text-sm text-gray-600 italic">
+                                    Example: "Create an AWS diagram with an Application Load Balancer, two EC2 instances
+                                    in different availability zones, an RDS database, and an S3 bucket for static assets."
+                                </p>
+                            </div>
+
+                            <div className="bg-green-50 p-6 rounded-lg border border-green-200">
+                                <h3 className="text-xl font-semibold text-gray-900 mb-3">Flowcharts & Process Diagrams</h3>
+                                <p className="text-gray-700 mb-4">
+                                    Create business process flows, decision trees, workflow diagrams, and algorithm flowcharts
+                                    for documentation, presentations, and process optimization. Ideal for business analysts,
+                                    project managers, and operations teams.
+                                </p>
+                                <p className="text-sm text-gray-600 italic">
+                                    Example: "Draw a flowchart for user authentication: check if user exists, verify password,
+                                    generate JWT token on success, show error message on failure."
+                                </p>
+                            </div>
+
+                            <div className="bg-purple-50 p-6 rounded-lg border border-purple-200">
+                                <h3 className="text-xl font-semibold text-gray-900 mb-3">System Design & UML Diagrams</h3>
+                                <p className="text-gray-700 mb-4">
+                                    Generate system architecture diagrams, class diagrams, sequence diagrams, and
+                                    entity-relationship diagrams for software projects. Essential for software engineers,
+                                    system designers, and technical documentation.
+                                </p>
+                                <p className="text-sm text-gray-600 italic">
+                                    Example: "Create a class diagram for an e-commerce system with User, Product, Order,
+                                    and Payment classes showing their relationships and key methods."
+                                </p>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* How It Works */}
+                    <section className="mb-12 bg-white p-8 rounded-lg border border-gray-200">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">How to Use Next AI Draw.io</h2>
+                        <div className="space-y-6">
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    1
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Open the Editor</h3>
+                                    <p className="text-gray-700">
+                                        Navigate to the main page and you'll see the draw.io editor with an AI chat panel on the right.
+                                        No account creation or login required—start immediately.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    2
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Describe Your Diagram</h3>
+                                    <p className="text-gray-700">
+                                        Type your diagram request in natural language. Be as detailed or as general as you like.
+                                        You can also upload reference images for the AI to analyze and replicate.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    3
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">AI Generates Your Diagram</h3>
+                                    <p className="text-gray-700">
+                                        The AI processes your request and automatically creates your diagram in seconds.
+                                        Watch as it appears in the editor with proper symbols, layouts, and connections.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
+                                    4
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Refine and Export</h3>
+                                    <p className="text-gray-700">
+                                        Request modifications using the chat, manually edit in draw.io, or export to PNG, SVG,
+                                        or XML format. Access diagram history to restore previous versions anytime.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* Benefits */}
+                    <section className="mb-12">
+                        <h2 className="text-2xl font-semibold text-gray-900 mb-6">Why Choose Next AI Draw.io?</h2>
+                        <div className="grid md:grid-cols-2 gap-6">
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">⚡</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Save Time</h3>
+                                    <p className="text-gray-700">
+                                        Create complex diagrams in seconds instead of hours. No more dragging, aligning,
+                                        or searching for the right symbols—AI handles it all.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🎯</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Precision Editing</h3>
+                                    <p className="text-gray-700">
+                                        Targeted XML editing ensures changes are precise and predictable, unlike tools
+                                        that regenerate entire diagrams and lose your layout.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🆓</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Completely Free</h3>
+                                    <p className="text-gray-700">
+                                        No subscriptions, no usage limits, no hidden costs. Open-source and free forever.
+                                        Use it for personal projects, work, or education.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className="flex items-start">
+                                <div className="flex-shrink-0 text-blue-600 text-2xl mr-3">🔒</div>
+                                <div>
+                                    <h3 className="text-lg font-semibold text-gray-900 mb-2">Privacy First</h3>
+                                    <p className="text-gray-700">
+                                        No account required means your diagrams stay private. Work on sensitive
+                                        architecture designs without worrying about data storage or privacy policies.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    {/* CTA Section */}
+                    <section className="bg-blue-600 text-white p-8 rounded-lg text-center">
+                        <h2 className="text-3xl font-bold mb-4">Ready to Create Your First AI Diagram?</h2>
+                        <p className="text-xl mb-6">
+                            Start generating professional diagrams in seconds. No signup required.
+                        </p>
+                        <Link
+                            href="/"
+                            className="inline-block bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors"
+                        >
+                            Open Editor
+                        </Link>
+                    </section>
+                </article>
+            </main>
+
+            {/* Footer */}
+            <footer className="bg-white border-t border-gray-200 mt-16">
+                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+                    <div className="text-center text-gray-600 text-sm">
+                        <p className="mb-2">
+                            Next AI Draw.io - Free AI-Powered Diagram Generator
+                        </p>
+                        <p>
+                            Perfect for developers, architects, students, and business analysts.
+                            Open source. No login required.
+                        </p>
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+}

app/api/chat/xml_guide.md

@@ -81,15 +81,16 @@ Contains the actual diagram data.
 
 ## Root Cell Container: `<root>`
 
-Contains all the cells in the diagram. **Note:** When generating diagrams, you only need to provide the mxCell elements - the root container and root cells (id="0", id="1") are added automatically.
+Contains all the cells in the diagram.
 
-**Internal structure (auto-generated):**
+**Example:**
 
 ```xml
 <root>
-  <mxCell id="0"/>           <!-- Auto-added -->
-  <mxCell id="1" parent="0"/> <!-- Auto-added -->
-  <!-- Your mxCell elements go here (start from id="2") -->
+<mxCell id="0"/>
+<mxCell id="1" parent="0"/>
+
+  <!-- Other cells go here -->
 </root>
 ```
 
@@ -202,15 +203,14 @@ Draw.io files contain two special cells that are always present:
 1.  **Root Cell** (id = "0"): The parent of all cells
 2.  **Default Parent Cell** (id = "1", parent = "0"): The default layer and parent for most cells
 
-## Tips for Creating Draw.io XML
+## Tips for Manually Creating Draw.io XML
 
-1.  **Generate ONLY mxCell elements** - wrapper tags and root cells (id="0", id="1") are added automatically
-2.  Start IDs from "2" (id="0" and id="1" are reserved for root cells)
+1.  Start with the basic structure (`mxfile`, `diagram`, `mxGraphModel`, `root`)
+2.  Always include the two special cells (id = "0" and id = "1")
 3.  Assign unique and sequential IDs to all cells
-4.  Define parent relationships correctly (use parent="1" for top-level shapes)
+4.  Define parent relationships correctly
 5.  Use `mxGeometry` elements to position shapes
 6.  For connectors, specify `source` and `target` attributes
-7.  **CRITICAL: All mxCell elements must be siblings. NEVER nest mxCell inside another mxCell.**
 
 ## Common Patterns
 
@@ -234,33 +234,12 @@ To group elements, create a parent cell and set other cells' `parent` attribute
 
 ### Swimlanes
 
-Swimlanes use the `swimlane` shape style. **IMPORTANT: All mxCell elements (swimlanes, steps, and edges) must be siblings under `<root>`. Edges are NOT nested inside swimlanes or steps.**
+Swimlanes use the `swimlane` shape style:
 
 ```xml
-<root>
-  <mxCell id="0"/>
-  <mxCell id="1" parent="0"/>
-  <!-- Swimlane 1 -->
-  <mxCell id="lane1" value="Frontend" style="swimlane;startSize=30;" vertex="1" parent="1">
-    <mxGeometry x="40" y="40" width="200" height="300" as="geometry"/>
-  </mxCell>
-  <!-- Swimlane 2 -->
-  <mxCell id="lane2" value="Backend" style="swimlane;startSize=30;" vertex="1" parent="1">
-    <mxGeometry x="280" y="40" width="200" height="300" as="geometry"/>
-  </mxCell>
-  <!-- Step inside lane1 (parent="lane1") -->
-  <mxCell id="step1" value="Send Request" style="rounded=1;" vertex="1" parent="lane1">
-    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-  </mxCell>
-  <!-- Step inside lane2 (parent="lane2") -->
-  <mxCell id="step2" value="Process" style="rounded=1;" vertex="1" parent="lane2">
-    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-  </mxCell>
-  <!-- Edge connecting step1 to step2 (sibling element, NOT nested inside steps) -->
-  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
-    <mxGeometry relative="1" as="geometry"/>
-  </mxCell>
-</root>
+<mxCell id="20" value="Swimlane 1" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+  <mxGeometry x="200" y="200" width="140" height="120" as="geometry" />
+</mxCell>
 ```
 
 ### Tables

app/api/config/route.ts

@@ -1,10 +0,0 @@
-import { NextResponse } from "next/server"
-
-export async function GET() {
-    return NextResponse.json({
-        accessCodeRequired: !!process.env.ACCESS_CODE_LIST,
-        dailyRequestLimit: Number(process.env.DAILY_REQUEST_LIMIT) || 0,
-        dailyTokenLimit: Number(process.env.DAILY_TOKEN_LIMIT) || 0,
-        tpmLimit: Number(process.env.TPM_LIMIT) || 0,
-    })
-}

app/api/log-feedback/route.ts

@@ -1,117 +0,0 @@
-import { randomUUID } from "crypto"
-import { z } from "zod"
-import { getLangfuseClient } from "@/lib/langfuse"
-import { getUserIdFromRequest } from "@/lib/user-id"
-
-const feedbackSchema = z.object({
-    messageId: z.string().min(1).max(200),
-    feedback: z.enum(["good", "bad"]),
-    sessionId: z.string().min(1).max(200).optional(),
-})
-
-export async function POST(req: Request) {
-    const langfuse = getLangfuseClient()
-    if (!langfuse) {
-        return Response.json({ success: true, logged: false })
-    }
-
-    // Validate input
-    let data
-    try {
-        data = feedbackSchema.parse(await req.json())
-    } catch {
-        return Response.json(
-            { success: false, error: "Invalid input" },
-            { status: 400 },
-        )
-    }
-
-    const { messageId, feedback, sessionId } = data
-
-    // Skip logging if no sessionId - prevents attaching to wrong user's trace
-    if (!sessionId) {
-        return Response.json({ success: true, logged: false })
-    }
-
-    // Get user ID for tracking
-    const userId = getUserIdFromRequest(req)
-
-    try {
-        // Find the most recent chat trace for this session to attach the score to
-        const tracesResponse = await langfuse.api.trace.list({
-            sessionId,
-            limit: 1,
-        })
-
-        const traces = tracesResponse.data || []
-        const latestTrace = traces[0]
-
-        if (!latestTrace) {
-            // No trace found for this session - create a standalone feedback trace
-            const traceId = randomUUID()
-            const timestamp = new Date().toISOString()
-
-            await langfuse.api.ingestion.batch({
-                batch: [
-                    {
-                        type: "trace-create",
-                        id: randomUUID(),
-                        timestamp,
-                        body: {
-                            id: traceId,
-                            name: "user-feedback",
-                            sessionId,
-                            userId,
-                            input: { messageId, feedback },
-                            metadata: {
-                                source: "feedback-button",
-                                note: "standalone - no chat trace found",
-                            },
-                            timestamp,
-                        },
-                    },
-                    {
-                        type: "score-create",
-                        id: randomUUID(),
-                        timestamp,
-                        body: {
-                            id: randomUUID(),
-                            traceId,
-                            name: "user-feedback",
-                            value: feedback === "good" ? 1 : 0,
-                            comment: `User gave ${feedback} feedback`,
-                        },
-                    },
-                ],
-            })
-        } else {
-            // Attach score to the existing chat trace
-            const timestamp = new Date().toISOString()
-
-            await langfuse.api.ingestion.batch({
-                batch: [
-                    {
-                        type: "score-create",
-                        id: randomUUID(),
-                        timestamp,
-                        body: {
-                            id: randomUUID(),
-                            traceId: latestTrace.id,
-                            name: "user-feedback",
-                            value: feedback === "good" ? 1 : 0,
-                            comment: `User gave ${feedback} feedback`,
-                        },
-                    },
-                ],
-            })
-        }
-
-        return Response.json({ success: true, logged: true })
-    } catch (error) {
-        console.error("Langfuse feedback error:", error)
-        return Response.json(
-            { success: false, error: "Failed to log feedback" },
-            { status: 500 },
-        )
-    }
-}

app/api/log-save/route.ts

@@ -1,76 +0,0 @@
-import { randomUUID } from "crypto"
-import { z } from "zod"
-import { getLangfuseClient } from "@/lib/langfuse"
-
-const saveSchema = z.object({
-    filename: z.string().min(1).max(255),
-    format: z.enum(["drawio", "png", "svg"]),
-    sessionId: z.string().min(1).max(200).optional(),
-})
-
-export async function POST(req: Request) {
-    const langfuse = getLangfuseClient()
-    if (!langfuse) {
-        return Response.json({ success: true, logged: false })
-    }
-
-    // Validate input
-    let data
-    try {
-        data = saveSchema.parse(await req.json())
-    } catch {
-        return Response.json(
-            { success: false, error: "Invalid input" },
-            { status: 400 },
-        )
-    }
-
-    const { filename, format, sessionId } = data
-
-    // Skip logging if no sessionId - prevents attaching to wrong user's trace
-    if (!sessionId) {
-        return Response.json({ success: true, logged: false })
-    }
-
-    try {
-        const timestamp = new Date().toISOString()
-
-        // Find the most recent chat trace for this session to attach the save flag
-        const tracesResponse = await langfuse.api.trace.list({
-            sessionId,
-            limit: 1,
-        })
-
-        const traces = tracesResponse.data || []
-        const latestTrace = traces[0]
-
-        if (latestTrace) {
-            // Add a score to the existing trace to flag that user saved
-            await langfuse.api.ingestion.batch({
-                batch: [
-                    {
-                        type: "score-create",
-                        id: randomUUID(),
-                        timestamp,
-                        body: {
-                            id: randomUUID(),
-                            traceId: latestTrace.id,
-                            name: "diagram-saved",
-                            value: 1,
-                            comment: `User saved diagram as ${filename}.${format}`,
-                        },
-                    },
-                ],
-            })
-        }
-        // If no trace found, skip logging (user hasn't chatted yet)
-
-        return Response.json({ success: true, logged: !!latestTrace })
-    } catch (error) {
-        console.error("Langfuse save error:", error)
-        return Response.json(
-            { success: false, error: "Failed to log save" },
-            { status: 500 },
-        )
-    }
-}

app/api/parse-url/route.ts

@@ -1,128 +0,0 @@
-import { extract } from "@extractus/article-extractor"
-import { NextResponse } from "next/server"
-import TurndownService from "turndown"
-import { allowPrivateUrls, isPrivateUrl } from "@/lib/ssrf-protection"
-
-const MAX_CONTENT_LENGTH = 150000 // Match PDF limit
-const EXTRACT_TIMEOUT_MS = 15000
-const USER_AGENT = "Mozilla/5.0 (compatible; NextAIDrawio/1.0)"
-
-export async function POST(req: Request) {
-    try {
-        const { url } = await req.json()
-
-        if (!url || typeof url !== "string") {
-            return NextResponse.json(
-                { error: "URL is required" },
-                { status: 400 },
-            )
-        }
-
-        // Validate URL format
-        try {
-            new URL(url)
-        } catch {
-            return NextResponse.json(
-                { error: "Invalid URL format" },
-                { status: 400 },
-            )
-        }
-
-        // SSRF protection
-        if (!allowPrivateUrls && isPrivateUrl(url)) {
-            return NextResponse.json(
-                { error: "Cannot access private/internal URLs" },
-                { status: 400 },
-            )
-        }
-        const headController = new AbortController()
-        const headTimeout = setTimeout(() => headController.abort(), 3000)
-        try {
-            const headResponse = await fetch(url, {
-                method: "HEAD",
-                headers: { "User-Agent": USER_AGENT },
-                signal: headController.signal,
-            })
-            const contentType = headResponse.headers.get("content-type")
-            if (contentType?.includes("application/pdf")) {
-                return NextResponse.json(
-                    {
-                        error: "PDF URLs are not supported. Please download and upload the PDF file directly",
-                    },
-                    { status: 422 },
-                )
-            }
-        } catch (err) {
-            console.warn(
-                "HEAD pre-check failed, proceeding with extraction:",
-                err,
-            )
-        } finally {
-            clearTimeout(headTimeout)
-        }
-
-        // Extract article content with timeout to avoid tying up server resources
-        const controller = new AbortController()
-        const timeoutId = setTimeout(() => {
-            controller.abort()
-        }, EXTRACT_TIMEOUT_MS)
-
-        let article
-        try {
-            article = await extract(url, undefined, {
-                headers: { "User-Agent": USER_AGENT },
-                signal: controller.signal,
-            })
-        } catch (err: any) {
-            if (err?.name === "AbortError") {
-                return NextResponse.json(
-                    { error: "Timed out while fetching URL content" },
-                    { status: 504 },
-                )
-            }
-            throw err
-        } finally {
-            clearTimeout(timeoutId)
-        }
-
-        if (!article || !article.content) {
-            return NextResponse.json(
-                { error: "Could not extract content from URL" },
-                { status: 400 },
-            )
-        }
-
-        // Convert HTML to Markdown
-        const turndownService = new TurndownService({
-            headingStyle: "atx",
-            codeBlockStyle: "fenced",
-        })
-
-        // Remove unwanted elements before conversion
-        turndownService.remove(["script", "style", "iframe", "noscript"])
-
-        const markdown = turndownService.turndown(article.content)
-
-        // Check content length
-        if (markdown.length > MAX_CONTENT_LENGTH) {
-            return NextResponse.json(
-                {
-                    error: `Content exceeds ${MAX_CONTENT_LENGTH / 1000}k character limit (${(markdown.length / 1000).toFixed(1)}k chars)`,
-                },
-                { status: 400 },
-            )
-        }
-
-        return NextResponse.json({
-            title: article.title || "Untitled",
-            content: markdown,
-            charCount: markdown.length,
-        })
-    } catch (error) {
-        console.error("URL extraction error:", error)
-        return NextResponse.json(
-            { error: "Failed to fetch or parse URL content" },
-            { status: 500 },
-        )
-    }
-}

app/api/server-models/route.ts

@@ -1,14 +0,0 @@
-import { NextResponse } from "next/server"
-import { loadFlattenedServerModels } from "@/lib/server-model-config"
-
-// Use dynamic rendering to read AI_MODEL/AI_PROVIDER env vars at runtime
-// This ensures Docker users can set these values when starting containers
-export const dynamic = "force-dynamic"
-
-export async function GET() {
-    const models = await loadFlattenedServerModels()
-    return NextResponse.json({
-        models,
-        hasConfig: models.length > 0,
-    })
-}

app/api/validate-diagram/route.ts

@@ -1,136 +0,0 @@
-/**
- * API endpoint for VLM-based diagram validation.
- * Accepts a PNG image and streams validation results using useObject-compatible format.
- */
-
-import { streamObject } from "ai"
-import { getValidationModel } from "@/lib/ai-providers"
-import { VALIDATION_SYSTEM_PROMPT } from "@/lib/validation-prompts"
-import {
-    type ValidationResult,
-    ValidationResultSchema,
-} from "@/lib/validation-schema"
-
-export const maxDuration = 30
-
-interface ValidateDiagramRequest {
-    imageData: string // Base64 PNG data URL
-    sessionId?: string
-}
-
-// Default valid result for disabled/error cases
-const DEFAULT_VALID_RESULT: ValidationResult = {
-    valid: true,
-    issues: [],
-    suggestions: [],
-}
-
-/**
- * Create a streaming response for useObject compatibility.
- * useObject expects text stream format, not plain JSON.
- */
-function createStreamingResponse(result: ValidationResult): Response {
-    const encoder = new TextEncoder()
-    const stream = new ReadableStream({
-        start(controller) {
-            // Stream the JSON as text (useObject parses this)
-            controller.enqueue(encoder.encode(JSON.stringify(result)))
-            controller.close()
-        },
-    })
-    return new Response(stream, {
-        headers: { "Content-Type": "text/plain; charset=utf-8" },
-    })
-}
-
-export async function POST(req: Request): Promise<Response> {
-    try {
-        // Check if VLM validation is enabled (default: true)
-        const enableValidation = process.env.ENABLE_VLM_VALIDATION !== "false"
-        if (!enableValidation) {
-            return createStreamingResponse(DEFAULT_VALID_RESULT)
-        }
-
-        const body: ValidateDiagramRequest = await req.json()
-        const { imageData, sessionId } = body
-
-        if (!imageData) {
-            return Response.json(
-                { error: "Missing imageData" },
-                { status: 400 },
-            )
-        }
-
-        // Validate image data format
-        if (
-            !imageData.startsWith("data:image/png;base64,") &&
-            !imageData.startsWith("data:image/")
-        ) {
-            return Response.json(
-                { error: "Invalid image data format" },
-                { status: 400 },
-            )
-        }
-
-        // Get the validation model
-        let model
-        try {
-            model = getValidationModel()
-        } catch (error) {
-            console.warn(
-                "[validate-diagram] Validation model not available:",
-                error,
-            )
-            // Return valid if no vision model is configured
-            return createStreamingResponse(DEFAULT_VALID_RESULT)
-        }
-
-        // Parse timeout with validation (minimum 1000ms, default 10000ms)
-        const timeout =
-            Math.max(
-                1000,
-                parseInt(process.env.VALIDATION_TIMEOUT || "10000", 10),
-            ) || 10000
-
-        // Stream the VLM response for useObject consumption
-        const result = streamObject({
-            model,
-            schema: ValidationResultSchema,
-            system: VALIDATION_SYSTEM_PROMPT,
-            messages: [
-                {
-                    role: "user",
-                    content: [
-                        {
-                            type: "image",
-                            image: imageData,
-                        },
-                        {
-                            type: "text",
-                            text: "Please analyze this diagram for visual quality issues.",
-                        },
-                    ],
-                },
-            ],
-            maxOutputTokens: 1024,
-            abortSignal: AbortSignal.timeout(timeout),
-            onFinish: ({ object }) => {
-                if (sessionId && object) {
-                    console.log(
-                        `[validate-diagram] Session ${sessionId}: valid=${object.valid}, issues=${object.issues?.length ?? 0}`,
-                    )
-                }
-            },
-        })
-
-        return result.toTextStreamResponse()
-    } catch (error) {
-        // Log with session context if available
-        const errorMessage =
-            error instanceof Error ? error.message : String(error)
-        console.error("[validate-diagram] Error:", errorMessage)
-
-        // On error, return valid to not block the user
-        return createStreamingResponse(DEFAULT_VALID_RESULT)
-    }
-}

app/api/validate-model/route.ts

@@ -1,430 +0,0 @@
-import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock"
-import { createAnthropic } from "@ai-sdk/anthropic"
-import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
-import { createGateway } from "@ai-sdk/gateway"
-import { createGoogleGenerativeAI } from "@ai-sdk/google"
-import { createVertex } from "@ai-sdk/google-vertex"
-import { createOpenAI } from "@ai-sdk/openai"
-import { createOpenRouter } from "@openrouter/ai-sdk-provider"
-import { generateText } from "ai"
-import { NextResponse } from "next/server"
-import { createOllama } from "ollama-ai-provider-v2"
-import { normalizeMiniMaxBaseURL } from "@/lib/ai-providers"
-import { allowPrivateUrls, isPrivateUrl } from "@/lib/ssrf-protection"
-import { PROVIDER_INFO, type ProviderName } from "@/lib/types/model-config"
-
-export const runtime = "nodejs"
-
-interface ValidateRequest {
-    provider: string
-    apiKey: string
-    baseUrl?: string
-    modelId: string
-    // AWS Bedrock specific
-    awsAccessKeyId?: string
-    awsSecretAccessKey?: string
-    awsRegion?: string
-    // Vertex AI specific
-    vertexApiKey?: string // Express Mode API key
-}
-
-export async function POST(req: Request) {
-    try {
-        const body: ValidateRequest = await req.json()
-        const {
-            provider,
-            apiKey,
-            baseUrl,
-            modelId,
-            awsAccessKeyId,
-            awsSecretAccessKey,
-            awsRegion,
-            // Note: Express Mode only needs vertexApiKey
-            vertexApiKey,
-        } = body
-
-        if (!provider || !modelId) {
-            return NextResponse.json(
-                { valid: false, error: "Provider and model ID are required" },
-                { status: 400 },
-            )
-        }
-
-        // SECURITY: Block SSRF attacks via custom baseUrl
-        if (baseUrl && !allowPrivateUrls && isPrivateUrl(baseUrl)) {
-            return NextResponse.json(
-                { valid: false, error: "Invalid base URL" },
-                { status: 400 },
-            )
-        }
-
-        // Validate credentials based on provider
-        if (provider === "bedrock") {
-            if (!awsAccessKeyId || !awsSecretAccessKey || !awsRegion) {
-                return NextResponse.json(
-                    {
-                        valid: false,
-                        error: "AWS credentials (Access Key ID, Secret Access Key, Region) are required",
-                    },
-                    { status: 400 },
-                )
-            }
-        } else if (provider === "vertexai") {
-            if (!vertexApiKey) {
-                return NextResponse.json(
-                    {
-                        valid: false,
-                        error: "Vertex AI API key is required for Express Mode",
-                    },
-                    { status: 400 },
-                )
-            }
-        } else if (provider !== "ollama" && provider !== "edgeone" && !apiKey) {
-            return NextResponse.json(
-                { valid: false, error: "API key is required" },
-                { status: 400 },
-            )
-        }
-
-        let model: any
-
-        switch (provider) {
-            case "openai": {
-                const openai = createOpenAI({
-                    apiKey,
-                    ...(baseUrl && { baseURL: baseUrl }),
-                })
-                model = openai.chat(modelId)
-                break
-            }
-
-            case "anthropic": {
-                const anthropic = createAnthropic({
-                    apiKey,
-                    baseURL: baseUrl || "https://api.anthropic.com/v1",
-                })
-                model = anthropic(modelId)
-                break
-            }
-
-            case "google": {
-                const google = createGoogleGenerativeAI({
-                    apiKey,
-                    ...(baseUrl && { baseURL: baseUrl }),
-                })
-                model = google(modelId)
-                break
-            }
-
-            case "vertexai": {
-                const vertex = createVertex({
-                    apiKey: vertexApiKey,
-                    ...(baseUrl && { baseURL: baseUrl }),
-                })
-                model = vertex(modelId)
-                break
-            }
-
-            case "azure": {
-                const azure = createOpenAI({
-                    apiKey,
-                    baseURL: baseUrl,
-                })
-                model = azure.chat(modelId)
-                break
-            }
-
-            case "bedrock": {
-                const bedrock = createAmazonBedrock({
-                    accessKeyId: awsAccessKeyId,
-                    secretAccessKey: awsSecretAccessKey,
-                    region: awsRegion,
-                })
-                model = bedrock(modelId)
-                break
-            }
-
-            case "openrouter": {
-                const openrouter = createOpenRouter({
-                    apiKey,
-                    ...(baseUrl && { baseURL: baseUrl }),
-                })
-                model = openrouter(modelId)
-                break
-            }
-
-            case "deepseek": {
-                if (baseUrl || apiKey) {
-                    const ds = createDeepSeek({
-                        apiKey,
-                        ...(baseUrl && { baseURL: baseUrl }),
-                    })
-                    model = ds(modelId)
-                } else {
-                    model = deepseek(modelId)
-                }
-                break
-            }
-
-            case "siliconflow": {
-                const sf = createOpenAI({
-                    apiKey,
-                    baseURL: baseUrl || "https://api.siliconflow.cn/v1",
-                })
-                model = sf.chat(modelId)
-                break
-            }
-
-            case "ollama": {
-                // SECURITY: Mirror ai-providers.ts guard — only use server
-                // OLLAMA_API_KEY when the URL is also from server config.
-                const ollamaApiKey = baseUrl
-                    ? apiKey || undefined
-                    : apiKey || process.env.OLLAMA_API_KEY || undefined
-                const ollamaProvider = createOllama({
-                    baseURL:
-                        baseUrl ||
-                        process.env.OLLAMA_BASE_URL ||
-                        "https://ollama.com/api",
-                    ...(ollamaApiKey && {
-                        headers: { Authorization: `Bearer ${ollamaApiKey}` },
-                    }),
-                })
-                model = ollamaProvider(modelId)
-                break
-            }
-
-            case "gateway": {
-                const gw = createGateway({
-                    apiKey,
-                    ...(baseUrl && { baseURL: baseUrl }),
-                })
-                model = gw(modelId)
-                break
-            }
-
-            case "edgeone": {
-                // EdgeOne uses OpenAI-compatible API via Edge Functions
-                // Need to pass cookies for EdgeOne Pages authentication
-                const cookieHeader = req.headers.get("cookie") || ""
-                const edgeone = createOpenAI({
-                    apiKey: "edgeone", // EdgeOne doesn't require API key
-                    baseURL: baseUrl || "/api/edgeai",
-                    headers: {
-                        cookie: cookieHeader,
-                    },
-                })
-                model = edgeone.chat(modelId)
-                break
-            }
-
-            case "sglang": {
-                // SGLang is OpenAI-compatible
-                const sglang = createOpenAI({
-                    apiKey: apiKey || "not-needed",
-                    baseURL: baseUrl || "http://127.0.0.1:8000/v1",
-                })
-                model = sglang.chat(modelId)
-                break
-            }
-
-            case "doubao": {
-                // ByteDance Doubao: use DeepSeek for DeepSeek/Kimi models, OpenAI for others
-                const doubaoBaseUrl =
-                    baseUrl || "https://ark.cn-beijing.volces.com/api/v3"
-                const lowerModelId = modelId.toLowerCase()
-                if (
-                    lowerModelId.includes("deepseek") ||
-                    lowerModelId.includes("kimi")
-                ) {
-                    const doubao = createDeepSeek({
-                        apiKey,
-                        baseURL: doubaoBaseUrl,
-                    })
-                    model = doubao(modelId)
-                } else {
-                    const doubao = createOpenAI({
-                        apiKey,
-                        baseURL: doubaoBaseUrl,
-                    })
-                    model = doubao.chat(modelId)
-                }
-                break
-            }
-
-            case "modelscope": {
-                const baseURL =
-                    baseUrl || "https://api-inference.modelscope.cn/v1"
-                const startTime = Date.now()
-
-                try {
-                    // Initiate a streaming request (required for QwQ-32B and certain Qwen3 models)
-                    const response = await fetch(
-                        `${baseURL}/chat/completions`,
-                        {
-                            method: "POST",
-                            headers: {
-                                "Content-Type": "application/json",
-                                Authorization: `Bearer ${apiKey}`,
-                            },
-                            body: JSON.stringify({
-                                model: modelId,
-                                messages: [
-                                    { role: "user", content: "Say 'OK'" },
-                                ],
-                                max_tokens: 20,
-                                stream: true,
-                                enable_thinking: false,
-                            }),
-                        },
-                    )
-
-                    if (!response.ok) {
-                        const errorText = await response.text()
-                        throw new Error(
-                            `ModelScope API error (${response.status}): ${errorText}`,
-                        )
-                    }
-
-                    const contentType =
-                        response.headers.get("content-type") || ""
-                    const isValidStreamingResponse =
-                        response.status === 200 &&
-                        (contentType.includes("text/event-stream") ||
-                            contentType.includes("application/json"))
-
-                    if (!isValidStreamingResponse) {
-                        throw new Error(
-                            `Unexpected response format: ${contentType}`,
-                        )
-                    }
-
-                    const responseTime = Date.now() - startTime
-
-                    if (response.body) {
-                        response.body.cancel().catch(() => {
-                            /* Ignore cancellation errors */
-                        })
-                    }
-
-                    return NextResponse.json({
-                        valid: true,
-                        responseTime,
-                        note: "ModelScope model validated (using streaming API)",
-                    })
-                } catch (error) {
-                    console.error(
-                        "[validate-model] ModelScope validation failed:",
-                        error,
-                    )
-                    throw error
-                }
-            }
-
-            case "minimax": {
-                const rawUrl =
-                    baseUrl ||
-                    PROVIDER_INFO.minimax?.defaultBaseUrl ||
-                    "https://api.minimaxi.com/anthropic"
-                const { baseURL: minimaxBaseUrl, isAnthropicCompatible } =
-                    normalizeMiniMaxBaseURL(rawUrl)
-
-                if (isAnthropicCompatible) {
-                    const minimax = createAnthropic({
-                        apiKey,
-                        baseURL: minimaxBaseUrl,
-                    })
-                    model = minimax.chat(modelId)
-                } else {
-                    const minimax = createOpenAI({
-                        apiKey,
-                        baseURL: minimaxBaseUrl,
-                    })
-                    model = minimax.chat(modelId)
-                }
-                break
-            }
-
-            // GLM, Qwen, Kimi, Qiniu, Novita - OpenAI compatible
-            case "glm":
-            case "qwen":
-            case "kimi":
-            case "qiniu":
-            case "novita": {
-                const baseURL =
-                    baseUrl ||
-                    PROVIDER_INFO[provider as ProviderName]?.defaultBaseUrl ||
-                    ""
-
-                if (!baseURL) {
-                    return NextResponse.json(
-                        {
-                            valid: false,
-                            error: `No base URL configured for provider: ${provider}`,
-                        },
-                        { status: 400 },
-                    )
-                }
-
-                const openai = createOpenAI({
-                    apiKey,
-                    baseURL,
-                })
-                model = openai.chat(modelId)
-                break
-            }
-
-            default:
-                return NextResponse.json(
-                    { valid: false, error: `Unknown provider: ${provider}` },
-                    { status: 400 },
-                )
-        }
-
-        // Make a minimal test request
-        const startTime = Date.now()
-        await generateText({
-            model,
-            prompt: "Say 'OK'",
-            maxOutputTokens: 20,
-        })
-        const responseTime = Date.now() - startTime
-
-        return NextResponse.json({
-            valid: true,
-            responseTime,
-        })
-    } catch (error) {
-        console.error("[validate-model] Error:", error)
-
-        let errorMessage = "Validation failed"
-        if (error instanceof Error) {
-            // Extract meaningful error message
-            if (
-                error.message.includes("401") ||
-                error.message.includes("Unauthorized")
-            ) {
-                errorMessage = "Invalid API key"
-            } else if (
-                error.message.includes("404") ||
-                error.message.includes("not found")
-            ) {
-                errorMessage = "Model not found"
-            } else if (
-                error.message.includes("429") ||
-                error.message.includes("rate limit")
-            ) {
-                errorMessage = "Rate limited - try again later"
-            } else if (error.message.includes("ECONNREFUSED")) {
-                errorMessage = "Cannot connect to server"
-            } else {
-                errorMessage = error.message.slice(0, 100)
-            }
-        }
-
-        return NextResponse.json(
-            { valid: false, error: errorMessage },
-            { status: 200 }, // Return 200 so client can read error message
-        )
-    }
-}

app/api/verify-access-code/route.ts

@@ -1,32 +0,0 @@
-export async function POST(req: Request) {
-    const accessCodes =
-        process.env.ACCESS_CODE_LIST?.split(",")
-            .map((code) => code.trim())
-            .filter(Boolean) || []
-
-    // If no access codes configured, verification always passes
-    if (accessCodes.length === 0) {
-        return Response.json({
-            valid: true,
-            message: "No access code required",
-        })
-    }
-
-    const accessCodeHeader = req.headers.get("x-access-code")
-
-    if (!accessCodeHeader) {
-        return Response.json(
-            { valid: false, message: "Access code is required" },
-            { status: 401 },
-        )
-    }
-
-    if (!accessCodes.includes(accessCodeHeader)) {
-        return Response.json(
-            { valid: false, message: "Invalid access code" },
-            { status: 401 },
-        )
-    }
-
-    return Response.json({ valid: true, message: "Access code is valid" })
-}

app/globals.css

@@ -1,414 +1,123 @@
 @import "tailwindcss";
 
 @plugin "tailwindcss-animate";
-@plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-    --color-background: var(--background);
-    --color-foreground: var(--foreground);
-    --font-sans: var(--font-sans);
-    --font-mono: var(--font-mono);
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
-    --color-ring: var(--ring);
-    --color-input: var(--input);
-    --color-border: var(--border);
-    --color-destructive: var(--destructive);
-    --color-accent-foreground: var(--accent-foreground);
-    --color-accent: var(--accent);
-    --color-muted-foreground: var(--muted-foreground);
-    --color-muted: var(--muted);
-    --color-secondary-foreground: var(--secondary-foreground);
-    --color-secondary: var(--secondary);
-    --color-primary-foreground: var(--primary-foreground);
-    --color-primary: var(--primary);
-    --color-popover-foreground: var(--popover-foreground);
-    --color-popover: var(--popover);
-    --color-card-foreground: var(--card-foreground);
-    --color-card: var(--card);
-    --radius-sm: calc(var(--radius) - 4px);
-    --radius-md: calc(var(--radius) - 2px);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }
 
 :root {
-    --radius: 0.75rem;
-
-    /* Clean Light Modern Palette */
-    --background: oklch(0.985 0.002 240);
-    --foreground: oklch(0.23 0.02 260);
-
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.23 0.02 260);
-
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.23 0.02 260);
-
-    /* Dark primary - slightly lighter */
-    --primary: oklch(0.35 0.01 260);
-    --primary-foreground: oklch(0.99 0 0);
-
-    /* Warm gray secondary */
-    --secondary: oklch(0.96 0.005 260);
-    --secondary-foreground: oklch(0.35 0.02 260);
-
-    /* Light muted tones */
-    --muted: oklch(0.965 0.005 260);
-    --muted-foreground: oklch(0.5 0.02 260);
-
-    /* Soft lavender accent */
-    --accent: oklch(0.94 0.03 280);
-    --accent-foreground: oklch(0.35 0.08 270);
-
-    /* Muted rose destructive */
-    --destructive: oklch(0.45 0.12 10);
-
-    /* Subtle borders */
-    --border: oklch(0.92 0.01 260);
-    --input: oklch(0.94 0.01 260);
-    --ring: oklch(0.25 0.01 260);
-
-    /* Chart colors - harmonious palette */
-    --chart-1: oklch(0.55 0.18 265);
-    --chart-2: oklch(0.65 0.15 170);
-    --chart-3: oklch(0.7 0.18 45);
-    --chart-4: oklch(0.6 0.2 330);
-    --chart-5: oklch(0.5 0.15 200);
-
-    /* Sidebar */
-    --sidebar: oklch(0.99 0.002 260);
-    --sidebar-foreground: oklch(0.23 0.02 260);
-    --sidebar-primary: oklch(0.55 0.18 265);
-    --sidebar-primary-foreground: oklch(0.99 0 0);
-    --sidebar-accent: oklch(0.96 0.02 270);
-    --sidebar-accent-foreground: oklch(0.35 0.05 265);
-    --sidebar-border: oklch(0.93 0.01 260);
-    --sidebar-ring: oklch(0.55 0.18 265);
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-    --background: oklch(0.15 0.015 260);
-    --foreground: oklch(0.95 0.01 260);
-
-    --card: oklch(0.2 0.015 260);
-    --card-foreground: oklch(0.95 0.01 260);
-
-    --popover: oklch(0.2 0.015 260);
-    --popover-foreground: oklch(0.95 0.01 260);
-
-    --primary: oklch(0.7 0.16 265);
-    --primary-foreground: oklch(0.15 0.02 260);
-
-    --secondary: oklch(0.25 0.015 260);
-    --secondary-foreground: oklch(0.9 0.01 260);
-
-    --muted: oklch(0.25 0.015 260);
-    --muted-foreground: oklch(0.65 0.02 260);
-
-    --accent: oklch(0.3 0.04 280);
-    --accent-foreground: oklch(0.9 0.03 270);
-
-    --destructive: oklch(0.55 0.12 10);
-
-    --border: oklch(0.28 0.015 260);
-    --input: oklch(0.25 0.015 260);
-    --ring: oklch(0.7 0.16 265);
-
-    --chart-1: oklch(0.7 0.16 265);
-    --chart-2: oklch(0.7 0.13 170);
-    --chart-3: oklch(0.75 0.16 45);
-    --chart-4: oklch(0.7 0.18 330);
-    --chart-5: oklch(0.6 0.13 200);
-
-    --sidebar: oklch(0.18 0.015 260);
-    --sidebar-foreground: oklch(0.95 0.01 260);
-    --sidebar-primary: oklch(0.7 0.16 265);
-    --sidebar-primary-foreground: oklch(0.15 0.02 260);
-    --sidebar-accent: oklch(0.25 0.03 270);
-    --sidebar-accent-foreground: oklch(0.9 0.02 265);
-    --sidebar-border: oklch(0.28 0.015 260);
-    --sidebar-ring: oklch(0.7 0.16 265);
-}
-
-/* ============================================
-   REFINED MINIMAL DESIGN SYSTEM
-   ============================================ */
-
-:root {
-    /* Surface layers for depth */
-    --surface-0: oklch(1 0 0);
-    --surface-1: oklch(0.985 0.002 240);
-    --surface-2: oklch(0.97 0.004 240);
-    --surface-elevated: oklch(1 0 0);
-
-    /* Subtle borders */
-    --border-subtle: oklch(0.94 0.008 260);
-    --border-default: oklch(0.91 0.012 260);
-
-    /* Interactive states */
-    --interactive-hover: oklch(0.96 0.015 260);
-    --interactive-active: oklch(0.93 0.02 265);
-
-    /* Success state */
-    --success: oklch(0.65 0.18 145);
-    --success-muted: oklch(0.95 0.03 145);
-
-    /* Animation timing */
-    --duration-fast: 120ms;
-    --duration-normal: 200ms;
-    --duration-slow: 300ms;
-    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.dark {
-    --surface-0: oklch(0.15 0.015 260);
-    --surface-1: oklch(0.18 0.015 260);
-    --surface-2: oklch(0.22 0.015 260);
-    --surface-elevated: oklch(0.25 0.015 260);
-
-    --border-subtle: oklch(0.25 0.012 260);
-    --border-default: oklch(0.3 0.015 260);
-
-    --interactive-hover: oklch(0.25 0.02 265);
-    --interactive-active: oklch(0.3 0.025 270);
-
-    --success: oklch(0.7 0.16 145);
-    --success-muted: oklch(0.25 0.04 145);
-}
-
-/* Expose surface colors to Tailwind */
-@theme inline {
-    --color-surface-0: var(--surface-0);
-    --color-surface-1: var(--surface-1);
-    --color-surface-2: var(--surface-2);
-    --color-surface-elevated: var(--surface-elevated);
-    --color-border-subtle: var(--border-subtle);
-    --color-border-default: var(--border-default);
-    --color-interactive-hover: var(--interactive-hover);
-    --color-interactive-active: var(--interactive-active);
-    --color-success: var(--success);
-    --color-success-muted: var(--success-muted);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @layer base {
-    * {
-        @apply border-border outline-ring/50;
-    }
-    body {
-        @apply bg-background text-foreground font-sans;
-    }
-}
-
-/* Fix for Radix ScrollArea viewport horizontal overflow */
-[data-slot="scroll-area-viewport"] > div {
-    display: block !important;
-    width: 100% !important;
-}
-
-/* Custom scrollbar */
-@layer utilities {
-    .scrollbar-thin {
-        scrollbar-width: thin;
-        scrollbar-color: oklch(0.85 0.01 260) transparent;
-    }
-
-    .scrollbar-thin::-webkit-scrollbar {
-        width: 6px;
-    }
-
-    .scrollbar-thin::-webkit-scrollbar-track {
-        background: transparent;
-    }
-
-    .scrollbar-thin::-webkit-scrollbar-thumb {
-        background-color: oklch(0.85 0.01 260);
-        border-radius: 3px;
-    }
-
-    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-        background-color: oklch(0.75 0.01 260);
-    }
-
-    /* Dark mode scrollbar */
-    .dark .scrollbar-thin {
-        scrollbar-color: oklch(0.35 0.015 260) transparent;
-    }
-
-    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
-        background-color: oklch(0.35 0.015 260);
-    }
-
-    .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-        background-color: oklch(0.45 0.015 260);
-    }
-}
-
-/* Smooth page transitions */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(8px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes slideInRight {
-    from {
-        opacity: 0;
-        transform: translateX(16px);
-    }
-    to {
-        opacity: 1;
-        transform: translateX(0);
-    }
-}
-
-.animate-fade-in {
-    animation: fadeIn 0.3s ease-out forwards;
-}
-
-.animate-slide-in-right {
-    animation: slideInRight 0.3s ease-out forwards;
-}
-
-/* Message bubble animations */
-@keyframes messageIn {
-    from {
-        opacity: 0;
-        transform: translateY(12px) scale(0.98);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-.animate-message-in {
-    animation: messageIn 0.25s ease-out forwards;
-}
-
-/* Subtle floating shadow for cards */
-.shadow-soft {
-    box-shadow:
-        0 1px 2px oklch(0.23 0.02 260 / 0.04),
-        0 4px 12px oklch(0.23 0.02 260 / 0.06),
-        0 8px 24px oklch(0.23 0.02 260 / 0.04);
-}
-
-.shadow-soft-lg {
-    box-shadow:
-        0 2px 4px oklch(0.23 0.02 260 / 0.04),
-        0 8px 20px oklch(0.23 0.02 260 / 0.08),
-        0 16px 40px oklch(0.23 0.02 260 / 0.06);
-}
-
-/* Gradient text utility */
-.text-gradient-primary {
-    background: linear-gradient(
-        135deg,
-        oklch(0.55 0.18 265),
-        oklch(0.6 0.2 290)
-    );
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-/* ============================================
-   REFINED DIALOG STYLES
-   ============================================ */
-
-/* Refined dialog shadow - multi-layer soft shadow */
-.shadow-dialog {
-    box-shadow:
-        0 0 0 1px oklch(0 0 0 / 0.03),
-        0 2px 4px oklch(0 0 0 / 0.02),
-        0 12px 24px oklch(0 0 0 / 0.06),
-        0 24px 48px oklch(0 0 0 / 0.04);
-}
-
-.dark .shadow-dialog {
-    box-shadow:
-        0 0 0 1px oklch(1 0 0 / 0.05),
-        0 2px 4px oklch(0 0 0 / 0.2),
-        0 12px 24px oklch(0 0 0 / 0.3),
-        0 24px 48px oklch(0 0 0 / 0.2);
-}
-
-/* Dialog animations */
-@keyframes dialog-in {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -48%) scale(0.96);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-}
-
-@keyframes dialog-out {
-    from {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: translate(-50%, -48%) scale(0.96);
-    }
-}
-
-.animate-dialog-in {
-    animation: dialog-in var(--duration-normal) var(--ease-out) forwards;
-}
-
-.animate-dialog-out {
-    animation: dialog-out 150ms var(--ease-out) forwards;
-}
-
-/* Check pop animation for validation success */
-@keyframes check-pop {
-    0% {
-        transform: scale(0.8);
-        opacity: 0;
-    }
-    50% {
-        transform: scale(1.1);
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-.animate-check-pop {
-    animation: check-pop 0.25s var(--ease-spring) forwards;
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-    .animate-dialog-in,
-    .animate-dialog-out,
-    .animate-check-pop {
-        animation: none;
-    }
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

app/layout.tsx

@@ -0,0 +1,101 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { Analytics } from "@vercel/analytics/react";
+import { DiagramProvider } from "@/contexts/diagram-context";
+
+import "./globals.css";
+
+const geistSans = Geist({
+    variable: "--font-geist-sans",
+    subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+    title: "Next AI Draw.io - AI-Powered Diagram Generator",
+    description: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
+    keywords: ["AI diagram generator", "AWS architecture", "flowchart creator", "draw.io", "AI drawing tool", "technical diagrams", "diagram automation", "free diagram generator", "online diagram maker"],
+    authors: [{ name: "Next AI Draw.io" }],
+    creator: "Next AI Draw.io",
+    publisher: "Next AI Draw.io",
+    metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
+    openGraph: {
+        title: "Next AI Draw.io - AI Diagram Generator",
+        description: "Create professional diagrams with AI assistance. Supports AWS architecture, flowcharts, and more.",
+        type: "website",
+        url: "https://next-ai-drawio.jiang.jp",
+        siteName: "Next AI Draw.io",
+        locale: "en_US",
+        images: [
+            {
+                url: "/architecture.png",
+                width: 1200,
+                height: 630,
+                alt: "Next AI Draw.io - AI-powered diagram creation tool",
+            },
+        ],
+    },
+    twitter: {
+        card: "summary_large_image",
+        title: "Next AI Draw.io - AI Diagram Generator",
+        description: "Create professional diagrams with AI assistance. Free, no login required.",
+        images: ["/architecture.png"],
+    },
+    robots: {
+        index: true,
+        follow: true,
+        googleBot: {
+            index: true,
+            follow: true,
+            "max-video-preview": -1,
+            "max-image-preview": "large",
+            "max-snippet": -1,
+        },
+    },
+    icons: {
+        icon: "/favicon.ico",
+    },
+};
+
+export default function RootLayout({
+    children,
+}: Readonly<{
+    children: React.ReactNode;
+}>) {
+    const jsonLd = {
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareApplication',
+        name: 'Next AI Draw.io',
+        applicationCategory: 'DesignApplication',
+        operatingSystem: 'Web Browser',
+        description: 'AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.',
+        url: 'https://next-ai-drawio.jiang.jp',
+        offers: {
+            '@type': 'Offer',
+            price: '0',
+            priceCurrency: 'USD',
+        },
+    };
+
+    return (
+        <html lang="en">
+            <head>
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+                />
+            </head>
+            <body
+                className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+            >
+                <DiagramProvider>{children}</DiagramProvider>
+
+                <Analytics />
+            </body>
+        </html>
+    );
+}

app/manifest.ts

@@ -1,28 +0,0 @@
-import type { MetadataRoute } from "next"
-import { getAssetUrl } from "@/lib/base-path"
-export default function manifest(): MetadataRoute.Manifest {
-    return {
-        name: "Next AI Draw.io",
-        short_name: "AIDraw.io",
-        description:
-            "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
-        start_url: getAssetUrl("/"),
-        display: "standalone",
-        background_color: "#f9fafb",
-        theme_color: "#171d26",
-        icons: [
-            {
-                src: getAssetUrl("/favicon-192x192.png"),
-                sizes: "192x192",
-                type: "image/png",
-                purpose: "any",
-            },
-            {
-                src: getAssetUrl("/favicon-512x512.png"),
-                sizes: "512x512",
-                type: "image/png",
-                purpose: "any",
-            },
-        ],
-    }
-}

app/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { DrawIoEmbed } from "react-drawio";
+import ChatPanel from "@/components/chat-panel";
+import { useDiagram } from "@/contexts/diagram-context";
+
+export default function Home() {
+    const { drawioRef, handleDiagramExport } = useDiagram();
+    const [isMobile, setIsMobile] = useState(false);
+    const [isChatVisible, setIsChatVisible] = useState(true);
+
+    useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+
+        // Check on mount
+        checkMobile();
+
+        // Add event listener for resize
+        window.addEventListener("resize", checkMobile);
+
+        // Cleanup
+        return () => window.removeEventListener("resize", checkMobile);
+    }, []);
+
+    // Add keyboard shortcut for toggling chat panel (Ctrl+B)
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if ((event.ctrlKey || event.metaKey) && event.key === 'b') {
+                event.preventDefault();
+                setIsChatVisible((prev) => !prev);
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+
+    return (
+        <div className="flex h-screen bg-gray-100 relative">
+            {/* Mobile warning overlay - keeps components mounted */}
+            {isMobile && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-gray-100">
+                    <div className="text-center p-8">
+                        <h1 className="text-2xl font-semibold text-gray-800">
+                            Please open this application on a desktop or laptop
+                        </h1>
+                    </div>
+                </div>
+            )}
+
+            <div className={`${isChatVisible ? 'w-2/3' : 'w-full'} p-1 h-full relative transition-all duration-300 ease-in-out`}>
+                <DrawIoEmbed
+                    ref={drawioRef}
+                    onExport={handleDiagramExport}
+                    urlParameters={{
+                        spin: true,
+                        libraries: false,
+                        saveAndExit: false,
+                        noExitBtn: true,
+                    }}
+                />
+            </div>
+            <div className={`${isChatVisible ? 'w-1/3' : 'w-12'} h-full p-1 transition-all duration-300 ease-in-out`}>
+                <ChatPanel
+                    isVisible={isChatVisible}
+                    onToggleVisibility={() => setIsChatVisible(!isChatVisible)}
+                />
+            </div>
+        </div>
+    );
+}

app/robots.ts

@@ -1,12 +1,12 @@
-import type { MetadataRoute } from "next"
+import { MetadataRoute } from 'next'
 
 export default function robots(): MetadataRoute.Robots {
     return {
         rules: {
-            userAgent: "*",
-            allow: "/",
-            disallow: "/api/",
+            userAgent: '*',
+            allow: '/',
+            disallow: '/api/',
         },
-        sitemap: "https://next-ai-drawio.jiang.jp/sitemap.xml",
+        sitemap: 'https://next-ai-drawio.jiang.jp/sitemap.xml',
     }
 }

app/sitemap.ts

@@ -1,17 +1,17 @@
-import type { MetadataRoute } from "next"
+import { MetadataRoute } from 'next'
 
 export default function sitemap(): MetadataRoute.Sitemap {
     return [
         {
-            url: "https://next-ai-drawio.jiang.jp",
+            url: 'https://next-ai-drawio.jiang.jp',
             lastModified: new Date(),
-            changeFrequency: "weekly",
+            changeFrequency: 'weekly',
             priority: 1,
         },
         {
-            url: "https://next-ai-drawio.jiang.jp/about",
+            url: 'https://next-ai-drawio.jiang.jp/about',
             lastModified: new Date(),
-            changeFrequency: "monthly",
+            changeFrequency: 'monthly',
             priority: 0.8,
         },
     ]

biome.json

@@ -1,83 +0,0 @@
-{
-    "$schema": "https://biomejs.dev/schemas/2.4.4/schema.json",
-    "vcs": {
-        "enabled": true,
-        "clientKind": "git",
-        "useIgnoreFile": true
-    },
-    "files": {
-        "ignoreUnknown": false
-    },
-    "formatter": {
-        "enabled": true,
-        "indentStyle": "space",
-        "indentWidth": 4
-    },
-    "linter": {
-        "enabled": true,
-        "rules": {
-            "recommended": true,
-            "complexity": {
-                "noImportantStyles": "off"
-            },
-            "suspicious": {
-                "noExplicitAny": "off",
-                "noArrayIndexKey": "off",
-                "noImplicitAnyLet": "off",
-                "noAssignInExpressions": "off"
-            },
-            "a11y": {
-                "useButtonType": "off",
-                "noAutofocus": "off",
-                "noStaticElementInteractions": "off",
-                "useKeyWithClickEvents": "off",
-                "noLabelWithoutControl": "off",
-                "noNoninteractiveTabindex": "off"
-            },
-            "correctness": {
-                "useExhaustiveDependencies": "off"
-            },
-            "style": {
-                "useNodejsImportProtocol": "off",
-                "useTemplate": "off"
-            },
-            "security": {
-                "noDangerouslySetInnerHtml": "off"
-            }
-        }
-    },
-    "javascript": {
-        "formatter": {
-            "quoteStyle": "double",
-            "semicolons": "asNeeded"
-        }
-    },
-    "css": {
-        "parser": {
-            "cssModules": true,
-            "tailwindDirectives": true
-        }
-    },
-    "assist": {
-        "enabled": true,
-        "actions": {
-            "source": {
-                "organizeImports": "on"
-            }
-        }
-    },
-    "overrides": [
-        {
-            "includes": ["components/ui/**"],
-            "formatter": {
-                "enabled": false
-            },
-            "linter": {
-                "enabled": false
-            },
-            "assist": {
-                "enabled": false
-            }
-        }
-    ]
-}

components.json

@@ -1,21 +1,21 @@
 {
-    "$schema": "https://ui.shadcn.com/schema.json",
-    "style": "new-york",
-    "rsc": true,
-    "tsx": true,
-    "tailwind": {
-        "config": "",
-        "css": "app/globals.css",
-        "baseColor": "neutral",
-        "cssVariables": true,
-        "prefix": ""
-    },
-    "aliases": {
-        "components": "@/components",
-        "utils": "@/lib/utils",
-        "ui": "@/components/ui",
-        "lib": "@/lib",
-        "hooks": "@/hooks"
-    },
-    "iconLibrary": "lucide"
-}
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/ai-elements/model-selector.tsx

@@ -1,238 +0,0 @@
-import { Cloud } from "lucide-react"
-import type { ComponentProps, ElementRef, ReactNode } from "react"
-import { useEffect, useRef, useState } from "react"
-import {
-    Command,
-    CommandDialog,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-    CommandSeparator,
-    CommandShortcut,
-} from "@/components/ui/command"
-import {
-    Dialog,
-    DialogContent,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog"
-import { cn } from "@/lib/utils"
-
-export type ModelSelectorProps = ComponentProps<typeof Dialog>
-
-export const ModelSelector = (props: ModelSelectorProps) => (
-    <Dialog {...props} />
-)
-
-export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>
-
-export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
-    <DialogTrigger {...props} />
-)
-
-export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
-    title?: ReactNode
-}
-
-export const ModelSelectorContent = ({
-    className,
-    children,
-    title = "Model Selector",
-    ...props
-}: ModelSelectorContentProps) => (
-    <DialogContent className={cn("p-0", className)} {...props}>
-        <DialogTitle className="sr-only">{title}</DialogTitle>
-        <Command className="**:data-[slot=command-input-wrapper]:h-auto">
-            {children}
-        </Command>
-    </DialogContent>
-)
-
-export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>
-
-export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
-    <CommandDialog {...props} />
-)
-
-export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>
-
-export const ModelSelectorInput = ({
-    className,
-    ...props
-}: ModelSelectorInputProps) => (
-    <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
-)
-
-export type ModelSelectorListProps = ComponentProps<typeof CommandList>
-
-export const ModelSelectorList = ({
-    className,
-    ...props
-}: ModelSelectorListProps) => {
-    const listRef = useRef<ElementRef<typeof CommandList>>(null)
-    const [showShadow, setShowShadow] = useState(false)
-
-    useEffect(() => {
-        const listElement = listRef.current
-        if (!listElement) return
-
-        const checkScroll = () => {
-            const { scrollTop, scrollHeight, clientHeight } = listElement
-            // Show shadow if there is more content below
-            // Using a small threshold to handle fractional pixel rendering
-            setShowShadow(
-                scrollHeight > Math.ceil(scrollTop + clientHeight) + 1,
-            )
-        }
-
-        // Initial check
-        checkScroll()
-
-        // Event listeners
-        listElement.addEventListener("scroll", checkScroll)
-        window.addEventListener("resize", checkScroll)
-
-        // Observe content changes (e.g. async loading of items)
-        const observer = new MutationObserver(checkScroll)
-        observer.observe(listElement, { childList: true, subtree: true })
-
-        return () => {
-            listElement.removeEventListener("scroll", checkScroll)
-            window.removeEventListener("resize", checkScroll)
-            observer.disconnect()
-        }
-    }, [])
-
-    return (
-        <div className="relative">
-            <CommandList
-                ref={listRef}
-                className={cn(
-                    // Hide scrollbar on all platforms
-                    "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
-                    className,
-                )}
-                {...props}
-            />
-            {/* Bottom shadow indicator for scrollable content */}
-            <div
-                className={cn(
-                    "pointer-events-none absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-muted/80 via-muted/40 to-transparent transition-opacity duration-200",
-                    showShadow ? "opacity-100" : "opacity-0",
-                )}
-            />
-        </div>
-    )
-}
-
-export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>
-
-export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
-    <CommandEmpty {...props} />
-)
-
-export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>
-
-export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
-    <CommandGroup {...props} />
-)
-
-export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>
-
-export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
-    <CommandItem {...props} />
-)
-
-export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>
-
-export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
-    <CommandShortcut {...props} />
-)
-
-export type ModelSelectorSeparatorProps = ComponentProps<
-    typeof CommandSeparator
->
-
-export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
-    <CommandSeparator {...props} />
-)
-
-export type ModelSelectorLogoProps = Omit<
-    ComponentProps<"img">,
-    "src" | "alt"
-> & {
-    provider: string
-}
-
-export const ModelSelectorLogo = ({
-    provider,
-    className,
-    ...props
-}: ModelSelectorLogoProps) => {
-    // Use Lucide icon for bedrock since models.dev doesn't have a good AWS icon
-    if (provider === "amazon-bedrock") {
-        return <Cloud className={cn("size-4", className)} />
-    }
-
-    return (
-        // biome-ignore lint/performance/noImgElement: External URL from models.dev
-        <img
-            {...props}
-            alt={`${provider} logo`}
-            className={cn("size-4 dark:invert", className)}
-            height={16}
-            src={`https://models.dev/logos/${provider}.svg`}
-            width={16}
-        />
-    )
-}
-
-export type ModelSelectorLogoGroupProps = ComponentProps<"div">
-
-export const ModelSelectorLogoGroup = ({
-    className,
-    ...props
-}: ModelSelectorLogoGroupProps) => (
-    <div
-        className={cn(
-            "-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
-            className,
-        )}
-        {...props}
-    />
-)
-
-export type ModelSelectorNameProps = ComponentProps<"span">
-
-export const ModelSelectorName = ({
-    className,
-    ...props
-}: ModelSelectorNameProps) => (
-    <span className={cn("flex-1 truncate text-left", className)} {...props} />
-)
-
-export type ModelSelectorSectionHeaderProps = {
-    icon: ReactNode
-    label: string
-    className?: string
-}
-
-export const ModelSelectorSectionHeader = ({
-    icon,
-    label,
-    className,
-}: ModelSelectorSectionHeaderProps) => (
-    <div
-        className={cn(
-            "flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted/40 rounded-sm mx-1 mt-1",
-            className,
-        )}
-    >
-        <span className="[&>svg]:size-3.5" aria-hidden="true">
-            {icon}
-        </span>
-        <span>{label}</span>
-    </div>
-)

components/ai-elements/reasoning.tsx

@@ -1,186 +0,0 @@
-"use client"
-
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
-import { BrainIcon, ChevronDownIcon } from "lucide-react"
-import type { ComponentProps, ReactNode } from "react"
-import { createContext, memo, useContext, useEffect, useState } from "react"
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import { cn } from "@/lib/utils"
-import { Shimmer } from "./shimmer"
-
-type ReasoningContextValue = {
-    isStreaming: boolean
-    isOpen: boolean
-    setIsOpen: (open: boolean) => void
-    duration: number | undefined
-}
-
-const ReasoningContext = createContext<ReasoningContextValue | null>(null)
-
-export const useReasoning = () => {
-    const context = useContext(ReasoningContext)
-    if (!context) {
-        throw new Error("Reasoning components must be used within Reasoning")
-    }
-    return context
-}
-
-export type ReasoningProps = ComponentProps<typeof Collapsible> & {
-    isStreaming?: boolean
-    open?: boolean
-    defaultOpen?: boolean
-    onOpenChange?: (open: boolean) => void
-    duration?: number
-}
-
-const AUTO_CLOSE_DELAY = 1000
-const MS_IN_S = 1000
-
-export const Reasoning = memo(
-    ({
-        className,
-        isStreaming = false,
-        open,
-        defaultOpen = true,
-        onOpenChange,
-        duration: durationProp,
-        children,
-        ...props
-    }: ReasoningProps) => {
-        const [isOpen, setIsOpen] = useControllableState({
-            prop: open,
-            defaultProp: defaultOpen,
-            onChange: onOpenChange,
-        })
-        const [duration, setDuration] = useControllableState({
-            prop: durationProp,
-            defaultProp: undefined,
-        })
-
-        const [hasAutoClosed, setHasAutoClosed] = useState(false)
-        const [startTime, setStartTime] = useState<number | null>(null)
-
-        // Track duration when streaming starts and ends
-        useEffect(() => {
-            if (isStreaming) {
-                if (startTime === null) {
-                    setStartTime(Date.now())
-                }
-            } else if (startTime !== null) {
-                setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S))
-                setStartTime(null)
-            }
-        }, [isStreaming, startTime, setDuration])
-
-        // Auto-open when streaming starts, auto-close when streaming ends (once only)
-        useEffect(() => {
-            if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
-                // Add a small delay before closing to allow user to see the content
-                const timer = setTimeout(() => {
-                    setIsOpen(false)
-                    setHasAutoClosed(true)
-                }, AUTO_CLOSE_DELAY)
-
-                return () => clearTimeout(timer)
-            }
-        }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed])
-
-        const handleOpenChange = (newOpen: boolean) => {
-            setIsOpen(newOpen)
-        }
-
-        return (
-            <ReasoningContext.Provider
-                value={{ isStreaming, isOpen, setIsOpen, duration }}
-            >
-                <Collapsible
-                    className={cn("not-prose mb-4", className)}
-                    onOpenChange={handleOpenChange}
-                    open={isOpen}
-                    {...props}
-                >
-                    {children}
-                </Collapsible>
-            </ReasoningContext.Provider>
-        )
-    },
-)
-
-export type ReasoningTriggerProps = ComponentProps<
-    typeof CollapsibleTrigger
-> & {
-    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode
-}
-
-const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
-    if (isStreaming || duration === 0) {
-        return <Shimmer duration={1}>Thinking...</Shimmer>
-    }
-    if (duration === undefined) {
-        return <p>Thought for a few seconds</p>
-    }
-    return <p>Thought for {duration} seconds</p>
-}
-
-export const ReasoningTrigger = memo(
-    ({
-        className,
-        children,
-        getThinkingMessage = defaultGetThinkingMessage,
-        ...props
-    }: ReasoningTriggerProps) => {
-        const { isStreaming, isOpen, duration } = useReasoning()
-
-        return (
-            <CollapsibleTrigger
-                className={cn(
-                    "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
-                    className,
-                )}
-                {...props}
-            >
-                {children ?? (
-                    <>
-                        <BrainIcon className="size-4" />
-                        {getThinkingMessage(isStreaming, duration)}
-                        <ChevronDownIcon
-                            className={cn(
-                                "size-4 transition-transform",
-                                isOpen ? "rotate-180" : "rotate-0",
-                            )}
-                        />
-                    </>
-                )}
-            </CollapsibleTrigger>
-        )
-    },
-)
-
-export type ReasoningContentProps = ComponentProps<
-    typeof CollapsibleContent
-> & {
-    children: string
-}
-
-export const ReasoningContent = memo(
-    ({ className, children, ...props }: ReasoningContentProps) => (
-        <CollapsibleContent
-            className={cn(
-                "mt-4 text-sm",
-                "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
-                className,
-            )}
-            {...props}
-        >
-            <div className="whitespace-pre-wrap">{children}</div>
-        </CollapsibleContent>
-    ),
-)
-
-Reasoning.displayName = "Reasoning"
-ReasoningTrigger.displayName = "ReasoningTrigger"
-ReasoningContent.displayName = "ReasoningContent"

components/ai-elements/shimmer.tsx

@@ -1,64 +0,0 @@
-"use client"
-
-import { motion } from "motion/react"
-import {
-    type CSSProperties,
-    type ElementType,
-    type JSX,
-    memo,
-    useMemo,
-} from "react"
-import { cn } from "@/lib/utils"
-
-export type TextShimmerProps = {
-    children: string
-    as?: ElementType
-    className?: string
-    duration?: number
-    spread?: number
-}
-
-const ShimmerComponent = ({
-    children,
-    as: Component = "p",
-    className,
-    duration = 2,
-    spread = 2,
-}: TextShimmerProps) => {
-    const MotionComponent = motion.create(
-        Component as keyof JSX.IntrinsicElements,
-    )
-
-    const dynamicSpread = useMemo(
-        () => (children?.length ?? 0) * spread,
-        [children, spread],
-    )
-
-    return (
-        <MotionComponent
-            animate={{ backgroundPosition: "0% center" }}
-            className={cn(
-                "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
-                "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
-                className,
-            )}
-            initial={{ backgroundPosition: "100% center" }}
-            style={
-                {
-                    "--spread": `${dynamicSpread}px`,
-                    backgroundImage:
-                        "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
-                } as CSSProperties
-            }
-            transition={{
-                repeat: Number.POSITIVE_INFINITY,
-                duration,
-                ease: "linear",
-            }}
-        >
-            {children}
-        </MotionComponent>
-    )
-}
-
-export const Shimmer = memo(ShimmerComponent)

components/button-with-tooltip.tsx

@@ -1,19 +1,19 @@
-import type { VariantProps } from "class-variance-authority"
-import type React from "react"
-import { Button, type buttonVariants } from "@/components/ui/button"
+import React from "react";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
     Tooltip,
     TooltipContent,
     TooltipProvider,
     TooltipTrigger,
-} from "@/components/ui/tooltip"
+} from "@/components/ui/tooltip";
+import { type VariantProps } from "class-variance-authority";
 
 interface ButtonWithTooltipProps
     extends React.ComponentProps<"button">,
         VariantProps<typeof buttonVariants> {
-    tooltipContent: string
-    children: React.ReactNode
-    asChild?: boolean
+    tooltipContent: string;
+    children: React.ReactNode;
+    asChild?: boolean;
 }
 
 export function ButtonWithTooltip({
@@ -27,10 +27,8 @@ export function ButtonWithTooltip({
                 <TooltipTrigger asChild>
                     <Button {...buttonProps}>{children}</Button>
                 </TooltipTrigger>
-                <TooltipContent className="max-w-xs text-wrap">
-                    {tooltipContent}
-                </TooltipContent>
+                <TooltipContent>{tooltipContent}</TooltipContent>
             </Tooltip>
         </TooltipProvider>
-    )
+    );
 }

components/chat-example-panel.tsx

@@ -1,227 +1,82 @@
-"use client"
-
-import {
-    Cloud,
-    FileText,
-    GitBranch,
-    Palette,
-    Terminal,
-    Zap,
-} from "lucide-react"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { getAssetUrl } from "@/lib/base-path"
-
-interface ExampleCardProps {
-    icon: React.ReactNode
-    title: string
-    description: string
-    onClick: () => void
-    isNew?: boolean
-}
-
-function ExampleCard({
-    icon,
-    title,
-    description,
-    onClick,
-    isNew,
-}: ExampleCardProps) {
-    const dict = useDictionary()
-
-    return (
-        <button
-            onClick={onClick}
-            className={`group w-full text-left p-4 rounded-xl border bg-card hover:bg-accent/50 hover:border-primary/30 transition-all duration-200 hover:shadow-sm ${
-                isNew
-                    ? "border-primary/40 ring-1 ring-primary/20"
-                    : "border-border/60"
-            }`}
-        >
-            <div className="flex items-start gap-3">
-                <div
-                    className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 transition-colors ${
-                        isNew
-                            ? "bg-primary/20 group-hover:bg-primary/25"
-                            : "bg-primary/10 group-hover:bg-primary/15"
-                    }`}
-                >
-                    {icon}
-                </div>
-                <div className="min-w-0">
-                    <div className="flex items-center gap-2">
-                        <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
-                            {title}
-                        </h3>
-                        {isNew && (
-                            <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-primary text-primary-foreground rounded">
-                                {dict.common.new}
-                            </span>
-                        )}
-                    </div>
-                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
-                        {description}
-                    </p>
-                </div>
-            </div>
-        </button>
-    )
-}
-
 export default function ExamplePanel({
     setInput,
     setFiles,
-    minimal = false,
 }: {
-    setInput: (input: string) => void
-    setFiles: (files: File[]) => void
-    minimal?: boolean
+    setInput: (input: string) => void;
+    setFiles: (files: File[]) => void;
 }) {
-    const dict = useDictionary()
-
+    // New handler for the "Replicate this flowchart" button
     const handleReplicateFlowchart = async () => {
-        setInput("Replicate this flowchart.")
+        setInput("Replicate this flowchart.");
 
         try {
-            const response = await fetch(getAssetUrl("/example.png"))
-            const blob = await response.blob()
-            const file = new File([blob], "example.png", { type: "image/png" })
-            setFiles([file])
+            // Fetch the example image
+            const response = await fetch("/example.png");
+            const blob = await response.blob();
+            const file = new File([blob], "example.png", { type: "image/png" });
+
+            // Set the file to the files state
+            setFiles([file]);
         } catch (error) {
-            console.error(dict.errors.failedToLoadExample, error)
+            console.error("Error loading example image:", error);
         }
-    }
+    };
 
+    // Handler for the "Replicate this in aws style" button
     const handleReplicateArchitecture = async () => {
-        setInput("Replicate this in aws style")
+        setInput("Replicate this in aws style");
 
         try {
-            const response = await fetch(getAssetUrl("/architecture.png"))
-            const blob = await response.blob()
+            // Fetch the architecture image
+            const response = await fetch("/architecture.png");
+            const blob = await response.blob();
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
-            })
-            setFiles([file])
+            });
+
+            // Set the file to the files state
+            setFiles([file]);
         } catch (error) {
-            console.error(dict.errors.failedToLoadExample, error)
+            console.error("Error loading architecture image:", error);
         }
-    }
-
-    const handlePdfExample = async () => {
-        setInput("Summarize this paper as a diagram")
-
-        try {
-            const response = await fetch(getAssetUrl("/chain-of-thought.txt"))
-            const blob = await response.blob()
-            const file = new File([blob], "chain-of-thought.txt", {
-                type: "text/plain",
-            })
-            setFiles([file])
-        } catch (error) {
-            console.error(dict.errors.failedToLoadExample, error)
-        }
-    }
-
+    };
     return (
-        <div className={minimal ? "" : "py-6 px-2 animate-fade-in"}>
-            {!minimal && (
-                <>
-                    {/* MCP Server Notice */}
-                    <a
-                        href="https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="block mb-4 p-3 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 hover:border-purple-500/40 transition-colors group"
-                    >
-                        <div className="flex items-center gap-3">
-                            <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
-                                <Terminal className="w-4 h-4 text-purple-500" />
-                            </div>
-                            <div className="min-w-0">
-                                <div className="flex items-center gap-2">
-                                    <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
-                                        {dict.examples.mcpServer}
-                                    </span>
-                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
-                                        {dict.examples.preview}
-                                    </span>
-                                </div>
-                                <p className="text-xs text-muted-foreground">
-                                    {dict.examples.mcpDescription}
-                                </p>
-                            </div>
-                        </div>
-                    </a>
-
-                    {/* Welcome section */}
-                    <div className="text-center mb-6">
-                        <h2 className="text-lg font-semibold text-foreground mb-2">
-                            {dict.examples.title}
-                        </h2>
-                        <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-                            {dict.examples.subtitle}
-                        </p>
-                    </div>
-                </>
-            )}
-
-            {/* Examples grid */}
-            <div className="space-y-3">
-                {!minimal && (
-                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
-                        {dict.examples.quickExamples}
-                    </p>
-                )}
-
-                <div className="grid gap-2">
-                    <ExampleCard
-                        icon={<FileText className="w-4 h-4 text-primary" />}
-                        title={dict.examples.paperToDiagram}
-                        description={dict.examples.paperDescription}
-                        onClick={handlePdfExample}
-                        isNew
-                    />
-
-                    <ExampleCard
-                        icon={<Zap className="w-4 h-4 text-primary" />}
-                        title={dict.examples.animatedDiagram}
-                        description={dict.examples.animatedDescription}
-                        onClick={() => {
-                            setInput(
-                                "Give me a **animated connector** diagram of transformer's architecture",
-                            )
-                            setFiles([])
-                        }}
-                    />
-
-                    <ExampleCard
-                        icon={<Cloud className="w-4 h-4 text-primary" />}
-                        title={dict.examples.awsArchitecture}
-                        description={dict.examples.awsDescription}
-                        onClick={handleReplicateArchitecture}
-                    />
-
-                    <ExampleCard
-                        icon={<GitBranch className="w-4 h-4 text-primary" />}
-                        title={dict.examples.replicateFlowchart}
-                        description={dict.examples.replicateDescription}
-                        onClick={handleReplicateFlowchart}
-                    />
-
-                    <ExampleCard
-                        icon={<Palette className="w-4 h-4 text-primary" />}
-                        title={dict.examples.creativeDrawing}
-                        description={dict.examples.creativeDescription}
-                        onClick={() => {
-                            setInput("Draw a cat for me")
-                            setFiles([])
-                        }}
-                    />
-                </div>
-
-                <p className="text-[11px] text-muted-foreground/60 text-center mt-4">
-                    {dict.examples.cachedNote}
-                </p>
+        <div className="px-4 py-2 border-t border-b border-gray-100">
+            <p className="text-sm text-gray-500 mb-2">
+                {" "}
+                Start a conversation to generate or modify diagrams.
+            </p>
+            <p className="text-sm text-gray-500 mb-2">
+                {" "}
+                You can also upload images to use as references.
+            </p>
+            <p className="text-sm text-gray-500 mb-2">Try these examples:</p>
+            <div className="flex flex-wrap gap-5">
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={() => setInput("Give me a **animated connector** diagram of transformer's architecture")}
+                >
+                    Draw diagram with Animated Connectors
+                </button>
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={handleReplicateArchitecture}
+                >
+                    Create AWS architecture
+                </button>
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={handleReplicateFlowchart}
+                >
+                    Replicate flowchart
+                </button>
+                <button
+                    className="text-xs bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-1 px-2 rounded"
+                    onClick={() => setInput("Draw a cat for me")}
+                >
+                    Draw a cat
+                </button>
             </div>
         </div>
-    )
+    );
 }

components/chat-input.tsx

@@ -1,638 +1,280 @@
-"use client"
+"use client";
 
+import React, { useCallback, useRef, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { ResetWarningModal } from "@/components/reset-warning-modal";
 import {
-    BookmarkPlus,
-    Download,
-    History,
-    Image as ImageIcon,
-    Link,
+    Loader2,
     Send,
-    Square,
-} from "lucide-react"
-import type React from "react"
-import {
-    forwardRef,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from "react"
-import { toast } from "sonner"
-import { ButtonWithTooltip } from "@/components/button-with-tooltip"
-import { TemplateCreateDialog } from "@/components/chat/TemplateCreateDialog"
-import { ErrorToast } from "@/components/error-toast"
-import { HistoryDialog } from "@/components/history-dialog"
-import { ModelSelector } from "@/components/model-selector"
-import { SaveDialog } from "@/components/save-dialog"
-
-import { Button } from "@/components/ui/button"
-import { Textarea } from "@/components/ui/textarea"
-import { UrlInputDialog } from "@/components/url-input-dialog"
-import { useDiagram } from "@/contexts/diagram-context"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { formatMessage } from "@/lib/i18n/utils"
-import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
-import { STORAGE_KEYS } from "@/lib/storage"
-import type { FlattenedModel } from "@/lib/types/model-config"
-import { extractUrlContent, type UrlData } from "@/lib/url-utils"
-import { isRealDiagram } from "@/lib/utils"
-import { FilePreviewList } from "./file-preview-list"
-
-const MAX_IMAGE_SIZE = 2 * 1024 * 1024 // 2MB
-const MAX_FILES = 5
-
-function isValidFileType(file: File): boolean {
-    return file.type.startsWith("image/") || isPdfFile(file) || isTextFile(file)
-}
-
-function formatFileSize(bytes: number): string {
-    const mb = bytes / 1024 / 1024
-    if (mb < 0.01) return `${(bytes / 1024).toFixed(0)}KB`
-    return `${mb.toFixed(2)}MB`
-}
-
-function showErrorToast(message: React.ReactNode) {
-    toast.custom(
-        (t) => (
-            <ErrorToast message={message} onDismiss={() => toast.dismiss(t)} />
-        ),
-        { duration: 5000 },
-    )
-}
-
-interface ValidationResult {
-    validFiles: File[]
-    errors: string[]
-}
-
-function validateFiles(
-    newFiles: File[],
-    existingCount: number,
-    dict: any,
-): ValidationResult {
-    const errors: string[] = []
-    const validFiles: File[] = []
-
-    const availableSlots = MAX_FILES - existingCount
-
-    if (availableSlots <= 0) {
-        errors.push(formatMessage(dict.errors.maxFiles, { max: MAX_FILES }))
-        return { validFiles, errors }
-    }
-
-    for (const file of newFiles) {
-        if (validFiles.length >= availableSlots) {
-            errors.push(
-                formatMessage(dict.errors.onlyMoreAllowed, {
-                    slots: availableSlots,
-                }),
-            )
-            break
-        }
-        if (!isValidFileType(file)) {
-            errors.push(
-                formatMessage(dict.errors.unsupportedType, { name: file.name }),
-            )
-            continue
-        }
-        // Only check size for images (PDFs/text files are extracted client-side, so file size doesn't matter)
-        const isExtractedFile = isPdfFile(file) || isTextFile(file)
-        if (!isExtractedFile && file.size > MAX_IMAGE_SIZE) {
-            const maxSizeMB = MAX_IMAGE_SIZE / 1024 / 1024
-            errors.push(
-                formatMessage(dict.errors.fileExceeds, {
-                    name: file.name,
-                    size: formatFileSize(file.size),
-                    max: maxSizeMB,
-                }),
-            )
-        } else {
-            validFiles.push(file)
-        }
-    }
-
-    return { validFiles, errors }
-}
-
-function showValidationErrors(errors: string[], dict: any) {
-    if (errors.length === 0) return
-
-    if (errors.length === 1) {
-        showErrorToast(
-            <span className="text-muted-foreground">{errors[0]}</span>,
-        )
-    } else {
-        showErrorToast(
-            <div className="flex flex-col gap-1">
-                <span className="font-medium">
-                    {formatMessage(dict.errors.filesRejected, {
-                        count: errors.length,
-                    })}
-                </span>
-                <ul className="text-muted-foreground text-xs list-disc list-inside">
-                    {errors.slice(0, 3).map((err) => (
-                        <li key={err}>{err}</li>
-                    ))}
-                    {errors.length > 3 && (
-                        <li>
-                            {formatMessage(dict.errors.andMore, {
-                                count: errors.length - 3,
-                            })}
-                        </li>
-                    )}
-                </ul>
-            </div>,
-        )
-    }
-}
-
-export interface ChatInputRef {
-    focus: () => void
-}
+    RotateCcw,
+    Image as ImageIcon,
+    History,
+} from "lucide-react";
+import { ButtonWithTooltip } from "@/components/button-with-tooltip";
+import { FilePreviewList } from "./file-preview-list";
+import { useDiagram } from "@/contexts/diagram-context";
+import { HistoryDialog } from "@/components/history-dialog";
 
 interface ChatInputProps {
-    input: string
-    status: "submitted" | "streaming" | "ready" | "error"
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
-    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-    onStop?: () => void
-    files?: File[]
-    onFileChange?: (files: File[]) => void
-    pdfData?: Map<
-        File,
-        { text: string; charCount: number; isExtracting: boolean }
-    >
-    urlData?: Map<string, UrlData>
-    onUrlChange?: (data: Map<string, UrlData>) => void
-
-    sessionId?: string
-    error?: Error | null
-    // Model selector props
-    models?: FlattenedModel[]
-    selectedModelId?: string
-    onModelSelect?: (modelId: string | undefined) => void
-    onConfigureModels?: () => void
-    showUnvalidatedModels?: boolean
-    // Focus control props
-    shouldFocus?: boolean
-    onFocused?: () => void
+    input: string;
+    status: "submitted" | "streaming" | "ready" | "error";
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onClearChat: () => void;
+    files?: File[];
+    onFileChange?: (files: File[]) => void;
+    showHistory?: boolean;
+    onToggleHistory?: (show: boolean) => void;
 }
 
-export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
-    function ChatInput(
-        {
-            input,
-            status,
-            onSubmit,
-            onChange,
-            onStop,
-            files = [],
-            onFileChange = () => {},
-            pdfData = new Map(),
-            urlData,
-            onUrlChange,
-            sessionId,
-            error = null,
-            models = [],
-            selectedModelId,
-            onModelSelect = () => {},
-            onConfigureModels,
-            showUnvalidatedModels = false,
-            shouldFocus = false,
-            onFocused,
-        },
-        ref,
-    ) {
-        const dict = useDictionary()
-        const {
-            chartXML,
-            diagramHistory,
-            saveDiagramToFile,
-            showSaveDialog,
-            setShowSaveDialog,
-        } = useDiagram()
+export function ChatInput({
+    input,
+    status,
+    onSubmit,
+    onChange,
+    onClearChat,
+    files = [],
+    onFileChange = () => {},
+    showHistory = false,
+    onToggleHistory = () => {},
+}: ChatInputProps) {
+    const { diagramHistory } = useDiagram();
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [showClearDialog, setShowClearDialog] = useState(false);
 
-        const textareaRef = useRef<HTMLTextAreaElement>(null)
-        const fileInputRef = useRef<HTMLInputElement>(null)
-        const [isDragging, setIsDragging] = useState(false)
+    // Debug: Log status changes
+    const isDisabled = status === "streaming" || status === "submitted";
+    useEffect(() => {
+        console.log('[ChatInput] Status changed to:', status, '| Input disabled:', isDisabled);
+    }, [status, isDisabled]);
 
-        // Expose focus method via ref
-        useImperativeHandle(ref, () => ({
-            focus: () => {
-                textareaRef.current?.focus()
-            },
-        }))
-
-        // Focus the textarea when shouldFocus becomes true
-        // Use setTimeout to ensure focus happens after drawio iframe settles
-        useEffect(() => {
-            if (shouldFocus) {
-                const timer = setTimeout(() => {
-                    textareaRef.current?.focus()
-                    onFocused?.()
-                }, 150)
-                return () => clearTimeout(timer)
-            }
-        }, [shouldFocus, onFocused])
-
-        const [showHistory, setShowHistory] = useState(false)
-        const [showUrlDialog, setShowUrlDialog] = useState(false)
-        const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false)
-        const [isExtractingUrl, setIsExtractingUrl] = useState(false)
-        const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
-        // Allow retry when there's an error (even if status is still "streaming" or "submitted")
-        const isDisabled =
-            (status === "streaming" || status === "submitted") && !error
-
-        const adjustTextareaHeight = useCallback(() => {
-            const textarea = textareaRef.current
-            if (textarea) {
-                textarea.style.height = "auto"
-                textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
-            }
-        }, [])
-        // Handle programmatic input changes (e.g., setInput("") after form submission)
-        useEffect(() => {
-            adjustTextareaHeight()
-        }, [input, adjustTextareaHeight])
-
-        // Load send shortcut preference from localStorage and listen for changes
-        useEffect(() => {
-            const stored = localStorage.getItem(STORAGE_KEYS.sendShortcut)
-            if (stored) setSendShortcut(stored)
-
-            const handleChange = (e: CustomEvent<string>) =>
-                setSendShortcut(e.detail)
-            window.addEventListener(
-                "sendShortcutChange",
-                handleChange as EventListener,
-            )
-            return () =>
-                window.removeEventListener(
-                    "sendShortcutChange",
-                    handleChange as EventListener,
-                )
-        }, [])
-
-        const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            onChange(e)
-            adjustTextareaHeight()
+    // Auto-resize textarea based on content
+    const adjustTextareaHeight = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.style.height = "auto";
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
         }
+    }, []);
 
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            const shouldSend =
-                sendShortcut === "enter"
-                    ? e.key === "Enter" &&
-                      !e.shiftKey &&
-                      !e.ctrlKey &&
-                      !e.metaKey
-                    : (e.metaKey || e.ctrlKey) && e.key === "Enter"
+    useEffect(() => {
+        adjustTextareaHeight();
+    }, [input, adjustTextareaHeight]);
 
-            if (shouldSend) {
-                e.preventDefault()
-                const form = e.currentTarget.closest("form")
-                if (form && input.trim() && !isDisabled) {
-                    form.requestSubmit()
-                }
+    // Handle keyboard shortcuts and paste events
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+            e.preventDefault();
+            const form = e.currentTarget.closest("form");
+            if (form && input.trim() && !isDisabled) {
+                form.requestSubmit();
             }
         }
+    };
 
-        const handlePaste = async (e: React.ClipboardEvent) => {
-            if (isDisabled) return
+    // Handle clipboard paste
+    const handlePaste = async (e: React.ClipboardEvent) => {
+        if (isDisabled) return;
 
-            const items = e.clipboardData.items
-            const imageItems = Array.from(items).filter((item) =>
-                item.type.startsWith("image/"),
-            )
+        const items = e.clipboardData.items;
+        const imageItems = Array.from(items).filter((item) =>
+            item.type.startsWith("image/")
+        );
 
-            if (imageItems.length > 0) {
-                const imageFiles = (
-                    await Promise.all(
-                        imageItems.map(async (item, index) => {
-                            const file = item.getAsFile()
-                            if (!file) return null
-                            return new File(
-                                [file],
-                                `pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
-                                { type: file.type },
-                            )
-                        }),
-                    )
-                ).filter((f): f is File => f !== null)
-
-                const { validFiles, errors } = validateFiles(
-                    imageFiles,
-                    files.length,
-                    dict,
-                )
-                showValidationErrors(errors, dict)
-                if (validFiles.length > 0) {
-                    onFileChange([...files, ...validFiles])
-                }
-            }
-        }
-
-        const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newFiles = Array.from(e.target.files || [])
-            const { validFiles, errors } = validateFiles(
-                newFiles,
-                files.length,
-                dict,
-            )
-            showValidationErrors(errors, dict)
-            if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles])
-            }
-
-            if (fileInputRef.current) {
-                fileInputRef.current.value = ""
-            }
-        }
-
-        const handleRemoveFile = (fileToRemove: File) => {
-            onFileChange(files.filter((file) => file !== fileToRemove))
-            if (fileInputRef.current) {
-                fileInputRef.current.value = ""
-            }
-        }
-
-        const triggerFileInput = () => {
-            fileInputRef.current?.click()
-        }
-
-        const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(true)
-        }
-
-        const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(false)
-        }
-
-        const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(false)
-
-            if (isDisabled) return
-
-            const droppedFiles = e.dataTransfer.files
-            const supportedFiles = Array.from(droppedFiles).filter((file) =>
-                isValidFileType(file),
-            )
-
-            const { validFiles, errors } = validateFiles(
-                supportedFiles,
-                files.length,
-                dict,
-            )
-            showValidationErrors(errors, dict)
-            if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles])
-            }
-        }
-
-        const handleUrlExtract = async (url: string) => {
-            if (!onUrlChange) return
-
-            setIsExtractingUrl(true)
-
-            try {
-                const existing = urlData
-                    ? new Map(urlData)
-                    : new Map<string, UrlData>()
-                existing.set(url, {
-                    url,
-                    title: url,
-                    content: "",
-                    charCount: 0,
-                    isExtracting: true,
+        if (imageItems.length > 0) {
+            const imageFiles = await Promise.all(
+                imageItems.map(async (item) => {
+                    const file = item.getAsFile();
+                    if (!file) return null;
+                    // Create a new file with a unique name
+                    return new File(
+                        [file],
+                        `pasted-image-${Date.now()}.${file.type.split("/")[1]}`,
+                        {
+                            type: file.type,
+                        }
+                    );
                 })
-                onUrlChange(existing)
+            );
 
-                const data = await extractUrlContent(url)
-
-                const newUrlData = new Map(existing)
-                newUrlData.set(url, data)
-                onUrlChange(newUrlData)
-
-                setShowUrlDialog(false)
-            } catch (error) {
-                // Remove the URL from the data map on error
-                const newUrlData = urlData
-                    ? new Map(urlData)
-                    : new Map<string, UrlData>()
-                newUrlData.delete(url)
-                onUrlChange(newUrlData)
-                showErrorToast(
-                    <span className="text-muted-foreground">
-                        {error instanceof Error
-                            ? error.message
-                            : "Failed to extract URL content"}
-                    </span>,
-                )
-            } finally {
-                setIsExtractingUrl(false)
+            const validFiles = imageFiles.filter(
+                (file): file is File => file !== null
+            );
+            if (validFiles.length > 0) {
+                onFileChange([...files, ...validFiles]);
             }
         }
+    };
 
-        return (
-            <form
-                id="chat-form"
-                onSubmit={onSubmit}
-                className={`w-full transition-all duration-200 ${
-                    isDragging
-                        ? "ring-2 ring-primary ring-offset-2 rounded-2xl"
-                        : ""
-                }`}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-            >
-                {/* File & URL previews */}
-                {(files.length > 0 || (urlData && urlData.size > 0)) && (
-                    <div className="mb-3">
-                        <FilePreviewList
-                            files={files}
-                            onRemoveFile={handleRemoveFile}
-                            pdfData={pdfData}
-                            urlData={urlData}
-                            onRemoveUrl={
-                                onUrlChange
-                                    ? (url) => {
-                                          const next = new Map(urlData)
-                                          next.delete(url)
-                                          onUrlChange(next)
-                                      }
-                                    : undefined
-                            }
-                        />
-                    </div>
-                )}
-                <div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
-                    <Textarea
-                        ref={textareaRef}
-                        value={input}
-                        onChange={handleChange}
-                        onKeyDown={handleKeyDown}
-                        onPaste={handlePaste}
-                        placeholder={dict.chat.placeholder}
-                        disabled={isDisabled}
-                        aria-label="Chat input"
-                        className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
+    // Handle file changes
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newFiles = Array.from(e.target.files || []);
+        onFileChange([...files, ...newFiles]);
+    };
+
+    // Remove individual file
+    const handleRemoveFile = (fileToRemove: File) => {
+        onFileChange(files.filter((file) => file !== fileToRemove));
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+
+    // Trigger file input click
+    const triggerFileInput = () => {
+        fileInputRef.current?.click();
+    };
+
+    // Handle drag events
+    const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    };
+
+    const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+
+    const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+
+        if (isDisabled) return;
+
+        const droppedFiles = e.dataTransfer.files;
+
+        // Only process image files
+        const imageFiles = Array.from(droppedFiles).filter((file) =>
+            file.type.startsWith("image/")
+        );
+
+        if (imageFiles.length > 0) {
+            onFileChange([...files, ...imageFiles]);
+        }
+    };
+
+    // Handle clearing conversation and diagram
+    const handleClear = () => {
+        onClearChat();
+        setShowClearDialog(false);
+    };
+
+    return (
+        <form
+            onSubmit={onSubmit}
+            className={`w-full space-y-2 ${
+                isDragging
+                    ? "border-2 border-dashed border-primary p-4 rounded-lg bg-muted/20"
+                    : ""
+            }`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+        >
+            <FilePreviewList files={files} onRemoveFile={handleRemoveFile} />
+
+            <Textarea
+                ref={textareaRef}
+                value={input}
+                onChange={onChange}
+                onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
+                placeholder="Describe what changes you want to make to the diagram
+                or upload(paste) an image to replicate a diagram.
+                 (Press Cmd/Ctrl + Enter to send)"
+                disabled={isDisabled}
+                aria-label="Chat input"
+                className="min-h-[80px] resize-none transition-all duration-200 px-1 py-0"
+            />
+
+            <div className="flex items-center gap-2">
+                <div className="mr-auto">
+                    <ButtonWithTooltip
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => setShowClearDialog(true)}
+                        tooltipContent="Clear current conversation and diagram"
+                    >
+                        <RotateCcw className="mr-2 h-4 w-4" />
+                    </ButtonWithTooltip>
+
+                    {/* Warning Modal */}
+                    <ResetWarningModal
+                        open={showClearDialog}
+                        onOpenChange={setShowClearDialog}
+                        onClear={handleClear}
                     />
 
-                    <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
-                        <div className="flex items-center gap-1 overflow-x-hidden">
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowHistory(true)}
-                                disabled={
-                                    isDisabled || diagramHistory.length === 0
-                                }
-                                tooltipContent={dict.chat.diagramHistory}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <History className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowSaveDialog(true)}
-                                disabled={
-                                    isDisabled || !isRealDiagram(chartXML)
-                                }
-                                tooltipContent={dict.chat.saveDiagram}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <Download className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={triggerFileInput}
-                                disabled={isDisabled}
-                                tooltipContent={dict.chat.uploadFile}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <ImageIcon className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            {onUrlChange && (
-                                <ButtonWithTooltip
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => setShowUrlDialog(true)}
-                                    disabled={isDisabled}
-                                    tooltipContent={dict.chat.ExtractURL}
-                                    className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                                >
-                                    <Link className="h-4 w-4" />
-                                </ButtonWithTooltip>
-                            )}
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowSaveAsTemplate(true)}
-                                disabled={isDisabled || !input.trim()}
-                                tooltipContent={dict.templates.saveAsTemplate}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <BookmarkPlus className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <input
-                                type="file"
-                                ref={fileInputRef}
-                                className="hidden"
-                                onChange={handleFileChange}
-                                accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
-                                multiple
-                                disabled={isDisabled}
-                            />
-                        </div>
-                        <ModelSelector
-                            models={models}
-                            selectedModelId={selectedModelId}
-                            onSelect={onModelSelect}
-                            onConfigure={onConfigureModels}
-                            disabled={isDisabled}
-                            showUnvalidatedModels={showUnvalidatedModels}
-                        />
-                        <div className="w-px h-5 bg-border mx-1" />
-                        {(status === "streaming" || status === "submitted") &&
-                        onStop ? (
-                            <Button
-                                type="button"
-                                onClick={onStop}
-                                size="sm"
-                                variant="destructive"
-                                className="h-8 w-8 p-0 rounded-xl shadow-sm"
-                                aria-label={dict.chat.stopGeneration}
-                            >
-                                <Square className="h-4 w-4" />
-                            </Button>
-                        ) : (
-                            <Button
-                                type="submit"
-                                disabled={isDisabled || !input.trim()}
-                                size="sm"
-                                className="h-8 px-4 rounded-xl font-medium shadow-sm"
-                                aria-label={dict.chat.send}
-                            >
-                                <Send className="h-4 w-4 mr-1.5" />
-                                {dict.chat.send}
-                            </Button>
-                        )}
-                    </div>
+                    <HistoryDialog
+                        showHistory={showHistory}
+                        onToggleHistory={onToggleHistory}
+                    />
                 </div>
-                <HistoryDialog
-                    showHistory={showHistory}
-                    onToggleHistory={setShowHistory}
-                />
-                <SaveDialog
-                    open={showSaveDialog}
-                    onOpenChange={setShowSaveDialog}
-                    onSave={(filename, format) =>
-                        saveDiagramToFile(
-                            filename,
-                            format,
-                            sessionId,
-                            dict.save.savedSuccessfully,
-                        )
-                    }
-                    defaultFilename={`diagram-${new Date()
-                        .toISOString()
-                        .slice(0, 10)}`}
-                />
-                {onUrlChange && (
-                    <UrlInputDialog
-                        open={showUrlDialog}
-                        onOpenChange={setShowUrlDialog}
-                        onSubmit={handleUrlExtract}
-                        isExtracting={isExtractingUrl}
+                <div className="flex gap-2">
+                    {/* History Button */}
+                    <ButtonWithTooltip
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        onClick={() => onToggleHistory(true)}
+                        disabled={
+                            isDisabled ||
+                            diagramHistory.length === 0
+                        }
+                        title="Diagram History"
+                        tooltipContent="View diagram history"
+                    >
+                        <History className="h-4 w-4" />
+                    </ButtonWithTooltip>
+
+                    <Button
+                        type="button"
+                        variant="outline"
+                        size="icon"
+                        onClick={triggerFileInput}
+                        disabled={isDisabled}
+                        title="Upload image"
+                    >
+                        <ImageIcon className="h-4 w-4" />
+                    </Button>
+
+                    <input
+                        type="file"
+                        ref={fileInputRef}
+                        className="hidden"
+                        onChange={handleFileChange}
+                        accept="image/*"
+                        multiple
+                        disabled={isDisabled}
                     />
-                )}
-                <TemplateCreateDialog
-                    open={showSaveAsTemplate}
-                    onOpenChange={setShowSaveAsTemplate}
-                    onSuccess={() => setShowSaveAsTemplate(false)}
-                    initialPrompt={input.trim()}
-                />
-            </form>
-        )
-    },
-)
+                </div>
+
+                <Button
+                    type="submit"
+                    disabled={isDisabled || !input.trim()}
+                    className="transition-opacity"
+                    aria-label={
+                        isDisabled
+                            ? "Sending message..."
+                            : "Send message"
+                    }
+                >
+                    {isDisabled ? (
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                        <Send className="mr-2 h-4 w-4" />
+                    )}
+                    Send
+                </Button>
+            </div>
+        </form>
+    );
+}

components/chat/ChatLobby.tsx

@@ -1,352 +0,0 @@
-"use client"
-
-import {
-    ChevronDown,
-    ChevronUp,
-    MessageSquare,
-    Search,
-    Trash2,
-    X,
-} from "lucide-react"
-import { useEffect, useState } from "react"
-import { TemplatePanel } from "@/components/chat/TemplatePanel"
-import ExamplePanel from "@/components/chat-example-panel"
-import Image from "@/components/image-with-basepath"
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { STORAGE_KEYS } from "@/lib/storage"
-import type { Template } from "@/lib/template-storage"
-
-interface SessionMetadata {
-    id: string
-    title: string
-    updatedAt: number
-    thumbnailDataUrl?: string
-}
-
-interface ChatLobbyProps {
-    sessions: SessionMetadata[]
-    onSelectSession: (id: string) => void
-    onDeleteSession?: (id: string) => void
-    setInput: (input: string) => void
-    setFiles: (files: File[]) => void
-    onSendTemplate?: (template: Template) => void
-    currentInput?: string
-    dict: {
-        sessionHistory?: {
-            recentChats?: string
-            searchPlaceholder?: string
-            noResults?: string
-            justNow?: string
-            deleteTitle?: string
-            deleteDescription?: string
-        }
-        templates?: {
-            title?: string
-            myTemplates?: string
-        }
-        examples?: {
-            quickExamples?: string
-        }
-        common: {
-            delete: string
-            cancel: string
-        }
-    }
-}
-
-// Helper to format session date
-function formatSessionDate(
-    timestamp: number,
-    dict?: { justNow?: string },
-): string {
-    const date = new Date(timestamp)
-    const now = new Date()
-    const diffMs = now.getTime() - date.getTime()
-    const diffMins = Math.floor(diffMs / (1000 * 60))
-    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
-
-    if (diffMins < 1) return dict?.justNow || "Just now"
-    if (diffMins < 60) return `${diffMins}m ago`
-    if (diffHours < 24) return `${diffHours}h ago`
-
-    return date.toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-    })
-}
-
-function getPanelVisibility() {
-    if (typeof window === "undefined")
-        return { recentChats: true, myTemplates: true, quickExamples: true }
-    return {
-        recentChats:
-            localStorage.getItem(STORAGE_KEYS.showRecentChats) !== "false",
-        myTemplates:
-            localStorage.getItem(STORAGE_KEYS.showMyTemplates) !== "false",
-        quickExamples:
-            localStorage.getItem(STORAGE_KEYS.showQuickExamples) !== "false",
-    }
-}
-
-export function ChatLobby({
-    sessions,
-    onSelectSession,
-    onDeleteSession,
-    setInput,
-    setFiles,
-    onSendTemplate,
-    currentInput = "",
-    dict,
-}: ChatLobbyProps) {
-    const [templatesExpanded, setTemplatesExpanded] = useState(false)
-    const [examplesExpanded, setExamplesExpanded] = useState(false)
-    const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
-    const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
-    const [searchQuery, setSearchQuery] = useState("")
-
-    // Listen for panel visibility changes from settings
-    useEffect(() => {
-        const handler = () => setPanelVisibility(getPanelVisibility())
-        window.addEventListener("panelVisibilityChange", handler)
-        return () =>
-            window.removeEventListener("panelVisibilityChange", handler)
-    }, [])
-
-    const hasHistory = sessions.length > 0
-
-    if (!hasHistory) {
-        if (panelVisibility.myTemplates) {
-            return (
-                <TemplatePanel
-                    setInput={setInput}
-                    onSendTemplate={onSendTemplate}
-                    currentInput={currentInput}
-                />
-            )
-        }
-        if (panelVisibility.quickExamples) {
-            return <ExamplePanel setInput={setInput} setFiles={setFiles} />
-        }
-        return null
-    }
-
-    // Show history + collapsible examples when there are sessions
-    return (
-        <div className="py-6 px-2 animate-fade-in">
-            {/* Recent Chats Section */}
-            {panelVisibility.recentChats && (
-                <div className="mb-6">
-                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1 mb-3">
-                        {dict.sessionHistory?.recentChats || "Recent Chats"}
-                    </p>
-                    {/* Search Bar */}
-                    <div className="relative mb-3">
-                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-                        <input
-                            type="text"
-                            placeholder={
-                                dict.sessionHistory?.searchPlaceholder ||
-                                "Search chats..."
-                            }
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-border/60 bg-background focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50 transition-all"
-                        />
-                        {searchQuery && (
-                            <button
-                                type="button"
-                                onClick={() => setSearchQuery("")}
-                                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted transition-colors"
-                            >
-                                <X className="w-3 h-3 text-muted-foreground" />
-                            </button>
-                        )}
-                    </div>
-                    <div className="space-y-2">
-                        {sessions
-                            .filter((session) =>
-                                session.title
-                                    .toLowerCase()
-                                    .includes(searchQuery.toLowerCase()),
-                            )
-                            .map((session) => (
-                                // biome-ignore lint/a11y/useSemanticElements: Cannot use button - has nested delete button which causes hydration error
-                                <div
-                                    key={session.id}
-                                    role="button"
-                                    tabIndex={0}
-                                    className="group w-full flex items-center gap-3 p-3 rounded-xl border border-border/60 bg-card hover:bg-accent/50 hover:border-primary/30 transition-all duration-200 cursor-pointer text-left"
-                                    onClick={() => onSelectSession(session.id)}
-                                    onKeyDown={(e) => {
-                                        if (
-                                            e.key === "Enter" ||
-                                            e.key === " "
-                                        ) {
-                                            e.preventDefault()
-                                            onSelectSession(session.id)
-                                        }
-                                    }}
-                                >
-                                    {session.thumbnailDataUrl ? (
-                                        <div className="w-12 h-12 shrink-0 rounded-lg border bg-white overflow-hidden">
-                                            <Image
-                                                src={session.thumbnailDataUrl}
-                                                alt=""
-                                                width={48}
-                                                height={48}
-                                                className="object-contain w-full h-full"
-                                            />
-                                        </div>
-                                    ) : (
-                                        <div className="w-12 h-12 shrink-0 rounded-lg bg-primary/10 flex items-center justify-center">
-                                            <MessageSquare className="w-5 h-5 text-primary" />
-                                        </div>
-                                    )}
-                                    <div className="min-w-0 flex-1">
-                                        <div className="text-sm font-medium truncate">
-                                            {session.title}
-                                        </div>
-                                        <div className="text-xs text-muted-foreground">
-                                            {formatSessionDate(
-                                                session.updatedAt,
-                                                dict.sessionHistory,
-                                            )}
-                                        </div>
-                                    </div>
-                                    {onDeleteSession && (
-                                        <button
-                                            type="button"
-                                            onClick={(e) => {
-                                                e.stopPropagation()
-                                                setSessionToDelete(session.id)
-                                                setDeleteDialogOpen(true)
-                                            }}
-                                            className="p-1.5 rounded-lg opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all"
-                                            title={dict.common.delete}
-                                        >
-                                            <Trash2 className="w-4 h-4" />
-                                        </button>
-                                    )}
-                                </div>
-                            ))}
-                        {sessions.filter((s) =>
-                            s.title
-                                .toLowerCase()
-                                .includes(searchQuery.toLowerCase()),
-                        ).length === 0 &&
-                            searchQuery && (
-                                <p className="text-sm text-muted-foreground text-center py-4">
-                                    {dict.sessionHistory?.noResults ||
-                                        "No chats found"}
-                                </p>
-                            )}
-                    </div>
-                </div>
-            )}
-
-            {/* Collapsible My Templates Section */}
-            {panelVisibility.myTemplates && (
-                <div className="border-t border-border/50 pt-4">
-                    <button
-                        type="button"
-                        onClick={() => setTemplatesExpanded(!templatesExpanded)}
-                        className="w-full flex items-center justify-between px-1 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
-                    >
-                        <span>
-                            {dict.templates?.myTemplates || "My Templates"}
-                        </span>
-                        {templatesExpanded ? (
-                            <ChevronUp className="w-4 h-4" />
-                        ) : (
-                            <ChevronDown className="w-4 h-4" />
-                        )}
-                    </button>
-                    {templatesExpanded && (
-                        <div className="mt-2">
-                            <TemplatePanel
-                                setInput={setInput}
-                                onSendTemplate={onSendTemplate}
-                                currentInput={currentInput}
-                            />
-                        </div>
-                    )}
-                </div>
-            )}
-
-            {/* Collapsible Quick Examples Section */}
-            {panelVisibility.quickExamples && (
-                <div className="border-t border-border/50 pt-4">
-                    <button
-                        type="button"
-                        onClick={() => setExamplesExpanded(!examplesExpanded)}
-                        className="w-full flex items-center justify-between px-1 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
-                    >
-                        <span>
-                            {dict.examples?.quickExamples || "Quick Examples"}
-                        </span>
-                        {examplesExpanded ? (
-                            <ChevronUp className="w-4 h-4" />
-                        ) : (
-                            <ChevronDown className="w-4 h-4" />
-                        )}
-                    </button>
-                    {examplesExpanded && (
-                        <div className="mt-2">
-                            <ExamplePanel
-                                setInput={setInput}
-                                setFiles={setFiles}
-                                minimal
-                            />
-                        </div>
-                    )}
-                </div>
-            )}
-
-            {/* Delete Confirmation Dialog */}
-            <AlertDialog
-                open={deleteDialogOpen}
-                onOpenChange={setDeleteDialogOpen}
-            >
-                <AlertDialogContent className="max-w-sm">
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>
-                            {dict.sessionHistory?.deleteTitle ||
-                                "Delete this chat?"}
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {dict.sessionHistory?.deleteDescription ||
-                                "This will permanently delete this chat session and its diagram. This action cannot be undone."}
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>
-                            {dict.common.cancel}
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={() => {
-                                if (sessionToDelete && onDeleteSession) {
-                                    onDeleteSession(sessionToDelete)
-                                }
-                                setDeleteDialogOpen(false)
-                                setSessionToDelete(null)
-                            }}
-                            className="border border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:border-red-400"
-                        >
-                            {dict.common.delete}
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        </div>
-    )
-}

components/chat/TemplateCreateDialog.tsx

@@ -1,203 +0,0 @@
-"use client"
-
-import { Bookmark, Plus } from "lucide-react"
-import { useEffect, useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { Textarea } from "@/components/ui/textarea"
-import { useDictionary } from "@/hooks/use-dictionary"
-import {
-    createTemplate,
-    type TemplateCreateInput,
-} from "@/lib/template-storage"
-
-interface TemplateCreateDialogProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    onSuccess: () => void
-    initialPrompt?: string
-}
-
-export function TemplateCreateDialog({
-    open,
-    onOpenChange,
-    onSuccess,
-    initialPrompt = "",
-}: TemplateCreateDialogProps) {
-    const dict = useDictionary()
-    const [title, setTitle] = useState("")
-    const [description, setDescription] = useState("")
-    const [prompt, setPrompt] = useState("")
-    const [pinned, setPinned] = useState(false)
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [error, setError] = useState<string | null>(null)
-
-    // Reset form when dialog opens with the latest initialPrompt
-    useEffect(() => {
-        if (open) {
-            setTitle("")
-            setDescription("")
-            setPrompt(initialPrompt)
-            setPinned(false)
-            setError(null)
-        }
-    }, [open, initialPrompt])
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault()
-
-        const trimmedPrompt = prompt.trim()
-        if (!trimmedPrompt) {
-            setError(dict.templates.promptRequired)
-            return
-        }
-
-        setIsSubmitting(true)
-        setError(null)
-
-        try {
-            const input: TemplateCreateInput = {
-                prompt: trimmedPrompt,
-                title: title.trim() || undefined,
-                description: description.trim() || undefined,
-                pinned,
-            }
-
-            const template = await createTemplate(input)
-            if (template) {
-                onSuccess()
-                onOpenChange(false)
-            } else {
-                setError(dict.templates.createFailed)
-            }
-        } catch (err) {
-            console.error("Failed to create template:", err)
-            setError(dict.templates.createFailed)
-        } finally {
-            setIsSubmitting(false)
-        }
-    }
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-[500px] overflow-hidden">
-                <form onSubmit={handleSubmit}>
-                    <DialogHeader>
-                        <DialogTitle className="flex items-center gap-2">
-                            <Plus className="w-5 h-5" />
-                            {dict.templates.createTitle}
-                        </DialogTitle>
-                        <DialogDescription>
-                            {dict.templates.createDescription}
-                        </DialogDescription>
-                    </DialogHeader>
-
-                    <div className="space-y-4 py-4">
-                        {/* Prompt field - required */}
-                        <div className="space-y-2">
-                            <Label htmlFor="prompt" className="text-foreground">
-                                {dict.templates.promptLabel}
-                                <span className="text-destructive ml-1">*</span>
-                            </Label>
-                            <Textarea
-                                id="prompt"
-                                value={prompt}
-                                onChange={(e) => setPrompt(e.target.value)}
-                                placeholder={dict.templates.promptPlaceholder}
-                                className="min-h-[100px] resize-none break-words"
-                                required
-                            />
-                        </div>
-
-                        {/* Title field - optional */}
-                        <div className="space-y-2">
-                            <Label htmlFor="title" className="text-foreground">
-                                {dict.templates.titleLabel}
-                            </Label>
-                            <Input
-                                id="title"
-                                value={title}
-                                onChange={(e) => setTitle(e.target.value)}
-                                placeholder={dict.templates.titlePlaceholder}
-                            />
-                            <p className="text-xs text-muted-foreground">
-                                {dict.templates.titleHint}
-                            </p>
-                        </div>
-
-                        {/* Description field - optional */}
-                        <div className="space-y-2">
-                            <Label
-                                htmlFor="description"
-                                className="text-foreground"
-                            >
-                                {dict.templates.descriptionLabel}
-                            </Label>
-                            <Textarea
-                                id="description"
-                                value={description}
-                                onChange={(e) => setDescription(e.target.value)}
-                                placeholder={
-                                    dict.templates.descriptionPlaceholder
-                                }
-                                className="min-h-[60px] resize-none"
-                            />
-                        </div>
-
-                        {/* Pinned switch */}
-                        <div className="flex items-center justify-between">
-                            <div className="space-y-0.5">
-                                <Label
-                                    htmlFor="pinned"
-                                    className="flex items-center gap-2 text-foreground"
-                                >
-                                    <Bookmark className="w-4 h-4" />
-                                    {dict.templates.pinnedLabel}
-                                </Label>
-                                <p className="text-xs text-muted-foreground">
-                                    {dict.templates.pinnedHint}
-                                </p>
-                            </div>
-                            <Switch
-                                id="pinned"
-                                checked={pinned}
-                                onCheckedChange={setPinned}
-                            />
-                        </div>
-
-                        {/* Error message */}
-                        {error && (
-                            <p className="text-sm text-destructive">{error}</p>
-                        )}
-                    </div>
-
-                    <DialogFooter>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={() => onOpenChange(false)}
-                            disabled={isSubmitting}
-                        >
-                            {dict.common.cancel}
-                        </Button>
-                        <Button type="submit" disabled={isSubmitting}>
-                            {isSubmitting
-                                ? dict.common.loading
-                                : dict.templates.createButton}
-                        </Button>
-                    </DialogFooter>
-                </form>
-            </DialogContent>
-        </Dialog>
-    )
-}

components/chat/TemplateEditDialog.tsx

@@ -1,215 +0,0 @@
-"use client"
-
-import { Bookmark, Edit2 } from "lucide-react"
-import { useEffect, useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { Textarea } from "@/components/ui/textarea"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { type Template, updateTemplate } from "@/lib/template-storage"
-
-interface TemplateEditDialogProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    template: Template | null
-    onSuccess: () => void
-}
-
-export function TemplateEditDialog({
-    open,
-    onOpenChange,
-    template,
-    onSuccess,
-}: TemplateEditDialogProps) {
-    const dict = useDictionary()
-    const [title, setTitle] = useState("")
-    const [description, setDescription] = useState("")
-    const [prompt, setPrompt] = useState("")
-    const [pinned, setPinned] = useState(false)
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [error, setError] = useState<string | null>(null)
-
-    // Populate form when template changes
-    useEffect(() => {
-        if (template) {
-            setTitle(template.title || "")
-            setDescription(template.description || "")
-            setPrompt(template.prompt || "")
-            setPinned(template.pinned || false)
-            setError(null)
-        }
-    }, [template])
-
-    const handleOpenChange = (newOpen: boolean) => {
-        if (!newOpen) {
-            setError(null)
-        }
-        onOpenChange(newOpen)
-    }
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault()
-
-        if (!template) return
-
-        const trimmedPrompt = prompt.trim()
-        if (!trimmedPrompt) {
-            setError(dict.templates.promptRequired)
-            return
-        }
-
-        setIsSubmitting(true)
-        setError(null)
-
-        try {
-            const updates: Partial<Omit<Template, "id" | "createdAt">> = {
-                prompt: trimmedPrompt,
-                title: title.trim() || template.title,
-                description: description.trim() || undefined,
-                pinned,
-            }
-
-            const updated = await updateTemplate(template.id, updates)
-            if (updated) {
-                onSuccess()
-                onOpenChange(false)
-            } else {
-                setError(dict.templates.updateFailed)
-            }
-        } catch (err) {
-            console.error("Failed to update template:", err)
-            setError(dict.templates.updateFailed)
-        } finally {
-            setIsSubmitting(false)
-        }
-    }
-
-    return (
-        <Dialog open={open} onOpenChange={handleOpenChange}>
-            <DialogContent className="sm:max-w-[500px] overflow-hidden">
-                <form onSubmit={handleSubmit}>
-                    <DialogHeader>
-                        <DialogTitle className="flex items-center gap-2">
-                            <Edit2 className="w-5 h-5" />
-                            {dict.templates.editTitle}
-                        </DialogTitle>
-                        <DialogDescription>
-                            {dict.templates.editDescription}
-                        </DialogDescription>
-                    </DialogHeader>
-
-                    <div className="space-y-4 py-4">
-                        {/* Prompt field - required */}
-                        <div className="space-y-2">
-                            <Label
-                                htmlFor="edit-prompt"
-                                className="text-foreground"
-                            >
-                                {dict.templates.promptLabel}
-                                <span className="text-destructive ml-1">*</span>
-                            </Label>
-                            <Textarea
-                                id="edit-prompt"
-                                value={prompt}
-                                onChange={(e) => setPrompt(e.target.value)}
-                                placeholder={dict.templates.promptPlaceholder}
-                                className="min-h-[100px] resize-none break-words"
-                                required
-                            />
-                        </div>
-
-                        {/* Title field - optional */}
-                        <div className="space-y-2">
-                            <Label
-                                htmlFor="edit-title"
-                                className="text-foreground"
-                            >
-                                {dict.templates.titleLabel}
-                            </Label>
-                            <Input
-                                id="edit-title"
-                                value={title}
-                                onChange={(e) => setTitle(e.target.value)}
-                                placeholder={dict.templates.titlePlaceholder}
-                            />
-                            <p className="text-xs text-muted-foreground">
-                                {dict.templates.titleHint}
-                            </p>
-                        </div>
-
-                        {/* Description field - optional */}
-                        <div className="space-y-2">
-                            <Label
-                                htmlFor="edit-description"
-                                className="text-foreground"
-                            >
-                                {dict.templates.descriptionLabel}
-                            </Label>
-                            <Textarea
-                                id="edit-description"
-                                value={description}
-                                onChange={(e) => setDescription(e.target.value)}
-                                placeholder={
-                                    dict.templates.descriptionPlaceholder
-                                }
-                                className="min-h-[60px] resize-none"
-                            />
-                        </div>
-
-                        {/* Pinned switch */}
-                        <div className="flex items-center justify-between">
-                            <div className="space-y-0.5">
-                                <Label
-                                    htmlFor="edit-pinned"
-                                    className="flex items-center gap-2 text-foreground"
-                                >
-                                    <Bookmark className="w-4 h-4" />
-                                    {dict.templates.pinnedLabel}
-                                </Label>
-                                <p className="text-xs text-muted-foreground">
-                                    {dict.templates.pinnedHint}
-                                </p>
-                            </div>
-                            <Switch
-                                id="edit-pinned"
-                                checked={pinned}
-                                onCheckedChange={setPinned}
-                            />
-                        </div>
-
-                        {/* Error message */}
-                        {error && (
-                            <p className="text-sm text-destructive">{error}</p>
-                        )}
-                    </div>
-
-                    <DialogFooter>
-                        <Button
-                            type="button"
-                            variant="outline"
-                            onClick={() => onOpenChange(false)}
-                            disabled={isSubmitting}
-                        >
-                            {dict.common.cancel}
-                        </Button>
-                        <Button type="submit" disabled={isSubmitting}>
-                            {isSubmitting
-                                ? dict.common.loading
-                                : dict.common.save}
-                        </Button>
-                    </DialogFooter>
-                </form>
-            </DialogContent>
-        </Dialog>
-    )
-}

components/chat/TemplatePanel.tsx

@@ -1,622 +0,0 @@
-"use client"
-
-import {
-    Bookmark,
-    Copy,
-    Download,
-    Edit2,
-    FileText,
-    Plus,
-    Search,
-    Trash2,
-    Upload,
-} from "lucide-react"
-import { useCallback, useEffect, useRef, useState } from "react"
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { useDictionary } from "@/hooks/use-dictionary"
-import {
-    deleteTemplate,
-    duplicateTemplate,
-    exportTemplates,
-    getAllTemplates,
-    importTemplates,
-    incrementClickCount,
-    incrementRunCount,
-    searchTemplates,
-    type Template,
-    updateTemplate,
-    validateImportData,
-} from "@/lib/template-storage"
-import { TemplateCreateDialog } from "./TemplateCreateDialog"
-import { TemplateEditDialog } from "./TemplateEditDialog"
-
-interface TemplatePanelProps {
-    setInput: (input: string) => void
-    onSendTemplate?: (template: Template) => void
-    currentInput?: string
-}
-
-function formatLastUsed(timestamp: number, neverUsedText: string): string {
-    if (!timestamp) return neverUsedText
-    const now = Date.now()
-    const diffMs = now - timestamp
-    const diffMins = Math.floor(diffMs / (1000 * 60))
-    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
-    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
-
-    try {
-        const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" })
-        if (diffMins < 1) return rtf.format(0, "minute")
-        if (diffMins < 60) return rtf.format(-diffMins, "minute")
-        if (diffHours < 24) return rtf.format(-diffHours, "hour")
-        if (diffDays < 7) return rtf.format(-diffDays, "day")
-    } catch {
-        // Fallback if Intl.RelativeTimeFormat is not available
-        if (diffMins < 1) return "<1m ago"
-        if (diffMins < 60) return `${diffMins}m ago`
-        if (diffHours < 24) return `${diffHours}h ago`
-        if (diffDays < 7) return `${diffDays}d ago`
-    }
-
-    return new Date(timestamp).toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-    })
-}
-
-export function TemplatePanel({
-    setInput,
-    onSendTemplate,
-    currentInput = "",
-}: TemplatePanelProps) {
-    const dict = useDictionary()
-    const [templates, setTemplates] = useState<Template[]>([])
-    const [loading, setLoading] = useState(true)
-    const [createDialogOpen, setCreateDialogOpen] = useState(false)
-    const [editDialogOpen, setEditDialogOpen] = useState(false)
-    const [templateToEdit, setTemplateToEdit] = useState<Template | null>(null)
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
-    const [templateToDelete, setTemplateToDelete] = useState<Template | null>(
-        null,
-    )
-    const [confirmSendDialogOpen, setConfirmSendDialogOpen] = useState(false)
-    const [templateToSend, setTemplateToSend] = useState<Template | null>(null)
-    const [searchQuery, setSearchQuery] = useState("")
-    const fileInputRef = useRef<HTMLInputElement>(null)
-    const [importMessage, setImportMessage] = useState<{
-        type: "success" | "error"
-        text: string
-    } | null>(null)
-
-    const loadTemplates = useCallback(async () => {
-        const result = await getAllTemplates()
-        setTemplates(result)
-        setLoading(false)
-    }, [])
-
-    // Filter templates by search query
-    const filteredTemplates = searchQuery.trim()
-        ? searchTemplates(templates, searchQuery)
-        : templates
-
-    useEffect(() => {
-        loadTemplates()
-    }, [loadTemplates])
-
-    const handleCreateSuccess = () => {
-        loadTemplates()
-    }
-
-    const handleEditSuccess = () => {
-        loadTemplates()
-    }
-
-    const handleEdit = (template: Template) => {
-        setTemplateToEdit(template)
-        setEditDialogOpen(true)
-    }
-
-    const handleDuplicate = async (template: Template) => {
-        const duplicated = await duplicateTemplate(
-            template.id,
-            dict.templates.copySuffix || "(copy)",
-        )
-        if (duplicated) {
-            loadTemplates()
-        }
-    }
-
-    const handleDeleteClick = (template: Template) => {
-        setTemplateToDelete(template)
-        setDeleteDialogOpen(true)
-    }
-
-    const handleDeleteConfirm = async () => {
-        if (!templateToDelete) return
-        const success = await deleteTemplate(templateToDelete.id)
-        if (success) {
-            loadTemplates()
-        }
-        setDeleteDialogOpen(false)
-        setTemplateToDelete(null)
-    }
-
-    const handleTogglePin = async (template: Template) => {
-        const updated = await updateTemplate(template.id, {
-            pinned: !template.pinned,
-        })
-        if (updated) {
-            loadTemplates()
-        }
-    }
-
-    // Handle template card click - send directly or show confirmation
-    const handleTemplateClick = async (template: Template) => {
-        // If there's unsent content in the input, show confirmation dialog
-        if (currentInput.trim()) {
-            setTemplateToSend(template)
-            setConfirmSendDialogOpen(true)
-            return
-        }
-
-        // No unsent content, send directly
-        await sendTemplate(template)
-    }
-
-    // Actually send the template
-    const sendTemplate = async (template: Template) => {
-        // Increment click count only when actually sending
-        await incrementClickCount(template.id)
-        if (onSendTemplate) {
-            // Increment run count and update lastUsedAt
-            await incrementRunCount(template.id)
-            // Reload to show updated stats
-            loadTemplates()
-            // Call the send callback
-            onSendTemplate(template)
-        } else {
-            // Fallback: just fill the input if no send callback provided
-            setInput(template.prompt)
-        }
-        setConfirmSendDialogOpen(false)
-        setTemplateToSend(null)
-    }
-
-    // Handle confirmation dialog - user confirmed to send template
-    const handleConfirmSend = async () => {
-        if (!templateToSend) return
-        await sendTemplate(templateToSend)
-    }
-
-    // Handle cancel - close dialog without sending
-    const handleCancelSend = () => {
-        setConfirmSendDialogOpen(false)
-        setTemplateToSend(null)
-    }
-
-    // Export templates to JSON file
-    const handleExport = () => {
-        if (templates.length === 0) {
-            setImportMessage({
-                type: "error",
-                text: dict.templates.exportEmpty || "No templates to export",
-            })
-            return
-        }
-
-        try {
-            const exportData = exportTemplates(templates)
-            const json = JSON.stringify(exportData, null, 2)
-            const blob = new Blob([json], { type: "application/json" })
-            const url = URL.createObjectURL(blob)
-            const a = document.createElement("a")
-            a.href = url
-            a.download = `templates-${new Date().toISOString().split("T")[0]}.json`
-            document.body.appendChild(a)
-            a.click()
-            document.body.removeChild(a)
-            URL.revokeObjectURL(url)
-
-            setImportMessage({
-                type: "success",
-                text: dict.templates.exportSuccess.replace(
-                    "{count}",
-                    String(templates.length),
-                ),
-            })
-            setTimeout(() => setImportMessage(null), 3000)
-        } catch (error) {
-            console.error("Failed to export templates:", error)
-            setImportMessage({
-                type: "error",
-                text: `Export failed: ${error instanceof Error ? error.message : "Unknown error"}`,
-            })
-        }
-    }
-
-    // Import templates from JSON file
-    const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
-        const file = event.target.files?.[0]
-        if (!file) {
-            setImportMessage({
-                type: "error",
-                text:
-                    dict.templates.importNoFile || "Please select a JSON file",
-            })
-            return
-        }
-
-        try {
-            const text = await file.text()
-            const data = JSON.parse(text)
-
-            // Validate import data
-            const validation = validateImportData(data)
-            if (!validation.valid) {
-                setImportMessage({
-                    type: "error",
-                    text: dict.templates.importFailed.replace(
-                        "{error}",
-                        validation.error || "Invalid data",
-                    ),
-                })
-                return
-            }
-
-            // Import templates with dedup-append strategy
-            const result = await importTemplates(data.templates, templates)
-
-            // Reload template list
-            await loadTemplates()
-
-            setImportMessage({
-                type: "success",
-                text: dict.templates.importSuccess
-                    .replace("{imported}", String(result.imported))
-                    .replace("{skipped}", String(result.skipped)),
-            })
-            setTimeout(() => setImportMessage(null), 5000)
-        } catch (error) {
-            console.error("Failed to import templates:", error)
-            setImportMessage({
-                type: "error",
-                text: dict.templates.importFailed.replace(
-                    "{error}",
-                    error instanceof Error ? error.message : "Unknown error",
-                ),
-            })
-        } finally {
-            // Reset file input
-            if (fileInputRef.current) {
-                fileInputRef.current.value = ""
-            }
-        }
-    }
-
-    // Empty state: no templates at all
-    if (!loading && templates.length === 0) {
-        return (
-            <div className="py-6 px-2 animate-fade-in">
-                <div className="text-center mb-6">
-                    <h2 className="text-lg font-semibold text-foreground mb-2">
-                        {dict.templates.title}
-                    </h2>
-                    <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-                        {dict.templates.subtitle}
-                    </p>
-                </div>
-                <div className="flex flex-col items-center justify-center py-8 px-4">
-                    <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4">
-                        <FileText className="w-8 h-8 text-primary/60" />
-                    </div>
-                    <p className="text-sm font-medium text-foreground mb-1">
-                        {dict.templates.emptyTitle}
-                    </p>
-                    <p className="text-xs text-muted-foreground text-center max-w-[240px] mb-4">
-                        {dict.templates.emptyDescription}
-                    </p>
-                    <button
-                        type="button"
-                        className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium hover:bg-primary/90 transition-colors"
-                        onClick={() => setCreateDialogOpen(true)}
-                    >
-                        <Plus className="w-4 h-4" />
-                        {dict.templates.createFirst}
-                    </button>
-
-                    <TemplateCreateDialog
-                        open={createDialogOpen}
-                        onOpenChange={setCreateDialogOpen}
-                        onSuccess={handleCreateSuccess}
-                    />
-                </div>
-            </div>
-        )
-    }
-
-    // Template list
-    return (
-        <div className="py-2 px-2 animate-fade-in">
-            <div className="space-y-3">
-                {/* Search bar */}
-                <div className="relative">
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none" />
-                    <input
-                        type="text"
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
-                        placeholder={dict.templates.searchPlaceholder}
-                        className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-border/60 bg-background focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50 transition-all"
-                    />
-                </div>
-
-                {/* Action buttons */}
-                <div className="flex items-center gap-2">
-                    <button
-                        type="button"
-                        onClick={() => setCreateDialogOpen(true)}
-                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-primary hover:bg-primary/10 transition-colors"
-                    >
-                        <Plus className="w-3.5 h-3.5" />
-                        {dict.templates.createButton}
-                    </button>
-                    <div className="flex-1" />
-                    <button
-                        type="button"
-                        onClick={handleExport}
-                        disabled={templates.length === 0}
-                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                        title={dict.templates.exportTemplates}
-                    >
-                        <Download className="w-3.5 h-3.5" />
-                        {dict.templates.exportTemplates}
-                    </button>
-                    <button
-                        type="button"
-                        onClick={() => fileInputRef.current?.click()}
-                        className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-                        title={dict.templates.importTemplates}
-                    >
-                        <Upload className="w-3.5 h-3.5" />
-                        {dict.templates.importTemplates}
-                    </button>
-                    <input
-                        ref={fileInputRef}
-                        type="file"
-                        accept="application/json,.json"
-                        onChange={handleImport}
-                        className="hidden"
-                    />
-                </div>
-
-                {/* Import message */}
-                {importMessage && (
-                    <div
-                        className={`text-xs px-3 py-2 rounded-lg ${
-                            importMessage.type === "success"
-                                ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
-                                : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
-                        }`}
-                    >
-                        {importMessage.text}
-                    </div>
-                )}
-
-                <div className="space-y-2">
-                    {loading
-                        ? // Loading skeleton
-                          Array.from({ length: 3 }).map((_, i) => (
-                              <div
-                                  key={`skeleton-${String(i)}`}
-                                  className="w-full p-4 rounded-xl border border-border/60 bg-card animate-pulse"
-                              >
-                                  <div className="flex items-start gap-3">
-                                      <div className="w-9 h-9 rounded-lg bg-muted shrink-0" />
-                                      <div className="flex-1 space-y-2">
-                                          <div className="h-4 bg-muted rounded w-2/3" />
-                                          <div className="h-3 bg-muted rounded w-1/2" />
-                                      </div>
-                                  </div>
-                              </div>
-                          ))
-                        : filteredTemplates.length === 0
-                          ? // Search empty state
-                            !loading && (
-                                <div className="flex flex-col items-center justify-center py-6 px-4">
-                                    <Search className="w-8 h-8 text-muted-foreground/40 mb-2" />
-                                    <p className="text-sm text-muted-foreground text-center">
-                                        {dict.templates.searchNoResults}
-                                    </p>
-                                </div>
-                            )
-                          : filteredTemplates.map((template) => (
-                                // biome-ignore lint/a11y/useSemanticElements: Cannot use button - has nested action buttons which causes hydration error
-                                <div
-                                    key={template.id}
-                                    className="group w-full flex items-center gap-3 p-3 rounded-xl border border-border/60 bg-card hover:bg-accent/50 hover:border-primary/30 transition-all duration-200 cursor-pointer text-left"
-                                    onClick={() =>
-                                        handleTemplateClick(template)
-                                    }
-                                    onKeyDown={(e) => {
-                                        if (
-                                            e.key === "Enter" ||
-                                            e.key === " "
-                                        ) {
-                                            e.preventDefault()
-                                            handleTemplateClick(template)
-                                        }
-                                    }}
-                                    role="button"
-                                    tabIndex={0}
-                                >
-                                    <div className="min-w-0 flex-1">
-                                        <div className="flex items-center gap-2">
-                                            <div className="text-sm font-medium truncate">
-                                                {template.title}
-                                            </div>
-                                            {template.pinned && (
-                                                <Bookmark className="w-3 h-3 text-primary fill-primary shrink-0" />
-                                            )}
-                                        </div>
-                                        {template.description && (
-                                            <div className="text-xs text-muted-foreground truncate">
-                                                {template.description}
-                                            </div>
-                                        )}
-                                    </div>
-                                    {/* Actions and stats */}
-                                    <div className="relative shrink-0">
-                                        <div className="text-[11px] text-muted-foreground whitespace-nowrap group-hover:invisible">
-                                            {template.runCount > 0
-                                                ? `${dict.templates.usedCount.replace("{count}", String(template.runCount))} · ${formatLastUsed(template.lastUsedAt, dict.templates.neverUsed)}`
-                                                : dict.templates.neverUsed}
-                                        </div>
-                                        <div className="absolute inset-0 flex items-center justify-end gap-0.5 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity">
-                                            <button
-                                                type="button"
-                                                onClick={(e) => {
-                                                    e.stopPropagation()
-                                                    handleTogglePin(template)
-                                                }}
-                                                className={`p-1.5 rounded-lg transition-all ${
-                                                    template.pinned
-                                                        ? "text-primary hover:text-primary/80 hover:bg-primary/10"
-                                                        : "text-muted-foreground hover:text-foreground hover:bg-muted"
-                                                }`}
-                                                title={
-                                                    template.pinned
-                                                        ? dict.templates
-                                                              .unpin || "Unpin"
-                                                        : dict.templates.pin ||
-                                                          "Pin"
-                                                }
-                                            >
-                                                <Bookmark
-                                                    className={`w-4 h-4 ${template.pinned ? "fill-current" : ""}`}
-                                                />
-                                            </button>
-                                            <button
-                                                type="button"
-                                                onClick={(e) => {
-                                                    e.stopPropagation()
-                                                    handleEdit(template)
-                                                }}
-                                                className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
-                                                title={dict.common.edit}
-                                            >
-                                                <Edit2 className="w-4 h-4" />
-                                            </button>
-                                            <button
-                                                type="button"
-                                                onClick={(e) => {
-                                                    e.stopPropagation()
-                                                    handleDuplicate(template)
-                                                }}
-                                                className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-all"
-                                                title={
-                                                    dict.templates.duplicate ||
-                                                    "Duplicate"
-                                                }
-                                            >
-                                                <Copy className="w-4 h-4" />
-                                            </button>
-                                            <button
-                                                type="button"
-                                                onClick={(e) => {
-                                                    e.stopPropagation()
-                                                    handleDeleteClick(template)
-                                                }}
-                                                className="p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all"
-                                                title={dict.common.delete}
-                                            >
-                                                <Trash2 className="w-4 h-4" />
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            ))}
-                </div>
-            </div>
-
-            <TemplateCreateDialog
-                open={createDialogOpen}
-                onOpenChange={setCreateDialogOpen}
-                onSuccess={handleCreateSuccess}
-            />
-
-            <TemplateEditDialog
-                open={editDialogOpen}
-                onOpenChange={setEditDialogOpen}
-                template={templateToEdit}
-                onSuccess={handleEditSuccess}
-            />
-
-            {/* Delete Confirmation Dialog */}
-            <AlertDialog
-                open={deleteDialogOpen}
-                onOpenChange={setDeleteDialogOpen}
-            >
-                <AlertDialogContent className="max-w-sm">
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>
-                            {dict.templates.deleteTitle ||
-                                "Delete this template?"}
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {dict.templates.deleteDescription ||
-                                "This will permanently delete this template. This action cannot be undone."}
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>
-                            {dict.common.cancel}
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={handleDeleteConfirm}
-                            className="border border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:border-red-400"
-                        >
-                            {dict.common.delete}
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-
-            {/* Confirm Send Dialog - when there's unsent input */}
-            <AlertDialog
-                open={confirmSendDialogOpen}
-                onOpenChange={setConfirmSendDialogOpen}
-            >
-                <AlertDialogContent className="max-w-sm">
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>
-                            {dict.templates.confirmSendTitle ||
-                                "Replace current input?"}
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {dict.templates.confirmSendDescription ||
-                                "You have unsent content in the input. Sending this template will replace it."}
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel onClick={handleCancelSend}>
-                            {dict.common.cancel}
-                        </AlertDialogCancel>
-                        <AlertDialogAction onClick={handleConfirmSend}>
-                            {dict.templates.confirmSendButton ||
-                                "Send Template"}
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        </div>
-    )
-}

components/chat/ToolCallCard.tsx

@@ -1,250 +0,0 @@
-"use client"
-
-import { Check, ChevronDown, ChevronUp, Copy, Cpu } from "lucide-react"
-import type { Dispatch, SetStateAction } from "react"
-import { CodeBlock } from "@/components/code-block"
-import { isMxCellXmlComplete } from "@/lib/utils"
-import type { DiagramOperation, ToolPartLike } from "./types"
-
-interface ToolCallCardProps {
-    part: ToolPartLike
-    expandedTools: Record<string, boolean>
-    setExpandedTools: Dispatch<SetStateAction<Record<string, boolean>>>
-    onCopy: (callId: string, text: string, isToolCall: boolean) => void
-    copiedToolCallId: string | null
-    copyFailedToolCallId: string | null
-    dict: {
-        tools: { complete: string }
-        chat: { copied: string; failedToCopy: string; copyResponse: string }
-    }
-}
-
-function OperationsDisplay({ operations }: { operations: DiagramOperation[] }) {
-    return (
-        <div className="space-y-3">
-            {operations.map((op, index) => (
-                <div
-                    key={`${op.operation}-${op.cell_id}-${index}`}
-                    className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
-                >
-                    <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
-                        <span
-                            className={`text-[10px] font-medium uppercase tracking-wide ${
-                                op.operation === "delete"
-                                    ? "text-red-600"
-                                    : op.operation === "add"
-                                      ? "text-green-600"
-                                      : "text-blue-600"
-                            }`}
-                        >
-                            {op.operation}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                            cell_id: {op.cell_id}
-                        </span>
-                    </div>
-                    {op.new_xml && (
-                        <div className="px-3 py-2">
-                            <pre className="text-[11px] font-mono text-foreground/80 bg-muted/30 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
-                                {op.new_xml}
-                            </pre>
-                        </div>
-                    )}
-                </div>
-            ))}
-        </div>
-    )
-}
-
-export function ToolCallCard({
-    part,
-    expandedTools,
-    setExpandedTools,
-    onCopy,
-    copiedToolCallId,
-    copyFailedToolCallId,
-    dict,
-}: ToolCallCardProps) {
-    const callId = part.toolCallId
-    const { state, input, output } = part
-    // Default to expanded for all states (user can manually collapse if needed)
-    const isExpanded = expandedTools[callId] ?? true
-    const toolName = part.type?.replace("tool-", "")
-    const isCopied = copiedToolCallId === callId
-
-    const toggleExpanded = () => {
-        setExpandedTools((prev) => ({
-            ...prev,
-            [callId]: !isExpanded,
-        }))
-    }
-
-    const getToolDisplayName = (name: string) => {
-        switch (name) {
-            case "display_diagram":
-                return "Generate Diagram"
-            case "edit_diagram":
-                return "Edit Diagram"
-            case "get_shape_library":
-                return "Get Shape Library"
-            default:
-                return name
-        }
-    }
-
-    const handleCopy = () => {
-        let textToCopy = ""
-
-        if (input && typeof input === "object") {
-            if (input.xml) {
-                textToCopy = input.xml
-            } else if (input.operations && Array.isArray(input.operations)) {
-                textToCopy = JSON.stringify(input.operations, null, 2)
-            } else if (Object.keys(input).length > 0) {
-                textToCopy = JSON.stringify(input, null, 2)
-            }
-        }
-
-        if (
-            output &&
-            toolName === "get_shape_library" &&
-            typeof output === "string"
-        ) {
-            textToCopy = output
-        }
-
-        if (textToCopy) {
-            onCopy(callId, textToCopy, true)
-        }
-    }
-
-    return (
-        <div className="my-3 rounded-xl border border-border/60 bg-muted/30 overflow-hidden">
-            <div className="flex items-center justify-between px-4 py-3 bg-muted/50">
-                <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
-                        <Cpu className="w-3.5 h-3.5 text-primary" />
-                    </div>
-                    <span className="text-sm font-medium text-foreground/80">
-                        {getToolDisplayName(toolName)}
-                    </span>
-                </div>
-                <div className="flex items-center gap-2">
-                    {state === "input-streaming" && (
-                        <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-                    )}
-                    {state === "output-available" && (
-                        <>
-                            <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
-                                {dict.tools.complete}
-                            </span>
-                            {isExpanded && (
-                                <button
-                                    type="button"
-                                    onClick={handleCopy}
-                                    className="p-1 rounded hover:bg-muted transition-colors"
-                                    title={
-                                        copiedToolCallId === callId
-                                            ? dict.chat.copied
-                                            : copyFailedToolCallId === callId
-                                              ? dict.chat.failedToCopy
-                                              : dict.chat.copyResponse
-                                    }
-                                >
-                                    {isCopied ? (
-                                        <Check className="w-4 h-4 text-green-600" />
-                                    ) : (
-                                        <Copy className="w-4 h-4 text-muted-foreground" />
-                                    )}
-                                </button>
-                            )}
-                        </>
-                    )}
-                    {state === "output-error" &&
-                        (() => {
-                            // Check if this is a truncation (incomplete XML) vs real error
-                            const isTruncated =
-                                (toolName === "display_diagram" ||
-                                    toolName === "append_diagram") &&
-                                !isMxCellXmlComplete(input?.xml)
-                            return isTruncated ? (
-                                <span className="text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-0.5 rounded-full">
-                                    Truncated
-                                </span>
-                            ) : (
-                                <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
-                                    Error
-                                </span>
-                            )
-                        })()}
-                    {input && Object.keys(input).length > 0 && (
-                        <button
-                            type="button"
-                            onClick={toggleExpanded}
-                            className="p-1 rounded hover:bg-muted transition-colors"
-                        >
-                            {isExpanded ? (
-                                <ChevronUp className="w-4 h-4 text-muted-foreground" />
-                            ) : (
-                                <ChevronDown className="w-4 h-4 text-muted-foreground" />
-                            )}
-                        </button>
-                    )}
-                </div>
-            </div>
-            {input && isExpanded && (
-                <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
-                    {typeof input === "object" && input.xml ? (
-                        <CodeBlock code={input.xml} language="xml" />
-                    ) : typeof input === "object" &&
-                      input.operations &&
-                      Array.isArray(input.operations) ? (
-                        <OperationsDisplay operations={input.operations} />
-                    ) : typeof input === "object" &&
-                      Object.keys(input).length > 0 ? (
-                        <CodeBlock
-                            code={JSON.stringify(input, null, 2)}
-                            language="json"
-                        />
-                    ) : null}
-                </div>
-            )}
-            {output &&
-                state === "output-error" &&
-                (() => {
-                    const isTruncated =
-                        (toolName === "display_diagram" ||
-                            toolName === "append_diagram") &&
-                        !isMxCellXmlComplete(input?.xml)
-                    return (
-                        <div
-                            className={`px-4 py-3 border-t border-border/40 text-sm ${isTruncated ? "text-yellow-600" : "text-red-600"}`}
-                        >
-                            {isTruncated
-                                ? "Output truncated due to length limits. Try a simpler request or increase the maxOutputLength."
-                                : output}
-                        </div>
-                    )
-                })()}
-            {/* Show get_shape_library output on success */}
-            {output &&
-                toolName === "get_shape_library" &&
-                state === "output-available" &&
-                isExpanded && (
-                    <div className="px-4 py-3 border-t border-border/40">
-                        <div className="text-xs text-muted-foreground mb-2">
-                            Library loaded (
-                            {typeof output === "string" ? output.length : 0}{" "}
-                            chars)
-                        </div>
-                        <pre className="text-xs bg-muted/50 p-2 rounded-md overflow-auto max-h-32 whitespace-pre-wrap">
-                            {typeof output === "string"
-                                ? output.substring(0, 800) +
-                                  (output.length > 800 ? "\n..." : "")
-                                : String(output)}
-                        </pre>
-                    </div>
-                )}
-        </div>
-    )
-}

components/chat/ValidationCard.tsx

@@ -1,328 +0,0 @@
-"use client"
-
-import {
-    AlertTriangle,
-    Check,
-    ChevronDown,
-    ChevronUp,
-    Eye,
-    ImageIcon,
-    RefreshCw,
-    X,
-} from "lucide-react"
-import { useState } from "react"
-import Image from "@/components/image-with-basepath"
-import { useDictionary } from "@/hooks/use-dictionary"
-import type { ValidationResult } from "@/lib/diagram-validator"
-
-export type ValidationStatus =
-    | "idle"
-    | "capturing"
-    | "validating"
-    | "success"
-    | "success_with_warnings"
-    | "failed"
-    | "error"
-    | "skipped"
-
-export interface ValidationState {
-    status: ValidationStatus
-    attempt?: number
-    maxAttempts?: number
-    result?: ValidationResult
-    error?: string
-    imageData?: string // Base64 PNG data URL
-}
-
-interface ValidationCardProps {
-    state: ValidationState
-    onImproveWithSuggestions?: (feedback: string) => void
-}
-
-export function ValidationCard({
-    state,
-    onImproveWithSuggestions,
-}: ValidationCardProps) {
-    const dict = useDictionary()
-    const [isExpanded, setIsExpanded] = useState(
-        state.status === "validating" || state.status === "failed",
-    )
-    const [hasRequestedImprovement, setHasRequestedImprovement] =
-        useState(false)
-
-    // Generate improvement feedback from validation result
-    const generateImprovementFeedback = (): string => {
-        if (!state.result) return ""
-
-        const lines: string[] = []
-        lines.push(
-            "Please improve the diagram based on the following visual analysis feedback:",
-        )
-        lines.push("")
-
-        if (state.result.issues.length > 0) {
-            lines.push("Issues to address:")
-            for (const issue of state.result.issues) {
-                lines.push(
-                    `  - [${issue.severity}] ${issue.type}: ${issue.description}`,
-                )
-            }
-            lines.push("")
-        }
-
-        if (state.result.suggestions.length > 0) {
-            lines.push("Suggestions for improvement:")
-            for (const suggestion of state.result.suggestions) {
-                lines.push(`  - ${suggestion}`)
-            }
-            lines.push("")
-        }
-
-        lines.push("Regenerate the diagram with these improvements applied.")
-        return lines.join("\n")
-    }
-
-    const handleImproveClick = () => {
-        if (
-            !onImproveWithSuggestions ||
-            !state.result ||
-            hasRequestedImprovement
-        )
-            return
-        setHasRequestedImprovement(true)
-        const feedback = generateImprovementFeedback()
-        onImproveWithSuggestions(feedback)
-    }
-
-    // Check if we should show the improve button
-    const showImproveButton =
-        onImproveWithSuggestions &&
-        state.result &&
-        (state.status === "success" ||
-            state.status === "success_with_warnings" ||
-            state.status === "skipped") &&
-        (state.result.issues.length > 0 || state.result.suggestions.length > 0)
-
-    const getStatusDisplay = () => {
-        switch (state.status) {
-            case "capturing":
-                return {
-                    label: dict.validation.capturing,
-                    color: "text-blue-600 bg-blue-50",
-                    icon: (
-                        <div className="h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
-                    ),
-                }
-            case "validating":
-                return {
-                    label: state.attempt
-                        ? dict.validation.validatingWithAttempt
-                              .replace("{attempt}", String(state.attempt))
-                              .replace("{max}", String(state.maxAttempts || 3))
-                        : dict.validation.validating,
-                    color: "text-blue-600 bg-blue-50",
-                    icon: (
-                        <div className="h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
-                    ),
-                }
-            case "success":
-                return {
-                    label: dict.validation.valid,
-                    color: "text-green-600 bg-green-50",
-                    icon: <Check className="h-4 w-4" aria-hidden="true" />,
-                }
-            case "success_with_warnings":
-                return {
-                    label: dict.validation.validWithWarnings,
-                    color: "text-amber-600 bg-amber-50",
-                    icon: (
-                        <AlertTriangle className="h-4 w-4" aria-hidden="true" />
-                    ),
-                }
-            case "failed":
-                return {
-                    label: dict.validation.issuesFound,
-                    color: "text-yellow-600 bg-yellow-50",
-                    icon: (
-                        <AlertTriangle className="h-4 w-4" aria-hidden="true" />
-                    ),
-                }
-            case "error":
-                return {
-                    label: dict.validation.error,
-                    color: "text-red-600 bg-red-50",
-                    icon: <X className="h-4 w-4" aria-hidden="true" />,
-                }
-            case "skipped":
-                return {
-                    label: dict.validation.skipped,
-                    color: "text-gray-600 bg-gray-50",
-                    icon: <Check className="h-4 w-4" aria-hidden="true" />,
-                }
-            default:
-                return null
-        }
-    }
-
-    const statusDisplay = getStatusDisplay()
-    if (!statusDisplay || state.status === "idle") return null
-
-    return (
-        <div className="my-3 rounded-xl border border-border/60 bg-muted/30 overflow-hidden">
-            <div className="flex items-center justify-between px-4 py-3 bg-muted/50">
-                <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
-                        <Eye
-                            className="w-3.5 h-3.5 text-primary"
-                            aria-hidden="true"
-                        />
-                    </div>
-                    <span className="text-sm font-medium text-foreground/80">
-                        {dict.validation.title}
-                    </span>
-                </div>
-                <div className="flex items-center gap-2">
-                    <span
-                        className={`text-xs font-medium px-2 py-0.5 rounded-full flex items-center gap-1 ${statusDisplay.color}`}
-                    >
-                        {statusDisplay.icon}
-                        <span className="ml-1">{statusDisplay.label}</span>
-                    </span>
-                    {(state.result || state.error) && (
-                        <button
-                            type="button"
-                            onClick={() => setIsExpanded(!isExpanded)}
-                            className="p-1 rounded hover:bg-muted transition-colors"
-                        >
-                            {isExpanded ? (
-                                <ChevronUp
-                                    className="w-4 h-4 text-muted-foreground"
-                                    aria-hidden="true"
-                                />
-                            ) : (
-                                <ChevronDown
-                                    className="w-4 h-4 text-muted-foreground"
-                                    aria-hidden="true"
-                                />
-                            )}
-                        </button>
-                    )}
-                </div>
-            </div>
-
-            {/* Validation details when expanded */}
-            {isExpanded && (state.result || state.imageData) && (
-                <div className="px-4 py-3 border-t border-border/40 bg-muted/20 space-y-3">
-                    {/* Captured image */}
-                    {state.imageData && (
-                        <div>
-                            <div className="text-xs font-medium text-foreground/70 mb-2 flex items-center gap-1">
-                                <ImageIcon
-                                    className="h-3 w-3"
-                                    aria-hidden="true"
-                                />
-                                {dict.validation.capturedScreenshot}
-                            </div>
-                            <div className="rounded-lg border border-border/50 overflow-hidden bg-white">
-                                <Image
-                                    src={state.imageData}
-                                    alt="Captured diagram for validation"
-                                    width={400}
-                                    height={300}
-                                    className="w-full h-auto max-h-48 object-contain"
-                                    unoptimized
-                                />
-                            </div>
-                        </div>
-                    )}
-
-                    {/* Issues */}
-                    {state.result && state.result.issues.length > 0 && (
-                        <div>
-                            <div className="text-xs font-medium text-foreground/70 mb-2">
-                                {dict.validation.issuesFoundLabel}
-                            </div>
-                            <div className="space-y-2">
-                                {state.result.issues.map((issue, index) => (
-                                    <div
-                                        key={index}
-                                        className={`text-xs px-3 py-2 rounded-lg border ${
-                                            issue.severity === "critical"
-                                                ? "bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300"
-                                                : "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-300"
-                                        }`}
-                                    >
-                                        <span className="font-medium uppercase text-[10px] mr-2">
-                                            [{issue.type}]
-                                        </span>
-                                        {issue.description}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    )}
-
-                    {/* Suggestions */}
-                    {state.result && state.result.suggestions.length > 0 && (
-                        <div>
-                            <div className="text-xs font-medium text-foreground/70 mb-2">
-                                {dict.validation.suggestions}
-                            </div>
-                            <ul className="text-xs text-foreground/60 space-y-1 list-disc list-inside">
-                                {state.result.suggestions.map(
-                                    (suggestion, index) => (
-                                        <li key={index}>{suggestion}</li>
-                                    ),
-                                )}
-                            </ul>
-                        </div>
-                    )}
-
-                    {/* Valid result message */}
-                    {state.result?.valid &&
-                        state.result.issues.length === 0 && (
-                            <div className="text-xs text-green-600 dark:text-green-400">
-                                {dict.validation.passedValidation}
-                            </div>
-                        )}
-                </div>
-            )}
-
-            {/* Improve with Suggestions button - shown when validation passed but has suggestions */}
-            {showImproveButton && (
-                <div className="px-4 py-3 border-t border-border/40 bg-muted/10">
-                    {hasRequestedImprovement ? (
-                        <div className="flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-green-600 dark:text-green-400">
-                            <Check className="h-4 w-4" aria-hidden="true" />
-                            {dict.validation.improvementRequested}
-                        </div>
-                    ) : (
-                        <>
-                            <button
-                                type="button"
-                                onClick={handleImproveClick}
-                                className="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-lg transition-colors"
-                            >
-                                <RefreshCw
-                                    className="h-4 w-4"
-                                    aria-hidden="true"
-                                />
-                                {dict.validation.improveWithSuggestions}
-                            </button>
-                            <p className="text-xs text-muted-foreground mt-2 text-center">
-                                {dict.validation.regenerateWithFeedback}
-                            </p>
-                        </>
-                    )}
-                </div>
-            )}
-
-            {/* Error details when expanded */}
-            {isExpanded && state.error && (
-                <div className="px-4 py-3 border-t border-border/40 bg-red-50/50">
-                    <div className="text-xs text-red-600">{state.error}</div>
-                </div>
-            )}
-        </div>
-    )
-}

components/chat/types.ts

@@ -1,16 +0,0 @@
-export interface DiagramOperation {
-    operation: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
-
-export interface ToolPartLike {
-    type: string
-    toolCallId: string
-    state?: string
-    input?: {
-        xml?: string
-        operations?: DiagramOperation[]
-    } & Record<string, unknown>
-    output?: string
-}

components/code-block.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import { Highlight, themes } from "prism-react-renderer"
-
-interface CodeBlockProps {
-    code: string
-    language?: "xml" | "json"
-}
-
-export function CodeBlock({ code, language = "xml" }: CodeBlockProps) {
-    return (
-        <div className="overflow-hidden w-full">
-            <Highlight theme={themes.github} code={code} language={language}>
-                {({
-                    className: _className,
-                    style,
-                    tokens,
-                    getLineProps,
-                    getTokenProps,
-                }) => (
-                    <pre
-                        className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all"
-                        style={{
-                            ...style,
-                            fontFamily:
-                                "var(--font-mono), ui-monospace, monospace",
-                            backgroundColor: "transparent",
-                            margin: 0,
-                            padding: 0,
-                            wordBreak: "break-all",
-                            whiteSpace: "pre-wrap",
-                        }}
-                    >
-                        {tokens.map((line, i) => (
-                            <div
-                                key={i}
-                                {...getLineProps({ line })}
-                                style={{ wordBreak: "break-all" }}
-                            >
-                                {line.map((token, key) => (
-                                    <span
-                                        key={key}
-                                        {...getTokenProps({ token })}
-                                    />
-                                ))}
-                            </div>
-                        ))}
-                    </pre>
-                )}
-            </Highlight>
-        </div>
-    )
-}

components/dev-xml-simulator.tsx

@@ -1,363 +0,0 @@
-"use client"
-
-import { useEffect, useRef, useState } from "react"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { wrapWithMxFile } from "@/lib/utils"
-
-// Dev XML presets for streaming simulator
-const DEV_XML_PRESETS: Record<string, string> = {
-    "Simple Box": `<mxCell id="2" value="Hello World" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-  <mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
-</mxCell>`,
-    "Two Boxes with Arrow": `<mxCell id="2" value="Start" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
-  <mxGeometry x="100" y="100" width="100" height="50" as="geometry"/>
-</mxCell>
-<mxCell id="3" value="End" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
-  <mxGeometry x="300" y="100" width="100" height="50" as="geometry"/>
-</mxCell>
-<mxCell id="4" value="" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>`,
-    Flowchart: `<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
-  <mxGeometry x="160" y="40" width="80" height="40" as="geometry"/>
-</mxCell>
-<mxCell id="3" value="Process A" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-  <mxGeometry x="140" y="120" width="120" height="60" as="geometry"/>
-</mxCell>
-<mxCell id="4" value="Decision" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
-  <mxGeometry x="150" y="220" width="100" height="80" as="geometry"/>
-</mxCell>
-<mxCell id="5" value="Process B" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-  <mxGeometry x="300" y="230" width="120" height="60" as="geometry"/>
-</mxCell>
-<mxCell id="6" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
-  <mxGeometry x="160" y="340" width="80" height="40" as="geometry"/>
-</mxCell>
-<mxCell id="7" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="8" style="endArrow=classic;html=1;" edge="1" parent="1" source="3" target="4">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="9" value="Yes" style="endArrow=classic;html=1;" edge="1" parent="1" source="4" target="6">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="10" value="No" style="endArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="4" target="5">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>`,
-    "Truncated (Error Test)": `<mxCell id="2" value="This cell is truncated" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-  <mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
-</mxCell>
-<mxCell id="3" value="Incomplete" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor`,
-    "HTML Escape + Cell Truncate": `<mxCell id="2" value="<b>Chain-of-Thought Prompting</b><br/><font size='12'>Eliciting Reasoning in Large Language Models</font>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontStyle=1;" vertex="1" parent="1">
-  <mxGeometry x="40" y="40" width="720" height="60" as="geometry"/>
-</mxCell>
-<mxCell id="3" value="<b>Problem: LLM Reasoning Limitations</b><br/>• Scaling parameters alone insufficient for logical tasks<br/>• Arithmetic, commonsense, symbolic reasoning challenges<br/>• Standard prompting fails on multi-step problems" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
-  <mxGeometry x="40" y="120" width="340" height="120" as="geometry"/>
-</mxCell>
-<mxCell id="4" value="<b>Traditional Approaches</b><br/>1. <b>Finetuning:</b> Expensive, task-specific<br/>2. <b>Standard Few-Shot:</b> Input→Output pairs<br/>   (No explanation of reasoning)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
-  <mxGeometry x="420" y="120" width="340" height="120" as="geometry"/>
-</mxCell>
-<mxCell id="5" value="<b>CoT Methodology</b><br/>• Add reasoning steps to few-shot examples<br/>• Natural language intermediate steps<br/>• No parameter updates needed<br/>• Model learns to generate own thought process" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
-  <mxGeometry x="40" y="260" width="340" height="100" as="geometry"/>
-</mxCell>
-<mxCell id="6" value="<b>Example Comparison</b><br/><b>Standard:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: 11.<br/><br/><b>CoT:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: Roger started with 5 balls. 2 cans of 3 tennis balls each is 6 tennis balls. 5 + 6 = 11. The answer is 11." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
-  <mxGeometry x="420" y="260" width="340" height="140" as="geometry"/>
-</mxCell>
-<mxCell id="7" value="<b>Experimental Models</b><br/>• GPT-3 (175B)<br/>• LaMDA (137B)<br/>• PaLM (540B)<br/>• UL2 (20B)<br/>• Codex" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
-  <mxGeometry x="40" y="380" width="340" height="100" as="geometry"/>
-</mxCell>
-<mxCell id="8" value="<b>Reasoning Domains Tested</b><br/>1. <b>Arithmetic:</b> GSM8K, SVAMP, ASDiv, AQuA, MAWPS<br/>2. <b>Commonsense:</b> CSQA, StrategyQA, Date Understanding, Sports Understanding<br/>3. <b>Symbolic:</b> Last Letter Concatenation, Coin Flip" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
-  <mxGeometry x="420" y="420" width="340" height="100" as="geometry"/>
-</mxCell>
-<mxCell id="9" value="<b>Key Results: Arithmetic</b><br/>• PaLM 540B + CoT: <b>56.9%</b> on GSM8K<br/>   (vs 17.9% standard)<br/>• Surpassed finetuned GPT-3 (55%)<br/>• With calculator: <b>58.6%</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
-  <mxGeometry x="40" y="500" width="220" height="100" as="geometry"/>
-</mxCell>
-<mxCell id="10" value="<b>Key Results: Commonsense</b><br/>• StrategyQA: <b>75.6%</b><br/>   (vs 69.4% SOTA)<br/>• Sports Understanding: <b>95.4%</b><br/>   (vs 84% human)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
-  <mxGeometry x="280" y="500" width="220" height="100" as="geometry"/>
-</mxCell>
-<mxCell id="11" value="<b>Key Results: Symbolic</b><br/>• OOD Generalization<br/>• Coin Flip: Trained on 2 flips<br/>   Works on 3-4 flips with CoT<br/>• Standard prompting fails" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
-  <mxGeometry x="540" y="500" width="220" height="100" as="geometry"/>
-</mxCell>
-<mxCell id="12" value="<b>Emergent Ability of Scale</b><br/>• Small models (&lt;10B): No benefit, often harmful<br/>• Large models (100B+): Reasoning emerges<br/>• CoT gains increase dramatically with scale" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
-  <mxGeometry x="40" y="620" width="340" height="80" as="geometry"/>
-</mxCell>
-<mxCell id="13" value="<b>Ablation Studies</b><br/>1. Equation only: Worse than CoT<br/>2. Variable compute (...): No improvement<br/>3. Answer first, then reasoning: Same as baseline<br/>→ Content matters, not just extra tokens" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
-  <mxGeometry x="420" y="620" width="340" height="80" as="geometry"/>
-</mxCell>
-<mxCell id="14" value="<b>Error Analysis</b><br/>• Semantic understanding errors<br/>• One-step missing errors<br/>• Calculation errors<br/>• Larger models reduce semantic/missing-step errors" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
-  <mxGeometry x="40" y="720" width="340" height="80" as="geometry"/>
-</mxCell>
-<mxCell id="15" value="<b>Conclusion</b><br/>• CoT unlocks reasoning potential<br/>• Simple paradigm: &quot;show your work&quot;<br/>• Emergent capability of large models<br/>• No specialized architecture needed" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
-  <mxGeometry x="420" y="720" width="340" height="80" as="geometry"/>
-</mxCell>
-<mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="3" target="5">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="4" target="6">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="5" target="7">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="6" target="8">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.25;entryY=0;" edge="1" parent="1" source="7" target="9">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="7" target="10">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.75;entryY=0;" edge="1" parent="1" source="7" target="11">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="9" target="12">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="10" target="13">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="11" target="14">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="12" target="15">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="13" target="15">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-<mxCell id="28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="14" target="15">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>`,
-}
-
-interface DevXmlSimulatorProps {
-    setMessages: React.Dispatch<React.SetStateAction<any[]>>
-    onDisplayChart: (xml: string) => void
-    onShowQuotaToast?: () => void
-}
-
-export function DevXmlSimulator({
-    setMessages,
-    onDisplayChart,
-    onShowQuotaToast,
-}: DevXmlSimulatorProps) {
-    const dict = useDictionary()
-    const [devXml, setDevXml] = useState("")
-    const [isSimulating, setIsSimulating] = useState(false)
-    const [devIntervalMs, setDevIntervalMs] = useState(1)
-    const [devChunkSize, setDevChunkSize] = useState(10)
-    const devStopRef = useRef(false)
-    const devXmlInitializedRef = useRef(false)
-
-    // Restore dev XML from localStorage on mount (after hydration)
-    useEffect(() => {
-        const saved = localStorage.getItem("dev-xml-simulator")
-        if (saved) setDevXml(saved)
-        devXmlInitializedRef.current = true
-    }, [])
-
-    // Save dev XML to localStorage (only after initial load)
-    useEffect(() => {
-        if (devXmlInitializedRef.current) {
-            localStorage.setItem("dev-xml-simulator", devXml)
-        }
-    }, [devXml])
-
-    const handleDevSimulate = async () => {
-        if (!devXml.trim() || isSimulating) return
-
-        setIsSimulating(true)
-        devStopRef.current = false
-        const toolCallId = `dev-sim-${Date.now()}`
-        const xml = devXml.trim()
-
-        // Add user message and initial assistant message with empty XML
-        const userMsg = {
-            id: `user-${Date.now()}`,
-            role: "user" as const,
-            parts: [
-                {
-                    type: "text" as const,
-                    text: dict.dev.simulatingMessage,
-                },
-            ],
-        }
-        const assistantMsg = {
-            id: `assistant-${Date.now()}`,
-            role: "assistant" as const,
-            parts: [
-                {
-                    type: "tool-display_diagram" as const,
-                    toolCallId,
-                    state: "input-streaming" as const,
-                    input: { xml: "" },
-                },
-            ],
-        }
-        setMessages((prev) => [...prev, userMsg, assistantMsg] as any)
-
-        // Stream characters progressively
-        for (let i = 0; i < xml.length; i += devChunkSize) {
-            if (devStopRef.current) {
-                setIsSimulating(false)
-                return
-            }
-
-            const chunk = xml.slice(0, i + devChunkSize)
-
-            setMessages((prev) => {
-                const updated = [...prev]
-                const lastMsg = updated[updated.length - 1] as any
-                if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
-                    lastMsg.parts[0].input = { xml: chunk }
-                }
-                return updated
-            })
-
-            await new Promise((r) => setTimeout(r, devIntervalMs))
-        }
-
-        if (devStopRef.current) {
-            setIsSimulating(false)
-            return
-        }
-
-        // Finalize: set state to output-available
-        setMessages((prev) => {
-            const updated = [...prev]
-            const lastMsg = updated[updated.length - 1] as any
-            if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
-                lastMsg.parts[0].state = "output-available"
-                lastMsg.parts[0].output = dict.dev.successMessage
-                lastMsg.parts[0].input = { xml }
-            }
-            return updated
-        })
-
-        // Display the final diagram
-        const fullXml = wrapWithMxFile(xml)
-        onDisplayChart(fullXml)
-
-        setIsSimulating(false)
-    }
-
-    return (
-        <div className="border-t border-dashed border-orange-500/50 px-4 py-2 bg-orange-50/50 dark:bg-orange-950/30">
-            <details>
-                <summary className="text-xs text-orange-600 dark:text-orange-400 cursor-pointer font-medium">
-                    {dict.dev.title}
-                </summary>
-                <div className="mt-2 space-y-2">
-                    <div className="flex items-center gap-2">
-                        <label className="text-xs text-muted-foreground whitespace-nowrap">
-                            {dict.dev.preset}
-                        </label>
-                        <select
-                            onChange={(e) => {
-                                if (e.target.value) {
-                                    setDevXml(DEV_XML_PRESETS[e.target.value])
-                                }
-                            }}
-                            className="flex-1 text-xs p-1 border rounded bg-background"
-                            defaultValue=""
-                        >
-                            <option value="" disabled>
-                                {dict.dev.selectPreset}
-                            </option>
-                            {Object.keys(DEV_XML_PRESETS).map((name) => (
-                                <option key={name} value={name}>
-                                    {name}
-                                </option>
-                            ))}
-                        </select>
-                        <button
-                            type="button"
-                            onClick={() => setDevXml("")}
-                            className="px-2 py-1 text-xs text-muted-foreground hover:text-foreground border rounded"
-                        >
-                            {dict.dev.clear}
-                        </button>
-                    </div>
-                    <textarea
-                        value={devXml}
-                        onChange={(e) => setDevXml(e.target.value)}
-                        placeholder={dict.dev.placeholder}
-                        className="w-full h-24 text-xs font-mono p-2 border rounded bg-background"
-                    />
-                    <div className="flex items-center gap-4">
-                        <div className="flex items-center gap-2 flex-1">
-                            <label className="text-xs text-muted-foreground whitespace-nowrap">
-                                {dict.dev.interval}
-                            </label>
-                            <input
-                                type="range"
-                                min="1"
-                                max="200"
-                                step="1"
-                                value={devIntervalMs}
-                                onChange={(e) =>
-                                    setDevIntervalMs(Number(e.target.value))
-                                }
-                                className="flex-1 h-1 accent-orange-500"
-                            />
-                            <span className="text-xs text-muted-foreground w-12">
-                                {devIntervalMs}ms
-                            </span>
-                        </div>
-                        <div className="flex items-center gap-2">
-                            <label className="text-xs text-muted-foreground whitespace-nowrap">
-                                {dict.dev.chars}
-                            </label>
-                            <input
-                                type="number"
-                                min="1"
-                                max="100"
-                                value={devChunkSize}
-                                onChange={(e) =>
-                                    setDevChunkSize(
-                                        Math.max(1, Number(e.target.value)),
-                                    )
-                                }
-                                className="w-14 text-xs p-1 border rounded bg-background"
-                            />
-                        </div>
-                    </div>
-                    <div className="flex gap-2">
-                        <button
-                            type="button"
-                            onClick={handleDevSimulate}
-                            disabled={isSimulating || !devXml.trim()}
-                            className="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
-                        >
-                            {isSimulating
-                                ? dict.dev.streaming
-                                : `${dict.dev.simulate} (${devChunkSize} chars/${devIntervalMs}ms)`}
-                        </button>
-                        {isSimulating && (
-                            <button
-                                type="button"
-                                onClick={() => {
-                                    devStopRef.current = true
-                                }}
-                                className="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
-                            >
-                                {dict.dev.stop}
-                            </button>
-                        )}
-                        {onShowQuotaToast && (
-                            <button
-                                type="button"
-                                onClick={onShowQuotaToast}
-                                className="px-3 py-1 text-xs bg-purple-500 text-white rounded hover:bg-purple-600"
-                            >
-                                {dict.dev.testQuotaToast}
-                            </button>
-                        )}
-                    </div>
-                </div>
-            </details>
-        </div>
-    )
-}

components/error-toast.tsx

@@ -1,44 +0,0 @@
-"use client"
-
-import type React from "react"
-
-interface ErrorToastProps {
-    message: React.ReactNode
-    onDismiss: () => void
-}
-
-export function ErrorToast({ message, onDismiss }: ErrorToastProps) {
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" || e.key === " " || e.key === "Escape") {
-            e.preventDefault()
-            onDismiss()
-        }
-    }
-
-    return (
-        <div
-            role="alert"
-            aria-live="polite"
-            tabIndex={0}
-            onClick={onDismiss}
-            onKeyDown={handleKeyDown}
-            className="flex items-center gap-3 bg-card border border-border/50 px-4 py-3 rounded-xl shadow-sm cursor-pointer hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors"
-        >
-            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-destructive/10 flex-shrink-0">
-                <svg
-                    className="w-4 h-4 text-destructive"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                >
-                    <path
-                        fillRule="evenodd"
-                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                    />
-                </svg>
-            </div>
-            <span className="text-sm text-foreground">{message}</span>
-        </div>
-    )
-}

components/file-preview-list.tsx

@@ -1,147 +1,49 @@
-"use client"
+"use client";
 
-import { FileCode, FileText, Link, Loader2, X } from "lucide-react"
-import { useEffect, useRef, useState } from "react"
-import Image from "@/components/image-with-basepath"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
-
-function formatCharCount(count: number): string {
-    if (count >= 1000) {
-        return `${(count / 1000).toFixed(1)}k`
-    }
-    return String(count)
-}
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { X } from "lucide-react";
 
 interface FilePreviewListProps {
-    files: File[]
-    onRemoveFile: (fileToRemove: File) => void
-    pdfData?: Map<
-        File,
-        { text: string; charCount: number; isExtracting: boolean }
-    >
-    urlData?: Map<
-        string,
-        { url: string; title: string; charCount: number; isExtracting: boolean }
-    >
-    onRemoveUrl?: (url: string) => void
+    files: File[];
+    onRemoveFile: (fileToRemove: File) => void;
 }
 
-export function FilePreviewList({
-    files,
-    onRemoveFile,
-    pdfData = new Map(),
-    urlData,
-    onRemoveUrl,
-}: FilePreviewListProps) {
-    const dict = useDictionary()
-    const [selectedImage, setSelectedImage] = useState<string | null>(null)
-    const [imageUrls, setImageUrls] = useState<Map<File, string>>(new Map())
-    const imageUrlsRef = useRef<Map<File, string>>(new Map())
-    // Create and cleanup object URLs when files change
-    useEffect(() => {
-        const currentUrls = imageUrlsRef.current
-        const newUrls = new Map<File, string>()
+export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
+    const [selectedImage, setSelectedImage] = useState<string | null>(null);
 
-        files.forEach((file) => {
-            if (file.type.startsWith("image/")) {
-                // Reuse existing URL if file is already tracked
-                const existingUrl = currentUrls.get(file)
-                if (existingUrl) {
-                    newUrls.set(file, existingUrl)
-                } else {
-                    newUrls.set(file, URL.createObjectURL(file))
-                }
-            }
-        })
-        // Revoke URLs for files that are no longer in the list
-        currentUrls.forEach((url, file) => {
-            if (!newUrls.has(file)) {
-                URL.revokeObjectURL(url)
-            }
-        })
-
-        imageUrlsRef.current = newUrls
-        setImageUrls(newUrls)
-    }, [files])
-    // Cleanup all URLs on unmount only
+    // Cleanup object URLs on unmount
     useEffect(() => {
+        const objectUrls = files
+            .filter((file) => file.type.startsWith("image/"))
+            .map((file) => URL.createObjectURL(file));
+
         return () => {
-            imageUrlsRef.current.forEach((url) => {
-                URL.revokeObjectURL(url)
-            })
-            // Clear the ref so StrictMode remount creates fresh URLs
-            imageUrlsRef.current = new Map()
-        }
-    }, [])
-    // Clear selected image if its URL was revoked
-    useEffect(() => {
-        if (
-            selectedImage &&
-            !Array.from(imageUrls.values()).includes(selectedImage)
-        ) {
-            setSelectedImage(null)
-        }
-    }, [imageUrls, selectedImage])
+            objectUrls.forEach(URL.revokeObjectURL);
+        };
+    }, [files]);
 
-    if (files.length === 0 && (!urlData || urlData.size === 0)) return null
+    if (files.length === 0) return null;
 
     return (
         <>
             <div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
                 {files.map((file, index) => {
-                    const imageUrl = imageUrls.get(file) || null
-                    const pdfInfo = pdfData.get(file)
+                    const imageUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : null;
                     return (
                         <div key={file.name + index} className="relative group">
                             <div
-                                className={`w-20 h-20 border rounded-md overflow-hidden bg-muted ${
-                                    file.type.startsWith("image/") && imageUrl
-                                        ? "cursor-pointer"
-                                        : ""
-                                }`}
-                                onClick={() =>
-                                    file.type.startsWith("image/") &&
-                                    imageUrl &&
-                                    setSelectedImage(imageUrl)
-                                }
+                                className="w-20 h-20 border rounded-md overflow-hidden bg-muted cursor-pointer"
+                                onClick={() => imageUrl && setSelectedImage(imageUrl)}
                             >
-                                {file.type.startsWith("image/") && imageUrl ? (
+                                {file.type.startsWith("image/") ? (
                                     <Image
-                                        src={imageUrl}
+                                        src={imageUrl!}
                                         alt={file.name}
                                         width={80}
                                         height={80}
                                         className="object-cover w-full h-full"
-                                        unoptimized
                                     />
-                                ) : isPdfFile(file) || isTextFile(file) ? (
-                                    <div className="flex flex-col items-center justify-center h-full p-1">
-                                        {pdfInfo?.isExtracting ? (
-                                            <Loader2 className="h-6 w-6 text-blue-500 mb-1 animate-spin" />
-                                        ) : isPdfFile(file) ? (
-                                            <FileText className="h-6 w-6 text-red-500 mb-1" />
-                                        ) : (
-                                            <FileCode className="h-6 w-6 text-blue-500 mb-1" />
-                                        )}
-                                        <span className="text-xs text-center truncate w-full px-1">
-                                            {file.name.length > 10
-                                                ? `${file.name.slice(0, 7)}...`
-                                                : file.name}
-                                        </span>
-                                        {pdfInfo?.isExtracting ? (
-                                            <span className="text-[10px] text-muted-foreground">
-                                                {dict.file.reading}
-                                            </span>
-                                        ) : pdfInfo?.charCount ? (
-                                            <span className="text-[10px] text-green-600 font-medium">
-                                                {formatCharCount(
-                                                    pdfInfo.charCount,
-                                                )}{" "}
-                                                {dict.file.chars}
-                                            </span>
-                                        ) : null}
-                                    </div>
                                 ) : (
                                     <div className="flex items-center justify-center h-full text-xs text-center p-1">
                                         {file.name}
@@ -152,67 +54,15 @@ export function FilePreviewList({
                                 type="button"
                                 onClick={() => onRemoveFile(file)}
                                 className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                                aria-label={dict.file.removeFile}
+                                aria-label="Remove file"
                             >
                                 <X className="h-3 w-3" />
                             </button>
                         </div>
-                    )
+                    );
                 })}
-                {/* URL previews */}
-                {urlData && urlData.size > 0 && (
-                    <div className="flex flex-wrap gap-2">
-                        {Array.from(urlData.entries()).map(
-                            ([url, data], index) => (
-                                <div
-                                    key={url + index}
-                                    className="relative group"
-                                >
-                                    <div className="w-20 h-20 border rounded-md overflow-hidden bg-muted">
-                                        <div className="flex flex-col items-center justify-center h-full p-1">
-                                            {data.isExtracting ? (
-                                                <>
-                                                    <Loader2 className="h-6 w-6 text-blue-500 mb-1 animate-spin" />
-                                                    <span className="text-[10px] text-muted-foreground">
-                                                        {dict.file.reading}
-                                                    </span>
-                                                </>
-                                            ) : (
-                                                <>
-                                                    <Link className="h-6 w-6 text-blue-500 mb-1" />
-                                                    <span className="text-xs text-center truncate w-full px-1">
-                                                        {data.title.length > 10
-                                                            ? `${data.title.slice(0, 7)}...`
-                                                            : data.title}
-                                                    </span>
-                                                    {data.charCount && (
-                                                        <span className="text-[10px] text-green-600 font-medium">
-                                                            {formatCharCount(
-                                                                data.charCount,
-                                                            )}{" "}
-                                                            {dict.file.chars}
-                                                        </span>
-                                                    )}
-                                                </>
-                                            )}
-                                        </div>
-                                    </div>
-                                    {onRemoveUrl && (
-                                        <button
-                                            type="button"
-                                            onClick={() => onRemoveUrl(url)}
-                                            className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                                            aria-label={dict.file.removeFile}
-                                        >
-                                            <X className="h-3 w-3" />
-                                        </button>
-                                    )}
-                                </div>
-                            ),
-                        )}
-                    </div>
-                )}
             </div>
+
             {/* Image Modal/Lightbox */}
             {selectedImage && (
                 <div
@@ -222,7 +72,7 @@ export function FilePreviewList({
                     <button
                         className="absolute top-4 right-4 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
                         onClick={() => setSelectedImage(null)}
-                        aria-label={dict.common.close}
+                        aria-label="Close"
                     >
                         <X className="h-6 w-6" />
                     </button>
@@ -234,11 +84,10 @@ export function FilePreviewList({
                             height={900}
                             className="object-contain max-w-full max-h-[90vh] w-auto h-auto"
                             onClick={(e) => e.stopPropagation()}
-                            unoptimized
                         />
                     </div>
                 </div>
             )}
         </>
-    )
+    );
 }

components/history-dialog.tsx

@@ -1,8 +1,5 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import Image from "@/components/image-with-basepath"
-import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
@@ -10,74 +7,61 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from "@/components/ui/dialog"
-import { useDiagram } from "@/contexts/diagram-context"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { formatMessage } from "@/lib/i18n/utils"
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { useDiagram } from "@/contexts/diagram-context";
 
 interface HistoryDialogProps {
-    showHistory: boolean
-    onToggleHistory: (show: boolean) => void
+    showHistory: boolean;
+    onToggleHistory: (show: boolean) => void;
 }
 
 export function HistoryDialog({
     showHistory,
     onToggleHistory,
 }: HistoryDialogProps) {
-    const dict = useDictionary()
-    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram()
-    const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
-
-    const handleClose = () => {
-        setSelectedIndex(null)
-        onToggleHistory(false)
-    }
-
-    const handleConfirmRestore = () => {
-        if (selectedIndex !== null) {
-            // Skip validation for trusted history snapshots
-            onDisplayChart(diagramHistory[selectedIndex].xml, true)
-            handleClose()
-        }
-    }
+    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
+            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
                 <DialogHeader>
-                    <DialogTitle>{dict.history.title}</DialogTitle>
+                    <DialogTitle>Diagram History</DialogTitle>
                     <DialogDescription>
-                        {dict.history.description}
+                        Here saved each diagram before AI modification.
+                        <br />
+                        Click on a diagram to restore it
                     </DialogDescription>
                 </DialogHeader>
 
                 {diagramHistory.length === 0 ? (
                     <div className="text-center p-4 text-gray-500">
-                        {dict.history.noHistory}
+                        No history available yet. Send messages to create
+                        diagram history.
                     </div>
                 ) : (
                     <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
                         {diagramHistory.map((item, index) => (
                             <div
                                 key={index}
-                                className={`border rounded-md p-2 cursor-pointer hover:border-primary transition-colors ${
-                                    selectedIndex === index
-                                        ? "border-primary ring-2 ring-primary"
-                                        : ""
-                                }`}
-                                onClick={() => setSelectedIndex(index)}
+                                className="border rounded-md p-2 cursor-pointer hover:border-primary transition-colors"
+                                onClick={() => {
+                                    onDisplayChart(item.xml);
+                                    onToggleHistory(false);
+                                }}
                             >
                                 <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
                                     <Image
                                         src={item.svg}
-                                        alt={`${dict.history.version} ${index + 1}`}
+                                        alt={`Diagram version ${index + 1}`}
                                         width={200}
                                         height={100}
                                         className="object-contain w-full h-full p-1"
                                     />
                                 </div>
                                 <div className="text-xs text-center mt-1 text-gray-500">
-                                    {dict.history.version} {index + 1}
+                                    Version {index + 1}
                                 </div>
                             </div>
                         ))}
@@ -85,30 +69,14 @@ export function HistoryDialog({
                 )}
 
                 <DialogFooter>
-                    {selectedIndex !== null ? (
-                        <>
-                            <div className="flex-1 text-sm text-muted-foreground">
-                                {formatMessage(dict.history.restoreTo, {
-                                    version: selectedIndex + 1,
-                                })}
-                            </div>
-                            <Button
-                                variant="outline"
-                                onClick={() => setSelectedIndex(null)}
-                            >
-                                {dict.common.cancel}
-                            </Button>
-                            <Button onClick={handleConfirmRestore}>
-                                {dict.common.confirm}
-                            </Button>
-                        </>
-                    ) : (
-                        <Button variant="outline" onClick={handleClose}>
-                            {dict.common.close}
-                        </Button>
-                    )}
+                    <Button
+                        variant="outline"
+                        onClick={() => onToggleHistory(false)}
+                    >
+                        Close
+                    </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
-    )
+    );
 }

components/image-with-basepath.tsx

@@ -1,16 +0,0 @@
-import NextImage, { type ImageProps } from "next/image"
-import { forwardRef } from "react"
-import { getAssetUrl } from "@/lib/base-path"
-
-export default forwardRef<HTMLImageElement, ImageProps>(
-    function Image(props, ref) {
-        const src =
-            typeof props.src === "string" &&
-            props.src.startsWith("/") &&
-            !props.src.startsWith("//")
-                ? getAssetUrl(props.src)
-                : props.src
-
-        return <NextImage {...props} src={src} ref={ref} />
-    },
-)

components/model-selector.tsx

@@ -1,439 +0,0 @@
-"use client"
-
-import {
-    AlertTriangle,
-    Bot,
-    Check,
-    ChevronDown,
-    Monitor,
-    Server,
-    Settings2,
-    User,
-} from "lucide-react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import {
-    ModelSelectorContent,
-    ModelSelectorEmpty,
-    ModelSelectorGroup,
-    ModelSelectorInput,
-    ModelSelectorItem,
-    ModelSelectorList,
-    ModelSelectorLogo,
-    ModelSelectorName,
-    ModelSelector as ModelSelectorRoot,
-    ModelSelectorSectionHeader,
-    ModelSelectorSeparator,
-    ModelSelectorTrigger,
-} from "@/components/ai-elements/model-selector"
-import { ButtonWithTooltip } from "@/components/button-with-tooltip"
-import { useDictionary } from "@/hooks/use-dictionary"
-import {
-    type FlattenedModel,
-    PROVIDER_LOGO_MAP,
-} from "@/lib/types/model-config"
-import { cn } from "@/lib/utils"
-
-interface ModelSelectorProps {
-    models: FlattenedModel[]
-    selectedModelId: string | undefined
-    onSelect: (modelId: string | undefined) => void
-    onConfigure?: () => void
-    disabled?: boolean
-    showUnvalidatedModels?: boolean
-}
-
-// Group models by providerLabel (handles duplicate providers)
-function groupModelsByProvider(
-    models: FlattenedModel[],
-): Map<string, { provider: string; models: FlattenedModel[] }> {
-    const groups = new Map<
-        string,
-        { provider: string; models: FlattenedModel[] }
-    >()
-    for (const model of models) {
-        // For server models, strip "Server · " prefix for cleaner grouping
-        const key =
-            model.source === "server"
-                ? model.providerLabel.replace(/^Server · /, "")
-                : model.providerLabel
-        const existing = groups.get(key)
-        if (existing) {
-            existing.models.push(model)
-        } else {
-            groups.set(key, { provider: model.provider, models: [model] })
-        }
-    }
-    return groups
-}
-
-export function ModelSelector({
-    models,
-    selectedModelId,
-    onSelect,
-    onConfigure,
-    disabled = false,
-    showUnvalidatedModels = false,
-}: ModelSelectorProps) {
-    const dict = useDictionary()
-    const [open, setOpen] = useState(false)
-    // Filter models based on showUnvalidatedModels setting
-    const displayModels = useMemo(() => {
-        if (showUnvalidatedModels) {
-            return models
-        }
-        return models.filter((m) => m.validated === true)
-    }, [models, showUnvalidatedModels])
-
-    // Separate server and user models
-    const serverModels = useMemo(
-        () => displayModels.filter((m) => m.source === "server"),
-        [displayModels],
-    )
-    const userModels = useMemo(
-        () => displayModels.filter((m) => m.source !== "server"),
-        [displayModels],
-    )
-
-    // Group each category separately
-    const groupedServerModels = useMemo(
-        () => groupModelsByProvider(serverModels),
-        [serverModels],
-    )
-    const groupedUserModels = useMemo(
-        () => groupModelsByProvider(userModels),
-        [userModels],
-    )
-
-    // Find selected model for display
-    const selectedModel = useMemo(
-        () => models.find((m) => m.id === selectedModelId),
-        [models, selectedModelId],
-    )
-
-    const handleSelect = (value: string) => {
-        if (value === "__server_default__") {
-            onSelect(undefined)
-        } else {
-            onSelect(value)
-        }
-        setOpen(false)
-    }
-
-    const tooltipContent = selectedModel
-        ? `${selectedModel.modelId} ${dict.modelConfig.clickToChange}`
-        : `${dict.modelConfig.usingServerDefault} ${dict.modelConfig.clickToChange}`
-
-    const wrapperRef = useRef<HTMLDivElement | null>(null)
-    const [showLabel, setShowLabel] = useState(true)
-
-    // Threshold (px) under which we hide the label (tweak as needed)
-    const HIDE_THRESHOLD = 240
-    const SHOW_THRESHOLD = 260
-    useEffect(() => {
-        const el = wrapperRef.current
-        if (!el) return
-
-        const target = el.parentElement ?? el
-
-        const ro = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                const width = entry.contentRect.width
-                setShowLabel((prev) => {
-                    // if currently showing and width dropped below hide threshold -> hide
-                    if (prev && width <= HIDE_THRESHOLD) return false
-                    // if currently hidden and width rose above show threshold -> show
-                    if (!prev && width >= SHOW_THRESHOLD) return true
-                    // otherwise keep previous state (hysteresis)
-                    return prev
-                })
-            }
-        })
-
-        ro.observe(target)
-
-        const initialWidth = target.getBoundingClientRect().width
-        setShowLabel(initialWidth >= SHOW_THRESHOLD)
-
-        return () => ro.disconnect()
-    }, [])
-
-    return (
-        <div ref={wrapperRef} className="inline-block">
-            <ModelSelectorRoot open={open} onOpenChange={setOpen}>
-                <ModelSelectorTrigger asChild>
-                    <ButtonWithTooltip
-                        tooltipContent={tooltipContent}
-                        variant="ghost"
-                        size="sm"
-                        disabled={disabled}
-                        className={cn(
-                            "hover:bg-accent gap-1.5 h-8 px-2 transition-[padding,background-color] duration-150 ease-in-out",
-                            !showLabel && "px-1.5 justify-center",
-                        )}
-                        // accessibility: expose label to screen readers
-                        aria-label={tooltipContent}
-                    >
-                        <Bot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-                        {/* show/hide visible label based on measured width */}
-                        {showLabel ? (
-                            <span className="text-xs truncate">
-                                {selectedModel
-                                    ? selectedModel.modelId
-                                    : dict.modelConfig.default}
-                            </span>
-                        ) : (
-                            // Keep an sr-only label for screen readers when hidden
-                            <span className="sr-only">
-                                {selectedModel
-                                    ? selectedModel.modelId
-                                    : dict.modelConfig.default}
-                            </span>
-                        )}
-                        <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
-                    </ButtonWithTooltip>
-                </ModelSelectorTrigger>
-
-                <ModelSelectorContent title={dict.modelConfig.selectModel}>
-                    <ModelSelectorInput
-                        placeholder={dict.modelConfig.searchModels}
-                    />
-                    <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
-                        <div className="flex-1 min-h-0 overflow-hidden">
-                            <ModelSelectorList className="overflow-y-auto scrollbar-thin">
-                                <ModelSelectorEmpty>
-                                    {displayModels.length === 0 &&
-                                    models.length > 0
-                                        ? dict.modelConfig.noVerifiedModels
-                                        : dict.modelConfig.noModelsFound}
-                                </ModelSelectorEmpty>
-
-                                {/* Server Default Option - only show when no server models are configured */}
-                                {serverModels.length === 0 && (
-                                    <ModelSelectorGroup
-                                        heading={dict.modelConfig.default}
-                                    >
-                                        <ModelSelectorItem
-                                            value="__server_default__"
-                                            onSelect={handleSelect}
-                                            className={cn(
-                                                "cursor-pointer",
-                                                !selectedModelId && "bg-accent",
-                                            )}
-                                        >
-                                            <Check
-                                                className={cn(
-                                                    "mr-2 h-4 w-4",
-                                                    !selectedModelId
-                                                        ? "opacity-100"
-                                                        : "opacity-0",
-                                                )}
-                                            />
-                                            <Server className="mr-2 h-4 w-4 text-muted-foreground" />
-                                            <ModelSelectorName>
-                                                {dict.modelConfig.serverDefault}
-                                            </ModelSelectorName>
-                                        </ModelSelectorItem>
-                                    </ModelSelectorGroup>
-                                )}
-
-                                {/* Server Models Section */}
-                                {serverModels.length > 0 && (
-                                    <>
-                                        <ModelSelectorSectionHeader
-                                            icon={<Monitor />}
-                                            label={
-                                                dict.modelConfig.serverModels
-                                            }
-                                        />
-                                        {Array.from(
-                                            groupedServerModels.entries(),
-                                        ).map(
-                                            ([
-                                                providerLabel,
-                                                {
-                                                    provider,
-                                                    models: providerModels,
-                                                },
-                                            ]) => (
-                                                <ModelSelectorGroup
-                                                    key={`server-${providerLabel}`}
-                                                    heading={providerLabel}
-                                                    className="[&>[cmdk-group-heading]]:pl-4"
-                                                >
-                                                    {providerModels.map(
-                                                        (model) => (
-                                                            <ModelSelectorItem
-                                                                key={model.id}
-                                                                value={
-                                                                    model.modelId
-                                                                }
-                                                                onSelect={() =>
-                                                                    handleSelect(
-                                                                        model.id,
-                                                                    )
-                                                                }
-                                                                className="cursor-pointer"
-                                                            >
-                                                                <Check
-                                                                    className={cn(
-                                                                        "mr-2 h-4 w-4",
-                                                                        selectedModelId ===
-                                                                            model.id
-                                                                            ? "opacity-100"
-                                                                            : "opacity-0",
-                                                                    )}
-                                                                />
-                                                                <ModelSelectorLogo
-                                                                    provider={
-                                                                        PROVIDER_LOGO_MAP[
-                                                                            provider
-                                                                        ] ||
-                                                                        provider
-                                                                    }
-                                                                    className="mr-2"
-                                                                />
-                                                                <ModelSelectorName>
-                                                                    {
-                                                                        model.modelId
-                                                                    }
-                                                                </ModelSelectorName>
-                                                                {model.isDefault && (
-                                                                    <span
-                                                                        title={
-                                                                            dict
-                                                                                .modelConfig
-                                                                                .serverDefaultModel
-                                                                        }
-                                                                        className="ml-auto text-xs text-muted-foreground"
-                                                                    >
-                                                                        {
-                                                                            dict
-                                                                                .modelConfig
-                                                                                .default
-                                                                        }
-                                                                    </span>
-                                                                )}
-                                                            </ModelSelectorItem>
-                                                        ),
-                                                    )}
-                                                </ModelSelectorGroup>
-                                            ),
-                                        )}
-                                    </>
-                                )}
-
-                                {/* User Models Section */}
-                                {userModels.length > 0 && (
-                                    <>
-                                        {serverModels.length > 0 && (
-                                            <ModelSelectorSeparator />
-                                        )}
-                                        <ModelSelectorSectionHeader
-                                            icon={<User />}
-                                            label={dict.modelConfig.userModels}
-                                        />
-                                        {Array.from(
-                                            groupedUserModels.entries(),
-                                        ).map(
-                                            ([
-                                                providerLabel,
-                                                {
-                                                    provider,
-                                                    models: providerModels,
-                                                },
-                                            ]) => (
-                                                <ModelSelectorGroup
-                                                    key={`user-${providerLabel}`}
-                                                    heading={providerLabel}
-                                                    className="[&>[cmdk-group-heading]]:pl-4"
-                                                >
-                                                    {providerModels.map(
-                                                        (model) => (
-                                                            <ModelSelectorItem
-                                                                key={model.id}
-                                                                value={
-                                                                    model.modelId
-                                                                }
-                                                                onSelect={() =>
-                                                                    handleSelect(
-                                                                        model.id,
-                                                                    )
-                                                                }
-                                                                className="cursor-pointer"
-                                                            >
-                                                                <Check
-                                                                    className={cn(
-                                                                        "mr-2 h-4 w-4",
-                                                                        selectedModelId ===
-                                                                            model.id
-                                                                            ? "opacity-100"
-                                                                            : "opacity-0",
-                                                                    )}
-                                                                />
-                                                                <ModelSelectorLogo
-                                                                    provider={
-                                                                        PROVIDER_LOGO_MAP[
-                                                                            provider
-                                                                        ] ||
-                                                                        provider
-                                                                    }
-                                                                    className="mr-2"
-                                                                />
-                                                                <ModelSelectorName>
-                                                                    {
-                                                                        model.modelId
-                                                                    }
-                                                                </ModelSelectorName>
-                                                                {model.validated !==
-                                                                    true && (
-                                                                    <span
-                                                                        title={
-                                                                            dict
-                                                                                .modelConfig
-                                                                                .unvalidatedModelWarning
-                                                                        }
-                                                                    >
-                                                                        <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
-                                                                    </span>
-                                                                )}
-                                                            </ModelSelectorItem>
-                                                        ),
-                                                    )}
-                                                </ModelSelectorGroup>
-                                            ),
-                                        )}
-                                    </>
-                                )}
-                            </ModelSelectorList>
-                        </div>
-                        {/* Pinned footer: Configure Models... + info text (z-10 above list shadow) */}
-                        <div className="relative z-10 shrink-0 border-t bg-background">
-                            {onConfigure && (
-                                <div className="px-3 py-2">
-                                    <ModelSelectorItem
-                                        value="__configure_models__"
-                                        onSelect={() => {
-                                            onConfigure()
-                                            setOpen(false)
-                                        }}
-                                        className="flex cursor-pointer items-center gap-2 rounded-sm"
-                                    >
-                                        <Settings2 className="h-4 w-4 shrink-0 text-muted-foreground" />
-                                        <ModelSelectorName>
-                                            {dict.modelConfig.configureModels}
-                                        </ModelSelectorName>
-                                    </ModelSelectorItem>
-                                </div>
-                            )}
-                            <div className="px-3 pb-2 text-xs text-muted-foreground">
-                                {showUnvalidatedModels
-                                    ? dict.modelConfig.allModelsShown
-                                    : dict.modelConfig.onlyVerifiedShown}
-                            </div>
-                        </div>
-                    </div>
-                </ModelSelectorContent>
-            </ModelSelectorRoot>
-        </div>
-    )
-}

components/quota-limit-toast.tsx

@@ -1,147 +0,0 @@
-"use client"
-
-import { Coffee, Settings, X } from "lucide-react"
-import type React from "react"
-import { FaGithub } from "react-icons/fa"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { formatMessage } from "@/lib/i18n/utils"
-
-interface QuotaLimitToastProps {
-    type?: "request" | "token"
-    used: number
-    limit: number
-    onDismiss: () => void
-    onConfigModel?: () => void
-}
-
-export function QuotaLimitToast({
-    type = "request",
-    used,
-    limit,
-    onDismiss,
-    onConfigModel,
-}: QuotaLimitToastProps) {
-    const dict = useDictionary()
-    const isTokenLimit = type === "token"
-    const isSelfHosted = process.env.NEXT_PUBLIC_SELFHOSTED === "true"
-    const formatNumber = (n: number) =>
-        n >= 1000 ? `${(n / 1000).toFixed(1)}k` : n.toString()
-
-    const quotaMessage = isTokenLimit
-        ? isSelfHosted
-            ? (dict.quota.messageTokenSelfHosted ?? dict.quota.messageToken)
-            : dict.quota.messageToken
-        : isSelfHosted
-          ? (dict.quota.messageApiSelfHosted ?? dict.quota.messageApi)
-          : dict.quota.messageApi
-
-    const tipHtml = isSelfHosted
-        ? (dict.quota.tipSelfHosted ?? dict.quota.tip)
-        : dict.quota.tip
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Escape") {
-            e.preventDefault()
-            onDismiss()
-        }
-    }
-
-    return (
-        <div
-            role="alert"
-            aria-live="polite"
-            tabIndex={0}
-            onKeyDown={handleKeyDown}
-            className="relative w-[400px] overflow-hidden rounded-xl border border-border/50 bg-card p-5 shadow-soft animate-message-in"
-        >
-            {/* Close button */}
-            <button
-                onClick={onDismiss}
-                className="absolute right-3 top-3 p-1.5 rounded-full text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
-                aria-label="Dismiss"
-            >
-                <X className="w-4 h-4" />
-            </button>
-            {/* Title row with icon */}
-            <div className="flex items-center gap-2.5 mb-3 pr-6">
-                <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-accent flex items-center justify-center">
-                    <Coffee
-                        className="w-4 h-4 text-accent-foreground"
-                        strokeWidth={2}
-                    />
-                </div>
-                <h3 className="font-semibold text-foreground text-sm">
-                    {isTokenLimit
-                        ? dict.quota.tokenLimit
-                        : dict.quota.dailyLimit}
-                </h3>
-                <span className="px-2 py-0.5 text-xs font-medium rounded-md bg-muted text-muted-foreground">
-                    {formatMessage(dict.quota.usedOf, {
-                        used: formatNumber(used),
-                        limit: formatNumber(limit),
-                    })}
-                </span>
-            </div>
-            {/* Message */}
-            <div className="text-sm text-muted-foreground leading-relaxed mb-4 space-y-2">
-                <p>{quotaMessage}</p>
-                {!isSelfHosted && (
-                    <p
-                        dangerouslySetInnerHTML={{
-                            __html: formatMessage(
-                                dict.quota.doubaoSponsorship,
-                                {
-                                    link: "https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio",
-                                },
-                            ),
-                        }}
-                    />
-                )}
-                <p
-                    dangerouslySetInnerHTML={{
-                        __html: tipHtml,
-                    }}
-                />
-                <p>{dict.quota.reset}</p>
-            </div>{" "}
-            {/* Action buttons */}
-            <div className="flex items-center gap-2">
-                {onConfigModel && (
-                    <button
-                        type="button"
-                        onClick={() => {
-                            onConfigModel()
-                            onDismiss()
-                        }}
-                        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
-                    >
-                        <Settings className="w-3.5 h-3.5" />
-                        {dict.quota.configModel}
-                    </button>
-                )}
-                {!isSelfHosted && (
-                    <>
-                        <a
-                            href="https://github.com/DayuanJiang/next-ai-draw-io"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors"
-                        >
-                            <FaGithub className="w-3.5 h-3.5" />
-                            {dict.quota.selfHost}
-                        </a>
-                        <a
-                            href="https://github.com/sponsors/DayuanJiang"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors"
-                        >
-                            <Coffee className="w-3.5 h-3.5" />
-                            {dict.quota.sponsor}
-                        </a>
-                    </>
-                )}
-            </div>
-        </div>
-    )
-}

components/reset-warning-modal.tsx

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
     Dialog,
     DialogContent,
@@ -8,13 +8,12 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from "@/components/ui/dialog"
-import { useDictionary } from "@/hooks/use-dictionary"
+} from "@/components/ui/dialog";
 
 interface ResetWarningModalProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    onClear: () => void
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onClear: () => void;
 }
 
 export function ResetWarningModal({
@@ -22,15 +21,14 @@ export function ResetWarningModal({
     onOpenChange,
     onClear,
 }: ResetWarningModalProps) {
-    const dict = useDictionary()
-
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent>
                 <DialogHeader>
-                    <DialogTitle>{dict.dialogs.clearTitle}</DialogTitle>
+                    <DialogTitle>Clear Everything?</DialogTitle>
                     <DialogDescription>
-                        {dict.dialogs.clearDescription}
+                        This will clear the current conversation and reset the
+                        diagram. This action cannot be undone.
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
@@ -38,13 +36,13 @@ export function ResetWarningModal({
                         variant="outline"
                         onClick={() => onOpenChange(false)}
                     >
-                        {dict.common.cancel}
+                        Cancel
                     </Button>
                     <Button variant="destructive" onClick={onClear}>
-                        {dict.dialogs.clearEverything}
+                        Clear Everything
                     </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
-    )
+    );
 }

components/save-dialog.tsx

@@ -1,151 +0,0 @@
-"use client"
-
-import { useEffect, useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
-import { useDictionary } from "@/hooks/use-dictionary"
-
-export type ExportFormat = "drawio" | "png" | "svg" | "xmlsvg"
-
-interface SaveDialogProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    onSave: (filename: string, format: ExportFormat) => void
-    defaultFilename: string
-}
-
-export function SaveDialog({
-    open,
-    onOpenChange,
-    onSave,
-    defaultFilename,
-}: SaveDialogProps) {
-    const dict = useDictionary()
-    const [filename, setFilename] = useState(defaultFilename)
-    const [format, setFormat] = useState<ExportFormat>("drawio")
-
-    useEffect(() => {
-        if (open) {
-            setFilename(defaultFilename)
-        }
-    }, [open, defaultFilename])
-
-    const handleSave = () => {
-        const finalFilename = filename.trim() || defaultFilename
-        onSave(finalFilename, format)
-        onOpenChange(false)
-    }
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            e.preventDefault()
-            handleSave()
-        }
-    }
-
-    const FORMAT_OPTIONS = [
-        {
-            value: "drawio" as const,
-            label: dict.save.formats.drawio,
-            extension: ".drawio",
-        },
-        {
-            value: "png" as const,
-            label: dict.save.formats.png,
-            extension: ".png",
-        },
-        {
-            value: "svg" as const,
-            label: dict.save.formats.svg,
-            extension: ".svg",
-        },
-        {
-            value: "xmlsvg" as const,
-            label: dict.save.formats.xmlsvg,
-            extension: ".drawio.svg",
-        },
-    ]
-
-    const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format)
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-md">
-                <DialogHeader>
-                    <DialogTitle>{dict.save.title}</DialogTitle>
-                    <DialogDescription>
-                        {dict.save.description}
-                    </DialogDescription>
-                </DialogHeader>
-                <div className="space-y-4">
-                    <div className="space-y-2">
-                        <label className="text-sm font-medium">
-                            {dict.save.format}
-                        </label>
-                        <Select
-                            value={format}
-                            onValueChange={(v) => setFormat(v as ExportFormat)}
-                        >
-                            <SelectTrigger>
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {FORMAT_OPTIONS.map((opt) => (
-                                    <SelectItem
-                                        key={opt.value}
-                                        value={opt.value}
-                                    >
-                                        {opt.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </div>
-                    <div className="space-y-2">
-                        <label className="text-sm font-medium">
-                            {dict.save.filename}
-                        </label>
-                        <div className="flex items-stretch">
-                            <Input
-                                value={filename}
-                                onChange={(e) => setFilename(e.target.value)}
-                                onKeyDown={handleKeyDown}
-                                placeholder={dict.save.filenamePlaceholder}
-                                autoFocus
-                                onFocus={(e) => e.target.select()}
-                                className="rounded-r-none border-r-0 focus-visible:z-10"
-                            />
-                            <span className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-sm text-muted-foreground font-mono">
-                                {currentFormat?.extension || ".drawio"}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-                <DialogFooter>
-                    <Button
-                        variant="outline"
-                        onClick={() => onOpenChange(false)}
-                    >
-                        {dict.common.cancel}
-                    </Button>
-                    <Button onClick={handleSave}>{dict.common.save}</Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
-}

components/settings-dialog.tsx

@@ -1,715 +0,0 @@
-"use client"
-
-import { ChevronRight, Github, Info, Moon, Sun, Tag } from "lucide-react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { Suspense, useCallback, useEffect, useState } from "react"
-import { toast } from "sonner"
-import { Button } from "@/components/ui/button"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
-import { Switch } from "@/components/ui/switch"
-import { Textarea } from "@/components/ui/textarea"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { getApiEndpoint } from "@/lib/base-path"
-import { i18n, type Locale } from "@/lib/i18n/config"
-import { STORAGE_KEYS } from "@/lib/storage"
-
-// Reusable setting item component for consistent layout
-function SettingItem({
-    label,
-    description,
-    children,
-}: {
-    label: string
-    description?: string
-    children: React.ReactNode
-}) {
-    return (
-        <div className="flex items-center justify-between py-4 first:pt-0 last:pb-0">
-            <div className="space-y-0.5 pr-4">
-                <Label className="text-sm font-medium">{label}</Label>
-                {description && (
-                    <p className="text-xs text-muted-foreground max-w-[260px]">
-                        {description}
-                    </p>
-                )}
-            </div>
-            <div className="shrink-0">{children}</div>
-        </div>
-    )
-}
-
-const LANGUAGE_LABELS: Record<Locale, string> = {
-    en: "English",
-    zh: "中文",
-    ja: "日本語",
-    "zh-Hant": "繁體中文",
-}
-
-interface SettingsDialogProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    drawioUi: "min" | "sketch"
-    onToggleDrawioUi: () => void
-    darkMode: boolean
-    onToggleDarkMode: () => void
-    minimalStyle?: boolean
-    onMinimalStyleChange?: (value: boolean) => void
-    vlmValidationEnabled?: boolean
-    onVlmValidationChange?: (value: boolean) => void
-    onOpenModelConfig?: () => void
-    customSystemMessage?: string
-    onCustomSystemMessageChange?: (value: string) => void
-}
-
-export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
-const STORAGE_ACCESS_CODE_REQUIRED_KEY = "next-ai-draw-io-access-code-required"
-
-function getStoredAccessCodeRequired(): boolean | null {
-    if (typeof window === "undefined") return null
-    const stored = localStorage.getItem(STORAGE_ACCESS_CODE_REQUIRED_KEY)
-    if (stored === null) return null
-    return stored === "true"
-}
-
-function SettingsContent({
-    open,
-    onOpenChange,
-    drawioUi,
-    onToggleDrawioUi,
-    darkMode,
-    onToggleDarkMode,
-    minimalStyle = false,
-    onMinimalStyleChange = () => {},
-    vlmValidationEnabled = false,
-    onVlmValidationChange = () => {},
-    onOpenModelConfig,
-    customSystemMessage = "",
-    onCustomSystemMessageChange = () => {},
-}: SettingsDialogProps) {
-    const dict = useDictionary()
-    const router = useRouter()
-    const pathname = usePathname() || "/"
-    const search = useSearchParams()
-    const [accessCode, setAccessCode] = useState("")
-    const [isVerifying, setIsVerifying] = useState(false)
-    const [error, setError] = useState("")
-    const [accessCodeRequired, setAccessCodeRequired] = useState(
-        () => getStoredAccessCodeRequired() ?? false,
-    )
-    const [currentLang, setCurrentLang] = useState("en")
-    const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
-
-    // Panel visibility state
-    const [showRecentChats, setShowRecentChats] = useState(true)
-    const [showMyTemplates, setShowMyTemplates] = useState(true)
-    const [showQuickExamples, setShowQuickExamples] = useState(true)
-
-    const handlePanelToggle = useCallback(
-        (key: string, value: boolean, setter: (v: boolean) => void) => {
-            setter(value)
-            localStorage.setItem(key, String(value))
-            window.dispatchEvent(new CustomEvent("panelVisibilityChange"))
-        },
-        [],
-    )
-
-    // Proxy settings state (Electron only)
-    const [httpProxy, setHttpProxy] = useState("")
-    const [httpsProxy, setHttpsProxy] = useState("")
-    const [isApplyingProxy, setIsApplyingProxy] = useState(false)
-
-    useEffect(() => {
-        // Only fetch if not cached in localStorage
-        if (getStoredAccessCodeRequired() !== null) return
-
-        fetch(getApiEndpoint("/api/config"))
-            .then((res) => {
-                if (!res.ok) throw new Error(`HTTP ${res.status}`)
-                return res.json()
-            })
-            .then((data) => {
-                const required = data?.accessCodeRequired === true
-                localStorage.setItem(
-                    STORAGE_ACCESS_CODE_REQUIRED_KEY,
-                    String(required),
-                )
-                setAccessCodeRequired(required)
-            })
-            .catch(() => {
-                // Don't cache on error - allow retry on next mount
-                setAccessCodeRequired(false)
-            })
-    }, [])
-
-    // Detect current language from pathname
-    useEffect(() => {
-        const seg = pathname.split("/").filter(Boolean)
-        const first = seg[0]
-        if (first && i18n.locales.includes(first as Locale)) {
-            setCurrentLang(first)
-        } else {
-            setCurrentLang(i18n.defaultLocale)
-        }
-    }, [pathname])
-
-    useEffect(() => {
-        if (open) {
-            const storedCode =
-                localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
-            setAccessCode(storedCode)
-
-            const storedSendShortcut = localStorage.getItem(
-                STORAGE_KEYS.sendShortcut,
-            )
-            setSendShortcut(storedSendShortcut || "ctrl-enter")
-
-            setShowRecentChats(
-                localStorage.getItem(STORAGE_KEYS.showRecentChats) !== "false",
-            )
-            setShowMyTemplates(
-                localStorage.getItem(STORAGE_KEYS.showMyTemplates) !== "false",
-            )
-            setShowQuickExamples(
-                localStorage.getItem(STORAGE_KEYS.showQuickExamples) !==
-                    "false",
-            )
-
-            setError("")
-
-            // Load proxy settings (Electron only)
-            if (window.electronAPI?.getProxy) {
-                window.electronAPI.getProxy().then((config) => {
-                    setHttpProxy(config.httpProxy || "")
-                    setHttpsProxy(config.httpsProxy || "")
-                })
-            }
-        }
-    }, [open])
-
-    const changeLanguage = (lang: string) => {
-        // Save locale to localStorage for persistence across restarts
-        localStorage.setItem("next-ai-draw-io-locale", lang)
-
-        // Notify Electron main process to update its menu language
-        if (window.electronAPI?.setUserLocale) {
-            window.electronAPI.setUserLocale(lang).catch((error) => {
-                console.error("Failed to sync locale with Electron:", error)
-            })
-        }
-
-        const parts = pathname.split("/")
-        if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
-            parts[1] = lang
-        } else {
-            parts.splice(1, 0, lang)
-        }
-        const newPath = parts.join("/") || "/"
-        const searchStr = search?.toString() ? `?${search.toString()}` : ""
-        router.push(newPath + searchStr)
-    }
-
-    const handleSave = async () => {
-        if (!accessCodeRequired) return
-
-        setError("")
-        setIsVerifying(true)
-
-        try {
-            const response = await fetch(
-                getApiEndpoint("/api/verify-access-code"),
-                {
-                    method: "POST",
-                    headers: {
-                        "x-access-code": accessCode.trim(),
-                    },
-                },
-            )
-
-            const data = await response.json()
-
-            if (!data.valid) {
-                setError(data.message || dict.errors.invalidAccessCode)
-                return
-            }
-
-            localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
-            onOpenChange(false)
-        } catch {
-            setError(dict.errors.networkError)
-        } finally {
-            setIsVerifying(false)
-        }
-    }
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            e.preventDefault()
-            handleSave()
-        }
-    }
-
-    const handleApplyProxy = async () => {
-        if (!window.electronAPI?.setProxy) return
-
-        // Validate proxy URLs (must start with http:// or https://)
-        const validateProxyUrl = (url: string): boolean => {
-            if (!url) return true // Empty is OK
-            return url.startsWith("http://") || url.startsWith("https://")
-        }
-
-        const trimmedHttp = httpProxy.trim()
-        const trimmedHttps = httpsProxy.trim()
-
-        if (trimmedHttp && !validateProxyUrl(trimmedHttp)) {
-            toast.error("HTTP Proxy must start with http:// or https://")
-            return
-        }
-        if (trimmedHttps && !validateProxyUrl(trimmedHttps)) {
-            toast.error("HTTPS Proxy must start with http:// or https://")
-            return
-        }
-
-        setIsApplyingProxy(true)
-        try {
-            const result = await window.electronAPI.setProxy({
-                httpProxy: trimmedHttp || undefined,
-                httpsProxy: trimmedHttps || undefined,
-            })
-
-            if (result.success) {
-                toast.success(dict.settings.proxyApplied)
-            } else {
-                toast.error(result.error || "Failed to apply proxy settings")
-            }
-        } catch {
-            toast.error("Failed to apply proxy settings")
-        } finally {
-            setIsApplyingProxy(false)
-        }
-    }
-
-    return (
-        <DialogContent className="sm:max-w-lg p-0 gap-0 max-h-[90vh] flex flex-col overflow-hidden">
-            {/* Header */}
-            <DialogHeader className="px-6 pt-6 pb-4">
-                <DialogTitle>{dict.settings.title}</DialogTitle>
-                <DialogDescription className="mt-1">
-                    {dict.settings.description}
-                </DialogDescription>
-            </DialogHeader>
-
-            {/* Content */}
-            <div className="px-6 pb-6 overflow-y-auto flex-1 scrollbar-thin">
-                <div className="divide-y divide-border-subtle">
-                    {/* API Keys & Models */}
-                    {onOpenModelConfig && (
-                        <SettingItem
-                            label={dict.settings.apiKeysModels}
-                            description={dict.settings.apiKeysModelsDescription}
-                        >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-9 w-9 p-0"
-                                onClick={() => {
-                                    onOpenChange(false)
-                                    onOpenModelConfig()
-                                }}
-                                aria-label={dict.settings.apiKeysModels}
-                            >
-                                <ChevronRight className="h-4 w-4" />
-                            </Button>
-                        </SettingItem>
-                    )}
-
-                    {/* Access Code (conditional) */}
-                    {accessCodeRequired && (
-                        <div className="py-4 first:pt-0 space-y-3">
-                            <div className="space-y-0.5">
-                                <Label
-                                    htmlFor="access-code"
-                                    className="text-sm font-medium"
-                                >
-                                    {dict.settings.accessCode}
-                                </Label>
-                                <p className="text-xs text-muted-foreground">
-                                    {dict.settings.accessCodeDescription}
-                                </p>
-                            </div>
-                            <div className="flex gap-2">
-                                <Input
-                                    id="access-code"
-                                    type="password"
-                                    value={accessCode}
-                                    onChange={(e) =>
-                                        setAccessCode(e.target.value)
-                                    }
-                                    onKeyDown={handleKeyDown}
-                                    placeholder={
-                                        dict.settings.accessCodePlaceholder
-                                    }
-                                    autoComplete="off"
-                                    className="h-9"
-                                />
-                                <Button
-                                    onClick={handleSave}
-                                    disabled={isVerifying || !accessCode.trim()}
-                                    className="h-9 px-4 rounded-xl"
-                                >
-                                    {isVerifying ? "..." : dict.common.save}
-                                </Button>
-                            </div>
-                            {error && (
-                                <p className="text-xs text-destructive">
-                                    {error}
-                                </p>
-                            )}
-                        </div>
-                    )}
-
-                    {/* Language */}
-                    <SettingItem
-                        label={dict.settings.language}
-                        description={dict.settings.languageDescription}
-                    >
-                        <Select
-                            value={currentLang}
-                            onValueChange={changeLanguage}
-                        >
-                            <SelectTrigger
-                                id="language-select"
-                                className="w-[120px] h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {i18n.locales.map((locale) => (
-                                    <SelectItem key={locale} value={locale}>
-                                        {LANGUAGE_LABELS[locale]}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </SettingItem>
-
-                    {/* Theme */}
-                    <SettingItem
-                        label={dict.settings.theme}
-                        description={dict.settings.themeDescription}
-                    >
-                        <Button
-                            id="theme-toggle"
-                            variant="outline"
-                            size="icon"
-                            onClick={onToggleDarkMode}
-                            className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
-                        >
-                            {darkMode ? (
-                                <Sun className="h-4 w-4" />
-                            ) : (
-                                <Moon className="h-4 w-4" />
-                            )}
-                        </Button>
-                    </SettingItem>
-
-                    {/* Draw.io Style */}
-                    <SettingItem
-                        label={dict.settings.drawioStyle}
-                        description={`${dict.settings.drawioStyleDescription} ${
-                            drawioUi === "min"
-                                ? dict.settings.minimal
-                                : dict.settings.sketch
-                        }`}
-                    >
-                        <Button
-                            id="drawio-ui"
-                            variant="outline"
-                            onClick={onToggleDrawioUi}
-                            className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
-                        >
-                            {dict.settings.switchTo}{" "}
-                            {drawioUi === "min"
-                                ? dict.settings.sketch
-                                : dict.settings.minimal}
-                        </Button>
-                    </SettingItem>
-
-                    {/* Diagram Style */}
-                    <SettingItem
-                        label={dict.settings.diagramStyle}
-                        description={dict.settings.diagramStyleDescription}
-                    >
-                        <div className="flex items-center gap-2">
-                            <Switch
-                                id="minimal-style"
-                                checked={minimalStyle}
-                                onCheckedChange={onMinimalStyleChange}
-                            />
-                            <span className="text-sm text-muted-foreground">
-                                {minimalStyle
-                                    ? dict.chat.minimalStyle
-                                    : dict.chat.styledMode}
-                            </span>
-                        </div>
-                    </SettingItem>
-
-                    {/* Panel Visibility */}
-                    <SettingItem
-                        label={dict.settings.panelVisibility}
-                        description={dict.settings.panelVisibilityDescription}
-                    >
-                        <div className="flex flex-col gap-2">
-                            <label className="flex items-center gap-2 cursor-pointer">
-                                <Switch
-                                    id="show-recent-chats"
-                                    checked={showRecentChats}
-                                    onCheckedChange={(v) =>
-                                        handlePanelToggle(
-                                            STORAGE_KEYS.showRecentChats,
-                                            v,
-                                            setShowRecentChats,
-                                        )
-                                    }
-                                />
-                                <span className="text-xs text-muted-foreground">
-                                    {dict.settings.showRecentChats}
-                                </span>
-                            </label>
-                            <label className="flex items-center gap-2 cursor-pointer">
-                                <Switch
-                                    id="show-my-templates"
-                                    checked={showMyTemplates}
-                                    onCheckedChange={(v) =>
-                                        handlePanelToggle(
-                                            STORAGE_KEYS.showMyTemplates,
-                                            v,
-                                            setShowMyTemplates,
-                                        )
-                                    }
-                                />
-                                <span className="text-xs text-muted-foreground">
-                                    {dict.settings.showMyTemplates}
-                                </span>
-                            </label>
-                            <label className="flex items-center gap-2 cursor-pointer">
-                                <Switch
-                                    id="show-quick-examples"
-                                    checked={showQuickExamples}
-                                    onCheckedChange={(v) =>
-                                        handlePanelToggle(
-                                            STORAGE_KEYS.showQuickExamples,
-                                            v,
-                                            setShowQuickExamples,
-                                        )
-                                    }
-                                />
-                                <span className="text-xs text-muted-foreground">
-                                    {dict.settings.showQuickExamples}
-                                </span>
-                            </label>
-                        </div>
-                    </SettingItem>
-
-                    {/* VLM Diagram Validation */}
-                    <SettingItem
-                        label={dict.settings.diagramValidation}
-                        description={dict.settings.diagramValidationDescription}
-                    >
-                        <div className="flex items-center gap-2">
-                            <Switch
-                                id="vlm-validation"
-                                checked={vlmValidationEnabled}
-                                onCheckedChange={onVlmValidationChange}
-                            />
-                            <span className="text-sm text-muted-foreground">
-                                {vlmValidationEnabled
-                                    ? dict.settings.enabled
-                                    : dict.settings.disabled}
-                            </span>
-                        </div>
-                    </SettingItem>
-
-                    {/* Custom System Message */}
-                    <div className="py-4 space-y-3">
-                        <div className="space-y-0.5">
-                            <Label
-                                htmlFor="custom-system-message"
-                                className="text-sm font-medium"
-                            >
-                                {dict.settings.customSystemMessage}
-                            </Label>
-                            <p className="text-xs text-muted-foreground">
-                                {dict.settings.customSystemMessageDescription}
-                            </p>
-                        </div>
-                        <Textarea
-                            id="custom-system-message"
-                            value={customSystemMessage}
-                            onChange={(e) =>
-                                onCustomSystemMessageChange(e.target.value)
-                            }
-                            placeholder={
-                                dict.settings.customSystemMessagePlaceholder
-                            }
-                            className="min-h-[80px] max-h-[160px] text-sm"
-                            maxLength={5000}
-                        />
-                    </div>
-
-                    {/* Send Shortcut */}
-                    <SettingItem
-                        label={dict.settings.sendShortcut}
-                        description={dict.settings.sendShortcutDescription}
-                    >
-                        <Select
-                            value={sendShortcut}
-                            onValueChange={(value) => {
-                                setSendShortcut(value)
-                                localStorage.setItem(
-                                    STORAGE_KEYS.sendShortcut,
-                                    value,
-                                )
-                                window.dispatchEvent(
-                                    new CustomEvent("sendShortcutChange", {
-                                        detail: value,
-                                    }),
-                                )
-                            }}
-                        >
-                            <SelectTrigger
-                                id="send-shortcut-select"
-                                className="w-auto h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="enter">
-                                    {dict.settings.enterToSend}
-                                </SelectItem>
-                                <SelectItem value="ctrl-enter">
-                                    {dict.settings.ctrlEnterToSend}
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </SettingItem>
-
-                    {/* Proxy Settings - Electron only */}
-                    {typeof window !== "undefined" &&
-                        window.electronAPI?.isElectron && (
-                            <div className="py-4 space-y-3">
-                                <div className="space-y-0.5">
-                                    <Label className="text-sm font-medium">
-                                        {dict.settings.proxy}
-                                    </Label>
-                                    <p className="text-xs text-muted-foreground">
-                                        {dict.settings.proxyDescription}
-                                    </p>
-                                </div>
-
-                                <div className="space-y-2">
-                                    <Input
-                                        id="http-proxy"
-                                        type="text"
-                                        value={httpProxy}
-                                        onChange={(e) =>
-                                            setHttpProxy(e.target.value)
-                                        }
-                                        placeholder={`${dict.settings.httpProxy}: http://proxy:8080`}
-                                        className="h-9"
-                                    />
-                                    <Input
-                                        id="https-proxy"
-                                        type="text"
-                                        value={httpsProxy}
-                                        onChange={(e) =>
-                                            setHttpsProxy(e.target.value)
-                                        }
-                                        placeholder={`${dict.settings.httpsProxy}: http://proxy:8080`}
-                                        className="h-9"
-                                    />
-                                </div>
-
-                                <Button
-                                    onClick={handleApplyProxy}
-                                    disabled={isApplyingProxy}
-                                    className="h-9 px-4 rounded-xl w-full"
-                                >
-                                    {isApplyingProxy
-                                        ? "..."
-                                        : dict.settings.applyProxy}
-                                </Button>
-                            </div>
-                        )}
-                </div>
-            </div>
-
-            {/* Footer */}
-            <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
-                <div className="flex items-center justify-center gap-3">
-                    <span className="text-xs text-muted-foreground flex items-center gap-1">
-                        <Tag className="h-3 w-3" />
-                        {process.env.APP_VERSION}
-                    </span>
-                    <span className="text-muted-foreground">·</span>
-                    <a
-                        href="https://github.com/DayuanJiang/next-ai-draw-io"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
-                    >
-                        <Github className="h-3 w-3" />
-                        GitHub
-                    </a>
-                    {process.env.NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE ===
-                        "true" && (
-                        <>
-                            <span className="text-muted-foreground">·</span>
-                            <a
-                                href={`/${currentLang}/about${currentLang === "zh" ? "/cn" : currentLang === "ja" ? "/ja" : ""}`}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
-                            >
-                                <Info className="h-3 w-3" />
-                                {dict.nav.about}
-                            </a>
-                        </>
-                    )}
-                </div>
-            </div>
-        </DialogContent>
-    )
-}
-
-export function SettingsDialog(props: SettingsDialogProps) {
-    return (
-        <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-            <Suspense
-                fallback={
-                    <DialogContent className="sm:max-w-lg p-0">
-                        <div className="h-80 flex items-center justify-center">
-                            <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
-                        </div>
-                    </DialogContent>
-                }
-            >
-                <SettingsContent {...props} />
-            </Suspense>
-        </Dialog>
-    )
-}

components/ui/alert-dialog.tsx

@@ -1,157 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:brightness-75",
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:

components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

components/ui/collapsible.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/command.tsx

@@ -1,193 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
-
-function Command({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent className={cn("overflow-hidden p-0", className)}>
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function CommandInput({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  return (
-    <div
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
-      <CommandPrimitive.Input
-        data-slot="command-input"
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-}
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => {
-  return (
-    <CommandPrimitive.List
-      ref={ref}
-      data-slot="command-list"
-      className={cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CommandList.displayName = CommandPrimitive.List.displayName ?? "CommandList"
-
-function CommandEmpty({
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  )
-}
-
-function CommandGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      onMouseEnter={(e) => {
-        // Ensure hover updates selection for visual feedback
-        const item = e.currentTarget
-        item.setAttribute("data-selected", "true")
-        // Deselect siblings
-        const siblings = item.parentElement?.querySelectorAll("[cmdk-item]")
-        siblings?.forEach((sibling) => {
-          if (sibling !== item) {
-            sibling.setAttribute("data-selected", "false")
-          }
-        })
-      }}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

components/ui/dialog.tsx

@@ -38,10 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px]",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className
       )}
       {...props}
@@ -60,32 +57,13 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          // Base styles
-          "fixed top-[50%] left-[50%] z-50 w-full",
-          "max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-          "grid gap-4 p-6",
-          // Refined visual treatment
-          "bg-surface-0 rounded-2xl border border-border-subtle shadow-dialog",
-          // Entry/exit animations
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98]",
-          "data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]",
-          "duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
           className
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className={cn(
-          "absolute top-4 right-4 rounded-xl p-1.5",
-          "text-muted-foreground/60 hover:text-foreground",
-          "hover:bg-interactive-hover",
-          "transition-all duration-150",
-          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-          "disabled:pointer-events-none",
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
-        )}>
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
           <XIcon />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -124,10 +102,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        "text-xl font-semibold tracking-tight leading-tight",
-        className
-      )}
+      className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
   )
@@ -140,10 +115,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn(
-        "text-sm text-muted-foreground leading-relaxed",
-        className
-      )}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   )

components/ui/input.tsx

@@ -8,30 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        // Base styles
-        "flex h-10 w-full min-w-0 rounded-xl px-3.5 py-2",
-        "border border-border-subtle bg-surface-1",
-        "text-sm text-foreground",
-        // Placeholder
-        "placeholder:text-muted-foreground/60",
-        // Selection
-        "selection:bg-primary selection:text-primary-foreground",
-        // Transitions
-        "transition-all duration-150 ease-out",
-        // Hover state
-        "hover:border-border-default",
-        // Focus state - refined ring
-        "focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10",
-        // File input
-        "file:text-foreground file:inline-flex file:h-7 file:border-0",
-        "file:bg-transparent file:text-sm file:font-medium",
-        // Disabled
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        // Invalid state
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        "dark:aria-invalid:ring-destructive/40",
-        // Dark mode background
-        "dark:bg-surface-1",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       {...props}

components/ui/label.tsx

@@ -1,24 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }

components/ui/popover.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

components/ui/resizable.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  return (
-    <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) {
-  return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.PanelResizeHandle>
-  )
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

components/ui/scroll-area.tsx

@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 !overflow-x-hidden"
+        className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>

components/ui/select.tsx

@@ -1,187 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

components/ui/switch.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
-
-import { cn } from "@/lib/utils"
-
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-        )}
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }

components/url-input-dialog.tsx

@@ -1,116 +0,0 @@
-"use client"
-
-import { Link, Loader2 } from "lucide-react"
-import { useState } from "react"
-import { Button } from "@/components/ui/button"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { useDictionary } from "@/hooks/use-dictionary"
-
-interface UrlInputDialogProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    onSubmit: (url: string) => void
-    isExtracting: boolean
-}
-
-export function UrlInputDialog({
-    open,
-    onOpenChange,
-    onSubmit,
-    isExtracting,
-}: UrlInputDialogProps) {
-    const dict = useDictionary()
-    const [url, setUrl] = useState("")
-    const [error, setError] = useState("")
-
-    const handleSubmit = () => {
-        setError("")
-
-        if (!url.trim()) {
-            setError(dict.url.enterUrl)
-            return
-        }
-
-        try {
-            new URL(url)
-        } catch {
-            setError(dict.url.invalidFormat)
-            return
-        }
-
-        onSubmit(url.trim())
-    }
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter" && !isExtracting) {
-            e.preventDefault()
-            handleSubmit()
-        }
-    }
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-md">
-                <DialogHeader>
-                    <DialogTitle>{dict.url.title}</DialogTitle>
-                    <DialogDescription>
-                        {dict.url.description}
-                    </DialogDescription>
-                </DialogHeader>
-
-                <div className="space-y-4">
-                    <div className="space-y-2">
-                        <Input
-                            value={url}
-                            onChange={(e) => {
-                                setUrl(e.target.value)
-                                setError("")
-                            }}
-                            onKeyDown={handleKeyDown}
-                            placeholder="https://example.com/article"
-                            disabled={isExtracting}
-                            autoFocus
-                        />
-                        {error && (
-                            <p className="text-sm text-destructive">{error}</p>
-                        )}
-                    </div>
-                </div>
-
-                <DialogFooter>
-                    <Button
-                        variant="outline"
-                        onClick={() => onOpenChange(false)}
-                        disabled={isExtracting}
-                    >
-                        {dict.url.Cancel}
-                    </Button>
-                    <Button
-                        onClick={handleSubmit}
-                        disabled={isExtracting || !url.trim()}
-                    >
-                        {isExtracting ? (
-                            <>
-                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                                {dict.url.Extracting}
-                            </>
-                        ) : (
-                            <>
-                                <Link className="mr-2 h-4 w-4" />
-                                {dict.url.extract}
-                            </>
-                        )}
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
-}

contexts/diagram-context.tsx

@@ -1,384 +1,72 @@
-"use client"
+"use client";
 
-import type React from "react"
-import { createContext, useContext, useEffect, useRef, useState } from "react"
-import type { DrawIoEmbedRef } from "react-drawio"
-import { toast } from "sonner"
-import type { ExportFormat } from "@/components/save-dialog"
-import { getApiEndpoint } from "@/lib/base-path"
-import {
-    extractDiagramXML,
-    isRealDiagram,
-    validateAndFixXml,
-} from "../lib/utils"
+import React, { createContext, useContext, useRef, useState } from "react";
+import type { DrawIoEmbedRef } from "react-drawio";
+import { extractDiagramXML } from "../lib/utils";
 
 interface DiagramContextType {
-    chartXML: string
-    latestSvg: string
-    diagramHistory: { svg: string; xml: string }[]
-    setDiagramHistory: (history: { svg: string; xml: string }[]) => void
-    loadDiagram: (chart: string, skipValidation?: boolean) => string | null
-    handleExport: () => void
-    handleExportWithoutHistory: () => void
-    resolverRef: React.MutableRefObject<((value: string) => void) | null>
-    drawioRef: React.MutableRefObject<DrawIoEmbedRef | null>
-    handleDiagramExport: (data: any) => void
-    handleDiagramAutoSave: (data: { xml?: string }) => void
-    clearDiagram: () => void
-    saveDiagramToFile: (
-        filename: string,
-        format: ExportFormat,
-        sessionId?: string,
-        successMessage?: string,
-    ) => void
-    getThumbnailSvg: () => Promise<string | null>
-    captureValidationPng: () => Promise<string | null>
-    isDrawioReady: boolean
-    onDrawioLoad: () => void
-    resetDrawioReady: () => void
-    showSaveDialog: boolean
-    setShowSaveDialog: (show: boolean) => void
+    chartXML: string;
+    latestSvg: string;
+    diagramHistory: { svg: string; xml: string }[];
+    loadDiagram: (chart: string) => void;
+    handleExport: () => void;
+    resolverRef: React.Ref<((value: string) => void) | null>;
+    drawioRef: React.Ref<DrawIoEmbedRef | null>;
+    handleDiagramExport: (data: any) => void;
+    clearDiagram: () => void;
 }
 
-const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
+const DiagramContext = createContext<DiagramContextType | undefined>(undefined);
 
 export function DiagramProvider({ children }: { children: React.ReactNode }) {
-    const [chartXML, setChartXML] = useState<string>("")
-    const [latestSvg, setLatestSvg] = useState<string>("")
+    const [chartXML, setChartXML] = useState<string>("");
+    const [latestSvg, setLatestSvg] = useState<string>("");
     const [diagramHistory, setDiagramHistory] = useState<
         { svg: string; xml: string }[]
-    >([])
-    const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [showSaveDialog, setShowSaveDialog] = useState(false)
-    const hasCalledOnLoadRef = useRef(false)
-    const drawioRef = useRef<DrawIoEmbedRef | null>(null)
-    const resolverRef = useRef<((value: string) => void) | null>(null)
-    // Resolver for PNG export (used for VLM validation)
-    const pngResolverRef = useRef<((value: string) => void) | null>(null)
-    // Track if we're expecting an export for history (user-initiated)
-    const expectHistoryExportRef = useRef<boolean>(false)
-    // Track latest chartXML for restoration after remount
-    const chartXMLRef = useRef<string>("")
-
-    const onDrawioLoad = () => {
-        // Only set ready state once to prevent infinite loops
-        if (hasCalledOnLoadRef.current) return
-        hasCalledOnLoadRef.current = true
-        setIsDrawioReady(true)
-        // Restore diagram after remount (e.g., theme/UI change)
-        if (drawioRef.current && isRealDiagram(chartXMLRef.current)) {
-            drawioRef.current.load({ xml: chartXMLRef.current })
-        }
-    }
-
-    const resetDrawioReady = () => {
-        hasCalledOnLoadRef.current = false
-        setIsDrawioReady(false)
-    }
-
-    // Keep chartXMLRef in sync with state for restoration after remount
-    useEffect(() => {
-        chartXMLRef.current = chartXML
-    }, [chartXML])
-
-    // Track if we're expecting an export for file save (stores raw export data)
-    const saveResolverRef = useRef<{
-        resolver: ((data: string) => void) | null
-        format: ExportFormat | null
-    }>({ resolver: null, format: null })
+    >([]);
+    const drawioRef = useRef<DrawIoEmbedRef | null>(null);
+    const resolverRef = useRef<((value: string) => void) | null>(null);
 
     const handleExport = () => {
         if (drawioRef.current) {
-            // Mark that this export should be saved to history
-            expectHistoryExportRef.current = true
             drawioRef.current.exportDiagram({
                 format: "xmlsvg",
-            })
+            });
         }
-    }
-
-    const handleExportWithoutHistory = () => {
-        if (drawioRef.current) {
-            // Export without saving to history (for edit_diagram fetching current state)
-            drawioRef.current.exportDiagram({
-                format: "xmlsvg",
-            })
-        }
-    }
-
-    // Get current diagram as SVG for thumbnail (used by session storage)
-    const getThumbnailSvg = async (): Promise<string | null> => {
-        if (!drawioRef.current) return null
-        // Don't export if diagram is empty
-        if (!isRealDiagram(chartXML)) return null
-
-        try {
-            const svgData = await Promise.race([
-                new Promise<string>((resolve) => {
-                    resolverRef.current = resolve
-                    drawioRef.current?.exportDiagram({ format: "xmlsvg" })
-                }),
-                new Promise<string>((_, reject) =>
-                    setTimeout(() => reject(new Error("Export timeout")), 3000),
-                ),
-            ])
-
-            // Update latestSvg so it's available for future saves
-            if (svgData?.includes("<svg")) {
-                setLatestSvg(svgData)
-                return svgData
-            }
-            return null
-        } catch {
-            // Timeout is expected occasionally - don't log as error
-            return null
-        }
-    }
-
-    // Capture current diagram as PNG for VLM validation
-    const captureValidationPng = async (): Promise<string | null> => {
-        if (!drawioRef.current) return null
-        // Don't export if diagram is empty
-        if (!isRealDiagram(chartXML)) return null
-
-        try {
-            const pngData = await Promise.race([
-                new Promise<string>((resolve) => {
-                    pngResolverRef.current = resolve
-                    drawioRef.current?.exportDiagram({ format: "png" })
-                }),
-                new Promise<string>((_, reject) =>
-                    setTimeout(
-                        () => reject(new Error("PNG export timeout")),
-                        5000,
-                    ),
-                ),
-            ])
-
-            // PNG data should be a base64 data URL
-            if (pngData?.startsWith("data:image/png")) {
-                return pngData
-            }
-            return null
-        } catch {
-            // Timeout is expected occasionally - don't log as error
-            return null
-        }
-    }
-
-    const loadDiagram = (
-        chart: string,
-        skipValidation?: boolean,
-    ): string | null => {
-        let xmlToLoad = chart
-
-        // Validate XML structure before loading (unless skipped for internal use)
-        if (!skipValidation) {
-            const validation = validateAndFixXml(chart)
-            if (!validation.valid) {
-                console.warn(
-                    "[loadDiagram] Validation error:",
-                    validation.error,
-                )
-                return validation.error
-            }
-            // Use fixed XML if auto-fix was applied
-            if (validation.fixed) {
-                console.log(
-                    "[loadDiagram] Auto-fixed XML issues:",
-                    validation.fixes,
-                )
-                xmlToLoad = validation.fixed
-            }
-        }
-
-        // Keep chartXML in sync even when diagrams are injected (e.g., display_diagram tool)
-        setChartXML(xmlToLoad)
+    };
 
+    const loadDiagram = (chart: string) => {
         if (drawioRef.current) {
             drawioRef.current.load({
-                xml: xmlToLoad,
-            })
+                xml: chart,
+            });
         }
-
-        return null
-    }
+    };
 
     const handleDiagramExport = (data: any) => {
-        // Handle PNG export for VLM validation
-        if (pngResolverRef.current && data.data?.startsWith("data:image/png")) {
-            pngResolverRef.current(data.data)
-            pngResolverRef.current = null
-            return
-        }
-
-        // Handle save to file if requested (process raw data before extraction)
-        if (saveResolverRef.current.resolver) {
-            const format = saveResolverRef.current.format
-            saveResolverRef.current.resolver(data.data)
-            saveResolverRef.current = { resolver: null, format: null }
-            // For non-xmlsvg formats, skip XML extraction as it will fail
-            // Only drawio (which uses xmlsvg internally) has the content attribute
-            // xmlsvg is saved directly as SVG file, no need for extraction
-            if (format === "png" || format === "svg" || format === "xmlsvg") {
-                return
-            }
-        }
-
-        const extractedXML = extractDiagramXML(data.data)
-        setChartXML(extractedXML)
-        setLatestSvg(data.data)
-
-        // Only add to history if this was a user-initiated export
-        // Limit to 20 entries to prevent memory leaks during long sessions
-        const MAX_HISTORY_SIZE = 20
-        if (expectHistoryExportRef.current) {
-            setDiagramHistory((prev) => {
-                const newHistory = [
-                    ...prev,
-                    {
-                        svg: data.data,
-                        xml: extractedXML,
-                    },
-                ]
-                // Keep only the last MAX_HISTORY_SIZE entries (circular buffer)
-                return newHistory.slice(-MAX_HISTORY_SIZE)
-            })
-            expectHistoryExportRef.current = false
-        }
-
+        const extractedXML = extractDiagramXML(data.data);
+        setChartXML(extractedXML);
+        setLatestSvg(data.data);
+        setDiagramHistory((prev) => [
+            ...prev,
+            {
+                svg: data.data,
+                xml: extractedXML,
+            },
+        ]);
         if (resolverRef.current) {
-            resolverRef.current(extractedXML)
-            resolverRef.current = null
+            resolverRef.current(extractedXML);
+            resolverRef.current = null;
         }
-    }
-
-    const handleDiagramAutoSave = (data: { xml?: string }) => {
-        if (!data?.xml) return
-        // Don't overwrite a pending restore - if we have a real diagram in state
-        // but DrawIO isn't ready yet, it means we're waiting to restore
-        if (!isDrawioReady && isRealDiagram(chartXML)) {
-            return
-        }
-        setChartXML(data.xml)
-    }
+    };
 
     const clearDiagram = () => {
-        const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
-        // Skip validation for trusted internal template (loadDiagram also sets chartXML)
-        loadDiagram(emptyDiagram, true)
-        setLatestSvg("")
-        setDiagramHistory([])
-    }
-
-    const saveDiagramToFile = (
-        filename: string,
-        format: ExportFormat,
-        sessionId?: string,
-        successMessage?: string,
-    ) => {
-        if (!drawioRef.current) {
-            console.warn("Draw.io editor not ready")
-            return
-        }
-
-        // Map format to draw.io export format
-        const drawioFormat =
-            format === "drawio" || format === "xmlsvg" ? "xmlsvg" : format
-
-        // Set up the resolver before triggering export
-        saveResolverRef.current = {
-            resolver: (exportData: string) => {
-                let fileContent: string | Blob
-                let mimeType: string
-                let extension: string
-
-                if (format === "drawio") {
-                    // Extract XML from SVG for .drawio format
-                    const xml = extractDiagramXML(exportData)
-                    let xmlContent = xml
-                    if (!xml.includes("<mxfile")) {
-                        xmlContent = `<mxfile><diagram name="Page-1" id="page-1">${xml}</diagram></mxfile>`
-                    }
-                    fileContent = xmlContent
-                    mimeType = "application/xml"
-                    extension = ".drawio"
-                } else if (format === "png") {
-                    // PNG data comes as base64 data URL
-                    fileContent = exportData
-                    mimeType = "image/png"
-                    extension = ".png"
-                } else if (format === "xmlsvg") {
-                    // Editable SVG: pass data URL directly (like PNG)
-                    fileContent = exportData
-                    mimeType = "image/svg+xml"
-                    extension = ".drawio.svg"
-                } else {
-                    // SVG format (view-only)
-                    fileContent = exportData
-                    mimeType = "image/svg+xml"
-                    extension = ".svg"
-                }
-
-                // Log save event to Langfuse (flags the trace)
-                logSaveToLangfuse(filename, format, sessionId)
-
-                // Handle download
-                let url: string
-                if (
-                    typeof fileContent === "string" &&
-                    fileContent.startsWith("data:")
-                ) {
-                    // Already a data URL (PNG)
-                    url = fileContent
-                } else {
-                    const blob = new Blob([fileContent], { type: mimeType })
-                    url = URL.createObjectURL(blob)
-                }
-
-                const a = document.createElement("a")
-                a.href = url
-                a.download = `${filename}${extension}`
-                document.body.appendChild(a)
-                a.click()
-                document.body.removeChild(a)
-
-                // Show success toast after download is initiated
-                if (successMessage) {
-                    toast.success(successMessage, {
-                        position: "bottom-left",
-                        duration: 2500,
-                    })
-                }
-
-                // Delay URL revocation to ensure download completes
-                if (!url.startsWith("data:")) {
-                    setTimeout(() => URL.revokeObjectURL(url), 100)
-                }
-            },
-            format,
-        }
-
-        // Export diagram - callback will be handled in handleDiagramExport
-        drawioRef.current.exportDiagram({ format: drawioFormat })
-    }
-
-    // Log save event to Langfuse (just flags the trace, doesn't send content)
-    const logSaveToLangfuse = async (
-        filename: string,
-        format: string,
-        sessionId?: string,
-    ) => {
-        try {
-            await fetch(getApiEndpoint("/api/log-save"), {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ filename, format, sessionId }),
-            })
-        } catch (error) {
-            console.warn("Failed to log save to Langfuse:", error)
-        }
-    }
+        const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`;
+        loadDiagram(emptyDiagram);
+        setChartXML(emptyDiagram);
+        setLatestSvg("");
+        setDiagramHistory([]);
+    };
 
     return (
         <DiagramContext.Provider
@@ -386,34 +74,23 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 chartXML,
                 latestSvg,
                 diagramHistory,
-                setDiagramHistory,
                 loadDiagram,
                 handleExport,
-                handleExportWithoutHistory,
                 resolverRef,
                 drawioRef,
                 handleDiagramExport,
-                handleDiagramAutoSave,
                 clearDiagram,
-                saveDiagramToFile,
-                getThumbnailSvg,
-                captureValidationPng,
-                isDrawioReady,
-                onDrawioLoad,
-                resetDrawioReady,
-                showSaveDialog,
-                setShowSaveDialog,
             }}
         >
             {children}
         </DiagramContext.Provider>
-    )
+    );
 }
 
 export function useDiagram() {
-    const context = useContext(DiagramContext)
+    const context = useContext(DiagramContext);
     if (context === undefined) {
-        throw new Error("useDiagram must be used within a DiagramProvider")
+        throw new Error("useDiagram must be used within a DiagramProvider");
     }
-    return context
+    return context;
 }

docker-compose.yml

@@ -1,17 +0,0 @@
-services:
-  drawio:
-    image: jgraph/drawio:latest
-    ports: ["8080:8080"]
-  next-ai-draw-io:
-    build:
-      context: .
-      args:
-        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
-        # Uncomment below for subdirectory deployment
-        # - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
-    ports: ["3000:3000"]
-    env_file: .env
-    # environment:
-    #   # For subdirectory deployment, uncomment and set your path:
-    #   NEXT_PUBLIC_BASE_PATH: /nextaidrawio
-    depends_on: [drawio]

docs/cn/FAQ.md

@@ -1,78 +0,0 @@
-# 常见问题解答 (FAQ)
-
----
-
-## 1. 无法导出 PDF
-
-**问题**: Web 版点击导出 PDF 后跳转到 `convert.diagrams.net/node/export` 然后无响应
-
-**原因**: 嵌入式 Draw.io 不支持直接 PDF 导出，依赖外部转换服务，在 iframe 中无法正常工作
-
-**解决方案**: 先导出为图片（PNG），再打印转成 PDF
-
-**相关 Issue**: #539, #125
-
----
-
-## 2. 无法访问 embed.diagrams.net（离线/内网部署）
-
-**问题**: 内网环境提示"找不到 embed.diagrams.net 的服务器 IP 地址"
-
-**关键点**: `NEXT_PUBLIC_*` 环境变量是**构建时**变量，会被打包到 JS 代码中，**运行时设置无效**！
-
-**解决方案**: 必须在构建时通过 `args` 传入：
-
-```yaml
-# docker-compose.yml
-services:
-  drawio:
-    image: jgraph/drawio:latest
-    ports: ["8080:8080"]
-  next-ai-draw-io:
-    build:
-      context: .
-      args:
-        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://你的服务器IP:8080/
-    ports: ["3000:3000"]
-    env_file: .env
-```
-
-**内网用户**: 在外网修改 Dockerfile 并构建镜像，再传到内网使用
-
-**相关 Issue**: #295, #317
-
----
-
-## 3. 自建模型只思考不画图
-
-**问题**: 本地部署的模型（如 Qwen、LiteLLM）只输出思考过程，不生成图表
-
-**可能原因**:
-1. **模型太小** - 小模型难以正确遵循 tool calling 指令，建议使用 32B+ 参数的模型
-2. **未开启 tool calling** - 模型服务需要配置 tool use 功能
-
-**解决方案**: 开启 tool calling，例如 vLLM：
-```bash
-python -m vllm.entrypoints.openai.api_server \
-    --model Qwen/Qwen3-32B \
-    --enable-auto-tool-choice \
-    --tool-call-parser hermes
-```
-
-**相关 Issue**: #269, #75
-
----
-
-## 4. 上传图片后提示"未提供图片"
-
-**问题**: 上传图片后，系统显示"未提供图片"错误
-
-**可能原因**:
-1. 模型不支持视觉功能（如 Kimi K2、DeepSeek、Qwen 文本模型）
-
-**解决方案**:
-- 使用支持视觉的模型：GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro
-- 模型名带 `vision` 或 `vl` 的支持图片
-- 更新到最新版本（v0.4.9+）
-
-**相关 Issue**: #324, #421, #469

docs/cn/README_CN.md

@@ -1,257 +0,0 @@
-# Next AI Draw.io
-
-<div align="center">
-
-**AI驱动的图表创建工具 - 对话、绘制、可视化**
-
-[English](../../README.md) | 中文 | [日本語](../ja/README_JA.md)
-
-[![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/)
-
-[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
-[![Next.js](https://img.shields.io/badge/Next.js-16.x-black)](https://nextjs.org/)
-[![React](https://img.shields.io/badge/React-19.x-61dafb)](https://react.dev/)
-[![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
-
-[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
-
-</div>
-
-一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
-
-> 注：感谢 <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [字节跳动豆包](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) 的赞助支持，本项目的 Demo 现已接入强大的 glm-4.7 模型！
-
-<a href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio" target="_blank"><img src="../../public/volcengine-invite.png" alt="火山引擎方舟 Coding Plan" width="300" /></a>
-
-https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
-
-## 目录
-- [Next AI Draw.io](#next-ai-drawio)
-  - [目录](#目录)
-  - [示例](#示例)
-  - [功能特性](#功能特性)
-  - [MCP服务器（预览）](#mcp服务器预览)
-    - [Claude Code CLI](#claude-code-cli)
-  - [快速开始](#快速开始)
-    - [在线试用](#在线试用)
-    - [桌面应用](#桌面应用)
-    - [使用Docker运行](#使用docker运行)
-    - [安装](#安装)
-  - [部署](#部署)
-    - [部署到腾讯云EdgeOne Pages](#部署到腾讯云edgeone-pages)
-    - [部署到Vercel](#部署到vercel)
-    - [部署到Cloudflare Workers](#部署到cloudflare-workers)
-  - [多提供商支持](#多提供商支持)
-  - [工作原理](#工作原理)
-  - [支持与联系](#支持与联系)
-  - [常见问题](#常见问题)
-  - [Star历史](#star历史)
-
-## 示例
-
-以下是一些示例提示词及其生成的图表：
-
-<div align="center">
-<table width="100%">
-  <tr>
-    <td colspan="2" valign="top" align="center">
-      <strong>动画Transformer连接器</strong><br />
-      <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
-      <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <strong>GCP架构图</strong><br />
-      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
-    </td>
-    <td width="50%" valign="top">
-      <strong>AWS架构图</strong><br />
-      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <strong>Azure架构图</strong><br />
-      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
-    </td>
-    <td width="50%" valign="top">
-      <strong>猫咪素描</strong><br />
-      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
-      <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
-    </td>
-  </tr>
-</table>
-</div>
-
-## 功能特性
-
--   **LLM驱动的图表创建**：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
--   **基于图像的图表复制**：上传现有图表或图像，让AI自动复制和增强
--   **PDF和文本文件上传**：上传PDF文档和文本文件，提取内容并从现有文档生成图表
--   **AI推理过程显示**：查看支持模型的AI思考过程（OpenAI o1/o3、Gemini、Claude等）
--   **图表历史记录**：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
--   **交互式聊天界面**：与AI实时对话来完善您的图表
--   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
--   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
-
-## MCP服务器（预览）
-
-> **预览功能**：此功能为实验性功能，可能不稳定。
-
-通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-### Claude Code CLI
-
-```bash
-claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
-```
-
-然后让Claude创建图表：
-> "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
-
-图表会实时显示在浏览器中！
-
-详情请参阅[MCP服务器README](../../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。
-
-## 快速开始
-
-### 在线试用
-
-无需安装！直接在我们的演示站点试用：
-
-[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
-
-> **使用自己的 API Key**：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。
-
-### 桌面应用
-
-从 [Releases 页面](https://github.com/DayuanJiang/next-ai-draw-io/releases) 下载适用于您平台的原生桌面应用：
-
-支持的平台：Windows、macOS、Linux。
-
-### 使用Docker运行
-
-[查看 Docker 指南](./docker.md)
-
-### 安装
-
-1. 克隆仓库：
-
-```bash
-git clone https://github.com/DayuanJiang/next-ai-draw-io
-cd next-ai-draw-io
-npm install
-cp env.example .env.local
-```
-
-详细设置说明请参阅[提供商配置指南](./ai-providers.md)。
-
-2. 运行开发服务器：
-
-```bash
-npm run dev
-```
-
-3. 在浏览器中打开 [http://localhost:6002](http://localhost:6002) 查看应用。
-
-## 部署
-
-### 部署到腾讯云EdgeOne Pages
-
-您可以通过[腾讯云EdgeOne Pages](https://pages.edgeone.ai/zh)一键部署。
-
-直接点击此按钮一键部署：
-[![使用 EdgeOne Pages 部署](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://console.cloud.tencent.com/edgeone/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
-
-查看[腾讯云EdgeOne Pages文档](https://pages.edgeone.ai/zh/document/product-introduction)了解更多详情。
-
-同时，通过腾讯云EdgeOne Pages部署，也会获得[每日免费的DeepSeek模型额度](https://edgeone.cloud.tencent.com/pages/document/169925463311781888)。
-
-### 部署到Vercel
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
-
-部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。
-
-查看[Next.js部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。
-
-### 部署到Cloudflare Workers
-
-[查看 Cloudflare 部署指南](./cloudflare-deploy.md)
-
-
-## 多提供商支持
-
--   [字节跳动豆包](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
--   AWS Bedrock（默认）
--   OpenAI
--   Anthropic
--   Google AI
--   Google Vertex AI
--   Azure OpenAI
--   Ollama
--   OpenRouter
--   DeepSeek
--   SiliconFlow
--   ModelScope
--   SGLang
--   Vercel AI Gateway
-
-除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。
-
-📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。
-
-### 服务端多模型配置
-
-管理员可以配置多个服务端模型，让所有用户无需提供个人 API Key 即可使用。通过 `AI_MODELS_CONFIG` 环境变量（JSON 字符串）或 `ai-models.json` 文件配置。
-
-**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
-
-注意：`claude` 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。
-
-
-## 工作原理
-
-本应用使用以下技术：
-
--   **Next.js**：用于前端框架和路由
--   **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：用于流式AI响应和多提供商支持
--   **react-drawio**：用于图表表示和操作
-
-图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
-
-
-## 支持与联系
-
-**特别感谢[字节跳动豆包](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)赞助演示站点的 API Token 使用！** 注册火山引擎 ARK 平台即可获得50万免费Token！
-
-如果您觉得这个项目有用，请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点！
-
-如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：
-
--   邮箱：me[at]jiang.jp
-
-## 常见问题
-
-请参阅 [FAQ](./FAQ.md) 了解常见问题和解决方案。
-
-## Star历史
-
-[![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
-
----

docs/cn/ai-providers.md

@@ -1,385 +0,0 @@
-# AI 提供商配置
-
-本指南介绍如何为 next-ai-draw-io 配置不同的 AI 模型提供商。
-
-## 快速开始
-
-1. 将 `.env.example` 复制为 `.env.local`
-2. 设置所选提供商的 API 密钥
-3. 将 `AI_MODEL` 设置为所需的模型
-4. 运行 `npm run dev`
-
-## 支持的提供商
-
-### 豆包 (字节跳动火山引擎)
-
-> **免费 Token**：在 [火山引擎 ARK 平台](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) 注册，即可获得所有模型 50 万免费 Token！
-
-```bash
-DOUBAO_API_KEY=your_api_key
-AI_MODEL=doubao-seed-1-8-251215  # 或其他豆包模型
-```
-
-### Google Gemini
-
-```bash
-GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
-AI_MODEL=gemini-2.0-flash
-```
-
-可选的自定义端点：
-
-```bash
-GOOGLE_BASE_URL=https://your-custom-endpoint
-```
-
-### OpenAI
-
-```bash
-OPENAI_API_KEY=your_api_key
-AI_MODEL=gpt-4o
-```
-
-可选的自定义端点（用于 OpenAI 兼容服务）：
-
-```bash
-OPENAI_BASE_URL=https://your-custom-endpoint/v1
-```
-
-### Anthropic
-
-```bash
-ANTHROPIC_API_KEY=your_api_key
-AI_MODEL=claude-sonnet-4-5-20250514
-```
-
-可选的自定义端点：
-
-```bash
-ANTHROPIC_BASE_URL=https://your-custom-endpoint
-```
-
-### DeepSeek
-
-```bash
-DEEPSEEK_API_KEY=your_api_key
-AI_MODEL=deepseek-chat
-```
-
-可选的自定义端点：
-
-```bash
-DEEPSEEK_BASE_URL=https://your-custom-endpoint
-```
-
-### SiliconFlow (OpenAI 兼容)
-
-```bash
-SILICONFLOW_API_KEY=your_api_key
-AI_MODEL=deepseek-ai/DeepSeek-V3  # 示例；使用任何 SiliconFlow 模型 ID
-```
-
-可选的自定义端点（默认为推荐域名）：
-
-```bash
-SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # 或 https://api.siliconflow.cn/v1
-```
-
-### SGLang
-
-```bash
-SGLANG_API_KEY=your_api_key
-AI_MODEL=your_model_id
-```
-
-可选的自定义端点：
-
-```bash
-SGLANG_BASE_URL=https://your-custom-endpoint/v1
-```
-
-### Azure OpenAI
-
-```bash
-AZURE_API_KEY=your_api_key
-AZURE_RESOURCE_NAME=your-resource-name  # 必填：您的 Azure 资源名称
-AI_MODEL=your-deployment-name
-```
-
-或者使用自定义端点代替资源名称：
-
-```bash
-AZURE_API_KEY=your_api_key
-AZURE_BASE_URL=https://your-resource.openai.azure.com  # AZURE_RESOURCE_NAME 的替代方案
-AI_MODEL=your-deployment-name
-```
-
-可选的推理配置：
-
-```bash
-AZURE_REASONING_EFFORT=low      # 可选：low, medium, high
-AZURE_REASONING_SUMMARY=detailed  # 可选：none, brief, detailed
-```
-
-### AWS Bedrock
-
-```bash
-AWS_REGION=us-west-2
-AWS_ACCESS_KEY_ID=your_access_key_id
-AWS_SECRET_ACCESS_KEY=your_secret_access_key
-AI_MODEL=anthropic.claude-sonnet-4-5-20250514-v1:0
-```
-
-注意：在 AWS 环境（Lambda、带有 IAM 角色的 EC2）中，凭证会自动从 IAM 角色获取。
-
-### OpenRouter
-
-```bash
-OPENROUTER_API_KEY=your_api_key
-AI_MODEL=anthropic/claude-sonnet-4
-```
-
-可选的自定义端点：
-
-```bash
-OPENROUTER_BASE_URL=https://your-custom-endpoint
-```
-
-### Ollama (本地)
-
-```bash
-AI_PROVIDER=ollama
-AI_MODEL=llama3.2
-```
-
-### ModelScope
-
-```bash
-MODELSCOPE_API_KEY=your_api_key
-AI_MODEL=Qwen/Qwen3-235B-A22B-Instruct-2507
-```
-
-可选的自定义端点：
-
-```bash
-MODELSCOPE_BASE_URL=https://your-custom-endpoint
-```
-
-可选的自定义 URL：
-
-```bash
-OLLAMA_BASE_URL=http://localhost:11434
-```
-
-### Vercel AI Gateway
-
-Vercel AI Gateway 通过单个 API 密钥提供对多个 AI 提供商的统一访问。这简化了身份验证，让您无需管理多个 API 密钥即可在不同提供商之间切换。
-
-**基本用法（Vercel 托管网关）：**
-
-```bash
-AI_GATEWAY_API_KEY=your_gateway_api_key
-AI_MODEL=openai/gpt-4o
-```
-
-**自定义网关 URL（用于本地开发或自托管网关）：**
-
-```bash
-AI_GATEWAY_API_KEY=your_custom_api_key
-AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
-AI_MODEL=openai/gpt-4o
-```
-
-模型格式使用 `provider/model` 语法：
-
--   `openai/gpt-4o` - OpenAI GPT-4o
--   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
--   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
-
-**配置说明：**
-
--   如果未设置 `AI_GATEWAY_BASE_URL`，则使用默认的 Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`)
--   自定义基础 URL 适用于：
-    -   使用自定义网关实例进行本地开发
-    -   自托管 AI Gateway 部署
-    -   企业代理配置
--   当使用自定义基础 URL 时，必须同时提供 `AI_GATEWAY_API_KEY`
-
-从 [Vercel AI Gateway 仪表板](https://vercel.com/ai-gateway) 获取您的 API 密钥。
-
-### MiniMax
-
-MiniMax 支持两种 API 格式：
-- **Anthropic 兼容**（`/anthropic` 端点）— 推荐，支持 interleaved thinking
-- **OpenAI 兼容**（`/v1` 端点）— 标准 OpenAI 聊天补全格式
-
-```bash
-MINIMAX_API_KEY=your_api_key
-AI_MODEL=MiniMax-M2.7
-```
-
-可选配置：
-
-```bash
-# 中国大陆版，Anthropic 兼容（默认）
-MINIMAX_BASE_URL=https://api.minimaxi.com/anthropic
-
-# 中国大陆版，OpenAI 兼容
-MINIMAX_BASE_URL=https://api.minimaxi.com/v1
-
-# 国际版，Anthropic 兼容
-MINIMAX_BASE_URL=https://api.minimax.io/anthropic
-
-# 国际版，OpenAI 兼容
-MINIMAX_BASE_URL=https://api.minimax.io/v1
-```
-
-### GLM (智谱 AI)
-
-```bash
-GLM_API_KEY=your_api_key
-AI_MODEL=glm-4
-```
-
-可选的自定义端点：
-
-```bash
-GLM_BASE_URL=https://your-custom-endpoint
-```
-
-### Qwen (阿里云通义千问)
-
-```bash
-QWEN_API_KEY=your_api_key
-AI_MODEL=qwen-turbo
-```
-
-可选的自定义端点：
-
-```bash
-QWEN_BASE_URL=https://your-custom-endpoint
-```
-
-### Kimi (月之暗面 Moonshot AI)
-
-```bash
-KIMI_API_KEY=your_api_key
-AI_MODEL=kimi-latest
-```
-
-可选的自定义端点：
-
-```bash
-KIMI_BASE_URL=https://your-custom-endpoint
-```
-
-### Qiniu (七牛云)
-
-```bash
-QINIU_API_KEY=your_api_key
-AI_MODEL=your_model_id
-```
-
-可选的自定义端点：
-
-```bash
-QINIU_BASE_URL=https://your-custom-endpoint
-```
-
-## 自动检测
-
-如果您只配置了**一个**提供商的 API 密钥，系统将自动检测并使用该提供商。无需设置 `AI_PROVIDER`。
-
-如果您配置了**多个** API 密钥，则必须显式设置 `AI_PROVIDER`：
-
-```bash
-AI_PROVIDER=google  # 或：openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang, modelscope, minimax, glm, qwen, kimi, qiniu
-```
-
-## 服务端多模型配置
-
-管理员可以配置多个服务端模型，让所有用户无需提供个人 API Key 即可使用。
-
-### 配置方式
-
-**方式一：环境变量**（推荐用于云部署）
-
-设置 `AI_MODELS_CONFIG` 为 JSON 字符串：
-
-```bash
-AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
-```
-
-**方式二：配置文件**
-
-在项目根目录创建 `ai-models.json` 文件（或通过 `AI_MODELS_CONFIG_PATH` 指定路径）。
-
-### 配置示例
-
-```json
-{
-  "providers": [
-    {
-      "name": "OpenAI Production",
-      "provider": "openai",
-      "models": ["gpt-4o", "gpt-4o-mini"],
-      "default": true
-    },
-    {
-      "name": "Custom DeepSeek",
-      "provider": "deepseek",
-      "models": ["deepseek-chat"],
-      "apiKeyEnv": "MY_DEEPSEEK_KEY",
-      "baseUrlEnv": "MY_DEEPSEEK_URL"
-    }
-  ]
-}
-```
-
-### 字段说明
-
-| 字段 | 必填 | 说明 |
-|------|------|------|
-| `name` | 是 | 显示名称（支持同一提供商多个配置） |
-| `provider` | 是 | 提供商类型（`openai`, `anthropic`, `google`, `bedrock` 等） |
-| `models` | 是 | 模型 ID 列表 |
-| `default` | 否 | 设为 `true` 表示默认选中该提供商的第一个模型 |
-| `apiKeyEnv` | 否 | 自定义 API Key 环境变量名（默认使用提供商标准变量如 `OPENAI_API_KEY`） |
-| `baseUrlEnv` | 否 | 自定义 Base URL 环境变量名 |
-
-### 说明
-
-- API Key 和凭证通过环境变量提供。默认使用标准变量名（如 `OPENAI_API_KEY`），也可通过 `apiKeyEnv` 指定自定义变量名。
-- `name` 字段允许同一提供商多个配置（例如 "OpenAI Production" 和 "OpenAI Staging" 都使用 `provider: "openai"` 但 `apiKeyEnv` 不同）。
-- 如果配置不存在，应用会回退到 `AI_PROVIDER`/`AI_MODEL` 环境变量配置。
-
-## 模型能力要求
-
-此任务对模型能力要求极高，因为它涉及生成具有严格格式约束（draw.io XML）的长文本。
-
-**推荐模型**：
-
--   Claude Sonnet 4.5 / Opus 4.5
-
-**关于 Ollama 的说明**：虽然支持将 Ollama 作为提供商，但除非您在本地运行像 DeepSeek R1 或 Qwen3-235B 这样的高性能模型，否则对于此用例通常不太实用。
-
-## 温度设置 (Temperature)
-
-您可以通过环境变量选择性地配置温度：
-
-```bash
-TEMPERATURE=0  # 输出更具确定性（推荐用于图表）
-```
-
-**重要提示**：对于不支持温度设置的模型（例如以下模型），请勿设置 `TEMPERATURE`：
-- GPT-5.1 和其他推理模型
-- 某些专用模型
-
-未设置时，模型将使用其默认行为。
-
-## 推荐
-
--   **最佳体验**：使用支持视觉的模型（GPT-4o, Claude, Gemini）以获得图像转图表功能
--   **经济实惠**：DeepSeek 提供具有竞争力的价格
--   **隐私保护**：使用 Ollama 进行完全本地、离线的操作（需要强大的硬件支持）
--   **灵活性**：OpenRouter 通过单一 API 提供对众多模型的访问

docs/cn/cloudflare-deploy.md

@@ -1,267 +0,0 @@
-# 部署到 Cloudflare Workers
-
-本项目可以通过 **OpenNext 适配器** 部署为 **Cloudflare Worker**，为您提供：
-
-- 全球边缘部署
-- 极低延迟
-- 免费的 `workers.dev` 域名托管
-- 通过 R2 实现完整的 Next.js ISR 支持（可选）
-
-> **Windows 用户重要提示：** OpenNext 和 Wrangler 在 **原生 Windows 环境下并不完全可靠**。建议方案：
->
-> - 使用 **GitHub Codespaces**（完美运行）
-> - 或者使用 **WSL (Linux)**
->
-> 纯 Windows 构建可能会因为 WASM 文件路径问题而失败。
-
----
-
-## 前置条件
-
-1. 一个 **Cloudflare 账户**（免费版即可满足基本部署需求）
-2. **Node.js 18+**
-3. 安装 **Wrangler CLI**（作为开发依赖安装即可）：
-
-```bash
-npm install -D wrangler
-```
-
-4. 登录 Cloudflare：
-
-```bash
-npx wrangler login
-```
-
-> **注意：** 只有在启用 R2 进行 ISR 缓存时才需要绑定支付方式。基本的 Workers 部署是免费的。
-
----
-
-## 第一步 — 安装依赖
-
-```bash
-npm install
-```
-
----
-
-## 第二步 — 配置环境变量
-
-Cloudflare 在本地测试时使用不同的文件。
-
-### 1) 创建 `.dev.vars`（用于 Cloudflare 本地调试 + 部署）
-
-```bash
-cp env.example .dev.vars
-```
-
-填入您的 API 密钥和配置信息。
-
-### 2) 确保 `.env.local` 也存在（用于常规 Next.js 开发）
-
-```bash
-cp env.example .env.local
-```
-
-在此处填入相同的值。
-
----
-
-## 第三步 — 选择部署类型
-
-### 选项 A：不使用 R2 部署（简单，免费）
-
-如果您不需要 ISR 缓存，可以选择不使用 R2 进行部署：
-
-**1. 使用简单的 `open-next.config.ts`：**
-
-```ts
-import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
-
-export default defineCloudflareConfig({})
-```
-
-**2. 使用简单的 `wrangler.jsonc`（不包含 r2_buckets）：**
-
-```jsonc
-{
-  "$schema": "node_modules/wrangler/config-schema.json",
-  "main": ".open-next/worker.js",
-  "name": "next-ai-draw-io-worker",
-  "compatibility_date": "2025-12-08",
-  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
-  "assets": {
-    "directory": ".open-next/assets",
-    "binding": "ASSETS"
-  },
-  "services": [
-    {
-      "binding": "WORKER_SELF_REFERENCE",
-      "service": "next-ai-draw-io-worker"
-    }
-  ]
-}
-```
-
-直接跳至 **第四步**。
-
----
-
-### 选项 B：使用 R2 部署（完整的 ISR 支持）
-
-R2 开启了 **增量静态再生 (ISR)** 缓存功能。需要在您的 Cloudflare 账户中绑定支付方式。
-
-**1. 在 Cloudflare 控制台中创建 R2 存储桶：**
-
-- 进入 **Storage & Databases → R2**
-- 点击 **Create bucket**
-- 命名为：`next-inc-cache`
-
-**2. 配置 `open-next.config.ts`：**
-
-```ts
-import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
-import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
-
-export default defineCloudflareConfig({
-  incrementalCache: r2IncrementalCache,
-})
-```
-
-**3. 配置 `wrangler.jsonc`（包含 R2）：**
-
-```jsonc
-{
-  "$schema": "node_modules/wrangler/config-schema.json",
-  "main": ".open-next/worker.js",
-  "name": "next-ai-draw-io-worker",
-  "compatibility_date": "2025-12-08",
-  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
-  "assets": {
-    "directory": ".open-next/assets",
-    "binding": "ASSETS"
-  },
-  "r2_buckets": [
-    {
-      "binding": "NEXT_INC_CACHE_R2_BUCKET",
-      "bucket_name": "next-inc-cache"
-    }
-  ],
-  "services": [
-    {
-      "binding": "WORKER_SELF_REFERENCE",
-      "service": "next-ai-draw-io-worker"
-    }
-  ]
-}
-```
-
-> **重要提示：** `bucket_name` 必须与您在 Cloudflare 控制台中创建的名称完全一致。
-
----
-
-## 第四步 — 注册 workers.dev 子域名（仅首次需要）
-
-在首次部署之前，您需要一个 workers.dev 子域名。
-
-**选项 1：通过 Cloudflare 控制台（推荐）**
-
-访问：https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
-
-**选项 2：在部署过程中**
-
-运行 `npm run deploy` 时，Wrangler 可能会提示：
-
-```
-Would you like to register a workers.dev subdomain? (Y/n)
-```
-
-输入 `Y` 并选择一个子域名。
-
-> **注意：** 在 CI/CD 或非交互式环境中，该提示不会出现。请先通过控制台进行注册。
-
----
-
-## 第五步 — 部署到 Cloudflare
-
-```bash
-npm run deploy
-```
-
-该脚本执行的操作：
-
-- 构建 Next.js 应用
-- 通过 OpenNext 将其转换为 Cloudflare Worker
-- 上传静态资源
-- 发布 Worker
-
-您的应用将可通过以下地址访问：
-
-```
-https://<worker-name>.<your-subdomain>.workers.dev
-```
-
----
-
-## 常见问题与修复
-
-### `You need to register a workers.dev subdomain`
-
-**原因：** 您的账户尚未注册 workers.dev 子域名。
-
-**修复：** 前往 https://dash.cloudflare.com → Workers & Pages → Set up a subdomain。
-
----
-
-### `Please enable R2 through the Cloudflare Dashboard`
-
-**原因：** wrangler.jsonc 中配置了 R2，但您的账户尚未启用该功能。
-
-**修复：** 启用 R2（需要支付方式）或使用选项 A（不使用 R2 部署）。
-
----
-
-### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
-
-**原因：** `wrangler.jsonc` 中缺少 `r2_buckets` 配置。
-
-**修复：** 添加 `r2_buckets` 部分或切换到选项 A（不使用 R2）。
-
----
-
-### `Can't set compatibility date in the future`
-
-**原因：** wrangler 配置中的 `compatibility_date` 设置为了未来的日期。
-
-**修复：** 将 `compatibility_date` 修改为今天或更早的日期。
-
----
-
-### Windows 错误：`resvg.wasm?module` (ENOENT)
-
-**原因：** Windows 文件名不能包含 `?`，但某个 wasm 资源文件名中使用了 `?module`。
-
-**修复：** 在 Linux 环境（WSL、Codespaces 或 CI）上进行构建/部署。
-
----
-
-## 可选：本地预览
-
-部署前在本地预览 Worker：
-
-```bash
-npm run preview
-```
-
----
-
-## 总结
-
-| 功能 | 不使用 R2 | 使用 R2 |
-|---------|------------|---------|
-| 成本 | 免费 | 需要绑定支付方式 |
-| ISR 缓存 | 无 | 有 |
-| 静态页面 | 支持 | 支持 |
-| API 路由 | 支持 | 支持 |
-| 配置复杂度 | 简单 | 中等 |
-
-测试或简单应用请选择 **不使用 R2**。需要 ISR 缓存的生产环境应用请选择 **使用 R2**。

docs/cn/docker.md

@@ -1,29 +0,0 @@
-# 使用 Docker 运行
-
-如果您只是想在本地运行，最好的方式是使用 Docker。
-
-首先，如果您尚未安装 Docker，请先安装：[获取 Docker](https://docs.docker.com/get-docker/)
-
-然后运行：
-
-```bash
-docker run -d -p 3000:3000 \
-  -e AI_PROVIDER=openai \
-  -e AI_MODEL=gpt-4o \
-  -e OPENAI_API_KEY=your_api_key \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-或者使用环境变量文件：
-
-```bash
-cp env.example .env
-# 编辑 .env 文件并填入您的配置
-docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
-
-请将环境变量替换为您首选的 AI 提供商配置。查看 [AI 提供商](./ai-providers.md) 了解可用选项。
-
-> **离线部署：** 如果无法访问 `embed.diagrams.net`，请参阅 [离线部署](./offline-deployment.md) 了解配置选项。

docs/cn/offline-deployment.md

@@ -1,38 +0,0 @@
-# 离线部署
-
-通过自托管 draw.io 来替代 `embed.diagrams.net`，从而离线部署 Next AI Draw.io。
-
-**注意：** `NEXT_PUBLIC_DRAWIO_BASE_URL` 是一个**构建时**变量。修改它需要重新构建 Docker 镜像。
-
-## Docker Compose 设置
-
-1. 克隆仓库并在 `.env` 文件中定义 API 密钥。
-2. 创建 `docker-compose.yml`：
-
-```yaml
-services:
-  drawio:
-    image: jgraph/drawio:latest
-    ports: ["8080:8080"]
-  next-ai-draw-io:
-    build:
-      context: .
-      args:
-        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
-    ports: ["3000:3000"]
-    env_file: .env
-    depends_on: [drawio]
-```
-
-3. 运行 `docker compose up -d` 并打开 `http://localhost:3000`。
-
-## 配置与重要警告
-
-**`NEXT_PUBLIC_DRAWIO_BASE_URL` 必须是用户浏览器可访问的地址。**
-
-| 场景 | URL 值 |
-|----------|-----------|
-| 本地主机 (Localhost) | `http://localhost:8080` |
-| 远程/服务器 | `http://YOUR_SERVER_IP:8080` |
-
-**切勿使用** Docker 内部别名（如 `http://drawio:8080`），因为浏览器无法解析它们。

docs/en/FAQ.md

@@ -1,78 +0,0 @@
-# Frequently Asked Questions (FAQ)
-
----
-
-## 1. Cannot Export PDF
-
-**Problem**: Web version redirects to `convert.diagrams.net/node/export` when exporting PDF, then nothing happens
-
-**Cause**: Embedded Draw.io doesn't support direct PDF export, it relies on external conversion service which doesn't work in iframe
-
-**Solution**: Export as image (PNG) first, then print to PDF
-
-**Related Issues**: #539, #125
-
----
-
-## 2. Cannot Access embed.diagrams.net (Offline/Intranet Deployment)
-
-**Problem**: Intranet environment shows "Cannot find server IP address for embed.diagrams.net"
-
-**Key Point**: `NEXT_PUBLIC_*` environment variables are **build-time** variables, they get bundled into JS code. **Runtime settings don't work!**
-
-**Solution**: Must pass via `args` at build time:
-
-```yaml
-# docker-compose.yml
-services:
-  drawio:
-    image: jgraph/drawio:latest
-    ports: ["8080:8080"]
-  next-ai-draw-io:
-    build:
-      context: .
-      args:
-        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://your-server-ip:8080/
-    ports: ["3000:3000"]
-    env_file: .env
-```
-
-**Intranet Users**: Modify Dockerfile and build image on external network, then transfer to intranet
-
-**Related Issues**: #295, #317
-
----
-
-## 3. Self-hosted Model Only Thinks But Doesn't Draw
-
-**Problem**: Locally deployed models (e.g., Qwen, LiteLLM) only output thinking process, don't generate diagrams
-
-**Possible Causes**:
-1. **Model too small** - Small models struggle to follow tool calling instructions correctly, recommend 32B+ parameter models
-2. **Tool calling not enabled** - Model service needs tool use configuration
-
-**Solution**: Enable tool calling, e.g., vLLM:
-```bash
-python -m vllm.entrypoints.openai.api_server \
-    --model Qwen/Qwen3-32B \
-    --enable-auto-tool-choice \
-    --tool-call-parser hermes
-```
-
-**Related Issues**: #269, #75
-
----
-
-## 4. "No Image Provided" After Uploading Image
-
-**Problem**: After uploading an image, the system shows "No image provided" error
-
-**Possible Causes**:
-1. Model doesn't support vision (e.g., Kimi K2, DeepSeek, Qwen text models)
-
-**Solution**:
-- Use vision-capable models: GPT-5.2, Claude 4.5 Sonnet, Gemini 3 Pro
-- Models with `vision` or `vl` in name support images
-- Update to latest version (v0.4.9+)
-
-**Related Issues**: #324, #421, #469

docs/en/ai-providers.md

@@ -1,400 +0,0 @@
-# AI Provider Configuration
-
-This guide explains how to configure different AI model providers for next-ai-draw-io.
-
-## Quick Start
-
-1. Copy `.env.example` to `.env.local`
-2. Set your API key for your chosen provider
-3. Set `AI_MODEL` to your desired model
-4. Run `npm run dev`
-
-## Supported Providers
-
-### Doubao (ByteDance Volcengine)
-
-> **Free tokens**: Register on the [Volcengine ARK platform](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) to get 500K free tokens for all models!
-
-```bash
-DOUBAO_API_KEY=your_api_key
-AI_MODEL=doubao-seed-1-8-251215  # or other Doubao model
-```
-
-### Google Gemini
-
-```bash
-GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
-AI_MODEL=gemini-2.0-flash
-```
-
-Optional custom endpoint:
-
-```bash
-GOOGLE_BASE_URL=https://your-custom-endpoint
-```
-
-### Google Vertex AI (Enterprise GCP)
-
-Google Vertex AI offers enterprise-grade features and data residency. **Express Mode** allows for simple API key authentication, making it compatible with edge runtimes like Vercel and Cloudflare.
-
-```bash
-GOOGLE_VERTEX_API_KEY=your_api_key
-AI_MODEL=gemini-2.0-flash
-```
-
-Optional custom endpoint:
-
-```bash
-GOOGLE_VERTEX_BASE_URL=https://your-custom-endpoint
-```
-
-### OpenAI
-
-```bash
-OPENAI_API_KEY=your_api_key
-AI_MODEL=gpt-4o
-```
-
-Optional custom endpoint (for OpenAI-compatible services):
-
-```bash
-OPENAI_BASE_URL=https://your-custom-endpoint/v1
-```
-
-### Anthropic
-
-```bash
-ANTHROPIC_API_KEY=your_api_key
-AI_MODEL=claude-sonnet-4-5-20250514
-```
-
-Optional custom endpoint:
-
-```bash
-ANTHROPIC_BASE_URL=https://your-custom-endpoint
-```
-
-### DeepSeek
-
-```bash
-DEEPSEEK_API_KEY=your_api_key
-AI_MODEL=deepseek-chat
-```
-
-Optional custom endpoint:
-
-```bash
-DEEPSEEK_BASE_URL=https://your-custom-endpoint
-```
-
-### SiliconFlow (OpenAI-compatible)
-
-```bash
-SILICONFLOW_API_KEY=your_api_key
-AI_MODEL=deepseek-ai/DeepSeek-V3  # example; use any SiliconFlow model id
-```
-
-Optional custom endpoint (defaults to the recommended domain):
-
-```bash
-SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # or https://api.siliconflow.cn/v1
-```
-
-### SGLang
-
-```bash
-SGLANG_API_KEY=your_api_key
-AI_MODEL=your_model_id
-```
-
-Optional custom endpoint:
-
-```bash
-SGLANG_BASE_URL=https://your-custom-endpoint/v1
-```
-
-### Azure OpenAI
-
-```bash
-AZURE_API_KEY=your_api_key
-AZURE_RESOURCE_NAME=your-resource-name  # Required: your Azure resource name
-AI_MODEL=your-deployment-name
-```
-
-Or use a custom endpoint instead of resource name:
-
-```bash
-AZURE_API_KEY=your_api_key
-AZURE_BASE_URL=https://your-resource.openai.azure.com  # Alternative to AZURE_RESOURCE_NAME
-AI_MODEL=your-deployment-name
-```
-
-Optional reasoning configuration:
-
-```bash
-AZURE_REASONING_EFFORT=low      # Optional: low, medium, high
-AZURE_REASONING_SUMMARY=detailed  # Optional: none, brief, detailed
-```
-
-### AWS Bedrock
-
-```bash
-AWS_REGION=us-west-2
-AWS_ACCESS_KEY_ID=your_access_key_id
-AWS_SECRET_ACCESS_KEY=your_secret_access_key
-AI_MODEL=anthropic.claude-sonnet-4-5-20250514-v1:0
-```
-
-Note: On AWS (Lambda, EC2 with IAM role), credentials are automatically obtained from the IAM role.
-
-### OpenRouter
-
-```bash
-OPENROUTER_API_KEY=your_api_key
-AI_MODEL=anthropic/claude-sonnet-4
-```
-
-Optional custom endpoint:
-
-```bash
-OPENROUTER_BASE_URL=https://your-custom-endpoint
-```
-
-### Ollama (Local)
-
-```bash
-AI_PROVIDER=ollama
-AI_MODEL=llama3.2
-```
-
-Optional custom URL:
-
-```bash
-OLLAMA_BASE_URL=http://localhost:11434
-```
-
-### ModelScope
-
-```bash
-MODELSCOPE_API_KEY=your_api_key
-AI_MODEL=Qwen/Qwen3-235B-A22B-Instruct-2507
-```
-
-Optional custom endpoint:
-
-```bash
-MODELSCOPE_BASE_URL=https://your-custom-endpoint
-```
-
-### Vercel AI Gateway
-
-Vercel AI Gateway provides unified access to multiple AI providers through a single API key. This simplifies authentication and allows you to switch between providers without managing multiple API keys.
-
-**Basic Usage (Vercel-hosted Gateway):**
-
-```bash
-AI_GATEWAY_API_KEY=your_gateway_api_key
-AI_MODEL=openai/gpt-4o
-```
-
-**Custom Gateway URL (for local development or self-hosted Gateway):**
-
-```bash
-AI_GATEWAY_API_KEY=your_custom_api_key
-AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
-AI_MODEL=openai/gpt-4o
-```
-
-Model format uses `provider/model` syntax:
-
--   `openai/gpt-4o` - OpenAI GPT-4o
--   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
--   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
-
-**Configuration notes:**
-
--   If `AI_GATEWAY_BASE_URL` is not set, the default Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`) is used
--   Custom base URL is useful for:
-    -   Local development with a custom Gateway instance
-    -   Self-hosted AI Gateway deployments
-    -   Enterprise proxy configurations
--   When using a custom base URL, you must also provide `AI_GATEWAY_API_KEY`
-
-Get your API key from the [Vercel AI Gateway dashboard](https://vercel.com/ai-gateway).
-
-### MiniMax
-
-MiniMax supports two API formats:
-- **Anthropic-compatible** (`/anthropic` endpoint) — recommended, supports interleaved thinking
-- **OpenAI-compatible** (`/v1` endpoint) — standard OpenAI chat completions format
-
-```bash
-MINIMAX_API_KEY=your_api_key
-AI_MODEL=MiniMax-M2.7
-```
-
-Optional configuration:
-
-```bash
-# China mainland, Anthropic-compatible (default)
-MINIMAX_BASE_URL=https://api.minimaxi.com/anthropic
-
-# China mainland, OpenAI-compatible
-MINIMAX_BASE_URL=https://api.minimaxi.com/v1
-
-# International, Anthropic-compatible
-MINIMAX_BASE_URL=https://api.minimax.io/anthropic
-
-# International, OpenAI-compatible
-MINIMAX_BASE_URL=https://api.minimax.io/v1
-```
-
-### GLM (Zhipu AI)
-
-```bash
-GLM_API_KEY=your_api_key
-AI_MODEL=glm-4
-```
-
-Optional custom endpoint:
-
-```bash
-GLM_BASE_URL=https://your-custom-endpoint
-```
-
-### Qwen (Alibaba Cloud)
-
-```bash
-QWEN_API_KEY=your_api_key
-AI_MODEL=qwen-turbo
-```
-
-Optional custom endpoint:
-
-```bash
-QWEN_BASE_URL=https://your-custom-endpoint
-```
-
-### Kimi (Moonshot AI)
-
-```bash
-KIMI_API_KEY=your_api_key
-AI_MODEL=kimi-latest
-```
-
-Optional custom endpoint:
-
-```bash
-KIMI_BASE_URL=https://your-custom-endpoint
-```
-
-### Qiniu (Qiniu Cloud)
-
-```bash
-QINIU_API_KEY=your_api_key
-AI_MODEL=your_model_id
-```
-
-Optional custom endpoint:
-
-```bash
-QINIU_BASE_URL=https://your-custom-endpoint
-```
-
-## Auto-Detection
-
-If you only configure **one** provider's API key, the system will automatically detect and use that provider. No need to set `AI_PROVIDER`.
-
-If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`:
-
-```bash
-AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang, modelscope, minimax, glm, qwen, kimi, qiniu
-```
-
-## Server-Side Multi-Model Configuration
-
-Administrators can configure multiple server-side models that are available to all users without requiring personal API keys.
-
-### Configuration Methods
-
-**Option 1: Environment Variable** (recommended for cloud deployments)
-
-Set `AI_MODELS_CONFIG` as a JSON string:
-
-```bash
-AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
-```
-
-**Option 2: Config File**
-
-Create an `ai-models.json` file in the project root (or set `AI_MODELS_CONFIG_PATH` to a custom location).
-
-### Example Configuration
-
-```json
-{
-  "providers": [
-    {
-      "name": "OpenAI Production",
-      "provider": "openai",
-      "models": ["gpt-4o", "gpt-4o-mini"],
-      "default": true
-    },
-    {
-      "name": "Custom DeepSeek",
-      "provider": "deepseek",
-      "models": ["deepseek-chat"],
-      "apiKeyEnv": "MY_DEEPSEEK_KEY",
-      "baseUrlEnv": "MY_DEEPSEEK_URL"
-    }
-  ]
-}
-```
-
-### Field Reference
-
-| Field | Required | Description |
-|-------|----------|-------------|
-| `name` | Yes | Display name (supports multiple configs for same provider) |
-| `provider` | Yes | Provider type (`openai`, `anthropic`, `google`, `bedrock`, etc.) |
-| `models` | Yes | List of model IDs |
-| `default` | No | Set to `true` to auto-select this provider's first model as default |
-| `apiKeyEnv` | No | Custom API key env var name (defaults to provider's standard var like `OPENAI_API_KEY`) |
-| `baseUrlEnv` | No | Custom base URL env var name |
-
-### Notes
-
-- API keys and credentials are provided via environment variables. By default, standard var names are used (e.g., `OPENAI_API_KEY`), but you can specify custom var names with `apiKeyEnv`.
-- The `name` field allows multiple configurations for the same provider (e.g., "OpenAI Production" and "OpenAI Staging" both using `provider: "openai"` but with different `apiKeyEnv` values).
-- If config is not present, the app falls back to `AI_PROVIDER`/`AI_MODEL` environment variable configuration.
-
-## Model Capability Requirements
-
-This task requires exceptionally strong model capabilities, as it involves generating long-form text with strict formatting constraints (draw.io XML).
-
-**Recommended models**:
-
--   Claude Sonnet 4.5 / Opus 4.5
-
-**Note on Ollama**: While Ollama is supported as a provider, it's generally not practical for this use case unless you're running high-capability models like DeepSeek R1 or Qwen3-235B locally.
-
-## Temperature Setting
-
-You can optionally configure the temperature via environment variable:
-
-```bash
-TEMPERATURE=0  # More deterministic output (recommended for diagrams)
-```
-
-**Important**: Leave `TEMPERATURE` unset for models that don't support temperature settings, such as:
-- GPT-5.1 and other reasoning models
-- Some specialized models
-
-When unset, the model uses its default behavior.
-
-## Recommendations
-
--   **Best experience**: Use models with vision support (GPT-4o, Claude, Gemini) for image-to-diagram features
--   **Budget-friendly**: DeepSeek offers competitive pricing
--   **Privacy**: Use Ollama for fully local, offline operation (requires powerful hardware)
--   **Flexibility**: OpenRouter provides access to many models through a single API

docs/en/cloudflare-deploy.md

@@ -1,267 +0,0 @@
-# Deploy on Cloudflare Workers
-
-This project can be deployed as a **Cloudflare Worker** using the **OpenNext adapter**, giving you:
-
-- Global edge deployment
-- Very low latency
-- Free `workers.dev` hosting
-- Full Next.js ISR support via R2 (optional)
-
-> **Important Windows Note:** OpenNext and Wrangler are **not fully reliable on native Windows**. Recommended options:
->
-> - Use **GitHub Codespaces** (works perfectly)
-> - OR use **WSL (Linux)**
->
-> Pure Windows builds may fail due to WASM file path issues.
-
----
-
-## Prerequisites
-
-1. A **Cloudflare account** (free tier works for basic deployment)
-2. **Node.js 18+**
-3. **Wrangler CLI** installed (dev dependency is fine):
-
-```bash
-npm install -D wrangler
-```
-
-4. Cloudflare login:
-
-```bash
-npx wrangler login
-```
-
-> **Note:** A payment method is only required if you want to enable R2 for ISR caching. Basic Workers deployment is free.
-
----
-
-## Step 1 — Install dependencies
-
-```bash
-npm install
-```
-
----
-
-## Step 2 — Configure environment variables
-
-Cloudflare uses a different file for local testing.
-
-### 1) Create `.dev.vars` (for Cloudflare local + deploy)
-
-```bash
-cp env.example .dev.vars
-```
-
-Fill in your API keys and configuration.
-
-### 2) Make sure `.env.local` also exists (for regular Next.js dev)
-
-```bash
-cp env.example .env.local
-```
-
-Fill in the same values there.
-
----
-
-## Step 3 — Choose your deployment type
-
-### Option A: Deploy WITHOUT R2 (Simple, Free)
-
-If you don't need ISR caching, you can deploy without R2:
-
-**1. Use simple `open-next.config.ts`:**
-
-```ts
-import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
-
-export default defineCloudflareConfig({})
-```
-
-**2. Use simple `wrangler.jsonc` (without r2_buckets):**
-
-```jsonc
-{
-  "$schema": "node_modules/wrangler/config-schema.json",
-  "main": ".open-next/worker.js",
-  "name": "next-ai-draw-io-worker",
-  "compatibility_date": "2025-12-08",
-  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
-  "assets": {
-    "directory": ".open-next/assets",
-    "binding": "ASSETS"
-  },
-  "services": [
-    {
-      "binding": "WORKER_SELF_REFERENCE",
-      "service": "next-ai-draw-io-worker"
-    }
-  ]
-}
-```
-
-Skip to **Step 4**.
-
----
-
-### Option B: Deploy WITH R2 (Full ISR Support)
-
-R2 enables **Incremental Static Regeneration (ISR)** caching. Requires a payment method on your Cloudflare account.
-
-**1. Create an R2 bucket** in the Cloudflare Dashboard:
-
-- Go to **Storage & Databases → R2**
-- Click **Create bucket**
-- Name it: `next-inc-cache`
-
-**2. Configure `open-next.config.ts`:**
-
-```ts
-import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
-import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
-
-export default defineCloudflareConfig({
-  incrementalCache: r2IncrementalCache,
-})
-```
-
-**3. Configure `wrangler.jsonc` (with R2):**
-
-```jsonc
-{
-  "$schema": "node_modules/wrangler/config-schema.json",
-  "main": ".open-next/worker.js",
-  "name": "next-ai-draw-io-worker",
-  "compatibility_date": "2025-12-08",
-  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
-  "assets": {
-    "directory": ".open-next/assets",
-    "binding": "ASSETS"
-  },
-  "r2_buckets": [
-    {
-      "binding": "NEXT_INC_CACHE_R2_BUCKET",
-      "bucket_name": "next-inc-cache"
-    }
-  ],
-  "services": [
-    {
-      "binding": "WORKER_SELF_REFERENCE",
-      "service": "next-ai-draw-io-worker"
-    }
-  ]
-}
-```
-
-> **Important:** The `bucket_name` must exactly match the name you created in the Cloudflare dashboard.
-
----
-
-## Step 4 — Register a workers.dev subdomain (first-time only)
-
-Before your first deployment, you need a workers.dev subdomain.
-
-**Option 1: Via Cloudflare Dashboard (Recommended)**
-
-Visit: https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
-
-**Option 2: During deploy**
-
-When you run `npm run deploy`, Wrangler may prompt:
-
-```
-Would you like to register a workers.dev subdomain? (Y/n)
-```
-
-Type `Y` and choose a subdomain name.
-
-> **Note:** In CI/CD or non-interactive environments, the prompt won't appear. Register via the dashboard first.
-
----
-
-## Step 5 — Deploy to Cloudflare
-
-```bash
-npm run deploy
-```
-
-What the script does:
-
-- Builds the Next.js app
-- Converts it to a Cloudflare Worker via OpenNext
-- Uploads static assets
-- Publishes the Worker
-
-Your app will be available at:
-
-```
-https://<worker-name>.<your-subdomain>.workers.dev
-```
-
----
-
-## Common issues & fixes
-
-### `You need to register a workers.dev subdomain`
-
-**Cause:** No workers.dev subdomain registered for your account.
-
-**Fix:** Go to https://dash.cloudflare.com → Workers & Pages → Set up a subdomain.
-
----
-
-### `Please enable R2 through the Cloudflare Dashboard`
-
-**Cause:** R2 is configured in wrangler.jsonc but not enabled on your account.
-
-**Fix:** Either enable R2 (requires payment method) or use Option A (deploy without R2).
-
----
-
-### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
-
-**Cause:** `r2_buckets` is missing from `wrangler.jsonc`.
-
-**Fix:** Add the `r2_buckets` section or switch to Option A (without R2).
-
----
-
-### `Can't set compatibility date in the future`
-
-**Cause:** `compatibility_date` in wrangler config is set to a future date.
-
-**Fix:** Change `compatibility_date` to today or an earlier date.
-
----
-
-### Windows error: `resvg.wasm?module` (ENOENT)
-
-**Cause:** Windows filenames cannot include `?`, but a wasm asset uses `?module` in its filename.
-
-**Fix:** Build/deploy on Linux (WSL, Codespaces, or CI).
-
----
-
-## Optional: Preview locally
-
-Preview the Worker locally before deploying:
-
-```bash
-npm run preview
-```
-
----
-
-## Summary
-
-| Feature | Without R2 | With R2 |
-|---------|------------|---------|
-| Cost | Free | Requires payment method |
-| ISR Caching | No | Yes |
-| Static Pages | Yes | Yes |
-| API Routes | Yes | Yes |
-| Setup Complexity | Simple | Moderate |
-
-Choose **without R2** for testing or simple apps. Choose **with R2** for production apps that need ISR caching.

docs/en/docker.md

@@ -1,50 +0,0 @@
-# Run with Docker
-
-If you just want to run it locally, the best way is to use Docker.
-
-First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/)
-
-Then run:
-
-```bash
-docker run -d -p 3000:3000 \
-  -e AI_PROVIDER=openai \
-  -e AI_MODEL=gpt-4o \
-  -e OPENAI_API_KEY=your_api_key \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-Or use an env file:
-
-```bash
-cp env.example .env
-# Edit .env with your configuration
-docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-### Using server-side model configuration
-
-You can mount an `ai-models.json` file into the container to provide multiple server-side models without exposing user API keys:
-
-```bash
-docker run -d -p 3000:3000 \
-  -e OPENAI_API_KEY=your_api_key \
-  -v $(pwd)/ai-models.json:/app/ai-models.json:ro \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-If you prefer to keep the config in a different path inside the container, set `AI_MODELS_CONFIG_PATH`:
-
-```bash
-docker run -d -p 3000:3000 \
-  -e OPENAI_API_KEY=your_api_key \
-  -e AI_MODELS_CONFIG_PATH=/config/ai-models.json \
-  -v $(pwd)/ai-models.json:/config/ai-models.json:ro \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-Open [http://localhost:3000](http://localhost:3000) in your browser.
-
-Replace the environment variables with your preferred AI provider configuration. See [AI Providers](./ai-providers.md) for available options.
-
-> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./offline-deployment.md) for configuration options.

docs/en/offline-deployment.md

@@ -1,39 +0,0 @@
-# Offline Deployment
-
-Deploy Next AI Draw.io offline by self-hosting draw.io to replace `embed.diagrams.net`.
-
-**Note:** `NEXT_PUBLIC_DRAWIO_BASE_URL` is a **build-time** variable. Changing it requires rebuilding the Docker image.
-
-## Docker Compose Setup
-
-1. Clone the repository and define API keys in `.env`.
-2. Create `docker-compose.yml`:
-
-```yaml
-services:
-  drawio:
-    image: jgraph/drawio:latest
-    ports: ["8080:8080"]
-  next-ai-draw-io:
-    build:
-      context: .
-      args:
-        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
-    ports: ["3000:3000"]
-    env_file: .env
-    depends_on: [drawio]
-```
-
-3. Run `docker compose up -d` and open `http://localhost:3000`.
-
-## Configuration & Critical Warning
-
-**The `NEXT_PUBLIC_DRAWIO_BASE_URL` must be accessible from the user's browser.**
-
-| Scenario | URL Value |
-|----------|-----------|
-| Localhost | `http://localhost:8080` |
-| Remote/Server | `http://YOUR_SERVER_IP:8080` |
-
-**Do NOT use** internal Docker aliases like `http://drawio:8080`; the browser cannot resolve them.
-