feat(ui): canvas-first redesign with a self-hosted draw.io

The canvas now fills the window and the chat floats on its right. draw.io is
served from our own origin (public/drawio, downloaded at build time and
checked against the release's SHA-256), so the app can drive the editor
directly:

- every AI change becomes a version card with a thumbnail; compare, restore
  or undo it, and Ctrl+Z on the canvas takes an AI change back in one step
- shapes the AI just changed are highlighted on the canvas
- selected shapes appear as a chip and are sent to the model
- the app's own canvas toolbar, shape library and page tabs replace
  draw.io's chrome
- new start screen, session rename and switcher, open .drawio files
- settings split into Models & keys, Appearance, Advanced and About
- phones switch between canvas and chat
- dark mode keeps the diagram on a white sheet and no longer flashes

With an external draw.io (NEXT_PUBLIC_DRAWIO_BASE_URL) the app falls back to
draw.io's own toolbar and the features above that need same origin are off.

The chat logic moved from the 1500-line chat panel into a chat engine plus
small UI components; zustand holds canvas, versions, settings and UI state.

.dockerignore

@@ -0,0 +1,60 @@
+# 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

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

.github/CONTRIBUTING.md

@@ -0,0 +1,81 @@
+# 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

@@ -0,0 +1,15 @@
+# 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

@@ -0,0 +1,35 @@
+---
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,24 @@
+---
+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

@@ -0,0 +1,25 @@
+---
+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

@@ -0,0 +1,46 @@
+{
+    "$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
+        },
+        {
+            "matchPackageNames": ["@biomejs/biome"],
+            "groupName": "Biome",
+            "automerge": false
+        }
+    ],
+    "vulnerabilityAlerts": {
+        "enabled": true
+    }
+}

.github/workflows/auto-format.yml

@@ -0,0 +1,56 @@
+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
+        # Pin to the version in package.json so CI matches local/pre-commit
+        # (npx @latest drifts — e.g. 2.5.0 broke this job on unrelated PRs).
+        run: npx @biomejs/[email protected] 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

@@ -0,0 +1,42 @@
+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

@@ -1,114 +0,0 @@
-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
-
-            First, check previous review comments from github-actions bot using `gh api repos/${{ github.repository }}/pulls/${{ github.event.pull_request.number }}/comments`.
-            For each previous comment:
-            - If the issue is fixed in the current code, resolve the comment thread using:
-              `gh api graphql -f query='mutation { resolveReviewThread(input: {threadId: "THREAD_ID"}) { thread { isResolved } } }'`
-              Get the thread ID from the comment's node_id field.
-            - If the issue still exists, leave it alone
-
-            Then review the current diff for NEW issues only:
-
-            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
-
-            Use `mcp__github_inline_comment__create_inline_comment` for inline comments.
-            Report ALL issues found - create multiple inline comments if needed. Only say "LGTM" if there are truly no issues.
-          claude_args: |
-            --allowedTools "mcp__github_inline_comment__create_inline_comment,Bash(gh pr comment:*),Bash(gh pr diff:*),Bash(gh pr view:*),Bash(gh api:*),WebFetch(domain:ai-sdk.dev)"

.github/workflows/docker-build.yml

@@ -0,0 +1,93 @@
+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' }}
+          provenance: mode=max
+          sbom: true
+          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

@@ -0,0 +1,96 @@
+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"
+
+      # npm run build downloads draw.io first (prebuild)
+      - 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"
+
+      # npm run build downloads draw.io first (prebuild)
+      - 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/publish-mcp.yml

@@ -0,0 +1,71 @@
+name: Publish MCP Server
+
+# Publishes @next-ai-drawio/mcp-server to npm via OIDC trusted publishing
+# (no token, no OTP). Triggers when packages/mcp-server changes on main;
+# skips silently if the package.json version is already on npm — so a
+# release is just "bump the version in a PR and merge".
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "packages/mcp-server/**"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  id-token: write # OIDC token for npm trusted publishing
+
+concurrency:
+  group: publish-mcp
+  cancel-in-progress: false
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/mcp-server
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: "npm"
+          cache-dependency-path: packages/mcp-server/package-lock.json
+          registry-url: "https://registry.npmjs.org"
+
+      # Trusted publishing requires npm >= 11.5.1
+      - name: Update npm
+        run: npm install -g npm@latest
+
+      - name: Check if version is already published
+        id: version
+        run: |
+          LOCAL=$(node -p "require('./package.json').version")
+          if npm view "@next-ai-drawio/mcp-server@${LOCAL}" version >/dev/null 2>&1; then
+            echo "Version ${LOCAL} already on npm - nothing to publish"
+            echo "publish=false" >> "$GITHUB_OUTPUT"
+          else
+            echo "Version ${LOCAL} not on npm - publishing"
+            echo "publish=true" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Install dependencies
+        if: steps.version.outputs.publish == 'true'
+        run: npm ci
+
+      - name: Test
+        if: steps.version.outputs.publish == 'true'
+        run: npm test
+
+      - name: Build and check package contents
+        if: steps.version.outputs.publish == 'true'
+        run: npm run build && npm run check-package
+
+      - name: Publish to npm
+        if: steps.version.outputs.publish == 'true'
+        run: npm publish

.github/workflows/test.yml

@@ -0,0 +1,89 @@
+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
+
+      # The MCP server package ships its own vitest because its DOM polyfill
+      # (linkedom) needs `environment: node`, while the root vitest uses jsdom
+      # for the Next.js app. Install + run its tests separately so CI catches
+      # multi-page mxfile regressions.
+      - name: Install MCP server dependencies
+        run: npm --prefix packages/mcp-server ci
+
+      - name: Run MCP server unit tests
+        run: npm --prefix packages/mcp-server test
+
+      # Tests run from src/, so check the built npm package separately
+      - name: Build MCP server and check package contents
+        run: npm --prefix packages/mcp-server run build && npm --prefix packages/mcp-server run check-package
+
+  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,6 +2,8 @@
 
 # dependencies
 /node_modules
+packages/*/node_modules
+packages/*/dist
 /.pnp
 .pnp.*
 .yarn/*
@@ -12,6 +14,8 @@
 
 # testing
 /coverage
+/playwright-report/
+/test-results/
 
 # next.js
 /.next/
@@ -40,4 +44,38 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 push-via-ec2.sh
-.claude/settings.local.json
+.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/
+
+# admin panel settings (contains secrets)
+data/

.husky/pre-commit

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

.husky/pre-push

@@ -0,0 +1,4 @@
+# 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

@@ -0,0 +1,23 @@
+{
+    "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

@@ -0,0 +1,77 @@
+# 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 an external draw.io URL. Leave empty to use the
+# copy bundled into public/drawio (downloaded by `npm run build`)
+ARG NEXT_PUBLIC_DRAWIO_BASE_URL=""
+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
+
+# Writable dir for admin panel settings (data/settings.json)
+RUN mkdir -p /app/data && chown nextjs:nodejs /app/data
+
+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

@@ -0,0 +1,190 @@
+                                 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,83 +1,175 @@
 # Next AI Draw.io
 
-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.
+<div align="center">
 
-https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
+**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
 
-Demo site: [https://next-ai-draw-io.vercel.app](https://next-ai-draw-io.vercel.app)
+English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md)
 
-## Features
+[![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/)
 
--   **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
+[![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)
 
-## **Examples**
+[![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!
+
+<p align="center">
+  <a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="./public/atlas-cloud-logo-white.svg">
+      <img src="./public/atlas-cloud-logo.svg" alt="Atlas Cloud" width="200">
+    </picture>
+  </a>
+</p>
+
+> 🎁 Thanks to **[Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io)** for sponsoring next-ai-draw-io. Its OpenAI-compatible API gives diagram workflows one provider connection for DeepSeek, Qwen, GLM, Kimi, MiniMax, and more. Budget-friendly access is available through the [Coding Plan](https://www.atlascloud.ai/console/coding-plan).
+
+
+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](#mcp-server)
+    - [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)
+    - [Server-Side Multi-Model Configuration](#server-side-multi-model-configuration)
+    - [Admin Panel](#admin-panel)
+  - [How It Works](#how-it-works)
+  - [Support \& Contact](#support--contact)
+  - [FAQ](#faq)
+  - [Star History](#star-history)
+
+## Examples
 
 Here are some example prompts and their generated diagrams:
 
 <div align="center">
 <table width="100%">
   <tr>
-    <td width="50%" valign="top">
-      <strong>GCP architecture diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
-      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
-    </td>
-    <td width="50%" valign="top">
-      <strong>AWS architecture diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
-      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
-    </td>
-  </tr>
-  <tr>
-    <td width="50%" valign="top">
-      <strong>Azure architecture diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
-      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
-    </td>
-    <td width="50%" valign="top">
+    <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 colspan="2" valign="top" align="center">
-      <strong>Cat sketch prompt</strong><br />
+    <td width="50%" valign="top">
+      <strong>RAG Technique Diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
+      <img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>Authentication using React and AWS</strong><br />
+      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
+      <img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <strong>Open Innovation</strong><br />
+      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
+      <img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
+    </td>
+    <td width="50%" valign="top">
+      <strong>Cat sketch</strong><br />
       <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
-      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="260" />
+      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
     </td>
   </tr>
 </table>
 </div>
 
-## How It Works
+## Features
 
-The application uses the following technologies:
+-   **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.)
+-   **Versions and Undo**: Every AI change shows up in the chat as a version with a thumbnail. Compare it with the canvas, restore it, or undo it; Ctrl+Z on the canvas also takes back an AI change in one step. Shapes the AI just changed are highlighted.
+-   **Ask About a Selection**: Select shapes on the canvas and ask the AI to change just those.
+-   **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
 
--   **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
+## MCP Server
 
-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
 
-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.
+```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!
+
+The MCP server includes most of the web app's drawing features:
+
+-   The same drawing rules and shape libraries (AWS, Azure, GCP, Kubernetes and more)
+-   A screenshot tool, so the AI can check the rendered diagram and fix it
+-   Version history, multi-page diagrams, and download as `.drawio`, `.png`, `.svg`, or `.drawio.svg`
+-   Auto-save to `~/.next-ai-drawio/`, so you can continue a diagram after a restart
+
+See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
 
 ## 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:
@@ -85,80 +177,116 @@ Note that `claude-sonnet-4-5` has trained on draw.io diagrams with AWS logos, so
 ```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
 ```
 
-Edit `.env.local` and configure your chosen provider:
+See the [Provider Configuration Guide](./docs/en/ai-providers.md) for detailed setup instructions for each provider.
 
--   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:
+2. Run the development server:
 
 ```bash
 npm run dev
 ```
 
-5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+3. Open [http://localhost:6002](http://localhost:6002) in your browser to see the application.
 
 ## Deployment
 
-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.
+### Deploy to EdgeOne Pages
 
-Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+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 
 
-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)
 
-Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
+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.
 
-## Project Structure
+See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
 
-```
-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
-```
+### Deploy on Cloudflare Workers
 
-## TODOs
+[Go to Cloudflare Deploy Guide](./docs/en/cloudflare-deploy.md)
 
--   [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
 
-This project is licensed under the MIT 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
+-   AIHubMix
+-   DeepSeek
+-   SiliconFlow
+-   ModelScope
+-   SGLang
+-   Vercel AI Gateway
+-   [Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io)
+
+
+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. For a single-provider quick setup, list comma-separated model IDs in `AI_MODEL`.
+
+### Admin Panel
+
+Set the `ADMIN_PASSWORD` environment variable and visit `/admin` to manage server settings (models, access codes, features, observability, quota) from a web panel instead of hand-editing `.env`.
+
+📖 **[Admin Panel Guide](./docs/en/admin-panel.md)** — setup, precedence rules, and notes.
+
+**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
+-   **draw.io**: The editor runs from a copy bundled into `public/drawio` (downloaded by `npm run dev` / `npm run build`), so the app can drive it directly
+
+Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
+
 
 ## 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!
+
+**Special thanks to [Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io) for sponsoring next-ai-draw-io and supporting its multi-provider ecosystem!** Try its OpenAI-compatible LLM API through the [Atlas Cloud Coding Plan](https://www.atlascloud.ai/console/coding-plan).
+
+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

@@ -0,0 +1,405 @@
+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
+                            的每次修改都会成为聊天里的一个版本，可以对比、恢复或撤销；在画布上按
+                            Ctrl+Z 也能撤回
+                        </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">
+                        {/* ResNet50 Architecture */}
+                        <div className="text-center">
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                ResNet50模型架构动画
+                            </h3>
+                            <p className="text-gray-600 mb-4">
+                                <strong>Prompt:</strong> Give me an{" "}
+                                <strong>animated</strong> architecture diagram
+                                of the ResNet50 model.
+                            </p>
+                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
+                                <Image
+                                    src="/resnet50.svg"
+                                    alt="ResNet50模型架构图"
+                                    width={480}
+                                    height={360}
+                                    className="mx-auto"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Diagram 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">
+                                    RAG技术图
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate a RAG
+                                    architecture diagram for{" "}
+                                    <strong>chat application</strong>. Use
+                                    connected diagram for data ingestion
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/rag_prod.svg"
+                                        alt="RAG架构图"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    React和AWS认证流程
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate
+                                    authentication process using React with{" "}
+                                    <strong>AWS</strong>. Use Serverless
+                                    architecture.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/auth.svg"
+                                        alt="认证架构图"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    敏捷Scrum流程
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate agile
+                                    scrum workflow diagram for software
+                                    development team.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/agile_scrum.svg"
+                                        alt="敏捷Scrum流程图"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </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>Prompt:</strong> Create
+                                    visualization of Henry Chesbrough&apos;s
+                                    Open Innovation model.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/inno.svg"
+                                        alt="开放式创新图"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </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>draw.io</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

@@ -0,0 +1,402 @@
+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
+                            の変更はそれぞれチャット内のバージョンになり、比較・復元・取り消しができます。キャンバスで
+                            Ctrl+Z を押しても元に戻せます
+                        </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">
+                        {/* ResNet50 Architecture */}
+                        <div className="text-center">
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                ResNet50モデルアーキテクチャアニメーション
+                            </h3>
+                            <p className="text-gray-600 mb-4">
+                                <strong>Prompt:</strong> Give me an{" "}
+                                <strong>animated</strong> architecture diagram
+                                of the ResNet50 model.
+                            </p>
+                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
+                                <Image
+                                    src="/resnet50.svg"
+                                    alt="ResNet50モデルアーキテクチャ図"
+                                    width={480}
+                                    height={360}
+                                    className="mx-auto"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Diagram 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">
+                                    RAG技術ダイアグラム
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate a RAG
+                                    architecture diagram for{" "}
+                                    <strong>chat application</strong>. Use
+                                    connected diagram for data ingestion
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/rag_prod.svg"
+                                        alt="RAGアーキテクチャ図"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    ReactとAWSによる認証
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate
+                                    authentication process using React with{" "}
+                                    <strong>AWS</strong>. Use Serverless
+                                    architecture.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/auth.svg"
+                                        alt="認証アーキテクチャ図"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </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>Prompt:</strong> Generate agile
+                                    scrum workflow diagram for software
+                                    development team.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/agile_scrum.svg"
+                                        alt="アジャイルスクラム図"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </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>Prompt:</strong> Create
+                                    visualization of Henry Chesbrough&apos;s
+                                    Open Innovation model.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/inno.svg"
+                                        alt="オープンイノベーション図"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </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>draw.io</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

