From 150eb1ff63278e1b428307fe04ad185fbeb3f86d Mon Sep 17 00:00:00 2001
From: Dayuan Jiang <34411969+DayuanJiang@users.noreply.github.com>
Date: Sat, 6 Dec 2025 12:46:40 +0900
Subject: [PATCH] chore: add Biome for formatting and linting (#116)

- Add Biome as formatter and linter (replaces Prettier)
- Configure Husky + lint-staged for pre-commit hooks
- Add VS Code settings for format on save
- Ignore components/ui/ (shadcn generated code)
- Remove semicolons, use 4-space indent
- Reformat all files to new style
---
 .eslintrc.json                      |   5 +-
 .husky/pre-commit                   |   1 +
 .vscode/settings.json               |  23 +
 app/about/cn/page.tsx               | 227 +++++--
 app/about/ja/page.tsx               | 254 ++++++--
 app/about/page.tsx                  | 276 ++++++--
 app/api/chat/route.ts               | 507 ++++++++-------
 app/api/config/route.ts             |  13 +-
 app/api/log-feedback/route.ts       | 201 +++---
 app/api/log-save/route.ts           | 122 ++--
 app/globals.css                     | 350 +++++-----
 app/layout.tsx                      |  68 +-
 app/page.tsx                        |  97 +--
 app/robots.ts                       |  10 +-
 app/sitemap.ts                      |  10 +-
 biome.json                          |  59 ++
 components.json                     |  40 +-
 components/button-with-tooltip.tsx  |  20 +-
 components/chat-example-panel.tsx   |  55 +-
 components/chat-input.tsx           | 315 +++++----
 components/chat-message-display.tsx | 575 +++++++++++------
 components/chat-panel.tsx           | 331 +++++-----
 components/code-block.tsx           |  32 +-
 components/error-toast.tsx          |  23 +-
 components/file-preview-list.tsx    |  36 +-
 components/history-dialog.tsx       |  39 +-
 components/reset-warning-modal.tsx  |  14 +-
 components/save-dialog.tsx          |  73 ++-
 components/settings-dialog.tsx      |  53 +-
 contexts/diagram-context.tsx        | 204 +++---
 instrumentation.ts                  |  62 +-
 lib/ai-providers.ts                 | 398 ++++++------
 lib/cached-responses.ts             |  62 +-
 lib/langfuse.ts                     | 132 ++--
 lib/system-prompts.ts               |  39 +-
 lib/utils.ts                        | 959 +++++++++++++++-------------
 next.config.ts                      |  10 +-
 package-lock.json                   | 610 ++++++++++++++++++
 package.json                        |  14 +-
 postcss.config.mjs                  |   6 +-
 tsconfig.json                       |  68 +-
 41 files changed, 3992 insertions(+), 2401 deletions(-)
 create mode 100644 .husky/pre-commit
 create mode 100644 .vscode/settings.json
 create mode 100644 biome.json

diff --git a/.eslintrc.json b/.eslintrc.json
index 6b10a5b..98ef693 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,3 @@
 {
-  "extends": [
-    "next/core-web-vitals",
-    "next/typescript"
-  ]
+    "extends": ["next/core-web-vitals", "next/typescript"]
 }
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000..2312dc5
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..c1c5363
--- /dev/null
+++ b/.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"
+    }
+}
diff --git a/app/about/cn/page.tsx b/app/about/cn/page.tsx
index 3ff30a0..4d0534e 100644
--- a/app/about/cn/page.tsx
+++ b/app/about/cn/page.tsx
@@ -1,13 +1,14 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { FaGithub } from "react-icons/fa";
-import Image from "next/image";
+import type { Metadata } from "next"
+import Image from "next/image"
+import Link from "next/link"
+import { FaGithub } from "react-icons/fa"
 
 export const metadata: Metadata = {
     title: "关于 - Next AI Draw.io",
-    description: "AI驱动的图表创建工具 - 对话、绘制、可视化。使用自然语言创建AWS、GCP和Azure架构图。",
+    description:
+        "AI驱动的图表创建工具 - 对话、绘制、可视化。使用自然语言创建AWS、GCP和Azure架构图。",
     keywords: ["AI图表", "draw.io", "AWS架构", "GCP图表", "Azure图表", "LLM"],
-};
+}
 
 export default function AboutCN() {
     return (
@@ -16,14 +17,23 @@ export default function AboutCN() {
             <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">
+                        <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
+                                href="/"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                            >
                                 编辑器
                             </Link>
-                            <Link href="/about/cn" className="text-blue-600 font-semibold">
+                            <Link
+                                href="/about/cn"
+                                className="text-blue-600 font-semibold"
+                            >
                                 关于
                             </Link>
                             <a
@@ -45,22 +55,41 @@ export default function AboutCN() {
                 <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>
+                        <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 className="flex justify-center gap-4 mt-4 text-sm">
-                            <Link href="/about" className="text-gray-600 hover:text-blue-600">English</Link>
+                            <Link
+                                href="/about"
+                                className="text-gray-600 hover:text-blue-600"
+                            >
+                                English
+                            </Link>
                             <span className="text-gray-400">|</span>
-                            <Link href="/about/cn" className="text-blue-600 font-semibold">中文</Link>
+                            <Link
+                                href="/about/cn"
+                                className="text-blue-600 font-semibold"
+                            >
+                                中文
+                            </Link>
                             <span className="text-gray-400">|</span>
-                            <Link href="/about/ja" className="text-gray-600 hover:text-blue-600">日本語</Link>
+                            <Link
+                                href="/about/ja"
+                                className="text-gray-600 hover:text-blue-600"
+                            >
+                                日本語
+                            </Link>
                         </div>
                     </div>
 
                     <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
                         <p className="text-amber-800">
-                            本应用设计运行于 Claude Opus 4.5 以获得最佳性能。但由于流量超出预期，运行顶级模型的成本变得难以承受。为避免服务中断并控制成本，我已将后端切换至 Claude Haiku 4.5。
+                            本应用设计运行于 Claude Opus 4.5
+                            以获得最佳性能。但由于流量超出预期，运行顶级模型的成本变得难以承受。为避免服务中断并控制成本，我已将后端切换至
+                            Claude Haiku 4.5。
                         </p>
                     </div>
 
@@ -69,80 +98,167 @@ export default function AboutCN() {
                     </p>
 
                     {/* Features */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">功能特性</h2>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        功能特性
+                    </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li><strong>LLM驱动的图表创建</strong>：利用大语言模型通过自然语言命令直接创建和操作draw.io图表</li>
-                        <li><strong>基于图像的图表复制</strong>：上传现有图表或图像，让AI自动复制和增强</li>
-                        <li><strong>图表历史记录</strong>：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本</li>
-                        <li><strong>交互式聊天界面</strong>：与AI实时对话来完善您的图表</li>
-                        <li><strong>AWS架构图支持</strong>：专门支持生成AWS架构图</li>
-                        <li><strong>动画连接器</strong>：在图表元素之间创建动态动画连接器，实现更好的可视化效果</li>
+                        <li>
+                            <strong>LLM驱动的图表创建</strong>
+                            ：利用大语言模型通过自然语言命令直接创建和操作draw.io图表
+                        </li>
+                        <li>
+                            <strong>基于图像的图表复制</strong>
+                            ：上传现有图表或图像，让AI自动复制和增强
+                        </li>
+                        <li>
+                            <strong>图表历史记录</strong>
+                            ：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
+                        </li>
+                        <li>
+                            <strong>交互式聊天界面</strong>
+                            ：与AI实时对话来完善您的图表
+                        </li>
+                        <li>
+                            <strong>AWS架构图支持</strong>
+                            ：专门支持生成AWS架构图
+                        </li>
+                        <li>
+                            <strong>动画连接器</strong>
+                            ：在图表元素之间创建动态动画连接器，实现更好的可视化效果
+                        </li>
                     </ul>
 
                     {/* Examples */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">示例</h2>
-                    <p className="text-gray-700 mb-6">以下是一些示例提示词及其生成的图表：</p>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        示例
+                    </h2>
+                    <p className="text-gray-700 mb-6">
+                        以下是一些示例提示词及其生成的图表：
+                    </p>
 
                     <div className="space-y-8">
                         {/* Animated Transformer */}
                         <div className="text-center">
-                            <h3 className="text-lg font-semibold text-gray-900 mb-2">动画Transformer连接器</h3>
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                动画Transformer连接器
+                            </h3>
                             <p className="text-gray-600 mb-4">
-                                <strong>提示词：</strong> 给我一个带有<strong>动画连接器</strong>的Transformer架构图。
+                                <strong>提示词：</strong> 给我一个带有
+                                <strong>动画连接器</strong>的Transformer架构图。
                             </p>
-                            <Image src="/animated_connectors.svg" alt="带动画连接器的Transformer架构" width={480} height={360} className="mx-auto" />
+                            <Image
+                                src="/animated_connectors.svg"
+                                alt="带动画连接器的Transformer架构"
+                                width={480}
+                                height={360}
+                                className="mx-auto"
+                            />
                         </div>
 
                         {/* Cloud Architecture Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">GCP架构图</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    GCP架构图
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用<strong>GCP图标</strong>生成一个GCP架构图。用户连接到托管在实例上的前端。
+                                    <strong>提示词：</strong> 使用
+                                    <strong>GCP图标</strong>
+                                    生成一个GCP架构图。用户连接到托管在实例上的前端。
                                 </p>
-                                <Image src="/gcp_demo.svg" alt="GCP架构图" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/gcp_demo.svg"
+                                    alt="GCP架构图"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">AWS架构图</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    AWS架构图
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用<strong>AWS图标</strong>生成一个AWS架构图。用户连接到托管在实例上的前端。
+                                    <strong>提示词：</strong> 使用
+                                    <strong>AWS图标</strong>
+                                    生成一个AWS架构图。用户连接到托管在实例上的前端。
                                 </p>
-                                <Image src="/aws_demo.svg" alt="AWS架构图" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/aws_demo.svg"
+                                    alt="AWS架构图"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Azure架构图</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    Azure架构图
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 使用<strong>Azure图标</strong>生成一个Azure架构图。用户连接到托管在实例上的前端。
+                                    <strong>提示词：</strong> 使用
+                                    <strong>Azure图标</strong>
+                                    生成一个Azure架构图。用户连接到托管在实例上的前端。
                                 </p>
-                                <Image src="/azure_demo.svg" alt="Azure架构图" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/azure_demo.svg"
+                                    alt="Azure架构图"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">猫咪素描</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    猫咪素描
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>提示词：</strong> 给我画一只可爱的猫。
+                                    <strong>提示词：</strong>{" "}
+                                    给我画一只可爱的猫。
                                 </p>
-                                <Image src="/cat_demo.svg" alt="猫咪绘图" width={240} height={240} className="mx-auto" />
+                                <Image
+                                    src="/cat_demo.svg"
+                                    alt="猫咪绘图"
+                                    width={240}
+                                    height={240}
+                                    className="mx-auto"
+                                />
                             </div>
                         </div>
                     </div>
 
                     {/* How It Works */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">工作原理</h2>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        工作原理
+                    </h2>
                     <p className="text-gray-700 mb-4">本应用使用以下技术：</p>
                     <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li><strong>Next.js</strong>：用于前端框架和路由</li>
-                        <li><strong>Vercel AI SDK</strong>（<code>ai</code> + <code>@ai-sdk/*</code>）：用于流式AI响应和多提供商支持</li>
-                        <li><strong>react-drawio</strong>：用于图表表示和操作</li>
+                        <li>
+                            <strong>Next.js</strong>：用于前端框架和路由
+                        </li>
+                        <li>
+                            <strong>Vercel AI SDK</strong>（<code>ai</code> +{" "}
+                            <code>@ai-sdk/*</code>
+                            ）：用于流式AI响应和多提供商支持
+                        </li>
+                        <li>
+                            <strong>react-drawio</strong>：用于图表表示和操作
+                        </li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
                     </p>
 
                     {/* Multi-Provider Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">多提供商支持</h2>
+                    <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>AWS Bedrock（默认）</li>
-                        <li>OpenAI / OpenAI兼容API（通过 <code>OPENAI_BASE_URL</code>）</li>
+                        <li>
+                            OpenAI / OpenAI兼容API（通过{" "}
+                            <code>OPENAI_BASE_URL</code>）
+                        </li>
                         <li>Anthropic</li>
                         <li>Google AI</li>
                         <li>Azure OpenAI</li>
@@ -151,12 +267,15 @@ export default function AboutCN() {
                         <li>DeepSeek</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
-                        注意：<code>claude-sonnet-4-5</code> 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。
+                        注意：<code>claude-sonnet-4-5</code>{" "}
+                        已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。
                     </p>
 
                     {/* Support */}
                     <div className="flex items-center gap-4 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">支持与联系</h2>
+                        <h2 className="text-2xl font-semibold text-gray-900">
+                            支持与联系
+                        </h2>
                         <iframe
                             src="https://github.com/sponsors/DayuanJiang/button"
                             title="Sponsor DayuanJiang"
@@ -167,14 +286,24 @@ export default function AboutCN() {
                     </div>
                     <p className="text-gray-700">
                         如果您觉得这个项目有用，请考虑{" "}
-                        <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                        <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">
+                        <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
@@ -201,5 +330,5 @@ export default function AboutCN() {
                 </div>
             </footer>
         </div>
-    );
+    )
 }
diff --git a/app/about/ja/page.tsx b/app/about/ja/page.tsx
index 1fba60d..3844619 100644
--- a/app/about/ja/page.tsx
+++ b/app/about/ja/page.tsx
@@ -1,13 +1,21 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { FaGithub } from "react-icons/fa";
-import Image from "next/image";
+import type { Metadata } from "next"
+import Image from "next/image"
+import Link from "next/link"
+import { FaGithub } from "react-icons/fa"
 
 export const metadata: Metadata = {
     title: "概要 - Next AI Draw.io",
-    description: "AI搭載のダイアグラム作成ツール - チャット、描画、可視化。自然言語でAWS、GCP、Azureアーキテクチャ図を作成。",
-    keywords: ["AIダイアグラム", "draw.io", "AWSアーキテクチャ", "GCPダイアグラム", "Azureダイアグラム", "LLM"],
-};
+    description:
+        "AI搭載のダイアグラム作成ツール - チャット、描画、可視化。自然言語でAWS、GCP、Azureアーキテクチャ図を作成。",
+    keywords: [
+        "AIダイアグラム",
+        "draw.io",
+        "AWSアーキテクチャ",
+        "GCPダイアグラム",
+        "Azureダイアグラム",
+        "LLM",
+    ],
+}
 
 export default function AboutJA() {
     return (
@@ -16,14 +24,23 @@ export default function AboutJA() {
             <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">
+                        <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
+                                href="/"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                            >
                                 エディタ
                             </Link>
-                            <Link href="/about/ja" className="text-blue-600 font-semibold">
+                            <Link
+                                href="/about/ja"
+                                className="text-blue-600 font-semibold"
+                            >
                                 概要
                             </Link>
                             <a
@@ -45,22 +62,43 @@ export default function AboutJA() {
                 <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>
+                        <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搭載のダイアグラム作成ツール - チャット、描画、可視化
+                            AI搭載のダイアグラム作成ツール -
+                            チャット、描画、可視化
                         </p>
                         <div className="flex justify-center gap-4 mt-4 text-sm">
-                            <Link href="/about" className="text-gray-600 hover:text-blue-600">English</Link>
+                            <Link
+                                href="/about"
+                                className="text-gray-600 hover:text-blue-600"
+                            >
+                                English
+                            </Link>
                             <span className="text-gray-400">|</span>
-                            <Link href="/about/cn" className="text-gray-600 hover:text-blue-600">中文</Link>
+                            <Link
+                                href="/about/cn"
+                                className="text-gray-600 hover:text-blue-600"
+                            >
+                                中文
+                            </Link>
                             <span className="text-gray-400">|</span>
-                            <Link href="/about/ja" className="text-blue-600 font-semibold">日本語</Link>
+                            <Link
+                                href="/about/ja"
+                                className="text-blue-600 font-semibold"
+                            >
+                                日本語
+                            </Link>
                         </div>
                     </div>
 
                     <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
                         <p className="text-amber-800">
-                            本アプリは最高のパフォーマンスを発揮するため、Claude Opus 4.5 で動作するよう設計されています。しかし、予想以上のトラフィックにより、最上位モデルの運用コストが負担となっています。サービスの中断を避け、コストを管理するため、バックエンドを Claude Haiku 4.5 に切り替えました。
+                            本アプリは最高のパフォーマンスを発揮するため、Claude
+                            Opus 4.5
+                            で動作するよう設計されています。しかし、予想以上のトラフィックにより、最上位モデルの運用コストが負担となっています。サービスの中断を避け、コストを管理するため、バックエンドを
+                            Claude Haiku 4.5 に切り替えました。
                         </p>
                     </div>
 
@@ -69,80 +107,176 @@ export default function AboutJA() {
                     </p>
 
                     {/* Features */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">機能</h2>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        機能
+                    </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li><strong>LLM搭載のダイアグラム作成</strong>：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作</li>
-                        <li><strong>画像ベースのダイアグラム複製</strong>：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化</li>
-                        <li><strong>ダイアグラム履歴</strong>：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能</li>
-                        <li><strong>インタラクティブなチャットインターフェース</strong>：AIとリアルタイムでコミュニケーションしてダイアグラムを改善</li>
-                        <li><strong>AWSアーキテクチャダイアグラムサポート</strong>：AWSアーキテクチャダイアグラムの生成を専門的にサポート</li>
-                        <li><strong>アニメーションコネクタ</strong>：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成</li>
+                        <li>
+                            <strong>LLM搭載のダイアグラム作成</strong>
+                            ：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
+                        </li>
+                        <li>
+                            <strong>画像ベースのダイアグラム複製</strong>
+                            ：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
+                        </li>
+                        <li>
+                            <strong>ダイアグラム履歴</strong>
+                            ：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
+                        </li>
+                        <li>
+                            <strong>
+                                インタラクティブなチャットインターフェース
+                            </strong>
+                            ：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
+                        </li>
+                        <li>
+                            <strong>
+                                AWSアーキテクチャダイアグラムサポート
+                            </strong>
+                            ：AWSアーキテクチャダイアグラムの生成を専門的にサポート
+                        </li>
+                        <li>
+                            <strong>アニメーションコネクタ</strong>
+                            ：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
+                        </li>
                     </ul>
 
                     {/* Examples */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">例</h2>
-                    <p className="text-gray-700 mb-6">以下はいくつかのプロンプト例と生成されたダイアグラムです：</p>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        例
+                    </h2>
+                    <p className="text-gray-700 mb-6">
+                        以下はいくつかのプロンプト例と生成されたダイアグラムです：
+                    </p>
 
                     <div className="space-y-8">
                         {/* Animated Transformer */}
                         <div className="text-center">
-                            <h3 className="text-lg font-semibold text-gray-900 mb-2">アニメーションTransformerコネクタ</h3>
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                アニメーションTransformerコネクタ
+                            </h3>
                             <p className="text-gray-600 mb-4">
-                                <strong>プロンプト：</strong> <strong>アニメーションコネクタ</strong>付きのTransformerアーキテクチャ図を作成してください。
+                                <strong>プロンプト：</strong>{" "}
+                                <strong>アニメーションコネクタ</strong>
+                                付きのTransformerアーキテクチャ図を作成してください。
                             </p>
-                            <Image src="/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width={480} height={360} className="mx-auto" />
+                            <Image
+                                src="/animated_connectors.svg"
+                                alt="アニメーションコネクタ付きTransformerアーキテクチャ"
+                                width={480}
+                                height={360}
+                                className="mx-auto"
+                            />
                         </div>
 
                         {/* Cloud Architecture Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">GCPアーキテクチャ図</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    GCPアーキテクチャ図
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong> <strong>GCPアイコン</strong>を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>GCPアイコン</strong>
+                                    を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
-                                <Image src="/gcp_demo.svg" alt="GCPアーキテクチャ図" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/gcp_demo.svg"
+                                    alt="GCPアーキテクチャ図"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">AWSアーキテクチャ図</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    AWSアーキテクチャ図
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong> <strong>AWSアイコン</strong>を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>AWSアイコン</strong>
+                                    を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
-                                <Image src="/aws_demo.svg" alt="AWSアーキテクチャ図" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/aws_demo.svg"
+                                    alt="AWSアーキテクチャ図"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Azureアーキテクチャ図</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    Azureアーキテクチャ図
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong> <strong>Azureアイコン</strong>を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
+                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>Azureアイコン</strong>
+                                    を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                 </p>
-                                <Image src="/azure_demo.svg" alt="Azureアーキテクチャ図" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/azure_demo.svg"
+                                    alt="Azureアーキテクチャ図"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">猫のスケッチ</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    猫のスケッチ
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>プロンプト：</strong> かわいい猫を描いてください。
+                                    <strong>プロンプト：</strong>{" "}
+                                    かわいい猫を描いてください。
                                 </p>
-                                <Image src="/cat_demo.svg" alt="猫の絵" width={240} height={240} className="mx-auto" />
+                                <Image
+                                    src="/cat_demo.svg"
+                                    alt="猫の絵"
+                                    width={240}
+                                    height={240}
+                                    className="mx-auto"
+                                />
                             </div>
                         </div>
                     </div>
 
                     {/* How It Works */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">仕組み</h2>
-                    <p className="text-gray-700 mb-4">本アプリケーションは以下の技術を使用しています：</p>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        仕組み
+                    </h2>
+                    <p className="text-gray-700 mb-4">
+                        本アプリケーションは以下の技術を使用しています：
+                    </p>
                     <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li><strong>Next.js</strong>：フロントエンドフレームワークとルーティング</li>
-                        <li><strong>Vercel AI SDK</strong>（<code>ai</code> + <code>@ai-sdk/*</code>）：ストリーミングAIレスポンスとマルチプロバイダーサポート</li>
-                        <li><strong>react-drawio</strong>：ダイアグラムの表現と操作</li>
+                        <li>
+                            <strong>Next.js</strong>
+                            ：フロントエンドフレームワークとルーティング
+                        </li>
+                        <li>
+                            <strong>Vercel AI SDK</strong>（<code>ai</code> +{" "}
+                            <code>@ai-sdk/*</code>
+                            ）：ストリーミングAIレスポンスとマルチプロバイダーサポート
+                        </li>
+                        <li>
+                            <strong>react-drawio</strong>
+                            ：ダイアグラムの表現と操作
+                        </li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
                     </p>
 
                     {/* Multi-Provider Support */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">マルチプロバイダーサポート</h2>
+                    <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>AWS Bedrock（デフォルト）</li>
-                        <li>OpenAI / OpenAI互換API（<code>OPENAI_BASE_URL</code>経由）</li>
+                        <li>
+                            OpenAI / OpenAI互換API（<code>OPENAI_BASE_URL</code>
+                            経由）
+                        </li>
                         <li>Anthropic</li>
                         <li>Google AI</li>
                         <li>Azure OpenAI</li>
@@ -151,12 +285,15 @@ export default function AboutJA() {
                         <li>DeepSeek</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
-                        注：<code>claude-sonnet-4-5</code>はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
+                        注：<code>claude-sonnet-4-5</code>
+                        はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
                     </p>
 
                     {/* Support */}
                     <div className="flex items-center gap-4 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">サポート＆お問い合わせ</h2>
+                        <h2 className="text-2xl font-semibold text-gray-900">
+                            サポート＆お問い合わせ
+                        </h2>
                         <iframe
                             src="https://github.com/sponsors/DayuanJiang/button"
                             title="Sponsor DayuanJiang"
@@ -167,14 +304,24 @@ export default function AboutJA() {
                     </div>
                     <p className="text-gray-700">
                         このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
-                        <a href="https://github.com/sponsors/DayuanJiang" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                        <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">
+                        <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
@@ -196,10 +343,11 @@ export default function AboutJA() {
             <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搭載ダイアグラムジェネレーター
+                        Next AI Draw.io -
+                        オープンソースAI搭載ダイアグラムジェネレーター
                     </p>
                 </div>
             </footer>
         </div>
-    );
+    )
 }
diff --git a/app/about/page.tsx b/app/about/page.tsx
index 7060f7e..92dae5e 100644
--- a/app/about/page.tsx
+++ b/app/about/page.tsx
@@ -1,13 +1,21 @@
-import type { Metadata } from "next";
-import Link from "next/link";
-import { FaGithub } from "react-icons/fa";
-import Image from "next/image";
+import type { Metadata } from "next"
+import Image from "next/image"
+import Link from "next/link"
+import { FaGithub } from "react-icons/fa"
 
 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"],
-};
+    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 (
@@ -16,14 +24,23 @@ export default function About() {
             <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">
+                        <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
+                                href="/"
+                                className="text-gray-600 hover:text-gray-900 transition-colors"
+                            >
                                 Editor
                             </Link>
-                            <Link href="/about" className="text-blue-600 font-semibold">
+                            <Link
+                                href="/about"
+                                className="text-blue-600 font-semibold"
+                            >
                                 About
                             </Link>
                             <a
@@ -45,105 +62,236 @@ export default function About() {
                 <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>
+                        <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
+                            AI-Powered Diagram Creation Tool - Chat, Draw,
+                            Visualize
                         </p>
                         <div className="flex justify-center gap-4 mt-4 text-sm">
-                            <Link href="/about" className="text-blue-600 font-semibold">English</Link>
+                            <Link
+                                href="/about"
+                                className="text-blue-600 font-semibold"
+                            >
+                                English
+                            </Link>
                             <span className="text-gray-400">|</span>
-                            <Link href="/about/cn" className="text-gray-600 hover:text-blue-600">中文</Link>
+                            <Link
+                                href="/about/cn"
+                                className="text-gray-600 hover:text-blue-600"
+                            >
+                                中文
+                            </Link>
                             <span className="text-gray-400">|</span>
-                            <Link href="/about/ja" className="text-gray-600 hover:text-blue-600">日本語</Link>
+                            <Link
+                                href="/about/ja"
+                                className="text-gray-600 hover:text-blue-600"
+                            >
+                                日本語
+                            </Link>
                         </div>
                     </div>
 
                     <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mb-6">
                         <p className="text-amber-800">
-                            This app is designed to run on Claude Opus 4.5 for best performance. However, due to higher-than-expected traffic, running the top-tier model has become cost-prohibitive. To avoid service interruptions and manage costs, I have switched the backend to Claude Haiku 4.5.
+                            This app is designed to run on Claude Opus 4.5 for
+                            best performance. However, due to
+                            higher-than-expected traffic, running the top-tier
+                            model has become cost-prohibitive. To avoid service
+                            interruptions and manage costs, I have switched the
+                            backend to Claude Haiku 4.5.
                         </p>
                     </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.
+                        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>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        Features
+                    </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li><strong>LLM-Powered Diagram Creation</strong>: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands</li>
-                        <li><strong>Image-Based Diagram Replication</strong>: Upload existing diagrams or images and have the AI replicate and enhance them automatically</li>
-                        <li><strong>Diagram History</strong>: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing</li>
-                        <li><strong>Interactive Chat Interface</strong>: Communicate with AI to refine your diagrams in real-time</li>
-                        <li><strong>AWS Architecture Diagram Support</strong>: Specialized support for generating AWS architecture diagrams</li>
-                        <li><strong>Animated Connectors</strong>: Create dynamic and animated connectors between diagram elements for better visualization</li>
+                        <li>
+                            <strong>LLM-Powered Diagram Creation</strong>:
+                            Leverage Large Language Models to create and
+                            manipulate draw.io diagrams directly through natural
+                            language commands
+                        </li>
+                        <li>
+                            <strong>Image-Based Diagram Replication</strong>:
+                            Upload existing diagrams or images and have the AI
+                            replicate and enhance them automatically
+                        </li>
+                        <li>
+                            <strong>Diagram History</strong>: Comprehensive
+                            version control that tracks all changes, allowing
+                            you to view and restore previous versions of your
+                            diagrams before the AI editing
+                        </li>
+                        <li>
+                            <strong>Interactive Chat Interface</strong>:
+                            Communicate with AI to refine your diagrams in
+                            real-time
+                        </li>
+                        <li>
+                            <strong>AWS Architecture Diagram Support</strong>:
+                            Specialized support for generating AWS architecture
+                            diagrams
+                        </li>
+                        <li>
+                            <strong>Animated Connectors</strong>: Create dynamic
+                            and animated connectors between diagram elements for
+                            better visualization
+                        </li>
                     </ul>
 
                     {/* Examples */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">Examples</h2>
-                    <p className="text-gray-700 mb-6">Here are some example prompts and their generated diagrams:</p>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        Examples
+                    </h2>
+                    <p className="text-gray-700 mb-6">
+                        Here are some example prompts and their generated
+                        diagrams:
+                    </p>
 
                     <div className="space-y-8">
                         {/* Animated Transformer */}
                         <div className="text-center">
-                            <h3 className="text-lg font-semibold text-gray-900 mb-2">Animated Transformer Connectors</h3>
+                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                Animated Transformer Connectors
+                            </h3>
                             <p className="text-gray-600 mb-4">
-                                <strong>Prompt:</strong> Give me an <strong>animated connector</strong> diagram of transformer&apos;s architecture.
+                                <strong>Prompt:</strong> Give me an{" "}
+                                <strong>animated connector</strong> diagram of
+                                transformer&apos;s architecture.
                             </p>
-                            <Image src="/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width={480} height={360} className="mx-auto" />
+                            <Image
+                                src="/animated_connectors.svg"
+                                alt="Transformer Architecture with Animated Connectors"
+                                width={480}
+                                height={360}
+                                className="mx-auto"
+                            />
                         </div>
 
                         {/* Cloud Architecture Grid */}
                         <div className="grid md:grid-cols-2 gap-6">
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">GCP Architecture Diagram</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    GCP Architecture Diagram
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a GCP architecture diagram with <strong>GCP icons</strong>. Users connect to a frontend hosted on an instance.
+                                    <strong>Prompt:</strong> Generate a GCP
+                                    architecture diagram with{" "}
+                                    <strong>GCP icons</strong>. Users connect to
+                                    a frontend hosted on an instance.
                                 </p>
-                                <Image src="/gcp_demo.svg" alt="GCP Architecture Diagram" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/gcp_demo.svg"
+                                    alt="GCP Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">AWS Architecture Diagram</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    AWS Architecture Diagram
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an AWS architecture diagram with <strong>AWS icons</strong>. Users connect to a frontend hosted on an instance.
+                                    <strong>Prompt:</strong> Generate an AWS
+                                    architecture diagram with{" "}
+                                    <strong>AWS icons</strong>. Users connect to
+                                    a frontend hosted on an instance.
                                 </p>
-                                <Image src="/aws_demo.svg" alt="AWS Architecture Diagram" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/aws_demo.svg"
+                                    alt="AWS Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Azure Architecture Diagram</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    Azure Architecture Diagram
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an Azure architecture diagram with <strong>Azure icons</strong>. Users connect to a frontend hosted on an instance.
+                                    <strong>Prompt:</strong> Generate an Azure
+                                    architecture diagram with{" "}
+                                    <strong>Azure icons</strong>. Users connect
+                                    to a frontend hosted on an instance.
                                 </p>
-                                <Image src="/azure_demo.svg" alt="Azure Architecture Diagram" width={400} height={300} className="mx-auto" />
+                                <Image
+                                    src="/azure_demo.svg"
+                                    alt="Azure Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                             </div>
                             <div className="text-center">
-                                <h3 className="text-lg font-semibold text-gray-900 mb-2">Cat Sketch</h3>
+                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                                    Cat Sketch
+                                </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Draw a cute cat for me.
+                                    <strong>Prompt:</strong> Draw a cute cat for
+                                    me.
                                 </p>
-                                <Image src="/cat_demo.svg" alt="Cat Drawing" width={240} height={240} className="mx-auto" />
+                                <Image
+                                    src="/cat_demo.svg"
+                                    alt="Cat Drawing"
+                                    width={240}
+                                    height={240}
+                                    className="mx-auto"
+                                />
                             </div>
                         </div>
                     </div>
 
                     {/* How It Works */}
-                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">How It Works</h2>
-                    <p className="text-gray-700 mb-4">The application uses the following technologies:</p>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        How It Works
+                    </h2>
+                    <p className="text-gray-700 mb-4">
+                        The application uses the following technologies:
+                    </p>
                     <ul className="list-disc pl-6 text-gray-700 space-y-2">
-                        <li><strong>Next.js</strong>: For the frontend framework and routing</li>
-                        <li><strong>Vercel AI SDK</strong> (<code>ai</code> + <code>@ai-sdk/*</code>): For streaming AI responses and multi-provider support</li>
-                        <li><strong>react-drawio</strong>: For diagram representation and manipulation</li>
+                        <li>
+                            <strong>Next.js</strong>: For the frontend framework
+                            and routing
+                        </li>
+                        <li>
+                            <strong>Vercel AI SDK</strong> (<code>ai</code> +{" "}
+                            <code>@ai-sdk/*</code>): For streaming AI responses
+                            and multi-provider support
+                        </li>
+                        <li>
+                            <strong>react-drawio</strong>: For diagram
+                            representation and manipulation
+                        </li>
                     </ul>
                     <p className="text-gray-700 mt-4">
-                        Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
+                        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>
+                    <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>AWS Bedrock (default)</li>
-                        <li>OpenAI / OpenAI-compatible APIs (via <code>OPENAI_BASE_URL</code>)</li>
+                        <li>
+                            OpenAI / OpenAI-compatible APIs (via{" "}
+                            <code>OPENAI_BASE_URL</code>)
+                        </li>
                         <li>Anthropic</li>
                         <li>Google AI</li>
                         <li>Azure OpenAI</li>
@@ -152,12 +300,17 @@ export default function About() {
                         <li>DeepSeek</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.
+                        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 */}
                     <div className="flex items-center gap-4 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">Support &amp; Contact</h2>
+                        <h2 className="text-2xl font-semibold text-gray-900">
+                            Support &amp; Contact
+                        </h2>
                         <iframe
                             src="https://github.com/sponsors/DayuanJiang/button"
                             title="Sponsor DayuanJiang"
@@ -168,14 +321,24 @@ export default function About() {
                     </div>
                     <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">
+                        <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">
+                        <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
@@ -197,10 +360,11 @@ export default function About() {
             <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
+                        Next AI Draw.io - Open Source AI-Powered Diagram
+                        Generator
                     </p>
                 </div>
             </footer>
         </div>
-    );
+    )
 }
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 15440f9..d26eb1a 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -1,247 +1,299 @@
-import { streamText, convertToModelMessages, createUIMessageStream, createUIMessageStreamResponse } from 'ai';
-import { getAIModel } from '@/lib/ai-providers';
-import { findCachedResponse } from '@/lib/cached-responses';
-import { setTraceInput, setTraceOutput, getTelemetryConfig, wrapWithObserve } from '@/lib/langfuse';
-import { getSystemPrompt } from '@/lib/system-prompts';
-import { z } from "zod";
+import {
+    convertToModelMessages,
+    createUIMessageStream,
+    createUIMessageStreamResponse,
+    streamText,
+} from "ai"
+import { z } from "zod"
+import { getAIModel } from "@/lib/ai-providers"
+import { findCachedResponse } from "@/lib/cached-responses"
+import {
+    getTelemetryConfig,
+    setTraceInput,
+    setTraceOutput,
+    wrapWithObserve,
+} from "@/lib/langfuse"
+import { getSystemPrompt } from "@/lib/system-prompts"
 
-export const maxDuration = 300;
+export const maxDuration = 300
 
 // File upload limits (must match client-side)
-const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
-const MAX_FILES = 5;
+const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+const MAX_FILES = 5
 
 // Helper function to validate file parts in messages
-function validateFileParts(messages: any[]): { valid: boolean; error?: string } {
-  const lastMessage = messages[messages.length - 1];
-  const fileParts = lastMessage?.parts?.filter((p: any) => p.type === 'file') || [];
+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) {
-    // Data URLs format: data:image/png;base64,<data>
-    // Base64 increases size by ~33%, so we check the decoded size
-    if (filePart.url && 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.` };
+    if (fileParts.length > MAX_FILES) {
+        return {
+            valid: false,
+            error: `Too many files. Maximum ${MAX_FILES} allowed.`,
         }
-      }
     }
-  }
 
-  return { valid: true };
+    for (const filePart of fileParts) {
+        // Data URLs format: data:image/png;base64,<data>
+        // Base64 increases size by ~33%, so we check the decoded size
+        if (filePart.url && 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 }
 }
 
 // Helper function to check if diagram is minimal/empty
 function isMinimalDiagram(xml: string): boolean {
-  const stripped = xml.replace(/\s/g, '');
-  return !stripped.includes('id="2"');
+    const stripped = xml.replace(/\s/g, "")
+    return !stripped.includes('id="2"')
 }
 
 // Helper function to create cached stream response
 function createCachedStreamResponse(xml: string): Response {
-  const toolCallId = `cached-${Date.now()}`;
+    const toolCallId = `cached-${Date.now()}`
 
-  const stream = createUIMessageStream({
-    execute: async ({ writer }) => {
-      writer.write({ type: 'start' });
-      writer.write({ type: 'tool-input-start', toolCallId, toolName: 'display_diagram' });
-      writer.write({ type: 'tool-input-delta', toolCallId, inputTextDelta: xml });
-      writer.write({ type: 'tool-input-available', toolCallId, toolName: 'display_diagram', input: { xml } });
-      writer.write({ type: 'finish' });
-    },
-  });
+    const stream = createUIMessageStream({
+        execute: async ({ writer }) => {
+            writer.write({ type: "start" })
+            writer.write({
+                type: "tool-input-start",
+                toolCallId,
+                toolName: "display_diagram",
+            })
+            writer.write({
+                type: "tool-input-delta",
+                toolCallId,
+                inputTextDelta: xml,
+            })
+            writer.write({
+                type: "tool-input-available",
+                toolCallId,
+                toolName: "display_diagram",
+                input: { xml },
+            })
+            writer.write({ type: "finish" })
+        },
+    })
 
-  return createUIMessageStreamResponse({ stream });
+    return createUIMessageStreamResponse({ stream })
 }
 
 // Inner handler function
 async function handleChatRequest(req: Request): Promise<Response> {
-  // Check for access code
-  const accessCodes = process.env.ACCESS_CODE_LIST?.split(',').map(code => code.trim()).filter(Boolean) || [];
-  if (accessCodes.length > 0) {
-    const accessCodeHeader = req.headers.get('x-access-code');
-    if (!accessCodeHeader || !accessCodes.includes(accessCodeHeader)) {
-      return Response.json(
-        { error: 'Invalid or missing access code. Please configure it in Settings.' },
-        { status: 401 }
-      );
+    // Check for access code
+    const accessCodes =
+        process.env.ACCESS_CODE_LIST?.split(",")
+            .map((code) => code.trim())
+            .filter(Boolean) || []
+    if (accessCodes.length > 0) {
+        const accessCodeHeader = req.headers.get("x-access-code")
+        if (!accessCodeHeader || !accessCodes.includes(accessCodeHeader)) {
+            return Response.json(
+                {
+                    error: "Invalid or missing access code. Please configure it in Settings.",
+                },
+                { status: 401 },
+            )
+        }
     }
-  }
 
-  const { messages, xml, sessionId } = await req.json();
+    const { messages, xml, sessionId } = await req.json()
 
-  // Get user IP for Langfuse tracking
-  const forwardedFor = req.headers.get('x-forwarded-for');
-  const userId = forwardedFor?.split(',')[0]?.trim() || 'anonymous';
+    // Get user IP for Langfuse tracking
+    const forwardedFor = req.headers.get("x-forwarded-for")
+    const userId = forwardedFor?.split(",")[0]?.trim() || "anonymous"
 
-  // Validate sessionId for Langfuse (must be string, max 200 chars)
-  const validSessionId = sessionId && typeof sessionId === 'string' && sessionId.length <= 200
-    ? sessionId
-    : undefined;
+    // Validate sessionId for Langfuse (must be string, max 200 chars)
+    const validSessionId =
+        sessionId && typeof sessionId === "string" && sessionId.length <= 200
+            ? sessionId
+            : undefined
 
-  // Extract user input text for Langfuse trace
-  const currentMessage = messages[messages.length - 1];
-  const userInputText = currentMessage?.parts?.find((p: any) => p.type === 'text')?.text || '';
+    // Extract user input text for Langfuse trace
+    const currentMessage = messages[messages.length - 1]
+    const userInputText =
+        currentMessage?.parts?.find((p: any) => p.type === "text")?.text || ""
 
-  // Update Langfuse trace with input, session, and user
-  setTraceInput({
-    input: userInputText,
-    sessionId: validSessionId,
-    userId: userId,
-  });
+    // Update Langfuse trace with input, session, and user
+    setTraceInput({
+        input: userInputText,
+        sessionId: validSessionId,
+        userId: userId,
+    })
 
-  // === FILE VALIDATION START ===
-  const fileValidation = validateFileParts(messages);
-  if (!fileValidation.valid) {
-    return Response.json({ error: fileValidation.error }, { status: 400 });
-  }
-  // === FILE VALIDATION END ===
-
-  // === CACHE CHECK START ===
-  const isFirstMessage = messages.length === 1;
-  const isEmptyDiagram = !xml || xml.trim() === '' || isMinimalDiagram(xml);
-
-  if (isFirstMessage && isEmptyDiagram) {
-    const lastMessage = messages[0];
-    const textPart = lastMessage.parts?.find((p: any) => p.type === 'text');
-    const filePart = lastMessage.parts?.find((p: any) => p.type === 'file');
-
-    const cached = findCachedResponse(textPart?.text || '', !!filePart);
-
-    if (cached) {
-      console.log('[Cache] Returning cached response for:', textPart?.text);
-      return createCachedStreamResponse(cached.xml);
+    // === FILE VALIDATION START ===
+    const fileValidation = validateFileParts(messages)
+    if (!fileValidation.valid) {
+        return Response.json({ error: fileValidation.error }, { status: 400 })
     }
-  }
-  // === CACHE CHECK END ===
+    // === FILE VALIDATION END ===
 
-  // Get AI model from environment configuration
-  const { model, providerOptions, headers, modelId } = getAIModel();
+    // === CACHE CHECK START ===
+    const isFirstMessage = messages.length === 1
+    const isEmptyDiagram = !xml || xml.trim() === "" || isMinimalDiagram(xml)
 
-  // Get the appropriate system prompt based on model (extended for Opus/Haiku 4.5)
-  const systemMessage = getSystemPrompt(modelId);
+    if (isFirstMessage && isEmptyDiagram) {
+        const lastMessage = messages[0]
+        const textPart = lastMessage.parts?.find((p: any) => p.type === "text")
+        const filePart = lastMessage.parts?.find((p: any) => p.type === "file")
 
-  const lastMessage = messages[messages.length - 1];
+        const cached = findCachedResponse(textPart?.text || "", !!filePart)
 
-  // Extract text from the last message parts
-  const lastMessageText = lastMessage.parts?.find((part: any) => part.type === 'text')?.text || '';
+        if (cached) {
+            console.log(
+                "[Cache] Returning cached response for:",
+                textPart?.text,
+            )
+            return createCachedStreamResponse(cached.xml)
+        }
+    }
+    // === CACHE CHECK END ===
 
-  // Extract file parts (images) from the last message
-  const fileParts = lastMessage.parts?.filter((part: any) => part.type === 'file') || [];
+    // Get AI model from environment configuration
+    const { model, providerOptions, headers, modelId } = getAIModel()
 
-  // User input only - XML is now in a separate cached system message
-  const formattedUserInput = `User input:
+    // Get the appropriate system prompt based on model (extended for Opus/Haiku 4.5)
+    const systemMessage = getSystemPrompt(modelId)
+
+    const lastMessage = messages[messages.length - 1]
+
+    // Extract text from the last message parts
+    const lastMessageText =
+        lastMessage.parts?.find((part: any) => part.type === "text")?.text || ""
+
+    // Extract file parts (images) from the last message
+    const fileParts =
+        lastMessage.parts?.filter((part: any) => part.type === "file") || []
+
+    // User input only - XML is now in a separate cached system message
+    const formattedUserInput = `User input:
 """md
 ${lastMessageText}
-"""`;
+"""`
 
-  // Convert UIMessages to ModelMessages and add system message
-  const modelMessages = convertToModelMessages(messages);
+    // Convert UIMessages to ModelMessages and add system message
+    const modelMessages = convertToModelMessages(messages)
 
-  // Filter out messages with empty content arrays (Bedrock API rejects these)
-  // This is a safety measure - ideally convertToModelMessages should handle all cases
-  let enhancedMessages = modelMessages.filter((msg: any) =>
-    msg.content && Array.isArray(msg.content) && msg.content.length > 0
-  );
+    // Filter out messages with empty content arrays (Bedrock API rejects these)
+    // This is a safety measure - ideally convertToModelMessages should handle all cases
+    let enhancedMessages = modelMessages.filter(
+        (msg: any) =>
+            msg.content && Array.isArray(msg.content) && msg.content.length > 0,
+    )
 
-  // Update the last message with user input only (XML moved to separate cached system message)
-  if (enhancedMessages.length >= 1) {
-    const lastModelMessage = enhancedMessages[enhancedMessages.length - 1];
-    if (lastModelMessage.role === 'user') {
-      // Build content array with user input text and file parts
-      const contentParts: any[] = [
-        { type: 'text', text: formattedUserInput }
-      ];
+    // Update the last message with user input only (XML moved to separate cached system message)
+    if (enhancedMessages.length >= 1) {
+        const lastModelMessage = enhancedMessages[enhancedMessages.length - 1]
+        if (lastModelMessage.role === "user") {
+            // Build content array with user input text and file parts
+            const contentParts: any[] = [
+                { type: "text", text: formattedUserInput },
+            ]
 
-      // Add image parts back
-      for (const filePart of fileParts) {
-        contentParts.push({
-          type: 'image',
-          image: filePart.url,
-          mimeType: filePart.mediaType
-        });
-      }
+            // Add image parts back
+            for (const filePart of fileParts) {
+                contentParts.push({
+                    type: "image",
+                    image: filePart.url,
+                    mimeType: filePart.mediaType,
+                })
+            }
 
-      enhancedMessages = [
-        ...enhancedMessages.slice(0, -1),
-        { ...lastModelMessage, content: contentParts }
-      ];
+            enhancedMessages = [
+                ...enhancedMessages.slice(0, -1),
+                { ...lastModelMessage, content: contentParts },
+            ]
+        }
     }
-  }
 
-  // Add cache point to the last assistant message in conversation history
-  // This caches the entire conversation prefix for subsequent requests
-  // Strategy: system (cached) + history with last assistant (cached) + new user message
-  if (enhancedMessages.length >= 2) {
-    // Find the last assistant message (should be second-to-last, before current user message)
-    for (let i = enhancedMessages.length - 2; i >= 0; i--) {
-      if (enhancedMessages[i].role === 'assistant') {
-        enhancedMessages[i] = {
-          ...enhancedMessages[i],
-          providerOptions: {
-            bedrock: { cachePoint: { type: 'default' } },
-          },
-        };
-        break; // Only cache the last assistant message
-      }
+    // Add cache point to the last assistant message in conversation history
+    // This caches the entire conversation prefix for subsequent requests
+    // Strategy: system (cached) + history with last assistant (cached) + new user message
+    if (enhancedMessages.length >= 2) {
+        // Find the last assistant message (should be second-to-last, before current user message)
+        for (let i = enhancedMessages.length - 2; i >= 0; i--) {
+            if (enhancedMessages[i].role === "assistant") {
+                enhancedMessages[i] = {
+                    ...enhancedMessages[i],
+                    providerOptions: {
+                        bedrock: { cachePoint: { type: "default" } },
+                    },
+                }
+                break // Only cache the last assistant message
+            }
+        }
     }
-  }
 
-  // System messages with multiple cache breakpoints for optimal caching:
-  // - Breakpoint 1: Static instructions (~1500 tokens) - rarely changes
-  // - Breakpoint 2: Current XML context - changes per diagram, but constant within a conversation turn
-  // This allows: if only user message changes, both system caches are reused
-  //              if XML changes, instruction cache is still reused
-  const systemMessages = [
-    // Cache breakpoint 1: Instructions (rarely change)
-    {
-      role: 'system' as const,
-      content: systemMessage,
-      providerOptions: {
-        bedrock: { cachePoint: { type: 'default' } },
-      },
-    },
-    // Cache breakpoint 2: Current diagram XML context
-    {
-      role: 'system' as const,
-      content: `Current diagram XML:\n"""xml\n${xml || ''}\n"""\nWhen using edit_diagram, COPY search patterns exactly from this XML - attribute order matters!`,
-      providerOptions: {
-        bedrock: { cachePoint: { type: 'default' } },
-      },
-    },
-  ];
+    // System messages with multiple cache breakpoints for optimal caching:
+    // - Breakpoint 1: Static instructions (~1500 tokens) - rarely changes
+    // - Breakpoint 2: Current XML context - changes per diagram, but constant within a conversation turn
+    // This allows: if only user message changes, both system caches are reused
+    //              if XML changes, instruction cache is still reused
+    const systemMessages = [
+        // Cache breakpoint 1: Instructions (rarely change)
+        {
+            role: "system" as const,
+            content: systemMessage,
+            providerOptions: {
+                bedrock: { cachePoint: { type: "default" } },
+            },
+        },
+        // Cache breakpoint 2: Current diagram XML context
+        {
+            role: "system" as const,
+            content: `Current diagram XML:\n"""xml\n${xml || ""}\n"""\nWhen using edit_diagram, COPY search patterns exactly from this XML - attribute order matters!`,
+            providerOptions: {
+                bedrock: { cachePoint: { type: "default" } },
+            },
+        },
+    ]
 
-  const allMessages = [...systemMessages, ...enhancedMessages];
+    const allMessages = [...systemMessages, ...enhancedMessages]
 
-  const result = streamText({
-    model,
-    messages: allMessages,
-    ...(providerOptions && { providerOptions }),
-    ...(headers && { headers }),
-    // Langfuse telemetry config (returns undefined if not configured)
-    ...(getTelemetryConfig({ sessionId: validSessionId, userId }) && {
-      experimental_telemetry: getTelemetryConfig({ sessionId: validSessionId, userId }),
-    }),
-    onFinish: ({ text, usage, providerMetadata }) => {
-      console.log('[Cache] Full providerMetadata:', JSON.stringify(providerMetadata, null, 2));
-      console.log('[Cache] Usage:', JSON.stringify(usage, null, 2));
-      // Pass usage to Langfuse (Bedrock streaming doesn't auto-report tokens to telemetry)
-      // AI SDK uses inputTokens/outputTokens, Langfuse expects promptTokens/completionTokens
-      setTraceOutput(text, {
-        promptTokens: usage?.inputTokens,
-        completionTokens: usage?.outputTokens,
-      });
-    },
-    tools: {
-      // Client-side tool that will be executed on the client
-      display_diagram: {
-        description: `Display a diagram on draw.io. Pass the XML content inside <root> tags.
+    const result = streamText({
+        model,
+        messages: allMessages,
+        ...(providerOptions && { providerOptions }),
+        ...(headers && { headers }),
+        // Langfuse telemetry config (returns undefined if not configured)
+        ...(getTelemetryConfig({ sessionId: validSessionId, userId }) && {
+            experimental_telemetry: getTelemetryConfig({
+                sessionId: validSessionId,
+                userId,
+            }),
+        }),
+        onFinish: ({ text, usage, providerMetadata }) => {
+            console.log(
+                "[Cache] Full providerMetadata:",
+                JSON.stringify(providerMetadata, null, 2),
+            )
+            console.log("[Cache] Usage:", JSON.stringify(usage, null, 2))
+            // Pass usage to Langfuse (Bedrock streaming doesn't auto-report tokens to telemetry)
+            // AI SDK uses inputTokens/outputTokens, Langfuse expects promptTokens/completionTokens
+            setTraceOutput(text, {
+                promptTokens: usage?.inputTokens,
+                completionTokens: usage?.outputTokens,
+            })
+        },
+        tools: {
+            // Client-side tool that will be executed on the client
+            display_diagram: {
+                description: `Display a diagram on draw.io. Pass the XML content inside <root> tags.
 
 VALIDATION RULES (XML will be rejected if violated):
 1. All mxCell elements must be DIRECT children of <root> - never nested
@@ -276,12 +328,14 @@ Notes:
 - For AWS diagrams, use **AWS 2025 icons**.
 - For animated connectors, add "flowAnimation=1" to edge style.
 `,
-        inputSchema: z.object({
-          xml: z.string().describe("XML string to be displayed on draw.io")
-        })
-      },
-      edit_diagram: {
-        description: `Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML.
+                inputSchema: z.object({
+                    xml: z
+                        .string()
+                        .describe("XML string to be displayed on draw.io"),
+                }),
+            },
+            edit_diagram: {
+                description: `Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML.
 CRITICAL: Copy-paste the EXACT search pattern from the "Current diagram XML" in system context. Do NOT reorder attributes or reformat - the attribute order in draw.io XML varies and you MUST match it exactly.
 IMPORTANT: Keep edits concise:
 - COPY the exact mxCell line from the current XML (attribute order matters!)
@@ -289,33 +343,48 @@ IMPORTANT: Keep edits concise:
 - Break large changes into multiple smaller edits
 - Each search must contain complete lines (never truncate mid-line)
 - First match only - be specific enough to target the right element`,
-        inputSchema: z.object({
-          edits: z.array(z.object({
-            search: z.string().describe("EXACT lines copied from current XML (preserve attribute order!)"),
-            replace: z.string().describe("Replacement lines")
-          })).describe("Array of search/replace pairs to apply sequentially")
-        })
-      },
-    },
-    temperature: 0,
-  });
+                inputSchema: z.object({
+                    edits: z
+                        .array(
+                            z.object({
+                                search: z
+                                    .string()
+                                    .describe(
+                                        "EXACT lines copied from current XML (preserve attribute order!)",
+                                    ),
+                                replace: z
+                                    .string()
+                                    .describe("Replacement lines"),
+                            }),
+                        )
+                        .describe(
+                            "Array of search/replace pairs to apply sequentially",
+                        ),
+                }),
+            },
+        },
+        temperature: 0,
+    })
 
-  return result.toUIMessageStreamResponse();
+    return result.toUIMessageStreamResponse()
 }
 
 // Wrap handler with error handling
 async function safeHandler(req: Request): Promise<Response> {
-  try {
-    return await handleChatRequest(req);
-  } catch (error) {
-    console.error('Error in chat route:', error);
-    return Response.json({ error: 'Internal server error' }, { status: 500 });
-  }
+    try {
+        return await handleChatRequest(req)
+    } catch (error) {
+        console.error("Error in chat route:", error)
+        return Response.json(
+            { error: "Internal server error" },
+            { status: 500 },
+        )
+    }
 }
 
 // Wrap with Langfuse observe (if configured)
-const observedHandler = wrapWithObserve(safeHandler);
+const observedHandler = wrapWithObserve(safeHandler)
 
 export async function POST(req: Request) {
-  return observedHandler(req);
+    return observedHandler(req)
 }
diff --git a/app/api/config/route.ts b/app/api/config/route.ts
index 9d92b90..ea4a883 100644
--- a/app/api/config/route.ts
+++ b/app/api/config/route.ts
@@ -1,9 +1,12 @@
-import { NextResponse } from "next/server";
+import { NextResponse } from "next/server"
 
 export async function GET() {
-  const accessCodes = process.env.ACCESS_CODE_LIST?.split(',').map(code => code.trim()).filter(Boolean) || [];
+    const accessCodes =
+        process.env.ACCESS_CODE_LIST?.split(",")
+            .map((code) => code.trim())
+            .filter(Boolean) || []
 
-  return NextResponse.json({
-    accessCodeRequired: accessCodes.length > 0,
-  });
+    return NextResponse.json({
+        accessCodeRequired: accessCodes.length > 0,
+    })
 }
diff --git a/app/api/log-feedback/route.ts b/app/api/log-feedback/route.ts
index a0dbb09..0ca1a9c 100644
--- a/app/api/log-feedback/route.ts
+++ b/app/api/log-feedback/route.ts
@@ -1,103 +1,112 @@
-import { getLangfuseClient } from '@/lib/langfuse';
-import { randomUUID } from 'crypto';
-import { z } from 'zod';
+import { randomUUID } from "crypto"
+import { z } from "zod"
+import { getLangfuseClient } from "@/lib/langfuse"
 
 const feedbackSchema = z.object({
-  messageId: z.string().min(1).max(200),
-  feedback: z.enum(['good', 'bad']),
-  sessionId: z.string().min(1).max(200).optional(),
-});
+    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;
-
-  // Get user IP for tracking
-  const forwardedFor = req.headers.get('x-forwarded-for');
-  const userId = forwardedFor?.split(',')[0]?.trim() || 'anonymous';
-
-  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`,
-            },
-          },
-        ],
-      });
+    const langfuse = getLangfuseClient()
+    if (!langfuse) {
+        return Response.json({ success: true, logged: false })
     }
 
-    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 });
-  }
+    // 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
+
+    // Get user IP for tracking
+    const forwardedFor = req.headers.get("x-forwarded-for")
+    const userId = forwardedFor?.split(",")[0]?.trim() || "anonymous"
+
+    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 },
+        )
+    }
 }
diff --git a/app/api/log-save/route.ts b/app/api/log-save/route.ts
index e4862c9..28feded 100644
--- a/app/api/log-save/route.ts
+++ b/app/api/log-save/route.ts
@@ -1,65 +1,71 @@
-import { getLangfuseClient } from '@/lib/langfuse';
-import { randomUUID } from 'crypto';
-import { z } from 'zod';
+import { randomUUID } from "crypto"
+import { z } from "zod"
+import { getLangfuseClient } from "@/lib/langfuse"
 
 const saveSchema = z.object({
-  filename: z.string().min(1).max(255),
-  format: z.enum(['drawio', 'png', 'svg']),
-  sessionId: z.string().min(1).max(200).optional(),
-});
+    filename: z.string().min(1).max(255),
+    format: z.enum(["drawio", "png", "svg"]),
+    sessionId: z.string().min(1).max(200).optional(),
+})
 
 export async function POST(req: Request) {
-  const langfuse = getLangfuseClient();
-  if (!langfuse) {
-    return Response.json({ success: true, logged: false });
-  }
-
-  // Validate input
-  let data;
-  try {
-    data = saveSchema.parse(await req.json());
-  } catch {
-    return Response.json({ success: false, error: 'Invalid input' }, { status: 400 });
-  }
-
-  const { filename, format, sessionId } = data;
-
-  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}`,
-            },
-          },
-        ],
-      });
+    const langfuse = getLangfuseClient()
+    if (!langfuse) {
+        return Response.json({ success: true, logged: false })
     }
-    // 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 });
-  }
+    // 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
+
+    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 },
+        )
+    }
 }
diff --git a/app/globals.css b/app/globals.css
index 20acb55..feaea6d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,250 +6,254 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --font-sans: var(--font-sans);
+    --font-mono: var(--font-mono);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
 }
 
 :root {
-  --radius: 0.75rem;
+    --radius: 0.75rem;
 
-  /* Clean Light Modern Palette */
-  --background: oklch(0.985 0.002 240);
-  --foreground: oklch(0.23 0.02 260);
+    /* Clean Light Modern Palette */
+    --background: oklch(0.985 0.002 240);
+    --foreground: oklch(0.23 0.02 260);
 
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.23 0.02 260);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.23 0.02 260);
 
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.23 0.02 260);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.23 0.02 260);
 
-  /* Dark primary - slightly lighter */
-  --primary: oklch(0.35 0.01 260);
-  --primary-foreground: oklch(0.99 0 0);
+    /* Dark primary - slightly lighter */
+    --primary: oklch(0.35 0.01 260);
+    --primary-foreground: oklch(0.99 0 0);
 
-  /* Warm gray secondary */
-  --secondary: oklch(0.96 0.005 260);
-  --secondary-foreground: oklch(0.35 0.02 260);
+    /* Warm gray secondary */
+    --secondary: oklch(0.96 0.005 260);
+    --secondary-foreground: oklch(0.35 0.02 260);
 
-  /* Light muted tones */
-  --muted: oklch(0.965 0.005 260);
-  --muted-foreground: oklch(0.50 0.02 260);
+    /* Light muted tones */
+    --muted: oklch(0.965 0.005 260);
+    --muted-foreground: oklch(0.5 0.02 260);
 
-  /* Soft lavender accent */
-  --accent: oklch(0.94 0.03 280);
-  --accent-foreground: oklch(0.35 0.08 270);
+    /* Soft lavender accent */
+    --accent: oklch(0.94 0.03 280);
+    --accent-foreground: oklch(0.35 0.08 270);
 
-  /* Coral destructive */
-  --destructive: oklch(0.60 0.20 25);
+    /* Coral destructive */
+    --destructive: oklch(0.6 0.2 25);
 
-  /* Subtle borders */
-  --border: oklch(0.92 0.01 260);
-  --input: oklch(0.94 0.01 260);
-  --ring: oklch(0.25 0.01 260);
+    /* Subtle borders */
+    --border: oklch(0.92 0.01 260);
+    --input: oklch(0.94 0.01 260);
+    --ring: oklch(0.25 0.01 260);
 
-  /* Chart colors - harmonious palette */
-  --chart-1: oklch(0.55 0.18 265);
-  --chart-2: oklch(0.65 0.15 170);
-  --chart-3: oklch(0.70 0.18 45);
-  --chart-4: oklch(0.60 0.20 330);
-  --chart-5: oklch(0.50 0.15 200);
+    /* Chart colors - harmonious palette */
+    --chart-1: oklch(0.55 0.18 265);
+    --chart-2: oklch(0.65 0.15 170);
+    --chart-3: oklch(0.7 0.18 45);
+    --chart-4: oklch(0.6 0.2 330);
+    --chart-5: oklch(0.5 0.15 200);
 
-  /* Sidebar */
-  --sidebar: oklch(0.99 0.002 260);
-  --sidebar-foreground: oklch(0.23 0.02 260);
-  --sidebar-primary: oklch(0.55 0.18 265);
-  --sidebar-primary-foreground: oklch(0.99 0 0);
-  --sidebar-accent: oklch(0.96 0.02 270);
-  --sidebar-accent-foreground: oklch(0.35 0.05 265);
-  --sidebar-border: oklch(0.93 0.01 260);
-  --sidebar-ring: oklch(0.55 0.18 265);
+    /* Sidebar */
+    --sidebar: oklch(0.99 0.002 260);
+    --sidebar-foreground: oklch(0.23 0.02 260);
+    --sidebar-primary: oklch(0.55 0.18 265);
+    --sidebar-primary-foreground: oklch(0.99 0 0);
+    --sidebar-accent: oklch(0.96 0.02 270);
+    --sidebar-accent-foreground: oklch(0.35 0.05 265);
+    --sidebar-border: oklch(0.93 0.01 260);
+    --sidebar-ring: oklch(0.55 0.18 265);
 }
 
 .dark {
-  --background: oklch(0.15 0.015 260);
-  --foreground: oklch(0.95 0.01 260);
+    --background: oklch(0.15 0.015 260);
+    --foreground: oklch(0.95 0.01 260);
 
-  --card: oklch(0.20 0.015 260);
-  --card-foreground: oklch(0.95 0.01 260);
+    --card: oklch(0.2 0.015 260);
+    --card-foreground: oklch(0.95 0.01 260);
 
-  --popover: oklch(0.20 0.015 260);
-  --popover-foreground: oklch(0.95 0.01 260);
+    --popover: oklch(0.2 0.015 260);
+    --popover-foreground: oklch(0.95 0.01 260);
 
-  --primary: oklch(0.70 0.16 265);
-  --primary-foreground: oklch(0.15 0.02 260);
+    --primary: oklch(0.7 0.16 265);
+    --primary-foreground: oklch(0.15 0.02 260);
 
-  --secondary: oklch(0.25 0.015 260);
-  --secondary-foreground: oklch(0.90 0.01 260);
+    --secondary: oklch(0.25 0.015 260);
+    --secondary-foreground: oklch(0.9 0.01 260);
 
-  --muted: oklch(0.25 0.015 260);
-  --muted-foreground: oklch(0.65 0.02 260);
+    --muted: oklch(0.25 0.015 260);
+    --muted-foreground: oklch(0.65 0.02 260);
 
-  --accent: oklch(0.30 0.04 280);
-  --accent-foreground: oklch(0.90 0.03 270);
+    --accent: oklch(0.3 0.04 280);
+    --accent-foreground: oklch(0.9 0.03 270);
 
-  --destructive: oklch(0.65 0.22 25);
+    --destructive: oklch(0.65 0.22 25);
 
-  --border: oklch(0.28 0.015 260);
-  --input: oklch(0.25 0.015 260);
-  --ring: oklch(0.70 0.16 265);
+    --border: oklch(0.28 0.015 260);
+    --input: oklch(0.25 0.015 260);
+    --ring: oklch(0.7 0.16 265);
 
-  --chart-1: oklch(0.70 0.16 265);
-  --chart-2: oklch(0.70 0.13 170);
-  --chart-3: oklch(0.75 0.16 45);
-  --chart-4: oklch(0.70 0.18 330);
-  --chart-5: oklch(0.60 0.13 200);
+    --chart-1: oklch(0.7 0.16 265);
+    --chart-2: oklch(0.7 0.13 170);
+    --chart-3: oklch(0.75 0.16 45);
+    --chart-4: oklch(0.7 0.18 330);
+    --chart-5: oklch(0.6 0.13 200);
 
-  --sidebar: oklch(0.18 0.015 260);
-  --sidebar-foreground: oklch(0.95 0.01 260);
-  --sidebar-primary: oklch(0.70 0.16 265);
-  --sidebar-primary-foreground: oklch(0.15 0.02 260);
-  --sidebar-accent: oklch(0.25 0.03 270);
-  --sidebar-accent-foreground: oklch(0.90 0.02 265);
-  --sidebar-border: oklch(0.28 0.015 260);
-  --sidebar-ring: oklch(0.70 0.16 265);
+    --sidebar: oklch(0.18 0.015 260);
+    --sidebar-foreground: oklch(0.95 0.01 260);
+    --sidebar-primary: oklch(0.7 0.16 265);
+    --sidebar-primary-foreground: oklch(0.15 0.02 260);
+    --sidebar-accent: oklch(0.25 0.03 270);
+    --sidebar-accent-foreground: oklch(0.9 0.02 265);
+    --sidebar-border: oklch(0.28 0.015 260);
+    --sidebar-ring: oklch(0.7 0.16 265);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground font-sans;
-  }
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground font-sans;
+    }
 }
 
 /* Fix for Radix ScrollArea viewport horizontal overflow */
 [data-slot="scroll-area-viewport"] > div {
-  display: block !important;
-  width: 100% !important;
+    display: block !important;
+    width: 100% !important;
 }
 
 /* Custom scrollbar */
 @layer utilities {
-  .scrollbar-thin {
-    scrollbar-width: thin;
-    scrollbar-color: oklch(0.85 0.01 260) transparent;
-  }
+    .scrollbar-thin {
+        scrollbar-width: thin;
+        scrollbar-color: oklch(0.85 0.01 260) transparent;
+    }
 
-  .scrollbar-thin::-webkit-scrollbar {
-    width: 6px;
-  }
+    .scrollbar-thin::-webkit-scrollbar {
+        width: 6px;
+    }
 
-  .scrollbar-thin::-webkit-scrollbar-track {
-    background: transparent;
-  }
+    .scrollbar-thin::-webkit-scrollbar-track {
+        background: transparent;
+    }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: oklch(0.85 0.01 260);
-    border-radius: 3px;
-  }
+    .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: oklch(0.85 0.01 260);
+        border-radius: 3px;
+    }
 
-  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background-color: oklch(0.75 0.01 260);
-  }
+    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: oklch(0.75 0.01 260);
+    }
 }
 
 /* Smooth page transitions */
 @keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
 @keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(16px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+    from {
+        opacity: 0;
+        transform: translateX(16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
 .animate-fade-in {
-  animation: fadeIn 0.3s ease-out forwards;
+    animation: fadeIn 0.3s ease-out forwards;
 }
 
 .animate-slide-in-right {
-  animation: slideInRight 0.3s ease-out forwards;
+    animation: slideInRight 0.3s ease-out forwards;
 }
 
 /* Message bubble animations */
 @keyframes messageIn {
-  from {
-    opacity: 0;
-    transform: translateY(12px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
+    from {
+        opacity: 0;
+        transform: translateY(12px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
 }
 
 .animate-message-in {
-  animation: messageIn 0.25s ease-out forwards;
+    animation: messageIn 0.25s ease-out forwards;
 }
 
 /* Subtle floating shadow for cards */
 .shadow-soft {
-  box-shadow:
-    0 1px 2px oklch(0.23 0.02 260 / 0.04),
-    0 4px 12px oklch(0.23 0.02 260 / 0.06),
-    0 8px 24px oklch(0.23 0.02 260 / 0.04);
+    box-shadow:
+        0 1px 2px oklch(0.23 0.02 260 / 0.04),
+        0 4px 12px oklch(0.23 0.02 260 / 0.06),
+        0 8px 24px oklch(0.23 0.02 260 / 0.04);
 }
 
 .shadow-soft-lg {
-  box-shadow:
-    0 2px 4px oklch(0.23 0.02 260 / 0.04),
-    0 8px 20px oklch(0.23 0.02 260 / 0.08),
-    0 16px 40px oklch(0.23 0.02 260 / 0.06);
+    box-shadow:
+        0 2px 4px oklch(0.23 0.02 260 / 0.04),
+        0 8px 20px oklch(0.23 0.02 260 / 0.08),
+        0 16px 40px oklch(0.23 0.02 260 / 0.06);
 }
 
 /* Gradient text utility */
 .text-gradient-primary {
-  background: linear-gradient(135deg, oklch(0.55 0.18 265), oklch(0.60 0.20 290));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+    background: linear-gradient(
+        135deg,
+        oklch(0.55 0.18 265),
+        oklch(0.6 0.2 290)
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index bb40d98..aa94e9c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,41 +1,53 @@
-import type { Metadata, Viewport } from "next";
-import { Plus_Jakarta_Sans, JetBrains_Mono } from "next/font/google";
-import { Analytics } from "@vercel/analytics/react";
-import { GoogleAnalytics } from "@next/third-parties/google";
-import { DiagramProvider } from "@/contexts/diagram-context";
+import { GoogleAnalytics } from "@next/third-parties/google"
+import { Analytics } from "@vercel/analytics/react"
+import type { Metadata, Viewport } from "next"
+import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google"
+import { DiagramProvider } from "@/contexts/diagram-context"
 
-import "./globals.css";
+import "./globals.css"
 
 const plusJakarta = Plus_Jakarta_Sans({
     variable: "--font-sans",
     subsets: ["latin"],
     weight: ["400", "500", "600", "700"],
-});
+})
 
 const jetbrainsMono = JetBrains_Mono({
     variable: "--font-mono",
     subsets: ["latin"],
     weight: ["400", "500"],
-});
+})
 
 export const viewport: Viewport = {
     width: "device-width",
     initialScale: 1,
     maximumScale: 1,
     userScalable: false,
-};
+}
 
 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"],
+    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.",
+        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",
@@ -52,7 +64,8 @@ export const metadata: Metadata = {
     twitter: {
         card: "summary_large_image",
         title: "Next AI Draw.io - AI Diagram Generator",
-        description: "Create professional diagrams with AI assistance. Free, no login required.",
+        description:
+            "Create professional diagrams with AI assistance. Free, no login required.",
         images: ["/architecture.png"],
     },
     robots: {
@@ -69,27 +82,28 @@ export const metadata: Metadata = {
     icons: {
         icon: "/favicon.ico",
     },
-};
+}
 
 export default function RootLayout({
     children,
 }: Readonly<{
-    children: React.ReactNode;
+    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',
+        "@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',
+            "@type": "Offer",
+            price: "0",
+            priceCurrency: "USD",
         },
-    };
+    }
 
     return (
         <html lang="en">
@@ -109,5 +123,5 @@ export default function RootLayout({
                 <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
             )}
         </html>
-    );
+    )
 }
diff --git a/app/page.tsx b/app/page.tsx
index ce83f9c..a45dbca 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,75 +1,75 @@
-"use client";
-import React, { useState, useEffect, useRef } from "react";
-import { DrawIoEmbed } from "react-drawio";
-import ChatPanel from "@/components/chat-panel";
-import { useDiagram } from "@/contexts/diagram-context";
+"use client"
+import React, { useEffect, useRef, useState } from "react"
+import { DrawIoEmbed } from "react-drawio"
+import type { ImperativePanelHandle } from "react-resizable-panels"
+import ChatPanel from "@/components/chat-panel"
 import {
-    ResizablePanelGroup,
-    ResizablePanel,
     ResizableHandle,
-} from "@/components/ui/resizable";
-import type { ImperativePanelHandle } from "react-resizable-panels";
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/components/ui/resizable"
+import { useDiagram } from "@/contexts/diagram-context"
 
 export default function Home() {
-    const { drawioRef, handleDiagramExport } = useDiagram();
-    const [isMobile, setIsMobile] = useState(false);
-    const [isChatVisible, setIsChatVisible] = useState(true);
+    const { drawioRef, handleDiagramExport } = useDiagram()
+    const [isMobile, setIsMobile] = useState(false)
+    const [isChatVisible, setIsChatVisible] = useState(true)
     const [drawioUi, setDrawioUi] = useState<"min" | "sketch">(() => {
         if (typeof window !== "undefined") {
-            const saved = localStorage.getItem("drawio-theme");
-            if (saved === "min" || saved === "sketch") return saved;
+            const saved = localStorage.getItem("drawio-theme")
+            if (saved === "min" || saved === "sketch") return saved
         }
-        return "min";
-    });
-    const chatPanelRef = useRef<ImperativePanelHandle>(null);
+        return "min"
+    })
+    const chatPanelRef = useRef<ImperativePanelHandle>(null)
 
     useEffect(() => {
         const checkMobile = () => {
-            setIsMobile(window.innerWidth < 768);
-        };
+            setIsMobile(window.innerWidth < 768)
+        }
 
-        checkMobile();
-        window.addEventListener("resize", checkMobile);
-        return () => window.removeEventListener("resize", checkMobile);
-    }, []);
+        checkMobile()
+        window.addEventListener("resize", checkMobile)
+        return () => window.removeEventListener("resize", checkMobile)
+    }, [])
 
     const toggleChatPanel = () => {
-        const panel = chatPanelRef.current;
+        const panel = chatPanelRef.current
         if (panel) {
             if (panel.isCollapsed()) {
-                panel.expand();
-                setIsChatVisible(true);
+                panel.expand()
+                setIsChatVisible(true)
             } else {
-                panel.collapse();
-                setIsChatVisible(false);
+                panel.collapse()
+                setIsChatVisible(false)
             }
         }
-    };
+    }
 
     useEffect(() => {
         const handleKeyDown = (event: KeyboardEvent) => {
             if ((event.ctrlKey || event.metaKey) && event.key === "b") {
-                event.preventDefault();
-                toggleChatPanel();
+                event.preventDefault()
+                toggleChatPanel()
             }
-        };
+        }
 
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, []);
+        window.addEventListener("keydown", handleKeyDown)
+        return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [])
 
     // Show confirmation dialog when user tries to leave the page
     // This helps prevent accidental navigation from browser back gestures
     useEffect(() => {
         const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-            event.preventDefault();
-            return "";
-        };
+            event.preventDefault()
+            return ""
+        }
 
-        window.addEventListener("beforeunload", handleBeforeUnload);
+        window.addEventListener("beforeunload", handleBeforeUnload)
         return () =>
-            window.removeEventListener("beforeunload", handleBeforeUnload);
-    }, []);
+            window.removeEventListener("beforeunload", handleBeforeUnload)
+    }, [])
 
     return (
         <div className="h-screen bg-background relative overflow-hidden">
@@ -80,7 +80,11 @@ export default function Home() {
             >
                 {/* Draw.io Canvas */}
                 <ResizablePanel defaultSize={isMobile ? 50 : 67} minSize={20}>
-                    <div className={`h-full relative ${isMobile ? "p-1" : "p-2"}`}>
+                    <div
+                        className={`h-full relative ${
+                            isMobile ? "p-1" : "p-2"
+                        }`}
+                    >
                         <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 bg-white">
                             <DrawIoEmbed
                                 key={drawioUi}
@@ -117,9 +121,10 @@ export default function Home() {
                             onToggleVisibility={toggleChatPanel}
                             drawioUi={drawioUi}
                             onToggleDrawioUi={() => {
-                                const newTheme = drawioUi === "min" ? "sketch" : "min";
-                                localStorage.setItem("drawio-theme", newTheme);
-                                setDrawioUi(newTheme);
+                                const newTheme =
+                                    drawioUi === "min" ? "sketch" : "min"
+                                localStorage.setItem("drawio-theme", newTheme)
+                                setDrawioUi(newTheme)
                             }}
                             isMobile={isMobile}
                         />
@@ -127,5 +132,5 @@ export default function Home() {
                 </ResizablePanel>
             </ResizablePanelGroup>
         </div>
-    );
+    )
 }
diff --git a/app/robots.ts b/app/robots.ts
index edfd34a..3f92315 100644
--- a/app/robots.ts
+++ b/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",
     }
 }
diff --git a/app/sitemap.ts b/app/sitemap.ts
index 1effa2e..74a1da9 100644
--- a/app/sitemap.ts
+++ b/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,
         },
     ]
diff --git a/biome.json b/biome.json
new file mode 100644
index 0000000..355aa06
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,59 @@
+{
+    "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
+    "vcs": {
+        "enabled": true,
+        "clientKind": "git",
+        "useIgnoreFile": true
+    },
+    "files": {
+        "ignoreUnknown": false
+    },
+    "formatter": {
+        "enabled": true,
+        "indentStyle": "space",
+        "indentWidth": 4
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true,
+            "complexity": {
+                "noImportantStyles": "off"
+            }
+        }
+    },
+    "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
+            }
+        }
+    ]
+}
diff --git a/components.json b/components.json
index 335484f..a310a03 100644
--- a/components.json
+++ b/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"
-}
\ No newline at end of file
+    "$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"
+}
diff --git a/components/button-with-tooltip.tsx b/components/button-with-tooltip.tsx
index 99903b5..089b059 100644
--- a/components/button-with-tooltip.tsx
+++ b/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 className="max-w-xs text-wrap">{tooltipContent}</TooltipContent>
+                <TooltipContent className="max-w-xs text-wrap">
+                    {tooltipContent}
+                </TooltipContent>
             </Tooltip>
         </TooltipProvider>
-    );
+    )
 }
diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx
index 05daedd..6d4c17a 100644
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -1,12 +1,12 @@
-"use client";
+"use client"
 
-import { Zap, Cloud, GitBranch, Palette } from "lucide-react";
+import { Cloud, GitBranch, Palette, Zap } from "lucide-react"
 
 interface ExampleCardProps {
-    icon: React.ReactNode;
-    title: string;
-    description: string;
-    onClick: () => void;
+    icon: React.ReactNode
+    title: string
+    description: string
+    onClick: () => void
 }
 
 function ExampleCard({ icon, title, description, onClick }: ExampleCardProps) {
@@ -29,43 +29,43 @@ function ExampleCard({ icon, title, description, onClick }: ExampleCardProps) {
                 </div>
             </div>
         </button>
-    );
+    )
 }
 
 export default function ExamplePanel({
     setInput,
     setFiles,
 }: {
-    setInput: (input: string) => void;
-    setFiles: (files: File[]) => void;
+    setInput: (input: string) => void
+    setFiles: (files: File[]) => void
 }) {
     const handleReplicateFlowchart = async () => {
-        setInput("Replicate this flowchart.");
+        setInput("Replicate this flowchart.")
 
         try {
-            const response = await fetch("/example.png");
-            const blob = await response.blob();
-            const file = new File([blob], "example.png", { type: "image/png" });
-            setFiles([file]);
+            const response = await fetch("/example.png")
+            const blob = await response.blob()
+            const file = new File([blob], "example.png", { type: "image/png" })
+            setFiles([file])
         } catch (error) {
-            console.error("Error loading example image:", error);
+            console.error("Error loading example image:", error)
         }
-    };
+    }
 
     const handleReplicateArchitecture = async () => {
-        setInput("Replicate this in aws style");
+        setInput("Replicate this in aws style")
 
         try {
-            const response = await fetch("/architecture.png");
-            const blob = await response.blob();
+            const response = await fetch("/architecture.png")
+            const blob = await response.blob()
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
-            });
-            setFiles([file]);
+            })
+            setFiles([file])
         } catch (error) {
-            console.error("Error loading architecture image:", error);
+            console.error("Error loading architecture image:", error)
         }
-    };
+    }
 
     return (
         <div className="py-6 px-2 animate-fade-in">
@@ -75,7 +75,8 @@ export default function ExamplePanel({
                     Create diagrams with AI
                 </h2>
                 <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-                    Describe what you want to create or upload an image to replicate
+                    Describe what you want to create or upload an image to
+                    replicate
                 </p>
             </div>
 
@@ -91,7 +92,9 @@ export default function ExamplePanel({
                         title="Animated Diagram"
                         description="Draw a transformer architecture with animated connectors"
                         onClick={() => {
-                            setInput("Give me a **animated connector** diagram of transformer's architecture")
+                            setInput(
+                                "Give me a **animated connector** diagram of transformer's architecture",
+                            )
                             setFiles([])
                         }}
                     />
@@ -126,5 +129,5 @@ export default function ExamplePanel({
                 </p>
             </div>
         </div>
-    );
+    )
 }
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
index 05b1bb8..de8e7ad 100644
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -1,10 +1,24 @@
-"use client";
+"use client"
 
-import React, { useCallback, useRef, useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { ResetWarningModal } from "@/components/reset-warning-modal";
-import { SaveDialog } from "@/components/save-dialog";
+import {
+    Download,
+    History,
+    Image as ImageIcon,
+    LayoutGrid,
+    Loader2,
+    PenTool,
+    Send,
+    Trash2,
+} from "lucide-react"
+import type React from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
+import { ButtonWithTooltip } from "@/components/button-with-tooltip"
+import { ErrorToast } from "@/components/error-toast"
+import { HistoryDialog } from "@/components/history-dialog"
+import { ResetWarningModal } from "@/components/reset-warning-modal"
+import { SaveDialog } from "@/components/save-dialog"
+import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
@@ -12,103 +26,105 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from "@/components/ui/dialog";
-import {
-    Loader2,
-    Send,
-    Trash2,
-    Image as ImageIcon,
-    History,
-    Download,
-    PenTool,
-    LayoutGrid,
-} from "lucide-react";
-import { toast } from "sonner";
-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";
-import { ErrorToast } from "@/components/error-toast";
+} from "@/components/ui/dialog"
+import { Textarea } from "@/components/ui/textarea"
+import { useDiagram } from "@/contexts/diagram-context"
+import { FilePreviewList } from "./file-preview-list"
 
-const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
-const MAX_FILES = 5;
+const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+const MAX_FILES = 5
 
 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`;
+    const mb = bytes / 1024 / 1024
+    if (mb < 0.01) return `${(bytes / 1024).toFixed(0)}KB`
+    return `${mb.toFixed(2)}MB`
 }
 
 function showErrorToast(message: React.ReactNode) {
     toast.custom(
-        (t) => <ErrorToast message={message} onDismiss={() => toast.dismiss(t)} />,
-        { duration: 5000 }
-    );
+        (t) => (
+            <ErrorToast message={message} onDismiss={() => toast.dismiss(t)} />
+        ),
+        { duration: 5000 },
+    )
 }
 
 interface ValidationResult {
-    validFiles: File[];
-    errors: string[];
+    validFiles: File[]
+    errors: string[]
 }
 
-function validateFiles(newFiles: File[], existingCount: number): ValidationResult {
-    const errors: string[] = [];
-    const validFiles: File[] = [];
+function validateFiles(
+    newFiles: File[],
+    existingCount: number,
+): ValidationResult {
+    const errors: string[] = []
+    const validFiles: File[] = []
 
-    const availableSlots = MAX_FILES - existingCount;
+    const availableSlots = MAX_FILES - existingCount
 
     if (availableSlots <= 0) {
-        errors.push(`Maximum ${MAX_FILES} files allowed`);
-        return { validFiles, errors };
+        errors.push(`Maximum ${MAX_FILES} files allowed`)
+        return { validFiles, errors }
     }
 
     for (const file of newFiles) {
         if (validFiles.length >= availableSlots) {
-            errors.push(`Only ${availableSlots} more file(s) allowed`);
-            break;
+            errors.push(`Only ${availableSlots} more file(s) allowed`)
+            break
         }
         if (file.size > MAX_FILE_SIZE) {
-            errors.push(`"${file.name}" is ${formatFileSize(file.size)} (exceeds 2MB)`);
+            errors.push(
+                `"${file.name}" is ${formatFileSize(file.size)} (exceeds 2MB)`,
+            )
         } else {
-            validFiles.push(file);
+            validFiles.push(file)
         }
     }
 
-    return { validFiles, errors };
+    return { validFiles, errors }
 }
 
 function showValidationErrors(errors: string[]) {
-    if (errors.length === 0) return;
+    if (errors.length === 0) return
 
     if (errors.length === 1) {
-        showErrorToast(<span className="text-muted-foreground">{errors[0]}</span>);
+        showErrorToast(
+            <span className="text-muted-foreground">{errors[0]}</span>,
+        )
     } else {
         showErrorToast(
             <div className="flex flex-col gap-1">
-                <span className="font-medium">{errors.length} files rejected:</span>
+                <span className="font-medium">
+                    {errors.length} files rejected:
+                </span>
                 <ul className="text-muted-foreground text-xs list-disc list-inside">
-                    {errors.slice(0, 3).map((err, i) => <li key={i}>{err}</li>)}
-                    {errors.length > 3 && <li>...and {errors.length - 3} more</li>}
+                    {errors.slice(0, 3).map((err, i) => (
+                        <li key={i}>{err}</li>
+                    ))}
+                    {errors.length > 3 && (
+                        <li>...and {errors.length - 3} more</li>
+                    )}
                 </ul>
-            </div>
-        );
+            </div>,
+        )
     }
 }
 
 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;
-    sessionId?: string;
-    error?: Error | null;
-    drawioUi?: "min" | "sketch";
-    onToggleDrawioUi?: () => void;
+    input: string
+    status: "submitted" | "streaming" | "ready" | "error"
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
+    onClearChat: () => void
+    files?: File[]
+    onFileChange?: (files: File[]) => void
+    showHistory?: boolean
+    onToggleHistory?: (show: boolean) => void
+    sessionId?: string
+    error?: Error | null
+    drawioUi?: "min" | "sketch"
+    onToggleDrawioUi?: () => void
 }
 
 export function ChatInput({
@@ -126,128 +142,133 @@ export function ChatInput({
     drawioUi = "min",
     onToggleDrawioUi = () => {},
 }: ChatInputProps) {
-    const { diagramHistory, saveDiagramToFile } = useDiagram();
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-    const [isDragging, setIsDragging] = useState(false);
-    const [showClearDialog, setShowClearDialog] = useState(false);
-    const [showSaveDialog, setShowSaveDialog] = useState(false);
-    const [showThemeWarning, setShowThemeWarning] = useState(false);
+    const { diagramHistory, saveDiagramToFile } = useDiagram()
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    const [isDragging, setIsDragging] = useState(false)
+    const [showClearDialog, setShowClearDialog] = useState(false)
+    const [showSaveDialog, setShowSaveDialog] = useState(false)
+    const [showThemeWarning, setShowThemeWarning] = useState(false)
 
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
-        (status === "streaming" || status === "submitted") && !error;
+        (status === "streaming" || status === "submitted") && !error
 
     const adjustTextareaHeight = useCallback(() => {
-        const textarea = textareaRef.current;
+        const textarea = textareaRef.current
         if (textarea) {
-            textarea.style.height = "auto";
-            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+            textarea.style.height = "auto"
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
         }
-    }, []);
+    }, [])
 
     useEffect(() => {
-        adjustTextareaHeight();
-    }, [input, adjustTextareaHeight]);
+        adjustTextareaHeight()
+    }, [input, adjustTextareaHeight])
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-            e.preventDefault();
-            const form = e.currentTarget.closest("form");
+            e.preventDefault()
+            const form = e.currentTarget.closest("form")
             if (form && input.trim() && !isDisabled) {
-                form.requestSubmit();
+                form.requestSubmit()
             }
         }
-    };
+    }
 
     const handlePaste = async (e: React.ClipboardEvent) => {
-        if (isDisabled) return;
+        if (isDisabled) return
 
-        const items = e.clipboardData.items;
+        const items = e.clipboardData.items
         const imageItems = Array.from(items).filter((item) =>
-            item.type.startsWith("image/")
-        );
+            item.type.startsWith("image/"),
+        )
 
         if (imageItems.length > 0) {
-            const imageFiles = (await Promise.all(
-                imageItems.map(async (item, index) => {
-                    const file = item.getAsFile();
-                    if (!file) return null;
-                    return new File(
-                        [file],
-                        `pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
-                        { type: file.type }
-                    );
-                })
-            )).filter((f): f is File => f !== null);
+            const imageFiles = (
+                await Promise.all(
+                    imageItems.map(async (item, index) => {
+                        const file = item.getAsFile()
+                        if (!file) return null
+                        return new File(
+                            [file],
+                            `pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
+                            { type: file.type },
+                        )
+                    }),
+                )
+            ).filter((f): f is File => f !== null)
 
-            const { validFiles, errors } = validateFiles(imageFiles, files.length);
-            showValidationErrors(errors);
+            const { validFiles, errors } = validateFiles(
+                imageFiles,
+                files.length,
+            )
+            showValidationErrors(errors)
             if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles]);
+                onFileChange([...files, ...validFiles])
             }
         }
-    };
+    }
 
     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const newFiles = Array.from(e.target.files || []);
-        const { validFiles, errors } = validateFiles(newFiles, files.length);
-        showValidationErrors(errors);
+        const newFiles = Array.from(e.target.files || [])
+        const { validFiles, errors } = validateFiles(newFiles, files.length)
+        showValidationErrors(errors)
         if (validFiles.length > 0) {
-            onFileChange([...files, ...validFiles]);
+            onFileChange([...files, ...validFiles])
         }
         // Reset input so same file can be selected again
         if (fileInputRef.current) {
-            fileInputRef.current.value = "";
+            fileInputRef.current.value = ""
         }
-    };
+    }
 
     const handleRemoveFile = (fileToRemove: File) => {
-        onFileChange(files.filter((file) => file !== fileToRemove));
+        onFileChange(files.filter((file) => file !== fileToRemove))
         if (fileInputRef.current) {
-            fileInputRef.current.value = "";
+            fileInputRef.current.value = ""
         }
-    };
+    }
 
     const triggerFileInput = () => {
-        fileInputRef.current?.click();
-    };
+        fileInputRef.current?.click()
+    }
 
     const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(true);
-    };
+        e.preventDefault()
+        e.stopPropagation()
+        setIsDragging(true)
+    }
 
     const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-    };
+        e.preventDefault()
+        e.stopPropagation()
+        setIsDragging(false)
+    }
 
     const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
+        e.preventDefault()
+        e.stopPropagation()
+        setIsDragging(false)
 
-        if (isDisabled) return;
+        if (isDisabled) return
 
-        const droppedFiles = e.dataTransfer.files;
+        const droppedFiles = e.dataTransfer.files
         const imageFiles = Array.from(droppedFiles).filter((file) =>
-            file.type.startsWith("image/")
-        );
+            file.type.startsWith("image/"),
+        )
 
-        const { validFiles, errors } = validateFiles(imageFiles, files.length);
-        showValidationErrors(errors);
+        const { validFiles, errors } = validateFiles(imageFiles, files.length)
+        showValidationErrors(errors)
         if (validFiles.length > 0) {
-            onFileChange([...files, ...validFiles]);
+            onFileChange([...files, ...validFiles])
         }
-    };
+    }
 
     const handleClear = () => {
-        onClearChat();
-        setShowClearDialog(false);
-    };
+        onClearChat()
+        setShowClearDialog(false)
+    }
 
     return (
         <form
@@ -316,7 +337,11 @@ export function ChatInput({
                             variant="ghost"
                             size="sm"
                             onClick={() => setShowThemeWarning(true)}
-                            tooltipContent={drawioUi === "min" ? "Switch to Sketch theme" : "Switch to Minimal theme"}
+                            tooltipContent={
+                                drawioUi === "min"
+                                    ? "Switch to Sketch theme"
+                                    : "Switch to Minimal theme"
+                            }
                             className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
                         >
                             {drawioUi === "min" ? (
@@ -326,27 +351,33 @@ export function ChatInput({
                             )}
                         </ButtonWithTooltip>
 
-                        <Dialog open={showThemeWarning} onOpenChange={setShowThemeWarning}>
+                        <Dialog
+                            open={showThemeWarning}
+                            onOpenChange={setShowThemeWarning}
+                        >
                             <DialogContent>
                                 <DialogHeader>
                                     <DialogTitle>Switch Theme?</DialogTitle>
                                     <DialogDescription>
-                                        Switching themes will reload the diagram editor and clear any unsaved changes.
+                                        Switching themes will reload the diagram
+                                        editor and clear any unsaved changes.
                                     </DialogDescription>
                                 </DialogHeader>
                                 <DialogFooter>
                                     <Button
                                         variant="outline"
-                                        onClick={() => setShowThemeWarning(false)}
+                                        onClick={() =>
+                                            setShowThemeWarning(false)
+                                        }
                                     >
                                         Cancel
                                     </Button>
                                     <Button
                                         variant="destructive"
                                         onClick={() => {
-                                            onClearChat();
-                                            onToggleDrawioUi();
-                                            setShowThemeWarning(false);
+                                            onClearChat()
+                                            onToggleDrawioUi()
+                                            setShowThemeWarning(false)
                                         }}
                                     >
                                         Switch Theme
@@ -439,5 +470,5 @@ export function ChatInput({
                 </div>
             </div>
         </form>
-    );
+    )
 }
diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
index e48e87f..3cccda2 100644
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -1,25 +1,45 @@
-"use client";
+"use client"
 
-import { useRef, useEffect, useState, useCallback } from "react";
-import Image from "next/image";
-import ReactMarkdown from "react-markdown";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import ExamplePanel from "./chat-example-panel";
-import { UIMessage } from "ai";
-import { convertToLegalXml, replaceNodes, validateMxCellStructure } from "@/lib/utils";
-import { Copy, Check, X, ChevronDown, ChevronUp, Cpu, Minus, Plus, ThumbsUp, ThumbsDown, RotateCcw, Pencil } from "lucide-react";
-import { CodeBlock } from "./code-block";
+import type { UIMessage } from "ai"
+import {
+    Check,
+    ChevronDown,
+    ChevronUp,
+    Copy,
+    Cpu,
+    Minus,
+    Pencil,
+    Plus,
+    RotateCcw,
+    ThumbsDown,
+    ThumbsUp,
+    X,
+} from "lucide-react"
+import Image from "next/image"
+import { useCallback, useEffect, useRef, useState } from "react"
+import ReactMarkdown from "react-markdown"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+    convertToLegalXml,
+    replaceNodes,
+    validateMxCellStructure,
+} from "@/lib/utils"
+import ExamplePanel from "./chat-example-panel"
+import { CodeBlock } from "./code-block"
 
 interface EditPair {
-    search: string;
-    replace: string;
+    search: string
+    replace: string
 }
 
 function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
     return (
         <div className="space-y-3">
             {edits.map((edit, index) => (
-                <div key={index} className="rounded-lg border border-border/50 overflow-hidden bg-background/50">
+                <div
+                    key={index}
+                    className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
+                >
                     <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
                         <span className="text-xs font-medium text-muted-foreground">
                             Change {index + 1}
@@ -30,7 +50,9 @@ function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
                         <div className="px-3 py-2">
                             <div className="flex items-center gap-1.5 mb-1.5">
                                 <Minus className="w-3 h-3 text-red-500" />
-                                <span className="text-[10px] font-medium text-red-600 uppercase tracking-wide">Remove</span>
+                                <span className="text-[10px] font-medium text-red-600 uppercase tracking-wide">
+                                    Remove
+                                </span>
                             </div>
                             <pre className="text-[11px] font-mono text-red-700 bg-red-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
                                 {edit.search}
@@ -40,7 +62,9 @@ function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
                         <div className="px-3 py-2">
                             <div className="flex items-center gap-1.5 mb-1.5">
                                 <Plus className="w-3 h-3 text-green-500" />
-                                <span className="text-[10px] font-medium text-green-600 uppercase tracking-wide">Add</span>
+                                <span className="text-[10px] font-medium text-green-600 uppercase tracking-wide">
+                                    Add
+                                </span>
                             </div>
                             <pre className="text-[11px] font-mono text-green-700 bg-green-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
                                 {edit.replace}
@@ -50,26 +74,26 @@ function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
                 </div>
             ))}
         </div>
-    );
+    )
 }
 
-import { useDiagram } from "@/contexts/diagram-context";
+import { useDiagram } from "@/contexts/diagram-context"
 
 const getMessageTextContent = (message: UIMessage): string => {
-    if (!message.parts) return "";
+    if (!message.parts) return ""
     return message.parts
         .filter((part: any) => part.type === "text")
         .map((part: any) => part.text)
-        .join("\n");
-};
+        .join("\n")
+}
 
 interface ChatMessageDisplayProps {
-    messages: UIMessage[];
-    setInput: (input: string) => void;
-    setFiles: (files: File[]) => void;
-    sessionId?: string;
-    onRegenerate?: (messageIndex: number) => void;
-    onEditMessage?: (messageIndex: number, newText: string) => void;
+    messages: UIMessage[]
+    setInput: (input: string) => void
+    setFiles: (files: File[]) => void
+    sessionId?: string
+    onRegenerate?: (messageIndex: number) => void
+    onEditMessage?: (messageIndex: number, newText: string) => void
 }
 
 export function ChatMessageDisplay({
@@ -80,43 +104,47 @@ export function ChatMessageDisplay({
     onRegenerate,
     onEditMessage,
 }: ChatMessageDisplayProps) {
-    const { chartXML, loadDiagram: onDisplayChart } = useDiagram();
-    const messagesEndRef = useRef<HTMLDivElement>(null);
-    const previousXML = useRef<string>("");
-    const processedToolCalls = useRef<Set<string>>(new Set());
+    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 [copiedMessageId, setCopiedMessageId] = useState<string | null>(null);
-    const [copyFailedMessageId, setCopyFailedMessageId] = useState<string | null>(null);
-    const [feedback, setFeedback] = useState<Record<string, "good" | "bad">>({});
-    const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
-    const [editText, setEditText] = useState<string>("");
+        {},
+    )
+    const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null)
+    const [copyFailedMessageId, setCopyFailedMessageId] = useState<
+        string | null
+    >(null)
+    const [feedback, setFeedback] = useState<Record<string, "good" | "bad">>({})
+    const [editingMessageId, setEditingMessageId] = useState<string | null>(
+        null,
+    )
+    const [editText, setEditText] = useState<string>("")
 
     const copyMessageToClipboard = async (messageId: string, text: string) => {
         try {
-            await navigator.clipboard.writeText(text);
-            setCopiedMessageId(messageId);
-            setTimeout(() => setCopiedMessageId(null), 2000);
+            await navigator.clipboard.writeText(text)
+            setCopiedMessageId(messageId)
+            setTimeout(() => setCopiedMessageId(null), 2000)
         } catch (err) {
-            console.error("Failed to copy message:", err);
-            setCopyFailedMessageId(messageId);
-            setTimeout(() => setCopyFailedMessageId(null), 2000);
+            console.error("Failed to copy message:", err)
+            setCopyFailedMessageId(messageId)
+            setTimeout(() => setCopyFailedMessageId(null), 2000)
         }
-    };
+    }
 
     const submitFeedback = async (messageId: string, value: "good" | "bad") => {
         // Toggle off if already selected
         if (feedback[messageId] === value) {
             setFeedback((prev) => {
-                const next = { ...prev };
-                delete next[messageId];
-                return next;
-            });
-            return;
+                const next = { ...prev }
+                delete next[messageId]
+                return next
+            })
+            return
         }
 
-        setFeedback((prev) => ({ ...prev, [messageId]: value }));
+        setFeedback((prev) => ({ ...prev, [messageId]: value }))
 
         try {
             await fetch("/api/log-feedback", {
@@ -127,49 +155,52 @@ export function ChatMessageDisplay({
                     feedback: value,
                     sessionId,
                 }),
-            });
+            })
         } catch (error) {
-            console.warn("Failed to log feedback:", error);
+            console.warn("Failed to log feedback:", error)
         }
-    };
+    }
 
     const handleDisplayChart = useCallback(
         (xml: string) => {
-            const currentXml = xml || "";
-            const convertedXml = convertToLegalXml(currentXml);
+            const currentXml = xml || ""
+            const convertedXml = convertToLegalXml(currentXml)
             if (convertedXml !== previousXML.current) {
-                const replacedXML = replaceNodes(chartXML, convertedXml);
+                const replacedXML = replaceNodes(chartXML, convertedXml)
 
-                const validationError = validateMxCellStructure(replacedXML);
+                const validationError = validateMxCellStructure(replacedXML)
                 if (!validationError) {
-                    previousXML.current = convertedXml;
-                    onDisplayChart(replacedXML);
+                    previousXML.current = convertedXml
+                    onDisplayChart(replacedXML)
                 } else {
-                    console.log("[ChatMessageDisplay] XML validation failed:", validationError);
+                    console.log(
+                        "[ChatMessageDisplay] XML validation failed:",
+                        validationError,
+                    )
                 }
             }
         },
-        [chartXML, onDisplayChart]
-    );
+        [chartXML, onDisplayChart],
+    )
 
     useEffect(() => {
         if (messagesEndRef.current) {
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
         }
-    }, [messages]);
+    }, [messages])
 
     useEffect(() => {
         messages.forEach((message) => {
             if (message.parts) {
                 message.parts.forEach((part: any) => {
                     if (part.type?.startsWith("tool-")) {
-                        const { toolCallId, state } = part;
+                        const { toolCallId, state } = part
 
                         if (state === "output-available") {
                             setExpandedTools((prev) => ({
                                 ...prev,
                                 [toolCallId]: false,
-                            }));
+                            }))
                         }
 
                         if (
@@ -180,44 +211,44 @@ export function ChatMessageDisplay({
                                 state === "input-streaming" ||
                                 state === "input-available"
                             ) {
-                                handleDisplayChart(part.input.xml);
+                                handleDisplayChart(part.input.xml)
                             } else if (
                                 state === "output-available" &&
                                 !processedToolCalls.current.has(toolCallId)
                             ) {
-                                handleDisplayChart(part.input.xml);
-                                processedToolCalls.current.add(toolCallId);
+                                handleDisplayChart(part.input.xml)
+                                processedToolCalls.current.add(toolCallId)
                             }
                         }
                     }
-                });
+                })
             }
-        });
-    }, [messages, handleDisplayChart]);
+        })
+    }, [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 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,
-            }));
-        };
+            }))
+        }
 
         const getToolDisplayName = (name: string) => {
             switch (name) {
                 case "display_diagram":
-                    return "Generate Diagram";
+                    return "Generate Diagram"
                 case "edit_diagram":
-                    return "Edit Diagram";
+                    return "Edit Diagram"
                 default:
-                    return name;
+                    return name
             }
-        };
+        }
 
         return (
             <div
@@ -265,10 +296,16 @@ export function ChatMessageDisplay({
                     <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
                         {typeof input === "object" && input.xml ? (
                             <CodeBlock code={input.xml} language="xml" />
-                        ) : typeof input === "object" && input.edits && Array.isArray(input.edits) ? (
+                        ) : typeof input === "object" &&
+                          input.edits &&
+                          Array.isArray(input.edits) ? (
                             <EditDiffDisplay edits={input.edits} />
-                        ) : typeof input === "object" && Object.keys(input).length > 0 ? (
-                            <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+                        ) : typeof input === "object" &&
+                          Object.keys(input).length > 0 ? (
+                            <CodeBlock
+                                code={JSON.stringify(input, null, 2)}
+                                language="json"
+                            />
                         ) : null}
                     </div>
                 )}
@@ -278,8 +315,8 @@ export function ChatMessageDisplay({
                     </div>
                 )}
             </div>
-        );
-    };
+        )
+    }
 
     return (
         <ScrollArea className="h-full w-full scrollbar-thin">
@@ -288,72 +325,122 @@ export function ChatMessageDisplay({
             ) : (
                 <div className="py-4 px-4 space-y-4">
                     {messages.map((message, messageIndex) => {
-                        const userMessageText = message.role === "user" ? getMessageTextContent(message) : "";
-                        const isLastAssistantMessage = message.role === "assistant" && (
-                            messageIndex === messages.length - 1 ||
-                            messages.slice(messageIndex + 1).every(m => m.role !== "assistant")
-                        );
-                        const isLastUserMessage = message.role === "user" && (
-                            messageIndex === messages.length - 1 ||
-                            messages.slice(messageIndex + 1).every(m => m.role !== "user")
-                        );
-                        const isEditing = editingMessageId === message.id;
+                        const userMessageText =
+                            message.role === "user"
+                                ? getMessageTextContent(message)
+                                : ""
+                        const isLastAssistantMessage =
+                            message.role === "assistant" &&
+                            (messageIndex === messages.length - 1 ||
+                                messages
+                                    .slice(messageIndex + 1)
+                                    .every((m) => m.role !== "assistant"))
+                        const isLastUserMessage =
+                            message.role === "user" &&
+                            (messageIndex === messages.length - 1 ||
+                                messages
+                                    .slice(messageIndex + 1)
+                                    .every((m) => m.role !== "user"))
+                        const isEditing = editingMessageId === message.id
                         return (
                             <div
                                 key={message.id}
                                 className={`flex w-full ${message.role === "user" ? "justify-end" : "justify-start"} animate-message-in`}
-                                style={{ animationDelay: `${messageIndex * 50}ms` }}
+                                style={{
+                                    animationDelay: `${messageIndex * 50}ms`,
+                                }}
                             >
-                                {message.role === "user" && userMessageText && !isEditing && (
-                                    <div className="flex items-center gap-1 self-center mr-2">
-                                        {/* Edit button - only on last user message */}
-                                        {onEditMessage && isLastUserMessage && (
+                                {message.role === "user" &&
+                                    userMessageText &&
+                                    !isEditing && (
+                                        <div className="flex items-center gap-1 self-center mr-2">
+                                            {/* Edit button - only on last user message */}
+                                            {onEditMessage &&
+                                                isLastUserMessage && (
+                                                    <button
+                                                        onClick={() => {
+                                                            setEditingMessageId(
+                                                                message.id,
+                                                            )
+                                                            setEditText(
+                                                                userMessageText,
+                                                            )
+                                                        }}
+                                                        className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
+                                                        title="Edit message"
+                                                    >
+                                                        <Pencil className="h-3.5 w-3.5" />
+                                                    </button>
+                                                )}
                                             <button
-                                                onClick={() => {
-                                                    setEditingMessageId(message.id);
-                                                    setEditText(userMessageText);
-                                                }}
+                                                onClick={() =>
+                                                    copyMessageToClipboard(
+                                                        message.id,
+                                                        userMessageText,
+                                                    )
+                                                }
                                                 className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
-                                                title="Edit message"
+                                                title={
+                                                    copiedMessageId ===
+                                                    message.id
+                                                        ? "Copied!"
+                                                        : copyFailedMessageId ===
+                                                            message.id
+                                                          ? "Failed to copy"
+                                                          : "Copy message"
+                                                }
                                             >
-                                                <Pencil className="h-3.5 w-3.5" />
+                                                {copiedMessageId ===
+                                                message.id ? (
+                                                    <Check className="h-3.5 w-3.5 text-green-500" />
+                                                ) : copyFailedMessageId ===
+                                                  message.id ? (
+                                                    <X className="h-3.5 w-3.5 text-red-500" />
+                                                ) : (
+                                                    <Copy className="h-3.5 w-3.5" />
+                                                )}
                                             </button>
-                                        )}
-                                        <button
-                                            onClick={() => copyMessageToClipboard(message.id, userMessageText)}
-                                            className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
-                                            title={copiedMessageId === message.id ? "Copied!" : copyFailedMessageId === message.id ? "Failed to copy" : "Copy message"}
-                                        >
-                                            {copiedMessageId === message.id ? (
-                                                <Check className="h-3.5 w-3.5 text-green-500" />
-                                            ) : copyFailedMessageId === message.id ? (
-                                                <X className="h-3.5 w-3.5 text-red-500" />
-                                            ) : (
-                                                <Copy className="h-3.5 w-3.5" />
-                                            )}
-                                        </button>
-                                    </div>
-                                )}
+                                        </div>
+                                    )}
                                 <div className="max-w-[85%] min-w-0">
                                     {/* Edit mode for user messages */}
                                     {isEditing && message.role === "user" ? (
                                         <div className="flex flex-col gap-2">
                                             <textarea
                                                 value={editText}
-                                                onChange={(e) => setEditText(e.target.value)}
+                                                onChange={(e) =>
+                                                    setEditText(e.target.value)
+                                                }
                                                 className="w-full min-w-[300px] px-4 py-3 text-sm rounded-2xl border border-primary bg-background text-foreground resize-none focus:outline-none focus:ring-2 focus:ring-primary"
-                                                rows={Math.min(editText.split('\n').length + 1, 6)}
+                                                rows={Math.min(
+                                                    editText.split("\n")
+                                                        .length + 1,
+                                                    6,
+                                                )}
                                                 autoFocus
                                                 onKeyDown={(e) => {
                                                     if (e.key === "Escape") {
-                                                        setEditingMessageId(null);
-                                                        setEditText("");
-                                                    } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                                                        e.preventDefault();
-                                                        if (editText.trim() && onEditMessage) {
-                                                            onEditMessage(messageIndex, editText.trim());
-                                                            setEditingMessageId(null);
-                                                            setEditText("");
+                                                        setEditingMessageId(
+                                                            null,
+                                                        )
+                                                        setEditText("")
+                                                    } else if (
+                                                        e.key === "Enter" &&
+                                                        (e.metaKey || e.ctrlKey)
+                                                    ) {
+                                                        e.preventDefault()
+                                                        if (
+                                                            editText.trim() &&
+                                                            onEditMessage
+                                                        ) {
+                                                            onEditMessage(
+                                                                messageIndex,
+                                                                editText.trim(),
+                                                            )
+                                                            setEditingMessageId(
+                                                                null,
+                                                            )
+                                                            setEditText("")
                                                         }
                                                     }
                                                 }}
@@ -361,8 +448,10 @@ export function ChatMessageDisplay({
                                             <div className="flex justify-end gap-2">
                                                 <button
                                                     onClick={() => {
-                                                        setEditingMessageId(null);
-                                                        setEditText("");
+                                                        setEditingMessageId(
+                                                            null,
+                                                        )
+                                                        setEditText("")
                                                     }}
                                                     className="px-3 py-1.5 text-xs rounded-lg bg-muted hover:bg-muted/80 transition-colors"
                                                 >
@@ -370,10 +459,18 @@ export function ChatMessageDisplay({
                                                 </button>
                                                 <button
                                                     onClick={() => {
-                                                        if (editText.trim() && onEditMessage) {
-                                                            onEditMessage(messageIndex, editText.trim());
-                                                            setEditingMessageId(null);
-                                                            setEditText("");
+                                                        if (
+                                                            editText.trim() &&
+                                                            onEditMessage
+                                                        ) {
+                                                            onEditMessage(
+                                                                messageIndex,
+                                                                editText.trim(),
+                                                            )
+                                                            setEditingMessageId(
+                                                                null,
+                                                            )
+                                                            setEditText("")
                                                         }
                                                     }}
                                                     disabled={!editText.trim()}
@@ -385,100 +482,172 @@ export function ChatMessageDisplay({
                                         </div>
                                     ) : (
                                         /* Text content in bubble */
-                                        message.parts?.some((part: any) => part.type === "text" || part.type === "file") && (
+                                        message.parts?.some(
+                                            (part: any) =>
+                                                part.type === "text" ||
+                                                part.type === "file",
+                                        ) && (
                                             <div
                                                 className={`px-4 py-3 text-sm leading-relaxed ${
                                                     message.role === "user"
                                                         ? "bg-primary text-primary-foreground rounded-2xl rounded-br-md shadow-sm"
-                                                        : message.role === "system"
-                                                        ? "bg-destructive/10 text-destructive border border-destructive/20 rounded-2xl rounded-bl-md"
-                                                        : "bg-muted/60 text-foreground rounded-2xl rounded-bl-md"
+                                                        : message.role ===
+                                                            "system"
+                                                          ? "bg-destructive/10 text-destructive border border-destructive/20 rounded-2xl rounded-bl-md"
+                                                          : "bg-muted/60 text-foreground rounded-2xl rounded-bl-md"
                                                 } ${message.role === "user" && isLastUserMessage && onEditMessage ? "cursor-pointer hover:opacity-90 transition-opacity" : ""}`}
                                                 onClick={() => {
-                                                    if (message.role === "user" && isLastUserMessage && onEditMessage) {
-                                                        setEditingMessageId(message.id);
-                                                        setEditText(userMessageText);
+                                                    if (
+                                                        message.role ===
+                                                            "user" &&
+                                                        isLastUserMessage &&
+                                                        onEditMessage
+                                                    ) {
+                                                        setEditingMessageId(
+                                                            message.id,
+                                                        )
+                                                        setEditText(
+                                                            userMessageText,
+                                                        )
                                                     }
                                                 }}
-                                                title={message.role === "user" && isLastUserMessage && onEditMessage ? "Click to edit" : undefined}
+                                                title={
+                                                    message.role === "user" &&
+                                                    isLastUserMessage &&
+                                                    onEditMessage
+                                                        ? "Click to edit"
+                                                        : undefined
+                                                }
                                             >
-                                                {message.parts?.map((part: any, index: number) => {
-                                                    switch (part.type) {
-                                                        case "text":
-                                                            return (
-                                                                <div key={index} className={`prose prose-sm max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${
-                                                                    message.role === "user"
-                                                                        ? "[&_*]:!text-primary-foreground prose-code:bg-white/20"
-                                                                        : "dark:prose-invert"
-                                                                }`}>
-                                                                    <ReactMarkdown>{part.text}</ReactMarkdown>
-                                                                </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-lg border border-white/20"
-                                                                        style={{
-                                                                            objectFit: "contain",
-                                                                        }}
-                                                                    />
-                                                                </div>
-                                                            );
-                                                        default:
-                                                            return null;
-                                                    }
-                                                })}
+                                                {message.parts?.map(
+                                                    (
+                                                        part: any,
+                                                        index: number,
+                                                    ) => {
+                                                        switch (part.type) {
+                                                            case "text":
+                                                                return (
+                                                                    <div
+                                                                        key={
+                                                                            index
+                                                                        }
+                                                                        className={`prose prose-sm max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${
+                                                                            message.role ===
+                                                                            "user"
+                                                                                ? "[&_*]:!text-primary-foreground prose-code:bg-white/20"
+                                                                                : "dark:prose-invert"
+                                                                        }`}
+                                                                    >
+                                                                        <ReactMarkdown>
+                                                                            {
+                                                                                part.text
+                                                                            }
+                                                                        </ReactMarkdown>
+                                                                    </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-lg border border-white/20"
+                                                                            style={{
+                                                                                objectFit:
+                                                                                    "contain",
+                                                                            }}
+                                                                        />
+                                                                    </div>
+                                                                )
+                                                            default:
+                                                                return null
+                                                        }
+                                                    },
+                                                )}
                                             </div>
                                         )
                                     )}
                                     {/* Tool calls outside bubble */}
                                     {message.parts?.map((part: any) => {
                                         if (part.type?.startsWith("tool-")) {
-                                            return renderToolPart(part);
+                                            return renderToolPart(part)
                                         }
-                                        return null;
+                                        return null
                                     })}
                                     {/* Action buttons for assistant messages */}
                                     {message.role === "assistant" && (
                                         <div className="flex items-center gap-1 mt-2">
                                             {/* Copy button */}
                                             <button
-                                                onClick={() => copyMessageToClipboard(message.id, getMessageTextContent(message))}
+                                                onClick={() =>
+                                                    copyMessageToClipboard(
+                                                        message.id,
+                                                        getMessageTextContent(
+                                                            message,
+                                                        ),
+                                                    )
+                                                }
                                                 className={`p-1.5 rounded-lg transition-colors ${
-                                                    copiedMessageId === message.id
+                                                    copiedMessageId ===
+                                                    message.id
                                                         ? "text-green-600 bg-green-100"
                                                         : "text-muted-foreground/60 hover:text-foreground hover:bg-muted"
                                                 }`}
-                                                title={copiedMessageId === message.id ? "Copied!" : "Copy response"}
+                                                title={
+                                                    copiedMessageId ===
+                                                    message.id
+                                                        ? "Copied!"
+                                                        : "Copy response"
+                                                }
                                             >
-                                                {copiedMessageId === message.id ? (
+                                                {copiedMessageId ===
+                                                message.id ? (
                                                     <Check className="h-3.5 w-3.5" />
                                                 ) : (
                                                     <Copy className="h-3.5 w-3.5" />
                                                 )}
                                             </button>
                                             {/* Regenerate button - only on last assistant message */}
-                                            {onRegenerate && isLastAssistantMessage && (
-                                                <button
-                                                    onClick={() => onRegenerate(messageIndex)}
-                                                    className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
-                                                    title="Regenerate response"
-                                                >
-                                                    <RotateCcw className="h-3.5 w-3.5" />
-                                                </button>
-                                            )}
+                                            {onRegenerate &&
+                                                isLastAssistantMessage && (
+                                                    <button
+                                                        onClick={() =>
+                                                            onRegenerate(
+                                                                messageIndex,
+                                                            )
+                                                        }
+                                                        className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
+                                                        title="Regenerate response"
+                                                    >
+                                                        <RotateCcw className="h-3.5 w-3.5" />
+                                                    </button>
+                                                )}
                                             {/* Divider */}
                                             <div className="w-px h-4 bg-border mx-1" />
                                             {/* Thumbs up */}
                                             <button
-                                                onClick={() => submitFeedback(message.id, "good")}
+                                                onClick={() =>
+                                                    submitFeedback(
+                                                        message.id,
+                                                        "good",
+                                                    )
+                                                }
                                                 className={`p-1.5 rounded-lg transition-colors ${
-                                                    feedback[message.id] === "good"
+                                                    feedback[message.id] ===
+                                                    "good"
                                                         ? "text-green-600 bg-green-100"
                                                         : "text-muted-foreground/60 hover:text-green-600 hover:bg-green-50"
                                                 }`}
@@ -488,9 +657,15 @@ export function ChatMessageDisplay({
                                             </button>
                                             {/* Thumbs down */}
                                             <button
-                                                onClick={() => submitFeedback(message.id, "bad")}
+                                                onClick={() =>
+                                                    submitFeedback(
+                                                        message.id,
+                                                        "bad",
+                                                    )
+                                                }
                                                 className={`p-1.5 rounded-lg transition-colors ${
-                                                    feedback[message.id] === "bad"
+                                                    feedback[message.id] ===
+                                                    "bad"
                                                         ? "text-red-600 bg-red-100"
                                                         : "text-muted-foreground/60 hover:text-red-600 hover:bg-red-50"
                                                 }`}
@@ -502,11 +677,11 @@ export function ChatMessageDisplay({
                                     )}
                                 </div>
                             </div>
-                        );
+                        )
                     })}
                 </div>
             )}
             <div ref={messagesEndRef} />
         </ScrollArea>
-    );
+    )
 }
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index dc8a11f..9543b01 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -1,37 +1,36 @@
-"use client";
+"use client"
 
-import type React from "react";
-import { useRef, useEffect, useState } from "react";
-import { flushSync } from "react-dom";
-import { FaGithub } from "react-icons/fa";
+import { useChat } from "@ai-sdk/react"
+import { DefaultChatTransport } from "ai"
 import {
+    CheckCircle,
     PanelRightClose,
     PanelRightOpen,
     Settings,
-    CheckCircle,
-} from "lucide-react";
-import Link from "next/link";
-import Image from "next/image";
-
-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, validateMxCellStructure } from "@/lib/utils";
-import { ButtonWithTooltip } from "@/components/button-with-tooltip";
-import { Toaster } from "sonner";
+} from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import type React from "react"
+import { useEffect, useRef, useState } from "react"
+import { flushSync } from "react-dom"
+import { FaGithub } from "react-icons/fa"
+import { Toaster } from "sonner"
+import { ButtonWithTooltip } from "@/components/button-with-tooltip"
+import { ChatInput } from "@/components/chat-input"
 import {
     SettingsDialog,
     STORAGE_ACCESS_CODE_KEY,
-} from "@/components/settings-dialog";
+} from "@/components/settings-dialog"
+import { useDiagram } from "@/contexts/diagram-context"
+import { formatXML, replaceNodes, validateMxCellStructure } from "@/lib/utils"
+import { ChatMessageDisplay } from "./chat-message-display"
 
 interface ChatPanelProps {
-    isVisible: boolean;
-    onToggleVisibility: () => void;
-    drawioUi: "min" | "sketch";
-    onToggleDrawioUi: () => void;
-    isMobile?: boolean;
+    isVisible: boolean
+    onToggleVisibility: () => void
+    drawioUi: "min" | "sketch"
+    onToggleDrawioUi: () => void
+    isMobile?: boolean
 }
 
 export default function ChatPanel({
@@ -48,59 +47,61 @@ export default function ChatPanel({
         resolverRef,
         chartXML,
         clearDiagram,
-    } = useDiagram();
+    } = useDiagram()
 
     const onFetchChart = (saveToHistory = true) => {
         return Promise.race([
             new Promise<string>((resolve) => {
                 if (resolverRef && "current" in resolverRef) {
-                    resolverRef.current = resolve;
+                    resolverRef.current = resolve
                 }
                 if (saveToHistory) {
-                    onExport();
+                    onExport()
                 } else {
-                    handleExportWithoutHistory();
+                    handleExportWithoutHistory()
                 }
             }),
             new Promise<string>((_, reject) =>
                 setTimeout(
                     () =>
                         reject(
-                            new Error("Chart export timed out after 10 seconds")
+                            new Error(
+                                "Chart export timed out after 10 seconds",
+                            ),
                         ),
-                    10000
-                )
+                    10000,
+                ),
             ),
-        ]);
-    };
+        ])
+    }
 
-    const [files, setFiles] = useState<File[]>([]);
-    const [showHistory, setShowHistory] = useState(false);
-    const [showSettingsDialog, setShowSettingsDialog] = useState(false);
-    const [accessCodeRequired, setAccessCodeRequired] = useState(false);
-    const [input, setInput] = useState("");
+    const [files, setFiles] = useState<File[]>([])
+    const [showHistory, setShowHistory] = useState(false)
+    const [showSettingsDialog, setShowSettingsDialog] = useState(false)
+    const [accessCodeRequired, setAccessCodeRequired] = useState(false)
+    const [input, setInput] = useState("")
 
     // Check if access code is required on mount
     useEffect(() => {
         fetch("/api/config")
             .then((res) => res.json())
             .then((data) => setAccessCodeRequired(data.accessCodeRequired))
-            .catch(() => setAccessCodeRequired(false));
-    }, []);
+            .catch(() => setAccessCodeRequired(false))
+    }, [])
 
     // Generate a unique session ID for Langfuse tracing
     const [sessionId, setSessionId] = useState(
-        () => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
-    );
+        () => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    )
 
     // Store XML snapshots for each user message (keyed by message index)
-    const xmlSnapshotsRef = useRef<Map<number, string>>(new Map());
+    const xmlSnapshotsRef = useRef<Map<number, string>>(new Map())
 
     // Ref to track latest chartXML for use in callbacks (avoids stale closure)
-    const chartXMLRef = useRef(chartXML);
+    const chartXMLRef = useRef(chartXML)
     useEffect(() => {
-        chartXMLRef.current = chartXML;
-    }, [chartXML]);
+        chartXMLRef.current = chartXML
+    }, [chartXML])
 
     const { messages, sendMessage, addToolResult, status, error, setMessages } =
         useChat({
@@ -109,71 +110,71 @@ export default function ChatPanel({
             }),
             async onToolCall({ toolCall }) {
                 if (toolCall.toolName === "display_diagram") {
-                    const { xml } = toolCall.input as { xml: string };
+                    const { xml } = toolCall.input as { xml: string }
 
-                    const validationError = validateMxCellStructure(xml);
+                    const validationError = validateMxCellStructure(xml)
 
                     if (validationError) {
                         addToolResult({
                             tool: "display_diagram",
                             toolCallId: toolCall.toolCallId,
                             output: validationError,
-                        });
+                        })
                     } else {
                         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 }>;
-                    };
+                        edits: Array<{ search: string; replace: string }>
+                    }
 
-                    let currentXml = "";
+                    let currentXml = ""
                     try {
-                        console.log("[edit_diagram] Starting...");
+                        console.log("[edit_diagram] Starting...")
                         // Use chartXML from ref directly - more reliable than export
                         // especially on Vercel where DrawIO iframe may have latency issues
                         // Using ref to avoid stale closure in callback
-                        const cachedXML = chartXMLRef.current;
+                        const cachedXML = chartXMLRef.current
                         if (cachedXML) {
-                            currentXml = cachedXML;
+                            currentXml = cachedXML
                             console.log(
                                 "[edit_diagram] Using cached chartXML, length:",
-                                currentXml.length
-                            );
+                                currentXml.length,
+                            )
                         } else {
                             // Fallback to export only if no cached XML
                             console.log(
-                                "[edit_diagram] No cached XML, fetching from DrawIO..."
-                            );
-                            currentXml = await onFetchChart(false);
+                                "[edit_diagram] No cached XML, fetching from DrawIO...",
+                            )
+                            currentXml = await onFetchChart(false)
                             console.log(
                                 "[edit_diagram] Got XML from export, length:",
-                                currentXml.length
-                            );
+                                currentXml.length,
+                            )
                         }
 
-                        const { replaceXMLParts } = await import("@/lib/utils");
-                        const editedXml = replaceXMLParts(currentXml, edits);
+                        const { replaceXMLParts } = await import("@/lib/utils")
+                        const editedXml = replaceXMLParts(currentXml, edits)
 
-                        onDisplayChart(editedXml);
+                        onDisplayChart(editedXml)
 
                         addToolResult({
                             tool: "edit_diagram",
                             toolCallId: toolCall.toolCallId,
                             output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
-                        });
-                        console.log("[edit_diagram] Success");
+                        })
+                        console.log("[edit_diagram] Success")
                     } catch (error) {
-                        console.error("[edit_diagram] Failed:", error);
+                        console.error("[edit_diagram] Failed:", error)
 
                         const errorMessage =
                             error instanceof Error
                                 ? error.message
-                                : String(error);
+                                : String(error)
 
                         addToolResult({
                             tool: "edit_diagram",
@@ -186,14 +187,14 @@ ${currentXml || "No XML available"}
 \`\`\`
 
 Please retry with an adjusted search pattern or use display_diagram if retries are exhausted.`,
-                        });
+                        })
                     }
                 }
             },
             onError: (error) => {
                 // Silence access code error in console since it's handled by UI
                 if (!error.message.includes("Invalid or missing access code")) {
-                    console.error("Chat error:", error);
+                    console.error("Chat error:", error)
                 }
 
                 // Add system message for error so it can be cleared
@@ -203,63 +204,63 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                         role: "system" as const,
                         content: error.message,
                         parts: [{ type: "text" as const, text: error.message }],
-                    };
-                    return [...currentMessages, errorMessage];
-                });
+                    }
+                    return [...currentMessages, errorMessage]
+                })
 
                 if (error.message.includes("Invalid or missing access code")) {
                     // Show settings button and open dialog to help user fix it
-                    setAccessCodeRequired(true);
-                    setShowSettingsDialog(true);
+                    setAccessCodeRequired(true)
+                    setShowSettingsDialog(true)
                 }
             },
-        });
+        })
 
-    const messagesEndRef = useRef<HTMLDivElement>(null);
+    const messagesEndRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         if (messagesEndRef.current) {
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
         }
-    }, [messages]);
+    }, [messages])
 
     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        const isProcessing = status === "streaming" || status === "submitted";
+        e.preventDefault()
+        const isProcessing = status === "streaming" || status === "submitted"
         if (input.trim() && !isProcessing) {
             try {
-                let chartXml = await onFetchChart();
-                chartXml = formatXML(chartXml);
+                let chartXml = await onFetchChart()
+                chartXml = formatXML(chartXml)
 
                 // Update ref directly to avoid race condition with React's async state update
                 // This ensures edit_diagram has the correct XML before AI responds
-                chartXMLRef.current = chartXml;
+                chartXMLRef.current = chartXml
 
-                const parts: any[] = [{ type: "text", text: input }];
+                const parts: any[] = [{ type: "text", text: input }]
 
                 if (files.length > 0) {
                     for (const file of files) {
-                        const reader = new FileReader();
+                        const reader = new FileReader()
                         const dataUrl = await new Promise<string>((resolve) => {
                             reader.onload = () =>
-                                resolve(reader.result as string);
-                            reader.readAsDataURL(file);
-                        });
+                                resolve(reader.result as string)
+                            reader.readAsDataURL(file)
+                        })
 
                         parts.push({
                             type: "file",
                             url: dataUrl,
                             mediaType: file.type,
-                        });
+                        })
                     }
                 }
 
                 // Save XML snapshot for this message (will be at index = current messages.length)
-                const messageIndex = messages.length;
-                xmlSnapshotsRef.current.set(messageIndex, chartXml);
+                const messageIndex = messages.length
+                xmlSnapshotsRef.current.set(messageIndex, chartXml)
 
                 const accessCode =
-                    localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || "";
+                    localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
                 sendMessage(
                     { parts },
                     {
@@ -270,78 +271,78 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                         headers: {
                             "x-access-code": accessCode,
                         },
-                    }
-                );
+                    },
+                )
 
-                setInput("");
-                setFiles([]);
+                setInput("")
+                setFiles([])
             } catch (error) {
-                console.error("Error fetching chart data:", error);
+                console.error("Error fetching chart data:", error)
             }
         }
-    };
+    }
 
     const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     ) => {
-        setInput(e.target.value);
-    };
+        setInput(e.target.value)
+    }
 
     const handleFileChange = (newFiles: File[]) => {
-        setFiles(newFiles);
-    };
+        setFiles(newFiles)
+    }
 
     const handleRegenerate = async (messageIndex: number) => {
-        const isProcessing = status === "streaming" || status === "submitted";
-        if (isProcessing) return;
+        const isProcessing = status === "streaming" || status === "submitted"
+        if (isProcessing) return
 
         // Find the user message before this assistant message
-        let userMessageIndex = messageIndex - 1;
+        let userMessageIndex = messageIndex - 1
         while (
             userMessageIndex >= 0 &&
             messages[userMessageIndex].role !== "user"
         ) {
-            userMessageIndex--;
+            userMessageIndex--
         }
 
-        if (userMessageIndex < 0) return;
+        if (userMessageIndex < 0) return
 
-        const userMessage = messages[userMessageIndex];
-        const userParts = userMessage.parts;
+        const userMessage = messages[userMessageIndex]
+        const userParts = userMessage.parts
 
         // Get the text from the user message
-        const textPart = userParts?.find((p: any) => p.type === "text");
-        if (!textPart) return;
+        const textPart = userParts?.find((p: any) => p.type === "text")
+        if (!textPart) return
 
         // Get the saved XML snapshot for this user message
-        const savedXml = xmlSnapshotsRef.current.get(userMessageIndex);
+        const savedXml = xmlSnapshotsRef.current.get(userMessageIndex)
         if (!savedXml) {
             console.error(
                 "No saved XML snapshot for message index:",
-                userMessageIndex
-            );
-            return;
+                userMessageIndex,
+            )
+            return
         }
 
         // Restore the diagram to the saved state
-        onDisplayChart(savedXml);
+        onDisplayChart(savedXml)
 
         // Update ref directly to ensure edit_diagram has the correct XML
-        chartXMLRef.current = savedXml;
+        chartXMLRef.current = savedXml
 
         // Clean up snapshots for messages after the user message (they will be removed)
         for (const key of xmlSnapshotsRef.current.keys()) {
             if (key > userMessageIndex) {
-                xmlSnapshotsRef.current.delete(key);
+                xmlSnapshotsRef.current.delete(key)
             }
         }
 
         // Remove the user message AND assistant message onwards (sendMessage will re-add the user message)
         // Use flushSync to ensure state update is processed synchronously before sending
-        const newMessages = messages.slice(0, userMessageIndex);
+        const newMessages = messages.slice(0, userMessageIndex)
         flushSync(() => {
-            setMessages(newMessages);
-        });
+            setMessages(newMessages)
+        })
 
         // Now send the message after state is guaranteed to be updated
         sendMessage(
@@ -351,54 +352,54 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     xml: savedXml,
                     sessionId,
                 },
-            }
-        );
-    };
+            },
+        )
+    }
 
     const handleEditMessage = async (messageIndex: number, newText: string) => {
-        const isProcessing = status === "streaming" || status === "submitted";
-        if (isProcessing) return;
+        const isProcessing = status === "streaming" || status === "submitted"
+        if (isProcessing) return
 
-        const message = messages[messageIndex];
-        if (!message || message.role !== "user") return;
+        const message = messages[messageIndex]
+        if (!message || message.role !== "user") return
 
         // Get the saved XML snapshot for this user message
-        const savedXml = xmlSnapshotsRef.current.get(messageIndex);
+        const savedXml = xmlSnapshotsRef.current.get(messageIndex)
         if (!savedXml) {
             console.error(
                 "No saved XML snapshot for message index:",
-                messageIndex
-            );
-            return;
+                messageIndex,
+            )
+            return
         }
 
         // Restore the diagram to the saved state
-        onDisplayChart(savedXml);
+        onDisplayChart(savedXml)
 
         // Update ref directly to ensure edit_diagram has the correct XML
-        chartXMLRef.current = savedXml;
+        chartXMLRef.current = savedXml
 
         // Clean up snapshots for messages after the user message (they will be removed)
         for (const key of xmlSnapshotsRef.current.keys()) {
             if (key > messageIndex) {
-                xmlSnapshotsRef.current.delete(key);
+                xmlSnapshotsRef.current.delete(key)
             }
         }
 
         // Create new parts with updated text
         const newParts = message.parts?.map((part: any) => {
             if (part.type === "text") {
-                return { ...part, text: newText };
+                return { ...part, text: newText }
             }
-            return part;
-        }) || [{ type: "text", text: newText }];
+            return part
+        }) || [{ type: "text", text: newText }]
 
         // Remove the user message AND assistant message onwards (sendMessage will re-add the user message)
         // Use flushSync to ensure state update is processed synchronously before sending
-        const newMessages = messages.slice(0, messageIndex);
+        const newMessages = messages.slice(0, messageIndex)
         flushSync(() => {
-            setMessages(newMessages);
-        });
+            setMessages(newMessages)
+        })
 
         // Now send the edited message after state is guaranteed to be updated
         sendMessage(
@@ -408,9 +409,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     xml: savedXml,
                     sessionId,
                 },
-            }
-        );
-    };
+            },
+        )
+    }
 
     // Collapsed view (desktop only)
     if (!isVisible && !isMobile) {
@@ -435,7 +436,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     AI Chat
                 </div>
             </div>
-        );
+        )
     }
 
     // Full view
@@ -447,7 +448,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 style={{ position: "absolute" }}
             />
             {/* Header */}
-            <header className={`${isMobile ? "px-3 py-2" : "px-5 py-4"} border-b border-border/50`}>
+            <header
+                className={`${isMobile ? "px-3 py-2" : "px-5 py-4"} border-b border-border/50`}
+            >
                 <div className="flex items-center justify-between">
                     <div className="flex items-center gap-2">
                         <div className="flex items-center gap-2">
@@ -458,7 +461,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                                 height={isMobile ? 24 : 28}
                                 className="rounded"
                             />
-                            <h1 className={`${isMobile ? "text-sm" : "text-base"} font-semibold tracking-tight whitespace-nowrap`}>
+                            <h1
+                                className={`${isMobile ? "text-sm" : "text-base"} font-semibold tracking-tight whitespace-nowrap`}
+                            >
                                 Next AI Drawio
                             </h1>
                         </div>
@@ -488,7 +493,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                             rel="noopener noreferrer"
                             className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
                         >
-                            <FaGithub className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`} />
+                            <FaGithub
+                                className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`}
+                            />
                         </a>
                         {accessCodeRequired && (
                             <ButtonWithTooltip
@@ -498,7 +505,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                                 onClick={() => setShowSettingsDialog(true)}
                                 className="hover:bg-accent"
                             >
-                                <Settings className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`} />
+                                <Settings
+                                    className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
+                                />
                             </ButtonWithTooltip>
                         )}
                         {!isMobile && (
@@ -529,21 +538,23 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             </main>
 
             {/* Input */}
-            <footer className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}>
+            <footer
+                className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}
+            >
                 <ChatInput
                     input={input}
                     status={status}
                     onSubmit={onFormSubmit}
                     onChange={handleInputChange}
                     onClearChat={() => {
-                        setMessages([]);
-                        clearDiagram();
+                        setMessages([])
+                        clearDiagram()
                         setSessionId(
                             `session-${Date.now()}-${Math.random()
                                 .toString(36)
-                                .slice(2, 9)}`
-                        );
-                        xmlSnapshotsRef.current.clear();
+                                .slice(2, 9)}`,
+                        )
+                        xmlSnapshotsRef.current.clear()
                     }}
                     files={files}
                     onFileChange={handleFileChange}
@@ -561,5 +572,5 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 onOpenChange={setShowSettingsDialog}
             />
         </div>
-    );
+    )
 }
diff --git a/components/code-block.tsx b/components/code-block.tsx
index 7d0be92..9f10699 100644
--- a/components/code-block.tsx
+++ b/components/code-block.tsx
@@ -1,22 +1,29 @@
-"use client";
+"use client"
 
-import { Highlight, themes } from "prism-react-renderer";
+import { Highlight, themes } from "prism-react-renderer"
 
 interface CodeBlockProps {
-    code: string;
-    language?: "xml" | "json";
+    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, style, tokens, getLineProps, getTokenProps }) => (
+                {({
+                    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",
+                            fontFamily:
+                                "var(--font-mono), ui-monospace, monospace",
                             backgroundColor: "transparent",
                             margin: 0,
                             padding: 0,
@@ -25,9 +32,16 @@ export function CodeBlock({ code, language = "xml" }: CodeBlockProps) {
                         }}
                     >
                         {tokens.map((line, i) => (
-                            <div key={i} {...getLineProps({ line })} style={{ wordBreak: "break-all" }}>
+                            <div
+                                key={i}
+                                {...getLineProps({ line })}
+                                style={{ wordBreak: "break-all" }}
+                            >
                                 {line.map((token, key) => (
-                                    <span key={key} {...getTokenProps({ token })} />
+                                    <span
+                                        key={key}
+                                        {...getTokenProps({ token })}
+                                    />
                                 ))}
                             </div>
                         ))}
@@ -35,5 +49,5 @@ export function CodeBlock({ code, language = "xml" }: CodeBlockProps) {
                 )}
             </Highlight>
         </div>
-    );
+    )
 }
diff --git a/components/error-toast.tsx b/components/error-toast.tsx
index 3183121..f2ef42d 100644
--- a/components/error-toast.tsx
+++ b/components/error-toast.tsx
@@ -1,19 +1,19 @@
-"use client";
+"use client"
 
-import React from "react";
+import type React from "react"
 
 interface ErrorToastProps {
-    message: React.ReactNode;
-    onDismiss: () => void;
+    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();
+            e.preventDefault()
+            onDismiss()
         }
-    };
+    }
 
     return (
         <div
@@ -25,7 +25,12 @@ export function ErrorToast({ message, onDismiss }: ErrorToastProps) {
             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">
+                <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"
@@ -35,5 +40,5 @@ export function ErrorToast({ message, onDismiss }: ErrorToastProps) {
             </div>
             <span className="text-sm text-foreground">{message}</span>
         </div>
-    );
+    )
 }
diff --git a/components/file-preview-list.tsx b/components/file-preview-list.tsx
index a24ca2d..ff6e7ac 100644
--- a/components/file-preview-list.tsx
+++ b/components/file-preview-list.tsx
@@ -1,40 +1,44 @@
-"use client";
+"use client"
 
-import React, { useEffect, useState } from "react";
-import Image from "next/image";
-import { X } from "lucide-react";
+import { X } from "lucide-react"
+import Image from "next/image"
+import React, { useEffect, useState } from "react"
 
 interface FilePreviewListProps {
-    files: File[];
-    onRemoveFile: (fileToRemove: File) => void;
+    files: File[]
+    onRemoveFile: (fileToRemove: File) => void
 }
 
 export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
-    const [selectedImage, setSelectedImage] = useState<string | null>(null);
+    const [selectedImage, setSelectedImage] = useState<string | null>(null)
 
     // Cleanup object URLs on unmount
     useEffect(() => {
         const objectUrls = files
             .filter((file) => file.type.startsWith("image/"))
-            .map((file) => URL.createObjectURL(file));
+            .map((file) => URL.createObjectURL(file))
 
         return () => {
-            objectUrls.forEach(URL.revokeObjectURL);
-        };
-    }, [files]);
+            objectUrls.forEach(URL.revokeObjectURL)
+        }
+    }, [files])
 
-    if (files.length === 0) return null;
+    if (files.length === 0) return null
 
     return (
         <>
             <div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
                 {files.map((file, index) => {
-                    const imageUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : null;
+                    const imageUrl = file.type.startsWith("image/")
+                        ? URL.createObjectURL(file)
+                        : null
                     return (
                         <div key={file.name + index} className="relative group">
                             <div
                                 className="w-20 h-20 border rounded-md overflow-hidden bg-muted cursor-pointer"
-                                onClick={() => imageUrl && setSelectedImage(imageUrl)}
+                                onClick={() =>
+                                    imageUrl && setSelectedImage(imageUrl)
+                                }
                             >
                                 {file.type.startsWith("image/") ? (
                                     <Image
@@ -59,7 +63,7 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                                 <X className="h-3 w-3" />
                             </button>
                         </div>
-                    );
+                    )
                 })}
             </div>
 
@@ -89,5 +93,5 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                 </div>
             )}
         </>
-    );
+    )
 }
diff --git a/components/history-dialog.tsx b/components/history-dialog.tsx
index cc89c6a..32500fd 100644
--- a/components/history-dialog.tsx
+++ b/components/history-dialog.tsx
@@ -1,6 +1,8 @@
-"use client";
+"use client"
 
-import { useState } from "react";
+import Image from "next/image"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
@@ -8,34 +10,32 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import Image from "next/image";
-import { useDiagram } from "@/contexts/diagram-context";
+} from "@/components/ui/dialog"
+import { useDiagram } from "@/contexts/diagram-context"
 
 interface HistoryDialogProps {
-    showHistory: boolean;
-    onToggleHistory: (show: boolean) => void;
+    showHistory: boolean
+    onToggleHistory: (show: boolean) => void
 }
 
 export function HistoryDialog({
     showHistory,
     onToggleHistory,
 }: HistoryDialogProps) {
-    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram();
-    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram()
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
 
     const handleClose = () => {
-        setSelectedIndex(null);
-        onToggleHistory(false);
-    };
+        setSelectedIndex(null)
+        onToggleHistory(false)
+    }
 
     const handleConfirmRestore = () => {
         if (selectedIndex !== null) {
-            onDisplayChart(diagramHistory[selectedIndex].xml);
-            handleClose();
+            onDisplayChart(diagramHistory[selectedIndex].xml)
+            handleClose()
         }
-    };
+    }
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
@@ -100,15 +100,12 @@ export function HistoryDialog({
                             </Button>
                         </>
                     ) : (
-                        <Button
-                            variant="outline"
-                            onClick={handleClose}
-                        >
+                        <Button variant="outline" onClick={handleClose}>
                             Close
                         </Button>
                     )}
                 </DialogFooter>
             </DialogContent>
         </Dialog>
-    );
+    )
 }
diff --git a/components/reset-warning-modal.tsx b/components/reset-warning-modal.tsx
index 1d14141..62c4ad1 100644
--- a/components/reset-warning-modal.tsx
+++ b/components/reset-warning-modal.tsx
@@ -1,6 +1,6 @@
-"use client";
+"use client"
 
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
@@ -8,12 +8,12 @@ import {
     DialogFooter,
     DialogHeader,
     DialogTitle,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
 
 interface ResetWarningModalProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onClear: () => void;
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onClear: () => void
 }
 
 export function ResetWarningModal({
@@ -44,5 +44,5 @@ export function ResetWarningModal({
                 </DialogFooter>
             </DialogContent>
         </Dialog>
-    );
+    )
 }
diff --git a/components/save-dialog.tsx b/components/save-dialog.tsx
index 05131c8..4314fa6 100644
--- a/components/save-dialog.tsx
+++ b/components/save-dialog.tsx
@@ -1,36 +1,40 @@
-"use client";
+"use client"
 
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { useEffect, useState } from "react"
+import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
+    DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogFooter,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
 import {
     Select,
     SelectContent,
     SelectItem,
     SelectTrigger,
     SelectValue,
-} from "@/components/ui/select";
+} from "@/components/ui/select"
 
-export type ExportFormat = "drawio" | "png" | "svg";
+export type ExportFormat = "drawio" | "png" | "svg"
 
-const FORMAT_OPTIONS: { value: ExportFormat; label: string; extension: string }[] = [
+const FORMAT_OPTIONS: {
+    value: ExportFormat
+    label: string
+    extension: string
+}[] = [
     { value: "drawio", label: "Draw.io XML", extension: ".drawio" },
     { value: "png", label: "PNG Image", extension: ".png" },
     { value: "svg", label: "SVG Image", extension: ".svg" },
-];
+]
 
 interface SaveDialogProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onSave: (filename: string, format: ExportFormat) => void;
-    defaultFilename: string;
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onSave: (filename: string, format: ExportFormat) => void
+    defaultFilename: string
 }
 
 export function SaveDialog({
@@ -39,29 +43,29 @@ export function SaveDialog({
     onSave,
     defaultFilename,
 }: SaveDialogProps) {
-    const [filename, setFilename] = useState(defaultFilename);
-    const [format, setFormat] = useState<ExportFormat>("drawio");
+    const [filename, setFilename] = useState(defaultFilename)
+    const [format, setFormat] = useState<ExportFormat>("drawio")
 
     useEffect(() => {
         if (open) {
-            setFilename(defaultFilename);
+            setFilename(defaultFilename)
         }
-    }, [open, defaultFilename]);
+    }, [open, defaultFilename])
 
     const handleSave = () => {
-        const finalFilename = filename.trim() || defaultFilename;
-        onSave(finalFilename, format);
-        onOpenChange(false);
-    };
+        const finalFilename = filename.trim() || defaultFilename
+        onSave(finalFilename, format)
+        onOpenChange(false)
+    }
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
-            e.preventDefault();
-            handleSave();
+            e.preventDefault()
+            handleSave()
         }
-    };
+    }
 
-    const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format);
+    const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format)
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
@@ -72,13 +76,19 @@ export function SaveDialog({
                 <div className="space-y-4">
                     <div className="space-y-2">
                         <label className="text-sm font-medium">Format</label>
-                        <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
+                        <Select
+                            value={format}
+                            onValueChange={(v) => setFormat(v as ExportFormat)}
+                        >
                             <SelectTrigger>
                                 <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
                                 {FORMAT_OPTIONS.map((opt) => (
-                                    <SelectItem key={opt.value} value={opt.value}>
+                                    <SelectItem
+                                        key={opt.value}
+                                        value={opt.value}
+                                    >
                                         {opt.label}
                                     </SelectItem>
                                 ))}
@@ -104,12 +114,15 @@ export function SaveDialog({
                     </div>
                 </div>
                 <DialogFooter>
-                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                    <Button
+                        variant="outline"
+                        onClick={() => onOpenChange(false)}
+                    >
                         Cancel
                     </Button>
                     <Button onClick={handleSave}>Save</Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
-    );
+    )
 }
diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx
index 9d6808e..79fff7a 100644
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -1,48 +1,46 @@
-"use client";
+"use client"
 
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import { useEffect, useState } from "react"
+import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
+    DialogFooter,
     DialogHeader,
     DialogTitle,
-    DialogFooter,
-    DialogDescription,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
 
 interface SettingsDialogProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
+    open: boolean
+    onOpenChange: (open: boolean) => void
 }
 
-export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code";
+export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
 
-export function SettingsDialog({
-    open,
-    onOpenChange,
-}: SettingsDialogProps) {
-    const [accessCode, setAccessCode] = useState("");
+export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
+    const [accessCode, setAccessCode] = useState("")
 
     useEffect(() => {
         if (open) {
-            const storedCode = localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || "";
-            setAccessCode(storedCode);
+            const storedCode =
+                localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
+            setAccessCode(storedCode)
         }
-    }, [open]);
+    }, [open])
 
     const handleSave = () => {
-        localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim());
-        onOpenChange(false);
-    };
+        localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
+        onOpenChange(false)
+    }
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === "Enter") {
-            e.preventDefault();
-            handleSave();
+            e.preventDefault()
+            handleSave()
         }
-    };
+    }
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
@@ -72,12 +70,15 @@ export function SettingsDialog({
                     </div>
                 </div>
                 <DialogFooter>
-                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                    <Button
+                        variant="outline"
+                        onClick={() => onOpenChange(false)}
+                    >
                         Cancel
                     </Button>
                     <Button onClick={handleSave}>Save</Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
-    );
+    )
 }
diff --git a/contexts/diagram-context.tsx b/contexts/diagram-context.tsx
index 1995f71..f1f6537 100644
--- a/contexts/diagram-context.tsx
+++ b/contexts/diagram-context.tsx
@@ -1,85 +1,90 @@
-"use client";
+"use client"
 
-import React, { createContext, useContext, useRef, useState } from "react";
-import type { DrawIoEmbedRef } from "react-drawio";
-import { extractDiagramXML } from "../lib/utils";
-import type { ExportFormat } from "@/components/save-dialog";
+import type React from "react"
+import { createContext, useContext, useRef, useState } from "react"
+import type { DrawIoEmbedRef } from "react-drawio"
+import type { ExportFormat } from "@/components/save-dialog"
+import { extractDiagramXML } from "../lib/utils"
 
 interface DiagramContextType {
-    chartXML: string;
-    latestSvg: string;
-    diagramHistory: { svg: string; xml: string }[];
-    loadDiagram: (chart: string) => void;
-    handleExport: () => void;
-    handleExportWithoutHistory: () => void;
-    resolverRef: React.Ref<((value: string) => void) | null>;
-    drawioRef: React.Ref<DrawIoEmbedRef | null>;
-    handleDiagramExport: (data: any) => void;
-    clearDiagram: () => void;
-    saveDiagramToFile: (filename: string, format: ExportFormat, sessionId?: string) => void;
+    chartXML: string
+    latestSvg: string
+    diagramHistory: { svg: string; xml: string }[]
+    loadDiagram: (chart: string) => void
+    handleExport: () => void
+    handleExportWithoutHistory: () => void
+    resolverRef: React.Ref<((value: string) => void) | null>
+    drawioRef: React.Ref<DrawIoEmbedRef | null>
+    handleDiagramExport: (data: any) => void
+    clearDiagram: () => void
+    saveDiagramToFile: (
+        filename: string,
+        format: ExportFormat,
+        sessionId?: string,
+    ) => void
 }
 
-const DiagramContext = createContext<DiagramContextType | undefined>(undefined);
+const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
 
 export function DiagramProvider({ children }: { children: React.ReactNode }) {
-    const [chartXML, setChartXML] = useState<string>("");
-    const [latestSvg, setLatestSvg] = useState<string>("");
+    const [chartXML, setChartXML] = useState<string>("")
+    const [latestSvg, setLatestSvg] = useState<string>("")
     const [diagramHistory, setDiagramHistory] = useState<
         { svg: string; xml: string }[]
-    >([]);
-    const drawioRef = useRef<DrawIoEmbedRef | null>(null);
-    const resolverRef = useRef<((value: string) => void) | null>(null);
+    >([])
+    const drawioRef = useRef<DrawIoEmbedRef | null>(null)
+    const resolverRef = useRef<((value: string) => void) | null>(null)
     // Track if we're expecting an export for history (user-initiated)
-    const expectHistoryExportRef = useRef<boolean>(false);
+    const expectHistoryExportRef = useRef<boolean>(false)
     // Track if we're expecting an export for file save (stores raw export data)
     const saveResolverRef = useRef<{
-        resolver: ((data: string) => void) | null;
-        format: ExportFormat | null;
-    }>({ resolver: null, format: null });
+        resolver: ((data: string) => void) | null
+        format: ExportFormat | null
+    }>({ resolver: null, format: null })
 
     const handleExport = () => {
         if (drawioRef.current) {
             // Mark that this export should be saved to history
-            expectHistoryExportRef.current = true;
+            expectHistoryExportRef.current = true
             drawioRef.current.exportDiagram({
                 format: "xmlsvg",
-            });
+            })
         }
-    };
+    }
 
     const handleExportWithoutHistory = () => {
         if (drawioRef.current) {
             // Export without saving to history (for edit_diagram fetching current state)
             drawioRef.current.exportDiagram({
                 format: "xmlsvg",
-            });
+            })
         }
-    };
+    }
 
     const loadDiagram = (chart: string) => {
         if (drawioRef.current) {
             drawioRef.current.load({
                 xml: chart,
-            });
+            })
         }
-    };
+    }
 
     const handleDiagramExport = (data: any) => {
         // Handle save to file if requested (process raw data before extraction)
         if (saveResolverRef.current.resolver) {
-            const format = saveResolverRef.current.format;
-            saveResolverRef.current.resolver(data.data);
-            saveResolverRef.current = { resolver: null, format: null };
+            const format = saveResolverRef.current.format
+            saveResolverRef.current.resolver(data.data)
+            saveResolverRef.current = { resolver: null, format: null }
             // For non-xmlsvg formats, skip XML extraction as it will fail
             // Only drawio (which uses xmlsvg internally) has the content attribute
             if (format === "png" || format === "svg") {
-                return;
+                return
             }
         }
 
-        const extractedXML = extractDiagramXML(data.data);
-        setChartXML(extractedXML);
-        setLatestSvg(data.data);
+        const extractedXML = extractDiagramXML(data.data)
+        setChartXML(extractedXML)
+        setLatestSvg(data.data)
 
         // Only add to history if this was a user-initiated export
         if (expectHistoryExportRef.current) {
@@ -89,106 +94,117 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                     svg: data.data,
                     xml: extractedXML,
                 },
-            ]);
-            expectHistoryExportRef.current = false;
+            ])
+            expectHistoryExportRef.current = false
         }
 
         if (resolverRef.current) {
-            resolverRef.current(extractedXML);
-            resolverRef.current = null;
+            resolverRef.current(extractedXML)
+            resolverRef.current = null
         }
-    };
+    }
 
     const clearDiagram = () => {
-        const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`;
-        loadDiagram(emptyDiagram);
-        setChartXML(emptyDiagram);
-        setLatestSvg("");
-        setDiagramHistory([]);
-    };
+        const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
+        loadDiagram(emptyDiagram)
+        setChartXML(emptyDiagram)
+        setLatestSvg("")
+        setDiagramHistory([])
+    }
 
-    const saveDiagramToFile = (filename: string, format: ExportFormat, sessionId?: string) => {
+    const saveDiagramToFile = (
+        filename: string,
+        format: ExportFormat,
+        sessionId?: string,
+    ) => {
         if (!drawioRef.current) {
-            console.warn("Draw.io editor not ready");
-            return;
+            console.warn("Draw.io editor not ready")
+            return
         }
 
         // Map format to draw.io export format
-        const drawioFormat = format === "drawio" ? "xmlsvg" : format;
+        const drawioFormat = format === "drawio" ? "xmlsvg" : format
 
         // Set up the resolver before triggering export
         saveResolverRef.current = {
             resolver: (exportData: string) => {
-                let fileContent: string | Blob;
-                let mimeType: string;
-                let extension: string;
+                let fileContent: string | Blob
+                let mimeType: string
+                let extension: string
 
                 if (format === "drawio") {
                     // Extract XML from SVG for .drawio format
-                    const xml = extractDiagramXML(exportData);
-                    let xmlContent = xml;
+                    const xml = extractDiagramXML(exportData)
+                    let xmlContent = xml
                     if (!xml.includes("<mxfile")) {
-                        xmlContent = `<mxfile><diagram name="Page-1" id="page-1">${xml}</diagram></mxfile>`;
+                        xmlContent = `<mxfile><diagram name="Page-1" id="page-1">${xml}</diagram></mxfile>`
                     }
-                    fileContent = xmlContent;
-                    mimeType = "application/xml";
-                    extension = ".drawio";
+                    fileContent = xmlContent
+                    mimeType = "application/xml"
+                    extension = ".drawio"
                 } else if (format === "png") {
                     // PNG data comes as base64 data URL
-                    fileContent = exportData;
-                    mimeType = "image/png";
-                    extension = ".png";
+                    fileContent = exportData
+                    mimeType = "image/png"
+                    extension = ".png"
                 } else {
                     // SVG format
-                    fileContent = exportData;
-                    mimeType = "image/svg+xml";
-                    extension = ".svg";
+                    fileContent = exportData
+                    mimeType = "image/svg+xml"
+                    extension = ".svg"
                 }
 
                 // Log save event to Langfuse (flags the trace)
-                logSaveToLangfuse(filename, format, sessionId);
+                logSaveToLangfuse(filename, format, sessionId)
 
                 // Handle download
-                let url: string;
-                if (typeof fileContent === "string" && fileContent.startsWith("data:")) {
+                let url: string
+                if (
+                    typeof fileContent === "string" &&
+                    fileContent.startsWith("data:")
+                ) {
                     // Already a data URL (PNG)
-                    url = fileContent;
+                    url = fileContent
                 } else {
-                    const blob = new Blob([fileContent], { type: mimeType });
-                    url = URL.createObjectURL(blob);
+                    const blob = new Blob([fileContent], { type: mimeType })
+                    url = URL.createObjectURL(blob)
                 }
 
-                const a = document.createElement("a");
-                a.href = url;
-                a.download = `${filename}${extension}`;
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
+                const a = document.createElement("a")
+                a.href = url
+                a.download = `${filename}${extension}`
+                document.body.appendChild(a)
+                a.click()
+                document.body.removeChild(a)
 
                 // Delay URL revocation to ensure download completes
                 if (!url.startsWith("data:")) {
-                    setTimeout(() => URL.revokeObjectURL(url), 100);
+                    setTimeout(() => URL.revokeObjectURL(url), 100)
                 }
             },
             format,
-        };
+        }
 
         // Export diagram - callback will be handled in handleDiagramExport
-        drawioRef.current.exportDiagram({ format: drawioFormat });
-    };
+        drawioRef.current.exportDiagram({ format: drawioFormat })
+    }
 
     // Log save event to Langfuse (just flags the trace, doesn't send content)
-    const logSaveToLangfuse = async (filename: string, format: string, sessionId?: string) => {
+    const logSaveToLangfuse = async (
+        filename: string,
+        format: string,
+        sessionId?: string,
+    ) => {
         try {
             await fetch("/api/log-save", {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ filename, format, sessionId }),
-            });
+            })
         } catch (error) {
-            console.warn("Failed to log save to Langfuse:", error);
+            console.warn("Failed to log save to Langfuse:", error)
         }
-    };
+    }
 
     return (
         <DiagramContext.Provider
@@ -208,13 +224,13 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         >
             {children}
         </DiagramContext.Provider>
-    );
+    )
 }
 
 export function useDiagram() {
-    const context = useContext(DiagramContext);
+    const context = useContext(DiagramContext)
     if (context === undefined) {
-        throw new Error("useDiagram must be used within a DiagramProvider");
+        throw new Error("useDiagram must be used within a DiagramProvider")
     }
-    return context;
+    return context
 }
diff --git a/instrumentation.ts b/instrumentation.ts
index fc0f703..abd8c14 100644
--- a/instrumentation.ts
+++ b/instrumentation.ts
@@ -1,35 +1,39 @@
-import { LangfuseSpanProcessor } from '@langfuse/otel';
-import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node';
+import { LangfuseSpanProcessor } from "@langfuse/otel"
+import { NodeTracerProvider } from "@opentelemetry/sdk-trace-node"
 
 export function register() {
-  // Skip telemetry if Langfuse env vars are not configured
-  if (!process.env.LANGFUSE_PUBLIC_KEY || !process.env.LANGFUSE_SECRET_KEY) {
-    console.warn('[Langfuse] Environment variables not configured - telemetry disabled');
-    return;
-  }
+    // Skip telemetry if Langfuse env vars are not configured
+    if (!process.env.LANGFUSE_PUBLIC_KEY || !process.env.LANGFUSE_SECRET_KEY) {
+        console.warn(
+            "[Langfuse] Environment variables not configured - telemetry disabled",
+        )
+        return
+    }
 
-  const langfuseSpanProcessor = new LangfuseSpanProcessor({
-    publicKey: process.env.LANGFUSE_PUBLIC_KEY,
-    secretKey: process.env.LANGFUSE_SECRET_KEY,
-    baseUrl: process.env.LANGFUSE_BASEURL,
-    // Filter out Next.js HTTP request spans so AI SDK spans become root traces
-    shouldExportSpan: ({ otelSpan }) => {
-      const spanName = otelSpan.name;
-      // Skip Next.js HTTP infrastructure spans
-      if (spanName.startsWith('POST /') ||
-          spanName.startsWith('GET /') ||
-          spanName.includes('BaseServer') ||
-          spanName.includes('handleRequest')) {
-        return false;
-      }
-      return true;
-    },
-  });
+    const langfuseSpanProcessor = new LangfuseSpanProcessor({
+        publicKey: process.env.LANGFUSE_PUBLIC_KEY,
+        secretKey: process.env.LANGFUSE_SECRET_KEY,
+        baseUrl: process.env.LANGFUSE_BASEURL,
+        // Filter out Next.js HTTP request spans so AI SDK spans become root traces
+        shouldExportSpan: ({ otelSpan }) => {
+            const spanName = otelSpan.name
+            // Skip Next.js HTTP infrastructure spans
+            if (
+                spanName.startsWith("POST /") ||
+                spanName.startsWith("GET /") ||
+                spanName.includes("BaseServer") ||
+                spanName.includes("handleRequest")
+            ) {
+                return false
+            }
+            return true
+        },
+    })
 
-  const tracerProvider = new NodeTracerProvider({
-    spanProcessors: [langfuseSpanProcessor],
-  });
+    const tracerProvider = new NodeTracerProvider({
+        spanProcessors: [langfuseSpanProcessor],
+    })
 
-  // Register globally so AI SDK's telemetry also uses this processor
-  tracerProvider.register();
+    // Register globally so AI SDK's telemetry also uses this processor
+    tracerProvider.register()
 }
diff --git a/lib/ai-providers.ts b/lib/ai-providers.ts
index cc79915..315884c 100644
--- a/lib/ai-providers.ts
+++ b/lib/ai-providers.ts
@@ -1,89 +1,89 @@
-import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';
-import { fromNodeProviderChain } from '@aws-sdk/credential-providers';
-import { openai, createOpenAI } from '@ai-sdk/openai';
-import { createAnthropic } from '@ai-sdk/anthropic';
-import { google, createGoogleGenerativeAI } from '@ai-sdk/google';
-import { azure, createAzure } from '@ai-sdk/azure';
-import { ollama, createOllama } from 'ollama-ai-provider-v2';
-import { createOpenRouter } from '@openrouter/ai-sdk-provider';
-import { deepseek, createDeepSeek } from '@ai-sdk/deepseek';
+import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock"
+import { createAnthropic } from "@ai-sdk/anthropic"
+import { azure, createAzure } from "@ai-sdk/azure"
+import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
+import { createGoogleGenerativeAI, google } from "@ai-sdk/google"
+import { createOpenAI, openai } from "@ai-sdk/openai"
+import { fromNodeProviderChain } from "@aws-sdk/credential-providers"
+import { createOpenRouter } from "@openrouter/ai-sdk-provider"
+import { createOllama, ollama } from "ollama-ai-provider-v2"
 
 export type ProviderName =
-  | 'bedrock'
-  | 'openai'
-  | 'anthropic'
-  | 'google'
-  | 'azure'
-  | 'ollama'
-  | 'openrouter'
-  | 'deepseek';
+    | "bedrock"
+    | "openai"
+    | "anthropic"
+    | "google"
+    | "azure"
+    | "ollama"
+    | "openrouter"
+    | "deepseek"
 
 interface ModelConfig {
-  model: any;
-  providerOptions?: any;
-  headers?: Record<string, string>;
-  modelId: string;
+    model: any
+    providerOptions?: any
+    headers?: Record<string, string>
+    modelId: string
 }
 
 // Bedrock provider options for Anthropic beta features
 const BEDROCK_ANTHROPIC_BETA = {
-  bedrock: {
-    anthropicBeta: ['fine-grained-tool-streaming-2025-05-14'],
-  },
-};
+    bedrock: {
+        anthropicBeta: ["fine-grained-tool-streaming-2025-05-14"],
+    },
+}
 
 // Direct Anthropic API headers for beta features
 const ANTHROPIC_BETA_HEADERS = {
-  'anthropic-beta': 'fine-grained-tool-streaming-2025-05-14',
-};
+    "anthropic-beta": "fine-grained-tool-streaming-2025-05-14",
+}
 
 // Map of provider to required environment variable
 const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
-  bedrock: null, // AWS SDK auto-uses IAM role on AWS, or env vars locally
-  openai: 'OPENAI_API_KEY',
-  anthropic: 'ANTHROPIC_API_KEY',
-  google: 'GOOGLE_GENERATIVE_AI_API_KEY',
-  azure: 'AZURE_API_KEY',
-  ollama: null, // No credentials needed for local Ollama
-  openrouter: 'OPENROUTER_API_KEY',
-  deepseek: 'DEEPSEEK_API_KEY',
-};
+    bedrock: null, // AWS SDK auto-uses IAM role on AWS, or env vars locally
+    openai: "OPENAI_API_KEY",
+    anthropic: "ANTHROPIC_API_KEY",
+    google: "GOOGLE_GENERATIVE_AI_API_KEY",
+    azure: "AZURE_API_KEY",
+    ollama: null, // No credentials needed for local Ollama
+    openrouter: "OPENROUTER_API_KEY",
+    deepseek: "DEEPSEEK_API_KEY",
+}
 
 /**
  * Auto-detect provider based on available API keys
  * Returns the provider if exactly one is configured, otherwise null
  */
 function detectProvider(): ProviderName | null {
-  const configuredProviders: ProviderName[] = [];
+    const configuredProviders: ProviderName[] = []
 
-  for (const [provider, envVar] of Object.entries(PROVIDER_ENV_VARS)) {
-    if (envVar === null) {
-      // Skip ollama - it doesn't require credentials
-      continue;
+    for (const [provider, envVar] of Object.entries(PROVIDER_ENV_VARS)) {
+        if (envVar === null) {
+            // Skip ollama - it doesn't require credentials
+            continue
+        }
+        if (process.env[envVar]) {
+            configuredProviders.push(provider as ProviderName)
+        }
     }
-    if (process.env[envVar]) {
-      configuredProviders.push(provider as ProviderName);
+
+    if (configuredProviders.length === 1) {
+        return configuredProviders[0]
     }
-  }
 
-  if (configuredProviders.length === 1) {
-    return configuredProviders[0];
-  }
-
-  return null;
+    return null
 }
 
 /**
  * Validate that required API keys are present for the selected provider
  */
 function validateProviderCredentials(provider: ProviderName): void {
-  const requiredVar = PROVIDER_ENV_VARS[provider];
-  if (requiredVar && !process.env[requiredVar]) {
-    throw new Error(
-      `${requiredVar} environment variable is required for ${provider} provider. ` +
-      `Please set it in your .env.local file.`
-    );
-  }
+    const requiredVar = PROVIDER_ENV_VARS[provider]
+    if (requiredVar && !process.env[requiredVar]) {
+        throw new Error(
+            `${requiredVar} environment variable is required for ${provider} provider. ` +
+                `Please set it in your .env.local file.`,
+        )
+    }
 }
 
 /**
@@ -106,158 +106,164 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
  */
 export function getAIModel(): ModelConfig {
-  const modelId = process.env.AI_MODEL;
+    const modelId = process.env.AI_MODEL
 
-  if (!modelId) {
-    throw new Error(
-      `AI_MODEL environment variable is required. Example: AI_MODEL=claude-sonnet-4-5`
-    );
-  }
+    if (!modelId) {
+        throw new Error(
+            `AI_MODEL environment variable is required. Example: AI_MODEL=claude-sonnet-4-5`,
+        )
+    }
 
-  // Determine provider: explicit config > auto-detect > error
-  let provider: ProviderName;
-  if (process.env.AI_PROVIDER) {
-    provider = process.env.AI_PROVIDER as ProviderName;
-  } else {
-    const detected = detectProvider();
-    if (detected) {
-      provider = detected;
-      console.log(`[AI Provider] Auto-detected provider: ${provider}`);
+    // Determine provider: explicit config > auto-detect > error
+    let provider: ProviderName
+    if (process.env.AI_PROVIDER) {
+        provider = process.env.AI_PROVIDER as ProviderName
     } else {
-      // List configured providers for better error message
-      const configured = Object.entries(PROVIDER_ENV_VARS)
-        .filter(([, envVar]) => envVar && process.env[envVar as string])
-        .map(([p]) => p);
+        const detected = detectProvider()
+        if (detected) {
+            provider = detected
+            console.log(`[AI Provider] Auto-detected provider: ${provider}`)
+        } else {
+            // List configured providers for better error message
+            const configured = Object.entries(PROVIDER_ENV_VARS)
+                .filter(([, envVar]) => envVar && process.env[envVar as string])
+                .map(([p]) => p)
 
-      if (configured.length === 0) {
-        throw new Error(
-          `No AI provider configured. Please set one of the following API keys in your .env.local file:\n` +
-          `- DEEPSEEK_API_KEY for DeepSeek\n` +
-          `- OPENAI_API_KEY for OpenAI\n` +
-          `- ANTHROPIC_API_KEY for Anthropic\n` +
-          `- GOOGLE_GENERATIVE_AI_API_KEY for Google\n` +
-          `- AWS_ACCESS_KEY_ID for Bedrock\n` +
-          `- OPENROUTER_API_KEY for OpenRouter\n` +
-          `- AZURE_API_KEY for Azure\n` +
-          `Or set AI_PROVIDER=ollama for local Ollama.`
-        );
-      } else {
-        throw new Error(
-          `Multiple AI providers configured (${configured.join(', ')}). ` +
-          `Please set AI_PROVIDER to specify which one to use.`
-        );
-      }
-    }
-  }
-
-  // Validate provider credentials
-  validateProviderCredentials(provider);
-
-  console.log(`[AI Provider] Initializing ${provider} with model: ${modelId}`);
-
-  let model: any;
-  let providerOptions: any = undefined;
-  let headers: Record<string, string> | undefined = undefined;
-
-  switch (provider) {
-    case 'bedrock': {
-      // Use credential provider chain for IAM role support (Amplify, Lambda, etc.)
-      // Falls back to env vars (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY) for local dev
-      const bedrockProvider = createAmazonBedrock({
-        region: process.env.AWS_REGION || 'us-west-2',
-        credentialProvider: fromNodeProviderChain(),
-      });
-      model = bedrockProvider(modelId);
-      // Add Anthropic beta options if using Claude models via Bedrock
-      if (modelId.includes('anthropic.claude')) {
-        providerOptions = BEDROCK_ANTHROPIC_BETA;
-      }
-      break;
+            if (configured.length === 0) {
+                throw new Error(
+                    `No AI provider configured. Please set one of the following API keys in your .env.local file:\n` +
+                        `- DEEPSEEK_API_KEY for DeepSeek\n` +
+                        `- OPENAI_API_KEY for OpenAI\n` +
+                        `- ANTHROPIC_API_KEY for Anthropic\n` +
+                        `- GOOGLE_GENERATIVE_AI_API_KEY for Google\n` +
+                        `- AWS_ACCESS_KEY_ID for Bedrock\n` +
+                        `- OPENROUTER_API_KEY for OpenRouter\n` +
+                        `- AZURE_API_KEY for Azure\n` +
+                        `Or set AI_PROVIDER=ollama for local Ollama.`,
+                )
+            } else {
+                throw new Error(
+                    `Multiple AI providers configured (${configured.join(", ")}). ` +
+                        `Please set AI_PROVIDER to specify which one to use.`,
+                )
+            }
+        }
     }
 
-    case 'openai':
-      if (process.env.OPENAI_BASE_URL) {
-        const customOpenAI = createOpenAI({
-          apiKey: process.env.OPENAI_API_KEY,
-          baseURL: process.env.OPENAI_BASE_URL,
-        });
-        model = customOpenAI.chat(modelId);
-      } else {
-        model = openai(modelId);
-      }
-      break;
+    // Validate provider credentials
+    validateProviderCredentials(provider)
 
-    case 'anthropic':
-      const customProvider = createAnthropic({
-        apiKey: process.env.ANTHROPIC_API_KEY,
-        baseURL: process.env.ANTHROPIC_BASE_URL || 'https://api.anthropic.com/v1',
-        headers: ANTHROPIC_BETA_HEADERS,
-      });
-      model = customProvider(modelId);
-      // Add beta headers for fine-grained tool streaming
-      headers = ANTHROPIC_BETA_HEADERS;
-      break;
+    console.log(`[AI Provider] Initializing ${provider} with model: ${modelId}`)
 
-    case 'google':
-      if (process.env.GOOGLE_BASE_URL) {
-        const customGoogle = createGoogleGenerativeAI({
-          apiKey: process.env.GOOGLE_GENERATIVE_AI_API_KEY,
-          baseURL: process.env.GOOGLE_BASE_URL,
-        });
-        model = customGoogle(modelId);
-      } else {
-        model = google(modelId);
-      }
-      break;
+    let model: any
+    let providerOptions: any
+    let headers: Record<string, string> | undefined
 
-    case 'azure':
-      if (process.env.AZURE_BASE_URL) {
-        const customAzure = createAzure({
-          apiKey: process.env.AZURE_API_KEY,
-          baseURL: process.env.AZURE_BASE_URL,
-        });
-        model = customAzure(modelId);
-      } else {
-        model = azure(modelId);
-      }
-      break;
+    switch (provider) {
+        case "bedrock": {
+            // Use credential provider chain for IAM role support (Amplify, Lambda, etc.)
+            // Falls back to env vars (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY) for local dev
+            const bedrockProvider = createAmazonBedrock({
+                region: process.env.AWS_REGION || "us-west-2",
+                credentialProvider: fromNodeProviderChain(),
+            })
+            model = bedrockProvider(modelId)
+            // Add Anthropic beta options if using Claude models via Bedrock
+            if (modelId.includes("anthropic.claude")) {
+                providerOptions = BEDROCK_ANTHROPIC_BETA
+            }
+            break
+        }
 
-    case 'ollama':
-      if (process.env.OLLAMA_BASE_URL) {
-        const customOllama = createOllama({
-          baseURL: process.env.OLLAMA_BASE_URL,
-        });
-        model = customOllama(modelId);
-      } else {
-        model = ollama(modelId);
-      }
-      break;
+        case "openai":
+            if (process.env.OPENAI_BASE_URL) {
+                const customOpenAI = createOpenAI({
+                    apiKey: process.env.OPENAI_API_KEY,
+                    baseURL: process.env.OPENAI_BASE_URL,
+                })
+                model = customOpenAI.chat(modelId)
+            } else {
+                model = openai(modelId)
+            }
+            break
 
-    case 'openrouter':
-      const openrouter = createOpenRouter({
-        apiKey: process.env.OPENROUTER_API_KEY,
-        ...(process.env.OPENROUTER_BASE_URL && { baseURL: process.env.OPENROUTER_BASE_URL }),
-      });
-      model = openrouter(modelId);
-      break;
+        case "anthropic": {
+            const customProvider = createAnthropic({
+                apiKey: process.env.ANTHROPIC_API_KEY,
+                baseURL:
+                    process.env.ANTHROPIC_BASE_URL ||
+                    "https://api.anthropic.com/v1",
+                headers: ANTHROPIC_BETA_HEADERS,
+            })
+            model = customProvider(modelId)
+            // Add beta headers for fine-grained tool streaming
+            headers = ANTHROPIC_BETA_HEADERS
+            break
+        }
 
-    case 'deepseek':
-      if (process.env.DEEPSEEK_BASE_URL) {
-        const customDeepSeek = createDeepSeek({
-          apiKey: process.env.DEEPSEEK_API_KEY,
-          baseURL: process.env.DEEPSEEK_BASE_URL,
-        });
-        model = customDeepSeek(modelId);
-      } else {
-        model = deepseek(modelId);
-      }
-      break;
+        case "google":
+            if (process.env.GOOGLE_BASE_URL) {
+                const customGoogle = createGoogleGenerativeAI({
+                    apiKey: process.env.GOOGLE_GENERATIVE_AI_API_KEY,
+                    baseURL: process.env.GOOGLE_BASE_URL,
+                })
+                model = customGoogle(modelId)
+            } else {
+                model = google(modelId)
+            }
+            break
 
-    default:
-      throw new Error(
-        `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek`
-      );
-  }
+        case "azure":
+            if (process.env.AZURE_BASE_URL) {
+                const customAzure = createAzure({
+                    apiKey: process.env.AZURE_API_KEY,
+                    baseURL: process.env.AZURE_BASE_URL,
+                })
+                model = customAzure(modelId)
+            } else {
+                model = azure(modelId)
+            }
+            break
 
-  return { model, providerOptions, headers, modelId };
+        case "ollama":
+            if (process.env.OLLAMA_BASE_URL) {
+                const customOllama = createOllama({
+                    baseURL: process.env.OLLAMA_BASE_URL,
+                })
+                model = customOllama(modelId)
+            } else {
+                model = ollama(modelId)
+            }
+            break
+
+        case "openrouter": {
+            const openrouter = createOpenRouter({
+                apiKey: process.env.OPENROUTER_API_KEY,
+                ...(process.env.OPENROUTER_BASE_URL && {
+                    baseURL: process.env.OPENROUTER_BASE_URL,
+                }),
+            })
+            model = openrouter(modelId)
+            break
+        }
+
+        case "deepseek":
+            if (process.env.DEEPSEEK_BASE_URL) {
+                const customDeepSeek = createDeepSeek({
+                    apiKey: process.env.DEEPSEEK_API_KEY,
+                    baseURL: process.env.DEEPSEEK_BASE_URL,
+                })
+                model = customDeepSeek(modelId)
+            } else {
+                model = deepseek(modelId)
+            }
+            break
+
+        default:
+            throw new Error(
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek`,
+            )
+    }
+
+    return { model, providerOptions, headers, modelId }
 }
diff --git a/lib/cached-responses.ts b/lib/cached-responses.ts
index ed2f18c..d28efa3 100644
--- a/lib/cached-responses.ts
+++ b/lib/cached-responses.ts
@@ -1,14 +1,15 @@
 export interface CachedResponse {
-  promptText: string;
-  hasImage: boolean;
-  xml: string;
+    promptText: string
+    hasImage: boolean
+    xml: string
 }
 
 export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
-  {
-    promptText: "Give me a **animated connector** diagram of transformer's architecture",
-    hasImage: false,
-    xml: `<root>
+    {
+        promptText:
+            "Give me a **animated connector** diagram of transformer's architecture",
+        hasImage: false,
+        xml: `<root>
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
@@ -255,11 +256,11 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     <mxGeometry x="660" y="530" width="100" height="30" as="geometry"/>
   </mxCell>
 </root>`,
-  },
-  {
-    promptText: "Replicate this in aws style",
-    hasImage: true,
-    xml: `<root>
+    },
+    {
+        promptText: "Replicate this in aws style",
+        hasImage: true,
+        xml: `<root>
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
@@ -325,11 +326,11 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     </mxGeometry>
   </mxCell>
 </root>`,
-  },
-  {
-    promptText: "Replicate this flowchart.",
-    hasImage: true,
-    xml: `<root>
+    },
+    {
+        promptText: "Replicate this flowchart.",
+        hasImage: true,
+        xml: `<root>
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
@@ -392,11 +393,11 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
     <mxGeometry x="130" y="650" width="200" height="60" as="geometry"/>
   </mxCell>
 </root>`,
-  },
-  {
-    promptText: "Draw a cat for me",
-    hasImage: false,
-    xml: `<root>
+    },
+    {
+        promptText: "Draw a cat for me",
+        hasImage: false,
+        xml: `<root>
   <mxCell id="0"/>
   <mxCell id="1" parent="0"/>
 
@@ -544,14 +545,17 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
   </mxCell>
 
 </root>`,
-  },
-];
+    },
+]
 
 export function findCachedResponse(
-  promptText: string,
-  hasImage: boolean
+    promptText: string,
+    hasImage: boolean,
 ): CachedResponse | undefined {
-  return CACHED_EXAMPLE_RESPONSES.find(
-    (c) => c.promptText === promptText && c.hasImage === hasImage && c.xml !== ''
-  );
+    return CACHED_EXAMPLE_RESPONSES.find(
+        (c) =>
+            c.promptText === promptText &&
+            c.hasImage === hasImage &&
+            c.xml !== "",
+    )
 }
diff --git a/lib/langfuse.ts b/lib/langfuse.ts
index a966059..a78a3c1 100644
--- a/lib/langfuse.ts
+++ b/lib/langfuse.ts
@@ -1,95 +1,107 @@
-import { observe, updateActiveTrace } from '@langfuse/tracing';
-import { LangfuseClient } from '@langfuse/client';
-import * as api from '@opentelemetry/api';
+import { LangfuseClient } from "@langfuse/client"
+import { observe, updateActiveTrace } from "@langfuse/tracing"
+import * as api from "@opentelemetry/api"
 
 // Singleton LangfuseClient instance for direct API calls
-let langfuseClient: LangfuseClient | null = null;
+let langfuseClient: LangfuseClient | null = null
 
 export function getLangfuseClient(): LangfuseClient | null {
-  if (!process.env.LANGFUSE_PUBLIC_KEY || !process.env.LANGFUSE_SECRET_KEY) {
-    return null;
-  }
+    if (!process.env.LANGFUSE_PUBLIC_KEY || !process.env.LANGFUSE_SECRET_KEY) {
+        return null
+    }
 
-  if (!langfuseClient) {
-    langfuseClient = new LangfuseClient({
-      publicKey: process.env.LANGFUSE_PUBLIC_KEY,
-      secretKey: process.env.LANGFUSE_SECRET_KEY,
-      baseUrl: process.env.LANGFUSE_BASEURL,
-    });
-  }
+    if (!langfuseClient) {
+        langfuseClient = new LangfuseClient({
+            publicKey: process.env.LANGFUSE_PUBLIC_KEY,
+            secretKey: process.env.LANGFUSE_SECRET_KEY,
+            baseUrl: process.env.LANGFUSE_BASEURL,
+        })
+    }
 
-  return langfuseClient;
+    return langfuseClient
 }
 
 // Check if Langfuse is configured
 export function isLangfuseEnabled(): boolean {
-  return !!process.env.LANGFUSE_PUBLIC_KEY;
+    return !!process.env.LANGFUSE_PUBLIC_KEY
 }
 
 // Update trace with input data at the start of request
 export function setTraceInput(params: {
-  input: string;
-  sessionId?: string;
-  userId?: string;
+    input: string
+    sessionId?: string
+    userId?: string
 }) {
-  if (!isLangfuseEnabled()) return;
+    if (!isLangfuseEnabled()) return
 
-  updateActiveTrace({
-    name: 'chat',
-    input: params.input,
-    sessionId: params.sessionId,
-    userId: params.userId,
-  });
+    updateActiveTrace({
+        name: "chat",
+        input: params.input,
+        sessionId: params.sessionId,
+        userId: params.userId,
+    })
 }
 
 // Update trace with output and end the span
-export function setTraceOutput(output: string, usage?: { promptTokens?: number; completionTokens?: number }) {
-  if (!isLangfuseEnabled()) return;
+export function setTraceOutput(
+    output: string,
+    usage?: { promptTokens?: number; completionTokens?: number },
+) {
+    if (!isLangfuseEnabled()) return
 
-  updateActiveTrace({ output });
+    updateActiveTrace({ output })
 
-  const activeSpan = api.trace.getActiveSpan();
-  if (activeSpan) {
-    // Manually set usage attributes since AI SDK Bedrock streaming doesn't provide them
-    if (usage?.promptTokens) {
-      activeSpan.setAttribute('ai.usage.promptTokens', usage.promptTokens);
-      activeSpan.setAttribute('gen_ai.usage.input_tokens', usage.promptTokens);
+    const activeSpan = api.trace.getActiveSpan()
+    if (activeSpan) {
+        // Manually set usage attributes since AI SDK Bedrock streaming doesn't provide them
+        if (usage?.promptTokens) {
+            activeSpan.setAttribute("ai.usage.promptTokens", usage.promptTokens)
+            activeSpan.setAttribute(
+                "gen_ai.usage.input_tokens",
+                usage.promptTokens,
+            )
+        }
+        if (usage?.completionTokens) {
+            activeSpan.setAttribute(
+                "ai.usage.completionTokens",
+                usage.completionTokens,
+            )
+            activeSpan.setAttribute(
+                "gen_ai.usage.output_tokens",
+                usage.completionTokens,
+            )
+        }
+        activeSpan.end()
     }
-    if (usage?.completionTokens) {
-      activeSpan.setAttribute('ai.usage.completionTokens', usage.completionTokens);
-      activeSpan.setAttribute('gen_ai.usage.output_tokens', usage.completionTokens);
-    }
-    activeSpan.end();
-  }
 }
 
 // Get telemetry config for streamText
 export function getTelemetryConfig(params: {
-  sessionId?: string;
-  userId?: string;
+    sessionId?: string
+    userId?: string
 }) {
-  if (!isLangfuseEnabled()) return undefined;
+    if (!isLangfuseEnabled()) return undefined
 
-  return {
-    isEnabled: true,
-    // Disable automatic input recording to avoid uploading large base64 images to Langfuse media
-    // User text input is recorded manually via setTraceInput
-    recordInputs: false,
-    recordOutputs: true,
-    metadata: {
-      sessionId: params.sessionId,
-      userId: params.userId,
-    },
-  };
+    return {
+        isEnabled: true,
+        // Disable automatic input recording to avoid uploading large base64 images to Langfuse media
+        // User text input is recorded manually via setTraceInput
+        recordInputs: false,
+        recordOutputs: true,
+        metadata: {
+            sessionId: params.sessionId,
+            userId: params.userId,
+        },
+    }
 }
 
 // Wrap a handler with Langfuse observe
 export function wrapWithObserve<T>(
-  handler: (req: Request) => Promise<T>
+    handler: (req: Request) => Promise<T>,
 ): (req: Request) => Promise<T> {
-  if (!isLangfuseEnabled()) {
-    return handler;
-  }
+    if (!isLangfuseEnabled()) {
+        return handler
+    }
 
-  return observe(handler, { name: 'chat', endOnExit: false });
+    return observe(handler, { name: "chat", endOnExit: false })
 }
diff --git a/lib/system-prompts.ts b/lib/system-prompts.ts
index 3bc90fa..8227275 100644
--- a/lib/system-prompts.ts
+++ b/lib/system-prompts.ts
@@ -119,7 +119,7 @@ Common styles:
 - Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex
 - Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle
 - Text: fontSize=14, fontStyle=1 (bold), align=center/left/right
-`;
+`
 
 // Extended system prompt (~4000+ tokens) - for models with 4000 token cache minimum
 export const EXTENDED_SYSTEM_PROMPT = `
@@ -519,14 +519,14 @@ The XML will be validated before rendering. Ensure:
 \`\`\`
 
 Remember: Quality diagrams communicate clearly. Choose appropriate shapes, use consistent styling, and maintain proper spacing for professional results.
-`;
+`
 
 // Model patterns that require extended prompt (4000 token cache minimum)
 // These patterns match Opus 4.5 and Haiku 4.5 model IDs
 const EXTENDED_PROMPT_MODEL_PATTERNS = [
-  'claude-opus-4-5',   // Matches any Opus 4.5 variant
-  'claude-haiku-4-5',  // Matches any Haiku 4.5 variant
-];
+    "claude-opus-4-5", // Matches any Opus 4.5 variant
+    "claude-haiku-4-5", // Matches any Haiku 4.5 variant
+]
 
 /**
  * Get the appropriate system prompt based on the model ID
@@ -535,16 +535,25 @@ const EXTENDED_PROMPT_MODEL_PATTERNS = [
  * @returns The system prompt string
  */
 export function getSystemPrompt(modelId?: string): string {
-  const modelName = modelId || "AI";
+    const modelName = modelId || "AI"
 
-  let prompt: string;
-  if (modelId && EXTENDED_PROMPT_MODEL_PATTERNS.some(pattern => modelId.includes(pattern))) {
-    console.log(`[System Prompt] Using EXTENDED prompt for model: ${modelId}`);
-    prompt = EXTENDED_SYSTEM_PROMPT;
-  } else {
-    console.log(`[System Prompt] Using DEFAULT prompt for model: ${modelId || 'unknown'}`);
-    prompt = DEFAULT_SYSTEM_PROMPT;
-  }
+    let prompt: string
+    if (
+        modelId &&
+        EXTENDED_PROMPT_MODEL_PATTERNS.some((pattern) =>
+            modelId.includes(pattern),
+        )
+    ) {
+        console.log(
+            `[System Prompt] Using EXTENDED prompt for model: ${modelId}`,
+        )
+        prompt = EXTENDED_SYSTEM_PROMPT
+    } else {
+        console.log(
+            `[System Prompt] Using DEFAULT prompt for model: ${modelId || "unknown"}`,
+        )
+        prompt = DEFAULT_SYSTEM_PROMPT
+    }
 
-  return prompt.replace("{{MODEL_NAME}}", modelName);
+    return prompt.replace("{{MODEL_NAME}}", modelName)
 }
diff --git a/lib/utils.ts b/lib/utils.ts
index 721e21a..8efcc7c 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,9 +1,9 @@
-import { clsx, type ClassValue } from "clsx"
+import { type ClassValue, clsx } from "clsx"
+import * as pako from "pako"
 import { twMerge } from "tailwind-merge"
-import * as pako from 'pako';
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs))
 }
 
 /**
@@ -12,48 +12,48 @@ export function cn(...inputs: ClassValue[]) {
  * @param indent - The indentation string (default: '  ')
  * @returns Formatted XML string
  */
-export function formatXML(xml: string, indent: string = '  '): string {
-  let formatted = '';
-  let pad = 0;
+export function formatXML(xml: string, indent: string = "  "): string {
+    let formatted = ""
+    let pad = 0
 
-  // Remove existing whitespace between tags
-  xml = xml.replace(/>\s*</g, '><').trim();
+    // Remove existing whitespace between tags
+    xml = xml.replace(/>\s*</g, "><").trim()
 
-  // Split on tags
-  const tags = xml.split(/(?=<)|(?<=>)/g).filter(Boolean);
+    // Split on tags
+    const tags = xml.split(/(?=<)|(?<=>)/g).filter(Boolean)
 
-  tags.forEach((node) => {
-    if (node.match(/^<\/\w/)) {
-      // Closing tag - decrease indent
-      pad = Math.max(0, pad - 1);
-      formatted += indent.repeat(pad) + node + '\n';
-    } else if (node.match(/^<\w[^>]*[^\/]>.*$/)) {
-      // Opening tag
-      formatted += indent.repeat(pad) + node;
-      // Only add newline if next item is a tag
-      const nextIndex = tags.indexOf(node) + 1;
-      if (nextIndex < tags.length && tags[nextIndex].startsWith('<')) {
-        formatted += '\n';
-        if (!node.match(/^<\w[^>]*\/>$/)) {
-          pad++;
+    tags.forEach((node) => {
+        if (node.match(/^<\/\w/)) {
+            // Closing tag - decrease indent
+            pad = Math.max(0, pad - 1)
+            formatted += indent.repeat(pad) + node + "\n"
+        } else if (node.match(/^<\w[^>]*[^/]>.*$/)) {
+            // Opening tag
+            formatted += indent.repeat(pad) + node
+            // Only add newline if next item is a tag
+            const nextIndex = tags.indexOf(node) + 1
+            if (nextIndex < tags.length && tags[nextIndex].startsWith("<")) {
+                formatted += "\n"
+                if (!node.match(/^<\w[^>]*\/>$/)) {
+                    pad++
+                }
+            }
+        } else if (node.match(/^<\w[^>]*\/>$/)) {
+            // Self-closing tag
+            formatted += indent.repeat(pad) + node + "\n"
+        } else if (node.startsWith("<")) {
+            // Other tags (like <?xml)
+            formatted += indent.repeat(pad) + node + "\n"
+        } else {
+            // Text content
+            formatted += node
         }
-      }
-    } else if (node.match(/^<\w[^>]*\/>$/)) {
-      // Self-closing tag
-      formatted += indent.repeat(pad) + node + '\n';
-    } else if (node.startsWith('<')) {
-      // Other tags (like <?xml)
-      formatted += indent.repeat(pad) + node + '\n';
-    } else {
-      // Text content
-      formatted += node;
-    }
-  });
+    })
 
-  return formatted.trim();
+    return formatted.trim()
 }
 
-/** 
+/**
  * Efficiently converts a potentially incomplete XML string to a legal XML string by closing any open tags properly.
  * Additionally, if an <mxCell> tag does not have an mxGeometry child (e.g. <mxCell id="3">),
  * it removes that tag from the output.
@@ -61,24 +61,26 @@ export function formatXML(xml: string, indent: string = '  '): string {
  * @returns A legal XML string with properly closed tags and removed incomplete mxCell elements.
  */
 export function convertToLegalXml(xmlString: string): string {
-  // This regex will match either self-closing <mxCell .../> or a block element 
-  // <mxCell ...> ... </mxCell>. Unfinished ones are left out because they don't match.
-  const regex = /<mxCell\b[^>]*(?:\/>|>([\s\S]*?)<\/mxCell>)/g;
-  let match: RegExpExecArray | null;
-  let result = "<root>\n";
+    // This regex will match either self-closing <mxCell .../> or a block element
+    // <mxCell ...> ... </mxCell>. Unfinished ones are left out because they don't match.
+    const regex = /<mxCell\b[^>]*(?:\/>|>([\s\S]*?)<\/mxCell>)/g
+    let match: RegExpExecArray | null
+    let result = "<root>\n"
 
-  while ((match = regex.exec(xmlString)) !== null) {
-    // match[0] contains the entire matched mxCell block
-    // Indent each line of the matched block for readability.
-    const formatted = match[0].split('\n').map(line => "    " + line.trim()).join('\n');
-    result += formatted + "\n";
-  }
-  result += "</root>";
+    while ((match = regex.exec(xmlString)) !== null) {
+        // match[0] contains the entire matched mxCell block
+        // Indent each line of the matched block for readability.
+        const formatted = match[0]
+            .split("\n")
+            .map((line) => "    " + line.trim())
+            .join("\n")
+        result += formatted + "\n"
+    }
+    result += "</root>"
 
-  return result;
+    return result
 }
 
-
 /**
  * Replace nodes in a Draw.io XML diagram
  * @param currentXML - The original Draw.io XML string
@@ -86,94 +88,99 @@ export function convertToLegalXml(xmlString: string): string {
  * @returns The updated XML string with replaced nodes
  */
 export function replaceNodes(currentXML: string, nodes: string): string {
-  // Check for valid inputs
-  if (!currentXML || !nodes) {
-    throw new Error("Both currentXML and nodes must be provided");
-  }
-
-  try {
-    // Parse the XML strings to create DOM objects
-    const parser = new DOMParser();
-    const currentDoc = parser.parseFromString(currentXML, "text/xml");
-
-    // Handle nodes input - if it doesn't contain <root>, wrap it
-    let nodesString = nodes;
-    if (!nodes.includes("<root>")) {
-      nodesString = `<root>${nodes}</root>`;
+    // Check for valid inputs
+    if (!currentXML || !nodes) {
+        throw new Error("Both currentXML and nodes must be provided")
     }
 
-    const nodesDoc = parser.parseFromString(nodesString, "text/xml");
+    try {
+        // Parse the XML strings to create DOM objects
+        const parser = new DOMParser()
+        const currentDoc = parser.parseFromString(currentXML, "text/xml")
 
-    // Find the root element in the current document
-    let currentRoot = currentDoc.querySelector("mxGraphModel > root");
-    if (!currentRoot) {
-      // If no root element is found, create the proper structure
-      const mxGraphModel = currentDoc.querySelector("mxGraphModel") ||
-        currentDoc.createElement("mxGraphModel");
+        // Handle nodes input - if it doesn't contain <root>, wrap it
+        let nodesString = nodes
+        if (!nodes.includes("<root>")) {
+            nodesString = `<root>${nodes}</root>`
+        }
 
-      if (!currentDoc.contains(mxGraphModel)) {
-        currentDoc.appendChild(mxGraphModel);
-      }
+        const nodesDoc = parser.parseFromString(nodesString, "text/xml")
 
-      currentRoot = currentDoc.createElement("root");
-      mxGraphModel.appendChild(currentRoot);
+        // Find the root element in the current document
+        let currentRoot = currentDoc.querySelector("mxGraphModel > root")
+        if (!currentRoot) {
+            // If no root element is found, create the proper structure
+            const mxGraphModel =
+                currentDoc.querySelector("mxGraphModel") ||
+                currentDoc.createElement("mxGraphModel")
+
+            if (!currentDoc.contains(mxGraphModel)) {
+                currentDoc.appendChild(mxGraphModel)
+            }
+
+            currentRoot = currentDoc.createElement("root")
+            mxGraphModel.appendChild(currentRoot)
+        }
+
+        // Find the root element in the nodes document
+        const nodesRoot = nodesDoc.querySelector("root")
+        if (!nodesRoot) {
+            throw new Error(
+                "Invalid nodes: Could not find or create <root> element",
+            )
+        }
+
+        // Clear all existing child elements from the current root
+        while (currentRoot.firstChild) {
+            currentRoot.removeChild(currentRoot.firstChild)
+        }
+
+        // Ensure the base cells exist
+        const hasCell0 = Array.from(nodesRoot.childNodes).some(
+            (node) =>
+                node.nodeName === "mxCell" &&
+                (node as Element).getAttribute("id") === "0",
+        )
+
+        const hasCell1 = Array.from(nodesRoot.childNodes).some(
+            (node) =>
+                node.nodeName === "mxCell" &&
+                (node as Element).getAttribute("id") === "1",
+        )
+
+        // Copy all child nodes from the nodes root to the current root
+        Array.from(nodesRoot.childNodes).forEach((node) => {
+            const importedNode = currentDoc.importNode(node, true)
+            currentRoot.appendChild(importedNode)
+        })
+
+        // Add default cells if they don't exist
+        if (!hasCell0) {
+            const cell0 = currentDoc.createElement("mxCell")
+            cell0.setAttribute("id", "0")
+            currentRoot.insertBefore(cell0, currentRoot.firstChild)
+        }
+
+        if (!hasCell1) {
+            const cell1 = currentDoc.createElement("mxCell")
+            cell1.setAttribute("id", "1")
+            cell1.setAttribute("parent", "0")
+
+            // Insert after cell0 if possible
+            const cell0 = currentRoot.querySelector('mxCell[id="0"]')
+            if (cell0 && cell0.nextSibling) {
+                currentRoot.insertBefore(cell1, cell0.nextSibling)
+            } else {
+                currentRoot.appendChild(cell1)
+            }
+        }
+
+        // Convert the modified DOM back to a string
+        const serializer = new XMLSerializer()
+        return serializer.serializeToString(currentDoc)
+    } catch (error) {
+        throw new Error(`Error replacing nodes: ${error}`)
     }
-
-    // Find the root element in the nodes document
-    const nodesRoot = nodesDoc.querySelector("root");
-    if (!nodesRoot) {
-      throw new Error("Invalid nodes: Could not find or create <root> element");
-    }
-
-    // Clear all existing child elements from the current root
-    while (currentRoot.firstChild) {
-      currentRoot.removeChild(currentRoot.firstChild);
-    }
-
-    // Ensure the base cells exist
-    const hasCell0 = Array.from(nodesRoot.childNodes).some(
-      node => node.nodeName === "mxCell" &&
-        (node as Element).getAttribute("id") === "0"
-    );
-
-    const hasCell1 = Array.from(nodesRoot.childNodes).some(
-      node => node.nodeName === "mxCell" &&
-        (node as Element).getAttribute("id") === "1"
-    );
-
-    // Copy all child nodes from the nodes root to the current root
-    Array.from(nodesRoot.childNodes).forEach(node => {
-      const importedNode = currentDoc.importNode(node, true);
-      currentRoot.appendChild(importedNode);
-    });
-
-    // Add default cells if they don't exist
-    if (!hasCell0) {
-      const cell0 = currentDoc.createElement("mxCell");
-      cell0.setAttribute("id", "0");
-      currentRoot.insertBefore(cell0, currentRoot.firstChild);
-    }
-
-    if (!hasCell1) {
-      const cell1 = currentDoc.createElement("mxCell");
-      cell1.setAttribute("id", "1");
-      cell1.setAttribute("parent", "0");
-
-      // Insert after cell0 if possible
-      const cell0 = currentRoot.querySelector('mxCell[id="0"]');
-      if (cell0 && cell0.nextSibling) {
-        currentRoot.insertBefore(cell1, cell0.nextSibling);
-      } else {
-        currentRoot.appendChild(cell1);
-      }
-    }
-
-    // Convert the modified DOM back to a string
-    const serializer = new XMLSerializer();
-    return serializer.serializeToString(currentDoc);
-  } catch (error) {
-    throw new Error(`Error replacing nodes: ${error}`);
-  }
 }
 
 /**
@@ -181,30 +188,30 @@ export function replaceNodes(currentXML: string, nodes: string): string {
  * Used for attribute-order agnostic comparison
  */
 function charCountDict(str: string): Map<string, number> {
-  const dict = new Map<string, number>();
-  for (const char of str) {
-    dict.set(char, (dict.get(char) || 0) + 1);
-  }
-  return dict;
+    const dict = new Map<string, number>()
+    for (const char of str) {
+        dict.set(char, (dict.get(char) || 0) + 1)
+    }
+    return dict
 }
 
 /**
  * Compare two strings by character frequency (order-agnostic)
  */
 function sameCharFrequency(a: string, b: string): boolean {
-  const trimmedA = a.trim();
-  const trimmedB = b.trim();
-  if (trimmedA.length !== trimmedB.length) return false;
+    const trimmedA = a.trim()
+    const trimmedB = b.trim()
+    if (trimmedA.length !== trimmedB.length) return false
 
-  const dictA = charCountDict(trimmedA);
-  const dictB = charCountDict(trimmedB);
+    const dictA = charCountDict(trimmedA)
+    const dictB = charCountDict(trimmedB)
 
-  if (dictA.size !== dictB.size) return false;
+    if (dictA.size !== dictB.size) return false
 
-  for (const [char, count] of dictA) {
-    if (dictB.get(char) !== count) return false;
-  }
-  return true;
+    for (const [char, count] of dictA) {
+        if (dictB.get(char) !== count) return false
+    }
+    return true
 }
 
 /**
@@ -214,187 +221,213 @@ function sameCharFrequency(a: string, b: string): boolean {
  * @returns The updated XML string with replacements applied
  */
 export function replaceXMLParts(
-  xmlContent: string,
-  searchReplacePairs: Array<{ search: string; replace: string }>
+    xmlContent: string,
+    searchReplacePairs: Array<{ search: string; replace: string }>,
 ): string {
-  // Format the XML first to ensure consistent line breaks
-  let result = formatXML(xmlContent);
-  let lastProcessedIndex = 0;
+    // Format the XML first to ensure consistent line breaks
+    let result = formatXML(xmlContent)
+    let lastProcessedIndex = 0
 
-  for (const { search, replace } of searchReplacePairs) {
-    // Also format the search content for consistency
-    const formattedSearch = formatXML(search);
-    const searchLines = formattedSearch.split('\n');
+    for (const { search, replace } of searchReplacePairs) {
+        // Also format the search content for consistency
+        const formattedSearch = formatXML(search)
+        const searchLines = formattedSearch.split("\n")
 
-    // Split into lines for exact line matching
-    const resultLines = result.split('\n');
+        // Split into lines for exact line matching
+        const resultLines = result.split("\n")
 
-    // Remove trailing empty line if exists (from the trailing \n in search content)
-    if (searchLines[searchLines.length - 1] === '') {
-      searchLines.pop();
-    }
-
-    // Find the line number where lastProcessedIndex falls
-    let startLineNum = 0;
-    let currentIndex = 0;
-    while (currentIndex < lastProcessedIndex && startLineNum < resultLines.length) {
-      currentIndex += resultLines[startLineNum].length + 1; // +1 for \n
-      startLineNum++;
-    }
-
-    // Try to find exact match starting from lastProcessedIndex
-    let matchFound = false;
-    let matchStartLine = -1;
-    let matchEndLine = -1;
-
-    // First try: exact match
-    for (let i = startLineNum; i <= resultLines.length - searchLines.length; i++) {
-      let matches = true;
-
-      for (let j = 0; j < searchLines.length; j++) {
-        if (resultLines[i + j] !== searchLines[j]) {
-          matches = false;
-          break;
-        }
-      }
-
-      if (matches) {
-        matchStartLine = i;
-        matchEndLine = i + searchLines.length;
-        matchFound = true;
-        break;
-      }
-    }
-
-    // Second try: line-trimmed match (fallback)
-    if (!matchFound) {
-      for (let i = startLineNum; i <= resultLines.length - searchLines.length; i++) {
-        let matches = true;
-
-        for (let j = 0; j < searchLines.length; j++) {
-          const originalTrimmed = resultLines[i + j].trim();
-          const searchTrimmed = searchLines[j].trim();
-
-          if (originalTrimmed !== searchTrimmed) {
-            matches = false;
-            break;
-          }
+        // Remove trailing empty line if exists (from the trailing \n in search content)
+        if (searchLines[searchLines.length - 1] === "") {
+            searchLines.pop()
         }
 
-        if (matches) {
-          matchStartLine = i;
-          matchEndLine = i + searchLines.length;
-          matchFound = true;
-          break;
-        }
-      }
-    }
-
-    // Third try: substring match as last resort (for single-line XML)
-    if (!matchFound) {
-      // Try to find as a substring in the entire content
-      const searchStr = search.trim();
-      const resultStr = result;
-      const index = resultStr.indexOf(searchStr);
-
-      if (index !== -1) {
-        // Found as substring - replace it
-        result = resultStr.substring(0, index) + replace.trim() + resultStr.substring(index + searchStr.length);
-        // Re-format after substring replacement
-        result = formatXML(result);
-        continue; // Skip the line-based replacement below
-      }
-    }
-
-    // Fourth try: character frequency match (attribute-order agnostic)
-    // This handles cases where the model generates XML with different attribute order
-    if (!matchFound) {
-      for (let i = startLineNum; i <= resultLines.length - searchLines.length; i++) {
-        let matches = true;
-
-        for (let j = 0; j < searchLines.length; j++) {
-          if (!sameCharFrequency(resultLines[i + j], searchLines[j])) {
-            matches = false;
-            break;
-          }
+        // Find the line number where lastProcessedIndex falls
+        let startLineNum = 0
+        let currentIndex = 0
+        while (
+            currentIndex < lastProcessedIndex &&
+            startLineNum < resultLines.length
+        ) {
+            currentIndex += resultLines[startLineNum].length + 1 // +1 for \n
+            startLineNum++
         }
 
-        if (matches) {
-          matchStartLine = i;
-          matchEndLine = i + searchLines.length;
-          matchFound = true;
-          break;
-        }
-      }
-    }
+        // Try to find exact match starting from lastProcessedIndex
+        let matchFound = false
+        let matchStartLine = -1
+        let matchEndLine = -1
 
-    // Fifth try: Match by mxCell id attribute
-    // Extract id from search pattern and find the element with that id
-    if (!matchFound) {
-      const idMatch = search.match(/id="([^"]+)"/);
-      if (idMatch) {
-        const searchId = idMatch[1];
-        // Find lines that contain this id
-        for (let i = startLineNum; i < resultLines.length; i++) {
-          if (resultLines[i].includes(`id="${searchId}"`)) {
-            // Found the element with matching id
-            // Now find the extent of this element (it might span multiple lines)
-            let endLine = i + 1;
-            const line = resultLines[i].trim();
+        // First try: exact match
+        for (
+            let i = startLineNum;
+            i <= resultLines.length - searchLines.length;
+            i++
+        ) {
+            let matches = true
 
-            // Check if it's a self-closing tag or has children
-            if (!line.endsWith('/>')) {
-              // Find the closing tag or the end of the mxCell block
-              let depth = 1;
-              while (endLine < resultLines.length && depth > 0) {
-                const currentLine = resultLines[endLine].trim();
-                if (currentLine.startsWith('<') && !currentLine.startsWith('</') && !currentLine.endsWith('/>')) {
-                  depth++;
-                } else if (currentLine.startsWith('</')) {
-                  depth--;
+            for (let j = 0; j < searchLines.length; j++) {
+                if (resultLines[i + j] !== searchLines[j]) {
+                    matches = false
+                    break
                 }
-                endLine++;
-              }
             }
 
-            matchStartLine = i;
-            matchEndLine = endLine;
-            matchFound = true;
-            break;
-          }
+            if (matches) {
+                matchStartLine = i
+                matchEndLine = i + searchLines.length
+                matchFound = true
+                break
+            }
+        }
+
+        // Second try: line-trimmed match (fallback)
+        if (!matchFound) {
+            for (
+                let i = startLineNum;
+                i <= resultLines.length - searchLines.length;
+                i++
+            ) {
+                let matches = true
+
+                for (let j = 0; j < searchLines.length; j++) {
+                    const originalTrimmed = resultLines[i + j].trim()
+                    const searchTrimmed = searchLines[j].trim()
+
+                    if (originalTrimmed !== searchTrimmed) {
+                        matches = false
+                        break
+                    }
+                }
+
+                if (matches) {
+                    matchStartLine = i
+                    matchEndLine = i + searchLines.length
+                    matchFound = true
+                    break
+                }
+            }
+        }
+
+        // Third try: substring match as last resort (for single-line XML)
+        if (!matchFound) {
+            // Try to find as a substring in the entire content
+            const searchStr = search.trim()
+            const resultStr = result
+            const index = resultStr.indexOf(searchStr)
+
+            if (index !== -1) {
+                // Found as substring - replace it
+                result =
+                    resultStr.substring(0, index) +
+                    replace.trim() +
+                    resultStr.substring(index + searchStr.length)
+                // Re-format after substring replacement
+                result = formatXML(result)
+                continue // Skip the line-based replacement below
+            }
+        }
+
+        // Fourth try: character frequency match (attribute-order agnostic)
+        // This handles cases where the model generates XML with different attribute order
+        if (!matchFound) {
+            for (
+                let i = startLineNum;
+                i <= resultLines.length - searchLines.length;
+                i++
+            ) {
+                let matches = true
+
+                for (let j = 0; j < searchLines.length; j++) {
+                    if (
+                        !sameCharFrequency(resultLines[i + j], searchLines[j])
+                    ) {
+                        matches = false
+                        break
+                    }
+                }
+
+                if (matches) {
+                    matchStartLine = i
+                    matchEndLine = i + searchLines.length
+                    matchFound = true
+                    break
+                }
+            }
+        }
+
+        // Fifth try: Match by mxCell id attribute
+        // Extract id from search pattern and find the element with that id
+        if (!matchFound) {
+            const idMatch = search.match(/id="([^"]+)"/)
+            if (idMatch) {
+                const searchId = idMatch[1]
+                // Find lines that contain this id
+                for (let i = startLineNum; i < resultLines.length; i++) {
+                    if (resultLines[i].includes(`id="${searchId}"`)) {
+                        // Found the element with matching id
+                        // Now find the extent of this element (it might span multiple lines)
+                        let endLine = i + 1
+                        const line = resultLines[i].trim()
+
+                        // Check if it's a self-closing tag or has children
+                        if (!line.endsWith("/>")) {
+                            // Find the closing tag or the end of the mxCell block
+                            let depth = 1
+                            while (endLine < resultLines.length && depth > 0) {
+                                const currentLine = resultLines[endLine].trim()
+                                if (
+                                    currentLine.startsWith("<") &&
+                                    !currentLine.startsWith("</") &&
+                                    !currentLine.endsWith("/>")
+                                ) {
+                                    depth++
+                                } else if (currentLine.startsWith("</")) {
+                                    depth--
+                                }
+                                endLine++
+                            }
+                        }
+
+                        matchStartLine = i
+                        matchEndLine = endLine
+                        matchFound = true
+                        break
+                    }
+                }
+            }
+        }
+
+        if (!matchFound) {
+            throw new Error(
+                `Search pattern not found in the diagram. The pattern may not exist in the current structure.`,
+            )
+        }
+
+        // Replace the matched lines
+        const replaceLines = replace.split("\n")
+
+        // Remove trailing empty line if exists
+        if (replaceLines[replaceLines.length - 1] === "") {
+            replaceLines.pop()
+        }
+
+        // Perform the replacement
+        const newResultLines = [
+            ...resultLines.slice(0, matchStartLine),
+            ...replaceLines,
+            ...resultLines.slice(matchEndLine),
+        ]
+
+        result = newResultLines.join("\n")
+
+        // Update lastProcessedIndex to the position after the replacement
+        lastProcessedIndex = 0
+        for (let i = 0; i < matchStartLine + replaceLines.length; i++) {
+            lastProcessedIndex += newResultLines[i].length + 1
         }
-      }
     }
 
-    if (!matchFound) {
-      throw new Error(`Search pattern not found in the diagram. The pattern may not exist in the current structure.`);
-    }
-
-    // Replace the matched lines
-    const replaceLines = replace.split('\n');
-
-    // Remove trailing empty line if exists
-    if (replaceLines[replaceLines.length - 1] === '') {
-      replaceLines.pop();
-    }
-
-    // Perform the replacement
-    const newResultLines = [
-      ...resultLines.slice(0, matchStartLine),
-      ...replaceLines,
-      ...resultLines.slice(matchEndLine)
-    ];
-
-    result = newResultLines.join('\n');
-
-    // Update lastProcessedIndex to the position after the replacement
-    lastProcessedIndex = 0;
-    for (let i = 0; i < matchStartLine + replaceLines.length; i++) {
-      lastProcessedIndex += newResultLines[i].length + 1;
-    }
-  }
-
-  return result;
+    return result
 }
 
 /**
@@ -403,167 +436,173 @@ export function replaceXMLParts(
  * @returns null if valid, error message string if invalid
  */
 export function validateMxCellStructure(xml: string): string | null {
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(xml, "text/xml");
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(xml, "text/xml")
 
-  // Check for XML parsing errors (includes unescaped special characters)
-  const parseError = doc.querySelector('parsererror');
-  if (parseError) {
-    return `Invalid XML: The XML contains syntax errors (likely unescaped special characters like <, >, & in attribute values). Please escape special characters: use &lt; for <, &gt; for >, &amp; for &, &quot; for ". Regenerate the diagram with properly escaped values.`;
-  }
-
-  // Get all mxCell elements once for all validations
-  const allCells = doc.querySelectorAll('mxCell');
-
-  // Single pass: collect IDs, check for duplicates, nesting, orphans, and invalid parents
-  const cellIds = new Set<string>();
-  const duplicateIds: string[] = [];
-  const nestedCells: string[] = [];
-  const orphanCells: string[] = [];
-  const invalidParents: { id: string; parent: string }[] = [];
-  const edgesToValidate: { id: string; source: string | null; target: string | null }[] = [];
-
-  allCells.forEach(cell => {
-    const id = cell.getAttribute('id');
-    const parent = cell.getAttribute('parent');
-    const isEdge = cell.getAttribute('edge') === '1';
-
-    // Check for duplicate IDs
-    if (id) {
-      if (cellIds.has(id)) {
-        duplicateIds.push(id);
-      } else {
-        cellIds.add(id);
-      }
+    // Check for XML parsing errors (includes unescaped special characters)
+    const parseError = doc.querySelector("parsererror")
+    if (parseError) {
+        return `Invalid XML: The XML contains syntax errors (likely unescaped special characters like <, >, & in attribute values). Please escape special characters: use &lt; for <, &gt; for >, &amp; for &, &quot; for ". Regenerate the diagram with properly escaped values.`
     }
 
-    // Check for nested mxCell (parent element is also mxCell)
-    if (cell.parentElement?.tagName === 'mxCell') {
-      nestedCells.push(id || 'unknown');
+    // Get all mxCell elements once for all validations
+    const allCells = doc.querySelectorAll("mxCell")
+
+    // Single pass: collect IDs, check for duplicates, nesting, orphans, and invalid parents
+    const cellIds = new Set<string>()
+    const duplicateIds: string[] = []
+    const nestedCells: string[] = []
+    const orphanCells: string[] = []
+    const invalidParents: { id: string; parent: string }[] = []
+    const edgesToValidate: {
+        id: string
+        source: string | null
+        target: string | null
+    }[] = []
+
+    allCells.forEach((cell) => {
+        const id = cell.getAttribute("id")
+        const parent = cell.getAttribute("parent")
+        const isEdge = cell.getAttribute("edge") === "1"
+
+        // Check for duplicate IDs
+        if (id) {
+            if (cellIds.has(id)) {
+                duplicateIds.push(id)
+            } else {
+                cellIds.add(id)
+            }
+        }
+
+        // Check for nested mxCell (parent element is also mxCell)
+        if (cell.parentElement?.tagName === "mxCell") {
+            nestedCells.push(id || "unknown")
+        }
+
+        // Check parent attribute (skip root cell id="0")
+        if (id !== "0") {
+            if (!parent) {
+                if (id) orphanCells.push(id)
+            } else {
+                // Store for later validation (after all IDs collected)
+                invalidParents.push({ id: id || "unknown", parent })
+            }
+        }
+
+        // Collect edges for connection validation
+        if (isEdge) {
+            edgesToValidate.push({
+                id: id || "unknown",
+                source: cell.getAttribute("source"),
+                target: cell.getAttribute("target"),
+            })
+        }
+    })
+
+    // Return errors in priority order
+    if (nestedCells.length > 0) {
+        return `Invalid XML: Found nested mxCell elements (IDs: ${nestedCells.slice(0, 3).join(", ")}). All mxCell elements must be direct children of <root>, never nested inside other mxCell elements. Please regenerate the diagram with correct structure.`
     }
 
-    // Check parent attribute (skip root cell id="0")
-    if (id !== '0') {
-      if (!parent) {
-        if (id) orphanCells.push(id);
-      } else {
-        // Store for later validation (after all IDs collected)
-        invalidParents.push({ id: id || 'unknown', parent });
-      }
+    if (duplicateIds.length > 0) {
+        return `Invalid XML: Found duplicate cell IDs (${duplicateIds.slice(0, 3).join(", ")}). Each mxCell must have a unique ID. Please regenerate the diagram with unique IDs for all elements.`
     }
 
-    // Collect edges for connection validation
-    if (isEdge) {
-      edgesToValidate.push({
-        id: id || 'unknown',
-        source: cell.getAttribute('source'),
-        target: cell.getAttribute('target')
-      });
+    if (orphanCells.length > 0) {
+        return `Invalid XML: Found cells without parent attribute (IDs: ${orphanCells.slice(0, 3).join(", ")}). All mxCell elements (except id="0") must have a parent attribute. Please regenerate the diagram with proper parent references.`
     }
-  });
 
-  // Return errors in priority order
-  if (nestedCells.length > 0) {
-    return `Invalid XML: Found nested mxCell elements (IDs: ${nestedCells.slice(0, 3).join(', ')}). All mxCell elements must be direct children of <root>, never nested inside other mxCell elements. Please regenerate the diagram with correct structure.`;
-  }
-
-  if (duplicateIds.length > 0) {
-    return `Invalid XML: Found duplicate cell IDs (${duplicateIds.slice(0, 3).join(', ')}). Each mxCell must have a unique ID. Please regenerate the diagram with unique IDs for all elements.`;
-  }
-
-  if (orphanCells.length > 0) {
-    return `Invalid XML: Found cells without parent attribute (IDs: ${orphanCells.slice(0, 3).join(', ')}). All mxCell elements (except id="0") must have a parent attribute. Please regenerate the diagram with proper parent references.`;
-  }
-
-  // Validate parent references (now that all IDs are collected)
-  const badParents = invalidParents.filter(p => !cellIds.has(p.parent));
-  if (badParents.length > 0) {
-    const details = badParents.slice(0, 3).map(p => `${p.id} (parent: ${p.parent})`).join(', ');
-    return `Invalid XML: Found cells with invalid parent references (${details}). Parent IDs must reference existing cells. Please regenerate the diagram with valid parent references.`;
-  }
-
-  // Validate edge connections
-  const invalidConnections: string[] = [];
-  edgesToValidate.forEach(edge => {
-    if (edge.source && !cellIds.has(edge.source)) {
-      invalidConnections.push(`${edge.id} (source: ${edge.source})`);
+    // Validate parent references (now that all IDs are collected)
+    const badParents = invalidParents.filter((p) => !cellIds.has(p.parent))
+    if (badParents.length > 0) {
+        const details = badParents
+            .slice(0, 3)
+            .map((p) => `${p.id} (parent: ${p.parent})`)
+            .join(", ")
+        return `Invalid XML: Found cells with invalid parent references (${details}). Parent IDs must reference existing cells. Please regenerate the diagram with valid parent references.`
     }
-    if (edge.target && !cellIds.has(edge.target)) {
-      invalidConnections.push(`${edge.id} (target: ${edge.target})`);
+
+    // Validate edge connections
+    const invalidConnections: string[] = []
+    edgesToValidate.forEach((edge) => {
+        if (edge.source && !cellIds.has(edge.source)) {
+            invalidConnections.push(`${edge.id} (source: ${edge.source})`)
+        }
+        if (edge.target && !cellIds.has(edge.target)) {
+            invalidConnections.push(`${edge.id} (target: ${edge.target})`)
+        }
+    })
+
+    if (invalidConnections.length > 0) {
+        return `Invalid XML: Found edges with invalid source/target references (${invalidConnections.slice(0, 3).join(", ")}). Edge source and target must reference existing cell IDs. Please regenerate the diagram with valid edge connections.`
     }
-  });
 
-  if (invalidConnections.length > 0) {
-    return `Invalid XML: Found edges with invalid source/target references (${invalidConnections.slice(0, 3).join(', ')}). Edge source and target must reference existing cell IDs. Please regenerate the diagram with valid edge connections.`;
-  }
-
-  return null;
+    return null
 }
 
 export function extractDiagramXML(xml_svg_string: string): string {
-  try {
-    // 1. Parse the SVG string (using built-in DOMParser in a browser-like environment)
-    const svgString = atob(xml_svg_string.slice(26));
-    const parser = new DOMParser();
-    const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
-    const svgElement = svgDoc.querySelector('svg');
+    try {
+        // 1. Parse the SVG string (using built-in DOMParser in a browser-like environment)
+        const svgString = atob(xml_svg_string.slice(26))
+        const parser = new DOMParser()
+        const svgDoc = parser.parseFromString(svgString, "image/svg+xml")
+        const svgElement = svgDoc.querySelector("svg")
 
-    if (!svgElement) {
-      throw new Error("No SVG element found in the input string.");
+        if (!svgElement) {
+            throw new Error("No SVG element found in the input string.")
+        }
+        // 2. Extract the 'content' attribute
+        const encodedContent = svgElement.getAttribute("content")
+
+        if (!encodedContent) {
+            throw new Error("SVG element does not have a 'content' attribute.")
+        }
+
+        // 3. Decode HTML entities (using a minimal function)
+        function decodeHtmlEntities(str: string) {
+            const textarea = document.createElement("textarea") // Use built-in element
+            textarea.innerHTML = str
+            return textarea.value
+        }
+        const xmlContent = decodeHtmlEntities(encodedContent)
+
+        // 4. Parse the XML content
+        const xmlDoc = parser.parseFromString(xmlContent, "text/xml")
+        const diagramElement = xmlDoc.querySelector("diagram")
+
+        if (!diagramElement) {
+            throw new Error("No diagram element found")
+        }
+        // 5. Extract base64 encoded data
+        const base64EncodedData = diagramElement.textContent
+
+        if (!base64EncodedData) {
+            throw new Error("No encoded data found in the diagram element")
+        }
+
+        // 6. Decode base64 data
+        const binaryString = atob(base64EncodedData)
+
+        // 7. Convert binary string to Uint8Array
+        const len = binaryString.length
+        const bytes = new Uint8Array(len)
+        for (let i = 0; i < len; i++) {
+            bytes[i] = binaryString.charCodeAt(i)
+        }
+
+        // 8. Decompress data using pako (equivalent to zlib.decompress with wbits=-15)
+        const decompressedData = pako.inflate(bytes, { windowBits: -15 })
+
+        // 9. Convert the decompressed data to a string
+        const decoder = new TextDecoder("utf-8")
+        const decodedString = decoder.decode(decompressedData)
+
+        // Decode URL-encoded content (equivalent to Python's urllib.parse.unquote)
+        const urlDecodedString = decodeURIComponent(decodedString)
+
+        return urlDecodedString
+    } catch (error) {
+        console.error("Error extracting diagram XML:", error)
+        throw error // Re-throw for caller handling
     }
-    // 2. Extract the 'content' attribute
-    const encodedContent = svgElement.getAttribute('content');
-
-    if (!encodedContent) {
-      throw new Error("SVG element does not have a 'content' attribute.");
-    }
-
-    // 3. Decode HTML entities (using a minimal function)
-    function decodeHtmlEntities(str: string) {
-      const textarea = document.createElement('textarea'); // Use built-in element
-      textarea.innerHTML = str;
-      return textarea.value;
-    }
-    const xmlContent = decodeHtmlEntities(encodedContent);
-
-    // 4. Parse the XML content
-    const xmlDoc = parser.parseFromString(xmlContent, "text/xml");
-    const diagramElement = xmlDoc.querySelector('diagram');
-
-    if (!diagramElement) {
-      throw new Error("No diagram element found");
-    }
-    // 5. Extract base64 encoded data
-    const base64EncodedData = diagramElement.textContent;
-
-    if (!base64EncodedData) {
-      throw new Error("No encoded data found in the diagram element");
-    }
-
-    // 6. Decode base64 data
-    const binaryString = atob(base64EncodedData);
-
-    // 7. Convert binary string to Uint8Array
-    const len = binaryString.length;
-    const bytes = new Uint8Array(len);
-    for (let i = 0; i < len; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
-    }
-
-    // 8. Decompress data using pako (equivalent to zlib.decompress with wbits=-15)
-    const decompressedData = pako.inflate(bytes, { windowBits: -15 });
-
-    // 9. Convert the decompressed data to a string
-    const decoder = new TextDecoder('utf-8');
-    const decodedString = decoder.decode(decompressedData);
-
-    // Decode URL-encoded content (equivalent to Python's urllib.parse.unquote)
-    const urlDecodedString = decodeURIComponent(decodedString);
-
-    return urlDecodedString;
-
-  } catch (error) {
-    console.error("Error extracting diagram XML:", error);
-    throw error; // Re-throw for caller handling
-  }
 }
diff --git a/next.config.ts b/next.config.ts
index 55238ac..8c0356a 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,8 +1,8 @@
-import type { NextConfig } from "next";
+import type { NextConfig } from "next"
 
 const nextConfig: NextConfig = {
-  /* config options here */
-  output: 'standalone',
-};
+    /* config options here */
+    output: "standalone",
+}
 
-export default nextConfig;
+export default nextConfig
diff --git a/package-lock.json b/package-lock.json
index 2043b6f..30570e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
                 "zod": "^4.1.12"
             },
             "devDependencies": {
+                "@biomejs/biome": "2.3.8",
                 "@tailwindcss/postcss": "^4",
                 "@tailwindcss/typography": "^0.5.19",
                 "@types/node": "^20",
@@ -61,6 +62,8 @@
                 "@types/react-dom": "^19",
                 "eslint": "9.39.1",
                 "eslint-config-next": "16.0.5",
+                "husky": "^9.1.7",
+                "lint-staged": "^16.2.7",
                 "tailwindcss": "^4",
                 "typescript": "^5"
             }
@@ -1452,6 +1455,169 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@biomejs/biome": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.3.8.tgz",
+            "integrity": "sha512-Qjsgoe6FEBxWAUzwFGFrB+1+M8y/y5kwmg5CHac+GSVOdmOIqsAiXM5QMVGZJ1eCUCLlPZtq4aFAQ0eawEUuUA==",
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "bin": {
+                "biome": "bin/biome"
+            },
+            "engines": {
+                "node": ">=14.21.3"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/biome"
+            },
+            "optionalDependencies": {
+                "@biomejs/cli-darwin-arm64": "2.3.8",
+                "@biomejs/cli-darwin-x64": "2.3.8",
+                "@biomejs/cli-linux-arm64": "2.3.8",
+                "@biomejs/cli-linux-arm64-musl": "2.3.8",
+                "@biomejs/cli-linux-x64": "2.3.8",
+                "@biomejs/cli-linux-x64-musl": "2.3.8",
+                "@biomejs/cli-win32-arm64": "2.3.8",
+                "@biomejs/cli-win32-x64": "2.3.8"
+            }
+        },
+        "node_modules/@biomejs/cli-darwin-arm64": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.3.8.tgz",
+            "integrity": "sha512-HM4Zg9CGQ3txTPflxD19n8MFPrmUAjaC7PQdLkugeeC0cQ+PiVrd7i09gaBS/11QKsTDBJhVg85CEIK9f50Qww==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
+        "node_modules/@biomejs/cli-darwin-x64": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.3.8.tgz",
+            "integrity": "sha512-lUDQ03D7y/qEao7RgdjWVGCu+BLYadhKTm40HkpJIi6kn8LSv5PAwRlew/DmwP4YZ9ke9XXoTIQDO1vAnbRZlA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
+        "node_modules/@biomejs/cli-linux-arm64": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.3.8.tgz",
+            "integrity": "sha512-Uo1OJnIkJgSgF+USx970fsM/drtPcQ39I+JO+Fjsaa9ZdCN1oysQmy6oAGbyESlouz+rzEckLTF6DS7cWse95g==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
+        "node_modules/@biomejs/cli-linux-arm64-musl": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.3.8.tgz",
+            "integrity": "sha512-PShR4mM0sjksUMyxbyPNMxoKFPVF48fU8Qe8Sfx6w6F42verbwRLbz+QiKNiDPRJwUoMG1nPM50OBL3aOnTevA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
+        "node_modules/@biomejs/cli-linux-x64": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.3.8.tgz",
+            "integrity": "sha512-QDPMD5bQz6qOVb3kiBui0zKZXASLo0NIQ9JVJio5RveBEFgDgsvJFUvZIbMbUZT3T00M/1wdzwWXk4GIh0KaAw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
+        "node_modules/@biomejs/cli-linux-x64-musl": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.3.8.tgz",
+            "integrity": "sha512-YGLkqU91r1276uwSjiUD/xaVikdxgV1QpsicT0bIA1TaieM6E5ibMZeSyjQ/izBn4tKQthUSsVZacmoJfa3pDA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
+        "node_modules/@biomejs/cli-win32-arm64": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.3.8.tgz",
+            "integrity": "sha512-H4IoCHvL1fXKDrTALeTKMiE7GGWFAraDwBYFquE/L/5r1927Te0mYIGseXi4F+lrrwhSWbSGt5qPFswNoBaCxg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
+        "node_modules/@biomejs/cli-win32-x64": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.3.8.tgz",
+            "integrity": "sha512-RguzimPoZWtBapfKhKjcWXBVI91tiSprqdBYu7tWhgN8pKRZhw24rFeNZTNf6UiBfjCYCi9eFQs/JzJZIhuK4w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT OR Apache-2.0",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">=14.21.3"
+            }
+        },
         "node_modules/@csstools/color-helpers": {
             "version": "5.0.2",
             "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.2.tgz",
@@ -5678,6 +5844,35 @@
                 "url": "https://github.com/sponsors/epoberezkin"
             }
         },
+        "node_modules/ansi-escapes": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.2.0.tgz",
+            "integrity": "sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "environment": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/ansi-regex": {
+            "version": "6.2.2",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+            "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+            }
+        },
         "node_modules/ansi-styles": {
             "version": "4.3.0",
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -6203,6 +6398,39 @@
                 "url": "https://polar.sh/cva"
             }
         },
+        "node_modules/cli-cursor": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+            "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "restore-cursor": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/cli-truncate": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.1.1.tgz",
+            "integrity": "sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "slice-ansi": "^7.1.0",
+                "string-width": "^8.0.0"
+            },
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/client-only": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -6238,6 +6466,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/colorette": {
+            "version": "2.0.20",
+            "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+            "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/combined-stream": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -6260,6 +6495,16 @@
                 "url": "https://github.com/sponsors/wooorm"
             }
         },
+        "node_modules/commander": {
+            "version": "14.0.2",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz",
+            "integrity": "sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            }
+        },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6588,6 +6833,19 @@
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
+        "node_modules/environment": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+            "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/es-abstract": {
             "version": "1.24.0",
             "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -7250,6 +7508,13 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/eventemitter3": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+            "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/eventsource-parser": {
             "version": "3.0.6",
             "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
@@ -7499,6 +7764,19 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/get-east-asian-width": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.4.0.tgz",
+            "integrity": "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/get-intrinsic": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -7841,6 +8119,22 @@
                 "node": ">= 14"
             }
         },
+        "node_modules/husky": {
+            "version": "9.1.7",
+            "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+            "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "husky": "bin.js"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/typicode"
+            }
+        },
         "node_modules/iconv-lite": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -8116,6 +8410,22 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/is-fullwidth-code-point": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+            "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "get-east-asian-width": "^1.3.1"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/is-generator-function": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -8829,6 +9139,49 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/lint-staged": {
+            "version": "16.2.7",
+            "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.2.7.tgz",
+            "integrity": "sha512-lDIj4RnYmK7/kXMya+qJsmkRFkGolciXjrsZ6PC25GdTfWOAWetR0ZbsNXRAj1EHHImRSalc+whZFg56F5DVow==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "commander": "^14.0.2",
+                "listr2": "^9.0.5",
+                "micromatch": "^4.0.8",
+                "nano-spawn": "^2.0.0",
+                "pidtree": "^0.6.0",
+                "string-argv": "^0.3.2",
+                "yaml": "^2.8.1"
+            },
+            "bin": {
+                "lint-staged": "bin/lint-staged.js"
+            },
+            "engines": {
+                "node": ">=20.17"
+            },
+            "funding": {
+                "url": "https://opencollective.com/lint-staged"
+            }
+        },
+        "node_modules/listr2": {
+            "version": "9.0.5",
+            "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+            "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cli-truncate": "^5.0.0",
+                "colorette": "^2.0.20",
+                "eventemitter3": "^5.0.1",
+                "log-update": "^6.1.0",
+                "rfdc": "^1.4.1",
+                "wrap-ansi": "^9.0.0"
+            },
+            "engines": {
+                "node": ">=20.0.0"
+            }
+        },
         "node_modules/locate-path": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -8852,6 +9205,26 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/log-update": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+            "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-escapes": "^7.0.0",
+                "cli-cursor": "^5.0.0",
+                "slice-ansi": "^7.1.0",
+                "strip-ansi": "^7.1.0",
+                "wrap-ansi": "^9.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/long": {
             "version": "5.3.2",
             "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
@@ -9794,6 +10167,19 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mimic-function": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+            "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -9832,6 +10218,19 @@
                 "mustache": "bin/mustache"
             }
         },
+        "node_modules/nano-spawn": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/nano-spawn/-/nano-spawn-2.0.0.tgz",
+            "integrity": "sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.17"
+            },
+            "funding": {
+                "url": "https://github.com/sindresorhus/nano-spawn?sponsor=1"
+            }
+        },
         "node_modules/nanoid": {
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -10122,6 +10521,22 @@
                 "zod": "^3.25.76 || ^4.1.8"
             }
         },
+        "node_modules/onetime": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+            "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mimic-function": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/optionator": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -10292,6 +10707,19 @@
                 "url": "https://github.com/sponsors/jonschlinkert"
             }
         },
+        "node_modules/pidtree": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+            "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "pidtree": "bin/pidtree.js"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
         "node_modules/possible-typed-array-names": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -10748,6 +11176,23 @@
                 "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
             }
         },
+        "node_modules/restore-cursor": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+            "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "onetime": "^7.0.0",
+                "signal-exit": "^4.1.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/reusify": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -10759,6 +11204,13 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/rfdc": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+            "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/rrweb-cssom": {
             "version": "0.8.0",
             "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
@@ -11074,6 +11526,49 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/signal-exit": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+            "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/slice-ansi": {
+            "version": "7.1.2",
+            "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+            "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^6.2.1",
+                "is-fullwidth-code-point": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+            }
+        },
+        "node_modules/slice-ansi/node_modules/ansi-styles": {
+            "version": "6.2.3",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+            "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
         "node_modules/sonner": {
             "version": "2.0.7",
             "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
@@ -11124,6 +11619,33 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/string-argv": {
+            "version": "0.3.2",
+            "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+            "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.6.19"
+            }
+        },
+        "node_modules/string-width": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz",
+            "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "get-east-asian-width": "^1.3.0",
+                "strip-ansi": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/string.prototype.includes": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -11251,6 +11773,22 @@
                 "url": "https://github.com/sponsors/wooorm"
             }
         },
+        "node_modules/strip-ansi": {
+            "version": "7.1.2",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
+            "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+            }
+        },
         "node_modules/strip-bom": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -12167,6 +12705,62 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/wrap-ansi": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+            "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^6.2.1",
+                "string-width": "^7.0.0",
+                "strip-ansi": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
+        "node_modules/wrap-ansi/node_modules/ansi-styles": {
+            "version": "6.2.3",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+            "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/wrap-ansi/node_modules/emoji-regex": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+            "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/wrap-ansi/node_modules/string-width": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+            "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "emoji-regex": "^10.3.0",
+                "get-east-asian-width": "^1.0.0",
+                "strip-ansi": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/ws": {
             "version": "8.18.1",
             "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz",
@@ -12210,6 +12804,22 @@
             "dev": true,
             "license": "ISC"
         },
+        "node_modules/yaml": {
+            "version": "2.8.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+            "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "yaml": "bin.mjs"
+            },
+            "engines": {
+                "node": ">= 14.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/eemeli"
+            }
+        },
         "node_modules/yocto-queue": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index c309603..1cbbd8a 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,10 @@
         "dev": "next dev --turbopack --port 6002",
         "build": "next build",
         "start": "next start --port 6001",
-        "lint": "next lint"
+        "lint": "biome lint .",
+        "format": "biome check --write .",
+        "check": "biome ci",
+        "prepare": "husky"
     },
     "dependencies": {
         "@ai-sdk/amazon-bedrock": "^3.0.62",
@@ -53,7 +56,14 @@
         "tailwindcss-animate": "^1.0.7",
         "zod": "^4.1.12"
     },
+    "lint-staged": {
+        "*.{js,ts,jsx,tsx,json,css}": [
+            "biome check --write --no-errors-on-unmatched",
+            "biome check --no-errors-on-unmatched"
+        ]
+    },
     "devDependencies": {
+        "@biomejs/biome": "2.3.8",
         "@tailwindcss/postcss": "^4",
         "@tailwindcss/typography": "^0.5.19",
         "@types/node": "^20",
@@ -62,6 +72,8 @@
         "@types/react-dom": "^19",
         "eslint": "9.39.1",
         "eslint-config-next": "16.0.5",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.2.7",
         "tailwindcss": "^4",
         "typescript": "^5"
     }
diff --git a/postcss.config.mjs b/postcss.config.mjs
index c7bcb4b..7e81f5c 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,5 +1,5 @@
 const config = {
-  plugins: ["@tailwindcss/postcss"],
-};
+    plugins: ["@tailwindcss/postcss"],
+}
 
-export default config;
+export default config
diff --git a/tsconfig.json b/tsconfig.json
index e7ff3a2..b176298 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,41 +1,33 @@
 {
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
+    "compilerOptions": {
+        "target": "ES2017",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx",
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ],
+        "paths": {
+            "@/*": ["./*"]
+        }
+    },
+    "include": [
+        "next-env.d.ts",
+        "**/*.ts",
+        "**/*.tsx",
+        ".next/types/**/*.ts",
+        ".next/dev/types/**/*.ts"
     ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": [
-        "./*"
-      ]
-    }
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    ".next/dev/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+    "exclude": ["node_modules"]
 }