test: add Vitest and Playwright testing infrastructure

- Add Vitest for unit tests (39 tests)
  - cached-responses.test.ts
  - ai-providers.test.ts
  - chat-helpers.test.ts
  - utils.test.ts
- Add Playwright for E2E tests (3 smoke tests)
  - Homepage load
  - Japanese locale
  - Settings dialog
- Add CI workflow (.github/workflows/test.yml)
- Add vitest.config.mts and playwright.config.ts
- Update .gitignore for test artifacts

.github/workflows/test.yml

@@ -0,0 +1,63 @@
+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@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run check
+
+      - name: Run unit tests
+        run: npm run test -- --run
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
+      - 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@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -14,6 +14,8 @@ packages/*/dist
 
 # testing
 /coverage
+/playwright-report/
+/test-results/
 
 # next.js
 /.next/

package.json

@@ -25,7 +25,9 @@
         "dist:mac": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac",
         "dist:win": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --win",
         "dist:linux": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --linux",
-        "dist:all": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac --win --linux"
+        "dist:all": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac --win --linux",
+        "test": "vitest",
+        "test:e2e": "playwright test"
     },
     "dependencies": {
         "@ai-sdk/amazon-bedrock": "^4.0.1",
@@ -66,7 +68,6 @@
         "cmdk": "^1.1.1",
         "idb": "^8.0.3",
         "js-tiktoken": "^1.0.21",
-        "jsdom": "^27.0.0",
         "jsonrepair": "^3.13.1",
         "lucide-react": "^0.562.0",
         "motion": "^12.23.25",
@@ -103,13 +104,19 @@
     "devDependencies": {
         "@anthropic-ai/tokenizer": "^0.0.4",
         "@biomejs/biome": "^2.3.10",
+        "@playwright/test": "^1.57.0",
         "@tailwindcss/postcss": "^4",
         "@tailwindcss/typography": "^0.5.19",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.1",
+        "@testing-library/user-event": "^14.6.1",
         "@types/negotiator": "^0.6.4",
         "@types/node": "^24.0.0",
         "@types/pako": "^2.0.3",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@vitejs/plugin-react": "^5.1.2",
+        "@vitest/coverage-v8": "^4.0.16",
         "concurrently": "^9.2.1",
         "cross-env": "^10.1.0",
         "electron": "^39.2.7",
@@ -118,10 +125,13 @@
         "eslint": "9.39.2",
         "eslint-config-next": "16.1.1",
         "husky": "^9.1.7",
+        "jsdom": "^27.4.0",
         "lint-staged": "^16.2.7",
         "shx": "^0.4.0",
         "tailwindcss": "^4",
         "typescript": "^5",
+        "vite-tsconfig-paths": "^6.0.3",
+        "vitest": "^4.0.16",
         "wait-on": "^9.0.3",
         "wrangler": "4.54.0"
     },

playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "@playwright/test"
+
+export default defineConfig({
+    testDir: "./tests/e2e",
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: "html",
+    webServer: {
+        command: process.env.CI
+            ? "npm run build && npm run start"
+            : "npm run dev",
+        port: process.env.CI ? 6001 : 6002,
+        reuseExistingServer: !process.env.CI,
+        timeout: 120 * 1000,
+    },
+    use: {
+        baseURL: process.env.CI
+            ? "http://localhost:6001"
+            : "http://localhost:6002",
+        trace: "on-first-retry",
+    },
+    projects: [
+        {
+            name: "chromium",
+            use: { browserName: "chromium" },
+        },
+    ],
+})

tests/e2e/smoke.spec.ts

@@ -0,0 +1,51 @@
+import { expect, test } from "@playwright/test"
+
+test.describe("Smoke Tests", () => {
+    test("homepage loads without errors", async ({ page }) => {
+        const errors: string[] = []
+        page.on("pageerror", (err) => errors.push(err.message))
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await expect(page).toHaveTitle(/Draw\.io/i, { timeout: 10000 })
+
+        // Wait for draw.io iframe to be present
+        const iframe = page.locator("iframe")
+        await expect(iframe).toBeVisible({ timeout: 30000 })
+
+        expect(errors).toEqual([])
+    })
+
+    test("Japanese locale page loads", async ({ page }) => {
+        const errors: string[] = []
+        page.on("pageerror", (err) => errors.push(err.message))
+
+        await page.goto("/ja", { waitUntil: "networkidle" })
+        await expect(page).toHaveTitle(/Draw\.io/i, { timeout: 10000 })
+
+        const iframe = page.locator("iframe")
+        await expect(iframe).toBeVisible({ timeout: 30000 })
+
+        expect(errors).toEqual([])
+    })
+
+    test("settings dialog opens", async ({ page }) => {
+        await page.goto("/")
+
+        // Wait for page to load
+        await page
+            .locator("iframe")
+            .waitFor({ state: "visible", timeout: 30000 })
+
+        // Click settings button (gear icon)
+        const settingsButton = page.locator(
+            'button[aria-label*="settings"], button:has(svg[class*="lucide-settings"])',
+        )
+        if (await settingsButton.isVisible()) {
+            await settingsButton.click()
+            // Check if settings dialog appears
+            await expect(page.locator('[role="dialog"]')).toBeVisible({
+                timeout: 5000,
+            })
+        }
+    })
+})

tests/unit/ai-providers.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest"
+import { supportsImageInput, supportsPromptCaching } from "@/lib/ai-providers"
+
+describe("supportsPromptCaching", () => {
+    it("returns true for Claude models", () => {
+        expect(supportsPromptCaching("claude-sonnet-4-5")).toBe(true)
+        expect(supportsPromptCaching("anthropic.claude-3-5-sonnet")).toBe(true)
+        expect(supportsPromptCaching("us.anthropic.claude-3-5-sonnet")).toBe(
+            true,
+        )
+        expect(supportsPromptCaching("eu.anthropic.claude-3-5-sonnet")).toBe(
+            true,
+        )
+    })
+
+    it("returns false for non-Claude models", () => {
+        expect(supportsPromptCaching("gpt-4o")).toBe(false)
+        expect(supportsPromptCaching("gemini-pro")).toBe(false)
+        expect(supportsPromptCaching("deepseek-chat")).toBe(false)
+    })
+})
+
+describe("supportsImageInput", () => {
+    it("returns true for models with vision capability", () => {
+        expect(supportsImageInput("gpt-4-vision")).toBe(true)
+        expect(supportsImageInput("qwen-vl")).toBe(true)
+        expect(supportsImageInput("deepseek-vl")).toBe(true)
+    })
+
+    it("returns false for Kimi K2 models without vision", () => {
+        expect(supportsImageInput("kimi-k2")).toBe(false)
+        expect(supportsImageInput("moonshot/kimi-k2")).toBe(false)
+    })
+
+    it("returns false for DeepSeek text models", () => {
+        expect(supportsImageInput("deepseek-chat")).toBe(false)
+        expect(supportsImageInput("deepseek-coder")).toBe(false)
+    })
+
+    it("returns false for Qwen text models", () => {
+        expect(supportsImageInput("qwen-turbo")).toBe(false)
+        expect(supportsImageInput("qwen-plus")).toBe(false)
+    })
+
+    it("returns true for Claude and GPT models by default", () => {
+        expect(supportsImageInput("claude-sonnet-4-5")).toBe(true)
+        expect(supportsImageInput("gpt-4o")).toBe(true)
+        expect(supportsImageInput("gemini-pro")).toBe(true)
+    })
+})

tests/unit/cached-responses.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest"
+import {
+    CACHED_EXAMPLE_RESPONSES,
+    findCachedResponse,
+} from "@/lib/cached-responses"
+
+describe("findCachedResponse", () => {
+    it("returns cached response for exact match without image", () => {
+        const result = findCachedResponse(
+            "Give me a **animated connector** diagram of transformer's architecture",
+            false,
+        )
+        expect(result).toBeDefined()
+        expect(result?.xml).toContain("Transformer Architecture")
+    })
+
+    it("returns cached response for exact match with image", () => {
+        const result = findCachedResponse("Replicate this in aws style", true)
+        expect(result).toBeDefined()
+        expect(result?.xml).toContain("AWS")
+    })
+
+    it("returns undefined for non-matching prompt", () => {
+        const result = findCachedResponse(
+            "random prompt that doesn't exist",
+            false,
+        )
+        expect(result).toBeUndefined()
+    })
+
+    it("returns undefined when hasImage doesn't match", () => {
+        // This prompt exists but requires hasImage=true
+        const result = findCachedResponse("Replicate this in aws style", false)
+        expect(result).toBeUndefined()
+    })
+
+    it("returns undefined for partial match", () => {
+        const result = findCachedResponse("Give me a diagram", false)
+        expect(result).toBeUndefined()
+    })
+
+    it("returns response for Draw a cat prompt", () => {
+        const result = findCachedResponse("Draw a cat for me", false)
+        expect(result).toBeDefined()
+        expect(result?.xml).toContain("ellipse")
+    })
+
+    it("all cached responses have non-empty xml", () => {
+        for (const response of CACHED_EXAMPLE_RESPONSES) {
+            expect(response.xml).not.toBe("")
+            expect(response.xml.length).toBeGreaterThan(0)
+        }
+    })
+})

tests/unit/chat-helpers.test.ts

@@ -0,0 +1,246 @@
+// @vitest-environment node
+import { describe, expect, it } from "vitest"
+
+// Test the helper functions from chat route
+// These are re-implemented here for testing since they're not exported
+
+const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+const MAX_FILES = 5
+
+function validateFileParts(messages: any[]): {
+    valid: boolean
+    error?: string
+} {
+    const lastMessage = messages[messages.length - 1]
+    const fileParts =
+        lastMessage?.parts?.filter((p: any) => p.type === "file") || []
+
+    if (fileParts.length > MAX_FILES) {
+        return {
+            valid: false,
+            error: `Too many files. Maximum ${MAX_FILES} allowed.`,
+        }
+    }
+
+    for (const filePart of fileParts) {
+        if (filePart.url?.startsWith("data:")) {
+            const base64Data = filePart.url.split(",")[1]
+            if (base64Data) {
+                const sizeInBytes = Math.ceil((base64Data.length * 3) / 4)
+                if (sizeInBytes > MAX_FILE_SIZE) {
+                    return {
+                        valid: false,
+                        error: `File exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit.`,
+                    }
+                }
+            }
+        }
+    }
+
+    return { valid: true }
+}
+
+function isMinimalDiagram(xml: string): boolean {
+    const stripped = xml.replace(/\s/g, "")
+    return !stripped.includes('id="2"')
+}
+
+function replaceHistoricalToolInputs(messages: any[]): any[] {
+    return messages.map((msg) => {
+        if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
+            return msg
+        }
+        const replacedContent = msg.content
+            .map((part: any) => {
+                if (part.type === "tool-call") {
+                    const toolName = part.toolName
+                    if (
+                        !part.input ||
+                        typeof part.input !== "object" ||
+                        Object.keys(part.input).length === 0
+                    ) {
+                        return null
+                    }
+                    if (
+                        toolName === "display_diagram" ||
+                        toolName === "edit_diagram"
+                    ) {
+                        return {
+                            ...part,
+                            input: {
+                                placeholder:
+                                    "[XML content replaced - see current diagram XML in system context]",
+                            },
+                        }
+                    }
+                }
+                return part
+            })
+            .filter(Boolean)
+        return { ...msg, content: replacedContent }
+    })
+}
+
+describe("validateFileParts", () => {
+    it("returns valid for no files", () => {
+        const messages = [
+            { role: "user", parts: [{ type: "text", text: "hello" }] },
+        ]
+        expect(validateFileParts(messages)).toEqual({ valid: true })
+    })
+
+    it("returns valid for files under limit", () => {
+        const smallBase64 = btoa("x".repeat(100))
+        const messages = [
+            {
+                role: "user",
+                parts: [
+                    {
+                        type: "file",
+                        url: `data:image/png;base64,${smallBase64}`,
+                    },
+                ],
+            },
+        ]
+        expect(validateFileParts(messages)).toEqual({ valid: true })
+    })
+
+    it("returns error for too many files", () => {
+        const messages = [
+            {
+                role: "user",
+                parts: Array(6)
+                    .fill(null)
+                    .map(() => ({
+                        type: "file",
+                        url: "data:image/png;base64,abc",
+                    })),
+            },
+        ]
+        const result = validateFileParts(messages)
+        expect(result.valid).toBe(false)
+        expect(result.error).toContain("Too many files")
+    })
+
+    it("returns error for file exceeding size limit", () => {
+        // Create base64 that decodes to > 2MB
+        const largeBase64 = btoa("x".repeat(3 * 1024 * 1024))
+        const messages = [
+            {
+                role: "user",
+                parts: [
+                    {
+                        type: "file",
+                        url: `data:image/png;base64,${largeBase64}`,
+                    },
+                ],
+            },
+        ]
+        const result = validateFileParts(messages)
+        expect(result.valid).toBe(false)
+        expect(result.error).toContain("exceeds")
+    })
+})
+
+describe("isMinimalDiagram", () => {
+    it("returns true for empty diagram", () => {
+        const xml = '<mxCell id="0"/><mxCell id="1" parent="0"/>'
+        expect(isMinimalDiagram(xml)).toBe(true)
+    })
+
+    it("returns false for diagram with content", () => {
+        const xml =
+            '<mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="Hello"/>'
+        expect(isMinimalDiagram(xml)).toBe(false)
+    })
+
+    it("handles whitespace correctly", () => {
+        const xml = '  <mxCell id="0"/>  <mxCell id="1" parent="0"/>  '
+        expect(isMinimalDiagram(xml)).toBe(true)
+    })
+})
+
+describe("replaceHistoricalToolInputs", () => {
+    it("replaces display_diagram tool inputs with placeholder", () => {
+        const messages = [
+            {
+                role: "assistant",
+                content: [
+                    {
+                        type: "tool-call",
+                        toolName: "display_diagram",
+                        input: { xml: "<mxCell...>" },
+                    },
+                ],
+            },
+        ]
+        const result = replaceHistoricalToolInputs(messages)
+        expect(result[0].content[0].input.placeholder).toContain(
+            "XML content replaced",
+        )
+    })
+
+    it("replaces edit_diagram tool inputs with placeholder", () => {
+        const messages = [
+            {
+                role: "assistant",
+                content: [
+                    {
+                        type: "tool-call",
+                        toolName: "edit_diagram",
+                        input: { operations: [] },
+                    },
+                ],
+            },
+        ]
+        const result = replaceHistoricalToolInputs(messages)
+        expect(result[0].content[0].input.placeholder).toContain(
+            "XML content replaced",
+        )
+    })
+
+    it("removes tool calls with invalid inputs", () => {
+        const messages = [
+            {
+                role: "assistant",
+                content: [
+                    {
+                        type: "tool-call",
+                        toolName: "display_diagram",
+                        input: {},
+                    },
+                    {
+                        type: "tool-call",
+                        toolName: "display_diagram",
+                        input: null,
+                    },
+                ],
+            },
+        ]
+        const result = replaceHistoricalToolInputs(messages)
+        expect(result[0].content).toHaveLength(0)
+    })
+
+    it("preserves non-assistant messages", () => {
+        const messages = [{ role: "user", content: "hello" }]
+        const result = replaceHistoricalToolInputs(messages)
+        expect(result).toEqual(messages)
+    })
+
+    it("preserves other tool calls", () => {
+        const messages = [
+            {
+                role: "assistant",
+                content: [
+                    {
+                        type: "tool-call",
+                        toolName: "other_tool",
+                        input: { foo: "bar" },
+                    },
+                ],
+            },
+        ]
+        const result = replaceHistoricalToolInputs(messages)
+        expect(result[0].content[0].input).toEqual({ foo: "bar" })
+    })
+})

tests/unit/utils.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest"
+import { cn, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
+
+describe("isMxCellXmlComplete", () => {
+    it("returns false for empty/null input", () => {
+        expect(isMxCellXmlComplete("")).toBe(false)
+        expect(isMxCellXmlComplete(null)).toBe(false)
+        expect(isMxCellXmlComplete(undefined)).toBe(false)
+    })
+
+    it("returns true for self-closing mxCell", () => {
+        const xml =
+            '<mxCell id="2" value="Hello" style="rounded=1;" vertex="1" parent="1"/>'
+        expect(isMxCellXmlComplete(xml)).toBe(true)
+    })
+
+    it("returns true for mxCell with closing tag", () => {
+        const xml = `<mxCell id="2" value="Hello" vertex="1" parent="1">
+            <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
+        </mxCell>`
+        expect(isMxCellXmlComplete(xml)).toBe(true)
+    })
+
+    it("returns false for truncated mxCell", () => {
+        const xml =
+            '<mxCell id="2" value="Hello" style="rounded=1;" vertex="1" parent'
+        expect(isMxCellXmlComplete(xml)).toBe(false)
+    })
+
+    it("returns false for mxCell with unclosed geometry", () => {
+        const xml = `<mxCell id="2" value="Hello" vertex="1" parent="1">
+            <mxGeometry x="100" y="100" width="120"`
+        expect(isMxCellXmlComplete(xml)).toBe(false)
+    })
+
+    it("returns true for multiple complete mxCells", () => {
+        const xml = `<mxCell id="2" value="A" vertex="1" parent="1"/>
+            <mxCell id="3" value="B" vertex="1" parent="1"/>`
+        expect(isMxCellXmlComplete(xml)).toBe(true)
+    })
+})
+
+describe("wrapWithMxFile", () => {
+    it("wraps empty string with default structure", () => {
+        const result = wrapWithMxFile("")
+        expect(result).toContain("<mxfile>")
+        expect(result).toContain("<mxGraphModel>")
+        expect(result).toContain('<mxCell id="0"/>')
+        expect(result).toContain('<mxCell id="1" parent="0"/>')
+    })
+
+    it("wraps raw mxCell content", () => {
+        const xml = '<mxCell id="2" value="Hello"/>'
+        const result = wrapWithMxFile(xml)
+        expect(result).toContain("<mxfile>")
+        expect(result).toContain(xml)
+        expect(result).toContain("</mxfile>")
+    })
+
+    it("returns full mxfile unchanged", () => {
+        const fullXml =
+            '<mxfile><diagram name="Page-1"><mxGraphModel></mxGraphModel></diagram></mxfile>'
+        const result = wrapWithMxFile(fullXml)
+        expect(result).toBe(fullXml)
+    })
+
+    it("handles whitespace in input", () => {
+        const result = wrapWithMxFile("   ")
+        expect(result).toContain("<mxfile>")
+    })
+})
+
+describe("cn (class name utility)", () => {
+    it("merges class names", () => {
+        expect(cn("foo", "bar")).toBe("foo bar")
+    })
+
+    it("handles conditional classes", () => {
+        expect(cn("foo", false && "bar", "baz")).toBe("foo baz")
+    })
+
+    it("merges tailwind classes correctly", () => {
+        expect(cn("px-2", "px-4")).toBe("px-4")
+        expect(cn("text-red-500", "text-blue-500")).toBe("text-blue-500")
+    })
+})

vitest.config.mts

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config"
+import react from "@vitejs/plugin-react"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default defineConfig({
+    plugins: [tsconfigPaths(), react()],
+    test: {
+        environment: "jsdom",
+        include: ["tests/**/*.test.{ts,tsx}"],
+    },
+})