@@ -0,0 +1,418 @@
+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>Versions and Undo</strong>: Every AI change
+                            becomes a version in the chat that you can compare,
+                            restore or undo; Ctrl+Z on the canvas takes it back
+                            too
+                        </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">
+                        {/* ResNet50 Architecture */}
+                        <div className="text-center">
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                Animated ResNet50 Model Architecture
+                            </h3>
+                            <p className="text-gray-600 mb-4">
+                                <strong>Prompt:</strong> Give me an{" "}
+                                <strong>animated</strong> architecture diagram
+                                of the ResNet50 model.
+                            </p>
+                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
+                                <Image
+                                    src="/resnet50.svg"
+                                    alt="Architecture diagram for ResNet50 model"
+                                    width={480}
+                                    height={360}
+                                    className="mx-auto"
+                                />
+                            </div>
+                        </div>
+
+                        {/* Diagram 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">
+                                    RAG Technique Diagram
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate a RAG
+                                    architecture diagram for{" "}
+                                    <strong>chat application</strong>. Use
+                                    connected diagram for data ingestion
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/rag_prod.svg"
+                                        alt="RAG Architecture Diagram"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    Authentication using React and AWS
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate
+                                    authentication process using React with{" "}
+                                    <strong>AWS</strong>. Use Serverless
+                                    architecture.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/auth.svg"
+                                        alt="Authentication Architecture Diagram"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    Agile Scrum Process
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Generate agile
+                                    scrum workflow diagram for software
+                                    development team.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/agile_scrum.svg"
+                                        alt="Agile Scrum Diagram"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </div>
+                            <div className="text-center">
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    Open Innovation
+                                </h3>
+                                <p className="text-gray-600 text-sm mb-4">
+                                    <strong>Prompt:</strong> Create
+                                    visualization of Henry Chesbrough&apos;s
+                                    Open Innovation model.
+                                </p>
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
+                                    <Image
+                                        src="/inno.svg"
+                                        alt="Open Innovation Diagram"
+                                        width={480}
+                                        height={360}
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
+                            </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>draw.io</strong>: The editor, bundled with
+                            the app so it can be driven directly
+                        </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]/admin/admin-shared.ts

@@ -0,0 +1,65 @@
+import { getApiEndpoint } from "@/lib/base-path"
+import type { ProviderName } from "@/lib/types/model-config"
+
+export const SESSION_PASSWORD_KEY = "next-ai-draw-io-admin-password"
+
+// ── Shared types ─────────────────────────────────────────────────────
+
+export type SecretValue = { isSet: true; hint: string }
+
+export function isSecretValue(v: unknown): v is SecretValue {
+    return typeof v === "object" && v !== null && "isSet" in v
+}
+
+export interface SettingState {
+    key: string
+    source: "file" | "env" | "default"
+    value: string | SecretValue | null
+}
+
+export type SettingsMap = Record<string, SettingState>
+
+// Editable text of a saved setting; secrets have none (write-only)
+export function savedTextOf(state: SettingState | undefined): string {
+    return state && !isSecretValue(state.value) ? (state.value ?? "") : ""
+}
+
+// Admin provider in client state. Secret fields hold either a masked
+// marker (unchanged) or a plaintext string (new value).
+export interface AdminProvider {
+    id: string
+    provider: ProviderName
+    name?: string
+    apiKey?: string | SecretValue
+    baseUrl?: string
+    awsAccessKeyId?: string | SecretValue
+    awsSecretAccessKey?: string | SecretValue
+    awsRegion?: string
+    vertexApiKey?: string | SecretValue
+    models: string[]
+    isDefault?: boolean
+}
+
+// Provider defined in AI_MODELS_CONFIG / ai-models.json — shown read-only
+export interface EnvProvider {
+    name: string
+    provider: ProviderName
+    models: string[]
+    isDefault: boolean
+}
+
+export async function adminFetch(path: string, pw: string, init?: RequestInit) {
+    const res = await fetch(getApiEndpoint(path), {
+        ...init,
+        headers: {
+            ...init?.headers,
+            "x-admin-password": pw,
+            ...(init?.body ? { "Content-Type": "application/json" } : {}),
+        },
+    })
+    const data = await res.json().catch(() => ({}))
+    if (!res.ok) {
+        throw new Error(data.error || `Request failed (${res.status})`)
+    }
+    return data
+}

app/[lang]/admin/models-section.tsx

@@ -0,0 +1,627 @@
+import {
+    AlertCircle,
+    Check,
+    Loader2,
+    Plus,
+    Star,
+    Trash2,
+    X,
+    Zap,
+} from "lucide-react"
+import { useState } from "react"
+import { ProviderCredentialsFields } from "@/components/provider-credentials-fields"
+import { ProviderLogo } from "@/components/provider-logo"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+} from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
+import { STORAGE_KEYS } from "@/lib/storage"
+import {
+    FIXED_CRED_PROVIDERS,
+    generateId,
+    PROVIDER_INFO,
+    type ProviderName,
+    SUGGESTED_MODELS,
+} from "@/lib/types/model-config"
+import { cn } from "@/lib/utils"
+import {
+    type AdminProvider,
+    adminFetch,
+    type EnvProvider,
+} from "./admin-shared"
+import { SecretInput } from "./setting-field"
+
+// ── Models section (mirrors the user ModelConfigDialog) ──────────────
+
+function ProviderDetail({
+    provider,
+    disabled,
+    password,
+    onUpdate,
+    onDelete,
+}: {
+    provider: AdminProvider
+    disabled: boolean
+    password: string
+    onUpdate: (patch: Partial<AdminProvider>) => void
+    onDelete: () => void
+}) {
+    const dict = useDictionary()
+    const [modelInput, setModelInput] = useState("")
+    const [deleteOpen, setDeleteOpen] = useState(false)
+    const [testing, setTesting] = useState<string | null>(null)
+    const [testResults, setTestResults] = useState<
+        Record<string, { ok: boolean; message: string }>
+    >({})
+
+    const info = PROVIDER_INFO[provider.provider]
+    const suggestions = (SUGGESTED_MODELS[provider.provider] || []).filter(
+        (m) => !provider.models.includes(m),
+    )
+
+    const addModel = (modelId: string) => {
+        const trimmed = modelId.trim()
+        if (!trimmed || provider.models.includes(trimmed)) return
+        onUpdate({ models: [...provider.models, trimmed] })
+        setModelInput("")
+    }
+
+    const testModel = async (modelId: string) => {
+        setTesting(modelId)
+        try {
+            const data = await adminFetch("/api/admin/test-model", password, {
+                method: "POST",
+                // EdgeOne's function also checks the access code
+                headers: {
+                    "x-access-code":
+                        localStorage.getItem(STORAGE_KEYS.accessCode) || "",
+                },
+                body: JSON.stringify({ provider, modelId }),
+            })
+            setTestResults((prev) => ({
+                ...prev,
+                [modelId]: data.valid
+                    ? {
+                          ok: true,
+                          message: formatMessage(dict.admin.testOk, {
+                              ms: data.responseTime,
+                          }),
+                      }
+                    : {
+                          ok: false,
+                          message: data.error || dict.admin.testFailed,
+                      },
+            }))
+        } catch (err) {
+            setTestResults((prev) => ({
+                ...prev,
+                [modelId]: {
+                    ok: false,
+                    message:
+                        err instanceof Error
+                            ? err.message
+                            : dict.admin.testFailed,
+                },
+            }))
+        } finally {
+            setTesting(null)
+        }
+    }
+
+    return (
+        <div className="space-y-6">
+            <div className="flex items-center gap-3">
+                <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                    <ProviderLogo
+                        provider={provider.provider}
+                        className="size-5"
+                    />
+                </div>
+                <div className="min-w-0 flex-1">
+                    <h3 className="font-semibold">{info.label}</h3>
+                    <p className="text-xs text-muted-foreground">
+                        {provider.models.length === 0
+                            ? dict.admin.noModelsConfigured
+                            : formatMessage(
+                                  provider.models.length === 1
+                                      ? dict.admin.modelCount
+                                      : dict.admin.modelCountPlural,
+                                  { count: provider.models.length },
+                              )}
+                    </p>
+                </div>
+                <label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground">
+                    <Star
+                        className={cn(
+                            "h-3.5 w-3.5",
+                            provider.isDefault &&
+                                "fill-amber-400 text-amber-400",
+                        )}
+                        aria-hidden="true"
+                    />
+                    {dict.admin.default}
+                    <Switch
+                        checked={!!provider.isDefault}
+                        disabled={disabled}
+                        aria-label={dict.admin.setAsDefault}
+                        onCheckedChange={(checked) =>
+                            onUpdate({ isDefault: checked })
+                        }
+                    />
+                </label>
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    disabled={disabled}
+                    className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    onClick={() => setDeleteOpen(true)}
+                >
+                    <Trash2 className="mr-1.5 h-4 w-4" aria-hidden="true" />
+                    {dict.admin.delete}
+                </Button>
+            </div>
+
+            {/* Credentials (shared with the user ModelConfigDialog) */}
+            <ProviderCredentialsFields
+                provider={provider.provider}
+                name={provider.name}
+                baseUrl={provider.baseUrl}
+                awsRegion={provider.awsRegion}
+                disabled={disabled}
+                onChange={(field, value) => onUpdate({ [field]: value })}
+                renderSecret={({ field, id }) => (
+                    // Bare id keeps the shared component's <Label htmlFor={id}>
+                    // associated; only one ProviderDetail is mounted at a time.
+                    <SecretInput
+                        id={id}
+                        keepOnEmpty
+                        value={provider[field]}
+                        disabled={disabled}
+                        onChange={(v) => onUpdate({ [field]: v })}
+                    />
+                )}
+            />
+
+            {/* Models */}
+            <div>
+                <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+                    <Label className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                        {dict.admin.models}
+                    </Label>
+                    <div className="flex items-center gap-1.5">
+                        <Input
+                            value={modelInput}
+                            disabled={disabled}
+                            placeholder={dict.admin.modelIdPlaceholder}
+                            spellCheck={false}
+                            className="h-8 w-48 font-mono text-xs"
+                            onChange={(e) => setModelInput(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") addModel(modelInput)
+                            }}
+                        />
+                        <Button
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            className="h-8"
+                            disabled={disabled || !modelInput.trim()}
+                            aria-label={dict.admin.addModel}
+                            onClick={() => addModel(modelInput)}
+                        >
+                            <Plus className="h-3.5 w-3.5" aria-hidden="true" />
+                        </Button>
+                        {suggestions.length > 0 && (
+                            <Select
+                                value=""
+                                disabled={disabled}
+                                onValueChange={(v) => addModel(v)}
+                            >
+                                <SelectTrigger className="h-8 w-28 text-xs">
+                                    {dict.admin.suggested}
+                                </SelectTrigger>
+                                <SelectContent className="max-h-72">
+                                    {suggestions.map((m) => (
+                                        <SelectItem
+                                            key={m}
+                                            value={m}
+                                            className="font-mono text-xs"
+                                        >
+                                            {m}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        )}
+                    </div>
+                </div>
+                <div className="overflow-hidden rounded-lg border">
+                    {provider.models.length === 0 ? (
+                        <p className="p-5 text-center text-sm text-muted-foreground">
+                            {dict.admin.addProviderToOfferModels}
+                        </p>
+                    ) : (
+                        <ul className="divide-y">
+                            {provider.models.map((modelId, index) => {
+                                const result = testResults[modelId]
+                                return (
+                                    <li
+                                        key={modelId}
+                                        className="flex items-center gap-2 px-3 py-2"
+                                    >
+                                        <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                                            {modelId}
+                                            {provider.isDefault &&
+                                                index === 0 && (
+                                                    <span className="ml-2 rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-600 dark:text-amber-400">
+                                                        {
+                                                            dict.admin
+                                                                .defaultModel
+                                                        }
+                                                    </span>
+                                                )}
+                                        </span>
+                                        {result && (
+                                            <span
+                                                className={cn(
+                                                    "flex items-center gap-1 text-xs",
+                                                    result.ok
+                                                        ? "text-green-600 dark:text-green-400"
+                                                        : "text-destructive",
+                                                )}
+                                            >
+                                                {result.ok ? (
+                                                    <Check
+                                                        className="h-3.5 w-3.5"
+                                                        aria-hidden="true"
+                                                    />
+                                                ) : (
+                                                    <AlertCircle
+                                                        className="h-3.5 w-3.5"
+                                                        aria-hidden="true"
+                                                    />
+                                                )}
+                                                <span className="max-w-48 truncate">
+                                                    {result.message}
+                                                </span>
+                                            </span>
+                                        )}
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="sm"
+                                            className="h-7 px-2 text-xs"
+                                            disabled={
+                                                disabled || testing !== null
+                                            }
+                                            onClick={() =>
+                                                void testModel(modelId)
+                                            }
+                                        >
+                                            {testing === modelId ? (
+                                                <Loader2
+                                                    className="h-3.5 w-3.5 animate-spin motion-reduce:animate-none"
+                                                    aria-hidden="true"
+                                                />
+                                            ) : (
+                                                <Zap
+                                                    className="h-3.5 w-3.5"
+                                                    aria-hidden="true"
+                                                />
+                                            )}
+                                            <span className="ml-1">
+                                                {dict.admin.test}
+                                            </span>
+                                        </Button>
+                                        <Button
+                                            type="button"
+                                            variant="ghost"
+                                            size="icon"
+                                            className="h-7 w-7"
+                                            disabled={disabled}
+                                            aria-label={formatMessage(
+                                                dict.admin.removeModel,
+                                                { model: modelId },
+                                            )}
+                                            onClick={() =>
+                                                onUpdate({
+                                                    models: provider.models.filter(
+                                                        (m) => m !== modelId,
+                                                    ),
+                                                })
+                                            }
+                                        >
+                                            <X
+                                                className="h-3.5 w-3.5"
+                                                aria-hidden="true"
+                                            />
+                                        </Button>
+                                    </li>
+                                )
+                            })}
+                        </ul>
+                    )}
+                </div>
+            </div>
+
+            <AlertDialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>
+                            {formatMessage(dict.admin.deleteProviderTitle, {
+                                name: provider.name || info.label,
+                            })}
+                        </AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {dict.admin.deleteProviderDesc}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            {dict.admin.cancel}
+                        </AlertDialogCancel>
+                        <AlertDialogAction
+                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                            onClick={() => {
+                                setDeleteOpen(false)
+                                onDelete()
+                            }}
+                        >
+                            {dict.admin.delete}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </div>
+    )
+}
+
+export function ModelsSection({
+    providers,
+    envProviders,
+    envHasDefaultModel,
+    disabled,
+    password,
+    onChange,
+}: {
+    providers: AdminProvider[]
+    envProviders: EnvProvider[]
+    envHasDefaultModel: boolean
+    disabled: boolean
+    password: string
+    onChange: (providers: AdminProvider[]) => void
+}) {
+    const dict = useDictionary()
+    const [selectedId, setSelectedId] = useState<string | null>(
+        providers[0]?.id ?? null,
+    )
+    const selected = providers.find((p) => p.id === selectedId)
+    const selectedEnv = envProviders.find((p) => `env:${p.name}` === selectedId)
+
+    const addProvider = (provider: ProviderName) => {
+        const newProvider: AdminProvider = {
+            // generateId works over plain HTTP; crypto.randomUUID needs HTTPS
+            id: generateId(),
+            provider,
+            models: [],
+            // Only the very first provider becomes the default, and only when
+            // the env config has no default that it would replace on save
+            isDefault:
+                providers.length === 0 &&
+                !envProviders.some((p) => p.isDefault) &&
+                !envHasDefaultModel,
+        }
+        onChange([...providers, newProvider])
+        setSelectedId(newProvider.id)
+    }
+
+    const updateProvider = (id: string, patch: Partial<AdminProvider>) => {
+        onChange(
+            providers.map((p) => {
+                if (p.id !== id) {
+                    // Only one default at a time
+                    return patch.isDefault ? { ...p, isDefault: false } : p
+                }
+                return { ...p, ...patch }
+            }),
+        )
+    }
+
+    const deleteProvider = (id: string) => {
+        const next = providers.filter((p) => p.id !== id)
+        onChange(next)
+        setSelectedId(next[0]?.id ?? null)
+    }
+
+    return (
+        <div className="flex min-h-72 flex-col sm:flex-row">
+            {/* Provider list */}
+            <div className="flex w-full shrink-0 flex-col border-b sm:w-52 sm:border-b-0 sm:border-r">
+                <div className="flex-1 space-y-1 p-2">
+                    {providers.length === 0 && envProviders.length === 0 && (
+                        <p className="px-2 py-6 text-center text-xs text-muted-foreground">
+                            {dict.admin.addProviderHint}
+                        </p>
+                    )}
+                    {envProviders.map((p) => (
+                        <button
+                            key={`env:${p.name}`}
+                            type="button"
+                            onClick={() => setSelectedId(`env:${p.name}`)}
+                            className={cn(
+                                "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                selectedId === `env:${p.name}` &&
+                                    "bg-muted font-medium",
+                            )}
+                        >
+                            <ProviderLogo provider={p.provider} />
+                            <span className="min-w-0 flex-1 truncate">
+                                {p.name}
+                            </span>
+                            <span className="rounded bg-muted px-1 py-0.5 text-[10px] font-medium uppercase text-muted-foreground">
+                                {dict.admin.sourceEnv}
+                            </span>
+                            {p.isDefault && (
+                                <Star
+                                    className="h-3.5 w-3.5 shrink-0 fill-amber-400 text-amber-400"
+                                    aria-label={dict.admin.defaultProvider}
+                                />
+                            )}
+                        </button>
+                    ))}
+                    {providers.map((p) => (
+                        <button
+                            key={p.id}
+                            type="button"
+                            onClick={() => setSelectedId(p.id)}
+                            className={cn(
+                                "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                selectedId === p.id && "bg-muted font-medium",
+                            )}
+                        >
+                            <ProviderLogo provider={p.provider} />
+                            <span className="min-w-0 flex-1 truncate">
+                                {p.name || PROVIDER_INFO[p.provider].label}
+                            </span>
+                            {p.isDefault && (
+                                <Star
+                                    className="h-3.5 w-3.5 shrink-0 fill-amber-400 text-amber-400"
+                                    aria-label={dict.admin.defaultProvider}
+                                />
+                            )}
+                        </button>
+                    ))}
+                </div>
+                <div className="border-t p-2">
+                    {/* Always empty so picking the same type again still fires */}
+                    <Select
+                        value=""
+                        disabled={disabled}
+                        onValueChange={(v) => addProvider(v as ProviderName)}
+                    >
+                        <SelectTrigger className="w-full">
+                            <Plus
+                                className="mr-1 h-4 w-4 text-muted-foreground"
+                                aria-hidden="true"
+                            />
+                            {dict.modelConfig.addProvider}
+                        </SelectTrigger>
+                        <SelectContent className="max-h-72">
+                            {(Object.keys(PROVIDER_INFO) as ProviderName[]).map(
+                                (p) => {
+                                    // Global-credential providers already in
+                                    // the env config can't be added here —
+                                    // panel credentials would override theirs
+                                    const envBlocked =
+                                        FIXED_CRED_PROVIDERS.includes(p) &&
+                                        envProviders.some(
+                                            (e) => e.provider === p,
+                                        )
+                                    return (
+                                        <SelectItem
+                                            key={p}
+                                            value={p}
+                                            disabled={envBlocked}
+                                        >
+                                            <div className="flex items-center gap-2">
+                                                <ProviderLogo provider={p} />
+                                                {PROVIDER_INFO[p].label}
+                                                {envBlocked && (
+                                                    <span className="text-xs text-muted-foreground">
+                                                        {
+                                                            dict.admin
+                                                                .managedViaEnv
+                                                        }
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </SelectItem>
+                                    )
+                                },
+                            )}
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            {/* Detail */}
+            <div className="min-w-0 flex-1 p-4">
+                {selected ? (
+                    <ProviderDetail
+                        key={selected.id}
+                        provider={selected}
+                        disabled={disabled}
+                        password={password}
+                        onUpdate={(patch) => updateProvider(selected.id, patch)}
+                        onDelete={() => deleteProvider(selected.id)}
+                    />
+                ) : selectedEnv ? (
+                    <div className="space-y-4">
+                        <div className="flex items-center gap-3">
+                            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+                                <ProviderLogo
+                                    provider={selectedEnv.provider}
+                                    className="size-5"
+                                />
+                            </div>
+                            <div className="min-w-0 flex-1">
+                                <h3 className="font-semibold">
+                                    {selectedEnv.name}
+                                </h3>
+                                <p className="text-xs text-muted-foreground">
+                                    {dict.admin.envReadOnly}
+                                </p>
+                            </div>
+                        </div>
+                        <div className="overflow-hidden rounded-lg border">
+                            <ul className="divide-y">
+                                {selectedEnv.models.map((modelId, index) => (
+                                    <li
+                                        key={modelId}
+                                        className="flex items-center gap-2 px-3 py-2"
+                                    >
+                                        <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                                            {modelId}
+                                            {selectedEnv.isDefault &&
+                                                index === 0 && (
+                                                    <span className="ml-2 rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase text-amber-600 dark:text-amber-400">
+                                                        {
+                                                            dict.admin
+                                                                .defaultModel
+                                                        }
+                                                    </span>
+                                                )}
+                                        </span>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                ) : (
+                    <p className="py-12 text-center text-sm text-muted-foreground">
+                        {dict.admin.selectProviderHint}
+                    </p>
+                )}
+            </div>
+        </div>
+    )
+}

app/[lang]/admin/page.tsx

@@ -0,0 +1,645 @@
+"use client"
+
+import {
+    AlertTriangle,
+    Check,
+    Loader2,
+    LockKeyhole,
+    ShieldCheck,
+} from "lucide-react"
+import { useCallback, useEffect, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { useDictionary } from "@/hooks/use-dictionary"
+import {
+    SETTING_GROUPS,
+    SETTINGS_BY_GROUP,
+} from "@/lib/admin/settings-registry"
+import { getApiEndpoint } from "@/lib/base-path"
+import { formatMessage } from "@/lib/i18n/utils"
+import { cn } from "@/lib/utils"
+import {
+    type AdminProvider,
+    adminFetch,
+    type EnvProvider,
+    isSecretValue,
+    SESSION_PASSWORD_KEY,
+    type SettingState,
+    type SettingsMap,
+    savedTextOf,
+} from "./admin-shared"
+import { ModelsSection } from "./models-section"
+import { SettingField } from "./setting-field"
+
+// ── Page ─────────────────────────────────────────────────────────────
+
+const NAV_GROUP_IDS = ["models", ...SETTING_GROUPS.map((g) => g.id)]
+
+// For each toggleable group, whether any of its settings has a value (from
+// the settings file or the environment)
+function groupsWithValues(map: SettingsMap): Record<string, boolean> {
+    const result: Record<string, boolean> = {}
+    for (const group of SETTING_GROUPS) {
+        if (!group.toggleable) continue
+        result[group.id] = !!SETTINGS_BY_GROUP.get(group.id)?.some(
+            (d) => map[d.key]?.source !== "default",
+        )
+    }
+    return result
+}
+
+export default function AdminPage() {
+    const dict = useDictionary()
+    // Localized group title/description, keyed by group id
+    const groupText = (id: string) =>
+        (
+            dict.admin.groups as Record<
+                string,
+                { title: string; description: string } | undefined
+            >
+        )[id]
+    const navItems = NAV_GROUP_IDS.map((id) => ({
+        id,
+        title:
+            id === "models" ? dict.admin.models : (groupText(id)?.title ?? id),
+    }))
+    const [password, setPassword] = useState("")
+    const [authedPassword, setAuthedPassword] = useState<string | null>(null)
+    const [authError, setAuthError] = useState("")
+    const [authLoading, setAuthLoading] = useState(false)
+
+    const [writable, setWritable] = useState(true)
+
+    // Models section state
+    const [providers, setProviders] = useState<AdminProvider[]>([])
+    const [envProviders, setEnvProviders] = useState<EnvProvider[]>([])
+    // Whether .env itself sets AI_MODEL (a default the panel would override)
+    const [envHasDefaultModel, setEnvHasDefaultModel] = useState(false)
+    const [savedProviders, setSavedProviders] = useState<string>("[]")
+    const providersDirty = JSON.stringify(providers) !== savedProviders
+
+    // General settings state
+    const [settings, setSettings] = useState<SettingsMap>({})
+    const [pending, setPending] = useState<Record<string, string | null>>({})
+    const [errors, setErrors] = useState<Record<string, string>>({})
+    const [enabledGroups, setEnabledGroups] = useState<Record<string, boolean>>(
+        {},
+    )
+
+    const [saving, setSaving] = useState(false)
+    const [saveMessage, setSaveMessage] = useState<{
+        ok: boolean
+        text: string
+    } | null>(null)
+    const [activeGroup, setActiveGroup] = useState("models")
+
+    const dirtyCount = Object.keys(pending).length + (providersDirty ? 1 : 0)
+
+    const applySettingsResponse = useCallback(
+        (data: { writable: boolean; settings: SettingState[] }) => {
+            setWritable(data.writable)
+            const map: SettingsMap = {}
+            for (const s of data.settings) map[s.key] = s
+            setSettings(map)
+            // A group stays on while it still has values (e.g. from env vars
+            // that saving can't remove); a user's explicit "on" for a group
+            // with no values yet is kept across saves
+            setEnabledGroups((prev) => {
+                const next = groupsWithValues(map)
+                for (const id of Object.keys(next)) {
+                    next[id] = next[id] || !!prev[id]
+                }
+                return next
+            })
+        },
+        [],
+    )
+
+    const applyProvidersResponse = useCallback(
+        (data: {
+            providers: AdminProvider[]
+            envProviders?: EnvProvider[]
+            envHasDefaultModel?: boolean
+        }) => {
+            setProviders(data.providers)
+            setSavedProviders(JSON.stringify(data.providers))
+            setEnvProviders(data.envProviders ?? [])
+            setEnvHasDefaultModel(!!data.envHasDefaultModel)
+        },
+        [],
+    )
+
+    const login = useCallback(
+        async (pw: string) => {
+            setAuthLoading(true)
+            setAuthError("")
+            try {
+                const [settingsData, providersData] = await Promise.all([
+                    adminFetch("/api/admin/settings", pw),
+                    adminFetch("/api/admin/providers", pw),
+                ])
+                applySettingsResponse(settingsData)
+                applyProvidersResponse(providersData)
+                setAuthedPassword(pw)
+                sessionStorage.setItem(SESSION_PASSWORD_KEY, pw)
+            } catch (err) {
+                setAuthError(
+                    err instanceof Error ? err.message : dict.admin.loginFailed,
+                )
+            } finally {
+                setAuthLoading(false)
+            }
+        },
+        [applySettingsResponse, applyProvidersResponse, dict],
+    )
+
+    // Restore session on mount
+    useEffect(() => {
+        const stored = sessionStorage.getItem(SESSION_PASSWORD_KEY)
+        if (stored) void login(stored)
+    }, [login])
+
+    // Warn before leaving with unsaved changes
+    const hasDirty = dirtyCount > 0
+    useEffect(() => {
+        if (!hasDirty) return
+        const handler = (e: BeforeUnloadEvent) => {
+            e.preventDefault()
+            // Some browsers only show the prompt when returnValue is set
+            e.returnValue = ""
+        }
+        window.addEventListener("beforeunload", handler)
+        return () => window.removeEventListener("beforeunload", handler)
+    }, [hasDirty])
+
+    // Highlight the section currently in view in the sidebar
+    useEffect(() => {
+        if (!authedPassword) return
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const visible = entries
+                    .filter((e) => e.isIntersecting)
+                    .sort(
+                        (a, b) =>
+                            a.boundingClientRect.top - b.boundingClientRect.top,
+                    )
+                if (visible[0]) setActiveGroup(visible[0].target.id)
+            },
+            { rootMargin: "-10% 0px -50% 0px" },
+        )
+        for (const id of NAV_GROUP_IDS) {
+            const el = document.getElementById(id)
+            if (el) observer.observe(el)
+        }
+        return () => observer.disconnect()
+    }, [authedPassword])
+
+    // value undefined drops the pending change (back to the saved value)
+    const handleChange = useCallback(
+        (key: string, value: string | null | undefined) => {
+            setSaveMessage(null)
+            setErrors((prev) => {
+                if (!(key in prev)) return prev
+                const next = { ...prev }
+                delete next[key]
+                return next
+            })
+            setPending((prev) => {
+                const state = settings[key]
+                const isRevert =
+                    value !== null &&
+                    state?.source === "file" &&
+                    !isSecretValue(state?.value) &&
+                    value === savedTextOf(state)
+                const isNoop =
+                    value === "" &&
+                    (!state || state.source !== "file") &&
+                    !isSecretValue(state?.value)
+                if (value === undefined || isRevert || isNoop) {
+                    const next = { ...prev }
+                    delete next[key]
+                    return next
+                }
+                return { ...prev, [key]: value === "" ? null : value }
+            })
+        },
+        [settings],
+    )
+
+    // Toggling a group off stages deletion of its saved values so the
+    // feature actually turns off on save; toggling on drops those deletions.
+    const handleGroupToggle = useCallback(
+        (groupId: string, enabled: boolean) => {
+            setSaveMessage(null)
+            setEnabledGroups((prev) => ({ ...prev, [groupId]: enabled }))
+            const keys = (SETTINGS_BY_GROUP.get(groupId) ?? []).map(
+                (d) => d.key,
+            )
+            setPending((prev) => {
+                const next = { ...prev }
+                for (const key of keys) {
+                    if (!enabled) {
+                        // Stage deletion of saved values; drop unsaved input
+                        if (settings[key]?.source === "default")
+                            delete next[key]
+                        else next[key] = null
+                    } else if (next[key] === null) {
+                        delete next[key]
+                    }
+                }
+                return next
+            })
+        },
+        [settings],
+    )
+
+    const handleSave = useCallback(async () => {
+        if (!authedPassword || dirtyCount === 0) return
+        setSaving(true)
+        setSaveMessage(null)
+        setErrors({})
+        try {
+            if (providersDirty) {
+                const data = await adminFetch(
+                    "/api/admin/providers",
+                    authedPassword,
+                    { method: "PUT", body: JSON.stringify({ providers }) },
+                )
+                applyProvidersResponse(data)
+            }
+            if (Object.keys(pending).length > 0) {
+                const res = await fetch(getApiEndpoint("/api/admin/settings"), {
+                    method: "PUT",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "x-admin-password": authedPassword,
+                    },
+                    body: JSON.stringify({ values: pending }),
+                })
+                const data = await res.json().catch(() => ({}))
+                if (!res.ok) {
+                    // Per-field validation errors come back as {errors: {...}}
+                    if (data.errors) {
+                        setErrors(data.errors)
+                        const firstKey = Object.keys(data.errors)[0]
+                        document.getElementById(`setting-${firstKey}`)?.focus()
+                        throw new Error(dict.admin.invalidSettings)
+                    }
+                    throw new Error(
+                        data.error || `Request failed (${res.status})`,
+                    )
+                }
+                applySettingsResponse(data)
+                setPending({})
+            }
+            setSaveMessage({
+                ok: true,
+                text: dict.admin.saved,
+            })
+            setTimeout(() => setSaveMessage(null), 4000)
+        } catch (err) {
+            setSaveMessage({
+                ok: false,
+                text:
+                    err instanceof Error ? err.message : dict.admin.saveFailed,
+            })
+        } finally {
+            setSaving(false)
+        }
+    }, [
+        authedPassword,
+        pending,
+        providers,
+        providersDirty,
+        dirtyCount,
+        applySettingsResponse,
+        applyProvidersResponse,
+        dict,
+    ])
+
+    // ── Login screen ─────────────────────────────────────────────────
+    if (!authedPassword) {
+        return (
+            <div className="flex min-h-screen items-center justify-center bg-background p-4">
+                <form
+                    className="w-full max-w-sm space-y-4 rounded-lg border bg-card p-6 shadow-sm"
+                    onSubmit={(e) => {
+                        e.preventDefault()
+                        void login(password)
+                    }}
+                >
+                    <div className="flex items-center gap-2">
+                        <LockKeyhole
+                            className="h-5 w-5 text-muted-foreground"
+                            aria-hidden="true"
+                        />
+                        <h1 className="text-lg font-semibold">
+                            {dict.admin.title}
+                        </h1>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                        {dict.admin.loginPrompt}
+                    </p>
+                    <div className="space-y-1.5">
+                        <Label htmlFor="admin-password">
+                            {dict.admin.password}
+                        </Label>
+                        <Input
+                            id="admin-password"
+                            name="admin-password"
+                            type="password"
+                            value={password}
+                            autoComplete="current-password"
+                            spellCheck={false}
+                            onChange={(e) => setPassword(e.target.value)}
+                        />
+                    </div>
+                    <p
+                        className={cn(
+                            "text-sm text-destructive",
+                            !authError && "sr-only",
+                        )}
+                        aria-live="polite"
+                    >
+                        {authError}
+                    </p>
+                    <Button
+                        type="submit"
+                        className="w-full"
+                        disabled={authLoading}
+                    >
+                        {authLoading ? (
+                            <>
+                                <Loader2
+                                    className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none"
+                                    aria-hidden="true"
+                                />
+                                {dict.admin.signingIn}
+                            </>
+                        ) : (
+                            dict.admin.signIn
+                        )}
+                    </Button>
+                </form>
+            </div>
+        )
+    }
+
+    // ── Settings screen ──────────────────────────────────────────────
+    return (
+        <div className="min-h-screen bg-background">
+            <header className="sticky top-0 z-20 border-b bg-background/95 backdrop-blur">
+                <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
+                    <div className="flex items-center gap-2">
+                        <ShieldCheck
+                            className="h-5 w-5 text-primary"
+                            aria-hidden="true"
+                        />
+                        <h1 className="text-lg font-semibold">
+                            {dict.admin.title}
+                        </h1>
+                    </div>
+                    <p className="text-xs text-muted-foreground">
+                        {dict.admin.precedence}
+                    </p>
+                </div>
+            </header>
+
+            {!writable && (
+                <div className="border-b bg-amber-500/10">
+                    <div className="mx-auto flex max-w-6xl items-center gap-2 px-4 py-3 text-sm text-amber-700 dark:text-amber-400">
+                        <AlertTriangle
+                            className="h-4 w-4 shrink-0"
+                            aria-hidden="true"
+                        />
+                        {dict.admin.notWritable}
+                    </div>
+                </div>
+            )}
+
+            <div className="mx-auto flex max-w-6xl gap-8 px-4 py-6">
+                <nav
+                    aria-label={dict.admin.settingGroups}
+                    className="sticky top-20 hidden h-fit w-44 shrink-0 md:block"
+                >
+                    <ul className="space-y-1">
+                        {navItems.map((item) => (
+                            <li key={item.id}>
+                                <a
+                                    href={`#${item.id}`}
+                                    aria-current={
+                                        activeGroup === item.id
+                                            ? "true"
+                                            : undefined
+                                    }
+                                    className={cn(
+                                        "block rounded-md px-3 py-1.5 text-sm hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                        activeGroup === item.id
+                                            ? "bg-muted font-medium text-foreground"
+                                            : "text-muted-foreground",
+                                    )}
+                                >
+                                    {item.title}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
+
+                <main className="min-w-0 flex-1 pb-24">
+                    {/* Models section */}
+                    <section aria-labelledby="models" className="mb-10">
+                        <h2
+                            id="models"
+                            className="scroll-mt-20 text-base font-semibold"
+                        >
+                            {dict.admin.models}
+                        </h2>
+                        <p className="mb-3 mt-1 text-sm text-muted-foreground text-pretty">
+                            {dict.admin.modelsDescription}
+                        </p>
+                        <div className="overflow-hidden rounded-lg border bg-card">
+                            <ModelsSection
+                                providers={providers}
+                                envProviders={envProviders}
+                                envHasDefaultModel={envHasDefaultModel}
+                                disabled={!writable || saving}
+                                password={authedPassword}
+                                onChange={(next) => {
+                                    setSaveMessage(null)
+                                    setProviders(next)
+                                }}
+                            />
+                        </div>
+                    </section>
+
+                    {/* Registry-driven groups */}
+                    {SETTING_GROUPS.map((group) => {
+                        const defs = SETTINGS_BY_GROUP.get(group.id) ?? []
+                        const groupOff =
+                            group.toggleable && !enabledGroups[group.id]
+                        // Values from env vars can't be removed here, so the
+                        // group can't be turned off from the panel
+                        const envLocked = defs.some(
+                            (d) => settings[d.key]?.source === "env",
+                        )
+                        const fieldsDisabled = !writable || saving || !!groupOff
+                        const gt = groupText(group.id)
+                        const title = gt?.title ?? group.title
+                        return (
+                            <section
+                                key={group.id}
+                                aria-labelledby={group.id}
+                                className="mb-10"
+                            >
+                                <div className="flex items-center justify-between gap-4">
+                                    <h2
+                                        id={group.id}
+                                        className="scroll-mt-20 text-base font-semibold"
+                                    >
+                                        {title}
+                                    </h2>
+                                    {group.toggleable && (
+                                        <label
+                                            title={
+                                                envLocked
+                                                    ? dict.admin.sourceEnvTitle
+                                                    : undefined
+                                            }
+                                            className={cn(
+                                                "flex cursor-pointer items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors motion-reduce:transition-none",
+                                                enabledGroups[group.id]
+                                                    ? "border-primary/30 bg-primary/5 text-primary"
+                                                    : "border-border bg-muted/50 text-muted-foreground hover:border-foreground/30 hover:text-foreground",
+                                            )}
+                                        >
+                                            {enabledGroups[group.id]
+                                                ? dict.admin.enabled
+                                                : dict.admin.disabled}
+                                            <Switch
+                                                checked={
+                                                    !!enabledGroups[group.id]
+                                                }
+                                                disabled={
+                                                    !writable ||
+                                                    saving ||
+                                                    envLocked
+                                                }
+                                                aria-label={formatMessage(
+                                                    dict.admin.enableGroup,
+                                                    { group: title },
+                                                )}
+                                                onCheckedChange={(checked) =>
+                                                    handleGroupToggle(
+                                                        group.id,
+                                                        checked,
+                                                    )
+                                                }
+                                            />
+                                        </label>
+                                    )}
+                                </div>
+                                <p className="mb-3 mt-1 text-sm text-muted-foreground text-pretty">
+                                    {gt?.description ?? group.description}
+                                </p>
+                                <div
+                                    className={cn(
+                                        "rounded-lg border bg-card px-4",
+                                        groupOff &&
+                                            "pointer-events-none opacity-50",
+                                    )}
+                                >
+                                    {defs.map((def) => (
+                                        <SettingField
+                                            key={def.key}
+                                            def={def}
+                                            state={settings[def.key]}
+                                            pendingValue={pending[def.key]}
+                                            error={errors[def.key]}
+                                            disabled={fieldsDisabled}
+                                            onChange={(v) =>
+                                                handleChange(def.key, v)
+                                            }
+                                        />
+                                    ))}
+                                </div>
+                            </section>
+                        )
+                    })}
+                </main>
+            </div>
+
+            {/* Always-mounted live region so save results are announced */}
+            <p aria-live="polite" className="sr-only">
+                {saveMessage?.text ?? ""}
+            </p>
+
+            {(dirtyCount > 0 || saveMessage) && (
+                <div className="fixed inset-x-0 bottom-0 z-30 border-t bg-background/95 backdrop-blur">
+                    <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
+                        <p
+                            className={cn(
+                                "flex min-w-0 items-center gap-1.5 truncate text-sm",
+                                saveMessage?.ok
+                                    ? "text-green-600 dark:text-green-400"
+                                    : saveMessage
+                                      ? "text-destructive"
+                                      : "text-muted-foreground",
+                            )}
+                        >
+                            {saveMessage?.ok && (
+                                <Check
+                                    className="h-4 w-4 shrink-0"
+                                    aria-hidden="true"
+                                />
+                            )}
+                            {saveMessage && !saveMessage.ok
+                                ? saveMessage.text
+                                : dirtyCount > 0
+                                  ? dict.admin.unsavedChanges
+                                  : saveMessage?.text}
+                        </p>
+                        {dirtyCount > 0 && (
+                            <div className="flex shrink-0 gap-2">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    disabled={saving}
+                                    onClick={() => {
+                                        setPending({})
+                                        setErrors({})
+                                        setProviders(JSON.parse(savedProviders))
+                                        setEnabledGroups(
+                                            groupsWithValues(settings),
+                                        )
+                                    }}
+                                >
+                                    {dict.admin.discard}
+                                </Button>
+                                <Button
+                                    type="button"
+                                    disabled={saving || !writable}
+                                    onClick={() => void handleSave()}
+                                >
+                                    {saving ? (
+                                        <>
+                                            <Loader2
+                                                className="mr-2 h-4 w-4 animate-spin motion-reduce:animate-none"
+                                                aria-hidden="true"
+                                            />
+                                            {dict.admin.saving}
+                                        </>
+                                    ) : (
+                                        dict.admin.saveChanges
+                                    )}
+                                </Button>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    )
+}

app/[lang]/admin/setting-field.tsx

@@ -0,0 +1,317 @@
+import { Eye, EyeOff, X } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+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 { useDictionary } from "@/hooks/use-dictionary"
+import type { SettingDef } from "@/lib/admin/settings-registry"
+import { formatMessage } from "@/lib/i18n/utils"
+import { cn } from "@/lib/utils"
+import {
+    isSecretValue,
+    type SecretValue,
+    type SettingState,
+    savedTextOf,
+} from "./admin-shared"
+
+// ── Small shared UI bits ─────────────────────────────────────────────
+
+export function SourceChip({ source }: { source: "file" | "env" | "default" }) {
+    const dict = useDictionary()
+    if (source === "default") return null
+    return (
+        <span
+            className={cn(
+                "rounded px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide",
+                source === "file"
+                    ? "bg-primary/10 text-primary"
+                    : "bg-muted text-muted-foreground",
+            )}
+            title={
+                source === "file"
+                    ? dict.admin.sourceSavedTitle
+                    : dict.admin.sourceEnvTitle
+            }
+        >
+            {source === "file" ? dict.admin.sourceSaved : dict.admin.sourceEnv}
+        </span>
+    )
+}
+
+export function RestartBadge() {
+    const dict = useDictionary()
+    return (
+        <span className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-600 dark:text-amber-400">
+            {dict.admin.restartRequired}
+        </span>
+    )
+}
+
+// Secret input: shows masked hint as placeholder, typing replaces.
+// With keepOnEmpty, clearing the field reverts to the stored value
+// ("keep") instead of deleting it — explicit deletion is via the X button.
+export function SecretInput({
+    id,
+    value,
+    disabled,
+    keepOnEmpty,
+    onChange,
+}: {
+    id: string
+    value: string | SecretValue | undefined
+    disabled?: boolean
+    keepOnEmpty?: boolean
+    onChange: (value: string | SecretValue) => void
+}) {
+    const dict = useDictionary()
+    const [show, setShow] = useState(false)
+    // The stored marker to revert to on empty. Refreshed whenever the parent
+    // passes server state (a marker or nothing), e.g. after a save.
+    const [original, setOriginal] = useState(value)
+    if (typeof value !== "string" && value !== original) setOriginal(value)
+    const hadStored = isSecretValue(original)
+    const text = typeof value === "string" ? value : ""
+    const placeholder = isSecretValue(value)
+        ? formatMessage(dict.admin.savedReplace, { hint: value.hint })
+        : dict.admin.notSet
+    const handleText = (t: string) => {
+        if (t === "" && keepOnEmpty && hadStored && original) {
+            onChange(original)
+        } else {
+            onChange(t)
+        }
+    }
+    return (
+        <div className="flex items-center gap-1">
+            <Input
+                id={id}
+                type={show ? "text" : "password"}
+                value={text}
+                disabled={disabled}
+                spellCheck={false}
+                autoComplete="off"
+                placeholder={placeholder}
+                className="h-9 font-mono text-xs"
+                onChange={(e) => handleText(e.target.value)}
+            />
+            <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="shrink-0"
+                aria-label={show ? dict.admin.hideValue : dict.admin.showValue}
+                onClick={() => setShow((s) => !s)}
+            >
+                {show ? (
+                    <EyeOff className="h-4 w-4" aria-hidden="true" />
+                ) : (
+                    <Eye className="h-4 w-4" aria-hidden="true" />
+                )}
+            </Button>
+            {keepOnEmpty && (hadStored || text) && !disabled && (
+                <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="shrink-0"
+                    aria-label={dict.admin.removeValue}
+                    title={dict.admin.removeValueTitle}
+                    onClick={() => onChange("")}
+                >
+                    <X className="h-4 w-4" aria-hidden="true" />
+                </Button>
+            )}
+        </div>
+    )
+}
+
+// ── General settings field (registry-driven) ─────────────────────────
+
+export function SettingField({
+    def,
+    state,
+    pendingValue,
+    error,
+    disabled,
+    onChange,
+}: {
+    def: SettingDef
+    state: SettingState | undefined
+    pendingValue: string | null | undefined
+    error?: string
+    disabled: boolean
+    // undefined drops the pending change (back to the saved value)
+    onChange: (value: string | null | undefined) => void
+}) {
+    const dict = useDictionary()
+    const isDirty = pendingValue !== undefined
+    const source = state?.source ?? "default"
+    const currentValue = isDirty ? (pendingValue ?? "") : savedTextOf(state)
+    const secretState = state && isSecretValue(state.value) ? state.value : null
+
+    // Localized label/description keyed by env var name, falling back to the
+    // registry's English (the registry stays canonical for the server).
+    const t = (
+        dict.admin.settings as Record<
+            string,
+            { label?: string; description?: string } | undefined
+        >
+    )[def.key]
+    const label = t?.label ?? def.label
+    const description = t?.description ?? def.description
+
+    const inputId = `setting-${def.key}`
+    const errorId = `${inputId}-error`
+
+    let control: React.ReactNode
+    switch (def.type) {
+        case "boolean": {
+            // When unset, reflect the built-in runtime default so the toggle
+            // matches actual behavior (e.g. ALLOW_PRIVATE_URLS defaults on).
+            const effective =
+                currentValue !== "" ? currentValue : (def.default ?? "false")
+            // A saved boolean can be cleared back to its env/default value.
+            const canClear =
+                (isDirty && pendingValue !== null) || source === "file"
+            control = (
+                <div className="flex items-center gap-3">
+                    <Switch
+                        id={inputId}
+                        checked={effective === "true"}
+                        disabled={disabled}
+                        onCheckedChange={(checked) =>
+                            onChange(checked ? "true" : "false")
+                        }
+                    />
+                    {canClear && !disabled && (
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="h-7 px-2 text-xs text-muted-foreground"
+                            onClick={() => onChange(null)}
+                        >
+                            {dict.admin.resetToDefault}
+                        </Button>
+                    )}
+                </div>
+            )
+            break
+        }
+        case "enum":
+            control = (
+                <Select
+                    value={currentValue || undefined}
+                    disabled={disabled}
+                    onValueChange={onChange}
+                >
+                    <SelectTrigger id={inputId} className="w-full max-w-xs">
+                        <SelectValue placeholder={dict.admin.notSet} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {def.options?.map((opt) => (
+                            <SelectItem key={opt} value={opt}>
+                                {opt}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            )
+            break
+        case "secret":
+            control = (
+                <div className="w-full max-w-md">
+                    {/* Clearing a saved secret reverts to it; the X button deletes */}
+                    <SecretInput
+                        id={inputId}
+                        keepOnEmpty={source === "file"}
+                        value={
+                            isDirty
+                                ? (pendingValue ?? "")
+                                : (secretState ?? undefined)
+                        }
+                        disabled={disabled}
+                        onChange={(v) =>
+                            onChange(typeof v === "string" ? v : undefined)
+                        }
+                    />
+                </div>
+            )
+            break
+        case "number":
+            control = (
+                <Input
+                    id={inputId}
+                    type="number"
+                    inputMode="numeric"
+                    min={def.min}
+                    max={def.max}
+                    value={currentValue}
+                    disabled={disabled}
+                    placeholder={def.placeholder ?? dict.admin.notSet}
+                    className="w-full max-w-xs tabular-nums"
+                    aria-invalid={!!error}
+                    aria-describedby={error ? errorId : undefined}
+                    onChange={(e) => onChange(e.target.value)}
+                />
+            )
+            break
+        default:
+            control = (
+                <Input
+                    id={inputId}
+                    type="text"
+                    value={currentValue}
+                    disabled={disabled}
+                    spellCheck={false}
+                    autoComplete="off"
+                    placeholder={def.placeholder ?? dict.admin.notSet}
+                    className="w-full max-w-md"
+                    aria-invalid={!!error}
+                    aria-describedby={error ? errorId : undefined}
+                    onChange={(e) => onChange(e.target.value)}
+                />
+            )
+    }
+
+    return (
+        <div className="border-b border-border/60 py-4 last:border-b-0">
+            <div className="mb-1.5 flex flex-wrap items-center gap-2">
+                <Label htmlFor={inputId} className="text-sm font-medium">
+                    {label}
+                </Label>
+                <SourceChip source={source} />
+                {def.restartRequired && <RestartBadge />}
+                {isDirty && (
+                    <span className="rounded bg-blue-500/10 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-blue-600 dark:text-blue-400">
+                        {dict.admin.modified}
+                    </span>
+                )}
+            </div>
+            {description && (
+                <p className="mb-2 max-w-prose text-xs text-muted-foreground">
+                    {description}
+                </p>
+            )}
+            {control}
+            <p
+                id={errorId}
+                className={cn(
+                    "text-xs text-destructive",
+                    error ? "mt-1.5" : "sr-only",
+                )}
+                aria-live="polite"
+            >
+                {error ?? ""}
+            </p>
+        </div>
+    )
+}

app/[lang]/layout.tsx

@@ -0,0 +1,196 @@
+import { GoogleAnalytics } from "@next/third-parties/google"
+import type { Metadata, Viewport } from "next"
+import { Instrument_Sans, JetBrains_Mono } from "next/font/google"
+import { notFound } from "next/navigation"
+import Script from "next/script"
+import { AppToaster } from "@/components/workspace/app-toaster"
+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 { THEME_INIT_SCRIPT } from "@/stores/settings-store"
+
+import "../globals.css"
+
+const instrumentSans = Instrument_Sans({
+    variable: "--font-latin",
+    subsets: ["latin"],
+    weight: ["400", "500", "600", "700"],
+    // Chinese and Japanese text falls through to system fonts, in the
+    // order globals.css picks for the page's language
+    fallback: [],
+})
+
+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>
+                {/* Apply dark mode before the first paint (no white flash) */}
+                <Script id="theme-init" strategy="beforeInteractive">
+                    {THEME_INIT_SCRIPT}
+                </Script>
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+                />
+            </head>
+            <body
+                className={`${instrumentSans.variable} ${jetbrainsMono.variable} antialiased`}
+            >
+                <DictionaryProvider dictionary={dictionary}>
+                    <DiagramProvider>{children}</DiagramProvider>
+                </DictionaryProvider>
+                <AppToaster />
+            </body>
+            {process.env.NEXT_PUBLIC_GA_ID && (
+                <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
+            )}
+        </html>
+    )
+}

app/[lang]/page.tsx

@@ -0,0 +1,11 @@
+import { Suspense } from "react"
+import { Workspace } from "@/components/workspace/workspace"
+
+export default function Home() {
+    // The workspace reads ?session= from the URL, which needs a Suspense boundary
+    return (
+        <Suspense fallback={<div className="fixed inset-0 bg-canvas" />}>
+            <Workspace />
+        </Suspense>
+    )
+}

app/about/page.tsx

@@ -1,336 +0,0 @@
-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/admin/providers/route.ts

@@ -0,0 +1,96 @@
+import { checkAdminAuth } from "@/lib/admin/auth"
+import {
+    AdminProvidersSchema,
+    deriveEnvUpdates,
+    loadAdminProviders,
+    maskAdminProviders,
+    mergeSecrets,
+    validateAdminProviders,
+} from "@/lib/admin/providers"
+import {
+    getEnvFallback,
+    isSettingsWritable,
+    saveSettings,
+} from "@/lib/admin/settings"
+import { loadEnvServerModelsConfig } from "@/lib/server-model-config"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+
+async function payload() {
+    // Env-based providers (AI_MODELS_CONFIG / ai-models.json) are shown
+    // read-only in the panel; their credentials live in the environment
+    const envConfig = await loadEnvServerModelsConfig()
+    const adminProviders = loadAdminProviders()
+    // A panel default overrides any env default (matches the merge in
+    // loadRawServerModelsConfig), so env stars must reflect that
+    const adminHasDefault = adminProviders.some(
+        (p) => p.isDefault && p.models.length > 0,
+    )
+    return {
+        writable: isSettingsWritable(),
+        providers: maskAdminProviders(adminProviders),
+        envProviders:
+            envConfig?.providers.map((p) => ({
+                name: p.name,
+                provider: p.provider,
+                models: p.models,
+                isDefault: !!p.default && !adminHasDefault,
+            })) ?? [],
+        // Whether .env sets a default model. getEnvFallback skips the value
+        // the panel overlays onto process.env, so a panel default doesn't count.
+        envHasDefaultModel: !!getEnvFallback("AI_MODEL"),
+    }
+}
+
+export async function GET(req: Request) {
+    const authError = checkAdminAuth(req)
+    if (authError) return authError
+    return Response.json(await payload())
+}
+
+export async function PUT(req: Request) {
+    const authError = checkAdminAuth(req)
+    if (authError) return authError
+
+    if (!isSettingsWritable()) {
+        return Response.json(
+            {
+                error: "Settings file is not writable on this deployment. Configure via environment variables instead.",
+            },
+            { status: 503 },
+        )
+    }
+
+    let body: unknown
+    try {
+        body = await req.json()
+    } catch {
+        return Response.json({ error: "Invalid JSON body" }, { status: 400 })
+    }
+
+    const parsed = AdminProvidersSchema.safeParse(
+        (body as { providers?: unknown })?.providers,
+    )
+    if (!parsed.success) {
+        return Response.json(
+            {
+                error: `Invalid providers: ${parsed.error.issues[0]?.message ?? "schema mismatch"}`,
+            },
+            { status: 400 },
+        )
+    }
+
+    const stored = loadAdminProviders()
+    const merged = mergeSecrets(parsed.data, stored)
+
+    const envConfig = await loadEnvServerModelsConfig()
+    const validationError = validateAdminProviders(merged, envConfig)
+    if (validationError) {
+        return Response.json({ error: validationError }, { status: 400 })
+    }
+
+    saveSettings(deriveEnvUpdates(merged, stored))
+
+    return Response.json(await payload())
+}

app/api/admin/settings/route.ts

@@ -0,0 +1,126 @@
+import { checkAdminAuth, maskSecret } from "@/lib/admin/auth"
+import {
+    getEnvFallback,
+    getValueSource,
+    isSettingsWritable,
+    loadSettings,
+    saveSettings,
+} from "@/lib/admin/settings"
+import {
+    SETTINGS_BY_KEY,
+    SETTINGS_REGISTRY,
+    type SettingDef,
+} from "@/lib/admin/settings-registry"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+
+function serializeSettings() {
+    const fileValues = loadSettings()
+    return SETTINGS_REGISTRY.map((def) => {
+        const source = getValueSource(def.key)
+        const raw =
+            source === "file"
+                ? fileValues[def.key]
+                : (getEnvFallback(def.key) ?? null)
+        const value = def.type === "secret" && raw ? maskSecret(raw) : raw
+        return { key: def.key, source, value }
+    })
+}
+
+export async function GET(req: Request) {
+    const authError = checkAdminAuth(req)
+    if (authError) return authError
+
+    return Response.json({
+        writable: isSettingsWritable(),
+        settings: serializeSettings(),
+    })
+}
+
+function validateValue(def: SettingDef, value: string): string | null {
+    switch (def.type) {
+        case "number": {
+            const num = Number(value)
+            if (!Number.isFinite(num)) return "Must be a number"
+            if (def.min !== undefined && num < def.min)
+                return `Must be at least ${def.min}`
+            if (def.max !== undefined && num > def.max)
+                return `Must be at most ${def.max}`
+            return null
+        }
+        case "boolean":
+            return value === "true" || value === "false"
+                ? null
+                : 'Must be "true" or "false"'
+        case "enum":
+            return def.options?.includes(value)
+                ? null
+                : `Must be one of: ${def.options?.join(", ")}`
+        default:
+            return null
+    }
+}
+
+export async function PUT(req: Request) {
+    const authError = checkAdminAuth(req)
+    if (authError) return authError
+
+    if (!isSettingsWritable()) {
+        return Response.json(
+            {
+                error: "Settings file is not writable on this deployment. Configure via environment variables instead.",
+            },
+            { status: 503 },
+        )
+    }
+
+    let body: { values?: Record<string, unknown> }
+    try {
+        body = await req.json()
+    } catch {
+        return Response.json({ error: "Invalid JSON body" }, { status: 400 })
+    }
+    if (!body.values || typeof body.values !== "object") {
+        return Response.json(
+            { error: "Body must contain a values object" },
+            { status: 400 },
+        )
+    }
+
+    const updates: Record<string, string | null> = {}
+    const errors: Record<string, string> = {}
+
+    for (const [key, value] of Object.entries(body.values)) {
+        const def = SETTINGS_BY_KEY.get(key)
+        if (!def) {
+            errors[key] = "Unknown setting"
+            continue
+        }
+        if (value === null || value === "") {
+            updates[key] = null
+            continue
+        }
+        if (typeof value !== "string") {
+            errors[key] = "Value must be a string"
+            continue
+        }
+        const error = validateValue(def, value)
+        if (error) {
+            errors[key] = error
+            continue
+        }
+        updates[key] = value
+    }
+
+    if (Object.keys(errors).length > 0) {
+        return Response.json({ errors }, { status: 400 })
+    }
+
+    saveSettings(updates)
+
+    return Response.json({
+        writable: true,
+        settings: serializeSettings(),
+    })
+}

app/api/admin/test-model/route.ts

@@ -0,0 +1,84 @@
+import { POST as validateModel } from "@/app/api/validate-model/route"
+import { checkAdminAuth } from "@/lib/admin/auth"
+import {
+    AdminProviderSchema,
+    loadAdminProviders,
+    mergeSecrets,
+} from "@/lib/admin/providers"
+import { globalBaseUrl } from "@/lib/ai-providers"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+
+// Test a model with the client's CURRENT provider state (which may be
+// unsaved). Secret fields arrive either as plaintext (newly typed) or as
+// masked {isSet} markers, which are resolved against settings.json — so
+// testing works both before and after saving.
+export async function POST(req: Request) {
+    const authError = checkAdminAuth(req)
+    if (authError) return authError
+
+    let body: { provider?: unknown; modelId?: string }
+    try {
+        body = await req.json()
+    } catch {
+        return Response.json({ error: "Invalid JSON body" }, { status: 400 })
+    }
+
+    const parsed = AdminProviderSchema.safeParse(body.provider)
+    if (!parsed.success || !body.modelId) {
+        return Response.json(
+            { valid: false, error: "Invalid provider or model" },
+            { status: 400 },
+        )
+    }
+
+    // SECURITY: a stored secret is only resolved from an {isSet} marker if
+    // the endpoint it would be sent to (provider + baseUrl) still matches
+    // the stored entry. Otherwise a tampered baseUrl could exfiltrate the
+    // stored key to an arbitrary host. Mismatches must re-supply plaintext.
+    const stored = loadAdminProviders().find((p) => p.id === parsed.data.id)
+    const sameEndpoint =
+        stored &&
+        stored.provider === parsed.data.provider &&
+        (stored.baseUrl ?? "") === (parsed.data.baseUrl ?? "") &&
+        (stored.awsRegion ?? "") === (parsed.data.awsRegion ?? "")
+    const [resolved] = mergeSecrets(
+        [parsed.data],
+        sameEndpoint && stored ? [stored] : [],
+    )
+
+    const serverUrl = globalBaseUrl(resolved.provider)
+    return validateModel(
+        new Request(new URL("/api/validate-model", req.url), {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                // Checked again there, in place of an access code
+                "x-admin-password": req.headers.get("x-admin-password") || "",
+                // The EdgeOne function checks the access code and Pages
+                // cookies, and its URL is built from the page's origin
+                "x-access-code": req.headers.get("x-access-code") || "",
+                cookie: req.headers.get("cookie") || "",
+                ...(req.headers.get("origin") && {
+                    origin: req.headers.get("origin") as string,
+                }),
+            },
+            body: JSON.stringify({
+                provider: resolved.provider,
+                apiKey: resolved.apiKey,
+                // Without a URL of its own, chat sends the entry's key to
+                // the server's <P>_BASE_URL: test that endpoint, not
+                // another one. It is the server's own, which chat uses
+                // without the checks for a URL a user typed.
+                baseUrl: resolved.baseUrl || serverUrl,
+                ...(!resolved.baseUrl && serverUrl && { serverBaseUrl: true }),
+                modelId: body.modelId,
+                awsAccessKeyId: resolved.awsAccessKeyId,
+                awsSecretAccessKey: resolved.awsSecretAccessKey,
+                awsRegion: resolved.awsRegion,
+                vertexApiKey: resolved.vertexApiKey,
+            }),
+        }),
+    )
+}

app/api/chat/xml_guide.md

@@ -81,16 +81,15 @@ Contains the actual diagram data.
 
 ## Root Cell Container: `<root>`
 
-Contains all the cells in the diagram.
+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.
 
-**Example:**
+**Internal structure (auto-generated):**
 
 ```xml
 <root>
-<mxCell id="0"/>
-<mxCell id="1" parent="0"/>
-
-  <!-- Other cells go here -->
+  <mxCell id="0"/>           <!-- Auto-added -->
+  <mxCell id="1" parent="0"/> <!-- Auto-added -->
+  <!-- Your mxCell elements go here (start from id="2") -->
 </root>
 ```
 
@@ -203,14 +202,15 @@ 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 Manually Creating Draw.io XML
+## Tips for Creating Draw.io XML
 
-1.  Start with the basic structure (`mxfile`, `diagram`, `mxGraphModel`, `root`)
-2.  Always include the two special cells (id = "0" and id = "1")
+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)
 3.  Assign unique and sequential IDs to all cells
-4.  Define parent relationships correctly
+4.  Define parent relationships correctly (use parent="1" for top-level shapes)
 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,12 +234,33 @@ To group elements, create a parent cell and set other cells' `parent` attribute
 
 ### Swimlanes
 
-Swimlanes use the `swimlane` shape style:
+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.**
 
 ```xml
-<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>
+<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>
 ```
 
 ### Tables

app/api/config/route.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,76 @@
+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", "xmlsvg"]),
+    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

@@ -0,0 +1,188 @@
+import { extractFromHtml } from "@extractus/article-extractor"
+import { NextResponse } from "next/server"
+import TurndownService from "turndown"
+import { checkAccessCode, rejectCrossSite } from "@/lib/access-code"
+import { readLimitedBody } from "@/lib/read-limited-body"
+import { isPrivateUrl } from "@/lib/ssrf-protection"
+
+const MAX_CONTENT_LENGTH = 150000 // Match PDF limit
+const MAX_RESPONSE_BYTES = 5 * 1024 * 1024
+const EXTRACT_TIMEOUT_MS = 15000
+const USER_AGENT = "Mozilla/5.0 (compatible; NextAIDrawio/1.0)"
+
+// Detect the page's charset so non-UTF-8 pages (Shift_JIS/GBK/EUC/Big5, common
+// on CJK sites) are decoded correctly. Response.text() always assumes UTF-8 and
+// would produce mojibake; the article-extractor library does the same detection
+// when it fetches the page itself, which we no longer rely on.
+function detectCharset(
+    contentType: string | null,
+    buffer: ArrayBuffer,
+): string {
+    // 1. HTTP Content-Type header charset (most authoritative).
+    const headerCharset = contentType?.match(/charset=([^;]+)/i)?.[1]?.trim()
+    // 2. <meta charset> / <meta http-equiv> in the first bytes of the document.
+    const head = new TextDecoder("utf-8").decode(buffer.slice(0, 4096))
+    const metaCharset =
+        head.match(/<meta[^>]+charset=["']?\s*([\w-]+)/i)?.[1] ||
+        head.match(/<meta[^>]+content=["'][^"']*charset=([\w-]+)/i)?.[1]
+    const charset = (headerCharset || metaCharset || "utf-8").toLowerCase()
+    // TextDecoder throws on unknown encoding labels; fall back to UTF-8.
+    try {
+        new TextDecoder(charset)
+        return charset
+    } catch {
+        return "utf-8"
+    }
+}
+
+export async function POST(req: Request) {
+    const crossSite = rejectCrossSite(req)
+    if (crossSite) return crossSite
+    const accessError = checkAccessCode(req)
+    if (accessError) return accessError
+
+    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: parse-url has no use case for fetching internal
+        // hosts, so private URLs are always rejected. ALLOW_PRIVATE_URLS only
+        // governs LLM provider baseUrl overrides (validate-model, chat).
+        if (await isPrivateUrl(url)) {
+            return NextResponse.json(
+                { error: "Cannot access private/internal URLs" },
+                { status: 400 },
+            )
+        }
+        // Fetch the page ourselves so we control redirect handling. The
+        // article-extractor library follows redirects internally and ignores a
+        // `redirect` option, which would let a public URL 302 to an internal
+        // host and bypass the SSRF check above. `redirect: "error"` rejects any
+        // redirect outright.
+        const controller = new AbortController()
+        const timeoutId = setTimeout(() => {
+            controller.abort()
+        }, EXTRACT_TIMEOUT_MS)
+
+        let html: string
+        try {
+            const response = await fetch(url, {
+                headers: { "User-Agent": USER_AGENT },
+                redirect: "error",
+                signal: controller.signal,
+            })
+
+            const contentType = response.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 },
+                )
+            }
+
+            if (!response.ok) {
+                return NextResponse.json(
+                    { error: "Could not fetch URL content" },
+                    { status: 400 },
+                )
+            }
+
+            const buffer = await readLimitedBody(response, MAX_RESPONSE_BYTES)
+            if (!buffer) {
+                return NextResponse.json(
+                    {
+                        error: `Page exceeds the ${MAX_RESPONSE_BYTES / 1024 / 1024} MB download limit`,
+                    },
+                    { status: 413 },
+                )
+            }
+            const charset = detectCharset(contentType, buffer)
+            html = new TextDecoder(charset).decode(buffer)
+        } catch (err: any) {
+            if (err?.name === "AbortError") {
+                return NextResponse.json(
+                    { error: "Timed out while fetching URL content" },
+                    { status: 504 },
+                )
+            }
+            // Redirects are rejected with a TypeError ("failed to fetch" /
+            // "unexpected redirect") when redirect: "error" is set.
+            return NextResponse.json(
+                { error: "Could not fetch URL content" },
+                { status: 400 },
+            )
+        } finally {
+            clearTimeout(timeoutId)
+            // Ends a download left unread (too large, PDF, error status);
+            // a body already read is not affected
+            controller.abort()
+        }
+
+        // extractFromHtml throws (not returns null) on empty/non-HTML bodies,
+        // so map any parse error to the same 400 as the no-content case.
+        let article: Awaited<ReturnType<typeof extractFromHtml>>
+        try {
+            article = await extractFromHtml(html, url)
+        } catch {
+            article = null
+        }
+
+        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/provider-models/route.ts

@@ -0,0 +1,79 @@
+import { NextResponse } from "next/server"
+import { checkAccessCode, rejectCrossSite } from "@/lib/access-code"
+import { classifyLLMError } from "@/lib/llm-errors"
+import {
+    canListModels,
+    listProviderModels,
+    ModelListError,
+} from "@/lib/provider-models"
+import {
+    allowPrivateUrls,
+    isPrivateUrl,
+    RedirectRefusedError,
+    redirectGuardedFetch,
+} from "@/lib/ssrf-protection"
+import type { ProviderName } from "@/lib/types/model-config"
+
+export const runtime = "nodejs"
+
+// Public lists need no key
+const NO_KEY_NEEDED = new Set<ProviderName>([
+    "ollama",
+    "openrouter",
+    "aihubmix",
+])
+
+/**
+ * The models a provider offers, for the "Fetch models" button in model
+ * settings. Answers { models: null } for providers that cannot list them,
+ * so the dialog keeps its suggested models.
+ */
+export async function POST(req: Request) {
+    const crossSite = rejectCrossSite(req)
+    if (crossSite) return crossSite
+    // Sends requests to a URL the client chose, so require the access code
+    const accessError = checkAccessCode(req)
+    if (accessError) return accessError
+
+    const { provider, apiKey, baseUrl } = (await req.json()) as {
+        provider: ProviderName
+        apiKey?: string
+        baseUrl?: string
+    }
+    if (!canListModels(provider)) {
+        return NextResponse.json({ models: null })
+    }
+    // SECURITY: Block SSRF attacks via custom baseUrl
+    if (baseUrl && !allowPrivateUrls() && (await isPrivateUrl(baseUrl))) {
+        return NextResponse.json({ error: "Invalid base URL" }, { status: 400 })
+    }
+    if (!apiKey && !NO_KEY_NEEDED.has(provider)) {
+        return NextResponse.json(
+            { error: "API key is required" },
+            { status: 400 },
+        )
+    }
+
+    try {
+        const models = await listProviderModels(
+            provider,
+            { apiKey, baseUrl },
+            (baseUrl && redirectGuardedFetch()) || fetch,
+        )
+        return NextResponse.json({ models })
+    } catch (error) {
+        console.warn("[provider-models] Listing failed:", error)
+        // Only our own explanations go back: the URL may be an internal
+        // address, whose answer or host names must not reach the caller.
+        // The Gateway SDK wraps them, keeping ours as the cause.
+        const isOwn = (e: unknown): e is Error =>
+            e instanceof ModelListError || e instanceof RedirectRefusedError
+        const cause = (error as { cause?: unknown })?.cause
+        const own = isOwn(error) ? error : isOwn(cause) ? cause : null
+        const { code } = classifyLLMError(own ?? error)
+        return NextResponse.json({
+            code,
+            error: own?.message ?? "The model list request failed.",
+        })
+    }
+}

app/api/server-models/route.ts

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,184 @@
+/**
+ * API endpoint for VLM-based diagram validation.
+ * Accepts a PNG image and streams validation results using useObject-compatible format.
+ */
+
+import { Output, streamText } from "ai"
+import { checkAccessCode, rejectCrossSite } from "@/lib/access-code"
+import { getValidationModel } from "@/lib/ai-providers"
+import {
+    checkAndIncrementRequest,
+    isQuotaEnabled,
+    recordTokenUsage,
+} from "@/lib/dynamo-quota-manager"
+import { getUserIdFromRequest } from "@/lib/user-id"
+import { VALIDATION_SYSTEM_PROMPT } from "@/lib/validation-prompts"
+import {
+    type ValidationResult,
+    ValidationResultSchema,
+} from "@/lib/validation-schema"
+
+export const maxDuration = 30
+
+// Data URL length cap (~3.75 MB of PNG), well above a normal diagram capture
+const MAX_IMAGE_DATA_LENGTH = 5 * 1024 * 1024
+
+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: [],
+}
+
+/** A fixed result in the text format useObject reads */
+function createStreamingResponse(result: ValidationResult): Response {
+    return new Response(JSON.stringify(result), {
+        headers: { "Content-Type": "text/plain; charset=utf-8" },
+    })
+}
+
+export async function POST(req: Request): Promise<Response> {
+    const crossSite = rejectCrossSite(req)
+    if (crossSite) return crossSite
+    // Uses the server's model credentials, so require the access code
+    const accessError = checkAccessCode(req)
+    if (accessError) return accessError
+
+    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 },
+            )
+        }
+
+        if (imageData.length > MAX_IMAGE_DATA_LENGTH) {
+            return Response.json(
+                { error: "Image data too large" },
+                { status: 413 },
+            )
+        }
+
+        // It runs the server's vision model: with the quota on, the daily
+        // and per-minute token limits apply, and its tokens are counted. Not
+        // the request limit, which is for chats: the day's last chat still
+        // gets its check, and a check does not count as a chat.
+        const userId = getUserIdFromRequest(req)
+        const countsQuota = isQuotaEnabled() && userId !== "anonymous"
+        if (countsQuota) {
+            const quotaCheck = await checkAndIncrementRequest(
+                userId,
+                {
+                    requests: 0,
+                    tokens: Number(process.env.DAILY_TOKEN_LIMIT) || 200000,
+                    tpm: Number(process.env.TPM_LIMIT) || 20000,
+                },
+                0,
+            )
+            if (!quotaCheck.allowed) {
+                return Response.json(
+                    {
+                        error: quotaCheck.error,
+                        type: quotaCheck.type,
+                        used: quotaCheck.used,
+                        limit: quotaCheck.limit,
+                    },
+                    { status: 429 },
+                )
+            }
+        }
+
+        // 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 = streamText({
+            model,
+            output: Output.object({ 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: ({ output, totalUsage }) => {
+                if (countsQuota && totalUsage) {
+                    recordTokenUsage(
+                        userId,
+                        (totalUsage.inputTokens || 0) +
+                            (totalUsage.outputTokens || 0),
+                    )
+                }
+                if (sessionId && output) {
+                    console.log(
+                        `[validate-diagram] Session ${sessionId}: valid=${output.valid}, issues=${output.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

@@ -0,0 +1,246 @@
+import { streamText, tool } from "ai"
+import { NextResponse } from "next/server"
+import { z } from "zod"
+import { checkAccessCode, rejectCrossSite } from "@/lib/access-code"
+import { checkAdminAuth } from "@/lib/admin/auth"
+import {
+    edgeOneEndpoint,
+    getAIModel,
+    globalBaseUrl,
+    usesServerCredentials,
+    usesServerEndpoint,
+} from "@/lib/ai-providers"
+import {
+    checkAndIncrementRequest,
+    isQuotaEnabled,
+} from "@/lib/dynamo-quota-manager"
+import { classifyLLMError } from "@/lib/llm-errors"
+import { allowPrivateUrls, isPrivateUrl } from "@/lib/ssrf-protection"
+import { normalizeBaseUrl, type ProviderName } from "@/lib/types/model-config"
+import { getUserIdFromRequest } from "@/lib/user-id"
+
+export const runtime = "nodejs"
+
+interface ValidateRequest {
+    provider: ProviderName
+    apiKey: string
+    baseUrl?: string
+    modelId: string
+    // AWS Bedrock specific
+    awsAccessKeyId?: string
+    awsSecretAccessKey?: string
+    awsRegion?: string
+    awsSessionToken?: string
+    // Vertex AI specific
+    vertexApiKey?: string // Express Mode API key
+    // Set by the admin panel's Test: baseUrl is the server's <P>_BASE_URL
+    serverBaseUrl?: boolean
+}
+
+const TEST_TIMEOUT_MS = 15_000
+
+// Drawing works through tool calls, so the test asks for one
+const PING_TOOL = tool({
+    description: "Report that the connection works.",
+    inputSchema: z.object({}),
+})
+
+const NO_TOOL_CALL_WARNING =
+    "Connected, but the model answered without calling a tool. It may not support tool calls, which drawing needs."
+
+export async function POST(req: Request) {
+    const crossSite = rejectCrossSite(req)
+    if (crossSite) return crossSite
+    // Lets the server send requests to arbitrary URLs, so require the access
+    // code, or the admin password (the admin panel's Test button)
+    const accessError = checkAccessCode(req)
+    if (accessError && checkAdminAuth(req)) return accessError
+
+    try {
+        const body: ValidateRequest = await req.json()
+        const {
+            provider,
+            apiKey,
+            modelId,
+            awsAccessKeyId,
+            awsSecretAccessKey,
+            awsRegion,
+            awsSessionToken,
+            // 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 },
+            )
+        }
+        // EdgeOne is this site's own function, as in the chat; the admin
+        // panel's Test sends no URL, and a relative one cannot be fetched
+        const baseUrl =
+            provider === "edgeone" ? edgeOneEndpoint(req) : body.baseUrl
+        // The admin panel's Test of an entry without a URL sends the
+        // server's own <P>_BASE_URL, which chat uses as it is: not a URL a
+        // user chose, so no private-address or redirect rules
+        const serverUrl =
+            body.serverBaseUrl === true &&
+            !!baseUrl &&
+            baseUrl === globalBaseUrl(provider) &&
+            !checkAdminAuth(req)
+
+        // SECURITY: Block SSRF attacks via custom baseUrl
+        if (
+            baseUrl &&
+            !serverUrl &&
+            !allowPrivateUrls() &&
+            (await 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 },
+            )
+        }
+        // The Test button checks the user's own provider. On the server's
+        // keys (Ollama Cloud without a key or URL) anyone could run any model.
+        if (
+            usesServerCredentials(provider, {
+                apiKey,
+                baseUrl,
+                awsAccessKeyId,
+                awsSecretAccessKey,
+                vertexApiKey,
+            })
+        ) {
+            return NextResponse.json(
+                { valid: false, error: "API key is required" },
+                { status: 400 },
+            )
+        }
+
+        // On the deployment's own endpoints a Test runs a model as a chat
+        // does, so with the quota on it counts as a chat request (an
+        // admin's Test of the server's URL does not)
+        const userId = getUserIdFromRequest(req)
+        if (
+            isQuotaEnabled() &&
+            !serverUrl &&
+            userId !== "anonymous" &&
+            (await usesServerEndpoint(
+                provider,
+                normalizeBaseUrl(body.baseUrl ?? ""),
+                apiKey,
+            ))
+        ) {
+            const quotaCheck = await checkAndIncrementRequest(userId, {
+                requests: Number(process.env.DAILY_REQUEST_LIMIT) || 10,
+                tokens: Number(process.env.DAILY_TOKEN_LIMIT) || 200000,
+                tpm: Number(process.env.TPM_LIMIT) || 20000,
+            })
+            if (!quotaCheck.allowed) {
+                return NextResponse.json(
+                    { valid: false, error: quotaCheck.error },
+                    { status: 429 },
+                )
+            }
+        }
+
+        // The same model the chat would use. A client base URL makes it
+        // refuse redirects to internal hosts.
+        const { model } = getAIModel({
+            provider,
+            modelId,
+            apiKey,
+            baseUrl,
+            trustedBaseUrl: serverUrl,
+            awsAccessKeyId,
+            awsSecretAccessKey,
+            awsRegion,
+            // Temporary AWS credentials need it, as in the chat
+            awsSessionToken,
+            vertexApiKey,
+            // EdgeOne checks the Pages cookies and the access code
+            ...(provider === "edgeone" && {
+                headers: {
+                    cookie: req.headers.get("cookie") || "",
+                    "x-access-code": req.headers.get("x-access-code") || "",
+                },
+            }),
+        })
+
+        // Streaming, like the chat (some models only stream). Stop at the
+        // first tool call; a reasoning model that runs out of tokens first
+        // proves the connection but not tool support.
+        const startTime = Date.now()
+        const result = streamText({
+            model,
+            prompt: "Call the ping tool.",
+            tools: { ping: PING_TOOL },
+            maxOutputTokens: 1024,
+            maxRetries: 0,
+            abortSignal: AbortSignal.timeout(TEST_TIMEOUT_MS),
+        })
+        let calledTool = false
+        let finishReason: string | undefined
+        for await (const part of result.fullStream) {
+            if (part.type === "error") throw part.error
+            // The timeout ends the stream with an abort part, not an error
+            if (part.type === "abort") {
+                const timeout = new Error(
+                    `The model did not answer within ${TEST_TIMEOUT_MS / 1000} s.`,
+                )
+                timeout.name = "TimeoutError"
+                throw timeout
+            }
+            if (part.type === "tool-call") {
+                calledTool = true
+                break
+            }
+            if (part.type === "finish") finishReason = part.finishReason
+        }
+        const responseTime = Date.now() - startTime
+
+        return NextResponse.json({
+            valid: true,
+            responseTime,
+            ...(!calledTool &&
+                finishReason !== "length" && { warning: NO_TOOL_CALL_WARNING }),
+        })
+    } catch (error) {
+        console.error("[validate-model] Error:", error)
+
+        const { code, message } = classifyLLMError(error)
+        return NextResponse.json(
+            { valid: false, code, error: message },
+            { status: 200 }, // Return 200 so client can read error message
+        )
+    }
+}

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

@@ -0,0 +1,12 @@
+import { checkAccessCode } from "@/lib/access-code"
+
+export async function POST(req: Request) {
+    if (checkAccessCode(req)) {
+        return Response.json(
+            { valid: false, message: "Invalid or missing access code" },
+            { status: 401 },
+        )
+    }
+
+    return Response.json({ valid: true, message: "Access code is valid" })
+}

app/globals.css

@@ -1,123 +1,320 @@
 @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-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);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --font-sans: var(--font-latin), var(--font-cjk), system-ui, sans-serif;
+    --font-mono: var(--font-mono);
+    --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);
+
+    /* App-specific tokens */
+    --color-canvas: var(--canvas);
+    --color-faint: var(--faint);
+    --color-marker: var(--marker);
+    --color-marker-soft: var(--marker-soft);
+    --color-marker-ink: var(--marker-ink);
+    --color-surface-0: var(--surface-0);
+    --color-surface-1: var(--surface-1);
+    --color-surface-2: var(--surface-2);
+    --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);
 }
 
+/*
+ * Light: a quiet light table. Ink for primary actions, a highlighter
+ * yellow reserved for what the AI just changed.
+ */
 :root {
-  --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);
+    --radius: 0.75rem;
+
+    --canvas: #f4f5f7;
+    --background: #f4f5f7;
+    --foreground: #14181d;
+
+    --card: #ffffff;
+    --card-foreground: #14181d;
+    --popover: #ffffff;
+    --popover-foreground: #14181d;
+
+    --primary: #14181d;
+    --primary-foreground: #ffffff;
+    --secondary: #f1f3f5;
+    --secondary-foreground: #14181d;
+    --muted: #f1f3f5;
+    --muted-foreground: #5d6672;
+    --faint: #687180;
+    --accent: #eef0f3;
+    --accent-foreground: #14181d;
+    --destructive: #c9372c;
+
+    --border: #e4e7eb;
+    --input: #dfe3e8;
+    --ring: #14181d;
+
+    --marker: #ffd84d;
+    --marker-soft: #fff4bf;
+    --marker-ink: #6b5200;
+
+    --surface-0: #ffffff;
+    --surface-1: #f7f8fa;
+    --surface-2: #f1f3f5;
+    --border-subtle: #eceef1;
+    --border-default: #e4e7eb;
+    --interactive-hover: #f1f3f5;
+    --interactive-active: #e7eaee;
+    --success: #1f9e5a;
+    --success-muted: #e3f5ea;
+
+    --shadow-float:
+        0 1px 2px rgb(20 24 29 / 0.05), 0 10px 30px -8px rgb(20 24 29 / 0.14);
+    --shadow-pop:
+        0 1px 2px rgb(20 24 29 / 0.06), 0 18px 48px -12px rgb(20 24 29 / 0.22);
+
+    --duration-normal: 200ms;
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
+/*
+ * Han characters are drawn differently in Simplified Chinese, Traditional
+ * Chinese and Japanese: each language lists its own system fonts first.
+ */
+:root {
+    --font-cjk:
+        "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
+        "Microsoft YaHei", "Hiragino Sans", "Meiryo";
+}
+:root:lang(ja) {
+    --font-cjk:
+        "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP",
+        "Yu Gothic UI", "Meiryo", "PingFang SC";
+}
+:root:lang(zh-Hant) {
+    --font-cjk:
+        "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei",
+        "Hiragino Sans", "PingFang SC";
+}
+
+/*
+ * Dark: a blueprint-blue table. Surfaces get lighter the higher they float.
+ * The diagram stays on a white sheet so it looks the way it will export;
+ * primary actions are paper-white, and amber only marks AI changes.
+ */
 .dark {
-  --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);
+    --canvas: #0f2440;
+    --background: #0c1a29;
+    --foreground: #e9f0f6;
+
+    --card: #16304f;
+    --card-foreground: #e9f0f6;
+    --popover: #1b3a5d;
+    --popover-foreground: #e9f0f6;
+
+    --primary: #e9f0f6;
+    --primary-foreground: #0c1a29;
+    --secondary: #1d3b5e;
+    --secondary-foreground: #e9f0f6;
+    --muted: #1d3b5e;
+    --muted-foreground: #a8bbce;
+    --faint: #8aa0b6;
+    --accent: #21426a;
+    --accent-foreground: #e9f0f6;
+    --destructive: #f07167;
+
+    --border: rgb(170 200 230 / 0.16);
+    --input: rgb(170 200 230 / 0.24);
+    --ring: #e9f0f6;
+
+    --marker: #f5b13d;
+    --marker-soft: rgb(245 177 61 / 0.16);
+    --marker-ink: #f7c46b;
+
+    --surface-0: #16304f;
+    --surface-1: #132b48;
+    --surface-2: #1d3b5e;
+    --border-subtle: rgb(170 200 230 / 0.12);
+    --border-default: rgb(170 200 230 / 0.2);
+    --interactive-hover: #21426a;
+    --interactive-active: #264a75;
+    --success: #4fd18b;
+    --success-muted: rgb(79 209 139 / 0.14);
+
+    --shadow-float:
+        0 0 0 1px rgb(170 200 230 / 0.1), 0 14px 34px -12px rgb(0 0 0 / 0.55);
+    --shadow-pop:
+        0 0 0 1px rgb(170 200 230 / 0.14), 0 22px 56px -14px rgb(0 0 0 / 0.65);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+    * {
+        @apply border-border outline-ring/50;
+    }
+    html {
+        color-scheme: light;
+    }
+    html.dark {
+        color-scheme: dark;
+    }
+    body {
+        @apply bg-background text-foreground font-sans;
+        font-size: 14px;
+        line-height: 1.55;
+        -webkit-font-smoothing: antialiased;
+    }
+    ::selection {
+        background: var(--marker-soft);
+        color: inherit;
+    }
+}
+
+/* Fix for Radix ScrollArea viewport horizontal overflow */
+[data-slot="scroll-area-viewport"] > div {
+    display: block !important;
+    width: 100% !important;
+}
+
+@layer utilities {
+    .scrollbar-thin {
+        scrollbar-width: thin;
+        scrollbar-color: color-mix(in oklab, var(--foreground) 18%, transparent)
+            transparent;
+    }
+    .scrollbar-thin::-webkit-scrollbar {
+        width: 6px;
+    }
+    .scrollbar-thin::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: color-mix(
+            in oklab,
+            var(--foreground) 18%,
+            transparent
+        );
+        border-radius: 3px;
+    }
+    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: color-mix(
+            in oklab,
+            var(--foreground) 30%,
+            transparent
+        );
+    }
+
+    /* Diagram pictures always render as on paper, also in dark mode
+       (draw.io SVGs use light-dark() colors) */
+    .sheet-light {
+        color-scheme: light;
+    }
+    .shadow-float {
+        box-shadow: var(--shadow-float);
+    }
+    .shadow-pop {
+        box-shadow: var(--shadow-pop);
+    }
+    /* Older names kept for components that still use them */
+    .shadow-soft {
+        box-shadow: var(--shadow-float);
+    }
+    .shadow-dialog {
+        box-shadow: var(--shadow-pop);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes messageIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* The first prompt moves from the middle of the canvas into the panel */
+@keyframes panelIn {
+    from {
+        opacity: 0;
+        transform: translateX(12px) scale(0.985);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+
+@keyframes check-pop {
+    0% {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    50% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.25s var(--ease-out) forwards;
+}
+.animate-message-in {
+    animation: messageIn 0.22s var(--ease-out) forwards;
+}
+.animate-panel-in {
+    animation: panelIn 0.32s var(--ease-out) both;
+}
+.animate-check-pop {
+    animation: check-pop 0.25s var(--ease-spring) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .animate-fade-in,
+    .animate-message-in,
+    .animate-panel-in,
+    .animate-check-pop {
+        animation: none;
+    }
 }

app/layout.tsx

@@ -1,101 +0,0 @@
-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

@@ -0,0 +1,28 @@
+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

@@ -1,76 +0,0 @@
-"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 { MetadataRoute } from 'next'
+import type { 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 { MetadataRoute } from 'next'
+import type { 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

@@ -0,0 +1,89 @@
+{
+    "$schema": "https://biomejs.dev/schemas/2.4.14/schema.json",
+    "vcs": {
+        "enabled": true,
+        "clientKind": "git",
+        "useIgnoreFile": true
+    },
+    "files": {
+        "ignoreUnknown": false,
+        "includes": [
+            "**",
+            "!public",
+            "!packages/mcp-server/src/preview",
+            "!lib/model-catalog.json"
+        ]
+    },
+    "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

@@ -0,0 +1,238 @@
+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

@@ -0,0 +1,186 @@
+"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

@@ -0,0 +1,64 @@
+"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 React from "react";
-import { Button, buttonVariants } from "@/components/ui/button";
+import type { VariantProps } from "class-variance-authority"
+import type React from "react"
+import { Button, type buttonVariants } from "@/components/ui/button"
 import {
     Tooltip,
     TooltipContent,
     TooltipProvider,
     TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { type VariantProps } from "class-variance-authority";
+} from "@/components/ui/tooltip"
 
 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,8 +27,10 @@ export function ButtonWithTooltip({
                 <TooltipTrigger asChild>
                     <Button {...buttonProps}>{children}</Button>
                 </TooltipTrigger>
-                <TooltipContent>{tooltipContent}</TooltipContent>
+                <TooltipContent className="max-w-xs text-wrap">
+                    {tooltipContent}
+                </TooltipContent>
             </Tooltip>
         </TooltipProvider>
-    );
+    )
 }

components/canvas/canvas-stage.tsx

@@ -0,0 +1,200 @@
+import { useParams } from "next/navigation"
+import { useEffect, useRef, useState } from "react"
+import { CanvasToolbar } from "@/components/canvas/canvas-toolbar"
+import { DrawioFrame } from "@/components/canvas/drawio-frame"
+import { PageTabs } from "@/components/canvas/page-tabs"
+import { SelectionAsk } from "@/components/canvas/selection-ask"
+import { useChatEngine } from "@/components/chat/chat-engine"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getDrawioCss, getDrawioSrc } from "@/lib/drawio/drawio-config"
+import { keepCenter, refitIfRecent } from "@/lib/drawio/editor-bridge"
+import { i18n, type Locale } from "@/lib/i18n/config"
+import { STORAGE_KEYS } from "@/lib/storage"
+import { cn } from "@/lib/utils"
+import { useCanvasStore } from "@/stores/canvas-store"
+import { useSettingsStore } from "@/stores/settings-store"
+
+/**
+ * The draw.io canvas with the app's own toolbar, page tabs and the
+ * "ask AI" button laid over it. With an external (cross-origin) draw.io the
+ * overlays are hidden and draw.io's own toolbar is used.
+ */
+export function CanvasStage({
+    className,
+    style,
+    compact = false,
+    hideOverlays = false,
+    onOpenFile,
+}: {
+    className?: string
+    style?: React.CSSProperties
+    compact?: boolean
+    /** Opens the file picker for a .drawio file */
+    onOpenFile: () => void
+    /** Hide toolbar and buttons (e.g. while the start screen covers the canvas) */
+    hideOverlays?: boolean
+}) {
+    const dict = useDictionary()
+    const params = useParams<{ lang: string }>()
+    const lang = (
+        i18n.locales.includes(params.lang as Locale)
+            ? params.lang
+            : i18n.defaultLocale
+    ) as Locale
+    const {
+        drawioRef,
+        handleDiagramAutoSave,
+        handleDiagramExport,
+        onDrawioLoad,
+        resetDrawioReady,
+        isDrawioReady,
+    } = useDiagram()
+    const engine = useChatEngine()
+    const isDark = useSettingsStore((s) => s.isDark)
+    const hasEditor = useCanvasStore((s) => s.hasEditor)
+    // The model sees the first page only, so asking about shapes elsewhere
+    // would change the wrong page
+    const onFirstPage = useCanvasStore(
+        (s) => s.pages.length === 0 || s.pages[0]?.id === s.currentPageId,
+    )
+    // Canvas width when the chat panel starts sliding in or out
+    const slideStartWidthRef = useRef(0)
+
+    const [src, setSrc] = useState<string | null>(null)
+    // null until draw.io tells us whether we can drive it directly
+    const [editorAccess, setEditorAccess] = useState<boolean | null>(null)
+    // Bumped to reload draw.io when its CSS can only change with a reload
+    const [reloadKey, setReloadKey] = useState(0)
+    const stageRef = useRef<HTMLDivElement>(null)
+    const [size, setSize] = useState({ width: 0, height: 0 })
+
+    useEffect(() => {
+        // The page is about to switch to the language picked last time
+        // (useSavedLocale): load draw.io once, in that language
+        const saved = localStorage.getItem(STORAGE_KEYS.locale)
+        if (saved && saved !== lang && i18n.locales.includes(saved as Locale)) {
+            return
+        }
+        const isElectron = !!(window as { electronAPI?: unknown }).electronAPI
+        setSrc(getDrawioSrc({ lang, isElectron }))
+    }, [lang])
+
+    // A new iframe starts over: draw.io reports load and access again
+    useEffect(() => {
+        resetDrawioReady()
+        setEditorAccess(null)
+    }, [src, reloadKey])
+
+    // Cross-origin draw.io only takes CSS when it starts, so reload it when
+    // the theme changes. Same-origin updates the CSS in place.
+    const lastDarkRef = useRef(isDark)
+    useEffect(() => {
+        if (lastDarkRef.current === isDark) return
+        lastDarkRef.current = isDark
+        if (editorAccess === false) setReloadKey((key) => key + 1)
+    }, [isDark, editorAccess])
+
+    useEffect(() => {
+        const stage = stageRef.current
+        if (!stage) return
+        // React passes no transitionstart
+        const onSlideStart = (event: TransitionEvent) => {
+            if (event.target !== stage || event.propertyName !== "right") return
+            slideStartWidthRef.current = stage.clientWidth
+        }
+        stage.addEventListener("transitionstart", onSlideStart)
+        const observer = new ResizeObserver(([entry]) => {
+            setSize({
+                width: entry.contentRect.width,
+                height: entry.contentRect.height,
+            })
+            refitIfRecent()
+        })
+        observer.observe(stage)
+        return () => {
+            observer.disconnect()
+            stage.removeEventListener("transitionstart", onSlideStart)
+        }
+    }, [])
+
+    const showOverlays = hasEditor && isDrawioReady && !hideOverlays
+    // The full toolbar is about 590 px wide; a narrower canvas (small window
+    // with the chat panel open) gets the short one
+    const compactToolbar = compact || (size.width > 0 && size.width < 640)
+
+    return (
+        <div
+            ref={stageRef}
+            className={cn("absolute overflow-hidden bg-canvas", className)}
+            style={style}
+            data-testid="canvas-stage"
+            // The chat panel slides in or out (the canvas's right edge moves):
+            // once the canvas has its final size, fit a diagram just drawn,
+            // or keep the view's middle
+            onTransitionEnd={(event) => {
+                if (event.target !== event.currentTarget) return
+                if (event.propertyName !== "right") return
+                const stage = event.currentTarget
+                // Let draw.io take the new size first
+                setTimeout(() => {
+                    if (refitIfRecent(4000)) return
+                    keepCenter(slideStartWidthRef.current, stage.clientWidth)
+                }, 60)
+            }}
+        >
+            {src && (
+                <DrawioFrame
+                    key={`${src}#${reloadKey}`}
+                    ref={drawioRef}
+                    src={src}
+                    configCss={getDrawioCss({
+                        dark: isDark,
+                        customChrome: false,
+                    })}
+                    editorCss={getDrawioCss({
+                        dark: isDark,
+                        customChrome: true,
+                    })}
+                    onLoad={onDrawioLoad}
+                    onAutoSave={handleDiagramAutoSave}
+                    onExport={handleDiagramExport}
+                    onEditorAccess={setEditorAccess}
+                />
+            )}
+
+            {/* Covers the iframe until draw.io has loaded and been styled */}
+            {(!isDrawioReady || editorAccess === null) && (
+                <div
+                    className="absolute inset-0 flex items-center justify-center bg-canvas"
+                    data-testid="canvas-loading"
+                >
+                    <div className="flex items-center gap-2.5 text-[13px] text-muted-foreground">
+                        <span className="size-3.5 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-muted-foreground" />
+                        {dict.workspace.canvasLoading}
+                    </div>
+                </div>
+            )}
+
+            {showOverlays && (
+                <>
+                    <div className="pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center px-3">
+                        <CanvasToolbar
+                            compact={compactToolbar}
+                            onOpenFile={onOpenFile}
+                        />
+                    </div>
+                    {/* Full width, so the tabs' max width is the canvas's */}
+                    <div className="pointer-events-none absolute inset-x-3 bottom-3 z-10 flex">
+                        <PageTabs />
+                    </div>
+                    <SelectionAsk
+                        width={size.width}
+                        height={size.height}
+                        hidden={engine.isBusy || !onFirstPage}
+                    />
+                </>
+            )}
+        </div>
+    )
+}

components/canvas/canvas-toolbar.tsx

@@ -0,0 +1,405 @@
+import {
+    Check,
+    Download,
+    Ellipsis,
+    Maximize2,
+    Minus,
+    MousePointer2,
+    Paintbrush,
+    PenLine,
+    Plus,
+    Redo2,
+    Shapes,
+    Spline,
+    Type,
+    Undo2,
+} from "lucide-react"
+import { useMemo, useState } from "react"
+import { useChatEngine } from "@/components/chat/chat-engine"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { IconButton, ToolbarDivider } from "@/components/workspace/icon-button"
+import { useDictionary } from "@/hooks/use-dictionary"
+import {
+    fitDiagram,
+    focusCanvas,
+    hasAction,
+    keepFocusInCanvas,
+    runAction,
+    stopFreehand,
+    toggleShapesPanel,
+    viewToggles,
+} from "@/lib/drawio/editor-bridge"
+import { isMac, modKey } from "@/lib/platform"
+import { cn } from "@/lib/utils"
+import { useCanvasStore } from "@/stores/canvas-store"
+import { useUiStore } from "@/stores/ui-store"
+
+interface MenuItem {
+    action: string
+    label: string
+    shortcut?: string
+}
+
+function MenuButton({
+    children,
+    onClick,
+    shortcut,
+    checked,
+    disabled,
+}: {
+    children: React.ReactNode
+    onClick: () => void
+    shortcut?: string
+    /** On/off items: a check mark when on, and room for it when off */
+    checked?: boolean
+    disabled?: boolean
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            {...(checked !== undefined && {
+                role: "menuitemcheckbox",
+                "aria-checked": checked,
+            })}
+            className="flex w-full items-center justify-between gap-6 rounded-md px-2.5 py-1.5 text-left text-[13px] text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40"
+        >
+            <span className="flex items-center gap-2">
+                {checked !== undefined && (
+                    <Check
+                        className={cn(
+                            "size-3.5 shrink-0",
+                            !checked && "invisible",
+                        )}
+                    />
+                )}
+                {children}
+            </span>
+            {shortcut && (
+                <span className="text-xs text-muted-foreground">
+                    {shortcut}
+                </span>
+            )}
+        </button>
+    )
+}
+
+/**
+ * The canvas toolbar. Every button calls an existing draw.io action; a
+ * button whose action is missing in this draw.io build is not shown.
+ */
+export function CanvasToolbar({
+    compact = false,
+    onOpenFile,
+}: {
+    compact?: boolean
+    onOpenFile: () => void
+}) {
+    const dict = useDictionary()
+    const t = dict.workspace
+    const canUndo = useCanvasStore((s) => s.canUndo)
+    const canRedo = useCanvasStore((s) => s.canRedo)
+    const zoom = useCanvasStore((s) => s.zoom)
+    const isFreehand = useCanvasStore((s) => s.isFreehand)
+    const isFormatOpen = useCanvasStore((s) => s.isFormatOpen)
+    const isShapesOpen = useCanvasStore((s) => s.isShapesOpen)
+    const setSaveDialogOpen = useUiStore((s) => s.setSaveDialogOpen)
+    const engine = useChatEngine()
+    const [moreOpen, setMoreOpen] = useState(false)
+    const [zoomOpen, setZoomOpen] = useState(false)
+
+    // Checked once per mount; hasAction warns about missing actions
+    const available = useMemo(() => {
+        const names = [
+            "undo",
+            "redo",
+            "toggleShapes",
+            "insertText",
+            "insertEdge",
+            "insertFreehand",
+            "zoomIn",
+            "zoomOut",
+            "fitWindow",
+            "resetView",
+            "format",
+            "findReplace",
+            "editDiagram",
+            "layers",
+            "outline",
+            "grid",
+            "pageView",
+            "insertImage",
+            "insertLink",
+            "selectAll",
+            "print",
+        ]
+        return new Set(names.filter((name) => hasAction(name)))
+    }, [])
+
+    // Read when the menu opens (draw.io has no event for these)
+    const toggles = moreOpen ? viewToggles() : { grid: false, pageView: false }
+    const checkedOf = (action: string) =>
+        action === "grid"
+            ? toggles.grid
+            : action === "pageView"
+              ? toggles.pageView
+              : undefined
+    const moreItems: MenuItem[] = [
+        { action: "findReplace", label: t.findReplace, shortcut: `${modKey}F` },
+        { action: "layers", label: t.layers, shortcut: `${modKey}⇧L` },
+        { action: "outline", label: t.outline, shortcut: `${modKey}⇧O` },
+        { action: "grid", label: t.toggleGrid, shortcut: `${modKey}⇧G` },
+        { action: "pageView", label: t.togglePageView },
+        { action: "insertImage", label: t.insertImage },
+        { action: "insertLink", label: t.insertLink },
+        { action: "selectAll", label: t.selectAll, shortcut: `${modKey}A` },
+        { action: "editDiagram", label: t.editDiagram },
+        { action: "print", label: t.print, shortcut: `${modKey}P` },
+    ].filter((item) => available.has(item.action))
+
+    const tool = (action: string) => () => {
+        if (isFreehand && action !== "insertFreehand") stopFreehand()
+        runAction(action)
+    }
+
+    return (
+        <div
+            role="toolbar"
+            aria-label={t.toolbar}
+            className={cn(
+                "pointer-events-auto flex items-center gap-0.5 rounded-xl bg-card p-1 shadow-float",
+                compact && "max-w-full overflow-x-auto",
+            )}
+        >
+            {available.has("undo") && (
+                <IconButton
+                    label={t.undo}
+                    shortcut={`${modKey}Z`}
+                    onClick={tool("undo")}
+                    disabled={!canUndo}
+                    data-testid="toolbar-undo"
+                >
+                    <Undo2 />
+                </IconButton>
+            )}
+            {available.has("redo") && (
+                <IconButton
+                    label={t.redo}
+                    shortcut={isMac ? "⌘⇧Z" : "Ctrl+Y"}
+                    onClick={tool("redo")}
+                    disabled={!canRedo}
+                >
+                    <Redo2 />
+                </IconButton>
+            )}
+            <ToolbarDivider />
+            {!compact && (
+                <IconButton
+                    label={t.select}
+                    active={!isFreehand}
+                    onClick={() => {
+                        stopFreehand()
+                        focusCanvas()
+                    }}
+                >
+                    <MousePointer2 />
+                </IconButton>
+            )}
+            {available.has("toggleShapes") && (
+                <IconButton
+                    label={t.shapes}
+                    shortcut={`${modKey}⇧K`}
+                    active={isShapesOpen}
+                    onClick={() => {
+                        if (isFreehand) stopFreehand()
+                        toggleShapesPanel()
+                        focusCanvas()
+                    }}
+                    data-testid="toolbar-shapes"
+                >
+                    <Shapes />
+                </IconButton>
+            )}
+            {!compact && available.has("insertText") && (
+                <IconButton label={t.text} onClick={tool("insertText")}>
+                    <Type />
+                </IconButton>
+            )}
+            {!compact && available.has("insertEdge") && (
+                <IconButton label={t.connector} onClick={tool("insertEdge")}>
+                    <Spline />
+                </IconButton>
+            )}
+            {!compact && available.has("insertFreehand") && (
+                <IconButton
+                    label={t.freehand}
+                    shortcut="X"
+                    active={isFreehand}
+                    onClick={tool("insertFreehand")}
+                >
+                    <PenLine />
+                </IconButton>
+            )}
+            <ToolbarDivider />
+            {!compact && available.has("zoomOut") && (
+                <IconButton
+                    label={t.zoomOut}
+                    shortcut={`${modKey}−`}
+                    onClick={tool("zoomOut")}
+                >
+                    <Minus />
+                </IconButton>
+            )}
+            <Popover open={zoomOpen} onOpenChange={setZoomOpen}>
+                <PopoverTrigger asChild>
+                    <button
+                        type="button"
+                        aria-label={t.zoomMenu}
+                        className="h-8 min-w-12 rounded-lg px-1.5 text-xs tabular-nums text-muted-foreground hover:bg-accent hover:text-foreground"
+                    >
+                        {zoom}%
+                    </button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className="w-44 p-1"
+                    align="center"
+                    onCloseAutoFocus={keepFocusInCanvas}
+                >
+                    {available.has("fitWindow") && (
+                        <MenuButton
+                            shortcut={`${modKey}⇧H`}
+                            onClick={() => {
+                                runAction("fitWindow")
+                                setZoomOpen(false)
+                            }}
+                        >
+                            {t.fitWindow}
+                        </MenuButton>
+                    )}
+                    {available.has("resetView") && (
+                        <MenuButton
+                            shortcut="Home"
+                            onClick={() => {
+                                runAction("resetView")
+                                setZoomOpen(false)
+                            }}
+                        >
+                            {t.zoomReset}
+                        </MenuButton>
+                    )}
+                    {compact && available.has("zoomIn") && (
+                        <MenuButton onClick={() => runAction("zoomIn")}>
+                            {t.zoomIn}
+                        </MenuButton>
+                    )}
+                    {compact && available.has("zoomOut") && (
+                        <MenuButton onClick={() => runAction("zoomOut")}>
+                            {t.zoomOut}
+                        </MenuButton>
+                    )}
+                </PopoverContent>
+            </Popover>
+            {!compact && available.has("zoomIn") && (
+                <IconButton
+                    label={t.zoomIn}
+                    shortcut={`${modKey}+`}
+                    onClick={tool("zoomIn")}
+                >
+                    <Plus />
+                </IconButton>
+            )}
+            {!compact && (
+                <IconButton
+                    label={t.fitWindow}
+                    onClick={() => {
+                        fitDiagram()
+                        focusCanvas()
+                    }}
+                >
+                    <Maximize2 />
+                </IconButton>
+            )}
+            <ToolbarDivider />
+            {available.has("format") && (
+                <IconButton
+                    label={t.style}
+                    shortcut={`${modKey}⇧P`}
+                    active={isFormatOpen}
+                    onClick={tool("format")}
+                >
+                    <Paintbrush />
+                </IconButton>
+            )}
+            <Popover open={moreOpen} onOpenChange={setMoreOpen}>
+                <PopoverTrigger asChild>
+                    <IconButton label={t.more} data-testid="toolbar-more">
+                        <Ellipsis />
+                    </IconButton>
+                </PopoverTrigger>
+                <PopoverContent
+                    className="w-60 p-1"
+                    align="end"
+                    onCloseAutoFocus={keepFocusInCanvas}
+                >
+                    <MenuButton
+                        disabled={engine.isBusy}
+                        onClick={() => {
+                            setMoreOpen(false)
+                            onOpenFile()
+                        }}
+                    >
+                        {t.openFile}
+                    </MenuButton>
+                    {compact && available.has("insertText") && (
+                        <MenuButton
+                            onClick={() => {
+                                setMoreOpen(false)
+                                runAction("insertText")
+                            }}
+                        >
+                            {t.text}
+                        </MenuButton>
+                    )}
+                    {compact && available.has("insertFreehand") && (
+                        <MenuButton
+                            onClick={() => {
+                                setMoreOpen(false)
+                                runAction("insertFreehand")
+                            }}
+                        >
+                            {t.freehand}
+                        </MenuButton>
+                    )}
+                    <div className="my-1 h-px bg-border" />
+                    {moreItems.map((item) => (
+                        <MenuButton
+                            key={item.action}
+                            checked={checkedOf(item.action)}
+                            shortcut={compact ? undefined : item.shortcut}
+                            onClick={() => {
+                                setMoreOpen(false)
+                                runAction(item.action)
+                            }}
+                        >
+                            {item.label}
+                        </MenuButton>
+                    ))}
+                </PopoverContent>
+            </Popover>
+            <button
+                type="button"
+                onClick={() => setSaveDialogOpen(true)}
+                className="ml-1 inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg bg-primary px-3 text-[13px] font-medium text-primary-foreground transition-opacity hover:opacity-90"
+                data-testid="toolbar-export"
+            >
+                <Download className="size-4" />
+                {!compact && t.export}
+            </button>
+        </div>
+    )
+}

components/canvas/drawio-frame.tsx

@@ -0,0 +1,233 @@
+"use client"
+
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import {
+    DRAWIO_CONFIG,
+    EMPTY_DRAWIO_DOCUMENT,
+} from "@/lib/drawio/drawio-config"
+import {
+    attachEditor,
+    detachEditor,
+    watchForEditorUi,
+} from "@/lib/drawio/editor-bridge"
+
+export interface DrawioExportEvent {
+    event: "export"
+    format: string
+    data: string
+    xml: string
+    message: { message?: string; [key: string]: unknown }
+}
+
+export interface DrawioFrameHandle {
+    load: (data: { xml: string }) => void
+    exportDiagram: (data: {
+        format: string
+        message?: string
+        [key: string]: unknown
+    }) => void
+}
+
+interface DrawioFrameProps {
+    src: string
+    /** CSS sent with the configure message (works cross-origin too) */
+    configCss: string
+    /** CSS injected once the editor is reachable directly (same origin) */
+    editorCss: string
+    onLoad?: () => void
+    onAutoSave?: (data: { xml?: string }) => void
+    onExport?: (data: DrawioExportEvent) => void
+    /** Called once we know whether the editor can be driven directly */
+    onEditorAccess?: (hasEditor: boolean) => void
+}
+
+const STYLE_ID = "next-ai-drawio-theme"
+
+/**
+ * The draw.io editor in an iframe, speaking draw.io's postMessage embed
+ * protocol (same messages react-drawio used). When the iframe is same-origin
+ * it also hands the editor object to editor-bridge for direct control.
+ */
+export const DrawioFrame = forwardRef<DrawioFrameHandle, DrawioFrameProps>(
+    function DrawioFrame(
+        {
+            src,
+            configCss,
+            editorCss,
+            onLoad,
+            onAutoSave,
+            onExport,
+            onEditorAccess,
+        },
+        ref,
+    ) {
+        const iframeRef = useRef<HTMLIFrameElement>(null)
+        const editorUiRef = useRef<any>(null)
+        const attachedRef = useRef(false)
+        const configCssRef = useRef(configCss)
+        configCssRef.current = configCss
+        const editorCssRef = useRef(editorCss)
+        editorCssRef.current = editorCss
+        // Handlers change on every render; the message listener reads refs
+        const handlersRef = useRef({
+            onLoad,
+            onAutoSave,
+            onExport,
+            onEditorAccess,
+        })
+        handlersRef.current = { onLoad, onAutoSave, onExport, onEditorAccess }
+
+        // draw.io's origin: messages go only there, and only its messages
+        // count (the frame could be navigated to another site)
+        // (read on use: there is no window while the page renders on the server)
+        const drawioOrigin = () => new URL(src, window.location.href).origin
+
+        const send = (action: string, data: Record<string, unknown> = {}) => {
+            iframeRef.current?.contentWindow?.postMessage(
+                JSON.stringify({ action, ...data }),
+                drawioOrigin(),
+            )
+        }
+
+        useImperativeHandle(ref, () => ({
+            load: ({ xml }) => send("load", { xml, autosave: 1 }),
+            exportDiagram: (data) => send("export", data),
+        }))
+
+        // Same-origin only: keep the theme CSS current without a reload
+        const applyThemeCss = () => {
+            if (!attachedRef.current) return
+            try {
+                const doc = iframeRef.current?.contentDocument
+                if (!doc?.head) return
+                let style = doc.getElementById(STYLE_ID)
+                if (!style) {
+                    style = doc.createElement("style")
+                    style.id = STYLE_ID
+                    doc.head.appendChild(style)
+                }
+                style.textContent = editorCssRef.current
+            } catch {
+                // Cross-origin: the configure message already applied it
+            }
+        }
+
+        useEffect(() => {
+            applyThemeCss()
+        }, [editorCss])
+
+        useEffect(() => {
+            const iframe = iframeRef.current
+            if (!iframe) return
+            editorUiRef.current = null
+            attachedRef.current = false
+            let reported: boolean | null = null
+            const report = (value: boolean) => {
+                if (reported === value) return
+                reported = value
+                handlersRef.current.onEditorAccess?.(value)
+            }
+
+            // Watch for draw.io's scripts so the editor object can be caught
+            // as it starts. Stops once hooked, or when the frame turns out to
+            // be cross-origin.
+            const startedAt = Date.now()
+            const poll = setInterval(() => {
+                const frameWindow = iframe.contentWindow as any
+                if (!frameWindow) return
+                let ready = false
+                try {
+                    ready =
+                        frameWindow.location.href !== "about:blank" &&
+                        !!frameWindow.EditorUi
+                } catch {
+                    clearInterval(poll)
+                    report(false)
+                    return
+                }
+                if (ready) {
+                    clearInterval(poll)
+                    const ok = watchForEditorUi(frameWindow, (ui) => {
+                        editorUiRef.current = ui
+                    })
+                    if (!ok) report(false)
+                } else if (Date.now() - startedAt > 60_000) {
+                    clearInterval(poll)
+                }
+            }, 5)
+
+            const handleMessage = (event: MessageEvent) => {
+                if (event.source !== iframe.contentWindow) return
+                if (event.origin !== drawioOrigin()) return
+                if (typeof event.data !== "string") return
+                let data: any
+                try {
+                    data = JSON.parse(event.data)
+                } catch {
+                    return
+                }
+                const handlers = handlersRef.current
+                switch (data.event) {
+                    case "init":
+                        send("load", {
+                            xml: EMPTY_DRAWIO_DOCUMENT,
+                            autosave: 1,
+                        })
+                        break
+                    case "configure":
+                        send("configure", {
+                            config: {
+                                ...DRAWIO_CONFIG,
+                                css: configCssRef.current,
+                            },
+                        })
+                        break
+                    case "load": {
+                        const tryAttach = () => {
+                            const ui = editorUiRef.current
+                            if (!ui || !iframe.contentWindow) return false
+                            attachEditor(ui, iframe.contentWindow, iframe)
+                            attachedRef.current = true
+                            applyThemeCss()
+                            report(true)
+                            return true
+                        }
+                        // The editor object is usually caught before the
+                        // first load; give it a moment, then fall back to
+                        // draw.io's own toolbar
+                        if (!tryAttach()) {
+                            setTimeout(() => {
+                                if (!tryAttach()) report(false)
+                            }, 800)
+                        }
+                        handlers.onLoad?.()
+                        break
+                    }
+                    case "autosave":
+                        handlers.onAutoSave?.(data)
+                        break
+                    case "export":
+                        handlers.onExport?.(data)
+                        break
+                }
+            }
+
+            window.addEventListener("message", handleMessage)
+            return () => {
+                clearInterval(poll)
+                window.removeEventListener("message", handleMessage)
+                detachEditor()
+            }
+        }, [src])
+
+        return (
+            <iframe
+                ref={iframeRef}
+                src={src}
+                title="draw.io"
+                allow="clipboard-read; clipboard-write"
+                className="block h-full w-full border-0"
+            />
+        )
+    },
+)

components/canvas/page-tabs.tsx

@@ -0,0 +1,117 @@
+import { ChevronDown, Plus } from "lucide-react"
+import { useState } from "react"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { IconButton } from "@/components/workspace/icon-button"
+import { useDictionary } from "@/hooks/use-dictionary"
+import {
+    addPage,
+    canManagePages,
+    duplicatePage,
+    keepFocusInCanvas,
+    removePage,
+    renamePage,
+    selectPage,
+} from "@/lib/drawio/editor-bridge"
+import { useCanvasStore } from "@/stores/canvas-store"
+
+/** Page switcher at the bottom of the canvas (replaces draw.io's page tabs) */
+export function PageTabs() {
+    const dict = useDictionary()
+    const t = dict.workspace
+    const pages = useCanvasStore((s) => s.pages)
+    const currentPageId = useCanvasStore((s) => s.currentPageId)
+    const [menuFor, setMenuFor] = useState<string | null>(null)
+
+    if (!canManagePages() || pages.length === 0) return null
+
+    return (
+        <div
+            className="pointer-events-auto flex max-w-[min(640px,100%)] items-center gap-0.5 overflow-x-auto rounded-xl bg-card p-1 shadow-float"
+            data-testid="page-tabs"
+        >
+            {pages.map((page) => {
+                const isCurrent = page.id === currentPageId
+                if (!isCurrent) {
+                    return (
+                        <button
+                            key={page.id}
+                            type="button"
+                            onClick={() => selectPage(page.id)}
+                            className="h-7 max-w-40 shrink-0 truncate rounded-lg px-2.5 text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground"
+                        >
+                            {page.name}
+                        </button>
+                    )
+                }
+                return (
+                    <Popover
+                        key={page.id}
+                        open={menuFor === page.id}
+                        onOpenChange={(open) =>
+                            setMenuFor(open ? page.id : null)
+                        }
+                    >
+                        <PopoverTrigger asChild>
+                            <button
+                                type="button"
+                                className="flex h-7 max-w-44 shrink-0 items-center gap-1 rounded-lg bg-accent px-2.5 text-[13px] font-medium text-foreground"
+                            >
+                                <span className="truncate">{page.name}</span>
+                                <ChevronDown className="size-3.5 text-muted-foreground" />
+                            </button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                            side="top"
+                            align="start"
+                            className="w-44 p-1"
+                            onCloseAutoFocus={keepFocusInCanvas}
+                        >
+                            {[
+                                {
+                                    label: t.renamePage,
+                                    run: () => renamePage(page.id),
+                                },
+                                {
+                                    label: t.duplicatePage,
+                                    run: () => duplicatePage(page.id),
+                                },
+                                ...(pages.length > 1
+                                    ? [
+                                          {
+                                              label: t.deletePage,
+                                              run: () => removePage(page.id),
+                                          },
+                                      ]
+                                    : []),
+                            ].map((item) => (
+                                <button
+                                    key={item.label}
+                                    type="button"
+                                    onClick={() => {
+                                        setMenuFor(null)
+                                        item.run()
+                                    }}
+                                    className="w-full rounded-md px-2.5 py-1.5 text-left text-[13px] hover:bg-accent"
+                                >
+                                    {item.label}
+                                </button>
+                            ))}
+                        </PopoverContent>
+                    </Popover>
+                )
+            })}
+            <IconButton
+                label={t.addPage}
+                size="sm"
+                tooltipSide="top"
+                onClick={addPage}
+            >
+                <Plus />
+            </IconButton>
+        </div>
+    )
+}

components/canvas/selection-ask.tsx

@@ -0,0 +1,68 @@
+import { Sparkles } from "lucide-react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { modKey } from "@/lib/platform"
+import { useCanvasStore } from "@/stores/canvas-store"
+import { useUiStore } from "@/stores/ui-store"
+
+const BUTTON_HEIGHT = 32
+const GAP = 10
+
+/**
+ * "Ask AI to change this" next to the selected shapes. Clicking it moves
+ * focus to the chat input, where the selection already shows as a chip.
+ */
+export function SelectionAsk({
+    width,
+    height,
+    hidden,
+}: {
+    /** Size of the canvas area, for keeping the button inside it */
+    width: number
+    height: number
+    hidden: boolean
+}) {
+    const dict = useDictionary()
+    const rect = useCanvasStore((s) => s.selectionRect)
+    const selection = useCanvasStore((s) => s.selection)
+    const isFreehand = useCanvasStore((s) => s.isFreehand)
+    const focusComposer = useUiStore((s) => s.focusComposer)
+
+    if (hidden || !rect || selection.length === 0 || isFreehand) return null
+    // Selection scrolled out of view
+    if (
+        rect.x + rect.width < 0 ||
+        rect.y + rect.height < 0 ||
+        rect.x > width ||
+        rect.y > height
+    ) {
+        return null
+    }
+
+    // Above the selection's top-right corner, kept inside the canvas
+    const approxWidth = 168
+    const left = Math.min(
+        Math.max(8, rect.x + rect.width - approxWidth / 2),
+        width - approxWidth - 8,
+    )
+    const above = rect.y - BUTTON_HEIGHT - GAP
+    const top =
+        above > 64
+            ? above
+            : Math.min(rect.y + rect.height + GAP, height - BUTTON_HEIGHT - 72)
+
+    return (
+        <button
+            type="button"
+            onClick={focusComposer}
+            className="pointer-events-auto absolute z-10 flex h-8 items-center gap-1.5 rounded-xl bg-card pr-2.5 pl-2 text-[13px] font-medium text-foreground shadow-pop transition-transform animate-fade-in hover:-translate-y-px"
+            style={{ left, top }}
+            data-testid="selection-ask"
+        >
+            <Sparkles className="size-4 text-marker-ink" />
+            {dict.workspace.askAi}
+            <kbd className="ml-1 font-sans text-[11px] text-muted-foreground">
+                {modKey}/
+            </kbd>
+        </button>
+    )
+}

components/chat-example-panel.tsx

@@ -1,82 +0,0 @@
-export default function ExamplePanel({
-    setInput,
-    setFiles,
-}: {
-    setInput: (input: string) => void;
-    setFiles: (files: File[]) => void;
-}) {
-    // New handler for the "Replicate this flowchart" button
-    const handleReplicateFlowchart = async () => {
-        setInput("Replicate this flowchart.");
-
-        try {
-            // 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("Error loading example image:", error);
-        }
-    };
-
-    // Handler for the "Replicate this in aws style" button
-    const handleReplicateArchitecture = async () => {
-        setInput("Replicate this in aws style");
-
-        try {
-            // 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",
-            });
-
-            // Set the file to the files state
-            setFiles([file]);
-        } catch (error) {
-            console.error("Error loading architecture image:", error);
-        }
-    };
-    return (
-        <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,280 +0,0 @@
-"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 {
-    Loader2,
-    Send,
-    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;
-    onClearChat: () => void;
-    files?: File[];
-    onFileChange?: (files: File[]) => void;
-    showHistory?: boolean;
-    onToggleHistory?: (show: boolean) => void;
-}
-
-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);
-
-    // Debug: Log status changes
-    const isDisabled = status === "streaming" || status === "submitted";
-    useEffect(() => {
-        console.log('[ChatInput] Status changed to:', status, '| Input disabled:', isDisabled);
-    }, [status, isDisabled]);
-
-    // 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`;
-        }
-    }, []);
-
-    useEffect(() => {
-        adjustTextareaHeight();
-    }, [input, adjustTextareaHeight]);
-
-    // 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();
-            }
-        }
-    };
-
-    // 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/")
-        );
-
-        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,
-                        }
-                    );
-                })
-            );
-
-            const validFiles = imageFiles.filter(
-                (file): file is File => file !== null
-            );
-            if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles]);
-            }
-        }
-    };
-
-    // 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}
-                    />
-
-                    <HistoryDialog
-                        showHistory={showHistory}
-                        onToggleHistory={onToggleHistory}
-                    />
-                </div>
-                <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}
-                    />
-                </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-message-display.tsx

@@ -1,217 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useRef, useEffect, useState, useCallback } from "react";
-import Image from "next/image";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import ExamplePanel from "./chat-example-panel";
-import { UIMessage } from "ai";
-import { convertToLegalXml, replaceNodes } from "@/lib/utils";
-
-import { useDiagram } from "@/contexts/diagram-context";
-
-interface ChatMessageDisplayProps {
-    messages: UIMessage[];
-    error?: Error | null;
-    setInput: (input: string) => void;
-    setFiles: (files: File[]) => void;
-}
-
-export function ChatMessageDisplay({
-    messages,
-    error,
-    setInput,
-    setFiles,
-}: ChatMessageDisplayProps) {
-    const { chartXML, loadDiagram: onDisplayChart } = useDiagram();
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const previousXML = useRef<string>("");
-    const processedToolCalls = useRef<Set<string>>(new Set());
-    const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
-        {}
-    );
-    const handleDisplayChart = useCallback(
-        (xml: string) => {
-            const currentXml = xml || "";
-            const convertedXml = convertToLegalXml(currentXml);
-            if (convertedXml !== previousXML.current) {
-                previousXML.current = convertedXml;
-                const replacedXML = replaceNodes(chartXML, convertedXml);
-                onDisplayChart(replacedXML);
-            }
-        },
-        [chartXML, onDisplayChart]
-    );
-
-    useEffect(() => {
-        if (messagesEndRef.current) {
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-        }
-    }, [messages]);
-
-    // Handle tool invocations and update diagram when needed
-    useEffect(() => {
-        messages.forEach((message) => {
-            if (message.parts) {
-                message.parts.forEach((part: any) => {
-                    if (part.type?.startsWith("tool-")) {
-                        const { toolCallId, state } = part;
-
-                        // Auto-collapse args when diagrams are generated
-                        if (state === "output-available") {
-                            setExpandedTools((prev) => ({
-                                ...prev,
-                                [toolCallId]: false,
-                            }));
-                        }
-
-                        // Handle diagram updates for display_diagram tool
-                        if (
-                            part.type === "tool-display_diagram" &&
-                            part.input?.xml
-                        ) {
-                            // For streaming input, always update to show streaming
-                            if (
-                                state === "input-streaming" ||
-                                state === "input-available"
-                            ) {
-                                handleDisplayChart(part.input.xml);
-                            }
-                            // For completed calls, only update if not processed yet
-                            else if (
-                                state === "output-available" &&
-                                !processedToolCalls.current.has(toolCallId)
-                            ) {
-                                handleDisplayChart(part.input.xml);
-                                processedToolCalls.current.add(toolCallId);
-                            }
-                        }
-                    }
-                });
-            }
-        });
-    }, [messages, handleDisplayChart]);
-
-    const renderToolPart = (part: any) => {
-        const callId = part.toolCallId;
-        const { state, input, output } = part;
-        const isExpanded = expandedTools[callId] ?? true;
-        const toolName = part.type?.replace("tool-", "");
-
-        const toggleExpanded = () => {
-            setExpandedTools((prev) => ({
-                ...prev,
-                [callId]: !isExpanded,
-            }));
-        };
-
-        return (
-            <div
-                key={callId}
-                className="p-4 my-2 text-gray-500 border border-gray-300 rounded"
-            >
-                <div className="flex flex-col gap-2">
-                    <div className="flex items-center justify-between">
-                        <div className="text-xs">Tool: {toolName}</div>
-                        {input && Object.keys(input).length > 0 && (
-                            <button
-                                onClick={toggleExpanded}
-                                className="text-xs text-gray-500 hover:text-gray-700"
-                            >
-                                {isExpanded ? "Hide Args" : "Show Args"}
-                            </button>
-                        )}
-                    </div>
-                    {input && isExpanded && (
-                        <div className="mt-1 font-mono text-xs overflow-hidden">
-                            {typeof input === "object" &&
-                                Object.keys(input).length > 0 &&
-                                `Input: ${JSON.stringify(input, null, 2)}`}
-                        </div>
-                    )}
-                    <div className="mt-2 text-sm">
-                        {state === "input-streaming" ? (
-                            <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-                        ) : state === "output-available" ? (
-                            <div className="text-green-600">
-                                {output || (toolName === "display_diagram"
-                                    ? "Diagram generated"
-                                    : toolName === "edit_diagram"
-                                    ? "Diagram edited"
-                                    : "Tool executed")}
-                            </div>
-                        ) : state === "output-error" ? (
-                            <div className="text-red-600">
-                                {output || (toolName === "display_diagram"
-                                    ? "Error generating diagram"
-                                    : toolName === "edit_diagram"
-                                    ? "Error editing diagram"
-                                    : "Tool error")}
-                            </div>
-                        ) : null}
-                    </div>
-                </div>
-            </div>
-        );
-    };
-
-    return (
-        <ScrollArea className="h-full pr-4">
-            {messages.length === 0 ? (
-                <ExamplePanel setInput={setInput} setFiles={setFiles} />
-            ) : (
-                messages.map((message) => (
-                    <div
-                        key={message.id}
-                        className={`mb-4 ${
-                            message.role === "user" ? "text-right" : "text-left"
-                        }`}
-                    >
-                        <div
-                            className={`inline-block px-4 py-2 whitespace-pre-wrap text-sm rounded-lg max-w-[85%] break-words ${
-                                message.role === "user"
-                                    ? "bg-primary text-primary-foreground"
-                                    : "bg-muted text-muted-foreground"
-                            }`}
-                        >
-                            {message.parts?.map((part: any, index: number) => {
-                                switch (part.type) {
-                                    case "text":
-                                        return (
-                                            <div key={index}>{part.text}</div>
-                                        );
-                                    case "file":
-                                        return (
-                                            <div key={index} className="mt-2">
-                                                <Image
-                                                    src={part.url}
-                                                    width={200}
-                                                    height={200}
-                                                    alt={`Uploaded diagram or image for AI analysis`}
-                                                    className="rounded-md border"
-                                                    style={{
-                                                        objectFit: "contain",
-                                                    }}
-                                                />
-                                            </div>
-                                        );
-                                    default:
-                                        if (part.type?.startsWith("tool-")) {
-                                            return renderToolPart(part);
-                                        }
-                                        return null;
-                                }
-                            })}
-                        </div>
-                    </div>
-                ))
-            )}
-            {error && (
-                <div className="text-red-500 text-sm mt-2">
-                    Error: {error.message}
-                </div>
-            )}
-            <div ref={messagesEndRef} />
-        </ScrollArea>
-    );
-}

components/chat-panel.tsx

@@ -1,282 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useRef, useEffect, useState } from "react";
-import { FaGithub } from "react-icons/fa";
-import { PanelRightClose, PanelRightOpen } from "lucide-react";
-import Link from "next/link";
-
-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from "@/components/ui/card";
-import { useChat } from "@ai-sdk/react";
-import { DefaultChatTransport } from "ai";
-import { ChatInput } from "@/components/chat-input";
-import { ChatMessageDisplay } from "./chat-message-display";
-import { useDiagram } from "@/contexts/diagram-context";
-import { replaceNodes, formatXML } from "@/lib/utils";
-import { ButtonWithTooltip } from "@/components/button-with-tooltip";
-
-interface ChatPanelProps {
-    isVisible: boolean;
-    onToggleVisibility: () => void;
-}
-
-export default function ChatPanel({ isVisible, onToggleVisibility }: ChatPanelProps) {
-    const {
-        loadDiagram: onDisplayChart,
-        handleExport: onExport,
-        resolverRef,
-        chartXML,
-        clearDiagram,
-    } = useDiagram();
-
-    const onFetchChart = () => {
-        return Promise.race([
-            new Promise<string>((resolve) => {
-                if (resolverRef && "current" in resolverRef) {
-                    resolverRef.current = resolve;
-                }
-                onExport();
-            }),
-            new Promise<string>((_, reject) =>
-                setTimeout(() => reject(new Error("Chart export timed out after 10 seconds")), 10000)
-            )
-        ]);
-    };
-    // Add a step counter to track updates
-
-    // Add state for file attachments
-    const [files, setFiles] = useState<File[]>([]);
-    // Add state for showing the history dialog
-    const [showHistory, setShowHistory] = useState(false);
-
-    // Convert File[] to FileList for experimental_attachments
-    const createFileList = (files: File[]): FileList => {
-        const dt = new DataTransfer();
-        files.forEach((file) => dt.items.add(file));
-        return dt.files;
-    };
-
-    // Add state for input management
-    const [input, setInput] = useState("");
-
-    // Remove the currentXmlRef and related useEffect
-    const { messages, sendMessage, addToolResult, status, error, setMessages } =
-        useChat({
-            transport: new DefaultChatTransport({
-                api: "/api/chat",
-            }),
-            async onToolCall({ toolCall }) {
-                if (toolCall.toolName === "display_diagram") {
-                    // Diagram is handled streamingly in the ChatMessageDisplay component
-                    addToolResult({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: "Successfully displayed the diagram.",
-                    });
-                } else if (toolCall.toolName === "edit_diagram") {
-                    const { edits } = toolCall.input as {
-                        edits: Array<{ search: string; replace: string }>;
-                    };
-
-                    let currentXml = '';
-                    try {
-                        // Fetch current chart XML
-                        currentXml = await onFetchChart();
-
-                        // Apply edits using the utility function
-                        const { replaceXMLParts } = await import("@/lib/utils");
-                        const editedXml = replaceXMLParts(currentXml, edits);
-
-                        // Load the edited diagram
-                        onDisplayChart(editedXml);
-
-                        addToolResult({
-                            tool: "edit_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
-                        });
-                    } catch (error) {
-                        console.error("Edit diagram failed:", error);
-
-                        const errorMessage = error instanceof Error ? error.message : String(error);
-
-                        // Provide detailed error with current diagram XML
-                        addToolResult({
-                            tool: "edit_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            output: `Edit failed: ${errorMessage}
-
-Current diagram XML:
-\`\`\`xml
-${currentXml}
-\`\`\`
-
-Please retry with an adjusted search pattern or use display_diagram if retries are exhausted.`,
-                        });
-                    }
-                }
-            },
-            onError: (error) => {
-                console.error("Chat error:", error);
-            },
-        });
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    // Scroll to bottom when messages change
-    useEffect(() => {
-        if (messagesEndRef.current) {
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
-        }
-    }, [messages]);
-
-    // Debug: Log status changes
-    useEffect(() => {
-        console.log('[ChatPanel] Status changed to:', status);
-    }, [status]);
-
-    const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        const isProcessing = status === "streaming" || status === "submitted";
-        if (input.trim() && !isProcessing) {
-            try {
-                // Fetch chart data before sending message
-                let chartXml = await onFetchChart();
-
-                // Format the XML to ensure consistency
-                chartXml = formatXML(chartXml);
-
-                // Create message parts
-                const parts: any[] = [{ type: "text", text: input }];
-
-                // Add file parts if files exist
-                if (files.length > 0) {
-                    for (const file of files) {
-                        const reader = new FileReader();
-                        const dataUrl = await new Promise<string>((resolve) => {
-                            reader.onload = () =>
-                                resolve(reader.result as string);
-                            reader.readAsDataURL(file);
-                        });
-
-                        parts.push({
-                            type: "file",
-                            url: dataUrl,
-                            mediaType: file.type,
-                        });
-                    }
-                }
-
-                sendMessage(
-                    { parts },
-                    {
-                        body: {
-                            xml: chartXml,
-                        },
-                    }
-                );
-
-                // Clear input and files after submission
-                setInput("");
-                setFiles([]);
-            } catch (error) {
-                console.error("Error fetching chart data:", error);
-            }
-        }
-    };
-
-    // Handle input change
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-    ) => {
-        setInput(e.target.value);
-    };
-
-    // Helper function to handle file changes
-    const handleFileChange = (newFiles: File[]) => {
-        setFiles(newFiles);
-    };
-
-    // Collapsed view when chat is hidden
-    if (!isVisible) {
-        return (
-            <Card className="h-full flex flex-col rounded-none py-0 gap-0 items-center justify-start pt-4">
-                <ButtonWithTooltip
-                    tooltipContent="Show chat panel (Ctrl+B)"
-                    variant="ghost"
-                    size="icon"
-                    onClick={onToggleVisibility}
-                >
-                    <PanelRightOpen className="h-5 w-5" />
-                </ButtonWithTooltip>
-                <div
-                    className="text-sm text-gray-500 mt-8"
-                    style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}
-                >
-                    Chat
-                </div>
-            </Card>
-        );
-    }
-
-    // Full view when chat is visible
-    return (
-        <Card className="h-full flex flex-col rounded-none py-0 gap-0">
-            <CardHeader className="p-4 flex flex-row justify-between items-center">
-                <div className="flex items-center gap-3">
-                    <CardTitle>Next-AI-Drawio</CardTitle>
-                    <Link href="/about" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
-                        About
-                    </Link>
-                </div>
-                <div className="flex items-center gap-2">
-                    <ButtonWithTooltip
-                        tooltipContent="Hide chat panel (Ctrl+B)"
-                        variant="ghost"
-                        size="icon"
-                        onClick={onToggleVisibility}
-                    >
-                        <PanelRightClose className="h-5 w-5" />
-                    </ButtonWithTooltip>
-                    <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"
-                    >
-                        <FaGithub className="w-6 h-6" />
-                    </a>
-                </div>
-            </CardHeader>
-            <CardContent className="flex-grow overflow-hidden px-2">
-                <ChatMessageDisplay
-                    messages={messages}
-                    error={error}
-                    setInput={setInput}
-                    setFiles={handleFileChange}
-                />
-            </CardContent>
-
-            <CardFooter className="p-2">
-                <ChatInput
-                    input={input}
-                    status={status}
-                    onSubmit={onFormSubmit}
-                    onChange={handleInputChange}
-                    onClearChat={() => {
-                        setMessages([]);
-                        clearDiagram();
-                    }}
-                    files={files}
-                    onFileChange={handleFileChange}
-                    showHistory={showHistory}
-                    onToggleHistory={setShowHistory}
-                />
-            </CardFooter>
-        </Card>
-    );
-}

components/chat/TemplateCreateDialog.tsx

@@ -0,0 +1,206 @@
+"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()
+        // React submit events bubble through the portal; keep them away from
+        // the chat form this dialog may be rendered in
+        e.stopPropagation()
+
+        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

@@ -0,0 +1,218 @@
+"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 each time the dialog opens, dropping any cancelled edits
+    useEffect(() => {
+        if (open && template) {
+            setTitle(template.title || "")
+            setDescription(template.description || "")
+            setPrompt(template.prompt || "")
+            setPinned(template.pinned || false)
+            setError(null)
+        }
+    }, [open, template])
+
+    const handleOpenChange = (newOpen: boolean) => {
+        if (!newOpen) {
+            setError(null)
+        }
+        onOpenChange(newOpen)
+    }
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault()
+        // React submit events bubble through the portal; keep them away from
+        // any form this dialog may be rendered in
+        e.stopPropagation()
+
+        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

@@ -0,0 +1,639 @@
+"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()
+        // Reload when a template is saved elsewhere, e.g. from the chat input
+        window.addEventListener("templatesChanged", loadTemplates)
+        return () =>
+            window.removeEventListener("templatesChanged", 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
+            // Local date as YYYY-MM-DD (toISOString would give UTC)
+            a.download = `templates-${new Date().toLocaleDateString("sv-SE")}.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 = ""
+            }
+        }
+    }
+
+    // Shared by the empty state and the list, so import works in both
+    const importInput = (
+        <input
+            ref={fileInputRef}
+            type="file"
+            accept="application/json,.json"
+            onChange={handleImport}
+            className="hidden"
+        />
+    )
+    const importMessageBox = 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>
+    )
+
+    // Empty state: no templates at all
+    if (!loading && templates.length === 0) {
+        return (
+            <div className="py-6 px-2 animate-fade-in">
+                <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>
+                    <button
+                        type="button"
+                        onClick={() => fileInputRef.current?.click()}
+                        className="mt-2 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"
+                    >
+                        <Upload className="w-3.5 h-3.5" />
+                        {dict.templates.importTemplates}
+                    </button>
+                    {importInput}
+                    {importMessageBox && (
+                        <div className="mt-3">{importMessageBox}</div>
+                    )}
+
+                    <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>
+                    {importInput}
+                </div>
+
+                {/* Import message */}
+                {importMessageBox}
+
+                <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) => {
+                                        // Ignore keys bubbling up from the action buttons
+                                        if (e.target !== e.currentTarget) return
+                                        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/ValidationCard.tsx

@@ -0,0 +1,328 @@
+"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/attachments.ts

@@ -0,0 +1,77 @@
+import { MAX_FILES, MAX_FILE_SIZE as MAX_IMAGE_SIZE } from "@/lib/chat-helpers"
+import { formatMessage } from "@/lib/i18n/utils"
+import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
+
+// Image formats every supported model provider accepts (SVG is read as text)
+const SUPPORTED_IMAGE_TYPES = [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "image/webp",
+]
+
+/** Accept list for the attachment picker */
+export const ATTACHMENT_ACCEPT =
+    "image/png,image/jpeg,image/gif,image/webp,.svg,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
+
+function isValidFileType(file: File): boolean {
+    return (
+        SUPPORTED_IMAGE_TYPES.includes(file.type) ||
+        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`
+}
+
+/** Keep the files that can be attached; describe the rest as errors */
+export function validateFiles(
+    newFiles: File[],
+    existingCount: number,
+    dict: any,
+): { validFiles: File[]; errors: string[] } {
+    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
+        }
+        // PDFs and text files are extracted in the browser, so only images
+        // have a size limit
+        const isExtractedFile = isPdfFile(file) || isTextFile(file)
+        if (!isExtractedFile && file.size > MAX_IMAGE_SIZE) {
+            errors.push(
+                formatMessage(dict.errors.fileExceeds, {
+                    name: file.name,
+                    size: formatFileSize(file.size),
+                    max: MAX_IMAGE_SIZE / 1024 / 1024,
+                }),
+            )
+        } else {
+            validFiles.push(file)
+        }
+    }
+    return { validFiles, errors }
+}

components/chat/chat-panel.tsx

@@ -0,0 +1,192 @@
+import {
+    ChevronDown,
+    Download,
+    MessageSquareDashed,
+    PanelRightClose,
+    Settings2,
+    SquarePen,
+} from "lucide-react"
+import { useRef } from "react"
+import { DevXmlSimulator } from "@/components/dev-xml-simulator"
+import { BrandMark } from "@/components/workspace/brand-mark"
+import { IconButton } from "@/components/workspace/icon-button"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { usePanelWidth } from "@/hooks/use-panel-width"
+import { modKey } from "@/lib/platform"
+import { cn } from "@/lib/utils"
+import { useCanvasStore } from "@/stores/canvas-store"
+import {
+    PANEL_MAX_WIDTH,
+    PANEL_MIN_WIDTH,
+    useSettingsStore,
+} from "@/stores/settings-store"
+import { useUiStore } from "@/stores/ui-store"
+import { useChatEngine } from "./chat-engine"
+import { Composer } from "./composer"
+import { MessageList } from "./message-list"
+import { SessionMenu, useSessionTitle } from "./session-menu"
+import { VersionStrip } from "./version-strip"
+
+const DEBUG = process.env.NODE_ENV === "development"
+
+/** Drag handle on the panel's left edge (the panel sits on the right) */
+function ResizeHandle() {
+    const panelWidth = usePanelWidth()
+    const setPanelWidth = useSettingsStore((s) => s.setPanelWidth)
+    const startRef = useRef<{ x: number; width: number } | null>(null)
+
+    return (
+        // biome-ignore lint/a11y/useSemanticElements: a draggable handle, not a divider line
+        <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-valuenow={panelWidth}
+            aria-valuemin={PANEL_MIN_WIDTH}
+            aria-valuemax={PANEL_MAX_WIDTH}
+            tabIndex={-1}
+            className="absolute top-4 -left-1.5 bottom-4 z-10 w-3 cursor-col-resize after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:rounded-full after:bg-foreground/0 after:transition-colors hover:after:bg-foreground/15"
+            onPointerDown={(e) => {
+                e.preventDefault()
+                const panel = e.currentTarget.parentElement
+                startRef.current = {
+                    x: e.clientX,
+                    width: panel?.getBoundingClientRect().width ?? 384,
+                }
+                e.currentTarget.setPointerCapture(e.pointerId)
+            }}
+            onPointerMove={(e) => {
+                const start = startRef.current
+                if (!start) return
+                // Dragging left widens the panel
+                setPanelWidth(start.width - (e.clientX - start.x))
+            }}
+            onPointerUp={(e) => {
+                startRef.current = null
+                e.currentTarget.releasePointerCapture(e.pointerId)
+            }}
+        />
+    )
+}
+
+function EmptyThread() {
+    const dict = useDictionary()
+    return (
+        <div className="flex h-full flex-col items-center justify-center gap-2 px-8 text-center">
+            <MessageSquareDashed className="size-5 text-faint" />
+            <p className="max-w-60 text-[13px] text-muted-foreground">
+                {dict.chat.emptyThread}
+            </p>
+        </div>
+    )
+}
+
+/** The floating chat panel: header, versions, conversation, message box */
+export function ChatPanel({
+    mobile = false,
+    onOpenFile,
+}: {
+    mobile?: boolean
+    onOpenFile: () => void
+}) {
+    const dict = useDictionary()
+    const engine = useChatEngine()
+    const { loadDiagram, isDrawioReady } = useDiagram()
+    // An external draw.io has no app toolbar (and so no Export button there)
+    const hasEditor = useCanvasStore((s) => s.hasEditor)
+    const setSaveDialogOpen = useUiStore((s) => s.setSaveDialogOpen)
+    const title = useSessionTitle()
+    const panelWidth = usePanelWidth()
+    const openSettings = useUiStore((s) => s.openSettings)
+    const setPanelOpen = useUiStore((s) => s.setPanelOpen)
+
+    return (
+        <aside
+            className={cn(
+                "flex flex-col bg-card",
+                mobile
+                    ? "absolute inset-0"
+                    : "absolute top-3 right-3 bottom-3 z-20 rounded-2xl shadow-float animate-panel-in",
+            )}
+            style={mobile ? undefined : { width: panelWidth }}
+            aria-label={dict.nav.aiChat}
+            data-testid="chat-panel"
+        >
+            <header className="flex h-[52px] shrink-0 items-center gap-1 pr-2 pl-3">
+                <BrandMark />
+                <SessionMenu onOpenFile={onOpenFile}>
+                    <button
+                        type="button"
+                        className="ml-1 flex min-w-0 items-center gap-1 rounded-lg px-1.5 py-1 hover:bg-accent"
+                        data-testid="session-title"
+                    >
+                        <span className="truncate text-[15px] font-semibold tracking-[-0.01em]">
+                            {title}
+                        </span>
+                        <ChevronDown className="size-4 shrink-0 text-faint" />
+                    </button>
+                </SessionMenu>
+                <div className="ml-auto flex items-center">
+                    {!hasEditor && isDrawioReady && (
+                        <IconButton
+                            label={dict.workspace.export}
+                            onClick={() => setSaveDialogOpen(true)}
+                        >
+                            <Download />
+                        </IconButton>
+                    )}
+                    <IconButton
+                        label={dict.nav.newChat}
+                        onClick={engine.newChat}
+                        disabled={engine.isBusy}
+                        data-testid="new-chat-button"
+                    >
+                        <SquarePen />
+                    </IconButton>
+                    <IconButton
+                        label={dict.nav.settings}
+                        onClick={() => openSettings()}
+                        data-testid="settings-button"
+                    >
+                        <Settings2 />
+                    </IconButton>
+                    {!mobile && (
+                        <IconButton
+                            label={dict.nav.hidePanel}
+                            shortcut={`${modKey}B`}
+                            onClick={() => setPanelOpen(false)}
+                        >
+                            <PanelRightClose />
+                        </IconButton>
+                    )}
+                </div>
+            </header>
+
+            <VersionStrip />
+
+            <div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
+                {engine.messages.length > 0 ? <MessageList /> : <EmptyThread />}
+            </div>
+
+            {DEBUG && (
+                <DevXmlSimulator
+                    setMessages={engine.setMessages as any}
+                    onDisplayChart={(xml) => loadDiagram(xml, true)}
+                />
+            )}
+
+            <div className="shrink-0 p-2.5 pt-1">
+                <Composer
+                    placeholder={
+                        engine.messages.length > 0 &&
+                        engine.chatSelection.length === 0
+                            ? dict.chat.placeholderFollowUp
+                            : undefined
+                    }
+                />
+            </div>
+
+            {!mobile && <ResizeHandle />}
+        </aside>
+    )
+}

components/chat/compare-dialog.tsx

@@ -0,0 +1,152 @@
+import { ChevronLeft, ChevronRight, RotateCcw } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { diffDiagrams, isSameDocument } from "@/lib/diagram-diff"
+import { formatMessage } from "@/lib/i18n/utils"
+import { describeChanges } from "@/lib/version-text"
+import { useUiStore } from "@/stores/ui-store"
+import { useVersionsStore } from "@/stores/versions-store"
+import { useChatEngine } from "./chat-engine"
+import { VersionThumb } from "./tool-activity"
+
+function Sheet({
+    label,
+    svg,
+}: {
+    label: string
+    svg: string | null | undefined
+}) {
+    return (
+        <figure className="flex min-w-0 flex-1 flex-col gap-2">
+            <figcaption className="text-xs font-medium text-muted-foreground">
+                {label}
+            </figcaption>
+            <div className="sheet-light flex aspect-[16/10] items-center justify-center overflow-hidden rounded-xl border border-border bg-white p-2">
+                <VersionThumb svg={svg} className="max-h-full max-w-full" />
+            </div>
+        </figure>
+    )
+}
+
+/** A saved version next to the current canvas, with restore */
+export function CompareDialog() {
+    const dict = useDictionary()
+    const t = dict.versions
+    const engine = useChatEngine()
+    const { getVersionSvg, chartXML } = useDiagram()
+    const versionId = useUiStore((s) => s.compareVersionId)
+    const openCompare = useUiStore((s) => s.openCompare)
+    const closeCompare = useUiStore((s) => s.closeCompare)
+    const versions = useVersionsStore((s) => s.versions)
+    const [currentSvg, setCurrentSvg] = useState<string | null>(null)
+
+    const index = versions.findIndex((v) => v.id === versionId)
+    const version = index >= 0 ? versions[index] : null
+
+    // Whether the canvas is this version, on every page
+    const same = useMemo(
+        () => !version || isSameDocument(version.xml, chartXML),
+        [version, chartXML],
+    )
+    // What the canvas has changed since this version on the first page
+    // (null: nothing there)
+    const changes = useMemo(() => {
+        if (!version || same) return null
+        const { summary } = diffDiagrams(version.xml, chartXML)
+        return Object.values(summary).some((n) => n > 0) ? summary : null
+    }, [version, chartXML, same])
+
+    // Picture of the canvas as it is now, taken again once an answer that
+    // was running is done ("" when none could be made)
+    useEffect(() => {
+        if (!versionId) return
+        let cancelled = false
+        setCurrentSvg(null)
+        getVersionSvg().then((svg) => {
+            if (!cancelled) setCurrentSvg(svg ?? "")
+        })
+        return () => {
+            cancelled = true
+        }
+    }, [versionId, engine.isBusy])
+
+    return (
+        <Dialog
+            open={!!version}
+            onOpenChange={(open) => !open && closeCompare()}
+        >
+            <DialogContent className="gap-5 sm:max-w-4xl">
+                <DialogHeader>
+                    <DialogTitle>{t.compareTitle}</DialogTitle>
+                    <DialogDescription>
+                        {!version
+                            ? ""
+                            : same
+                              ? t.isOnCanvas
+                              : changes
+                                ? `${formatMessage(t.compareSince, { n: index + 1 })} ${describeChanges(changes, t)}`
+                                : formatMessage(t.differsElsewhere, {
+                                      n: index + 1,
+                                  })}
+                    </DialogDescription>
+                </DialogHeader>
+                {version && (
+                    <div className="flex flex-col gap-4 sm:flex-row">
+                        <Sheet
+                            label={formatMessage(t.versionLabel, {
+                                n: index + 1,
+                            })}
+                            svg={version.svg}
+                        />
+                        <Sheet label={t.currentCanvas} svg={currentSvg} />
+                    </div>
+                )}
+                <div className="flex items-center gap-2">
+                    <button
+                        type="button"
+                        disabled={index <= 0}
+                        onClick={() => openCompare(versions[index - 1].id)}
+                        className="inline-flex size-8 items-center justify-center rounded-lg border border-border text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        aria-label={t.previous}
+                    >
+                        <ChevronLeft className="size-4" />
+                    </button>
+                    <button
+                        type="button"
+                        disabled={index < 0 || index >= versions.length - 1}
+                        onClick={() => openCompare(versions[index + 1].id)}
+                        className="inline-flex size-8 items-center justify-center rounded-lg border border-border text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        aria-label={t.next}
+                    >
+                        <ChevronRight className="size-4" />
+                    </button>
+                    <span className="text-xs text-muted-foreground tabular-nums">
+                        {index + 1} / {versions.length}
+                    </span>
+                    <button
+                        type="button"
+                        disabled={!version || same || engine.isBusy}
+                        onClick={() => {
+                            if (!version) return
+                            engine.restoreVersion(version.id)
+                            closeCompare()
+                        }}
+                        className="ml-auto inline-flex h-9 items-center gap-1.5 rounded-lg bg-primary px-3.5 text-[13px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
+                        data-testid="compare-restore"
+                    >
+                        <RotateCcw className="size-4" />
+                        {formatMessage(t.restoreVersion, { n: index + 1 })}
+                    </button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/chat/composer.tsx

@@ -0,0 +1,525 @@
+import {
+    ArrowUp,
+    BookMarked,
+    BookmarkPlus,
+    Globe,
+    Paperclip,
+    Plus,
+    Square,
+    SquareDashedMousePointer,
+    X,
+} from "lucide-react"
+import type React from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
+import { TemplateCreateDialog } from "@/components/chat/TemplateCreateDialog"
+import { TemplatePanel } from "@/components/chat/TemplatePanel"
+import { ErrorToast } from "@/components/error-toast"
+import { FilePreviewList } from "@/components/file-preview-list"
+import { ModelSelector } from "@/components/model-selector"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { UrlInputDialog } from "@/components/url-input-dialog"
+import { IconButton } from "@/components/workspace/icon-button"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
+import { modKey } from "@/lib/platform"
+import { extractUrlContent } from "@/lib/url-utils"
+import { cn } from "@/lib/utils"
+import { useSettingsStore } from "@/stores/settings-store"
+import { useUiStore } from "@/stores/ui-store"
+import { ATTACHMENT_ACCEPT, validateFiles } from "./attachments"
+import { useChatEngine } from "./chat-engine"
+
+function showErrorToast(message: React.ReactNode) {
+    toast.custom(
+        (t) => (
+            <ErrorToast message={message} onDismiss={() => toast.dismiss(t)} />
+        ),
+        { duration: 5000 },
+    )
+}
+
+function showValidationErrors(errors: string[], dict: any) {
+    if (errors.length === 0) return
+    if (errors.length === 1) {
+        showErrorToast(
+            <span className="text-muted-foreground">{errors[0]}</span>,
+        )
+        return
+    }
+    showErrorToast(
+        <div className="flex flex-col gap-1">
+            <span className="font-medium">
+                {formatMessage(dict.errors.filesRejected, {
+                    count: errors.length,
+                })}
+            </span>
+            <ul className="list-inside list-disc text-xs text-muted-foreground">
+                {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>,
+    )
+}
+
+function MenuItem({
+    icon,
+    children,
+    onClick,
+    disabled,
+    disabledHint,
+}: {
+    icon: React.ReactNode
+    children: React.ReactNode
+    onClick: () => void
+    disabled?: boolean
+    /** Why the item can't be used now, shown under it while disabled */
+    disabledHint?: string
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            className="group/item flex w-full items-start gap-2.5 rounded-md px-2.5 py-2 text-left text-[13px] hover:bg-accent disabled:pointer-events-none [&_svg]:mt-px [&_svg]:size-4 [&_svg]:text-muted-foreground"
+        >
+            <span className="contents group-disabled/item:[&>svg]:opacity-40">
+                {icon}
+            </span>
+            <span className="min-w-0">
+                <span className="block group-disabled/item:opacity-40">
+                    {children}
+                </span>
+                {disabled && disabledHint && (
+                    <span className="block text-xs text-muted-foreground">
+                        {disabledHint}
+                    </span>
+                )}
+            </span>
+        </button>
+    )
+}
+
+/**
+ * The message box: text, attachments, the selected shapes, the model picker
+ * and send/stop. `variant="hero"` is the large box on the start screen.
+ */
+export function Composer({
+    variant = "panel",
+    placeholder,
+    autoFocus = false,
+}: {
+    variant?: "panel" | "hero"
+    placeholder?: string
+    autoFocus?: boolean
+}) {
+    const dict = useDictionary()
+    const engine = useChatEngine()
+    const {
+        input,
+        setInput,
+        files,
+        setFiles,
+        pdfData,
+        urlData,
+        setUrlData,
+        isBusy,
+        error,
+        chatSelection,
+        dismissSelection,
+        modelConfig,
+    } = engine
+    const sendShortcut = useSettingsStore((s) => s.sendShortcut)
+    const openSettings = useUiStore((s) => s.openSettings)
+    const focusToken = useUiStore((s) => s.focusComposerToken)
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    const [isDragging, setIsDragging] = useState(false)
+    const [addOpen, setAddOpen] = useState(false)
+    const [templatesOpen, setTemplatesOpen] = useState(false)
+    const [showUrlDialog, setShowUrlDialog] = useState(false)
+    const [isExtractingUrl, setIsExtractingUrl] = useState(false)
+    const [saveTemplateOpen, setSaveTemplateOpen] = useState(false)
+
+    const isHero = variant === "hero"
+    // Allow a retry when the last request failed, even mid-stream. While
+    // the chat is being left, what is typed could not be sent.
+    const isDisabled = (isBusy && !error) || engine.isLeaving
+    const canSend =
+        !isDisabled && !engine.isExtractingAttachments && !!input.trim()
+
+    const adjustHeight = useCallback(() => {
+        const textarea = textareaRef.current
+        if (!textarea) return
+        textarea.style.height = "auto"
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 220)}px`
+    }, [])
+    useEffect(() => {
+        adjustHeight()
+    }, [input, adjustHeight])
+
+    // Focus requests from elsewhere (new chat, "ask AI" button, ⌘/)
+    useEffect(() => {
+        if (focusToken === 0 && !autoFocus) return
+        const timer = setTimeout(() => textareaRef.current?.focus(), 60)
+        return () => clearTimeout(timer)
+    }, [focusToken, autoFocus])
+
+    const addFiles = (newFiles: File[]) => {
+        const { validFiles, errors } = validateFiles(
+            newFiles,
+            files.length,
+            dict,
+        )
+        showValidationErrors(errors, dict)
+        if (validFiles.length > 0) setFiles([...files, ...validFiles])
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        // Enter that confirms an IME candidate must not send the message
+        if (e.nativeEvent.isComposing || e.keyCode === 229) return
+        const shouldSend =
+            sendShortcut === "enter"
+                ? e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey
+                : (e.metaKey || e.ctrlKey) && e.key === "Enter"
+        if (shouldSend) {
+            e.preventDefault()
+            if (canSend) engine.submit()
+        }
+    }
+
+    const handlePaste = async (e: React.ClipboardEvent) => {
+        if (isDisabled) return
+        const imageItems = Array.from(e.clipboardData.items).filter((item) =>
+            item.type.startsWith("image/"),
+        )
+        if (imageItems.length === 0) return
+        const imageFiles = imageItems
+            .map((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)
+        addFiles(imageFiles)
+    }
+
+    const handleUrlExtract = async (url: string) => {
+        setIsExtractingUrl(true)
+        // Functional updates, so a removal or send made while extracting is
+        // not overwritten when the request finishes
+        try {
+            setUrlData((prev) =>
+                new Map(prev).set(url, {
+                    url,
+                    title: url,
+                    content: "",
+                    charCount: 0,
+                    isExtracting: true,
+                }),
+            )
+            const data = await extractUrlContent(url)
+            setUrlData((prev) =>
+                prev.has(url) ? new Map(prev).set(url, data) : prev,
+            )
+            setShowUrlDialog(false)
+        } catch (err) {
+            setUrlData((prev) => {
+                const next = new Map(prev)
+                next.delete(url)
+                return next
+            })
+            showErrorToast(
+                <span className="text-muted-foreground">
+                    {err instanceof Error ? err.message : dict.url.failed}
+                </span>,
+            )
+        } finally {
+            setIsExtractingUrl(false)
+        }
+    }
+
+    const selectionLabel =
+        chatSelection.length === 1
+            ? formatMessage(dict.selection.one, {
+                  label:
+                      chatSelection[0].label ||
+                      (chatSelection[0].isEdge
+                          ? dict.selection.connector
+                          : dict.selection.shape),
+              })
+            : formatMessage(dict.selection.many, {
+                  count: chatSelection.length,
+              })
+
+    const hasChips =
+        chatSelection.length > 0 || files.length > 0 || urlData.size > 0
+
+    return (
+        <form
+            id={isHero ? "hero-chat-form" : "chat-form"}
+            onSubmit={(e) => {
+                e.preventDefault()
+                if (canSend) engine.submit()
+            }}
+            onDragOver={(e) => {
+                e.preventDefault()
+                setIsDragging(true)
+            }}
+            onDragLeave={(e) => {
+                e.preventDefault()
+                setIsDragging(false)
+            }}
+            onDrop={(e) => {
+                e.preventDefault()
+                setIsDragging(false)
+                if (!isDisabled) addFiles(Array.from(e.dataTransfer.files))
+            }}
+            className={cn(
+                "group/composer relative w-full rounded-[14px] border border-border bg-card transition-[border-color,box-shadow] duration-150",
+                "focus-within:border-foreground/20 focus-within:shadow-[0_0_0_4px_var(--accent)]",
+                isHero && "rounded-[18px] border-transparent shadow-pop",
+                isDragging &&
+                    "border-foreground/30 shadow-[0_0_0_4px_var(--marker-soft)]",
+            )}
+        >
+            {hasChips && (
+                <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5">
+                    {chatSelection.length > 0 && (
+                        <span
+                            className="inline-flex max-w-full items-center gap-1.5 rounded-lg bg-marker-soft py-1 pr-1 pl-2 text-xs font-medium text-marker-ink"
+                            data-testid="selection-chip"
+                        >
+                            <SquareDashedMousePointer className="size-3.5 shrink-0" />
+                            <span className="truncate">{selectionLabel}</span>
+                            <button
+                                type="button"
+                                onClick={dismissSelection}
+                                aria-label={dict.selection.remove}
+                                className="rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10"
+                            >
+                                <X className="size-3" />
+                            </button>
+                        </span>
+                    )}
+                    {(files.length > 0 || urlData.size > 0) && (
+                        <div className="w-full">
+                            <FilePreviewList
+                                files={files}
+                                onRemoveFile={(file) =>
+                                    setFiles(files.filter((f) => f !== file))
+                                }
+                                pdfData={pdfData}
+                                urlData={urlData}
+                                onRemoveUrl={(url) =>
+                                    setUrlData((prev) => {
+                                        const next = new Map(prev)
+                                        next.delete(url)
+                                        return next
+                                    })
+                                }
+                            />
+                        </div>
+                    )}
+                </div>
+            )}
+
+            <textarea
+                ref={textareaRef}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
+                placeholder={
+                    placeholder ??
+                    (chatSelection.length > 0
+                        ? dict.selection.placeholder
+                        : dict.chat.placeholder)
+                }
+                disabled={isDisabled}
+                aria-label={dict.chat.inputLabel}
+                data-testid="chat-input"
+                rows={isHero ? 3 : 2}
+                className={cn(
+                    "block w-full resize-none bg-transparent text-foreground outline-none placeholder:text-faint scrollbar-thin disabled:opacity-60",
+                    isHero
+                        ? "min-h-[84px] px-[18px] pt-4 pb-1 text-[15px] leading-relaxed"
+                        : "min-h-[52px] px-3.5 pt-3 pb-1 text-sm",
+                )}
+            />
+
+            <div
+                className={cn(
+                    "flex items-center gap-0.5",
+                    isHero ? "px-2.5 pt-1 pb-2.5" : "px-1.5 pt-0.5 pb-1.5",
+                )}
+            >
+                <Popover open={addOpen} onOpenChange={setAddOpen}>
+                    <PopoverTrigger asChild>
+                        <IconButton
+                            label={dict.chat.attach}
+                            tooltipSide="top"
+                            disabled={isDisabled}
+                            data-testid="composer-add"
+                        >
+                            <Plus />
+                        </IconButton>
+                    </PopoverTrigger>
+                    <PopoverContent
+                        side="top"
+                        align="start"
+                        className="w-64 p-1"
+                    >
+                        <MenuItem
+                            icon={<Paperclip />}
+                            onClick={() => {
+                                setAddOpen(false)
+                                fileInputRef.current?.click()
+                            }}
+                        >
+                            {dict.chat.uploadFile}
+                        </MenuItem>
+                        <MenuItem
+                            icon={<Globe />}
+                            onClick={() => {
+                                setAddOpen(false)
+                                setShowUrlDialog(true)
+                            }}
+                        >
+                            {dict.chat.ExtractURL}
+                        </MenuItem>
+                        <MenuItem
+                            icon={<BookmarkPlus />}
+                            disabled={!input.trim()}
+                            disabledHint={dict.templates.saveDisabledHint}
+                            onClick={() => {
+                                setAddOpen(false)
+                                setSaveTemplateOpen(true)
+                            }}
+                        >
+                            {dict.templates.saveAsTemplate}
+                        </MenuItem>
+                    </PopoverContent>
+                </Popover>
+                <IconButton
+                    label={dict.templates.myTemplates}
+                    tooltipSide="top"
+                    disabled={isDisabled}
+                    onClick={() => setTemplatesOpen(true)}
+                >
+                    <BookMarked />
+                </IconButton>
+
+                <div className="ml-auto flex min-w-0 flex-1 items-center justify-end gap-1">
+                    <ModelSelector
+                        models={modelConfig.models}
+                        selectedModelId={modelConfig.selectedModelId}
+                        onSelect={modelConfig.setSelectedModelId}
+                        onConfigure={() => openSettings("models")}
+                        disabled={isDisabled}
+                        showUnvalidatedModels={
+                            modelConfig.showUnvalidatedModels
+                        }
+                    />
+                    {!isBusy && input.trim() && (
+                        <kbd
+                            className="hidden shrink-0 font-sans text-[11px] text-faint sm:inline"
+                            aria-hidden
+                        >
+                            {sendShortcut === "enter" ? "↵" : `${modKey}↵`}
+                        </kbd>
+                    )}
+                    {isBusy ? (
+                        <button
+                            type="button"
+                            onClick={engine.stop}
+                            aria-label={dict.chat.stopGeneration}
+                            className="inline-flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-foreground text-background transition-opacity hover:opacity-85"
+                        >
+                            <Square className="size-3 fill-current" />
+                        </button>
+                    ) : (
+                        <button
+                            type="submit"
+                            disabled={!canSend}
+                            aria-label={dict.chat.send}
+                            className="inline-flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-[opacity,background-color] hover:opacity-90 disabled:bg-muted disabled:text-faint"
+                        >
+                            <ArrowUp className="size-4 stroke-[2.25]" />
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                accept={ATTACHMENT_ACCEPT}
+                data-testid="attachment-input"
+                multiple
+                disabled={isDisabled}
+                onChange={(e) => {
+                    addFiles(Array.from(e.target.files || []))
+                    e.target.value = ""
+                }}
+            />
+
+            <UrlInputDialog
+                open={showUrlDialog}
+                onOpenChange={setShowUrlDialog}
+                onSubmit={handleUrlExtract}
+                isExtracting={isExtractingUrl}
+            />
+            <TemplateCreateDialog
+                open={saveTemplateOpen}
+                onOpenChange={setSaveTemplateOpen}
+                onSuccess={() => setSaveTemplateOpen(false)}
+                initialPrompt={input.trim()}
+            />
+            <Dialog open={templatesOpen} onOpenChange={setTemplatesOpen}>
+                <DialogContent className="flex max-h-[80vh] flex-col gap-0 p-0 sm:max-w-lg">
+                    <DialogHeader className="px-5 pt-5 pb-2">
+                        <DialogTitle>{dict.templates.myTemplates}</DialogTitle>
+                    </DialogHeader>
+                    <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3 scrollbar-thin">
+                        <TemplatePanel
+                            setInput={(value) => {
+                                setInput(value)
+                                setTemplatesOpen(false)
+                            }}
+                            currentInput={input}
+                            onSendTemplate={(template) => {
+                                setTemplatesOpen(false)
+                                engine.sendTemplate(template.prompt)
+                            }}
+                        />
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </form>
+    )
+}

components/chat/lobby-hero.tsx

@@ -0,0 +1,284 @@
+import { FileText, FileUp, History, Pencil } from "lucide-react"
+import type React from "react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getAssetUrl } from "@/lib/base-path"
+import { cn } from "@/lib/utils"
+import { useChatEngine } from "./chat-engine"
+import { Composer } from "./composer"
+import { SessionMenu } from "./session-menu"
+
+interface Example {
+    key: string
+    title: string
+    description: string
+    /** Picture of the result (or of the input, for "replicate" examples) */
+    image?: string
+    prompt: string
+    /** Bundled file sent with the prompt; matches the cached example */
+    file?: { path: string; name: string; type: string }
+}
+
+async function loadExampleFile(file: NonNullable<Example["file"]>) {
+    const response = await fetch(getAssetUrl(file.path))
+    const blob = await response.blob()
+    return new File([blob], file.name, { type: file.type })
+}
+
+/** One start-screen choice: a small picture, a title and one line */
+function ExampleCard({
+    onClick,
+    title,
+    description,
+    picture,
+    plain,
+    testId,
+}: {
+    onClick: () => void
+    title: string
+    description: string
+    picture: React.ReactNode
+    /** An icon on a tinted tile instead of a diagram on paper */
+    plain?: boolean
+    testId?: string
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className="group/example flex min-w-0 items-center gap-2.5 rounded-xl border border-border bg-card p-1.5 pr-2.5 text-left transition-colors hover:border-foreground/25"
+            data-testid={testId}
+        >
+            <span
+                className={cn(
+                    "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg",
+                    plain ? "bg-muted" : "sheet-light bg-white",
+                )}
+            >
+                {picture}
+            </span>
+            <span className="min-w-0 flex-1">
+                <span className="line-clamp-2 text-[13px] leading-snug font-medium text-foreground">
+                    {title}
+                </span>
+                <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                    {description}
+                </span>
+            </span>
+        </button>
+    )
+}
+
+/**
+ * Start screen over an empty canvas: one large message box and the cached
+ * examples (they answer instantly without calling a model).
+ */
+export function LobbyHero({
+    onDrawYourself,
+    onOpenFile,
+    compact = false,
+}: {
+    onDrawYourself: () => void
+    onOpenFile: () => void
+    /** Phone layout: no example pictures, tighter spacing */
+    compact?: boolean
+}) {
+    const dict = useDictionary()
+    const t = dict.lobby
+    const engine = useChatEngine()
+
+    // Prompts and file names must stay as they are: cached responses match them
+    const examples: Example[] = [
+        {
+            key: "paper",
+            title: dict.examples.paperToDiagram,
+            description: dict.examples.paperDescription,
+            prompt: "Summarize this paper as a diagram",
+            file: {
+                path: "/chain-of-thought.txt",
+                name: "chain-of-thought.txt",
+                type: "text/plain",
+            },
+        },
+        {
+            key: "animated",
+            title: dict.examples.animatedDiagram,
+            description: dict.examples.animatedDescription,
+            image: "/animated_connectors.svg",
+            prompt: "Give me a **animated connector** diagram of transformer's architecture",
+        },
+        {
+            key: "aws",
+            title: dict.examples.awsArchitecture,
+            description: dict.examples.awsDescription,
+            image: "/aws_demo.svg",
+            prompt: "Replicate this in aws style",
+            file: {
+                path: "/architecture.png",
+                name: "architecture.png",
+                type: "image/png",
+            },
+        },
+        {
+            key: "flowchart",
+            title: dict.examples.replicateFlowchart,
+            description: dict.examples.replicateDescription,
+            image: "/example.png",
+            prompt: "Replicate this flowchart.",
+            file: {
+                path: "/example.png",
+                name: "example.png",
+                type: "image/png",
+            },
+        },
+        {
+            key: "cat",
+            title: dict.examples.creativeDrawing,
+            description: dict.examples.creativeDescription,
+            image: "/cat_demo.svg",
+            prompt: "Draw a cat for me",
+        },
+    ]
+
+    const pickExample = async (example: Example) => {
+        engine.setInput(example.prompt)
+        if (!example.file) {
+            engine.setFiles([])
+            return
+        }
+        try {
+            engine.setFiles([await loadExampleFile(example.file)])
+        } catch (error) {
+            console.error(dict.errors.failedToLoadExample, error)
+        }
+    }
+
+    return (
+        <div
+            className={cn(
+                "mx-auto w-full",
+                compact ? "max-w-xl px-4 py-8" : "max-w-[720px] px-6 py-10",
+            )}
+            data-testid="lobby-hero"
+        >
+            <h1
+                className={cn(
+                    "text-center font-semibold tracking-[-0.025em] text-foreground",
+                    compact
+                        ? "text-[26px] leading-tight"
+                        : "text-[34px] leading-[1.15]",
+                )}
+            >
+                {t.title}
+            </h1>
+            <p
+                className={cn(
+                    "mx-auto mt-2.5 max-w-[34em] text-center text-muted-foreground",
+                    compact ? "mb-5 text-[13px]" : "mb-6 text-[14.5px]",
+                )}
+            >
+                {t.lede}
+            </p>
+
+            <Composer
+                variant="hero"
+                autoFocus={!compact}
+                placeholder={t.placeholder}
+            />
+
+            <div
+                className={cn(
+                    "mt-5 grid gap-2",
+                    compact ? "grid-cols-1" : "grid-cols-3",
+                )}
+            >
+                {examples.map((example) =>
+                    compact ? (
+                        <button
+                            key={example.key}
+                            type="button"
+                            onClick={() => pickExample(example)}
+                            className="flex items-center gap-3 rounded-xl border border-border bg-card px-3 py-2.5 text-left hover:border-foreground/25"
+                        >
+                            <span className="min-w-0 flex-1">
+                                <span className="block truncate text-[13px] font-medium">
+                                    {example.title}
+                                </span>
+                                <span className="block truncate text-xs text-muted-foreground">
+                                    {example.description}
+                                </span>
+                            </span>
+                        </button>
+                    ) : (
+                        <ExampleCard
+                            key={example.key}
+                            onClick={() => pickExample(example)}
+                            title={example.title}
+                            description={example.description}
+                            testId={`example-${example.key}`}
+                            picture={
+                                example.image ? (
+                                    // biome-ignore lint/performance/noImgElement: static preview
+                                    <img
+                                        src={getAssetUrl(example.image)}
+                                        alt=""
+                                        className="max-h-10 max-w-[56px] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
+                                    />
+                                ) : (
+                                    <FileText className="size-5 text-muted-foreground" />
+                                )
+                            }
+                            plain={!example.image}
+                        />
+                    ),
+                )}
+                {!compact && (
+                    <ExampleCard
+                        onClick={onOpenFile}
+                        title={dict.workspace.openFile}
+                        description={t.openFileHint}
+                        picture={
+                            <FileUp className="size-5 text-muted-foreground" />
+                        }
+                        plain
+                    />
+                )}
+            </div>
+            <p className="mt-3 text-center text-xs text-faint">
+                {dict.examples.cachedNote}
+            </p>
+
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
+                {engine.sessions.length > 0 && (
+                    <SessionMenu align="center" onOpenFile={onOpenFile}>
+                        <button
+                            type="button"
+                            className="inline-flex items-center gap-1.5 hover:text-foreground"
+                        >
+                            <History className="size-4" />
+                            {t.recent}
+                        </button>
+                    </SessionMenu>
+                )}
+                {compact && (
+                    <button
+                        type="button"
+                        onClick={onOpenFile}
+                        className="inline-flex items-center gap-1.5 hover:text-foreground"
+                    >
+                        <FileUp className="size-4" />
+                        {dict.workspace.openFile}
+                    </button>
+                )}
+                <button
+                    type="button"
+                    onClick={onDrawYourself}
+                    className="inline-flex items-center gap-1.5 hover:text-foreground"
+                    data-testid="draw-yourself"
+                >
+                    <Pencil className="size-4" />
+                    {t.drawYourself}
+                </button>
+            </div>
+        </div>
+    )
+}

components/chat/message-list.tsx

@@ -0,0 +1,634 @@
+import type { UIMessage } from "ai"
+import {
+    AlertCircle,
+    BookmarkPlus,
+    Check,
+    ChevronDown,
+    Copy,
+    FileCode,
+    FileText,
+    Link,
+    Pencil,
+    RotateCcw,
+    ThumbsDown,
+    ThumbsUp,
+} from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import ReactMarkdown from "react-markdown"
+import { toast } from "sonner"
+import {
+    Reasoning,
+    ReasoningContent,
+    ReasoningTrigger,
+} from "@/components/ai-elements/reasoning"
+import { Shimmer } from "@/components/ai-elements/shimmer"
+import { TemplateCreateDialog } from "@/components/chat/TemplateCreateDialog"
+import type { ToolPartLike } from "@/components/chat/types"
+import { ValidationCard } from "@/components/chat/ValidationCard"
+import Image from "@/components/image-with-basepath"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getApiEndpoint } from "@/lib/base-path"
+import { useCopy } from "@/lib/clipboard"
+import { cn } from "@/lib/utils"
+import { useUiStore } from "@/stores/ui-store"
+import { useChatEngine } from "./chat-engine"
+import {
+    getMessageTextContent,
+    getUserOriginalText,
+    splitTextIntoFileSections,
+    type TextSection,
+} from "./message-text"
+import { ToolActivity } from "./tool-activity"
+
+function ActionButton({
+    label,
+    onClick,
+    active,
+    children,
+}: {
+    label: string
+    onClick: () => void
+    active?: boolean
+    children: React.ReactNode
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            title={label}
+            aria-label={label}
+            className={cn(
+                "inline-flex size-7 items-center justify-center rounded-lg text-faint transition-colors hover:bg-accent hover:text-foreground [&_svg]:size-3.5",
+                active && "text-foreground",
+            )}
+        >
+            {children}
+        </button>
+    )
+}
+
+/** Copies a message's text, with a short "copied" state */
+function CopyButton({ text }: { text: string }) {
+    const dict = useDictionary()
+    const { copied, copy } = useCopy(() =>
+        toast.error(dict.chat.failedToCopyDetail),
+    )
+    return (
+        <ActionButton
+            label={copied ? dict.chat.copied : dict.chat.copyResponse}
+            onClick={() => copy(text)}
+        >
+            {copied ? <Check /> : <Copy />}
+        </ActionButton>
+    )
+}
+
+function AttachedSection({ section }: { section: TextSection }) {
+    const [open, setOpen] = useState(false)
+    const dict = useDictionary()
+    const Icon =
+        section.fileType === "pdf"
+            ? FileText
+            : section.fileType === "url"
+              ? Link
+              : FileCode
+    const chars =
+        section.charCount && section.charCount >= 1000
+            ? `${(section.charCount / 1000).toFixed(1)}k`
+            : section.charCount
+    return (
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
+            <button
+                type="button"
+                onClick={(e) => {
+                    e.stopPropagation()
+                    setOpen((v) => !v)
+                }}
+                className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left hover:bg-accent"
+            >
+                <Icon className="size-4 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+                    {section.filename}
+                </span>
+                <span className="shrink-0 text-[11px] text-faint">
+                    {chars} {dict.file.chars}
+                </span>
+                <ChevronDown
+                    className={cn(
+                        "size-3.5 shrink-0 text-muted-foreground transition-transform",
+                        open && "rotate-180",
+                    )}
+                />
+            </button>
+            {open && (
+                <pre className="max-h-48 overflow-y-auto whitespace-pre-wrap border-t border-border px-2.5 py-2 text-xs text-muted-foreground scrollbar-thin">
+                    {section.content}
+                </pre>
+            )}
+        </div>
+    )
+}
+
+function MessageText({ text }: { text: string }) {
+    const sections = splitTextIntoFileSections(text)
+    return (
+        <div className="space-y-2">
+            {sections.map((section, index) =>
+                section.type === "text" ? (
+                    <div
+                        key={index}
+                        className={cn(
+                            "prose prose-sm max-w-none break-words text-[14px] leading-relaxed text-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+                            "prose-p:my-1.5 prose-pre:bg-surface-2 prose-pre:text-foreground prose-code:before:content-none prose-code:after:content-none dark:prose-invert",
+                        )}
+                    >
+                        <ReactMarkdown>{section.content}</ReactMarkdown>
+                    </div>
+                ) : (
+                    <AttachedSection key={index} section={section} />
+                ),
+            )}
+        </div>
+    )
+}
+
+function UserMessage({
+    message,
+    index,
+    isLast,
+}: {
+    message: UIMessage
+    index: number
+    isLast: boolean
+}) {
+    const dict = useDictionary()
+    const engine = useChatEngine()
+    const [editing, setEditing] = useState(false)
+    const [editText, setEditText] = useState("")
+    const [saveTemplate, setSaveTemplate] = useState(false)
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const text = getMessageTextContent(message)
+    const canEdit = isLast && !engine.isBusy
+
+    useEffect(() => {
+        if (editing) textareaRef.current?.focus()
+    }, [editing])
+
+    const startEdit = () => {
+        if (!canEdit) return
+        setEditText(getUserOriginalText(message))
+        setEditing(true)
+    }
+    const submitEdit = () => {
+        if (!editText.trim()) return
+        engine.editMessage(index, editText.trim())
+        setEditing(false)
+    }
+
+    if (editing) {
+        return (
+            <div className="ml-6 flex flex-col gap-2">
+                <textarea
+                    ref={textareaRef}
+                    value={editText}
+                    onChange={(e) => setEditText(e.target.value)}
+                    rows={Math.min(editText.split("\n").length + 1, 6)}
+                    onKeyDown={(e) => {
+                        if (e.key === "Escape") setEditing(false)
+                        else if (
+                            e.key === "Enter" &&
+                            (e.metaKey || e.ctrlKey)
+                        ) {
+                            e.preventDefault()
+                            submitEdit()
+                        }
+                    }}
+                    className="w-full resize-none rounded-xl border border-foreground/20 bg-card px-3 py-2.5 text-sm outline-none focus:shadow-[0_0_0_4px_var(--accent)]"
+                />
+                <div className="flex justify-end gap-2">
+                    <button
+                        type="button"
+                        onClick={() => setEditing(false)}
+                        className="h-7 rounded-lg px-3 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+                    >
+                        {dict.common.cancel}
+                    </button>
+                    <button
+                        type="button"
+                        onClick={submitEdit}
+                        disabled={!editText.trim()}
+                        className="h-7 rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground disabled:opacity-40"
+                    >
+                        {dict.chat.saveAndSubmit}
+                    </button>
+                </div>
+            </div>
+        )
+    }
+
+    const images = (message.parts ?? []).filter((p) => p.type === "file") as {
+        url: string
+    }[]
+
+    return (
+        <div className="group/message flex items-start justify-end gap-1">
+            <div className="mt-1 flex shrink-0 items-center transition-opacity [@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 focus-within:opacity-100">
+                {canEdit && (
+                    <ActionButton
+                        label={dict.chat.editMessage}
+                        onClick={startEdit}
+                    >
+                        <Pencil />
+                    </ActionButton>
+                )}
+                <CopyButton text={text} />
+                <ActionButton
+                    label={dict.templates.saveAsTemplate}
+                    onClick={() => setSaveTemplate(true)}
+                >
+                    <BookmarkPlus />
+                </ActionButton>
+            </div>
+            <div
+                className={cn(
+                    "min-w-0 max-w-[85%] rounded-2xl rounded-br-md bg-secondary px-3.5 py-2.5",
+                    canEdit &&
+                        "cursor-pointer transition-colors hover:bg-interactive-active",
+                )}
+                role={canEdit ? "button" : undefined}
+                tabIndex={canEdit ? 0 : undefined}
+                onClick={startEdit}
+                onKeyDown={(e) => {
+                    if (canEdit && (e.key === "Enter" || e.key === " ")) {
+                        e.preventDefault()
+                        startEdit()
+                    }
+                }}
+                title={canEdit ? dict.chat.clickToEdit : undefined}
+            >
+                {images.length > 0 && (
+                    <div className="mb-2 flex flex-wrap gap-1.5">
+                        {images.map((image, i) => (
+                            <Image
+                                key={i}
+                                src={image.url}
+                                width={96}
+                                height={72}
+                                alt={dict.chat.attachedImage}
+                                className="h-[72px] w-24 rounded-lg border border-border bg-white object-cover"
+                            />
+                        ))}
+                    </div>
+                )}
+                {text && <MessageText text={text} />}
+            </div>
+            {saveTemplate && (
+                <TemplateCreateDialog
+                    open
+                    onOpenChange={(open) => !open && setSaveTemplate(false)}
+                    onSuccess={() => setSaveTemplate(false)}
+                    initialPrompt={getUserOriginalText(message)}
+                />
+            )}
+        </div>
+    )
+}
+
+function AssistantMessage({
+    message,
+    index,
+    isLastMessage,
+    isLastAssistant,
+}: {
+    message: UIMessage
+    index: number
+    isLastMessage: boolean
+    isLastAssistant: boolean
+}) {
+    const dict = useDictionary()
+    // The thinking header in the page language
+    const thinkingMessage = (isStreaming: boolean, duration?: number) => {
+        if (isStreaming || duration === 0) {
+            return <Shimmer duration={1}>{dict.reasoning.thinking}</Shimmer>
+        }
+        if (duration === undefined) return <p>{dict.reasoning.thoughtBrief}</p>
+        return (
+            <p>
+                {duration === 1
+                    ? dict.reasoning.thoughtForOne
+                    : dict.reasoning.thoughtFor.replace(
+                          "{duration}",
+                          String(duration),
+                      )}
+            </p>
+        )
+    }
+    const engine = useChatEngine()
+    const [feedback, setFeedback] = useState<"good" | "bad" | null>(null)
+    const isRestored = engine.loadedMessageIdsRef.current.has(message.id)
+    const parts = message.parts ?? []
+    const isCachedExample = parts.some((p: any) =>
+        p.toolCallId?.startsWith("cached-"),
+    )
+    const text = getMessageTextContent(message)
+
+    const submitFeedback = async (value: "good" | "bad") => {
+        if (feedback === value) {
+            setFeedback(null)
+            return
+        }
+        setFeedback(value)
+        try {
+            await fetch(getApiEndpoint("/api/log-feedback"), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    messageId: message.id,
+                    feedback: value,
+                    sessionId: engine.langfuseSessionId,
+                }),
+            })
+        } catch (error) {
+            console.error("Failed to log feedback:", error)
+            toast.error(dict.errors.failedToRecordFeedback)
+            setFeedback(null)
+        }
+    }
+
+    // Consecutive text parts render together; tools render in place
+    const blocks: { kind: "text" | "tool" | "reasoning"; index: number }[] = []
+    parts.forEach((part, partIndex) => {
+        if (part.type === "reasoning")
+            blocks.push({ kind: "reasoning", index: partIndex })
+        else if (part.type?.startsWith("tool-"))
+            blocks.push({ kind: "tool", index: partIndex })
+        else if (part.type === "text") {
+            const last = blocks[blocks.length - 1]
+            if (last?.kind !== "text")
+                blocks.push({ kind: "text", index: partIndex })
+        }
+    })
+
+    const textRun = (start: number) => {
+        const out: string[] = []
+        for (let i = start; i < parts.length && parts[i].type === "text"; i++) {
+            out.push((parts[i] as { text: string }).text)
+        }
+        return out.join("\n")
+    }
+
+    return (
+        <div className="group/message space-y-2.5">
+            {blocks.map((block) => {
+                const part = parts[block.index]
+                if (block.kind === "reasoning") {
+                    const isStreamingReasoning =
+                        engine.status === "streaming" &&
+                        isLastMessage &&
+                        block.index === parts.length - 1
+                    return (
+                        <Reasoning
+                            key={`r-${block.index}`}
+                            className="w-full"
+                            isStreaming={isStreamingReasoning}
+                            defaultOpen={!isRestored}
+                        >
+                            <ReasoningTrigger
+                                getThinkingMessage={thinkingMessage}
+                            />
+                            <ReasoningContent>
+                                {(part as { text: string }).text}
+                            </ReasoningContent>
+                        </Reasoning>
+                    )
+                }
+                if (block.kind === "tool") {
+                    const toolPart = part as unknown as ToolPartLike
+                    const validationState =
+                        engine.validationStates[toolPart.toolCallId]
+                    return (
+                        <div key={`t-${block.index}`} className="space-y-2">
+                            <ToolActivity
+                                part={toolPart}
+                                isLastMessage={isLastMessage}
+                            />
+                            {toolPart.type === "tool-display_diagram" &&
+                                validationState && (
+                                    <ValidationCard
+                                        state={validationState}
+                                        onImproveWithSuggestions={
+                                            engine.improveWithSuggestions
+                                        }
+                                    />
+                                )}
+                        </div>
+                    )
+                }
+                const run = textRun(block.index)
+                if (!run.trim()) return null
+                return <MessageText key={`x-${block.index}`} text={run} />
+            })}
+
+            {!(engine.isBusy && isLastMessage) && (
+                <div className="-ml-1.5 flex items-center transition-opacity [@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 focus-within:opacity-100">
+                    {text && <CopyButton text={text} />}
+                    {isLastAssistant && !isCachedExample && (
+                        <ActionButton
+                            label={dict.chat.regenerate}
+                            onClick={() => engine.regenerate(index)}
+                        >
+                            <RotateCcw />
+                        </ActionButton>
+                    )}
+                    <ActionButton
+                        label={dict.chat.goodResponse}
+                        active={feedback === "good"}
+                        onClick={() => submitFeedback("good")}
+                    >
+                        <ThumbsUp
+                            className={cn(
+                                feedback === "good" && "fill-current",
+                            )}
+                        />
+                    </ActionButton>
+                    <ActionButton
+                        label={dict.chat.badResponse}
+                        active={feedback === "bad"}
+                        onClick={() => submitFeedback("bad")}
+                    >
+                        <ThumbsDown
+                            className={cn(feedback === "bad" && "fill-current")}
+                        />
+                    </ActionButton>
+                </div>
+            )}
+        </div>
+    )
+}
+
+/**
+ * A failed request: what to do in the text color, the provider's own words
+ * below it, and the action that can fix it first
+ */
+function ErrorNotice({
+    text,
+    openModelConfig,
+    onOpenModelConfig,
+    onRetry,
+}: {
+    text: string
+    openModelConfig: boolean
+    onOpenModelConfig: () => void
+    onRetry?: () => void
+}) {
+    const dict = useDictionary()
+    // Provider errors are "hint\n\nprovider message"
+    const split = text.indexOf("\n\n")
+    const headline = split >= 0 ? text.slice(0, split) : text
+    const detail = split >= 0 ? text.slice(split + 2).trim() : ""
+    const button =
+        "inline-flex h-7 items-center gap-1 rounded-lg px-2.5 text-xs font-medium"
+    return (
+        <div
+            role="alert"
+            className="rounded-xl border border-destructive/25 bg-destructive/5 px-3.5 py-3 text-[13px]"
+        >
+            <div className="flex items-start gap-2.5">
+                <AlertCircle className="mt-0.5 size-4 shrink-0 text-destructive" />
+                <div className="min-w-0 flex-1">
+                    <p className="whitespace-pre-line break-words font-medium text-foreground">
+                        {headline}
+                    </p>
+                    {detail && (
+                        <p className="mt-1 whitespace-pre-line break-words text-xs text-muted-foreground">
+                            {detail}
+                        </p>
+                    )}
+                    {(openModelConfig || onRetry) && (
+                        <div className="mt-2.5 flex flex-wrap gap-2">
+                            {openModelConfig && (
+                                <button
+                                    type="button"
+                                    onClick={onOpenModelConfig}
+                                    className={cn(
+                                        button,
+                                        "bg-primary text-primary-foreground hover:opacity-90",
+                                    )}
+                                >
+                                    {dict.errors.llm.openModelSettings}
+                                </button>
+                            )}
+                            {onRetry && (
+                                <button
+                                    type="button"
+                                    onClick={onRetry}
+                                    className={cn(
+                                        button,
+                                        "border border-border bg-card text-foreground hover:bg-accent",
+                                    )}
+                                    data-testid="retry-button"
+                                >
+                                    <RotateCcw className="size-3.5" />
+                                    {dict.chat.retry}
+                                </button>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export function MessageList() {
+    const dict = useDictionary()
+    const openSettings = useUiStore((s) => s.openSettings)
+    const engine = useChatEngine()
+    const { messages } = engine
+    const endRef = useRef<HTMLDivElement>(null)
+    const prevCountRef = useRef(0)
+    const throttleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    // Keep the newest message in view; jump instantly on bulk loads
+    useEffect(() => {
+        if (!endRef.current || messages.length === 0) return
+        const prev = prevCountRef.current
+        prevCountRef.current = messages.length
+        if (prev === 0 || messages.length - prev > 1) {
+            endRef.current.scrollIntoView({ behavior: "instant", block: "end" })
+            return
+        }
+        if (!throttleRef.current) {
+            endRef.current.scrollIntoView({ behavior: "smooth", block: "end" })
+            throttleRef.current = setTimeout(() => {
+                throttleRef.current = null
+                endRef.current?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "end",
+                })
+            }, 150)
+        }
+    }, [messages])
+
+    const lastAssistantIndex = messages
+        .map((m) => m.role)
+        .lastIndexOf("assistant")
+    const lastUserIndex = messages.map((m) => m.role).lastIndexOf("user")
+
+    return (
+        <div className="space-y-4 px-4 pt-4 pb-2">
+            {messages.map((message, index) => {
+                const isRestored = engine.loadedMessageIdsRef.current.has(
+                    message.id,
+                )
+                return (
+                    <div
+                        key={message.id}
+                        className={cn(!isRestored && "animate-message-in")}
+                    >
+                        {message.role === "user" ? (
+                            <UserMessage
+                                message={message}
+                                index={index}
+                                isLast={index === lastUserIndex}
+                            />
+                        ) : message.role === "assistant" ? (
+                            <AssistantMessage
+                                message={message}
+                                index={index}
+                                isLastMessage={index === messages.length - 1}
+                                isLastAssistant={index === lastAssistantIndex}
+                            />
+                        ) : (
+                            <ErrorNotice
+                                text={getMessageTextContent(message)}
+                                openModelConfig={
+                                    !!(
+                                        message.metadata as
+                                            | { openModelConfig?: boolean }
+                                            | undefined
+                                    )?.openModelConfig
+                                }
+                                onOpenModelConfig={() => openSettings("models")}
+                                onRetry={
+                                    index === messages.length - 1 &&
+                                    !engine.isBusy &&
+                                    lastUserIndex >= 0
+                                        ? engine.retryLastMessage
+                                        : undefined
+                                }
+                            />
+                        )}
+                    </div>
+                )
+            })}
+            {engine.status === "submitted" &&
+                messages[messages.length - 1]?.role === "user" && (
+                    <div className="px-1 text-[13px]" aria-live="polite">
+                        <Shimmer as="span">{dict.reasoning.thinking}</Shimmer>
+                    </div>
+                )}
+            <div ref={endRef} />
+        </div>
+    )
+}

components/chat/message-text.ts

@@ -0,0 +1,64 @@
+import type { UIMessage } from "ai"
+
+/** A run of plain text, or an attached file / URL whose text was inlined */
+export interface TextSection {
+    type: "text" | "file" | "url"
+    content: string
+    filename?: string
+    charCount?: number
+    fileType?: "pdf" | "text" | "url"
+}
+
+// Matches the [PDF: ...], [File: ...] and [URL: ...] sections appended to the user's text
+export const APPENDED_FILE_SECTIONS_PATTERN =
+    /\n\n\[(PDF|File|URL):\s*[^\]]+\]\n[\s\S]*$/
+
+export function splitTextIntoFileSections(text: string): TextSection[] {
+    const sections: TextSection[] = []
+    const filePattern =
+        /\[(PDF|File|URL):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File|URL):|$)/g
+    let lastIndex = 0
+    let match: RegExpExecArray | null
+
+    while ((match = filePattern.exec(text)) !== null) {
+        const beforeText = text.slice(lastIndex, match.index).trim()
+        if (beforeText) sections.push({ type: "text", content: beforeText })
+
+        const sectionType = match[1].toLowerCase()
+        const fileType =
+            sectionType === "pdf"
+                ? "pdf"
+                : sectionType === "url"
+                  ? "url"
+                  : "text"
+        const content = match[3].trim()
+        sections.push({
+            type: sectionType === "url" ? "url" : "file",
+            content,
+            filename: match[2].trim(),
+            charCount: content.length,
+            fileType,
+        })
+        lastIndex = match.index + match[0].length
+    }
+
+    const remainingText = text.slice(lastIndex).trim()
+    if (remainingText) sections.push({ type: "text", content: remainingText })
+    if (sections.length === 0) sections.push({ type: "text", content: text })
+    return sections
+}
+
+export function getMessageTextContent(message: UIMessage): string {
+    if (!message.parts) return ""
+    return message.parts
+        .filter((part) => part.type === "text")
+        .map((part) => (part as { text: string }).text)
+        .join("\n")
+}
+
+/** Only the user's typed text, without appended file content */
+export function getUserOriginalText(message: UIMessage): string {
+    return getMessageTextContent(message)
+        .replace(APPENDED_FILE_SECTIONS_PATTERN, "")
+        .trim()
+}

components/chat/session-menu.tsx

@@ -0,0 +1,294 @@
+import { FileUp, Pencil, Plus, Search, Trash2 } from "lucide-react"
+import { useParams } from "next/navigation"
+import { useEffect, useRef, useState } from "react"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatRelativeTime } from "@/lib/relative-time"
+import { cn } from "@/lib/utils"
+import { useChatEngine } from "./chat-engine"
+
+/** Title shown for a session, with the default "New Chat" localized */
+export function useSessionTitle(): string {
+    const dict = useDictionary()
+    const { currentTitle } = useChatEngine()
+    return !currentTitle || currentTitle === "New Chat"
+        ? dict.workspace.untitled
+        : currentTitle
+}
+
+/**
+ * Popover listing saved diagrams: rename the current one, switch, delete,
+ * start a new one or open a file.
+ */
+export function SessionMenu({
+    children,
+    align = "start",
+    onOpenFile,
+}: {
+    children: React.ReactNode
+    align?: "start" | "center" | "end"
+    onOpenFile: () => void
+}) {
+    const dict = useDictionary()
+    const t = dict.sessionHistory
+    const params = useParams<{ lang: string }>()
+    const engine = useChatEngine()
+    const [open, setOpen] = useState(false)
+    const title = useSessionTitle()
+    const [query, setQuery] = useState("")
+    const [renaming, setRenaming] = useState(false)
+    const [draftTitle, setDraftTitle] = useState("")
+    const [toDelete, setToDelete] = useState<string | null>(null)
+    const renameRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        if (!open) {
+            setRenaming(false)
+            setQuery("")
+        }
+    }, [open])
+    useEffect(() => {
+        if (renaming) renameRef.current?.select()
+    }, [renaming])
+
+    const sessions = engine.sessions.filter((s) =>
+        s.title.toLowerCase().includes(query.trim().toLowerCase()),
+    )
+
+    const commitRename = async () => {
+        const next = draftTitle.trim()
+        setRenaming(false)
+        if (next && next !== title) await engine.renameSession(next)
+    }
+
+    return (
+        <>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>{children}</PopoverTrigger>
+                <PopoverContent
+                    align={align}
+                    className="flex max-h-[min(560px,80vh)] w-[340px] flex-col overflow-hidden rounded-xl p-0 shadow-pop"
+                >
+                    <div className="border-b border-border p-3">
+                        {renaming ? (
+                            <input
+                                ref={renameRef}
+                                value={draftTitle}
+                                onChange={(e) => setDraftTitle(e.target.value)}
+                                onBlur={commitRename}
+                                onKeyDown={(e) => {
+                                    // Enter that picks an IME candidate
+                                    // (Safari: keyCode 229)
+                                    if (
+                                        e.nativeEvent.isComposing ||
+                                        e.keyCode === 229
+                                    ) {
+                                        return
+                                    }
+                                    if (e.key === "Enter") commitRename()
+                                    if (e.key === "Escape") setRenaming(false)
+                                }}
+                                maxLength={100}
+                                aria-label={t.rename}
+                                className="h-8 w-full rounded-lg border border-foreground/20 bg-card px-2.5 text-[13px] font-medium outline-none"
+                            />
+                        ) : (
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    setDraftTitle(title)
+                                    setRenaming(true)
+                                }}
+                                className="group/rename flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left hover:bg-accent"
+                                data-testid="rename-session"
+                            >
+                                <span className="min-w-0 flex-1 truncate text-[13px] font-medium">
+                                    {title}
+                                </span>
+                                <Pencil className="size-3.5 shrink-0 text-muted-foreground" />
+                            </button>
+                        )}
+                        <div className="mt-2 flex gap-1.5">
+                            <button
+                                type="button"
+                                disabled={engine.isBusy}
+                                onClick={() => {
+                                    setOpen(false)
+                                    engine.newChat()
+                                }}
+                                className="flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg bg-primary text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
+                            >
+                                <Plus className="size-3.5" />
+                                {dict.nav.newChat}
+                            </button>
+                            <button
+                                type="button"
+                                disabled={engine.isBusy}
+                                onClick={() => {
+                                    setOpen(false)
+                                    onOpenFile()
+                                }}
+                                className="flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground disabled:opacity-40"
+                            >
+                                <FileUp className="size-3.5" />
+                                {dict.workspace.openFile}
+                            </button>
+                        </div>
+                    </div>
+
+                    {engine.sessions.length > 0 && (
+                        <div className="px-3 pt-3">
+                            <div className="relative">
+                                <Search className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-faint" />
+                                <input
+                                    value={query}
+                                    onChange={(e) => setQuery(e.target.value)}
+                                    placeholder={t.searchPlaceholder}
+                                    className="h-8 w-full rounded-lg bg-muted pr-2.5 pl-8 text-[13px] outline-none placeholder:text-faint"
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="min-h-0 flex-1 overflow-y-auto p-1.5 scrollbar-thin">
+                        {engine.sessions.length === 0 ? (
+                            <p className="px-3 py-6 text-center text-xs text-muted-foreground">
+                                {t.empty}
+                            </p>
+                        ) : sessions.length === 0 ? (
+                            <p className="px-3 py-6 text-center text-xs text-muted-foreground">
+                                {t.noResults}
+                            </p>
+                        ) : (
+                            sessions.map((session) => {
+                                const isCurrent =
+                                    session.id === engine.currentSessionId
+                                // The answer being written must stay in its
+                                // own chat
+                                const locked = engine.isBusy && !isCurrent
+                                const choose = () => {
+                                    if (locked) return
+                                    setOpen(false)
+                                    if (!isCurrent) {
+                                        engine.selectSession(session.id)
+                                    }
+                                }
+                                return (
+                                    // biome-ignore lint/a11y/useSemanticElements: contains the delete button
+                                    <div
+                                        key={session.id}
+                                        role="button"
+                                        tabIndex={locked ? -1 : 0}
+                                        aria-disabled={locked || undefined}
+                                        title={locked ? t.busyHint : undefined}
+                                        onClick={choose}
+                                        onKeyDown={(e) => {
+                                            if (e.target !== e.currentTarget)
+                                                return
+                                            if (
+                                                e.key === "Enter" ||
+                                                e.key === " "
+                                            ) {
+                                                e.preventDefault()
+                                                choose()
+                                            }
+                                        }}
+                                        className={cn(
+                                            "group/session flex cursor-pointer items-center gap-2.5 rounded-lg p-1.5 hover:bg-accent",
+                                            isCurrent && "bg-accent",
+                                            locked &&
+                                                "cursor-not-allowed opacity-50 hover:bg-transparent",
+                                        )}
+                                    >
+                                        <span className="sheet-light flex h-9 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-white">
+                                            {session.thumbnailDataUrl && (
+                                                // biome-ignore lint/performance/noImgElement: data URL thumbnail
+                                                <img
+                                                    src={
+                                                        session.thumbnailDataUrl
+                                                    }
+                                                    alt=""
+                                                    className="max-h-8 max-w-11 object-contain"
+                                                />
+                                            )}
+                                        </span>
+                                        <span className="min-w-0 flex-1">
+                                            <span className="block truncate text-[13px] text-foreground">
+                                                {session.title === "New Chat"
+                                                    ? dict.workspace.untitled
+                                                    : session.title}
+                                            </span>
+                                            <span className="block text-[11px] text-faint">
+                                                {formatRelativeTime(
+                                                    session.updatedAt,
+                                                    params.lang,
+                                                    t.justNow,
+                                                )}
+                                            </span>
+                                        </span>
+                                        <button
+                                            type="button"
+                                            disabled={
+                                                isCurrent && engine.isBusy
+                                            }
+                                            onClick={(e) => {
+                                                e.stopPropagation()
+                                                setToDelete(session.id)
+                                            }}
+                                            aria-label={t.deleteTitle}
+                                            className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-faint [@media(hover:hover)]:opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover/session:opacity-100 focus-visible:opacity-100"
+                                        >
+                                            <Trash2 className="size-3.5" />
+                                        </button>
+                                    </div>
+                                )
+                            })
+                        )}
+                    </div>
+                </PopoverContent>
+            </Popover>
+
+            <AlertDialog
+                open={!!toDelete}
+                onOpenChange={(o) => !o && setToDelete(null)}
+            >
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{t.deleteTitle}</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {t.deleteDescription}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            {dict.common.cancel}
+                        </AlertDialogCancel>
+                        <AlertDialogAction
+                            className="bg-destructive text-white hover:bg-destructive/90"
+                            onClick={() => {
+                                if (toDelete) engine.deleteSession(toDelete)
+                                setToDelete(null)
+                            }}
+                        >
+                            {dict.common.delete}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    )
+}

components/chat/tool-activity.tsx

@@ -0,0 +1,487 @@
+import {
+    AlertCircle,
+    Check,
+    ChevronDown,
+    Code2,
+    Copy,
+    Library,
+    PenTool,
+    Redo2,
+    RotateCcw,
+    Undo2,
+} from "lucide-react"
+import { useState } from "react"
+import { Shimmer } from "@/components/ai-elements/shimmer"
+import { CodeBlock } from "@/components/code-block"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { useCopy } from "@/lib/clipboard"
+import { formatMessage } from "@/lib/i18n/utils"
+import { cn, isMxCellXmlComplete } from "@/lib/utils"
+import { describeChanges } from "@/lib/version-text"
+import { useUiStore } from "@/stores/ui-store"
+import { type DiagramVersion, useVersionsStore } from "@/stores/versions-store"
+import { useChatEngine } from "./chat-engine"
+import type { DiagramOperation, ToolPartLike } from "./types"
+
+export function ToolInputDetails({ part }: { part: ToolPartLike }) {
+    const { input, state } = part
+    if (!input || typeof input !== "object") return null
+    if (typeof input.xml === "string" && input.xml) {
+        // Plain text while streaming; highlighting re-runs on every chunk
+        return state === "input-streaming" || state === "input-available" ? (
+            <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed text-muted-foreground scrollbar-thin">
+                {input.xml}
+            </pre>
+        ) : (
+            <CodeBlock code={input.xml} language="xml" />
+        )
+    }
+    if (Array.isArray(input.operations)) {
+        // Streamed or invalid input can hold anything: show only what React
+        // can render (an object in place of a string would crash the chat)
+        const shown = (input.operations as DiagramOperation[]).filter(
+            (op) =>
+                typeof (op as { operation?: unknown })?.operation === "string",
+        )
+        const text = (value: unknown) =>
+            typeof value === "string" ? value : ""
+        return (
+            <div className="space-y-2">
+                {shown.map((op, index) => (
+                    <div
+                        key={`${op.operation}-${text(op.cell_id)}-${index}`}
+                        className="overflow-hidden rounded-lg border border-border bg-card"
+                    >
+                        <div className="flex items-center gap-2 border-b border-border px-2.5 py-1 text-[11px]">
+                            <span className="font-medium text-foreground">
+                                {op.operation}
+                            </span>
+                            <span className="text-muted-foreground">
+                                {text(op.cell_id)}
+                            </span>
+                        </div>
+                        {text(op.new_xml) && (
+                            <pre className="overflow-x-auto whitespace-pre-wrap break-all px-2.5 py-1.5 font-mono text-[11px] text-muted-foreground">
+                                {text(op.new_xml)}
+                            </pre>
+                        )}
+                    </div>
+                ))}
+            </div>
+        )
+    }
+    if (Object.keys(input).length === 0) return null
+    return <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+}
+
+function toolText(part: ToolPartLike): string {
+    const { input } = part
+    if (!input || typeof input !== "object") return ""
+    if (typeof input.xml === "string" && input.xml) return input.xml
+    if (Array.isArray(input.operations)) {
+        return JSON.stringify(input.operations, null, 2)
+    }
+    return JSON.stringify(input, null, 2)
+}
+
+/** Picture of a version (SVG data URL), or what stands in for it */
+export function VersionThumb({
+    svg,
+    dimmed,
+    className,
+}: {
+    /** undefined or null: still being made; "": none could be made */
+    svg: string | null | undefined
+    dimmed?: boolean
+    className?: string
+}) {
+    const t = useDictionary().versions
+    if (svg) {
+        return (
+            // biome-ignore lint/performance/noImgElement: data URL thumbnail
+            <img
+                src={svg}
+                alt=""
+                className={cn(
+                    "object-contain transition-opacity",
+                    dimmed && "opacity-40",
+                    className,
+                )}
+            />
+        )
+    }
+    if (svg === "") {
+        return <span className="text-xs text-faint">{t.noPreview}</span>
+    }
+    return (
+        <Shimmer as="span" className="text-xs">
+            {t.rendering}
+        </Shimmer>
+    )
+}
+
+/**
+ * Card for one diagram version produced by a tool call. The latest shows
+ * its picture; older ones fold into one row (the picture opens Compare).
+ */
+function VersionCard({
+    part,
+    version,
+    index,
+    isLatest,
+}: {
+    part: ToolPartLike
+    version: DiagramVersion
+    index: number
+    isLatest: boolean
+}) {
+    const dict = useDictionary()
+    const t = dict.versions
+    const engine = useChatEngine()
+    const undoneVersionId = useVersionsStore((s) => s.undoneVersionId)
+    const onCanvasVersionId = useVersionsStore((s) => s.onCanvasVersionId)
+    const openCompare = useUiStore((s) => s.openCompare)
+    const [showCode, setShowCode] = useState(false)
+    const { copied, copy } = useCopy()
+
+    const isUndone = undoneVersionId === version.id
+    const isOnCanvas = onCanvasVersionId === version.id
+    const isEdit = part.type === "tool-edit_diagram"
+    // Undo/redo belongs to the newest change while it is (or was) on the
+    // canvas; after an older version was restored, this one is restored too
+    const canUndo =
+        isLatest && version.beforeXml !== undefined && (isOnCanvas || isUndone)
+    const title = isUndone ? t.undone : isEdit ? t.edited : t.created
+    const summary = version.fromScratch
+        ? formatMessage(t.totals, {
+              shapes: version.summary.shapesAdded,
+              edges: version.summary.edgesAdded,
+          })
+        : describeChanges(version.summary, t)
+    const badge = (
+        <span
+            className={cn(
+                "shrink-0 rounded-md px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
+                isOnCanvas
+                    ? "bg-marker-soft text-marker-ink"
+                    : "bg-muted text-muted-foreground",
+            )}
+        >
+            v{index + 1}
+        </span>
+    )
+    const actionClass =
+        "inline-flex h-7 shrink-0 items-center gap-1 rounded-lg px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40"
+    const restoreButton = (
+        <button
+            type="button"
+            disabled={engine.isBusy || isOnCanvas}
+            onClick={() => engine.restoreVersion(version.id)}
+            className={actionClass}
+            data-testid="version-restore"
+        >
+            <RotateCcw className="size-3.5" />
+            {formatMessage(t.restoreVersion, { n: index + 1 })}
+        </button>
+    )
+
+    if (!isLatest) {
+        return (
+            <div
+                className="flex items-center gap-2.5 rounded-xl border border-border bg-card p-1.5 pr-2"
+                data-testid="version-card"
+                data-tool-state={part.state}
+            >
+                <button
+                    type="button"
+                    onClick={() => openCompare(version.id)}
+                    className="sheet-light flex h-9 w-14 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-white hover:border-foreground/30"
+                    aria-label={t.compare}
+                    title={t.compare}
+                >
+                    <VersionThumb
+                        svg={version.svg}
+                        className="max-h-8 max-w-[52px]"
+                    />
+                </button>
+                {badge}
+                <div className="min-w-0 flex-1" title={summary}>
+                    <div className="truncate text-[13px] text-foreground">
+                        {title}
+                    </div>
+                    <div className="truncate text-xs text-muted-foreground">
+                        {summary}
+                    </div>
+                </div>
+                {restoreButton}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className={cn(
+                "overflow-hidden rounded-xl border border-border bg-card",
+                isOnCanvas && "border-foreground/15",
+            )}
+            data-testid="version-card"
+            data-tool-state={part.state}
+        >
+            <button
+                type="button"
+                onClick={() => openCompare(version.id)}
+                className="group/thumb sheet-light relative flex h-24 w-full items-center justify-center border-b border-border bg-white"
+                aria-label={t.compare}
+            >
+                <VersionThumb
+                    svg={version.svg}
+                    dimmed={isUndone}
+                    className="max-h-20 max-w-[88%]"
+                />
+                <span className="absolute right-2 bottom-2 rounded-md bg-black/60 px-1.5 py-0.5 text-[11px] text-white opacity-0 transition-opacity group-hover/thumb:opacity-100">
+                    {t.compare}
+                </span>
+            </button>
+            <div className="flex items-center gap-2.5 px-3 py-2.5">
+                {badge}
+                <div className="min-w-0 flex-1" title={summary}>
+                    <div className="truncate text-[13px] font-medium text-foreground">
+                        {title}
+                    </div>
+                    <div className="line-clamp-2 text-xs text-muted-foreground">
+                        {summary}
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    onClick={() => setShowCode((v) => !v)}
+                    aria-label={showCode ? t.hideCode : t.showCode}
+                    title={showCode ? t.hideCode : t.showCode}
+                    className="inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                    <Code2 className="size-4" />
+                </button>
+                {canUndo ? (
+                    <button
+                        type="button"
+                        disabled={engine.isBusy}
+                        onClick={() => engine.undoVersion(version.id)}
+                        className={actionClass}
+                        data-testid="version-undo"
+                    >
+                        {isUndone ? (
+                            <Redo2 className="size-3.5" />
+                        ) : (
+                            <Undo2 className="size-3.5" />
+                        )}
+                        {isUndone ? t.redo : t.undo}
+                    </button>
+                ) : (
+                    restoreButton
+                )}
+            </div>
+            {showCode && (
+                <div className="relative border-t border-border bg-surface-1 px-3 py-2.5">
+                    <button
+                        type="button"
+                        onClick={() => copy(toolText(part))}
+                        className="absolute top-2 right-2 z-10 inline-flex size-7 items-center justify-center rounded-lg bg-card text-muted-foreground shadow-float hover:text-foreground"
+                        aria-label={dict.chat.copyResponse}
+                    >
+                        {copied ? (
+                            <Check className="size-3.5" />
+                        ) : (
+                            <Copy className="size-3.5" />
+                        )}
+                    </button>
+                    <ToolInputDetails part={part} />
+                </div>
+            )}
+        </div>
+    )
+}
+
+/** Compact row for tool calls that are running, failed or produced no version */
+function ToolRow({
+    part,
+    icon,
+    label,
+    tone = "default",
+    detail,
+}: {
+    part: ToolPartLike
+    icon: React.ReactNode
+    label: React.ReactNode
+    tone?: "default" | "error" | "warning"
+    detail?: string
+}) {
+    const [open, setOpen] = useState(false)
+    const hasInput = !!part.input && Object.keys(part.input).length > 0
+    return (
+        <div
+            className={cn(
+                "overflow-hidden rounded-xl border border-border bg-card",
+                tone === "error" && "border-destructive/25",
+            )}
+            data-testid="tool-row"
+            data-tool-name={part.type?.replace("tool-", "")}
+            data-tool-state={part.state}
+        >
+            <button
+                type="button"
+                onClick={() => setOpen((v) => !v)}
+                disabled={!hasInput && !detail}
+                className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left"
+            >
+                <span
+                    className={cn(
+                        "inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-4",
+                        tone === "error" &&
+                            "bg-destructive/10 text-destructive",
+                        tone === "warning" && "bg-marker-soft text-marker-ink",
+                    )}
+                >
+                    {icon}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-[13px] text-foreground">
+                    {label}
+                </span>
+                {(hasInput || detail) && (
+                    <ChevronDown
+                        className={cn(
+                            "size-4 shrink-0 text-muted-foreground transition-transform",
+                            open && "rotate-180",
+                        )}
+                    />
+                )}
+            </button>
+            {open && (
+                <div className="space-y-2 border-t border-border bg-surface-1 px-3 py-2.5">
+                    {detail && (
+                        <p
+                            className={cn(
+                                "whitespace-pre-wrap break-words text-xs",
+                                tone === "error"
+                                    ? "text-destructive"
+                                    : "text-muted-foreground",
+                            )}
+                        >
+                            {detail}
+                        </p>
+                    )}
+                    {hasInput && <ToolInputDetails part={part} />}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export function ToolActivity({
+    part,
+    isLastMessage,
+}: {
+    part: ToolPartLike
+    isLastMessage: boolean
+}) {
+    const dict = useDictionary()
+    const t = dict.versions
+    const engine = useChatEngine()
+    const versions = useVersionsStore((s) => s.versions)
+    const toolName = part.type?.replace("tool-", "")
+    const { state, errorText, output } = part
+
+    const versionIndex = versions.findIndex(
+        (v) => v.toolCallId === part.toolCallId,
+    )
+    if (state === "output-available" && versionIndex >= 0) {
+        return (
+            <VersionCard
+                part={part}
+                version={versions[versionIndex]}
+                index={versionIndex}
+                isLatest={versionIndex === versions.length - 1}
+            />
+        )
+    }
+
+    if (toolName === "get_shape_library" && state !== "output-error") {
+        const isDone = state === "output-available"
+        return (
+            <ToolRow
+                part={part}
+                icon={<Library />}
+                label={
+                    isDone ? (
+                        t.libraryLoaded
+                    ) : (
+                        <Shimmer as="span">{t.loadingLibrary}</Shimmer>
+                    )
+                }
+                detail={
+                    isDone && typeof output === "string"
+                        ? `${output.slice(0, 600)}${output.length > 600 ? "…" : ""}`
+                        : undefined
+                }
+            />
+        )
+    }
+
+    if (state === "input-streaming" || state === "input-available") {
+        return (
+            <ToolRow
+                part={part}
+                icon={<PenTool />}
+                label={
+                    <Shimmer as="span">
+                        {toolName === "edit_diagram" ? t.editing : t.drawing}
+                    </Shimmer>
+                }
+            />
+        )
+    }
+
+    if (state === "output-error") {
+        const stopped = errorText === "Stopped by user"
+        // Incomplete XML means the output hit the length limit. Without an
+        // input the JSON was broken (the server repairs JSON cut short by
+        // the limit).
+        const truncated =
+            !stopped &&
+            (toolName === "display_diagram" || toolName === "append_diagram") &&
+            typeof part.input?.xml === "string" &&
+            !isMxCellXmlComplete(part.input.xml)
+        return (
+            <ToolRow
+                part={part}
+                icon={<AlertCircle />}
+                tone={stopped ? "default" : truncated ? "warning" : "error"}
+                label={
+                    stopped
+                        ? t.stopped
+                        : truncated
+                          ? dict.tools.truncated
+                          : isLastMessage && engine.isBusy
+                            ? t.failedRetrying
+                            : t.failed
+                }
+                detail={
+                    stopped
+                        ? undefined
+                        : truncated
+                          ? t.truncatedHint
+                          : (errorText ??
+                            (typeof output === "string" ? output : ""))
+                }
+            />
+        )
+    }
+
+    // Finished without a version (sessions saved before versions existed)
+    return (
+        <ToolRow
+            part={part}
+            icon={<PenTool />}
+            label={toolName === "edit_diagram" ? t.edited : t.created}
+        />
+    )
+}

components/chat/types.ts

@@ -0,0 +1,15 @@
+import type { DiagramOperation } from "@/packages/mcp-server/src/diagram-operations.ts"
+
+export type { DiagramOperation }
+
+export interface ToolPartLike {
+    type: string
+    toolCallId: string
+    state?: string
+    input?: {
+        xml?: string
+        operations?: DiagramOperation[]
+    } & Record<string, unknown>
+    output?: string
+    errorText?: string
+}

components/chat/use-diagram-streaming.ts

@@ -0,0 +1,223 @@
+"use client"
+
+import type { UIMessage } from "ai"
+import type { RefObject } from "react"
+import { useCallback, useEffect, useRef } from "react"
+import type { DiagramOperation, ToolPartLike } from "@/components/chat/types"
+import { useDiagram } from "@/contexts/diagram-context"
+import {
+    convertToLegalXml,
+    extractCompleteMxCells,
+    replaceNodes,
+} from "@/lib/utils"
+import { applyDiagramOperations } from "@/packages/mcp-server/src/diagram-operations.ts"
+import { BLANK_MXFILE } from "@/packages/mcp-server/src/pages.ts"
+
+// Helper to extract complete operations from streaming input
+function getCompleteOperations(
+    operations: DiagramOperation[] | undefined,
+): DiagramOperation[] {
+    if (!operations || !Array.isArray(operations)) return []
+    return operations.filter(
+        (op) =>
+            op &&
+            typeof op.operation === "string" &&
+            ["update", "add", "delete"].includes(op.operation) &&
+            typeof op.cell_id === "string" &&
+            op.cell_id.length > 0 &&
+            (op.operation === "delete" || typeof op.new_xml === "string"),
+    )
+}
+
+interface UseDiagramStreamingParams {
+    messages: UIMessage[]
+    processedToolCallsRef: RefObject<Set<string>>
+    editDiagramOriginalXmlRef: RefObject<Map<string, string>>
+    loadedMessageIdsRef: RefObject<Set<string>>
+}
+
+/**
+ * Draws AI tool output onto the canvas while it streams, as a preview that
+ * is not recorded in undo history.
+ *
+ * display_diagram: the complete mxCells written so far. edit_diagram: the
+ * complete operations applied to the diagram from before the call. The tool
+ * handler validates and commits the final result. Runs in the chat engine
+ * so streaming continues while the chat panel is collapsed.
+ */
+export function useDiagramStreaming({
+    messages,
+    processedToolCallsRef,
+    editDiagramOriginalXmlRef,
+    loadedMessageIdsRef,
+}: UseDiagramStreamingParams) {
+    const { chartXML, chartXMLRef, loadDiagram } = useDiagram()
+    const previousXML = useRef<string>("")
+    // Last processed XML per toolCallId, to skip redundant work while streaming
+    const lastProcessedXmlRef = useRef<Map<string, string>>(new Map())
+
+    // Reset when messages become empty (new chat or session switch), so
+    // cached examples work again after starting a new session
+    useEffect(() => {
+        if (messages.length === 0) {
+            previousXML.current = ""
+            lastProcessedXmlRef.current.clear()
+            processedToolCallsRef.current.clear()
+            editDiagramOriginalXmlRef.current.clear()
+        }
+    }, [messages.length, processedToolCallsRef, editDiagramOriginalXmlRef])
+
+    // Streaming preview of display_diagram: draw the complete cells written
+    // so far. The tool handler validates and loads the final diagram.
+    const handleDisplayChart = useCallback(
+        (xml: string) => {
+            const completeCells = extractCompleteMxCells(xml || "")
+            if (!completeCells) return
+            const convertedXml = convertToLegalXml(completeCells)
+            if (convertedXml === previousXML.current) return
+
+            // Skip this update while the cells written so far don't parse
+            const testDoc = new DOMParser().parseFromString(
+                `<root>${convertedXml}</root>`,
+                "text/xml",
+            )
+            if (testDoc.querySelector("parsererror")) return
+
+            try {
+                // Replace the first page's cells so other pages stay intact.
+                // An empty canvas gets a default mxfile to put the cells in.
+                const baseXML = chartXML || BLANK_MXFILE
+                const replacedXML = replaceNodes(baseXML, convertedXml)
+                previousXML.current = convertedXml
+                loadDiagram(replacedXML, true, "preview")
+            } catch (error) {
+                console.error("Error processing XML:", error)
+            }
+        },
+        [chartXML, loadDiagram],
+    )
+
+    useEffect(() => {
+        // Only the last message can still be streaming
+        const message = messages[messages.length - 1]
+        if (!message?.parts) return
+
+        // Messages restored from a saved session were applied before it was
+        // saved; the saved diagram is authoritative, so don't replay them
+        if (loadedMessageIdsRef.current.has(message.id)) return
+
+        // The diagram without streamed previews, as loaded last: the tool
+        // handler's result of an earlier edit is there before the chartXML
+        // state catches up. Undoing a failed edit's preview below changes it
+        // too, and an edit streaming right after must start from the undone
+        // diagram.
+        let baseXml = chartXMLRef.current
+
+        for (const part of message.parts) {
+            if (
+                part.type !== "tool-display_diagram" &&
+                part.type !== "tool-edit_diagram"
+            ) {
+                continue
+            }
+            const { toolCallId, state, input } = part as ToolPartLike
+
+            // Failed or stopped: if the original XML is still stored, the
+            // tool handler never ran (invalid JSON, or the user pressed
+            // stop), so undo the streamed preview here. Invalid JSON leaves
+            // no input, so check this first.
+            if (state === "output-error") {
+                const originalXml =
+                    editDiagramOriginalXmlRef.current.get(toolCallId)
+                if (originalXml) {
+                    editDiagramOriginalXmlRef.current.delete(toolCallId)
+                    loadDiagram(originalXml, true, "revert")
+                    baseXml = originalXml
+                }
+                continue
+            }
+
+            // Input complete, or the tool handler, a stop or an error took
+            // the call already: the tool handler loads the checked diagram.
+            // The messages update at most every 150 ms (useChat throttle in
+            // the chat engine), so they can still show the call streaming
+            // after that.
+            if (
+                state !== "input-streaming" ||
+                processedToolCallsRef.current.has(toolCallId)
+            ) {
+                processedToolCallsRef.current.add(toolCallId)
+                lastProcessedXmlRef.current.delete(toolCallId)
+                lastProcessedXmlRef.current.delete(`${toolCallId}-opCount`)
+                continue
+            }
+
+            if (part.type === "tool-display_diagram") {
+                const xml = input?.xml as string | undefined
+                // Skip if XML hasn't changed since last processing
+                if (!xml || lastProcessedXmlRef.current.get(toolCallId) === xml)
+                    continue
+                // Keep the diagram from before the preview, to undo it on a
+                // stop or an error
+                if (!editDiagramOriginalXmlRef.current.has(toolCallId)) {
+                    editDiagramOriginalXmlRef.current.set(
+                        toolCallId,
+                        baseXml || BLANK_MXFILE,
+                    )
+                }
+                handleDisplayChart(xml)
+                lastProcessedXmlRef.current.set(toolCallId, xml)
+                continue
+            }
+
+            // edit_diagram: apply operations incrementally for a preview.
+            // editDiagramOriginalXmlRef is shared with the tool handler.
+            if (!input?.operations) continue
+            const completeOps = getCompleteOperations(
+                input.operations as DiagramOperation[],
+            )
+            if (completeOps.length === 0) continue
+
+            // Capture the original XML when streaming starts
+            if (!editDiagramOriginalXmlRef.current.has(toolCallId)) {
+                if (!baseXml) {
+                    console.warn(
+                        "[edit_diagram streaming] No chart XML available",
+                    )
+                    continue
+                }
+                editDiagramOriginalXmlRef.current.set(toolCallId, baseXml)
+            }
+            const originalXml =
+                editDiagramOriginalXmlRef.current.get(toolCallId)
+            if (!originalXml) continue
+
+            // Skip if no change from last processed state
+            const countKey = `${toolCallId}-opCount`
+            const opCount = String(completeOps.length)
+            if (lastProcessedXmlRef.current.get(countKey) === opCount) continue
+            try {
+                const { result } = applyDiagramOperations(
+                    originalXml,
+                    completeOps,
+                )
+                // Load the full document so other pages stay intact
+                loadDiagram(result, true, "preview")
+                lastProcessedXmlRef.current.set(countKey, opCount)
+            } catch (e) {
+                console.warn(
+                    "[edit_diagram streaming] Operation failed:",
+                    e instanceof Error ? e.message : e,
+                )
+            }
+        }
+    }, [
+        messages,
+        handleDisplayChart,
+        chartXMLRef,
+        loadDiagram,
+        processedToolCallsRef,
+        editDiagramOriginalXmlRef,
+        loadedMessageIdsRef,
+    ])
+}

components/chat/use-versions.ts

@@ -0,0 +1,169 @@
+import type { RefObject } from "react"
+import { useEffect, useRef } from "react"
+import { toast } from "sonner"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { diffDiagrams, isSameDocument } from "@/lib/diagram-diff"
+import { clearHighlights, highlightCells } from "@/lib/drawio/editor-bridge"
+import { formatMessage } from "@/lib/i18n/utils"
+import { BLANK_MXFILE } from "@/packages/mcp-server/src/pages.ts"
+import { useVersionsStore } from "@/stores/versions-store"
+
+interface UseVersionsParams {
+    /** Index of the user message whose turn is running */
+    currentTurnRef: RefObject<number>
+    isBusy: boolean
+    /** Live busy state, for the restore toast's Undo that runs later */
+    isTurnActive: () => boolean
+    /** Changes when another chat comes on screen */
+    getChatGeneration: () => number
+}
+
+/**
+ * Turns every committed AI change into a version (card in the chat), marks
+ * the changed shapes on the canvas, and restores or undoes versions.
+ */
+export function useVersions({
+    currentTurnRef,
+    isBusy,
+    isTurnActive,
+    getChatGeneration,
+}: UseVersionsParams) {
+    const dict = useDictionary()
+    // chartXML changes with hand edits, undo and loads; the ref is the
+    // document on the canvas now
+    const {
+        loadDiagram,
+        getVersionSvg,
+        setCommitHandler,
+        chartXML,
+        chartXMLRef,
+    } = useDiagram()
+    // A restore commits too; that path must not add a version
+    const restoringRef = useRef(false)
+
+    // Registered once: re-registering on every render would leave a gap
+    // (effect cleanups run before the streaming hook commits). The handler
+    // only reads refs and stable functions.
+    useEffect(() => {
+        setCommitHandler(({ beforeXml, afterXml, toolCallId }) => {
+            if (restoringRef.current) return
+            const { summary, touchedIds, fromScratch } = diffDiagrams(
+                beforeXml,
+                afterXml,
+            )
+            const id = useVersionsStore.getState().addVersion({
+                xml: afterXml,
+                beforeXml,
+                turnIndex: currentTurnRef.current,
+                toolCallId,
+                summary,
+                fromScratch,
+            })
+            // Mark what changed, unless the whole diagram is new
+            if (!fromScratch) {
+                setTimeout(() => {
+                    const marker = getComputedStyle(document.documentElement)
+                        .getPropertyValue("--marker")
+                        .trim()
+                    highlightCells(touchedIds, marker || "#ffd84d")
+                }, 60)
+            }
+            // The picture is of the canvas: take it right away, before a
+            // newer version can be on it; once one is, this one gets none
+            // rather than the newer one's
+            const isNewest = () =>
+                useVersionsStore.getState().versions.at(-1)?.id === id
+            setTimeout(async () => {
+                const svg = isNewest() ? await getVersionSvg() : null
+                useVersionsStore
+                    .getState()
+                    .updateVersion(id, { svg: svg && isNewest() ? svg : "" })
+            }, 0)
+        })
+        return () => setCommitHandler(null)
+    }, [])
+
+    // A version is on the canvas (or its change undone) while the canvas
+    // holds that XML. Hand edits, Ctrl+Z or a new page end it, with an
+    // external draw.io too. Checked once an answer is done: its previews
+    // change the canvas on the way.
+    useEffect(() => {
+        if (isBusy || isTurnActive() || !chartXML) return
+        const store = useVersionsStore.getState()
+        const id = store.onCanvasVersionId ?? store.undoneVersionId
+        const version = store.versions.find((v) => v.id === id)
+        if (!version) return
+        const shown =
+            id === store.onCanvasVersionId
+                ? version.xml
+                : version.beforeXml || BLANK_MXFILE
+        if (isSameDocument(shown, chartXML)) return
+        store.clearCanvasFlags()
+        // Its Undo would also take the changes made since away
+        toast.dismiss("version-restored")
+    }, [chartXML, isBusy])
+
+    const apply = (xml: string) => {
+        restoringRef.current = true
+        try {
+            loadDiagram(xml, true, "commit")
+        } finally {
+            restoringRef.current = false
+        }
+        clearHighlights()
+    }
+
+    const restoreVersion = (versionId: string) => {
+        if (isTurnActive()) return
+        const store = useVersionsStore.getState()
+        const index = store.versions.findIndex((v) => v.id === versionId)
+        if (index < 0) return
+        // The canvas before the restore, to go back to it: a multi-page
+        // document is loaded in full, which Ctrl+Z cannot undo
+        const before = chartXMLRef.current
+        const wasOnCanvas = store.onCanvasVersionId
+        const wasUndone = store.undoneVersionId
+        const generation = getChatGeneration()
+        apply(store.versions[index].xml)
+        store.setOnCanvas(versionId)
+        toast.success(
+            formatMessage(dict.versions.restoredVersion, { n: index + 1 }),
+            {
+                id: "version-restored",
+                duration: 8000,
+                action: {
+                    label: dict.versions.undoRestore,
+                    onClick: () => {
+                        // Another chat is on screen, or an answer is
+                        // changing the canvas: the old canvas is not theirs
+                        if (!before || isTurnActive()) return
+                        if (getChatGeneration() !== generation) return
+                        apply(before)
+                        const now = useVersionsStore.getState()
+                        if (wasUndone) now.setUndone(wasUndone)
+                        else if (wasOnCanvas) now.setOnCanvas(wasOnCanvas)
+                    },
+                },
+            },
+        )
+    }
+
+    /** Undo the change of the latest version, or redo it when undone */
+    const undoVersion = (versionId: string) => {
+        if (isTurnActive()) return
+        const store = useVersionsStore.getState()
+        const version = store.versions.find((v) => v.id === versionId)
+        if (!version) return
+        if (store.undoneVersionId === versionId) {
+            apply(version.xml)
+            store.setOnCanvas(versionId)
+            return
+        }
+        if (version.beforeXml === undefined) return
+        apply(version.beforeXml || BLANK_MXFILE)
+        store.setUndone(versionId)
+    }
+
+    return { restoreVersion, undoVersion }
+}

components/chat/version-strip.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef } from "react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { cn } from "@/lib/utils"
+import { useUiStore } from "@/stores/ui-store"
+import { useVersionsStore } from "@/stores/versions-store"
+import { useChatEngine } from "./chat-engine"
+
+/** Row of version thumbnails under the panel header; click to compare */
+export function VersionStrip() {
+    const dict = useDictionary()
+    const versions = useVersionsStore((s) => s.versions)
+    const onCanvasVersionId = useVersionsStore((s) => s.onCanvasVersionId)
+    const openCompare = useUiStore((s) => s.openCompare)
+    const engine = useChatEngine()
+    const scrollRef = useRef<HTMLDivElement>(null)
+
+    // Keep the newest version in view
+    useEffect(() => {
+        const el = scrollRef.current
+        if (el) el.scrollTo({ left: el.scrollWidth, behavior: "smooth" })
+    }, [versions.length])
+
+    // Versions with no card in the chat: saved by older app versions, from
+    // a turn that was retried, or drawn by a call that then failed its
+    // screenshot check (a call still running gets its card when done)
+    const hasCardless = versions.some(
+        (v) =>
+            !v.toolCallId ||
+            !engine.messages.some((m) =>
+                m.parts?.some((p) => {
+                    const part = p as { toolCallId?: string; state?: string }
+                    return (
+                        part.toolCallId === v.toolCallId &&
+                        part.state !== "output-error"
+                    )
+                }),
+            ),
+    )
+    // One version with a card: the strip adds nothing to it
+    if (versions.length < 2 && !hasCardless) return null
+
+    return (
+        <div className="flex items-center gap-2 border-b border-border px-3.5 pt-1 pb-3">
+            <span className="shrink-0 text-xs text-muted-foreground">
+                {dict.versions.strip}
+            </span>
+            <div
+                ref={scrollRef}
+                className="flex min-w-0 flex-1 gap-1.5 overflow-x-auto p-1 scrollbar-thin"
+            >
+                {versions.map((version, index) => {
+                    const isCurrent = version.id === onCanvasVersionId
+                    return (
+                        <button
+                            key={version.id}
+                            type="button"
+                            onClick={() => openCompare(version.id)}
+                            title={`v${index + 1}${version.id === onCanvasVersionId ? ` · ${dict.versions.currentCanvas}` : ""}`}
+                            className={cn(
+                                "sheet-light relative flex h-12 w-[72px] shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-white transition-colors hover:border-foreground/30",
+                                // An outline with a gap reads on the white
+                                // picture in both themes
+                                isCurrent &&
+                                    "outline-2 outline-offset-2 outline-foreground",
+                            )}
+                            data-testid="version-thumb"
+                        >
+                            {version.svg && (
+                                // biome-ignore lint/performance/noImgElement: data URL thumbnail
+                                <img
+                                    src={version.svg}
+                                    alt=""
+                                    className="max-h-9 max-w-[62px] object-contain"
+                                />
+                            )}
+                            <span
+                                className={cn(
+                                    "absolute bottom-0.5 left-1 text-[10px] font-medium tabular-nums text-neutral-500",
+                                    isCurrent &&
+                                        "font-semibold text-neutral-900",
+                                )}
+                            >
+                                v{index + 1}
+                            </span>
+                        </button>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}

components/code-block.tsx

@@ -0,0 +1,53 @@
+"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

@@ -0,0 +1,363 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { prepareNewDiagram } from "@/packages/mcp-server/src/new-diagram.ts"
+
+// 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 prepared = prepareNewDiagram(xml)
+        if (prepared.ok) onDisplayChart(prepared.xml)
+
+        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

@@ -0,0 +1,44 @@
+"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,49 +1,147 @@
-"use client";
+"use client"
 
-import React, { useEffect, useState } from "react";
-import Image from "next/image";
-import { X } from "lucide-react";
+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"
 
-interface FilePreviewListProps {
-    files: File[];
-    onRemoveFile: (fileToRemove: File) => void;
+function formatCharCount(count: number): string {
+    if (count >= 1000) {
+        return `${(count / 1000).toFixed(1)}k`
+    }
+    return String(count)
 }
 
-export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
-    const [selectedImage, setSelectedImage] = useState<string | null>(null);
+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
+}
 
-    // Cleanup object URLs on unmount
+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 objectUrls = files
-            .filter((file) => file.type.startsWith("image/"))
-            .map((file) => URL.createObjectURL(file));
+        const currentUrls = imageUrlsRef.current
+        const newUrls = new Map<File, string>()
 
+        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
+    useEffect(() => {
         return () => {
-            objectUrls.forEach(URL.revokeObjectURL);
-        };
-    }, [files]);
+            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])
 
-    if (files.length === 0) return null;
+    if (files.length === 0 && (!urlData || urlData.size === 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 = file.type.startsWith("image/") ? URL.createObjectURL(file) : null;
+                    const imageUrl = imageUrls.get(file) || null
+                    const pdfInfo = pdfData.get(file)
                     return (
                         <div key={file.name + index} className="relative group">
                             <div
-                                className="w-20 h-20 border rounded-md overflow-hidden bg-muted cursor-pointer"
-                                onClick={() => imageUrl && setSelectedImage(imageUrl)}
+                                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)
+                                }
                             >
-                                {file.type.startsWith("image/") ? (
+                                {file.type.startsWith("image/") && imageUrl ? (
                                     <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}
@@ -54,15 +152,67 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                                 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="Remove file"
+                                aria-label={dict.file.removeFile}
                             >
                                 <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
@@ -72,7 +222,7 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                     <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="Close"
+                        aria-label={dict.common.close}
                     >
                         <X className="h-6 w-6" />
                     </button>
@@ -84,10 +234,11 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                             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,82 +0,0 @@
-"use client";
-
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} 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;
-}
-
-export function HistoryDialog({
-    showHistory,
-    onToggleHistory,
-}: HistoryDialogProps) {
-    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
-
-    return (
-        <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
-                <DialogHeader>
-                    <DialogTitle>Diagram History</DialogTitle>
-                    <DialogDescription>
-                        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">
-                        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"
-                                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={`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">
-                                    Version {index + 1}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                )}
-
-                <DialogFooter>
-                    <Button
-                        variant="outline"
-                        onClick={() => onToggleHistory(false)}
-                    >
-                        Close
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}

components/image-with-basepath.tsx

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,474 @@
+"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 { ProviderLogo } from "@/components/provider-logo"
+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
+}
+
+/**
+ * The model id without the provider or region prefix that the logo already
+ * shows: "nvidia/nemotron-3-ultra" and "global.anthropic.claude-opus-5-5"
+ * become "nemotron-3-ultra" and "claude-opus-5-5". The full id is in the
+ * tooltip and the list.
+ */
+export function shortModelName(id: string): string {
+    const name = id.slice(id.lastIndexOf("/") + 1)
+    const short = name.replace(
+        /^(?:(?:global|us|eu|apac|jp|au|ca|us-gov)\.)?[a-z][a-z0-9-]*\.(?=[a-z])/i,
+        "",
+    )
+    // Ids like "deepseek.r1-v1:0" name the vendor only in the prefix: drop
+    // just the region
+    if (!short || /^[a-z]\d/i.test(short)) {
+        return name.replace(/^(?:global|us|eu|apac|jp|au|ca|us-gov)\./i, "")
+    }
+    return short
+}
+
+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="min-w-0 max-w-44">
+            <ModelSelectorRoot open={open} onOpenChange={setOpen}>
+                <ModelSelectorTrigger asChild>
+                    <ButtonWithTooltip
+                        tooltipContent={tooltipContent}
+                        variant="ghost"
+                        size="sm"
+                        disabled={disabled}
+                        className={cn(
+                            "h-8 min-w-0 max-w-full shrink overflow-hidden gap-1.5 px-2 font-normal text-muted-foreground transition-[padding,background-color] duration-150 ease-in-out hover:bg-accent hover:text-foreground",
+                            !showLabel && "px-1.5 justify-center",
+                        )}
+                        // accessibility: expose label to screen readers
+                        aria-label={tooltipContent}
+                        data-testid="model-selector"
+                    >
+                        {selectedModel ? (
+                            <ProviderLogo
+                                provider={selectedModel.provider}
+                                className="size-3.5 flex-shrink-0 opacity-80"
+                            />
+                        ) : (
+                            <Bot className="h-4 w-4 flex-shrink-0" />
+                        )}
+                        {/* show/hide visible label based on measured width */}
+                        {showLabel ? (
+                            <span className="min-w-0 truncate text-xs">
+                                {selectedModel
+                                    ? shortModelName(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}
+                                                                // Unique value so same-named models highlight
+                                                                // separately; keywords keep search by name
+                                                                value={model.id}
+                                                                keywords={[
+                                                                    model.modelId,
+                                                                    providerLabel,
+                                                                ]}
+                                                                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.id}
+                                                                keywords={[
+                                                                    model.modelId,
+                                                                    providerLabel,
+                                                                ]}
+                                                                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/provider-credentials-fields.tsx

@@ -0,0 +1,298 @@
+"use client"
+
+import { Key, Link2, Tag } from "lucide-react"
+import type { ReactNode } from "react"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
+import {
+    chatRequestUrl,
+    normalizeBaseUrl,
+    PROVIDER_INFO,
+    type ProviderName,
+} from "@/lib/types/model-config"
+
+// Logical secret field. The caller owns the actual input — plaintext for the
+// user dialog, write-only masked for the admin panel — supplied via
+// renderSecret. That (and the optional test action) are the only genuine
+// differences between the two screens; the field structure is shared here.
+export type SecretField =
+    | "apiKey"
+    | "awsAccessKeyId"
+    | "awsSecretAccessKey"
+    | "vertexApiKey"
+
+// AWS regions offered for Bedrock (shared by both screens)
+export const AWS_REGIONS: Array<[string, string]> = [
+    ["us-east-1", "N. Virginia"],
+    ["us-east-2", "Ohio"],
+    ["us-west-2", "Oregon"],
+    ["eu-west-1", "Ireland"],
+    ["eu-west-2", "London"],
+    ["eu-west-3", "Paris"],
+    ["eu-central-1", "Frankfurt"],
+    ["ap-south-1", "Mumbai"],
+    ["ap-northeast-1", "Tokyo"],
+    ["ap-northeast-2", "Seoul"],
+    ["ap-southeast-1", "Singapore"],
+    ["ap-southeast-2", "Sydney"],
+    ["sa-east-1", "São Paulo"],
+]
+
+interface ProviderCredentialsFieldsProps {
+    provider: ProviderName
+    // Plain (non-secret) field values — secrets are owned by renderSecret
+    name?: string
+    baseUrl?: string
+    awsRegion?: string
+    disabled?: boolean
+    // Update a plain text field
+    onChange: (field: "name" | "baseUrl" | "awsRegion", value: string) => void
+    // Render the control for a secret field. The caller may include trailing
+    // UI (e.g. the user dialog's inline Test button + validation error); the
+    // shared component only supplies the label above it.
+    renderSecret: (opts: { field: SecretField; id: string }) => ReactNode
+    // Extra content after the fields — used for the Bedrock test row and the
+    // EdgeOne test button, which aren't beside a credential input.
+    footer?: ReactNode
+}
+
+// Display name + per-provider credential inputs, shared by the user
+// ModelConfigDialog and the admin Models panel.
+export function ProviderCredentialsFields({
+    provider,
+    name,
+    baseUrl,
+    awsRegion,
+    disabled,
+    onChange,
+    renderSecret,
+    footer,
+}: ProviderCredentialsFieldsProps) {
+    const dict = useDictionary()
+    const info = PROVIDER_INFO[provider]
+    const baseUrlLabel = formatMessage(dict.modelConfig.baseUrlWithExample, {
+        example: info.defaultBaseUrl || "https://api.example.com/v1",
+    })
+    const requestUrl = baseUrl ? chatRequestUrl(provider, baseUrl) : null
+
+    // EdgeOne needs no credentials — the caller supplies just a test button
+    if (provider === "edgeone") {
+        return <div className="space-y-5">{footer}</div>
+    }
+
+    return (
+        <div className="space-y-5">
+            {/* Display Name */}
+            <div className="space-y-2">
+                <Label
+                    htmlFor="provider-name"
+                    className="text-xs font-medium flex items-center gap-1.5"
+                >
+                    <Tag className="h-3.5 w-3.5 text-muted-foreground" />
+                    {dict.modelConfig.displayName}
+                </Label>
+                <Input
+                    id="provider-name"
+                    value={name ?? ""}
+                    disabled={disabled}
+                    onChange={(e) => onChange("name", e.target.value)}
+                    placeholder={info.label}
+                    className="h-9"
+                />
+            </div>
+
+            {provider === "bedrock" ? (
+                <>
+                    {/* AWS Access Key ID */}
+                    <div className="space-y-2">
+                        <Label
+                            htmlFor="aws-access-key-id"
+                            className="text-xs font-medium flex items-center gap-1.5"
+                        >
+                            <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                            {dict.modelConfig.awsAccessKeyId}
+                        </Label>
+                        {renderSecret({
+                            field: "awsAccessKeyId",
+                            id: "aws-access-key-id",
+                        })}
+                    </div>
+
+                    {/* AWS Secret Access Key */}
+                    <div className="space-y-2">
+                        <Label
+                            htmlFor="aws-secret-access-key"
+                            className="text-xs font-medium flex items-center gap-1.5"
+                        >
+                            <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                            {dict.modelConfig.awsSecretAccessKey}
+                        </Label>
+                        {renderSecret({
+                            field: "awsSecretAccessKey",
+                            id: "aws-secret-access-key",
+                        })}
+                    </div>
+
+                    {/* AWS Region */}
+                    <div className="space-y-2">
+                        <Label
+                            htmlFor="aws-region"
+                            className="text-xs font-medium flex items-center gap-1.5"
+                        >
+                            <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
+                            {dict.modelConfig.awsRegion}
+                        </Label>
+                        <Select
+                            value={awsRegion || ""}
+                            disabled={disabled}
+                            onValueChange={(v) => onChange("awsRegion", v)}
+                        >
+                            <SelectTrigger
+                                id="aws-region"
+                                className="h-9 font-mono text-xs hover:bg-accent"
+                            >
+                                <SelectValue
+                                    placeholder={dict.modelConfig.selectRegion}
+                                />
+                            </SelectTrigger>
+                            <SelectContent className="max-h-64">
+                                {AWS_REGIONS.map(([region, label]) => (
+                                    <SelectItem key={region} value={region}>
+                                        {region} ({label})
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </div>
+                </>
+            ) : provider === "vertexai" ? (
+                <>
+                    {/* Vertex AI API Key (Express Mode) */}
+                    <div className="space-y-2">
+                        <Label
+                            htmlFor="vertex-api-key"
+                            className="text-xs font-medium flex items-center gap-1.5"
+                        >
+                            <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                            {dict.modelConfig.apiKey}
+                        </Label>
+                        {renderSecret({
+                            field: "vertexApiKey",
+                            id: "vertex-api-key",
+                        })}
+                    </div>
+
+                    {/* Base URL (optional) */}
+                    <div className="space-y-2">
+                        <Label
+                            htmlFor="vertex-base-url"
+                            className="text-xs font-medium flex items-center gap-1.5"
+                        >
+                            <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
+                            {baseUrlLabel}
+                        </Label>
+                        <Input
+                            id="vertex-base-url"
+                            value={baseUrl ?? ""}
+                            disabled={disabled}
+                            onChange={(e) =>
+                                onChange("baseUrl", e.target.value)
+                            }
+                            placeholder={dict.modelConfig.customEndpoint}
+                            className="h-9 font-mono text-xs"
+                        />
+                    </div>
+                </>
+            ) : (
+                <>
+                    {/* API Key, with a link to where the provider issues keys */}
+                    <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                            <Label
+                                htmlFor="api-key"
+                                className="text-xs font-medium flex items-center gap-1.5"
+                            >
+                                <Key className="h-3.5 w-3.5 text-muted-foreground" />
+                                {dict.modelConfig.apiKey}
+                                {provider === "ollama" &&
+                                    ` ${dict.modelConfig.optional}`}
+                            </Label>
+                            {info.apiKeyUrl && (
+                                <a
+                                    href={info.apiKeyUrl}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="text-xs text-primary hover:underline"
+                                >
+                                    {dict.modelConfig.getApiKey}
+                                </a>
+                            )}
+                        </div>
+                        {renderSecret({ field: "apiKey", id: "api-key" })}
+                    </div>
+
+                    {/* Base URL */}
+                    <div className="space-y-2">
+                        <Label
+                            htmlFor="base-url"
+                            className="text-xs font-medium flex items-center gap-1.5"
+                        >
+                            <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
+                            {baseUrlLabel}
+                        </Label>
+                        <Input
+                            id="base-url"
+                            value={baseUrl ?? ""}
+                            disabled={disabled}
+                            onChange={(e) =>
+                                onChange("baseUrl", e.target.value)
+                            }
+                            // Drop a pasted endpoint path such as /chat/completions
+                            onBlur={(e) => {
+                                const normalized = normalizeBaseUrl(
+                                    e.target.value,
+                                )
+                                if (normalized !== e.target.value) {
+                                    onChange("baseUrl", normalized)
+                                }
+                            }}
+                            placeholder={
+                                info.defaultBaseUrl ||
+                                dict.modelConfig.customEndpoint
+                            }
+                            className="h-9 rounded-xl font-mono text-xs"
+                        />
+                        {requestUrl && (
+                            <p className="text-xs text-muted-foreground font-mono break-all">
+                                {formatMessage(dict.modelConfig.requestUrl, {
+                                    url: requestUrl,
+                                })}
+                            </p>
+                        )}
+                        {provider === "minimax" && (
+                            <p className="text-xs text-muted-foreground">
+                                {dict.modelConfig.minimaxBaseUrlHint}
+                            </p>
+                        )}
+                        {provider === "mimo" && (
+                            <p className="text-xs text-muted-foreground">
+                                {dict.modelConfig.mimoBaseUrlHint}
+                            </p>
+                        )}
+                    </div>
+                </>
+            )}
+
+            {footer}
+        </div>
+    )
+}

components/provider-logo.tsx

@@ -0,0 +1,36 @@
+import { Cloud, Server, Sparkles } from "lucide-react"
+import { PROVIDER_LOGO_MAP, type ProviderName } from "@/lib/types/model-config"
+import { cn } from "@/lib/utils"
+
+// Provider logo from models.dev, with Lucide fallbacks for providers
+// that have no logo there
+export function ProviderLogo({
+    provider,
+    className,
+}: {
+    provider: ProviderName
+    className?: string
+}) {
+    if (provider === "bedrock") {
+        return <Cloud className={cn("size-4", className)} />
+    }
+    if (provider === "sglang") {
+        return <Server className={cn("size-4", className)} />
+    }
+    if (provider === "doubao") {
+        return <Sparkles className={cn("size-4", className)} />
+    }
+
+    const logoName = PROVIDER_LOGO_MAP[provider] || provider
+    return (
+        // biome-ignore lint/performance/noImgElement: External URL from models.dev
+        <img
+            alt=""
+            aria-hidden="true"
+            className={cn("size-4 dark:invert", className)}
+            height={16}
+            src={`https://models.dev/logos/${logoName}.svg`}
+            width={16}
+        />
+    )
+}

components/quota-limit-toast.tsx

@@ -0,0 +1,147 @@
+"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,48 +0,0 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog";
-
-interface ResetWarningModalProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onClear: () => void;
-}
-
-export function ResetWarningModal({
-    open,
-    onOpenChange,
-    onClear,
-}: ResetWarningModalProps) {
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Clear Everything?</DialogTitle>
-                    <DialogDescription>
-                        This will clear the current conversation and reset the
-                        diagram. This action cannot be undone.
-                    </DialogDescription>
-                </DialogHeader>
-                <DialogFooter>
-                    <Button
-                        variant="outline"
-                        onClick={() => onOpenChange(false)}
-                    >
-                        Cancel
-                    </Button>
-                    <Button variant="destructive" onClick={onClear}>
-                        Clear Everything
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}

components/save-dialog.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { cn } from "@/lib/utils"
+
+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")
+
+    // The default name each time the dialog opens; a chat title that comes
+    // while it is open (the chat is saved meanwhile) keeps what was typed
+    const wasOpenRef = useRef(false)
+    useEffect(() => {
+        if (open && !wasOpenRef.current) setFilename(defaultFilename)
+        wasOpenRef.current = open
+    }, [open, defaultFilename])
+
+    const handleSave = () => {
+        const finalFilename = filename.trim() || defaultFilename
+        onSave(finalFilename, format)
+        onOpenChange(false)
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        // Enter that picks an IME candidate (Safari: keyCode 229)
+        if (e.nativeEvent.isComposing || e.keyCode === 229) return
+        if (e.key === "Enter") {
+            e.preventDefault()
+            handleSave()
+        }
+    }
+
+    const FORMAT_OPTIONS = [
+        {
+            value: "drawio" as const,
+            label: dict.save.formats.drawio,
+            hint: dict.save.hints.drawio,
+            extension: ".drawio",
+        },
+        {
+            value: "png" as const,
+            label: dict.save.formats.png,
+            hint: dict.save.hints.png,
+            extension: ".png",
+        },
+        {
+            value: "svg" as const,
+            label: dict.save.formats.svg,
+            hint: dict.save.hints.svg,
+            extension: ".svg",
+        },
+        {
+            value: "xmlsvg" as const,
+            label: dict.save.formats.xmlsvg,
+            hint: dict.save.hints.xmlsvg,
+            extension: ".drawio.svg",
+        },
+    ]
+
+    const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format)
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle>{dict.save.title}</DialogTitle>
+                    <DialogDescription>
+                        {dict.save.description}
+                    </DialogDescription>
+                </DialogHeader>
+                <div className="space-y-4">
+                    <div
+                        role="radiogroup"
+                        aria-label={dict.save.format}
+                        className="grid grid-cols-2 gap-2"
+                    >
+                        {FORMAT_OPTIONS.map((opt) => (
+                            // biome-ignore lint/a11y/useSemanticElements: styled radio tile
+                            <button
+                                key={opt.value}
+                                type="button"
+                                role="radio"
+                                aria-checked={format === opt.value}
+                                onClick={() => setFormat(opt.value)}
+                                className={cn(
+                                    "rounded-lg border border-border p-3 text-left transition-colors hover:border-foreground/30",
+                                    format === opt.value &&
+                                        "border-foreground bg-accent",
+                                )}
+                            >
+                                <span className="block text-[13px] font-medium text-foreground">
+                                    {opt.label}
+                                </span>
+                                <span className="mt-0.5 block text-xs text-muted-foreground">
+                                    {opt.hint}
+                                </span>
+                            </button>
+                        ))}
+                    </div>
+                    <div className="space-y-2">
+                        <label
+                            htmlFor="export-filename"
+                            className="text-sm font-medium"
+                        >
+                            {dict.save.filename}
+                        </label>
+                        {/* One field: the name, then its extension */}
+                        <div className="flex h-9 items-center overflow-hidden rounded-md border border-input focus-within:ring-2 focus-within:ring-ring/40">
+                            <input
+                                id="export-filename"
+                                value={filename}
+                                onChange={(e) => setFilename(e.target.value)}
+                                onKeyDown={handleKeyDown}
+                                placeholder={dict.save.filenamePlaceholder}
+                                autoFocus
+                                onFocus={(e) => e.target.select()}
+                                className="h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
+                            />
+                            <span className="shrink-0 pr-3 text-sm text-muted-foreground">
+                                {currentFormat?.extension || ".drawio"}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        onClick={() => onOpenChange(false)}
+                    >
+                        {dict.common.cancel}
+                    </Button>
+                    <Button onClick={handleSave}>
+                        {dict.workspace.export}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

components/settings-dialog.tsx

@@ -0,0 +1,593 @@
+import {
+    Github,
+    Info,
+    KeyRound,
+    Monitor,
+    Moon,
+    Palette,
+    SlidersHorizontal,
+    Sun,
+    Terminal,
+} from "lucide-react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
+import { toast } from "sonner"
+import { useChatEngine } from "@/components/chat/chat-engine"
+import { ModelConfigDialog } from "@/components/model-config-dialog"
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { BrandMark } from "@/components/workspace/brand-mark"
+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"
+import { cn } from "@/lib/utils"
+import {
+    type SendShortcut,
+    type ThemePreference,
+    useSettingsStore,
+} from "@/stores/settings-store"
+import { type SettingsTab, useUiStore } from "@/stores/ui-store"
+
+const LANGUAGE_LABELS: Record<Locale, string> = {
+    en: "English",
+    zh: "中文",
+    ja: "日本語",
+    "zh-Hant": "繁體中文",
+}
+
+function Row({
+    label,
+    description,
+    htmlFor,
+    children,
+    stacked = false,
+}: {
+    label: string
+    description?: string
+    htmlFor?: string
+    children: React.ReactNode
+    stacked?: boolean
+}) {
+    return (
+        <div
+            className={cn(
+                "py-4 first:pt-1",
+                stacked
+                    ? "space-y-3"
+                    : "flex items-center justify-between gap-6",
+            )}
+        >
+            <div className="min-w-0 space-y-0.5">
+                <label
+                    htmlFor={htmlFor}
+                    className="block text-[13px] font-medium text-foreground"
+                >
+                    {label}
+                </label>
+                {description && (
+                    <p className="max-w-[34em] text-xs text-muted-foreground">
+                        {description}
+                    </p>
+                )}
+            </div>
+            <div className={cn(!stacked && "shrink-0")}>{children}</div>
+        </div>
+    )
+}
+
+function Segmented<T extends string>({
+    value,
+    options,
+    onChange,
+    label,
+}: {
+    value: T
+    options: { value: T; label: string; icon?: React.ReactNode }[]
+    onChange: (value: T) => void
+    label: string
+}) {
+    return (
+        <div
+            role="radiogroup"
+            aria-label={label}
+            className="inline-flex rounded-lg bg-muted p-0.5"
+        >
+            {options.map((option) => (
+                // biome-ignore lint/a11y/useSemanticElements: styled segmented control
+                <button
+                    key={option.value}
+                    type="button"
+                    role="radio"
+                    aria-checked={value === option.value}
+                    onClick={() => onChange(option.value)}
+                    className={cn(
+                        "inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors [&_svg]:size-3.5",
+                        value === option.value &&
+                            "bg-card font-medium text-foreground shadow-float",
+                    )}
+                >
+                    {option.icon}
+                    {option.label}
+                </button>
+            ))}
+        </div>
+    )
+}
+
+function AppearanceTab() {
+    const dict = useDictionary()
+    const t = dict.settings
+    const engine = useChatEngine()
+    const router = useRouter()
+    const pathname = usePathname() || "/"
+    const search = useSearchParams()
+    const theme = useSettingsStore((s) => s.theme)
+    const setTheme = useSettingsStore((s) => s.setTheme)
+    const minimalStyle = useSettingsStore((s) => s.minimalStyle)
+    const setMinimalStyle = useSettingsStore((s) => s.setMinimalStyle)
+    const currentLang =
+        (pathname.split("/").filter(Boolean)[0] as Locale) || i18n.defaultLocale
+
+    // The page mounts anew in the other language: the chat is saved first
+    // (it may not be yet), and its session goes into the new URL
+    const changeLanguage = (lang: string) =>
+        engine.leavePage((sessionId) => {
+            localStorage.setItem(STORAGE_KEYS.locale, lang)
+            // The page reloads in the new language; close settings as before
+            useUiStore.getState().setSettingsOpen(false)
+            // Keep the desktop app's menu language in sync
+            window.electronAPI
+                ?.setUserLocale?.(lang)
+                .catch((error: unknown) => {
+                    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 params = new URLSearchParams(search?.toString())
+            if (sessionId) params.set("session", sessionId)
+            const query = params.toString() ? `?${params.toString()}` : ""
+            router.push((parts.join("/") || "/") + query)
+        })
+
+    return (
+        <div className="divide-y divide-border">
+            <Row label={t.theme} description={t.themeDescription}>
+                <Segmented<ThemePreference>
+                    label={t.theme}
+                    value={theme}
+                    onChange={setTheme}
+                    options={[
+                        { value: "light", label: t.themeLight, icon: <Sun /> },
+                        {
+                            value: "dark",
+                            label: t.themeDarkMode,
+                            icon: <Moon />,
+                        },
+                        {
+                            value: "system",
+                            label: t.themeSystem,
+                            icon: <Monitor />,
+                        },
+                    ]}
+                />
+            </Row>
+            <Row label={t.language} description={t.languageDescription}>
+                <Select
+                    value={currentLang}
+                    onValueChange={changeLanguage}
+                    // Not while an answer runs: the page mounts anew
+                    disabled={engine.isBusy}
+                >
+                    <SelectTrigger
+                        id="language-select"
+                        className="h-8 w-[132px] rounded-lg"
+                    >
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {i18n.locales.map((locale) => (
+                            <SelectItem key={locale} value={locale}>
+                                {LANGUAGE_LABELS[locale]}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </Row>
+            <Row label={t.diagramStyle} description={t.diagramStyleDescription}>
+                <Segmented<"styled" | "minimal">
+                    label={t.diagramStyle}
+                    value={minimalStyle ? "minimal" : "styled"}
+                    onChange={(value) => setMinimalStyle(value === "minimal")}
+                    options={[
+                        { value: "styled", label: dict.chat.styledMode },
+                        { value: "minimal", label: dict.chat.minimalStyle },
+                    ]}
+                />
+            </Row>
+        </div>
+    )
+}
+
+function AdvancedTab({ open }: { open: boolean }) {
+    const dict = useDictionary()
+    const t = dict.settings
+    const settings = useSettingsStore()
+    const [accessCode, setAccessCode] = useState("")
+    const [accessCodeRequired, setAccessCodeRequired] = useState(
+        () => localStorage.getItem(STORAGE_KEYS.accessCodeRequired) === "true",
+    )
+    const [isVerifying, setIsVerifying] = useState(false)
+    const [accessError, setAccessError] = useState("")
+    const [httpProxy, setHttpProxy] = useState("")
+    const [httpsProxy, setHttpsProxy] = useState("")
+    const [isApplyingProxy, setIsApplyingProxy] = useState(false)
+    const isElectron =
+        typeof window !== "undefined" && !!window.electronAPI?.isElectron
+
+    useEffect(() => {
+        if (!open) return
+        setAccessCode(localStorage.getItem(STORAGE_KEYS.accessCode) || "")
+        setAccessError("")
+        // Re-check on every open: a stale cached value would hide the field
+        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_KEYS.accessCodeRequired,
+                    String(required),
+                )
+                setAccessCodeRequired(required)
+            })
+            .catch(() => {})
+        window.electronAPI?.getProxy?.().then((config: any) => {
+            setHttpProxy(config.httpProxy || "")
+            setHttpsProxy(config.httpsProxy || "")
+        })
+    }, [open])
+
+    const saveAccessCode = async () => {
+        setAccessError("")
+        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) {
+                setAccessError(data.message || dict.errors.invalidAccessCode)
+                return
+            }
+            localStorage.setItem(STORAGE_KEYS.accessCode, accessCode.trim())
+            toast.success(t.accessCodeSaved)
+        } catch {
+            setAccessError(dict.errors.networkError)
+        } finally {
+            setIsVerifying(false)
+        }
+    }
+
+    const applyProxy = async () => {
+        if (!window.electronAPI?.setProxy) return
+        const isValid = (url: string) =>
+            !url || url.startsWith("http://") || url.startsWith("https://")
+        const http = httpProxy.trim()
+        const https = httpsProxy.trim()
+        if (!isValid(http) || !isValid(https)) {
+            toast.error(t.proxyInvalid)
+            return
+        }
+        setIsApplyingProxy(true)
+        try {
+            const result = await window.electronAPI.setProxy({
+                httpProxy: http || undefined,
+                httpsProxy: https || undefined,
+            })
+            if (result.success) toast.success(t.proxyApplied)
+            else toast.error(result.error || t.proxyFailed)
+        } catch {
+            toast.error(t.proxyFailed)
+        } finally {
+            setIsApplyingProxy(false)
+        }
+    }
+
+    return (
+        <div className="divide-y divide-border">
+            {accessCodeRequired && (
+                <Row
+                    label={t.accessCode}
+                    description={t.accessCodeDescription}
+                    htmlFor="access-code"
+                    stacked
+                >
+                    <div className="flex gap-2">
+                        <Input
+                            id="access-code"
+                            type="password"
+                            value={accessCode}
+                            onChange={(e) => setAccessCode(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault()
+                                    saveAccessCode()
+                                }
+                            }}
+                            placeholder={t.accessCodePlaceholder}
+                            autoComplete="off"
+                            className="h-9"
+                        />
+                        <Button
+                            onClick={saveAccessCode}
+                            disabled={isVerifying || !accessCode.trim()}
+                            className="h-9 rounded-lg px-4"
+                        >
+                            {isVerifying ? "…" : dict.common.save}
+                        </Button>
+                    </div>
+                    {accessError && (
+                        <p className="text-xs text-destructive">
+                            {accessError}
+                        </p>
+                    )}
+                </Row>
+            )}
+            <Row label={t.sendShortcut} description={t.sendShortcutDescription}>
+                <Select
+                    value={settings.sendShortcut}
+                    onValueChange={(value) =>
+                        settings.setSendShortcut(value as SendShortcut)
+                    }
+                >
+                    <SelectTrigger
+                        id="send-shortcut-select"
+                        className="h-8 w-auto rounded-lg"
+                    >
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="enter">{t.enterToSend}</SelectItem>
+                        <SelectItem value="ctrl-enter">
+                            {t.ctrlEnterToSend}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
+            </Row>
+            <Row
+                label={t.diagramValidation}
+                description={t.diagramValidationDescription}
+                htmlFor="vlm-validation"
+            >
+                <Switch
+                    id="vlm-validation"
+                    checked={settings.vlmValidationEnabled}
+                    onCheckedChange={settings.setVlmValidationEnabled}
+                />
+            </Row>
+            <Row
+                label={t.maxOutputTokens}
+                description={t.maxOutputTokensDescription}
+                htmlFor="max-output-tokens"
+            >
+                <Input
+                    id="max-output-tokens"
+                    type="text"
+                    inputMode="numeric"
+                    value={settings.maxOutputTokens}
+                    onChange={(e) =>
+                        settings.setMaxOutputTokens(e.target.value)
+                    }
+                    placeholder="64000"
+                    className="h-8 w-28 text-sm"
+                />
+            </Row>
+            <Row
+                label={t.customSystemMessage}
+                description={t.customSystemMessageDescription}
+                htmlFor="custom-system-message"
+                stacked
+            >
+                <Textarea
+                    id="custom-system-message"
+                    value={settings.customSystemMessage}
+                    onChange={(e) =>
+                        settings.setCustomSystemMessage(e.target.value)
+                    }
+                    placeholder={t.customSystemMessagePlaceholder}
+                    className="max-h-[180px] min-h-[96px] text-sm"
+                    maxLength={5000}
+                />
+            </Row>
+            {isElectron && (
+                <Row label={t.proxy} description={t.proxyDescription} stacked>
+                    <div className="space-y-2">
+                        <Input
+                            id="http-proxy"
+                            value={httpProxy}
+                            onChange={(e) => setHttpProxy(e.target.value)}
+                            placeholder={`${t.httpProxy}: http://proxy:8080`}
+                            className="h-9"
+                        />
+                        <Input
+                            id="https-proxy"
+                            value={httpsProxy}
+                            onChange={(e) => setHttpsProxy(e.target.value)}
+                            placeholder={`${t.httpsProxy}: http://proxy:8080`}
+                            className="h-9"
+                        />
+                        <Button
+                            onClick={applyProxy}
+                            disabled={isApplyingProxy}
+                            className="h-9 w-full rounded-lg"
+                        >
+                            {isApplyingProxy ? "…" : t.applyProxy}
+                        </Button>
+                    </div>
+                </Row>
+            )}
+        </div>
+    )
+}
+
+function AboutTab() {
+    const dict = useDictionary()
+    const pathname = usePathname() || "/"
+    const lang = pathname.split("/").filter(Boolean)[0] || i18n.defaultLocale
+    const showAbout = process.env.NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE === "true"
+    const isSelfHosted = process.env.NEXT_PUBLIC_SELFHOSTED === "true"
+    const aboutPath = `/${lang}/about${lang === "zh" ? "/cn" : lang === "ja" ? "/ja" : ""}`
+
+    return (
+        <div className="space-y-5 pt-1">
+            <div className="flex items-center gap-3">
+                <BrandMark className="size-10 rounded-xl" />
+                <div>
+                    <div className="text-[15px] font-semibold">
+                        Next AI Draw.io
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                        {dict.settings.appVersion} {process.env.APP_VERSION}
+                    </div>
+                </div>
+            </div>
+            {/* MCP server card, hidden on self-hosted deployments */}
+            {!isSelfHosted && (
+                <a
+                    href="https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 rounded-xl border border-border p-3.5 transition-colors hover:border-foreground/25"
+                >
+                    <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted">
+                        <Terminal className="size-4 text-muted-foreground" />
+                    </span>
+                    <span className="min-w-0">
+                        <span className="block text-[13px] font-medium">
+                            {dict.examples.mcpServer}
+                        </span>
+                        <span className="block text-xs text-muted-foreground">
+                            {dict.examples.mcpDescription}
+                        </span>
+                    </span>
+                </a>
+            )}
+            <div className="flex flex-wrap gap-2">
+                <a
+                    href="https://github.com/DayuanJiang/next-ai-draw-io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-border px-3 text-xs text-muted-foreground hover:text-foreground"
+                >
+                    <Github className="size-3.5" />
+                    GitHub
+                </a>
+                {showAbout && (
+                    <a
+                        href={aboutPath}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-border px-3 text-xs text-muted-foreground hover:text-foreground"
+                    >
+                        <Info className="size-3.5" />
+                        {dict.settings.projectWebsite}
+                    </a>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export function SettingsDialog() {
+    const dict = useDictionary()
+    const t = dict.settings
+    const engine = useChatEngine()
+    const open = useUiStore((s) => s.settingsOpen)
+    const setOpen = useUiStore((s) => s.setSettingsOpen)
+    const tab = useUiStore((s) => s.settingsTab)
+    const setTab = useUiStore((s) => s.setSettingsTab)
+
+    const tabs: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
+        { id: "models", label: t.tabModels, icon: <KeyRound /> },
+        { id: "appearance", label: t.tabAppearance, icon: <Palette /> },
+        { id: "advanced", label: t.tabAdvanced, icon: <SlidersHorizontal /> },
+        { id: "about", label: t.tabAbout, icon: <Info /> },
+    ]
+    const current = tabs.find((item) => item.id === tab) ?? tabs[0]
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent className="flex h-[min(640px,88vh)] max-w-[calc(100%-1.5rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl lg:flex-row">
+                {/* On top below 1024 px: beside the model settings' own
+                    provider list it would leave too little width */}
+                <nav className="flex shrink-0 gap-1 overflow-x-auto border-b border-border bg-surface-1 p-2 lg:w-52 lg:flex-col lg:overflow-visible lg:border-r lg:border-b-0 lg:p-3">
+                    <DialogTitle className="hidden px-2 pt-1 pb-3 text-[15px] lg:block">
+                        {t.title}
+                    </DialogTitle>
+                    {tabs.map((item) => (
+                        <button
+                            key={item.id}
+                            type="button"
+                            onClick={() => setTab(item.id)}
+                            className={cn(
+                                "flex h-8 shrink-0 items-center gap-2 rounded-lg px-2.5 text-[13px] text-muted-foreground hover:text-foreground [&_svg]:size-4",
+                                tab === item.id &&
+                                    "bg-card font-medium text-foreground shadow-float",
+                            )}
+                            data-testid={`settings-tab-${item.id}`}
+                        >
+                            {item.icon}
+                            {item.label}
+                        </button>
+                    ))}
+                </nav>
+                <section className="flex min-h-0 min-w-0 flex-1 flex-col">
+                    <DialogDescription className="sr-only">
+                        {t.description}
+                    </DialogDescription>
+                    {tab === "models" ? (
+                        <ModelConfigDialog
+                            open={open}
+                            modelConfig={engine.modelConfig}
+                        />
+                    ) : (
+                        <div className="min-h-0 flex-1 overflow-y-auto px-6 pt-5 pb-6 scrollbar-thin">
+                            <h2 className="mb-2 text-[15px] font-semibold">
+                                {current.label}
+                            </h2>
+                            {tab === "appearance" && <AppearanceTab />}
+                            {tab === "advanced" && <AdvancedTab open={open} />}
+                            {tab === "about" && <AboutTab />}
+                        </div>
+                    )}
+                </section>
+            </DialogContent>
+        </Dialog>
+    )
+}