diff --git a/frontend/.gitignore b/frontend/.gitignore
index 1a0009e8..c24a8359 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -21,8 +21,6 @@ next-env.d.ts
 # production
 /build
 
-docs
-
 # misc
 .DS_Store
 *.pem
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
index f06ac9c4..19bd6ebc 100644
--- a/frontend/.vscode/settings.json
+++ b/frontend/.vscode/settings.json
@@ -1,67 +1,3 @@
 {
-  "window.title": "${activeEditorShort}${separator}${separator}deer-flow/frontend",
-  "todo-tree.regex.regex": "((%|#|//|<!--|\\{/\\*|^\\s*\\*)\\s*($TAGS)|^\\s*- \\[ \\])",
-  "todo-tree.general.tags": [
-    "TODO:",
-    "BUG:",
-    "TAG:",
-    "DONE:",
-    "MARK:",
-    "TEST:",
-    "XXX:"
-  ],
-  "todo-tree.regex.regexCaseSensitive": false,
-  "todo-tree.highlights.defaultHighlight": {
-    "foreground": "#000000",
-    "background": "#fff700",
-    "icon": "check",
-    "rulerColour": "#fff700",
-    "type": "tag",
-    "iconColour": "#fff700"
-  },
-  "todo-tree.highlights.customHighlight": {
-    "TODO:": {
-      "icon": "todo",
-      "background": "#fff700",
-      "rulerColour": "#fff700",
-      "iconColour": "#fff700"
-    },
-    "BUG:": {
-      "background": "#eb5c5c",
-      "icon": "bug",
-      "rulerColour": "#eb5c5c",
-      "iconColour": "#eb5c5c"
-    },
-    "TAG:": {
-      "background": "#38b2f4",
-      "icon": "tag",
-      "rulerColour": "#38b2f4",
-      "iconColour": "#38b2f4",
-      "rulerLane": "full"
-    },
-    "DONE:": {
-      "background": "#5eec95",
-      "icon": "check",
-      "rulerColour": "#5eec95",
-      "iconColour": "#5eec95"
-    },
-    "MARK:": {
-      "background": "#f90",
-      "icon": "note",
-      "rulerColour": "#f90",
-      "iconColour": "#f90"
-    },
-    "TEST:": {
-      "background": "#df7be6",
-      "icon": "flame",
-      "rulerColour": "#df7be6",
-      "iconColour": "#df7be6"
-    },
-    "XXX:": {
-      "background": "#d65d8e",
-      "icon": "versions",
-      "rulerColour": "#d65d8e",
-      "iconColour": "#d65d8e"
-    }
-  }
+  "window.title": "${activeEditorShort}${separator}${separator}deer-flow/frontend"
 }
diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md
index 618d2158..0aad01bf 100644
--- a/frontend/AGENTS.md
+++ b/frontend/AGENTS.md
@@ -76,6 +76,12 @@ src/
 - **MagicUI** - Magic UI components
 - **React Bits** - React bits components
 
+### Interaction Ownership
+
+- `src/app/workspace/chats/[thread_id]/page.tsx` owns composer busy-state wiring.
+- `src/core/threads/hooks.ts` owns pre-submit upload state and thread submission.
+- `src/hooks/usePoseStream.ts` is a passive store selector; global WebSocket lifecycle stays in `App.tsx`.
+
 ## Resources
 
 - [LangGraph Documentation](https://langchain-ai.github.io/langgraph/)
diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 941945fd..9f37b4ec 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -1,22 +1,49 @@
-# Frontend Development Dockerfile
-FROM node:22-alpine
+# Frontend Dockerfile
+# Supports two targets:
+#   --target dev   — install deps only, run `pnpm dev` at container start
+#   --target prod  — full build baked in, run `pnpm start` at container start (default if no --target is specified)
 
-# Accept build argument for pnpm store path
 ARG PNPM_STORE_PATH=/root/.local/share/pnpm/store
 
-# Install pnpm at specific version (matching package.json)
-RUN corepack enable && corepack install -g pnpm@10.26.2
-
+# ── Base: shared setup ────────────────────────────────────────────────────────
+FROM node:22-alpine AS base
+ARG PNPM_STORE_PATH
+ARG NPM_REGISTRY
+# Configure corepack registry before installing pnpm so the download itself
+# succeeds in restricted networks (COREPACK_NPM_REGISTRY controls where
+# corepack fetches package managers from).
+RUN if [ -n "${NPM_REGISTRY}" ]; then \
+      export COREPACK_NPM_REGISTRY="${NPM_REGISTRY}"; \
+    fi && \
+    corepack enable && corepack install -g pnpm@10.26.2
 RUN pnpm config set store-dir ${PNPM_STORE_PATH}
-
-# Set working directory
+# Optionally override npm registry for restricted networks (e.g. NPM_REGISTRY=https://registry.npmmirror.com)
+RUN if [ -n "${NPM_REGISTRY}" ]; then pnpm config set registry "${NPM_REGISTRY}"; fi
 WORKDIR /app
-
-# Copy frontend source code
 COPY frontend ./frontend
 
-# Install dependencies
-RUN sh -c "cd /app/frontend && pnpm install --frozen-lockfile"
-
-# Expose Next.js dev server port
+# ── Dev: install only, CMD is overridden by docker-compose ───────────────────
+FROM base AS dev
+RUN cd /app/frontend && pnpm install --frozen-lockfile
 EXPOSE 3000
+
+# ── Builder: install + compile Next.js ───────────────────────────────────────
+FROM base AS builder
+RUN cd /app/frontend && pnpm install --frozen-lockfile
+# Skip env validation — runtime vars are injected by nginx/container
+RUN cd /app/frontend && SKIP_ENV_VALIDATION=1 pnpm build
+
+# ── Prod: minimal runtime with pre-built output ───────────────────────────────
+FROM node:22-alpine AS prod
+ARG PNPM_STORE_PATH
+ARG NPM_REGISTRY
+RUN if [ -n "${NPM_REGISTRY}" ]; then \
+      export COREPACK_NPM_REGISTRY="${NPM_REGISTRY}"; \
+    fi && \
+    corepack enable && corepack install -g pnpm@10.26.2
+RUN pnpm config set store-dir ${PNPM_STORE_PATH}
+RUN if [ -n "${NPM_REGISTRY}" ]; then pnpm config set registry "${NPM_REGISTRY}"; fi
+WORKDIR /app
+COPY --from=builder /app/frontend ./frontend
+EXPOSE 3000
+CMD ["sh", "-c", "cd /app/frontend && pnpm start"]
diff --git a/frontend/Dockerfile.prod b/frontend/Dockerfile.prod
deleted file mode 100644
index e913acd2..00000000
--- a/frontend/Dockerfile.prod
+++ /dev/null
@@ -1,18 +0,0 @@
-# --------------- 构建阶段 ---------------
-FROM node:22-alpine AS builder
-ENV NODE_ENV=production
-ARG PNPM_STORE_PATH=/root/.local/share/pnpm/store
-ENV BETTER_AUTH_SECRET=any-random-string-123456
-
-RUN corepack enable && corepack install -g pnpm@10.26.2
-RUN pnpm config set store-dir ${PNPM_STORE_PATH}
-
-WORKDIR /app
-
-COPY frontend/ .
-RUN pnpm install --frozen-lockfile
-
-RUN pnpm build
-
-EXPOSE 3000
-CMD ["pnpm", "start"]
\ No newline at end of file
diff --git a/frontend/README.md b/frontend/README.md
index 77a890e0..a7ded3cb 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -41,6 +41,12 @@ pnpm dev
 # Type check
 pnpm typecheck
 
+# Check formatting
+pnpm format
+
+# Apply formatting
+pnpm format:write
+
 # Lint
 pnpm lint
 
@@ -101,8 +107,8 @@ src/
 │   └── utils/              # Utility functions
 ├── hooks/                  # Custom React hooks
 ├── lib/                    # Shared libraries & utilities
-├── server/                 # Server-side code (Not available yet)
-│   └── better-auth/        # Authentication setup (Not available yet)
+├── server/                 # Server-side code
+│   └── better-auth/        # Authentication setup and session helpers
 └── styles/                 # Global styles
 ```
 
@@ -113,6 +119,8 @@ src/
 | `pnpm dev` | Start development server with Turbopack |
 | `pnpm build` | Build for production |
 | `pnpm start` | Start production server |
+| `pnpm format` | Check formatting with Prettier |
+| `pnpm format:write` | Apply formatting with Prettier |
 | `pnpm lint` | Run ESLint |
 | `pnpm lint:fix` | Fix ESLint issues |
 | `pnpm typecheck` | Run TypeScript type checking |
diff --git a/frontend/package.json b/frontend/package.json
index d1f35acb..33bfe683 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,10 +6,10 @@
   "scripts": {
     "demo:save": "node scripts/save-demo.js",
     "build": "next build",
-    "check": "next lint && tsc --noEmit",
+    "check": "eslint . --ext .ts,.tsx && tsc --noEmit",
     "dev": "next dev --turbo",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format": "prettier --check .",
+    "format:write": "prettier --write .",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint . --ext .ts,.tsx --fix",
     "preview": "next build && next start",
@@ -59,18 +59,15 @@
     "cmdk": "^1.1.1",
     "codemirror": "^6.0.2",
     "date-fns": "^4.1.0",
-    "docx": "^9.6.1",
     "dotenv": "^17.2.3",
     "embla-carousel-react": "^8.6.0",
     "gsap": "^3.13.0",
     "hast": "^1.0.0",
-    "html2pdf.js": "^0.14.0",
     "katex": "^0.16.28",
     "lucide-react": "^0.562.0",
-    "marked": "^17.0.5",
     "motion": "^12.26.2",
     "nanoid": "^5.1.6",
-    "next": "^16.1.4",
+    "next": "^16.1.7",
     "next-themes": "^0.4.6",
     "nuxt-og-image": "^5.1.13",
     "ogl": "^1.0.11",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index b6011dbb..f409b969 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -115,7 +115,7 @@ importers:
         version: 1.2.1
       better-auth:
         specifier: ^1.3
-        version: 1.4.18(next@16.1.6(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vue@3.5.28(typescript@5.9.3))
+        version: 1.4.18(next@16.1.7(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vue@3.5.28(typescript@5.9.3))
       canvas-confetti:
         specifier: ^1.9.4
         version: 1.9.4
@@ -134,9 +134,6 @@ importers:
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
-      docx:
-        specifier: ^9.6.1
-        version: 9.6.1
       dotenv:
         specifier: ^17.2.3
         version: 17.2.4
@@ -149,18 +146,12 @@ importers:
       hast:
         specifier: ^1.0.0
         version: 1.0.0
-      html2pdf.js:
-        specifier: ^0.14.0
-        version: 0.14.0
       katex:
         specifier: ^0.16.28
         version: 0.16.28
       lucide-react:
         specifier: ^0.562.0
         version: 0.562.0(react@19.2.4)
-      marked:
-        specifier: ^17.0.5
-        version: 17.0.5
       motion:
         specifier: ^12.26.2
         version: 12.34.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -168,8 +159,8 @@ importers:
         specifier: ^5.1.6
         version: 5.1.6
       next:
-        specifier: ^16.1.4
-        version: 16.1.6(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+        specifier: ^16.1.7
+        version: 16.1.7(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
         version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -307,8 +298,8 @@ packages:
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.29.0':
-    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+  '@babel/parser@7.29.2':
+    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -458,164 +449,164 @@ packages:
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
 
-  '@emnapi/runtime@1.8.1':
-    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+  '@emnapi/runtime@1.9.0':
+    resolution: {integrity: sha512-QN75eB0IH2ywSpRpNddCRfQIhmJYBCJ1x5Lb3IscKAL8bMnVAKnRg8dCoXbHzVLLH7P38N2Z3mtulB7W0J0FKw==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
-  '@esbuild/aix-ppc64@0.27.3':
-    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+  '@esbuild/aix-ppc64@0.27.4':
+    resolution: {integrity: sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.27.3':
-    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+  '@esbuild/android-arm64@0.27.4':
+    resolution: {integrity: sha512-gdLscB7v75wRfu7QSm/zg6Rx29VLdy9eTr2t44sfTW7CxwAtQghZ4ZnqHk3/ogz7xao0QAgrkradbBzcqFPasw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.27.3':
-    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+  '@esbuild/android-arm@0.27.4':
+    resolution: {integrity: sha512-X9bUgvxiC8CHAGKYufLIHGXPJWnr0OCdR0anD2e21vdvgCI8lIfqFbnoeOz7lBjdrAGUhqLZLcQo6MLhTO2DKQ==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.27.3':
-    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+  '@esbuild/android-x64@0.27.4':
+    resolution: {integrity: sha512-PzPFnBNVF292sfpfhiyiXCGSn9HZg5BcAz+ivBuSsl6Rk4ga1oEXAamhOXRFyMcjwr2DVtm40G65N3GLeH1Lvw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.27.3':
-    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+  '@esbuild/darwin-arm64@0.27.4':
+    resolution: {integrity: sha512-b7xaGIwdJlht8ZFCvMkpDN6uiSmnxxK56N2GDTMYPr2/gzvfdQN8rTfBsvVKmIVY/X7EM+/hJKEIbbHs9oA4tQ==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.27.3':
-    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+  '@esbuild/darwin-x64@0.27.4':
+    resolution: {integrity: sha512-sR+OiKLwd15nmCdqpXMnuJ9W2kpy0KigzqScqHI3Hqwr7IXxBp3Yva+yJwoqh7rE8V77tdoheRYataNKL4QrPw==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.27.3':
-    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+  '@esbuild/freebsd-arm64@0.27.4':
+    resolution: {integrity: sha512-jnfpKe+p79tCnm4GVav68A7tUFeKQwQyLgESwEAUzyxk/TJr4QdGog9sqWNcUbr/bZt/O/HXouspuQDd9JxFSw==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.27.3':
-    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+  '@esbuild/freebsd-x64@0.27.4':
+    resolution: {integrity: sha512-2kb4ceA/CpfUrIcTUl1wrP/9ad9Atrp5J94Lq69w7UwOMolPIGrfLSvAKJp0RTvkPPyn6CIWrNy13kyLikZRZQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.27.3':
-    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+  '@esbuild/linux-arm64@0.27.4':
+    resolution: {integrity: sha512-7nQOttdzVGth1iz57kxg9uCz57dxQLHWxopL6mYuYthohPKEK0vU0C3O21CcBK6KDlkYVcnDXY099HcCDXd9dA==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.27.3':
-    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+  '@esbuild/linux-arm@0.27.4':
+    resolution: {integrity: sha512-aBYgcIxX/wd5n2ys0yESGeYMGF+pv6g0DhZr3G1ZG4jMfruU9Tl1i2Z+Wnj9/KjGz1lTLCcorqE2viePZqj4Eg==}
     engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.27.3':
-    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+  '@esbuild/linux-ia32@0.27.4':
+    resolution: {integrity: sha512-oPtixtAIzgvzYcKBQM/qZ3R+9TEUd1aNJQu0HhGyqtx6oS7qTpvjheIWBbes4+qu1bNlo2V4cbkISr8q6gRBFA==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.27.3':
-    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+  '@esbuild/linux-loong64@0.27.4':
+    resolution: {integrity: sha512-8mL/vh8qeCoRcFH2nM8wm5uJP+ZcVYGGayMavi8GmRJjuI3g1v6Z7Ni0JJKAJW+m0EtUuARb6Lmp4hMjzCBWzA==}
     engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.27.3':
-    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+  '@esbuild/linux-mips64el@0.27.4':
+    resolution: {integrity: sha512-1RdrWFFiiLIW7LQq9Q2NES+HiD4NyT8Itj9AUeCl0IVCA459WnPhREKgwrpaIfTOe+/2rdntisegiPWn/r/aAw==}
     engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.27.3':
-    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+  '@esbuild/linux-ppc64@0.27.4':
+    resolution: {integrity: sha512-tLCwNG47l3sd9lpfyx9LAGEGItCUeRCWeAx6x2Jmbav65nAwoPXfewtAdtbtit/pJFLUWOhpv0FpS6GQAmPrHA==}
     engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.27.3':
-    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+  '@esbuild/linux-riscv64@0.27.4':
+    resolution: {integrity: sha512-BnASypppbUWyqjd1KIpU4AUBiIhVr6YlHx/cnPgqEkNoVOhHg+YiSVxM1RLfiy4t9cAulbRGTNCKOcqHrEQLIw==}
     engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.27.3':
-    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+  '@esbuild/linux-s390x@0.27.4':
+    resolution: {integrity: sha512-+eUqgb/Z7vxVLezG8bVB9SfBie89gMueS+I0xYh2tJdw3vqA/0ImZJ2ROeWwVJN59ihBeZ7Tu92dF/5dy5FttA==}
     engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.27.3':
-    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+  '@esbuild/linux-x64@0.27.4':
+    resolution: {integrity: sha512-S5qOXrKV8BQEzJPVxAwnryi2+Iq5pB40gTEIT69BQONqR7JH1EPIcQ/Uiv9mCnn05jff9umq/5nqzxlqTOg9NA==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-arm64@0.27.3':
-    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+  '@esbuild/netbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-xHT8X4sb0GS8qTqiwzHqpY00C95DPAq7nAwX35Ie/s+LO9830hrMd3oX0ZMKLvy7vsonee73x0lmcdOVXFzd6Q==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
-  '@esbuild/netbsd-x64@0.27.3':
-    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+  '@esbuild/netbsd-x64@0.27.4':
+    resolution: {integrity: sha512-RugOvOdXfdyi5Tyv40kgQnI0byv66BFgAqjdgtAKqHoZTbTF2QqfQrFwa7cHEORJf6X2ht+l9ABLMP0dnKYsgg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-arm64@0.27.3':
-    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+  '@esbuild/openbsd-arm64@0.27.4':
+    resolution: {integrity: sha512-2MyL3IAaTX+1/qP0O1SwskwcwCoOI4kV2IBX1xYnDDqthmq5ArrW94qSIKCAuRraMgPOmG0RDTA74mzYNQA9ow==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
-  '@esbuild/openbsd-x64@0.27.3':
-    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+  '@esbuild/openbsd-x64@0.27.4':
+    resolution: {integrity: sha512-u8fg/jQ5aQDfsnIV6+KwLOf1CmJnfu1ShpwqdwC0uA7ZPwFws55Ngc12vBdeUdnuWoQYx/SOQLGDcdlfXhYmXQ==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/openharmony-arm64@0.27.3':
-    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+  '@esbuild/openharmony-arm64@0.27.4':
+    resolution: {integrity: sha512-JkTZrl6VbyO8lDQO3yv26nNr2RM2yZzNrNHEsj9bm6dOwwu9OYN28CjzZkH57bh4w0I2F7IodpQvUAEd1mbWXg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
-  '@esbuild/sunos-x64@0.27.3':
-    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+  '@esbuild/sunos-x64@0.27.4':
+    resolution: {integrity: sha512-/gOzgaewZJfeJTlsWhvUEmUG4tWEY2Spp5M20INYRg2ZKl9QPO3QEEgPeRtLjEWSW8FilRNacPOg8R1uaYkA6g==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.27.3':
-    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+  '@esbuild/win32-arm64@0.27.4':
+    resolution: {integrity: sha512-Z9SExBg2y32smoDQdf1HRwHRt6vAHLXcxD2uGgO/v2jK7Y718Ix4ndsbNMU/+1Qiem9OiOdaqitioZwxivhXYg==}
     engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.27.3':
-    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+  '@esbuild/win32-ia32@0.27.4':
+    resolution: {integrity: sha512-DAyGLS0Jz5G5iixEbMHi5KdiApqHBWMGzTtMiJ72ZOLhbu/bzxgAe8Ue8CTS3n3HbIUHQz/L51yMdGMeoxXNJw==}
     engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.27.3':
-    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+  '@esbuild/win32-x64@0.27.4':
+    resolution: {integrity: sha512-+knoa0BDoeXgkNvvV1vvbZX4+hizelrkwmGJBdT17t8FNPwG2lKemmuMZlmaNQ3ws3DKKCxpb4zRZEIp3UxFCg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
@@ -695,8 +686,8 @@ packages:
   '@iconify/utils@3.1.0':
     resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
 
-  '@img/colour@1.0.0':
-    resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
+  '@img/colour@1.1.0':
+    resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
 
   '@img/sharp-darwin-arm64@0.34.5':
@@ -926,56 +917,56 @@ packages:
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
-  '@next/env@16.1.6':
-    resolution: {integrity: sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==}
+  '@next/env@16.1.7':
+    resolution: {integrity: sha512-rJJbIdJB/RQr2F1nylZr/PJzamvNNhfr3brdKP6s/GW850jbtR70QlSfFselvIBbcPUOlQwBakexjFzqLzF6pg==}
 
   '@next/eslint-plugin-next@15.5.12':
     resolution: {integrity: sha512-+ZRSDFTv4aC96aMb5E41rMjysx8ApkryevnvEYZvPZO52KvkqP5rNExLUXJFr9P4s0f3oqNQR6vopCZsPWKDcQ==}
 
-  '@next/swc-darwin-arm64@16.1.6':
-    resolution: {integrity: sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==}
+  '@next/swc-darwin-arm64@16.1.7':
+    resolution: {integrity: sha512-b2wWIE8sABdyafc4IM8r5Y/dS6kD80JRtOGrUiKTsACFQfWWgUQ2NwoUX1yjFMXVsAwcQeNpnucF2ZrujsBBPg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.1.6':
-    resolution: {integrity: sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==}
+  '@next/swc-darwin-x64@16.1.7':
+    resolution: {integrity: sha512-zcnVaaZulS1WL0Ss38R5Q6D2gz7MtBu8GZLPfK+73D/hp4GFMrC2sudLky1QibfV7h6RJBJs/gOFvYP0X7UVlQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.1.6':
-    resolution: {integrity: sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==}
+  '@next/swc-linux-arm64-gnu@16.1.7':
+    resolution: {integrity: sha512-2ant89Lux/Q3VyC8vNVg7uBaFVP9SwoK2jJOOR0L8TQnX8CAYnh4uctAScy2Hwj2dgjVHqHLORQZJ2wH6VxhSQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@16.1.6':
-    resolution: {integrity: sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==}
+  '@next/swc-linux-arm64-musl@16.1.7':
+    resolution: {integrity: sha512-uufcze7LYv0FQg9GnNeZ3/whYfo+1Q3HnQpm16o6Uyi0OVzLlk2ZWoY7j07KADZFY8qwDbsmFnMQP3p3+Ftprw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@16.1.6':
-    resolution: {integrity: sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==}
+  '@next/swc-linux-x64-gnu@16.1.7':
+    resolution: {integrity: sha512-KWVf2gxYvHtvuT+c4MBOGxuse5TD7DsMFYSxVxRBnOzok/xryNeQSjXgxSv9QpIVlaGzEn/pIuI6Koosx8CGWA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@16.1.6':
-    resolution: {integrity: sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==}
+  '@next/swc-linux-x64-musl@16.1.7':
+    resolution: {integrity: sha512-HguhaGwsGr1YAGs68uRKc4aGWxLET+NevJskOcCAwXbwj0fYX0RgZW2gsOCzr9S11CSQPIkxmoSbuVaBp4Z3dA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@16.1.6':
-    resolution: {integrity: sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==}
+  '@next/swc-win32-arm64-msvc@16.1.7':
+    resolution: {integrity: sha512-S0n3KrDJokKTeFyM/vGGGR8+pCmXYrjNTk2ZozOL1C/JFdfUIL9O1ATaJOl5r2POe56iRChbsszrjMAdWSv7kQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.1.6':
-    resolution: {integrity: sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==}
+  '@next/swc-win32-x64-msvc@16.1.7':
+    resolution: {integrity: sha512-mwgtg8CNZGYm06LeEd+bNnOUfwOyNem/rOiP14Lsz+AnUY92Zq/LXwtebtUiaeVkhbroRCQ0c8GlR4UT1U+0yg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1605,128 +1596,128 @@ packages:
     resolution: {integrity: sha512-FqALmHI8D4o6lk/LRWDnhw95z5eO+eAa6ORjVg09YRR7BkcM6oPHU9uyC0gtQG5vpFLvgpeU4+zEAz2H8APHNw==}
     engines: {node: '>= 10'}
 
-  '@rollup/rollup-android-arm-eabi@4.57.1':
-    resolution: {integrity: sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==}
+  '@rollup/rollup-android-arm-eabi@4.60.0':
+    resolution: {integrity: sha512-WOhNW9K8bR3kf4zLxbfg6Pxu2ybOUbB2AjMDHSQx86LIF4rH4Ft7vmMwNt0loO0eonglSNy4cpD3MKXXKQu0/A==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.57.1':
-    resolution: {integrity: sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==}
+  '@rollup/rollup-android-arm64@4.60.0':
+    resolution: {integrity: sha512-u6JHLll5QKRvjciE78bQXDmqRqNs5M/3GVqZeMwvmjaNODJih/WIrJlFVEihvV0MiYFmd+ZyPr9wxOVbPAG2Iw==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.57.1':
-    resolution: {integrity: sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==}
+  '@rollup/rollup-darwin-arm64@4.60.0':
+    resolution: {integrity: sha512-qEF7CsKKzSRc20Ciu2Zw1wRrBz4g56F7r/vRwY430UPp/nt1x21Q/fpJ9N5l47WWvJlkNCPJz3QRVw008fi7yA==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.57.1':
-    resolution: {integrity: sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==}
+  '@rollup/rollup-darwin-x64@4.60.0':
+    resolution: {integrity: sha512-WADYozJ4QCnXCH4wPB+3FuGmDPoFseVCUrANmA5LWwGmC6FL14BWC7pcq+FstOZv3baGX65tZ378uT6WG8ynTw==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.57.1':
-    resolution: {integrity: sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==}
+  '@rollup/rollup-freebsd-arm64@4.60.0':
+    resolution: {integrity: sha512-6b8wGHJlDrGeSE3aH5mGNHBjA0TTkxdoNHik5EkvPHCt351XnigA4pS7Wsj/Eo9Y8RBU6f35cjN9SYmCFBtzxw==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.57.1':
-    resolution: {integrity: sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==}
+  '@rollup/rollup-freebsd-x64@4.60.0':
+    resolution: {integrity: sha512-h25Ga0t4jaylMB8M/JKAyrvvfxGRjnPQIR8lnCayyzEjEOx2EJIlIiMbhpWxDRKGKF8jbNH01NnN663dH638mA==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.57.1':
-    resolution: {integrity: sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.0':
+    resolution: {integrity: sha512-RzeBwv0B3qtVBWtcuABtSuCzToo2IEAIQrcyB/b2zMvBWVbjo8bZDjACUpnaafaxhTw2W+imQbP2BD1usasK4g==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.57.1':
-    resolution: {integrity: sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==}
+  '@rollup/rollup-linux-arm-musleabihf@4.60.0':
+    resolution: {integrity: sha512-Sf7zusNI2CIU1HLzuu9Tc5YGAHEZs5Lu7N1ssJG4Tkw6e0MEsN7NdjUDDfGNHy2IU+ENyWT+L2obgWiguWibWQ==}
     cpu: [arm]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-gnu@4.57.1':
-    resolution: {integrity: sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==}
+  '@rollup/rollup-linux-arm64-gnu@4.60.0':
+    resolution: {integrity: sha512-DX2x7CMcrJzsE91q7/O02IJQ5/aLkVtYFryqCjduJhUfGKG6yJV8hxaw8pZa93lLEpPTP/ohdN4wFz7yp/ry9A==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-arm64-musl@4.57.1':
-    resolution: {integrity: sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==}
+  '@rollup/rollup-linux-arm64-musl@4.60.0':
+    resolution: {integrity: sha512-09EL+yFVbJZlhcQfShpswwRZ0Rg+z/CsSELFCnPt3iK+iqwGsI4zht3secj5vLEs957QvFFXnzAT0FFPIxSrkQ==}
     cpu: [arm64]
     os: [linux]
 
-  '@rollup/rollup-linux-loong64-gnu@4.57.1':
-    resolution: {integrity: sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==}
+  '@rollup/rollup-linux-loong64-gnu@4.60.0':
+    resolution: {integrity: sha512-i9IcCMPr3EXm8EQg5jnja0Zyc1iFxJjZWlb4wr7U2Wx/GrddOuEafxRdMPRYVaXjgbhvqalp6np07hN1w9kAKw==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-loong64-musl@4.57.1':
-    resolution: {integrity: sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==}
+  '@rollup/rollup-linux-loong64-musl@4.60.0':
+    resolution: {integrity: sha512-DGzdJK9kyJ+B78MCkWeGnpXJ91tK/iKA6HwHxF4TAlPIY7GXEvMe8hBFRgdrR9Ly4qebR/7gfUs9y2IoaVEyog==}
     cpu: [loong64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.57.1':
-    resolution: {integrity: sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==}
+  '@rollup/rollup-linux-ppc64-gnu@4.60.0':
+    resolution: {integrity: sha512-RwpnLsqC8qbS8z1H1AxBA1H6qknR4YpPR9w2XX0vo2Sz10miu57PkNcnHVaZkbqyw/kUWfKMI73jhmfi9BRMUQ==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-ppc64-musl@4.57.1':
-    resolution: {integrity: sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==}
+  '@rollup/rollup-linux-ppc64-musl@4.60.0':
+    resolution: {integrity: sha512-Z8pPf54Ly3aqtdWC3G4rFigZgNvd+qJlOE52fmko3KST9SoGfAdSRCwyoyG05q1HrrAblLbk1/PSIV+80/pxLg==}
     cpu: [ppc64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.57.1':
-    resolution: {integrity: sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==}
+  '@rollup/rollup-linux-riscv64-gnu@4.60.0':
+    resolution: {integrity: sha512-3a3qQustp3COCGvnP4SvrMHnPQ9d1vzCakQVRTliaz8cIp/wULGjiGpbcqrkv0WrHTEp8bQD/B3HBjzujVWLOA==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-riscv64-musl@4.57.1':
-    resolution: {integrity: sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==}
+  '@rollup/rollup-linux-riscv64-musl@4.60.0':
+    resolution: {integrity: sha512-pjZDsVH/1VsghMJ2/kAaxt6dL0psT6ZexQVrijczOf+PeP2BUqTHYejk3l6TlPRydggINOeNRhvpLa0AYpCWSQ==}
     cpu: [riscv64]
     os: [linux]
 
-  '@rollup/rollup-linux-s390x-gnu@4.57.1':
-    resolution: {integrity: sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==}
+  '@rollup/rollup-linux-s390x-gnu@4.60.0':
+    resolution: {integrity: sha512-3ObQs0BhvPgiUVZrN7gqCSvmFuMWvWvsjG5ayJ3Lraqv+2KhOsp+pUbigqbeWqueGIsnn+09HBw27rJ+gYK4VQ==}
     cpu: [s390x]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-gnu@4.57.1':
-    resolution: {integrity: sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==}
+  '@rollup/rollup-linux-x64-gnu@4.60.0':
+    resolution: {integrity: sha512-EtylprDtQPdS5rXvAayrNDYoJhIz1/vzN2fEubo3yLE7tfAw+948dO0g4M0vkTVFhKojnF+n6C8bDNe+gDRdTg==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-linux-x64-musl@4.57.1':
-    resolution: {integrity: sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==}
+  '@rollup/rollup-linux-x64-musl@4.60.0':
+    resolution: {integrity: sha512-k09oiRCi/bHU9UVFqD17r3eJR9bn03TyKraCrlz5ULFJGdJGi7VOmm9jl44vOJvRJ6P7WuBi/s2A97LxxHGIdw==}
     cpu: [x64]
     os: [linux]
 
-  '@rollup/rollup-openbsd-x64@4.57.1':
-    resolution: {integrity: sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==}
+  '@rollup/rollup-openbsd-x64@4.60.0':
+    resolution: {integrity: sha512-1o/0/pIhozoSaDJoDcec+IVLbnRtQmHwPV730+AOD29lHEEo4F5BEUB24H0OBdhbBBDwIOSuf7vgg0Ywxdfiiw==}
     cpu: [x64]
     os: [openbsd]
 
-  '@rollup/rollup-openharmony-arm64@4.57.1':
-    resolution: {integrity: sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==}
+  '@rollup/rollup-openharmony-arm64@4.60.0':
+    resolution: {integrity: sha512-pESDkos/PDzYwtyzB5p/UoNU/8fJo68vcXM9ZW2V0kjYayj1KaaUfi1NmTUTUpMn4UhU4gTuK8gIaFO4UGuMbA==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.57.1':
-    resolution: {integrity: sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==}
+  '@rollup/rollup-win32-arm64-msvc@4.60.0':
+    resolution: {integrity: sha512-hj1wFStD7B1YBeYmvY+lWXZ7ey73YGPcViMShYikqKT1GtstIKQAtfUI6yrzPjAy/O7pO0VLXGmUVWXQMaYgTQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.57.1':
-    resolution: {integrity: sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==}
+  '@rollup/rollup-win32-ia32-msvc@4.60.0':
+    resolution: {integrity: sha512-SyaIPFoxmUPlNDq5EHkTbiKzmSEmq/gOYFI/3HHJ8iS/v1mbugVa7dXUzcJGQfoytp9DJFLhHH4U3/eTy2Bq4w==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.57.1':
-    resolution: {integrity: sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==}
+  '@rollup/rollup-win32-x64-gnu@4.60.0':
+    resolution: {integrity: sha512-RdcryEfzZr+lAr5kRm2ucN9aVlCCa2QNq4hXelZxb8GG0NJSazq44Z3PCCc8wISRuCVnGs0lQJVX5Vp6fKA+IA==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.57.1':
-    resolution: {integrity: sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==}
+  '@rollup/rollup-win32-x64-msvc@4.60.0':
+    resolution: {integrity: sha512-PrsWNQ8BuE00O3Xsx3ALh2Df8fAj9+cvvX9AIA6o4KpATR98c9mud4XtDWVvsEuyia5U4tVSTKygawyJkjm60w==}
     cpu: [x64]
     os: [win32]
 
@@ -2044,15 +2035,6 @@ packages:
   '@types/node@20.19.33':
     resolution: {integrity: sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==}
 
-  '@types/node@25.5.0':
-    resolution: {integrity: sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==}
-
-  '@types/pako@2.0.4':
-    resolution: {integrity: sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==}
-
-  '@types/raf@3.4.3':
-    resolution: {integrity: sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==}
-
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
@@ -2427,10 +2409,6 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-
   base64-js@0.0.8:
     resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
     engines: {node: '>= 0.4'}
@@ -2438,8 +2416,9 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.9.19:
-    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
+  baseline-browser-mapping@2.10.8:
+    resolution: {integrity: sha512-PCLz/LXGBsNTErbtB6i5u4eLpHeMfi93aUv5duMmj6caNu6IphS4q6UevDnL36sZQv9lrP11dbPKGMaXPwMKfQ==}
+    engines: {node: '>=6.0.0'}
     hasBin: true
 
   best-effort-json-parser@1.2.1:
@@ -2556,16 +2535,12 @@ packages:
   camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
 
-  caniuse-lite@1.0.30001769:
-    resolution: {integrity: sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==}
+  caniuse-lite@1.0.30001780:
+    resolution: {integrity: sha512-llngX0E7nQci5BPJDqoZSbuZ5Bcs9F5db7EtgfwBerX9XGtkkiO4NwfDDIRzHTTwcYC8vC7bmeUEPGrKlR/TkQ==}
 
   canvas-confetti@1.9.4:
     resolution: {integrity: sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==}
 
-  canvg@3.0.11:
-    resolution: {integrity: sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==}
-    engines: {node: '>=10.0.0'}
-
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
 
@@ -2667,12 +2642,6 @@ packages:
   cookie-es@1.2.2:
     resolution: {integrity: sha512-+W7VmiVINB+ywl1HGXJXmrqkOhpKrIiVZV6tQuV54ZyQC7MMuBt81Vc336GMLoHBq5hV/F9eXgt5Mnx0Rha5Fg==}
 
-  core-js@3.49.0:
-    resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==}
-
-  core-util-is@1.0.3:
-    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
-
   cose-base@1.0.3:
     resolution: {integrity: sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==}
 
@@ -2703,9 +2672,6 @@ packages:
     resolution: {integrity: sha512-w2Xy9UMMwlKtou0vlRnXvWglPAceXCTtcmVSo8ZBUvqCV5aXEFP/PC6d+I464810I9FT++UACwTD5511bmGPUg==}
     engines: {node: '>=16'}
 
-  css-line-break@2.1.0:
-    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
-
   css-to-react-native@3.2.0:
     resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
 
@@ -2951,10 +2917,6 @@ packages:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
 
-  docx@9.6.1:
-    resolution: {integrity: sha512-ZJja9/KBUuFC109sCMzovoq2GR2wCG/AuxivjA+OHj/q0TEgJIm3S7yrlUxIy3B+bV8YDj/BiHfWyrRFmyWpDQ==}
-    engines: {node: '>=10'}
-
   dompurify@3.3.1:
     resolution: {integrity: sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==}
 
@@ -3033,8 +2995,8 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
-  esbuild@0.27.3:
-    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+  esbuild@0.27.4:
+    resolution: {integrity: sha512-Rq4vbHnYkK5fws5NF7MYTU68FPRE1ajX7heQ/8QXXWqNgqqJ/GkmmyxIzUnf2Sr/bakf8l54716CcMGHYhMrrQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -3211,9 +3173,6 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fast-png@6.4.0:
-    resolution: {integrity: sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==}
-
   fastq@1.20.1:
     resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
@@ -3229,9 +3188,6 @@ packages:
   fflate@0.7.4:
     resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
 
-  fflate@0.8.2:
-    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
-
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -3349,6 +3305,9 @@ packages:
   gsap@3.14.2:
     resolution: {integrity: sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==}
 
+  h3@1.15.10:
+    resolution: {integrity: sha512-YzJeWSkDZxAhvmp8dexjRK5hxziRO7I9m0N53WhvYL5NiWfkUkzssVzY9jvGu0HBoLFW6+duYmNSn6MaZBCCtg==}
+
   h3@1.15.5:
     resolution: {integrity: sha512-xEyq3rSl+dhGX2Lm0+eFQIAzlDN6Fs0EcC4f7BNUmzaRX/PTzeuM+Tr2lHB8FoXggsQIeXLj8EDVgs5ywxyxmg==}
 
@@ -3378,9 +3337,6 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
-  hash.js@1.1.7:
-    resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==}
-
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
@@ -3432,8 +3388,8 @@ packages:
     resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==}
     engines: {node: '>=6'}
 
-  hookable@6.0.1:
-    resolution: {integrity: sha512-uKGyY8BuzN/a5gvzvA+3FVWo0+wUjgtfSdnmjtrOVwQCZPHpHDH2WRO3VZSOeluYrHoDCiXFffZXs8Dj1ULWtw==}
+  hookable@6.1.0:
+    resolution: {integrity: sha512-ZoKZSJgu8voGK2geJS+6YtYjvIzu9AOM/KZXsBxr83uhLL++e9pEv/dlgwgy3dvHg06kTz6JOh1hk3C8Ceiymw==}
 
   html-url-attributes@3.0.1:
     resolution: {integrity: sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==}
@@ -3441,13 +3397,6 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  html2canvas@1.4.1:
-    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
-    engines: {node: '>=8.0.0'}
-
-  html2pdf.js@0.14.0:
-    resolution: {integrity: sha512-yvNJgE/8yru2UeGflkPdjW8YEY+nDH5X7/2WG4uiuSCwYiCp8PZ8EKNiTAa6HxJ1NjC51fZSIEq6xld5CADKBQ==}
-
   human-signals@5.0.0:
     resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
     engines: {node: '>=16.17.0'}
@@ -3473,9 +3422,6 @@ packages:
     engines: {node: '>=16.x'}
     hasBin: true
 
-  immediate@3.0.6:
-    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
-
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -3484,9 +3430,6 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  inherits@2.0.4:
-    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
-
   inline-style-parser@0.2.7:
     resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
 
@@ -3501,9 +3444,6 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  iobuffer@5.4.0:
-    resolution: {integrity: sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==}
-
   iron-webcrypto@1.2.1:
     resolution: {integrity: sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg==}
 
@@ -3651,9 +3591,6 @@ packages:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
 
-  isarray@1.0.0:
-    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
-
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
@@ -3700,16 +3637,10 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
-  jspdf@4.2.1:
-    resolution: {integrity: sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==}
-
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
-  jszip@3.10.1:
-    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
-
   katex@0.16.28:
     resolution: {integrity: sha512-YHzO7721WbmAL6Ov1uzN/l5mY5WWWhJBSW+jq4tkfZfsxmo1hu6frS0EOswvjBUnWE6NtjEs48SFn5CQESRLZg==}
     hasBin: true
@@ -3769,9 +3700,6 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  lie@3.3.0:
-    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
-
   lighthouse-logger@2.0.2:
     resolution: {integrity: sha512-vWl2+u5jgOQuZR55Z1WM0XDdrJT6mzMP8zHUct7xTlWhuQs+eV0g+QL0RQdFjT54zVmbhLCP8vIVpy1wGn/gCg==}
 
@@ -3868,8 +3796,8 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
-  lru-cache@11.2.5:
-    resolution: {integrity: sha512-vFrFJkWtJvJnD5hg+hJvVE8Lh/TcMzKnTgCWmtBipwI5yLX/iX+5UB2tfuyODF5E7k9xEzMdYgGqaSb1c0c5Yw==}
+  lru-cache@11.2.7:
+    resolution: {integrity: sha512-aY/R+aEsRelme17KGQa/1ZSIpLpNYYrhcrepKTZgE+W3WM16YMCaPwOHLHsmopZHELU0Ojin1lPVxKR0MihncA==}
     engines: {node: 20 || >=22}
 
   lucide-react@0.542.0:
@@ -3893,11 +3821,6 @@ packages:
     engines: {node: '>= 20'}
     hasBin: true
 
-  marked@17.0.5:
-    resolution: {integrity: sha512-6hLvc0/JEbRjRgzI6wnT2P1XuM1/RrrDEX0kPt0N7jGm1133g6X7DlxFasUIx+72aKAr904GTxhSLDrd5DIlZg==}
-    engines: {node: '>= 20'}
-    hasBin: true
-
   marky@1.3.0:
     resolution: {integrity: sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==}
 
@@ -4058,9 +3981,6 @@ packages:
     resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
     engines: {node: '>=12'}
 
-  minimalistic-assert@1.0.1:
-    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
-
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -4136,8 +4056,8 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@16.1.6:
-    resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
+  next@16.1.7:
+    resolution: {integrity: sha512-WM0L7WrSvKwoLegLYr6V+mz+RIofqQgVAfHhMp9a88ms0cFX8iX9ew+snpWlSBwpkURJOUdvCEt3uLl3NNzvWg==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -4290,12 +4210,6 @@ packages:
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
-  pako@1.0.11:
-    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
-
-  pako@2.1.0:
-    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4337,9 +4251,6 @@ packages:
   perfect-debounce@2.1.0:
     resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
 
-  performance-now@2.1.0:
-    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -4347,10 +4258,18 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@2.3.2:
+    resolution: {integrity: sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==}
+    engines: {node: '>=8.6'}
+
   picomatch@4.0.3:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.4:
+    resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
+    engines: {node: '>=12'}
+
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -4383,6 +4302,10 @@ packages:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.8:
+    resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -4457,9 +4380,6 @@ packages:
     resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
     engines: {node: '>=18'}
 
-  process-nextick-args@2.0.1:
-    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
-
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
@@ -4476,9 +4396,6 @@ packages:
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
-  raf@3.4.1:
-    resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
-
   rc9@2.1.2:
     resolution: {integrity: sha512-btXCnMmRIBINM2LDZoEmOogIZU7Qe7zn4BpomSKZ/ykbLObuBdvG+mFq11DL6fjH1DRwHhrlgtYWG96bJiC7Cg==}
 
@@ -4539,9 +4456,6 @@ packages:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
 
-  readable-stream@2.3.8:
-    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
-
   readdirp@5.0.0:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
@@ -4550,9 +4464,6 @@ packages:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
 
-  regenerator-runtime@0.13.11:
-    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
-
   regex-recursion@6.0.2:
     resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
 
@@ -4610,15 +4521,11 @@ packages:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
-  rgbcolor@1.0.1:
-    resolution: {integrity: sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==}
-    engines: {node: '>= 0.8.15'}
-
   robust-predicates@3.0.2:
     resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
 
-  rollup@4.57.1:
-    resolution: {integrity: sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==}
+  rollup@4.60.0:
+    resolution: {integrity: sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -4638,9 +4545,6 @@ packages:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
 
-  safe-buffer@5.1.2:
-    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
-
   safe-push-apply@1.0.0:
     resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
     engines: {node: '>= 0.4'}
@@ -4659,10 +4563,6 @@ packages:
     resolution: {integrity: sha512-HanEzgXHlX3fzpGgxPoR3qI7FDpc/B+uE/KplzA6BkZGlWMaH98B/1Amq+OBF1pYPlGNzAXPYNHlrEVBvRBnHQ==}
     engines: {node: '>=16'}
 
-  sax@1.6.0:
-    resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
-    engines: {node: '>=11.0.0'}
-
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -4693,9 +4593,6 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
-  setimmediate@1.0.5:
-    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
-
   sharp@0.34.5:
     resolution: {integrity: sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -4759,10 +4656,6 @@ packages:
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
-  stackblur-canvas@2.7.0:
-    resolution: {integrity: sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==}
-    engines: {node: '>=0.1.14'}
-
   std-env@3.10.0:
     resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==}
 
@@ -4801,9 +4694,6 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
-  string_decoder@1.1.1:
-    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
-
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
@@ -4859,10 +4749,6 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svg-pathdata@6.0.3:
-    resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==}
-    engines: {node: '>=12.0.0'}
-
   tailwind-merge@3.4.0:
     resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
 
@@ -4873,9 +4759,6 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
-  text-segmentation@1.0.3:
-    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
-
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
 
@@ -4974,9 +4857,6 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici-types@7.18.2:
-    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
-
   unhead@2.1.4:
     resolution: {integrity: sha512-+5091sJqtNNmgfQ07zJOgUnMIMKzVKAWjeMlSrTdSGPB6JSozhpjUKuMfWEoLxlMAfhIvgOU8Me0XJvmMA/0fA==}
 
@@ -5120,12 +5000,6 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
-  utrie@1.0.2:
-    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
-
   uuid@10.0.0:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
@@ -5249,13 +5123,6 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
-  xml-js@1.6.11:
-    resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==}
-    hasBin: true
-
-  xml@1.0.1:
-    resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -5325,7 +5192,7 @@ snapshots:
 
   '@babel/helper-validator-identifier@7.28.5': {}
 
-  '@babel/parser@7.29.0':
+  '@babel/parser@7.29.2':
     dependencies:
       '@babel/types': 7.29.0
 
@@ -5639,7 +5506,7 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.8.1':
+  '@emnapi/runtime@1.9.0':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -5649,82 +5516,82 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@esbuild/aix-ppc64@0.27.3':
+  '@esbuild/aix-ppc64@0.27.4':
     optional: true
 
-  '@esbuild/android-arm64@0.27.3':
+  '@esbuild/android-arm64@0.27.4':
     optional: true
 
-  '@esbuild/android-arm@0.27.3':
+  '@esbuild/android-arm@0.27.4':
     optional: true
 
-  '@esbuild/android-x64@0.27.3':
+  '@esbuild/android-x64@0.27.4':
     optional: true
 
-  '@esbuild/darwin-arm64@0.27.3':
+  '@esbuild/darwin-arm64@0.27.4':
     optional: true
 
-  '@esbuild/darwin-x64@0.27.3':
+  '@esbuild/darwin-x64@0.27.4':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.27.3':
+  '@esbuild/freebsd-arm64@0.27.4':
     optional: true
 
-  '@esbuild/freebsd-x64@0.27.3':
+  '@esbuild/freebsd-x64@0.27.4':
     optional: true
 
-  '@esbuild/linux-arm64@0.27.3':
+  '@esbuild/linux-arm64@0.27.4':
     optional: true
 
-  '@esbuild/linux-arm@0.27.3':
+  '@esbuild/linux-arm@0.27.4':
     optional: true
 
-  '@esbuild/linux-ia32@0.27.3':
+  '@esbuild/linux-ia32@0.27.4':
     optional: true
 
-  '@esbuild/linux-loong64@0.27.3':
+  '@esbuild/linux-loong64@0.27.4':
     optional: true
 
-  '@esbuild/linux-mips64el@0.27.3':
+  '@esbuild/linux-mips64el@0.27.4':
     optional: true
 
-  '@esbuild/linux-ppc64@0.27.3':
+  '@esbuild/linux-ppc64@0.27.4':
     optional: true
 
-  '@esbuild/linux-riscv64@0.27.3':
+  '@esbuild/linux-riscv64@0.27.4':
     optional: true
 
-  '@esbuild/linux-s390x@0.27.3':
+  '@esbuild/linux-s390x@0.27.4':
     optional: true
 
-  '@esbuild/linux-x64@0.27.3':
+  '@esbuild/linux-x64@0.27.4':
     optional: true
 
-  '@esbuild/netbsd-arm64@0.27.3':
+  '@esbuild/netbsd-arm64@0.27.4':
     optional: true
 
-  '@esbuild/netbsd-x64@0.27.3':
+  '@esbuild/netbsd-x64@0.27.4':
     optional: true
 
-  '@esbuild/openbsd-arm64@0.27.3':
+  '@esbuild/openbsd-arm64@0.27.4':
     optional: true
 
-  '@esbuild/openbsd-x64@0.27.3':
+  '@esbuild/openbsd-x64@0.27.4':
     optional: true
 
-  '@esbuild/openharmony-arm64@0.27.3':
+  '@esbuild/openharmony-arm64@0.27.4':
     optional: true
 
-  '@esbuild/sunos-x64@0.27.3':
+  '@esbuild/sunos-x64@0.27.4':
     optional: true
 
-  '@esbuild/win32-arm64@0.27.3':
+  '@esbuild/win32-arm64@0.27.4':
     optional: true
 
-  '@esbuild/win32-ia32@0.27.3':
+  '@esbuild/win32-ia32@0.27.4':
     optional: true
 
-  '@esbuild/win32-x64@0.27.3':
+  '@esbuild/win32-x64@0.27.4':
     optional: true
 
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1))':
@@ -5809,7 +5676,7 @@ snapshots:
       '@iconify/types': 2.0.0
       mlly: 1.8.0
 
-  '@img/colour@1.0.0':
+  '@img/colour@1.1.0':
     optional: true
 
   '@img/sharp-darwin-arm64@0.34.5':
@@ -5894,7 +5761,7 @@ snapshots:
 
   '@img/sharp-wasm32@0.34.5':
     dependencies:
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/runtime': 1.9.0
     optional: true
 
   '@img/sharp-win32-arm64@0.34.5':
@@ -6056,38 +5923,38 @@ snapshots:
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
       '@emnapi/core': 1.8.1
-      '@emnapi/runtime': 1.8.1
+      '@emnapi/runtime': 1.9.0
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@next/env@16.1.6': {}
+  '@next/env@16.1.7': {}
 
   '@next/eslint-plugin-next@15.5.12':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@16.1.6':
+  '@next/swc-darwin-arm64@16.1.7':
     optional: true
 
-  '@next/swc-darwin-x64@16.1.6':
+  '@next/swc-darwin-x64@16.1.7':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.1.6':
+  '@next/swc-linux-arm64-gnu@16.1.7':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.1.6':
+  '@next/swc-linux-arm64-musl@16.1.7':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.1.6':
+  '@next/swc-linux-x64-gnu@16.1.7':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.1.6':
+  '@next/swc-linux-x64-musl@16.1.7':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.1.6':
+  '@next/swc-win32-arm64-msvc@16.1.7':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.1.6':
+  '@next/swc-win32-x64-msvc@16.1.7':
     optional: true
 
   '@noble/ciphers@2.1.1': {}
@@ -6698,79 +6565,79 @@ snapshots:
 
   '@resvg/resvg-wasm@2.6.2': {}
 
-  '@rollup/rollup-android-arm-eabi@4.57.1':
+  '@rollup/rollup-android-arm-eabi@4.60.0':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.57.1':
+  '@rollup/rollup-android-arm64@4.60.0':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.57.1':
+  '@rollup/rollup-darwin-arm64@4.60.0':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.57.1':
+  '@rollup/rollup-darwin-x64@4.60.0':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.57.1':
+  '@rollup/rollup-freebsd-arm64@4.60.0':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.57.1':
+  '@rollup/rollup-freebsd-x64@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.57.1':
+  '@rollup/rollup-linux-arm-gnueabihf@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.57.1':
+  '@rollup/rollup-linux-arm-musleabihf@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.57.1':
+  '@rollup/rollup-linux-arm64-gnu@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.57.1':
+  '@rollup/rollup-linux-arm64-musl@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.57.1':
+  '@rollup/rollup-linux-loong64-gnu@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-loong64-musl@4.57.1':
+  '@rollup/rollup-linux-loong64-musl@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.57.1':
+  '@rollup/rollup-linux-ppc64-gnu@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-musl@4.57.1':
+  '@rollup/rollup-linux-ppc64-musl@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.57.1':
+  '@rollup/rollup-linux-riscv64-gnu@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.57.1':
+  '@rollup/rollup-linux-riscv64-musl@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.57.1':
+  '@rollup/rollup-linux-s390x-gnu@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.57.1':
+  '@rollup/rollup-linux-x64-gnu@4.60.0':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.57.1':
+  '@rollup/rollup-linux-x64-musl@4.60.0':
     optional: true
 
-  '@rollup/rollup-openbsd-x64@4.57.1':
+  '@rollup/rollup-openbsd-x64@4.60.0':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.57.1':
+  '@rollup/rollup-openharmony-arm64@4.60.0':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.57.1':
+  '@rollup/rollup-win32-arm64-msvc@4.60.0':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.57.1':
+  '@rollup/rollup-win32-ia32-msvc@4.60.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.57.1':
+  '@rollup/rollup-win32-x64-gnu@4.60.0':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.57.1':
+  '@rollup/rollup-win32-x64-msvc@4.60.0':
     optional: true
 
   '@rtsao/scc@1.1.0': {}
@@ -7086,15 +6953,6 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@25.5.0':
-    dependencies:
-      undici-types: 7.18.2
-
-  '@types/pako@2.0.4': {}
-
-  '@types/raf@3.4.3':
-    optional: true
-
   '@types/react-dom@19.2.3(@types/react@19.2.13)':
     dependencies:
       '@types/react': 19.2.13
@@ -7256,7 +7114,7 @@ snapshots:
 
   '@unhead/vue@2.1.4(vue@3.5.28(typescript@5.9.3))':
     dependencies:
-      hookable: 6.0.1
+      hookable: 6.1.0
       unhead: 2.1.4
       vue: 3.5.28(typescript@5.9.3)
 
@@ -7346,7 +7204,7 @@ snapshots:
 
   '@vue/compiler-core@3.5.28':
     dependencies:
-      '@babel/parser': 7.29.0
+      '@babel/parser': 7.29.2
       '@vue/shared': 3.5.28
       entities: 7.0.1
       estree-walker: 2.0.2
@@ -7359,14 +7217,14 @@ snapshots:
 
   '@vue/compiler-sfc@3.5.28':
     dependencies:
-      '@babel/parser': 7.29.0
+      '@babel/parser': 7.29.2
       '@vue/compiler-core': 3.5.28
       '@vue/compiler-dom': 3.5.28
       '@vue/compiler-ssr': 3.5.28
       '@vue/shared': 3.5.28
       estree-walker: 2.0.2
       magic-string: 0.30.21
-      postcss: 8.5.6
+      postcss: 8.5.8
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.28':
@@ -7451,7 +7309,7 @@ snapshots:
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
-      picomatch: 2.3.1
+      picomatch: 2.3.2
 
   argparse@2.0.1: {}
 
@@ -7544,17 +7402,15 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  base64-arraybuffer@1.0.2: {}
-
   base64-js@0.0.8: {}
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.9.19: {}
+  baseline-browser-mapping@2.10.8: {}
 
   best-effort-json-parser@1.2.1: {}
 
-  better-auth@1.4.18(next@16.1.6(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vue@3.5.28(typescript@5.9.3)):
+  better-auth@1.4.18(next@16.1.7(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vue@3.5.28(typescript@5.9.3)):
     dependencies:
       '@better-auth/core': 1.4.18(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@3.25.76))(jose@6.1.3)(kysely@0.28.11)(nanostores@1.1.0)
       '@better-auth/telemetry': 1.4.18(@better-auth/core@1.4.18(@better-auth/utils@0.3.0)(@better-fetch/fetch@1.1.21)(better-call@1.1.8(zod@3.25.76))(jose@6.1.3)(kysely@0.28.11)(nanostores@1.1.0))
@@ -7569,7 +7425,7 @@ snapshots:
       nanostores: 1.1.0
       zod: 4.3.6
     optionalDependencies:
-      next: 16.1.6(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next: 16.1.7(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
       vue: 3.5.28(typescript@5.9.3)
@@ -7634,22 +7490,10 @@ snapshots:
 
   camelize@1.0.1: {}
 
-  caniuse-lite@1.0.30001769: {}
+  caniuse-lite@1.0.30001780: {}
 
   canvas-confetti@1.9.4: {}
 
-  canvg@3.0.11:
-    dependencies:
-      '@babel/runtime': 7.28.6
-      '@types/raf': 3.4.3
-      core-js: 3.49.0
-      raf: 3.4.1
-      regenerator-runtime: 0.13.11
-      rgbcolor: 1.0.1
-      stackblur-canvas: 2.7.0
-      svg-pathdata: 6.0.3
-    optional: true
-
   ccount@2.0.1: {}
 
   chalk@4.1.2:
@@ -7756,11 +7600,6 @@ snapshots:
 
   cookie-es@1.2.2: {}
 
-  core-js@3.49.0:
-    optional: true
-
-  core-util-is@1.0.3: {}
-
   cose-base@1.0.3:
     dependencies:
       layout-base: 1.0.2
@@ -7789,10 +7628,6 @@ snapshots:
 
   css-gradient-parser@0.0.17: {}
 
-  css-line-break@2.1.0:
-    dependencies:
-      utrie: 1.0.2
-
   css-to-react-native@3.2.0:
     dependencies:
       camelize: 1.0.1
@@ -8059,15 +7894,6 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
-  docx@9.6.1:
-    dependencies:
-      '@types/node': 25.5.0
-      hash.js: 1.1.7
-      jszip: 3.10.1
-      nanoid: 5.1.6
-      xml: 1.0.1
-      xml-js: 1.6.11
-
   dompurify@3.3.1:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -8208,34 +8034,34 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
-  esbuild@0.27.3:
+  esbuild@0.27.4:
     optionalDependencies:
-      '@esbuild/aix-ppc64': 0.27.3
-      '@esbuild/android-arm': 0.27.3
-      '@esbuild/android-arm64': 0.27.3
-      '@esbuild/android-x64': 0.27.3
-      '@esbuild/darwin-arm64': 0.27.3
-      '@esbuild/darwin-x64': 0.27.3
-      '@esbuild/freebsd-arm64': 0.27.3
-      '@esbuild/freebsd-x64': 0.27.3
-      '@esbuild/linux-arm': 0.27.3
-      '@esbuild/linux-arm64': 0.27.3
-      '@esbuild/linux-ia32': 0.27.3
-      '@esbuild/linux-loong64': 0.27.3
-      '@esbuild/linux-mips64el': 0.27.3
-      '@esbuild/linux-ppc64': 0.27.3
-      '@esbuild/linux-riscv64': 0.27.3
-      '@esbuild/linux-s390x': 0.27.3
-      '@esbuild/linux-x64': 0.27.3
-      '@esbuild/netbsd-arm64': 0.27.3
-      '@esbuild/netbsd-x64': 0.27.3
-      '@esbuild/openbsd-arm64': 0.27.3
-      '@esbuild/openbsd-x64': 0.27.3
-      '@esbuild/openharmony-arm64': 0.27.3
-      '@esbuild/sunos-x64': 0.27.3
-      '@esbuild/win32-arm64': 0.27.3
-      '@esbuild/win32-ia32': 0.27.3
-      '@esbuild/win32-x64': 0.27.3
+      '@esbuild/aix-ppc64': 0.27.4
+      '@esbuild/android-arm': 0.27.4
+      '@esbuild/android-arm64': 0.27.4
+      '@esbuild/android-x64': 0.27.4
+      '@esbuild/darwin-arm64': 0.27.4
+      '@esbuild/darwin-x64': 0.27.4
+      '@esbuild/freebsd-arm64': 0.27.4
+      '@esbuild/freebsd-x64': 0.27.4
+      '@esbuild/linux-arm': 0.27.4
+      '@esbuild/linux-arm64': 0.27.4
+      '@esbuild/linux-ia32': 0.27.4
+      '@esbuild/linux-loong64': 0.27.4
+      '@esbuild/linux-mips64el': 0.27.4
+      '@esbuild/linux-ppc64': 0.27.4
+      '@esbuild/linux-riscv64': 0.27.4
+      '@esbuild/linux-s390x': 0.27.4
+      '@esbuild/linux-x64': 0.27.4
+      '@esbuild/netbsd-arm64': 0.27.4
+      '@esbuild/netbsd-x64': 0.27.4
+      '@esbuild/openbsd-arm64': 0.27.4
+      '@esbuild/openbsd-x64': 0.27.4
+      '@esbuild/openharmony-arm64': 0.27.4
+      '@esbuild/sunos-x64': 0.27.4
+      '@esbuild/win32-arm64': 0.27.4
+      '@esbuild/win32-ia32': 0.27.4
+      '@esbuild/win32-x64': 0.27.4
 
   escape-html@1.0.3: {}
 
@@ -8498,12 +8324,6 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fast-png@6.4.0:
-    dependencies:
-      '@types/pako': 2.0.4
-      iobuffer: 5.4.0
-      pako: 2.1.0
-
   fastq@1.20.1:
     dependencies:
       reusify: 1.1.0
@@ -8512,9 +8332,11 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
-  fflate@0.7.4: {}
+  fdir@6.5.0(picomatch@4.0.4):
+    optionalDependencies:
+      picomatch: 4.0.4
 
-  fflate@0.8.2: {}
+  fflate@0.7.4: {}
 
   figures@6.1.0:
     dependencies:
@@ -8638,6 +8460,18 @@ snapshots:
 
   gsap@3.14.2: {}
 
+  h3@1.15.10:
+    dependencies:
+      cookie-es: 1.2.2
+      crossws: 0.3.5
+      defu: 6.1.4
+      destr: 2.0.5
+      iron-webcrypto: 1.2.1
+      node-mock-http: 1.0.4
+      radix3: 1.1.2
+      ufo: 1.6.3
+      uncrypto: 0.1.3
+
   h3@1.15.5:
     dependencies:
       cookie-es: 1.2.2
@@ -8670,11 +8504,6 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
-  hash.js@1.1.7:
-    dependencies:
-      inherits: 2.0.4
-      minimalistic-assert: 1.0.1
-
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -8803,23 +8632,12 @@ snapshots:
 
   hex-rgb@4.3.0: {}
 
-  hookable@6.0.1: {}
+  hookable@6.1.0: {}
 
   html-url-attributes@3.0.1: {}
 
   html-void-elements@3.0.0: {}
 
-  html2canvas@1.4.1:
-    dependencies:
-      css-line-break: 2.1.0
-      text-segmentation: 1.0.3
-
-  html2pdf.js@0.14.0:
-    dependencies:
-      dompurify: 3.3.1
-      html2canvas: 1.4.1
-      jspdf: 4.2.1
-
   human-signals@5.0.0: {}
 
   human-signals@8.0.1: {}
@@ -8834,8 +8652,6 @@ snapshots:
 
   image-size@2.0.2: {}
 
-  immediate@3.0.6: {}
-
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -8843,8 +8659,6 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  inherits@2.0.4: {}
-
   inline-style-parser@0.2.7: {}
 
   internal-slot@1.1.0:
@@ -8857,8 +8671,6 @@ snapshots:
 
   internmap@2.0.3: {}
 
-  iobuffer@5.4.0: {}
-
   iron-webcrypto@1.2.1: {}
 
   is-alphabetical@2.0.1: {}
@@ -9000,8 +8812,6 @@ snapshots:
     dependencies:
       is-docker: 2.2.1
 
-  isarray@1.0.0: {}
-
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
@@ -9043,17 +8853,6 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
-  jspdf@4.2.1:
-    dependencies:
-      '@babel/runtime': 7.28.6
-      fast-png: 6.4.0
-      fflate: 0.8.2
-    optionalDependencies:
-      canvg: 3.0.11
-      core-js: 3.49.0
-      dompurify: 3.3.1
-      html2canvas: 1.4.1
-
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.9
@@ -9061,13 +8860,6 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
-  jszip@3.10.1:
-    dependencies:
-      lie: 3.3.0
-      pako: 1.0.11
-      readable-stream: 2.3.8
-      setimmediate: 1.0.5
-
   katex@0.16.28:
     dependencies:
       commander: 8.3.0
@@ -9118,10 +8910,6 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lie@3.3.0:
-    dependencies:
-      immediate: 3.0.6
-
   lighthouse-logger@2.0.2:
     dependencies:
       debug: 4.4.3
@@ -9199,7 +8987,7 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
-  lru-cache@11.2.5: {}
+  lru-cache@11.2.7: {}
 
   lucide-react@0.542.0(react@19.2.4):
     dependencies:
@@ -9217,8 +9005,6 @@ snapshots:
 
   marked@16.4.2: {}
 
-  marked@17.0.5: {}
-
   marky@1.3.0: {}
 
   math-intrinsics@1.1.0: {}
@@ -9623,8 +9409,6 @@ snapshots:
 
   mimic-fn@4.0.0: {}
 
-  minimalistic-assert@1.0.1: {}
-
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -9679,25 +9463,25 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  next@16.1.6(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+  next@16.1.7(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      '@next/env': 16.1.6
+      '@next/env': 16.1.7
       '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.9.19
-      caniuse-lite: 1.0.30001769
+      baseline-browser-mapping: 2.10.8
+      caniuse-lite: 1.0.30001780
       postcss: 8.4.31
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
       styled-jsx: 5.1.6(react@19.2.4)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.1.6
-      '@next/swc-darwin-x64': 16.1.6
-      '@next/swc-linux-arm64-gnu': 16.1.6
-      '@next/swc-linux-arm64-musl': 16.1.6
-      '@next/swc-linux-x64-gnu': 16.1.6
-      '@next/swc-linux-x64-musl': 16.1.6
-      '@next/swc-win32-arm64-msvc': 16.1.6
-      '@next/swc-win32-x64-msvc': 16.1.6
+      '@next/swc-darwin-arm64': 16.1.7
+      '@next/swc-darwin-x64': 16.1.7
+      '@next/swc-linux-arm64-gnu': 16.1.7
+      '@next/swc-linux-arm64-musl': 16.1.7
+      '@next/swc-linux-x64-gnu': 16.1.7
+      '@next/swc-linux-x64-musl': 16.1.7
+      '@next/swc-win32-arm64-msvc': 16.1.7
+      '@next/swc-win32-x64-msvc': 16.1.7
       '@opentelemetry/api': 1.9.0
       sharp: 0.34.5
     transitivePeerDependencies:
@@ -9905,10 +9689,6 @@ snapshots:
 
   pako@0.2.9: {}
 
-  pako@1.0.11: {}
-
-  pako@2.1.0: {}
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -9948,15 +9728,16 @@ snapshots:
 
   perfect-debounce@2.1.0: {}
 
-  performance-now@2.1.0:
-    optional: true
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
+  picomatch@2.3.2: {}
+
   picomatch@4.0.3: {}
 
+  picomatch@4.0.4: {}
+
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -9994,6 +9775,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.8:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   prelude-ls@1.2.1: {}
 
   prettier-plugin-tailwindcss@0.6.14(prettier@3.8.1):
@@ -10006,8 +9793,6 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
-  process-nextick-args@2.0.1: {}
-
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
@@ -10022,11 +9807,6 @@ snapshots:
 
   radix3@1.1.2: {}
 
-  raf@3.4.1:
-    dependencies:
-      performance-now: 2.1.0
-    optional: true
-
   rc9@2.1.2:
     dependencies:
       defu: 6.1.4
@@ -10096,16 +9876,6 @@ snapshots:
 
   react@19.2.4: {}
 
-  readable-stream@2.3.8:
-    dependencies:
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 1.0.0
-      process-nextick-args: 2.0.1
-      safe-buffer: 5.1.2
-      string_decoder: 1.1.1
-      util-deprecate: 1.0.2
-
   readdirp@5.0.0: {}
 
   reflect.getprototypeof@1.0.10:
@@ -10119,9 +9889,6 @@ snapshots:
       get-proto: 1.0.1
       which-builtin-type: 1.2.1
 
-  regenerator-runtime@0.13.11:
-    optional: true
-
   regex-recursion@6.0.2:
     dependencies:
       regex-utilities: 2.3.0
@@ -10222,40 +9989,37 @@ snapshots:
 
   reusify@1.1.0: {}
 
-  rgbcolor@1.0.1:
-    optional: true
-
   robust-predicates@3.0.2: {}
 
-  rollup@4.57.1:
+  rollup@4.60.0:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.57.1
-      '@rollup/rollup-android-arm64': 4.57.1
-      '@rollup/rollup-darwin-arm64': 4.57.1
-      '@rollup/rollup-darwin-x64': 4.57.1
-      '@rollup/rollup-freebsd-arm64': 4.57.1
-      '@rollup/rollup-freebsd-x64': 4.57.1
-      '@rollup/rollup-linux-arm-gnueabihf': 4.57.1
-      '@rollup/rollup-linux-arm-musleabihf': 4.57.1
-      '@rollup/rollup-linux-arm64-gnu': 4.57.1
-      '@rollup/rollup-linux-arm64-musl': 4.57.1
-      '@rollup/rollup-linux-loong64-gnu': 4.57.1
-      '@rollup/rollup-linux-loong64-musl': 4.57.1
-      '@rollup/rollup-linux-ppc64-gnu': 4.57.1
-      '@rollup/rollup-linux-ppc64-musl': 4.57.1
-      '@rollup/rollup-linux-riscv64-gnu': 4.57.1
-      '@rollup/rollup-linux-riscv64-musl': 4.57.1
-      '@rollup/rollup-linux-s390x-gnu': 4.57.1
-      '@rollup/rollup-linux-x64-gnu': 4.57.1
-      '@rollup/rollup-linux-x64-musl': 4.57.1
-      '@rollup/rollup-openbsd-x64': 4.57.1
-      '@rollup/rollup-openharmony-arm64': 4.57.1
-      '@rollup/rollup-win32-arm64-msvc': 4.57.1
-      '@rollup/rollup-win32-ia32-msvc': 4.57.1
-      '@rollup/rollup-win32-x64-gnu': 4.57.1
-      '@rollup/rollup-win32-x64-msvc': 4.57.1
+      '@rollup/rollup-android-arm-eabi': 4.60.0
+      '@rollup/rollup-android-arm64': 4.60.0
+      '@rollup/rollup-darwin-arm64': 4.60.0
+      '@rollup/rollup-darwin-x64': 4.60.0
+      '@rollup/rollup-freebsd-arm64': 4.60.0
+      '@rollup/rollup-freebsd-x64': 4.60.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.60.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.60.0
+      '@rollup/rollup-linux-arm64-gnu': 4.60.0
+      '@rollup/rollup-linux-arm64-musl': 4.60.0
+      '@rollup/rollup-linux-loong64-gnu': 4.60.0
+      '@rollup/rollup-linux-loong64-musl': 4.60.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.60.0
+      '@rollup/rollup-linux-ppc64-musl': 4.60.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.60.0
+      '@rollup/rollup-linux-riscv64-musl': 4.60.0
+      '@rollup/rollup-linux-s390x-gnu': 4.60.0
+      '@rollup/rollup-linux-x64-gnu': 4.60.0
+      '@rollup/rollup-linux-x64-musl': 4.60.0
+      '@rollup/rollup-openbsd-x64': 4.60.0
+      '@rollup/rollup-openharmony-arm64': 4.60.0
+      '@rollup/rollup-win32-arm64-msvc': 4.60.0
+      '@rollup/rollup-win32-ia32-msvc': 4.60.0
+      '@rollup/rollup-win32-x64-gnu': 4.60.0
+      '@rollup/rollup-win32-x64-msvc': 4.60.0
       fsevents: 2.3.3
 
   rou3@0.7.12: {}
@@ -10281,8 +10045,6 @@ snapshots:
       has-symbols: 1.1.0
       isarray: 2.0.5
 
-  safe-buffer@5.1.2: {}
-
   safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -10314,8 +10076,6 @@ snapshots:
       postcss-value-parser: 4.2.0
       yoga-layout: 3.2.1
 
-  sax@1.6.0: {}
-
   scheduler@0.27.0: {}
 
   scule@1.3.0: {}
@@ -10348,11 +10108,9 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.1
 
-  setimmediate@1.0.5: {}
-
   sharp@0.34.5:
     dependencies:
-      '@img/colour': 1.0.0
+      '@img/colour': 1.1.0
       detect-libc: 2.1.2
       semver: 7.7.4
     optionalDependencies:
@@ -10453,9 +10211,6 @@ snapshots:
 
   stable-hash@0.0.5: {}
 
-  stackblur-canvas@2.7.0:
-    optional: true
-
   std-env@3.10.0: {}
 
   stop-iteration-iterator@1.1.0:
@@ -10535,10 +10290,6 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  string_decoder@1.1.1:
-    dependencies:
-      safe-buffer: 5.1.2
-
   stringify-entities@4.0.4:
     dependencies:
       character-entities-html4: 2.1.0
@@ -10579,19 +10330,12 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svg-pathdata@6.0.3:
-    optional: true
-
   tailwind-merge@3.4.0: {}
 
   tailwindcss@4.1.18: {}
 
   tapable@2.3.0: {}
 
-  text-segmentation@1.0.3:
-    dependencies:
-      utrie: 1.0.2
-
   tiny-inflate@1.0.3: {}
 
   tinyexec@1.0.2: {}
@@ -10707,11 +10451,9 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici-types@7.18.2: {}
-
   unhead@2.1.4:
     dependencies:
-      hookable: 6.0.1
+      hookable: 6.1.0
 
   unicode-trie@2.0.0:
     dependencies:
@@ -10799,8 +10541,8 @@ snapshots:
       anymatch: 3.1.3
       chokidar: 5.0.0
       destr: 2.0.5
-      h3: 1.15.5
-      lru-cache: 11.2.5
+      h3: 1.15.10
+      lru-cache: 11.2.7
       node-fetch-native: 1.6.7
       ofetch: 1.5.1
       ufo: 1.6.3
@@ -10849,12 +10591,6 @@ snapshots:
     dependencies:
       react: 19.2.4
 
-  util-deprecate@1.0.2: {}
-
-  utrie@1.0.2:
-    dependencies:
-      base64-arraybuffer: 1.0.2
-
   uuid@10.0.0: {}
 
   uuid@11.1.0: {}
@@ -10878,11 +10614,11 @@ snapshots:
 
   vite@7.3.1(@types/node@20.19.33)(jiti@2.6.1)(lightningcss@1.30.2):
     dependencies:
-      esbuild: 0.27.3
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.57.1
+      esbuild: 0.27.4
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+      postcss: 8.5.8
+      rollup: 4.60.0
       tinyglobby: 0.2.15
     optionalDependencies:
       '@types/node': 20.19.33
@@ -10970,12 +10706,6 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
-  xml-js@1.6.11:
-    dependencies:
-      sax: 1.6.0
-
-  xml@1.0.1: {}
-
   yocto-queue@0.1.0: {}
 
   yoctocolors@2.1.2: {}
diff --git a/frontend/pnpm-workspace.yaml b/frontend/pnpm-workspace.yaml
index e5d2b9e2..aefc3b61 100644
--- a/frontend/pnpm-workspace.yaml
+++ b/frontend/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
+packages: []
 ignoredBuiltDependencies:
   - esbuild
   - sharp
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 4a2f1953..c36c68f1 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -2,7 +2,6 @@ import "@/styles/globals.css";
 import "katex/dist/katex.min.css";
 
 import { type Metadata } from "next";
-import { Geist } from "next/font/google";
 
 import { ThemeProvider } from "@/components/theme-provider";
 import { I18nProvider } from "@/core/i18n/context";
@@ -13,22 +12,12 @@ export const metadata: Metadata = {
   description: "A LangChain-based framework for building super agents.",
 };
 
-const geist = Geist({
-  subsets: ["latin"],
-  variable: "--font-geist-sans",
-});
-
 export default async function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   const locale = await detectLocaleServer();
   return (
-    <html
-      lang={locale}
-      className={geist.variable + ""}
-      suppressContentEditableWarning
-      suppressHydrationWarning
-    >
+    <html lang={locale} suppressContentEditableWarning suppressHydrationWarning>
       <body>
         <ThemeProvider attribute="class" enableSystem disableTransitionOnChange>
           <I18nProvider initialLocale={locale}>{children}</I18nProvider>
diff --git a/frontend/src/app/mock/api/models/route.ts b/frontend/src/app/mock/api/models/route.ts
index 5768e160..e0a2eb1e 100644
--- a/frontend/src/app/mock/api/models/route.ts
+++ b/frontend/src/app/mock/api/models/route.ts
@@ -4,24 +4,28 @@ export function GET() {
       {
         id: "doubao-seed-1.8",
         name: "doubao-seed-1.8",
+        model: "doubao-seed-1-8",
         display_name: "Doubao Seed 1.8",
         supports_thinking: true,
       },
       {
         id: "deepseek-v3.2",
         name: "deepseek-v3.2",
+        model: "deepseek-chat",
         display_name: "DeepSeek v3.2",
         supports_thinking: true,
       },
       {
         id: "gpt-5",
         name: "gpt-5",
+        model: "gpt-5",
         display_name: "GPT-5",
         supports_thinking: true,
       },
       {
         id: "gemini-3-pro",
         name: "gemini-3-pro",
+        model: "gemini-3-pro",
         display_name: "Gemini 3 Pro",
         supports_thinking: true,
       },
diff --git a/frontend/src/app/mock/api/threads/search/route.ts b/frontend/src/app/mock/api/threads/search/route.ts
index 93c48348..74ba79a3 100644
--- a/frontend/src/app/mock/api/threads/search/route.ts
+++ b/frontend/src/app/mock/api/threads/search/route.ts
@@ -1,27 +1,84 @@
 import fs from "fs";
 import path from "path";
 
-export function POST() {
+type ThreadSearchRequest = {
+  limit?: number;
+  offset?: number;
+  sortBy?: "updated_at" | "created_at";
+  sortOrder?: "asc" | "desc";
+};
+
+type MockThreadSearchResult = Record<string, unknown> & {
+  thread_id: string;
+  updated_at: string | undefined;
+};
+
+export async function POST(request: Request) {
+  const body = ((await request.json().catch(() => ({}))) ?? {}) as ThreadSearchRequest;
+
+  const rawLimit = body.limit;
+  let limit = 50;
+  if (typeof rawLimit === "number") {
+    const normalizedLimit = Math.max(0, Math.floor(rawLimit));
+    if (!Number.isNaN(normalizedLimit)) {
+      limit = normalizedLimit;
+    }
+  }
+
+  const rawOffset = body.offset;
+  let offset = 0;
+  if (typeof rawOffset === "number") {
+    const normalizedOffset = Math.max(0, Math.floor(rawOffset));
+    if (!Number.isNaN(normalizedOffset)) {
+      offset = normalizedOffset;
+    }
+  }
+  const sortBy = body.sortBy ?? "updated_at";
+  const sortOrder = body.sortOrder ?? "desc";
+
   const threadsDir = fs.readdirSync(
     path.resolve(process.cwd(), "public/demo/threads"),
     {
       withFileTypes: true,
     },
   );
+
   const threadData = threadsDir
-    .map((threadId) => {
+    .map<MockThreadSearchResult | null>((threadId) => {
       if (threadId.isDirectory() && !threadId.name.startsWith(".")) {
-        const threadData = fs.readFileSync(
-          path.resolve(`public/demo/threads/${threadId.name}/thread.json`),
-          "utf8",
-        );
+        const threadData = JSON.parse(
+          fs.readFileSync(
+            path.resolve(`public/demo/threads/${threadId.name}/thread.json`),
+            "utf8",
+          ),
+        ) as Record<string, unknown>;
+
         return {
+          ...threadData,
           thread_id: threadId.name,
-          values: JSON.parse(threadData).values,
+          updated_at:
+            typeof threadData.updated_at === "string"
+              ? threadData.updated_at
+              : typeof threadData.created_at === "string"
+                ? threadData.created_at
+                : undefined,
         };
       }
-      return false;
+      return null;
     })
-    .filter(Boolean);
-  return Response.json(threadData);
+    .filter((thread): thread is MockThreadSearchResult => thread !== null)
+    .sort((a, b) => {
+      const aTimestamp = a[sortBy];
+      const bTimestamp = b[sortBy];
+      const aParsed =
+        typeof aTimestamp === "string" ? Date.parse(aTimestamp) : 0;
+      const bParsed =
+        typeof bTimestamp === "string" ? Date.parse(bTimestamp) : 0;
+      const aValue = Number.isNaN(aParsed) ? 0 : aParsed;
+      const bValue = Number.isNaN(bParsed) ? 0 : bParsed;
+      return sortOrder === "asc" ? aValue - bValue : bValue - aValue;
+    });
+
+  const pagedThreads = threadData.slice(offset, offset + limit);
+  return Response.json(pagedThreads);
 }
diff --git a/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/layout.tsx b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/layout.tsx
new file mode 100644
index 00000000..68f51b60
--- /dev/null
+++ b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/layout.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { PromptInputProvider } from "@/components/ai-elements/prompt-input";
+import { ArtifactsProvider } from "@/components/workspace/artifacts";
+import { SubtasksProvider } from "@/core/tasks/context";
+
+export default function AgentChatLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <SubtasksProvider>
+      <ArtifactsProvider>
+        <PromptInputProvider>{children}</PromptInputProvider>
+      </ArtifactsProvider>
+    </SubtasksProvider>
+  );
+}
diff --git a/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
new file mode 100644
index 00000000..12ba855e
--- /dev/null
+++ b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+import { BotIcon, PlusSquare } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { useCallback } from "react";
+
+import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
+import { Button } from "@/components/ui/button";
+import { AgentWelcome } from "@/components/workspace/agent-welcome";
+import { ArtifactTrigger } from "@/components/workspace/artifacts";
+import { ChatBox, useThreadChat } from "@/components/workspace/chats";
+import { ExportTrigger } from "@/components/workspace/export-trigger";
+import { InputBox } from "@/components/workspace/input-box";
+import { MessageList } from "@/components/workspace/messages";
+import { ThreadContext } from "@/components/workspace/messages/context";
+import { ThreadTitle } from "@/components/workspace/thread-title";
+import { TodoList } from "@/components/workspace/todo-list";
+import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicator";
+import { Tooltip } from "@/components/workspace/tooltip";
+import { useAgent } from "@/core/agents";
+import { useI18n } from "@/core/i18n/hooks";
+import { useNotification } from "@/core/notification/hooks";
+import { useLocalSettings } from "@/core/settings";
+import { useThreadStream } from "@/core/threads/hooks";
+import { textOfMessage } from "@/core/threads/utils";
+import { env } from "@/env";
+import { cn } from "@/lib/utils";
+
+export default function AgentChatPage() {
+  const { t } = useI18n();
+  const [settings, setSettings] = useLocalSettings();
+  const router = useRouter();
+
+  const { agent_name } = useParams<{
+    agent_name: string;
+  }>();
+
+  const { agent } = useAgent(agent_name);
+
+  const { threadId, isNewThread, setIsNewThread } = useThreadChat();
+
+  const { showNotification } = useNotification();
+  const [thread, sendMessage] = useThreadStream({
+    threadId: isNewThread ? undefined : threadId,
+    context: { ...settings.context, agent_name: agent_name },
+    onStart: () => {
+      setIsNewThread(false);
+      // ! Important: Never use next.js router for navigation in this case, otherwise it will cause the thread to re-mount and lose all states. Use native history API instead.
+      history.replaceState(
+        null,
+        "",
+        `/workspace/agents/${agent_name}/chats/${threadId}`,
+      );
+    },
+    onFinish: (state) => {
+      if (document.hidden || !document.hasFocus()) {
+        let body = "Conversation finished";
+        const lastMessage = state.messages[state.messages.length - 1];
+        if (lastMessage) {
+          const textContent = textOfMessage(lastMessage);
+          if (textContent) {
+            body =
+              textContent.length > 200
+                ? textContent.substring(0, 200) + "..."
+                : textContent;
+          }
+        }
+        showNotification(state.title, { body });
+      }
+    },
+  });
+
+  const handleSubmit = useCallback(
+    (message: PromptInputMessage) => {
+      void sendMessage(threadId, message, { agent_name });
+    },
+    [sendMessage, threadId, agent_name],
+  );
+
+  const handleStop = useCallback(async () => {
+    await thread.stop();
+  }, [thread]);
+
+  return (
+    <ThreadContext.Provider value={{ thread }}>
+      <ChatBox threadId={threadId}>
+        <div className="relative flex size-full min-h-0 justify-between">
+          <header
+            className={cn(
+              "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center gap-2 px-4",
+              isNewThread
+                ? "bg-background/0 backdrop-blur-none"
+                : "bg-background/80 shadow-xs backdrop-blur",
+            )}
+          >
+            {/* Agent badge */}
+            <div className="flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1">
+              <BotIcon className="text-primary h-3.5 w-3.5" />
+              <span className="text-xs font-medium">
+                {agent?.name ?? agent_name}
+              </span>
+            </div>
+
+            <div className="flex w-full items-center text-sm font-medium">
+              <ThreadTitle threadId={threadId} thread={thread} />
+            </div>
+            <div className="mr-4 flex items-center">
+              <Tooltip content={t.agents.newChat}>
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={() => {
+                    router.push(`/workspace/agents/${agent_name}/chats/new`);
+                  }}
+                >
+                  <PlusSquare /> {t.agents.newChat}
+                </Button>
+              </Tooltip>
+              <TokenUsageIndicator messages={thread.messages} />
+              <ExportTrigger threadId={threadId} />
+              <ArtifactTrigger />
+            </div>
+          </header>
+
+          <main className="flex min-h-0 max-w-full grow flex-col">
+            <div className="flex size-full justify-center">
+              <MessageList
+                className={cn("size-full", !isNewThread && "pt-10")}
+                threadId={threadId}
+                thread={thread}
+              />
+            </div>
+
+            <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
+              <div
+                className={cn(
+                  "relative w-full",
+                  isNewThread && "-translate-y-[calc(50vh-96px)]",
+                  isNewThread
+                    ? "max-w-(--container-width-sm)"
+                    : "max-w-(--container-width-md)",
+                )}
+              >
+                <div className="absolute -top-4 right-0 left-0 z-0">
+                  <div className="absolute right-0 bottom-0 left-0">
+                    <TodoList
+                      className="bg-background/5"
+                      todos={thread.values.todos ?? []}
+                      hidden={
+                        !thread.values.todos || thread.values.todos.length === 0
+                      }
+                    />
+                  </div>
+                </div>
+
+                <InputBox
+                  className={cn("bg-background/5 w-full -translate-y-4")}
+                  isNewThread={isNewThread}
+                  threadId={threadId}
+                  autoFocus={isNewThread}
+                  status={
+                    thread.error
+                      ? "error"
+                      : thread.isLoading
+                        ? "streaming"
+                        : "ready"
+                  }
+                  context={settings.context}
+                  extraHeader={
+                    isNewThread && (
+                      <AgentWelcome agent={agent} agentName={agent_name} />
+                    )
+                  }
+                  disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"}
+                  onContextChange={(context) => setSettings("context", context)}
+                  onSubmit={handleSubmit}
+                  onStop={handleStop}
+                />
+                {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
+                  <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
+                    {t.common.notAvailableInDemoMode}
+                  </div>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      </ChatBox>
+    </ThreadContext.Provider>
+  );
+}
diff --git a/frontend/src/app/workspace/agents/new/page.tsx b/frontend/src/app/workspace/agents/new/page.tsx
new file mode 100644
index 00000000..9424a5f5
--- /dev/null
+++ b/frontend/src/app/workspace/agents/new/page.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { ArrowLeftIcon, BotIcon, CheckCircleIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+
+import {
+  PromptInput,
+  PromptInputFooter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+} from "@/components/ai-elements/prompt-input";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ArtifactsProvider } from "@/components/workspace/artifacts";
+import { MessageList } from "@/components/workspace/messages";
+import { ThreadContext } from "@/components/workspace/messages/context";
+import type { Agent } from "@/core/agents";
+import { checkAgentName, getAgent } from "@/core/agents/api";
+import { useI18n } from "@/core/i18n/hooks";
+import { useThreadStream } from "@/core/threads/hooks";
+import { uuid } from "@/core/utils/uuid";
+import { cn } from "@/lib/utils";
+
+type Step = "name" | "chat";
+
+const NAME_RE = /^[A-Za-z0-9-]+$/;
+
+export default function NewAgentPage() {
+  const { t } = useI18n();
+  const router = useRouter();
+
+  // ── Step 1: name form ──────────────────────────────────────────────────────
+  const [step, setStep] = useState<Step>("name");
+  const [nameInput, setNameInput] = useState("");
+  const [nameError, setNameError] = useState("");
+  const [isCheckingName, setIsCheckingName] = useState(false);
+  const [agentName, setAgentName] = useState("");
+  const [agent, setAgent] = useState<Agent | null>(null);
+  // ── Step 2: chat ───────────────────────────────────────────────────────────
+
+  // Stable thread ID — all turns belong to the same thread
+  const threadId = useMemo(() => uuid(), []);
+
+  const [thread, sendMessage] = useThreadStream({
+    threadId: step === "chat" ? threadId : undefined,
+    context: {
+      mode: "flash",
+      is_bootstrap: true,
+    },
+    onToolEnd({ name }) {
+      if (name !== "setup_agent" || !agentName) return;
+      getAgent(agentName)
+        .then((fetched) => setAgent(fetched))
+        .catch(() => {
+          // agent write may not be flushed yet — ignore silently
+        });
+    },
+  });
+
+  // ── Handlers ───────────────────────────────────────────────────────────────
+
+  const handleConfirmName = useCallback(async () => {
+    const trimmed = nameInput.trim();
+    if (!trimmed) return;
+    if (!NAME_RE.test(trimmed)) {
+      setNameError(t.agents.nameStepInvalidError);
+      return;
+    }
+    setNameError("");
+    setIsCheckingName(true);
+    try {
+      const result = await checkAgentName(trimmed);
+      if (!result.available) {
+        setNameError(t.agents.nameStepAlreadyExistsError);
+        return;
+      }
+    } catch {
+      setNameError(t.agents.nameStepCheckError);
+      return;
+    } finally {
+      setIsCheckingName(false);
+    }
+    setAgentName(trimmed);
+    setStep("chat");
+    await sendMessage(threadId, {
+      text: t.agents.nameStepBootstrapMessage.replace("{name}", trimmed),
+      files: [],
+    });
+  }, [
+    nameInput,
+    sendMessage,
+    threadId,
+    t.agents.nameStepBootstrapMessage,
+    t.agents.nameStepInvalidError,
+    t.agents.nameStepAlreadyExistsError,
+    t.agents.nameStepCheckError,
+  ]);
+
+  const handleNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      void handleConfirmName();
+    }
+  };
+
+  const handleChatSubmit = useCallback(
+    async (text: string) => {
+      const trimmed = text.trim();
+      if (!trimmed || thread.isLoading) return;
+      await sendMessage(
+        threadId,
+        { text: trimmed, files: [] },
+        { agent_name: agentName },
+      );
+    },
+    [thread.isLoading, sendMessage, threadId, agentName],
+  );
+
+  // ── Shared header ──────────────────────────────────────────────────────────
+
+  const header = (
+    <header className="flex shrink-0 items-center gap-3 border-b px-4 py-3">
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        onClick={() => router.push("/workspace/agents")}
+      >
+        <ArrowLeftIcon className="h-4 w-4" />
+      </Button>
+      <h1 className="text-sm font-semibold">{t.agents.createPageTitle}</h1>
+    </header>
+  );
+
+  // ── Step 1: name form ──────────────────────────────────────────────────────
+
+  if (step === "name") {
+    return (
+      <div className="flex size-full flex-col">
+        {header}
+        <main className="flex flex-1 flex-col items-center justify-center px-4">
+          <div className="w-full max-w-sm space-y-8">
+            <div className="space-y-3 text-center">
+              <div className="bg-primary/10 mx-auto flex h-14 w-14 items-center justify-center rounded-full">
+                <BotIcon className="text-primary h-7 w-7" />
+              </div>
+              <div className="space-y-1">
+                <h2 className="text-xl font-semibold">
+                  {t.agents.nameStepTitle}
+                </h2>
+                <p className="text-muted-foreground text-sm">
+                  {t.agents.nameStepHint}
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-3">
+              <Input
+                autoFocus
+                placeholder={t.agents.nameStepPlaceholder}
+                value={nameInput}
+                onChange={(e) => {
+                  setNameInput(e.target.value);
+                  setNameError("");
+                }}
+                onKeyDown={handleNameKeyDown}
+                className={cn(nameError && "border-destructive")}
+              />
+              {nameError && (
+                <p className="text-destructive text-sm">{nameError}</p>
+              )}
+              <Button
+                className="w-full"
+                onClick={() => void handleConfirmName()}
+                disabled={!nameInput.trim() || isCheckingName}
+              >
+                {t.agents.nameStepContinue}
+              </Button>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
+
+  // ── Step 2: chat ───────────────────────────────────────────────────────────
+
+  return (
+    <ThreadContext.Provider value={{ thread }}>
+      <ArtifactsProvider>
+        <div className="flex size-full flex-col">
+          {header}
+
+          <main className="flex min-h-0 flex-1 flex-col">
+            {/* ── Message area ── */}
+            <div className="flex min-h-0 flex-1 justify-center">
+              <MessageList
+                className="size-full pt-10"
+                threadId={threadId}
+                thread={thread}
+              />
+            </div>
+
+            {/* ── Bottom action area ── */}
+            <div className="bg-background flex shrink-0 justify-center border-t px-4 py-4">
+              <div className="w-full max-w-(--container-width-md)">
+                {agent ? (
+                  // ✅ Success card
+                  <div className="flex flex-col items-center gap-4 rounded-2xl border py-8 text-center">
+                    <CheckCircleIcon className="text-primary h-10 w-10" />
+                    <p className="font-semibold">{t.agents.agentCreated}</p>
+                    <div className="flex gap-2">
+                      <Button
+                        onClick={() =>
+                          router.push(
+                            `/workspace/agents/${agentName}/chats/new`,
+                          )
+                        }
+                      >
+                        {t.agents.startChatting}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        onClick={() => router.push("/workspace/agents")}
+                      >
+                        {t.agents.backToGallery}
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  // 📝 Normal input
+                  <PromptInput
+                    onSubmit={({ text }) => void handleChatSubmit(text)}
+                  >
+                    <PromptInputTextarea
+                      autoFocus
+                      placeholder={t.agents.createPageSubtitle}
+                      disabled={thread.isLoading}
+                    />
+                    <PromptInputFooter className="justify-end">
+                      <PromptInputSubmit disabled={thread.isLoading} />
+                    </PromptInputFooter>
+                  </PromptInput>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      </ArtifactsProvider>
+    </ThreadContext.Provider>
+  );
+}
diff --git a/frontend/src/app/workspace/agents/page.tsx b/frontend/src/app/workspace/agents/page.tsx
new file mode 100644
index 00000000..46fdbf2f
--- /dev/null
+++ b/frontend/src/app/workspace/agents/page.tsx
@@ -0,0 +1,5 @@
+import { AgentGallery } from "@/components/workspace/agents/agent-gallery";
+
+export default function AgentsPage() {
+  return <AgentGallery />;
+}
diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index a7e4f329..6241100a 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -1,557 +1,157 @@
 "use client";
 
-import type { Message } from "@langchain/langgraph-sdk";
-import type { UseStream } from "@langchain/langgraph-sdk/react";
-import { FilesIcon, ListTodoIcon, XIcon } from "lucide-react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback } from "react";
 
-import { ConversationEmptyState } from "@/components/ai-elements/conversation";
-import { usePromptInputController } from "@/components/ai-elements/prompt-input";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
+import { type PromptInputMessage } from "@/components/ai-elements/prompt-input";
+import { ArtifactTrigger } from "@/components/workspace/artifacts";
 import {
-  DevDialog,
-  DevDialogContent,
-  DevDialogFooter,
-  DevDialogHeader,
-  DevDialogTitle,
-} from "@/components/ui/dev-dialog";
-import { useSidebar } from "@/components/ui/sidebar";
-import {
-  ArtifactFileDetail,
-  ArtifactFileList,
-  useArtifacts,
-} from "@/components/workspace/artifacts";
-import { DevTodoList } from "@/components/workspace/dev-todo-list";
-import { IframeTestPanel } from "@/components/workspace/iframe-test-panel";
+  ChatBox,
+  useSpecificChatMode,
+  useThreadChat,
+} from "@/components/workspace/chats";
+import { ExportTrigger } from "@/components/workspace/export-trigger";
 import { InputBox } from "@/components/workspace/input-box";
 import { MessageList } from "@/components/workspace/messages";
 import { ThreadContext } from "@/components/workspace/messages/context";
 import { ThreadTitle } from "@/components/workspace/thread-title";
 import { TodoList } from "@/components/workspace/todo-list";
-import { Tooltip } from "@/components/workspace/tooltip";
-import { useSpecificChatMode } from "@/components/workspace/use-chat-mode";
+import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicator";
 import { Welcome } from "@/components/workspace/welcome";
 import { useI18n } from "@/core/i18n/hooks";
 import { useNotification } from "@/core/notification/hooks";
 import { useLocalSettings } from "@/core/settings";
-import { bootstrapRemoteSkill } from "@/core/skills";
-import { type AgentThread, type AgentThreadState } from "@/core/threads";
-import { useSubmitThread, useThreadStream } from "@/core/threads/hooks";
-import {
-  pathOfThread,
-  textOfMessage,
-  titleOfThread,
-} from "@/core/threads/utils";
-import { uuid } from "@/core/utils/uuid";
+import { useThreadStream } from "@/core/threads/hooks";
+import { textOfMessage } from "@/core/threads/utils";
 import { env } from "@/env";
-import { useSelectedSkillListener } from "@/hooks/use-selected-skill-listener";
 import { cn } from "@/lib/utils";
 
 export default function ChatPage() {
   const { t } = useI18n();
-  const router = useRouter();
-  useSpecificChatMode();
   const [settings, setSettings] = useLocalSettings();
-  const { setOpen: setSidebarOpen } = useSidebar();
-  const {
-    artifacts,
-    open: artifactsOpen,
-    setOpen: setArtifactsOpen,
-    setArtifacts,
-    select: selectArtifact,
-    selectedArtifact,
-    fullscreen,
-  } = useArtifacts();
-  const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
-  const searchParams = useSearchParams();
-  const promptInputController = usePromptInputController();
 
-  // UI mode depends only on route: /workspace/chats/new is always "new page" mode.
-  const isNewThread = useMemo(
-    () => threadIdFromPath === "new",
-    [threadIdFromPath],
-  );
-
-  // Submission strategy is controlled by `isnew` query param only.
-  // - isnew=false: reuse existing thread
-  // - otherwise: create/start a new session
-  const createNewSession = useMemo(() => {
-    if (threadIdFromPath !== "new") {
-      return false;
-    }
-
-    return searchParams.get("isnew")?.trim().toLowerCase() !== "false";
-  }, [threadIdFromPath, searchParams]);
-
-  const uploadTarget = useMemo(() => {
-    const target = searchParams.get("upload_target")?.trim().toLowerCase();
-    return target === "skill" ? "skill" : undefined;
-  }, [searchParams]);
-
-  const [threadId, setThreadId] = useState<string | null>(null);
-  useEffect(() => {
-    if (threadIdFromPath !== "new") {
-      setThreadId(threadIdFromPath);
-    } else {
-      const queryThreadId = searchParams.get("thread_id")?.trim();
-      setThreadId(queryThreadId ?? uuid());
-    }
-  }, [threadIdFromPath, searchParams]);
-
-  // Runtime strategy for /new page:
-  // - UI remains new-page mode
-  // - if isnew=false, execute against existing thread_id without creating a new one
-  const reuseExistingThread = useMemo(
-    () => threadIdFromPath === "new" && !createNewSession && !!threadId,
-    [threadIdFromPath, createNewSession, threadId],
-  );
+  const { threadId, isNewThread, setIsNewThread, isMock } = useThreadChat();
+  useSpecificChatMode();
 
   const { showNotification } = useNotification();
 
-  // 监听宿主页 selectedSkill 消息
-  const {
-    selectedSkill,
-    skillError: selectedSkillError,
-    clearSkillError: clearSelectedSkillError,
-    isBootstrapping: isSelectedSkillBootstrapping,
-  } = useSelectedSkillListener({ threadId });
-  const [finalState, setFinalState] = useState<AgentThreadState | null>(null);
-  const thread = useThreadStream({
-    // Keep UI in new-page mode, but runtime may reuse existing thread
-    isNewThread: reuseExistingThread ? false : isNewThread,
-    threadId,
-    fetchStateHistory: true,
+  const [thread, sendMessage, isUploading] = useThreadStream({
+    threadId: isNewThread ? undefined : threadId,
+    context: settings.context,
+    isMock,
+    onStart: () => {
+      setIsNewThread(false);
+      // ! Important: Never use next.js router for navigation in this case, otherwise it will cause the thread to re-mount and lose all states. Use native history API instead.
+      history.replaceState(null, "", `/workspace/chats/${threadId}`);
+    },
     onFinish: (state) => {
-      setFinalState(state);
-      // 新对话完成后导航到对话页面
-      if (isNewThread && threadId) {
-        router.push(pathOfThread(threadId));
-      }
       if (document.hidden || !document.hasFocus()) {
         let body = "Conversation finished";
-        const lastMessage = state.messages[state.messages.length - 1];
+        const lastMessage = state.messages.at(-1);
         if (lastMessage) {
           const textContent = textOfMessage(lastMessage);
           if (textContent) {
-            if (textContent.length > 200) {
-              body = textContent.substring(0, 200) + "...";
-            } else {
-              body = textContent;
-            }
+            body =
+              textContent.length > 200
+                ? textContent.substring(0, 200) + "..."
+                : textContent;
           }
         }
-        showNotification(state.title, {
-          body,
-        });
+        showNotification(state.title, { body });
       }
     },
-  }) as unknown as UseStream<AgentThreadState>;
-  useEffect(() => {
-    if (thread.isLoading) setFinalState(null);
-  }, [thread.isLoading]);
-
-  const title = useMemo(() => {
-    let result = isNewThread
-      ? ""
-      : titleOfThread(thread as unknown as AgentThread);
-    if (result === "Untitled") {
-      result = "";
-    }
-    return result;
-  }, [thread, isNewThread]);
-
-  const [hasSubmitted, setHasSubmitted] = useState(false);
-  const suppressExistingThreadPrefetchUi = reuseExistingThread && !hasSubmitted;
-
-  useEffect(() => {
-    const pageTitle = isNewThread
-      ? t.pages.newChat
-      : thread.values?.title && thread.values.title !== "Untitled"
-        ? thread.values.title
-        : t.pages.untitled;
-    if (thread.isThreadLoading && !suppressExistingThreadPrefetchUi) {
-      document.title = `Loading... - ${t.pages.appName}`;
-    } else {
-      document.title = `${pageTitle} - ${t.pages.appName}`;
-    }
-  }, [
-    isNewThread,
-    t.pages.newChat,
-    t.pages.untitled,
-    t.pages.appName,
-    thread.values.title,
-    thread.isThreadLoading,
-    suppressExistingThreadPrefetchUi,
-  ]);
-
-  const [autoSelectFirstArtifact, setAutoSelectFirstArtifact] = useState(true);
-  useEffect(() => {
-    setArtifacts(thread.values.artifacts);
-    if (
-      env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" &&
-      autoSelectFirstArtifact
-    ) {
-      if (thread?.values?.artifacts?.length > 0) {
-        setAutoSelectFirstArtifact(false);
-        selectArtifact(thread.values.artifacts[0]!);
-      }
-    }
-  }, [
-    autoSelectFirstArtifact,
-    selectArtifact,
-    setArtifacts,
-    thread.values.artifacts,
-  ]);
-
-  const artifactPanelOpen = useMemo(() => {
-    if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true") {
-      return artifactsOpen && artifacts?.length > 0;
-    }
-    return artifactsOpen;
-  }, [artifactsOpen, artifacts]);
-
-  const [todoListCollapsed, setTodoListCollapsed] = useState(true);
-  const [showExitDialog, setShowExitDialog] = useState(false);
-
-  const submitThread = useSubmitThread({
-    isNewThread,
-    createNewSession,
-    threadId,
-    thread,
-    uploadTarget,
-    threadContext: {
-      ...settings.context,
-      thinking_enabled: settings.context.mode !== "flash",
-      is_plan_mode:
-        settings.context.mode === "pro" || settings.context.mode === "ultra",
-      subagent_enabled: settings.context.mode === "ultra",
-    },
-    afterSubmit() {
-      // 导航已在 onFinish 中处理，确保 stream 完成后再导航
-    },
   });
+
   const handleSubmit = useCallback(
-    (message: Parameters<typeof submitThread>[0]) => {
-      if (isSelectedSkillBootstrapping) {
-        return;
-      }
-      setHasSubmitted(true);
-      void submitThread(message);
+    (message: PromptInputMessage) => {
+      void sendMessage(threadId, message);
     },
-    [isSelectedSkillBootstrapping, submitThread],
+    [sendMessage, threadId],
   );
   const handleStop = useCallback(async () => {
     await thread.stop();
   }, [thread]);
 
-  if (!threadId) {
-    return null;
-  }
-
   return (
-    <ThreadContext.Provider value={{ threadId, thread }}>
-      <div
-        className={cn(
-          "m-auto flex h-screen min-h-svh overflow-hidden rounded-t-[20px] transition-[width] duration-300 ease-in-out",
-          artifactsOpen ? "w-full" : "w-[70%]",
-        )}
-      >
-        <div className="relative flex size-full min-h-0 justify-between rounded-t-[20px]">
-          <div
+    <ThreadContext.Provider value={{ thread, isMock }}>
+      <ChatBox threadId={threadId}>
+        <div className="relative flex size-full min-h-0 justify-between">
+          <header
             className={cn(
-              "relative overflow-hidden rounded-t-[20px] transition-all duration-300 ease-in-out",
-              artifactPanelOpen ? "w-[50%]" : "w-full",
-              fullscreen && "hidden",
+              "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center px-4",
+              isNewThread
+                ? "bg-background/0 backdrop-blur-none"
+                : "bg-background/80 shadow-xs backdrop-blur",
             )}
           >
-            <div className="relative flex size-full min-h-0 justify-between rounded-t-[20px]">
-              <header
-                className={cn(
-                  "bg-background absolute top-0 right-0 left-0 z-30 mx-4 grid h-[58px] shrink-0 grid-cols-3 items-center border-b transition-all duration-300 ease-in-out",
-                  isNewThread && !hasSubmitted ? "hidden" : "",
-                )}
-              >
-                <div className="flex items-center justify-start overflow-hidden text-sm font-medium">
-                  <Button
-                    size="sm"
-                    variant="ghost"
-                    className="px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]/80"
-                    onClick={() => setShowExitDialog(true)}
-                  >
-                    <svg
-                      width="20"
-                      height="20"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M3.5 10H13.25H15.6875H16.5M3.5 10L7.5625 6M3.5 10L7.5625 14"
-                        stroke="#666666"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </Button>
-                </div>
-                <div className="flex items-center justify-center overflow-hidden text-sm font-bold font-medium whitespace-nowrap text-[#333333]">
-                  {title !== "Untitled" && (
-                    <ThreadTitle threadId={threadId} threadTitle={title} />
-                  )}
-                </div>
-                <div className="flex items-center justify-end gap-2 overflow-hidden">
-                  <DevTodoList
-                    className="bg-white"
-                    todos={thread.values.todos ?? []}
-                    hidden={
-                      !thread.values.todos || thread.values.todos.length === 0
-                    }
-                    trigger={
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        className="h-full px-[10px] py-[5px] text-sm font-medium text-[#150033] hover:text-[#150033]"
-                      >
-                        <ListTodoIcon className="size-4" /> To-dos
-                      </Button>
-                    }
-                  />
-
-                  {artifacts?.length > 0 && !artifactsOpen && (
-                    <Tooltip content="点击可查看生成的文件结果">
-                      <Button
-                        className="text-[#150033] hover:text-[#150033]/80"
-                        variant="ghost"
-                        onClick={() => {
-                          setArtifactsOpen(true);
-                          setSidebarOpen(false);
-                        }}
-                      >
-                        <FilesIcon />
-                        {t.common.artifacts}
-                      </Button>
-                    </Tooltip>
-                  )}
-                </div>
-              </header>
-              <main
-                className={cn(
-                  "flex min-h-0 max-w-full grow flex-col",
-                  isNewThread && !hasSubmitted ? "bg-white" : "bg-background",
-                )}
-              >
-                <div className="flex size-full justify-center">
-                  <MessageList
-                    className={cn(
-                      "size-full",
-                      (!isNewThread || hasSubmitted) && "pt-[20px]",
-                    )}
-                    threadId={threadId}
-                    thread={thread}
-                    suppressThreadLoading={suppressExistingThreadPrefetchUi}
-                    messagesOverride={
-                      suppressExistingThreadPrefetchUi
-                        ? []
-                        : !thread.isLoading && finalState?.messages
-                          ? (finalState.messages as Message[])
-                          : undefined
-                    }
-                    paddingBottom={todoListCollapsed ? 160 : 280}
-                  />
-                </div>
-              </main>
+            <div className="flex w-full items-center text-sm font-medium">
+              <ThreadTitle threadId={threadId} thread={thread} />
             </div>
-          </div>
-          <div
-            className={cn(
-              "bg-background ml-[20px] rounded-t-[20px] transition-all duration-300 ease-in-out",
-              !artifactsOpen && "opacity-0",
-              artifactPanelOpen
-                ? fullscreen
-                  ? "ml-0 w-full"
-                  : "w-[50%]"
-                : "w-0",
-            )}
-          >
-            <div
-              className={cn(
-                "h-full w-full transition-transform duration-300 ease-in-out",
-                artifactPanelOpen ? "translate-x-0" : "translate-x-full",
-              )}
-            >
-              {selectedArtifact ? (
-                <ArtifactFileDetail
-                  className="size-full"
-                  filepath={selectedArtifact}
-                  threadId={threadId}
-                />
-              ) : (
-                <div className="relative flex size-full justify-center px-[20px]">
-                  <div className="absolute top-2 right-2 z-30">
-                    <Button
-                      size="icon-sm"
-                      variant="ghost"
-                      onClick={() => {
-                        setArtifactsOpen(false);
-                      }}
-                    >
-                      <XIcon />
-                    </Button>
-                  </div>
-                  {thread.values.artifacts?.length === 0 ? (
-                    <ConversationEmptyState
-                      icon={<FilesIcon />}
-                      title="No artifact selected"
-                      description="Select an artifact to view its details"
+            <div className="flex items-center gap-2">
+              <TokenUsageIndicator messages={thread.messages} />
+              <ExportTrigger threadId={threadId} />
+              <ArtifactTrigger />
+            </div>
+          </header>
+          <main className="flex min-h-0 max-w-full grow flex-col">
+            <div className="flex size-full justify-center">
+              <MessageList
+                className={cn("size-full", !isNewThread && "pt-10")}
+                threadId={threadId}
+                thread={thread}
+              />
+            </div>
+            <div className="absolute right-0 bottom-0 left-0 z-30 flex justify-center px-4">
+              <div
+                className={cn(
+                  "relative w-full",
+                  isNewThread && "-translate-y-[calc(50vh-96px)]",
+                  isNewThread
+                    ? "max-w-(--container-width-sm)"
+                    : "max-w-(--container-width-md)",
+                )}
+              >
+                <div className="absolute -top-4 right-0 left-0 z-0">
+                  <div className="absolute right-0 bottom-0 left-0">
+                    <TodoList
+                      className="bg-background/5"
+                      todos={thread.values.todos ?? []}
+                      hidden={
+                        !thread.values.todos || thread.values.todos.length === 0
+                      }
                     />
-                  ) : (
-                    <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4">
-                      <header className="shrink-0">
-                        <h2 className="text-[14px] font-bold text-[#333333]">
-                          {t.common.artifacts}
-                        </h2>
-                      </header>
-                      <main className="min-h-0 grow">
-                        <ArtifactFileList
-                          className="max-w-(--container-width-sm) p-4 pt-12"
-                          files={thread.values.artifacts ?? []}
-                          threadId={threadId}
-                        />
-                      </main>
-                    </div>
-                  )}
+                  </div>
                 </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Fixed 底部居中输入框容器 */}
-        <div
-          className={cn(
-            "pointer-events-none fixed right-0 bottom-3 left-0 z-30 flex justify-center px-4",
-            "transition-all duration-300 ease-in-out",
-            fullscreen ? "hidden" : "",
-          )}
-        >
-          <div
-            className={cn(
-              "pointer-events-auto relative w-full max-w-[720px]",
-              isNewThread && !hasSubmitted && "-translate-y-[calc(50vh-96px)]",
-            )}
-          >
-            <InputBox
-              className={cn("w-full rounded-[20px] bg-[#FBFAFC]")}
-              isNewThread={isNewThread}
-              hasSubmitted={hasSubmitted}
-              autoFocus={isNewThread}
-              status={
-                suppressExistingThreadPrefetchUi
-                  ? "ready"
-                  : thread.isLoading
-                    ? "streaming"
-                    : "ready"
-              }
-              context={settings.context}
-              extraHeader={
-                <div className="flex flex-col gap-4">
-                  {isNewThread && !hasSubmitted && (
-                    <Welcome mode={settings.context.mode} />
-                  )}
-                </div>
-              }
-              disabled={
-                env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
-                isSelectedSkillBootstrapping
-              }
-              onContextChange={(context) => setSettings("context", context)}
-              onSubmit={handleSubmit}
-              onStop={handleStop}
-            />
-
-            {/* {isSelectedSkillBootstrapping && (
-              <div className="text-muted-foreground w-full translate-y-8 text-center text-xs">
-                正在初始化 Skill 文件...
-              </div>
-            )} */}
-            {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
-              <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
-                {t.common.notAvailableInDemoMode}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 退出确认对话框 */}
-        <DevDialog open={showExitDialog} onOpenChange={setShowExitDialog}>
-          <DevDialogContent>
-            <DevDialogHeader>
-              <DevDialogTitle>提示</DevDialogTitle>
-            </DevDialogHeader>
-            <p className="text-muted-foreground text-sm">
-              退出后，当前会话结束并销毁，请先下载保存当前结果！
-            </p>
-            <DevDialogFooter>
-              <Button
-                className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
-                variant="ghost"
-                onClick={() => setShowExitDialog(false)}
-              >
-                取消
-              </Button>
-              <Button
-                className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
-                variant="ghost"
-                onClick={async () => {
-                  // 如果正在生成，先终止再退出
-                  if (thread.isLoading) {
-                    await handleStop();
+                <InputBox
+                  className={cn("bg-background/5 w-full -translate-y-4")}
+                  isNewThread={isNewThread}
+                  threadId={threadId}
+                  autoFocus={isNewThread}
+                  status={
+                    thread.error
+                      ? "error"
+                      : thread.isLoading
+                        ? "streaming"
+                        : "ready"
                   }
-                  setShowExitDialog(false);
-                  // 使用完整页面刷新确保组件重新挂载，isNewThread 为 true
-                  window.location.href = "/workspace/chats/new";
-                }}  
-              >
-                确定
-              </Button>
-            </DevDialogFooter>
-          </DevDialogContent>
-        </DevDialog>
-
-        {/* selectedSkill 失败：错误弹窗 */}
-        <DevDialog
-          open={!!selectedSkillError}
-          onOpenChange={(open) => {
-            if (!open) clearSelectedSkillError();
-          }}
-        >
-          <DevDialogContent>
-            <DevDialogHeader>
-              <DevDialogTitle>
-                ⚠️ {selectedSkillError?.title ?? "技能加载失败"}
-              </DevDialogTitle>
-            </DevDialogHeader>
-            <p className="text-muted-foreground text-sm">
-              {selectedSkillError?.message ?? "发生了未知错误，请稍后重试。"}
-            </p>
-            <DevDialogFooter singleColumn>
-              <Button
-                className="w-full bg-[#f9f8fa] hover:bg-[#8E47F0] hover:text-white"
-                variant="ghost"
-                onClick={clearSelectedSkillError}
-              >
-                关闭
-              </Button>
-            </DevDialogFooter>
-          </DevDialogContent>
-        </DevDialog>
-
-        {/* MARK:  开发测试：iframe 通信功能测试面板 */}
-        {/* <IframeTestPanel /> */}
-      </div>
+                  context={settings.context}
+                  extraHeader={
+                    isNewThread && <Welcome mode={settings.context.mode} />
+                  }
+                  disabled={env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" || isUploading}
+                  onContextChange={(context) => setSettings("context", context)}
+                  onSubmit={handleSubmit}
+                  onStop={handleStop}
+                />
+                {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
+                  <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
+                    {t.common.notAvailableInDemoMode}
+                  </div>
+                )}
+              </div>
+            </div>
+          </main>
+        </div>
+      </ChatBox>
     </ThreadContext.Provider>
   );
 }
diff --git a/frontend/src/app/workspace/layout.tsx b/frontend/src/app/workspace/layout.tsx
index 98b869b4..417c933d 100644
--- a/frontend/src/app/workspace/layout.tsx
+++ b/frontend/src/app/workspace/layout.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useLayoutEffect, useState } from "react";
+import { Toaster } from "sonner";
 
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
-import { Toaster } from "@/components/ui/sonner";
+import { CommandPalette } from "@/components/workspace/command-palette";
 import { WorkspaceSidebar } from "@/components/workspace/workspace-sidebar";
 import { getLocalSettings, useLocalSettings } from "@/core/settings";
 
@@ -16,11 +16,6 @@ export default function WorkspaceLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   const [settings, setSettings] = useLocalSettings();
   const [open, setOpen] = useState(false); // SSR default: open (matches server render)
-  const searchParams = useSearchParams();
-
-  // iframe 技能模式（mode=skill）时隐藏侧边栏
-  const isSkillMode = searchParams.get("mode") === "skill";
-
   useLayoutEffect(() => {
     // Runs synchronously before first paint on the client — no visual flash
     setOpen(!getLocalSettings().layout.sidebar_collapsed);
@@ -42,38 +37,11 @@ export default function WorkspaceLayout({
         open={open}
         onOpenChange={handleOpenChange}
       >
-        {/* MARK:！！！！ 生产环境下必须注释才能提交！！！！ */}
-        {/* {!isSkillMode && <WorkspaceSidebar className="" />} */}
+        <WorkspaceSidebar />
         <SidebarInset className="min-w-0">{children}</SidebarInset>
       </SidebarProvider>
-      <Toaster
-        position="top-center"
-        toastOptions={{
-          duration: 2200,
-          classNames: {
-            toast: [
-              /* 灰色圆角矩形容器 */
-              "rounded-[20px] border-none",
-              /* 浅灰色背景 + 轻微透明 */
-              "bg-[#999999]! backdrop-blur-sm",
-              /* 阴影极轻 */
-              "shadow-[0_2px_12px_0_rgba(0,0,0,0.18)]",
-              /* 内边距：宽松居中 */
-              "px-5 py-2.5",
-              /* 单行布局，内容水平居中 */
-              "flex items-center justify-center gap-0",
-              /* 整体文字样式 */
-              "text-white text-sm font-normal font-sans",
-              /* 去掉 icon 区域间距 */
-              "[&>[data-icon]]:hidden",
-            ].join(" "),
-            title:
-              "text-white! text-sm font-normal text-center w-full leading-snug",
-            description: "hidden",
-            icon: "hidden",
-          },
-        }}
-      />
+      <CommandPalette />
+      <Toaster position="top-center" />
     </QueryClientProvider>
   );
 }
diff --git a/frontend/src/components/ai-elements/artifact.tsx b/frontend/src/components/ai-elements/artifact.tsx
index 96db33d8..550dfa11 100644
--- a/frontend/src/components/ai-elements/artifact.tsx
+++ b/frontend/src/components/ai-elements/artifact.tsx
@@ -16,7 +16,7 @@ export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
 export const Artifact = ({ className, ...props }: ArtifactProps) => (
   <div
     className={cn(
-      "bg-background flex flex-col overflow-hidden rounded-t-[20px] px-[20px] pt-[15px]",
+      "bg-background flex flex-col overflow-hidden rounded-lg border shadow-lg",
       className,
     )}
     {...props}
@@ -30,7 +30,10 @@ export const ArtifactHeader = ({
   ...props
 }: ArtifactHeaderProps) => (
   <div
-    className={cn("mb-[10px] flex items-center justify-between", className)}
+    className={cn(
+      "bg-muted/50 flex items-center justify-between border-b px-4 py-3",
+      className,
+    )}
     {...props}
   />
 );
@@ -63,7 +66,7 @@ export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
 
 export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
   <div
-    className={cn("text-foreground flex justify-center  w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium", className)}
+    className={cn("text-foreground text-sm font-medium", className)}
     {...props}
   />
 );
@@ -90,7 +93,6 @@ export type ArtifactActionProps = ComponentProps<typeof Button> & {
   tooltip?: string;
   label?: string;
   icon?: LucideIcon;
-  asChild?: boolean;
 };
 
 export const ArtifactAction = ({
@@ -101,7 +103,6 @@ export const ArtifactAction = ({
   className,
   size = "sm",
   variant = "ghost",
-  asChild = false,
   ...props
 }: ArtifactActionProps) => {
   const button = (
@@ -113,7 +114,6 @@ export const ArtifactAction = ({
       size={size}
       type="button"
       variant={variant}
-      asChild={asChild}
       {...props}
     >
       {Icon ? <Icon className="size-4" /> : children}
@@ -143,7 +143,8 @@ export const ArtifactContent = ({
   className,
   ...props
 }: ArtifactContentProps) => (
-  <div className="min-h-0 rounded-[10px] flex-1 overflow-auto">
-    <div className={cn("mb-[150px] p-4", className)} {...props} />
-  </div>
+  <div
+    className={cn("min-h-0 flex-1 overflow-auto p-4", className)}
+    {...props}
+  />
 );
diff --git a/frontend/src/components/ai-elements/chain-of-thought.tsx b/frontend/src/components/ai-elements/chain-of-thought.tsx
index a8891821..cd3a6b7a 100644
--- a/frontend/src/components/ai-elements/chain-of-thought.tsx
+++ b/frontend/src/components/ai-elements/chain-of-thought.tsx
@@ -147,11 +147,7 @@ export const ChainOfThoughtStep = memo(
         {...props}
       >
         <div className="relative mt-0.5">
-          {isValidElement(Icon) ? (
-            Icon
-          ) : (
-            <Icon className="size-4 stroke-[#333333] stroke-[1.5px] text-[#333333]" />
-          )}
+          {isValidElement(Icon) ? Icon : <Icon className="size-4" />}
           <div className="bg-border absolute top-7 bottom-0 left-1/2 -mx-px w-px" />
         </div>
         <div className="flex-1 space-y-2 overflow-hidden">
@@ -206,7 +202,7 @@ export const ChainOfThoughtContent = memo(
       <Collapsible open={isOpen}>
         <CollapsibleContent
           className={cn(
-            "mt-2 space-y-3 bg-[#ffffff]",
+            "mt-2 space-y-3",
             "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
             className,
           )}
diff --git a/frontend/src/components/ai-elements/checkpoint.tsx b/frontend/src/components/ai-elements/checkpoint.tsx
index 6d912fec..d9a5d326 100644
--- a/frontend/src/components/ai-elements/checkpoint.tsx
+++ b/frontend/src/components/ai-elements/checkpoint.tsx
@@ -19,10 +19,7 @@ export const Checkpoint = ({
   ...props
 }: CheckpointProps) => (
   <div
-    className={cn(
-      "text-muted-foreground flex items-center gap-0.5 overflow-hidden",
-      className,
-    )}
+    className={cn("flex items-center gap-0.5 text-muted-foreground overflow-hidden", className)}
     {...props}
   >
     {children}
diff --git a/frontend/src/components/ai-elements/code-block.tsx b/frontend/src/components/ai-elements/code-block.tsx
index 0f227cc2..c0460238 100644
--- a/frontend/src/components/ai-elements/code-block.tsx
+++ b/frontend/src/components/ai-elements/code-block.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { cn, copyToClipboard } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   type ComponentProps,
@@ -146,9 +146,14 @@ export const CodeBlockCopyButton = ({
   const [isCopied, setIsCopied] = useState(false);
   const { code } = useContext(CodeBlockContext);
 
-  const handleCopy = async () => {
+  const copyToClipboard = async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
     try {
-      await copyToClipboard(code);
+      await navigator.clipboard.writeText(code);
       setIsCopied(true);
       onCopy?.();
       setTimeout(() => setIsCopied(false), timeout);
@@ -162,7 +167,7 @@ export const CodeBlockCopyButton = ({
   return (
     <Button
       className={cn("shrink-0", className)}
-      onClick={handleCopy}
+      onClick={copyToClipboard}
       size="icon"
       variant="ghost"
       {...props}
diff --git a/frontend/src/components/ai-elements/context.tsx b/frontend/src/components/ai-elements/context.tsx
index 7385d068..f49d7cae 100644
--- a/frontend/src/components/ai-elements/context.tsx
+++ b/frontend/src/components/ai-elements/context.tsx
@@ -115,7 +115,7 @@ export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
     <HoverCardTrigger asChild>
       {children ?? (
         <Button type="button" variant="ghost" {...props}>
-          <span className="text-muted-foreground font-medium">
+          <span className="font-medium text-muted-foreground">
             {renderedPercent}
           </span>
           <ContextIcon />
@@ -163,7 +163,7 @@ export const ContextContentHeader = ({
         <>
           <div className="flex items-center justify-between gap-3 text-xs">
             <p>{displayPct}</p>
-            <p className="text-muted-foreground font-mono">
+            <p className="font-mono text-muted-foreground">
               {used} / {total}
             </p>
           </div>
@@ -213,8 +213,8 @@ export const ContextContentFooter = ({
   return (
     <div
       className={cn(
-        "bg-secondary flex w-full items-center justify-between gap-3 p-3 text-xs",
-        className,
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        className
       )}
       {...props}
     >
@@ -402,7 +402,7 @@ const TokensWithCost = ({
           notation: "compact",
         }).format(tokens)}
     {costText ? (
-      <span className="text-muted-foreground ml-2">• {costText}</span>
+      <span className="ml-2 text-muted-foreground">• {costText}</span>
     ) : null}
   </span>
 );
diff --git a/frontend/src/components/ai-elements/controls.tsx b/frontend/src/components/ai-elements/controls.tsx
index 0fd25629..770a8262 100644
--- a/frontend/src/components/ai-elements/controls.tsx
+++ b/frontend/src/components/ai-elements/controls.tsx
@@ -9,9 +9,9 @@ export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
 export const Controls = ({ className, ...props }: ControlsProps) => (
   <ControlsPrimitive
     className={cn(
-      "bg-card gap-px overflow-hidden rounded-md border p-1 shadow-none!",
-      "[&>button]:hover:bg-secondary! [&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent!",
-      className,
+      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
+      className
     )}
     {...props}
   />
diff --git a/frontend/src/components/ai-elements/conversation.tsx b/frontend/src/components/ai-elements/conversation.tsx
index c3a74fb9..4842cc3f 100644
--- a/frontend/src/components/ai-elements/conversation.tsx
+++ b/frontend/src/components/ai-elements/conversation.tsx
@@ -11,7 +11,7 @@ export type ConversationProps = ComponentProps<typeof StickToBottom>;
 
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
-    className={cn("relative mt-[60px] flex-1 overflow-y-hidden", className)}
+    className={cn("relative flex-1 overflow-y-hidden", className)}
     initial="smooth"
     resize="smooth"
     role="log"
@@ -28,7 +28,7 @@ export const ConversationContent = ({
   ...props
 }: ConversationContentProps) => (
   <StickToBottom.Content
-    className={cn("flex flex-col gap-8 p-[20px]", className)}
+    className={cn("flex flex-col gap-8 p-4", className)}
     {...props}
   />
 );
diff --git a/frontend/src/components/ai-elements/edge.tsx b/frontend/src/components/ai-elements/edge.tsx
index 17dfcebc..3cec409d 100644
--- a/frontend/src/components/ai-elements/edge.tsx
+++ b/frontend/src/components/ai-elements/edge.tsx
@@ -29,7 +29,7 @@ const Temporary = ({
 
   return (
     <BaseEdge
-      className="stroke-ring stroke-1"
+      className="stroke-1 stroke-ring"
       id={id}
       path={edgePath}
       style={{
@@ -41,13 +41,13 @@ const Temporary = ({
 
 const getHandleCoordsByPosition = (
   node: InternalNode<Node>,
-  handlePosition: Position,
+  handlePosition: Position
 ) => {
   // Choose the handle type based on position - Left is for target, Right is for source
   const handleType = handlePosition === Position.Left ? "target" : "source";
 
   const handle = node.internals.handleBounds?.[handleType]?.find(
-    (h) => h.position === handlePosition,
+    (h) => h.position === handlePosition
   );
 
   if (!handle) {
@@ -85,7 +85,7 @@ const getHandleCoordsByPosition = (
 
 const getEdgeParams = (
   source: InternalNode<Node>,
-  target: InternalNode<Node>,
+  target: InternalNode<Node>
 ) => {
   const sourcePos = Position.Right;
   const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
@@ -112,7 +112,7 @@ const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
 
   const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
     sourceNode,
-    targetNode,
+    targetNode
   );
 
   const [edgePath] = getBezierPath({
diff --git a/frontend/src/components/ai-elements/image.tsx b/frontend/src/components/ai-elements/image.tsx
index f79b55b6..542812a3 100644
--- a/frontend/src/components/ai-elements/image.tsx
+++ b/frontend/src/components/ai-elements/image.tsx
@@ -17,7 +17,7 @@ export const Image = ({
     alt={props.alt}
     className={cn(
       "h-auto max-w-full overflow-hidden rounded-md",
-      props.className,
+      props.className
     )}
     src={`data:${mediaType};base64,${base64}`}
   />
diff --git a/frontend/src/components/ai-elements/loader.tsx b/frontend/src/components/ai-elements/loader.tsx
index 37df01be..5f0cfce4 100644
--- a/frontend/src/components/ai-elements/loader.tsx
+++ b/frontend/src/components/ai-elements/loader.tsx
@@ -87,7 +87,7 @@ export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
   <div
     className={cn(
       "inline-flex animate-spin items-center justify-center",
-      className,
+      className
     )}
     {...props}
   >
diff --git a/frontend/src/components/ai-elements/message.tsx b/frontend/src/components/ai-elements/message.tsx
index 24f8b5e9..c0071c21 100644
--- a/frontend/src/components/ai-elements/message.tsx
+++ b/frontend/src/components/ai-elements/message.tsx
@@ -8,7 +8,6 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { useI18n } from "@/core/i18n/hooks";
 import { cn } from "@/lib/utils";
 import type { FileUIPart, UIMessage } from "ai";
 import {
@@ -28,10 +27,8 @@ export type MessageProps = HTMLAttributes<HTMLDivElement> & {
 export const Message = ({ className, from, ...props }: MessageProps) => (
   <div
     className={cn(
-      "group flex w-full flex-col gap-2 rounded-[10px] p-[20px]",
-      from === "user"
-        ? "is-user ml-auto justify-end px-0 pb-0"
-        : "is-assistant bg-[#ffffff]",
+      "group flex w-full flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
       className,
     )}
     {...props}
@@ -334,7 +331,6 @@ export function MessageAttachment({
   onRemove,
   ...props
 }: MessageAttachmentProps) {
-  const { t } = useI18n();
   const filename = data.filename || "";
   const mediaType =
     data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
@@ -360,7 +356,7 @@ export function MessageAttachment({
           />
           {onRemove && (
             <Button
-              aria-label={t.common.removeAttachment}
+              aria-label="Remove attachment"
               className="bg-background/80 hover:bg-background absolute top-2 right-2 size-6 rounded-full p-0 opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 [&>svg]:size-3"
               onClick={(e) => {
                 e.stopPropagation();
@@ -370,7 +366,7 @@ export function MessageAttachment({
               variant="ghost"
             >
               <XIcon />
-              <span className="sr-only">{t.common.removeAttachment}</span>
+              <span className="sr-only">Remove</span>
             </Button>
           )}
         </>
@@ -388,7 +384,7 @@ export function MessageAttachment({
           </Tooltip>
           {onRemove && (
             <Button
-              aria-label={t.common.removeAttachment}
+              aria-label="Remove attachment"
               className="hover:bg-accent size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity group-hover:opacity-100 [&>svg]:size-3"
               onClick={(e) => {
                 e.stopPropagation();
@@ -398,7 +394,6 @@ export function MessageAttachment({
               variant="ghost"
             >
               <XIcon />
-              <span className="sr-only">{t.common.removeAttachment}</span>
               <span className="sr-only">Remove</span>
             </Button>
           )}
diff --git a/frontend/src/components/ai-elements/node.tsx b/frontend/src/components/ai-elements/node.tsx
index f329a8b3..75ac59a1 100644
--- a/frontend/src/components/ai-elements/node.tsx
+++ b/frontend/src/components/ai-elements/node.tsx
@@ -22,7 +22,7 @@ export const Node = ({ handles, className, ...props }: NodeProps) => (
   <Card
     className={cn(
       "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
-      className,
+      className
     )}
     {...props}
   >
@@ -36,7 +36,7 @@ export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
 
 export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
   <CardHeader
-    className={cn("bg-secondary gap-0.5 rounded-t-md border-b p-3!", className)}
+    className={cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className)}
     {...props}
   />
 );
@@ -65,7 +65,7 @@ export type NodeFooterProps = ComponentProps<typeof CardFooter>;
 
 export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
   <CardFooter
-    className={cn("bg-secondary rounded-b-md border-t p-3!", className)}
+    className={cn("rounded-b-md border-t bg-secondary p-3!", className)}
     {...props}
   />
 );
diff --git a/frontend/src/components/ai-elements/panel.tsx b/frontend/src/components/ai-elements/panel.tsx
index a0b8c1d7..059cb7ac 100644
--- a/frontend/src/components/ai-elements/panel.tsx
+++ b/frontend/src/components/ai-elements/panel.tsx
@@ -7,8 +7,8 @@ type PanelProps = ComponentProps<typeof PanelPrimitive>;
 export const Panel = ({ className, ...props }: PanelProps) => (
   <PanelPrimitive
     className={cn(
-      "bg-card m-4 overflow-hidden rounded-md border p-1",
-      className,
+      "m-4 overflow-hidden rounded-md border bg-card p-1",
+      className
     )}
     {...props}
   />
diff --git a/frontend/src/components/ai-elements/prompt-input.tsx b/frontend/src/components/ai-elements/prompt-input.tsx
index b0a844f3..a094def4 100644
--- a/frontend/src/components/ai-elements/prompt-input.tsx
+++ b/frontend/src/components/ai-elements/prompt-input.tsx
@@ -35,7 +35,6 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
-import { Tooltip } from "../workspace/tooltip";
 import type { ChatStatus, FileUIPart } from "ai";
 import {
   ArrowUpIcon,
@@ -71,7 +70,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { useI18n } from "@/core/i18n/hooks";
 
 // ============================================================================
 // Provider Context & Types
@@ -290,7 +288,6 @@ export function PromptInputAttachment({
   ...props
 }: PromptInputAttachmentProps) {
   const attachments = usePromptInputAttachments();
-  const { t } = useI18n();
 
   const filename = data.filename || "";
 
@@ -298,112 +295,81 @@ export function PromptInputAttachment({
     data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
   const isImage = mediaType === "image";
 
-  const truncateFilename = (name: string, maxLen: number = 10) => {
-    if (name.length <= maxLen) return name;
-    const ext = name.slice(name.lastIndexOf("."));
-    const baseName = name.slice(0, name.lastIndexOf("."));
-    const truncated = baseName.slice(0, maxLen - ext.length - 3);
-    return truncated + "..." + ext;
-  };
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
 
   return (
-    <div
-      className={cn(
-        "group relative flex size-16 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg transition-all select-none",
-        isImage ? "p-0" : "bg-gray-100 dark:bg-gray-700",
-        className,
-      )}
-      key={data.id}
-      {...props}
-    >
-      {isImage ? (
-        <>
-          <img
-            alt={filename || "attachment"}
-            className="size-full object-cover"
-            src={data.url}
-          />
-          {/* 悬浮遮罩层 */}
-          <div
-            className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
-            style={{ borderRadius: "10px", background: "rgba(0, 0, 0, 0.60)" }}
-          >
-            {/* 眼睛图标 - 居中 */}
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                d="M10 4.75C13.3315 4.75 16.4669 6.61444 18.9805 9.88281C19.0335 9.95183 19.0335 10.0482 18.9805 10.1172C16.4669 13.3856 13.3315 15.25 10 15.25C6.66835 15.2499 3.53309 13.3857 1.01953 10.1172C0.966466 10.0482 0.966465 9.95182 1.01953 9.88281C3.53309 6.61435 6.66835 4.75014 10 4.75Z"
-                stroke="white"
-                strokeWidth="1.5"
-              />
-              <path
-                d="M10 7.75C11.2426 7.75 12.25 8.75736 12.25 10C12.25 11.2426 11.2426 12.25 10 12.25C8.75736 12.25 7.75 11.2426 7.75 10C7.75 8.75736 8.75736 7.75 10 7.75Z"
-                stroke="white"
-                strokeWidth="1.5"
-              />
-            </svg>
-            {/* 删除按钮 - 右上角 */}
-            <button
-              aria-label={t.common.removeAttachment}
-              className="absolute top-1.5 right-1.5 z-10 flex size-4 cursor-pointer items-center justify-center rounded-sm transition-colors hover:bg-white/20"
+    <PromptInputHoverCard>
+      <HoverCardTrigger asChild>
+        <div
+          className={cn(
+            "group border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 relative flex h-8 cursor-pointer items-center gap-1.5 rounded-md border px-1.5 text-sm font-medium transition-all select-none",
+            className,
+          )}
+          key={data.id}
+          {...props}
+        >
+          <div className="relative size-5 shrink-0">
+            <div className="bg-background absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded transition-opacity group-hover:opacity-0">
+              {isImage ? (
+                <img
+                  alt={filename || "attachment"}
+                  className="size-5 object-cover"
+                  height={20}
+                  src={data.url}
+                  width={20}
+                />
+              ) : (
+                <div className="text-muted-foreground flex size-5 items-center justify-center">
+                  <PaperclipIcon className="size-3" />
+                </div>
+              )}
+            </div>
+            <Button
+              aria-label="Remove attachment"
+              className="absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5"
               onClick={(e) => {
                 e.stopPropagation();
                 attachments.remove(data.id);
               }}
               type="button"
+              variant="ghost"
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="8"
-                height="8"
-                viewBox="0 0 8 8"
-                fill="none"
-              >
-                <path
-                  d="M0.75 0.75L6.74995 6.74995"
-                  stroke="white"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                />
-                <path
-                  d="M6.75 0.75L0.750025 6.74992"
-                  stroke="white"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                />
-              </svg>
-            </button>
+              <XIcon />
+              <span className="sr-only">Remove</span>
+            </Button>
           </div>
-        </>
-      ) : (
-        <>
-          <div className="flex flex-col items-center justify-center gap-1 px-1">
-            <PaperclipIcon className="size-6 text-gray-400" />
-            <span className="max-w-full truncate text-center text-[10px] text-gray-500">
-              {truncateFilename(filename)}
-            </span>
+
+          <span className="flex-1 truncate">{attachmentLabel}</span>
+        </div>
+      </HoverCardTrigger>
+      <PromptInputHoverCardContent className="w-auto p-2">
+        <div className="w-auto space-y-3">
+          {isImage && (
+            <div className="flex max-h-96 w-96 items-center justify-center overflow-hidden rounded-md border">
+              <img
+                alt={filename || "attachment preview"}
+                className="max-h-full max-w-full object-contain"
+                height={384}
+                src={data.url}
+                width={448}
+              />
+            </div>
+          )}
+          <div className="flex items-center gap-2.5">
+            <div className="min-w-0 flex-1 space-y-1 px-0.5">
+              <h4 className="truncate text-sm leading-none font-semibold">
+                {filename || (isImage ? "Image" : "Attachment")}
+              </h4>
+              {data.mediaType && (
+                <p className="text-muted-foreground truncate font-mono text-xs">
+                  {data.mediaType}
+                </p>
+              )}
+            </div>
           </div>
-          {/* 关闭按钮 - 右上角 */}
-          <button
-            aria-label={t.common.removeAttachment}
-            className="absolute top-1 right-1 z-10 flex size-5 cursor-pointer items-center justify-center rounded bg-white/90 opacity-0 transition-opacity hover:bg-white group-hover:opacity-100 dark:bg-gray-800/90 dark:hover:bg-gray-800"
-            onClick={(e) => {
-              e.stopPropagation();
-              attachments.remove(data.id);
-            }}
-            type="button"
-          >
-            <XIcon className="size-3 text-gray-600 dark:text-gray-300" />
-            <span className="sr-only">Remove</span>
-          </button>
-        </>
-      )}
-    </div>
+        </div>
+      </PromptInputHoverCardContent>
+    </PromptInputHoverCard>
   );
 }
 
@@ -427,14 +393,13 @@ export function PromptInputAttachments({
 
   return (
     <div
-      className={cn(
-        "inline-flex flex-row flex-nowrap items-center gap-2 rounded-xl p-2",
-        className,
-      )}
+      className={cn("flex w-full flex-wrap items-center gap-2 p-3", className)}
       {...props}
     >
       {attachments.files.map((file) => (
-        <Fragment key={file.id}>{children(file)}</Fragment>
+        <Fragment key={file.id}>
+          <div className="max-w-60">{children(file)}</div>
+        </Fragment>
       ))}
     </div>
   );
@@ -492,13 +457,10 @@ export type PromptInputProps = Omit<
     message: PromptInputMessage,
     event: FormEvent<HTMLFormElement>,
   ) => void | Promise<void>;
-  // className for InputGroup (passes through to inner InputGroup component)
-  inputGroupClassName?: string;
 };
 
 export const PromptInput = ({
   className,
-  inputGroupClassName,
   accept,
   disabled,
   multiple,
@@ -832,7 +794,7 @@ export const PromptInput = ({
         ref={formRef}
         {...props}
       >
-        <InputGroup className={inputGroupClassName}>{children}</InputGroup>
+        <InputGroup>{children}</InputGroup>
       </form>
     </>
   );
@@ -1065,63 +1027,32 @@ export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
 export const PromptInputSubmit = ({
   className,
   variant = "default",
-  size = "sm",
+  size = "icon-sm",
   status,
-  disabled,
   children,
   ...props
 }: PromptInputSubmitProps) => {
-  const controller = useOptionalPromptInputController();
-  const { t } = useI18n();
-
-  // 判断是否有内容可发送
-  const hasContent = controller
-    ? controller.textInput.value.trim().length > 0 ||
-      controller.attachments.files.length > 0
-    : false;
-
-  // 正在 streaming 时不允许发送
-  // const isStreaming = status === "streaming" || status === "submitted";
-
-  // const isDisabled = disabled || !hasContent || isStreaming;
-
   let Icon = <ArrowUpIcon className="size-4" />;
 
-  let text: string = "发送";
-
   if (status === "submitted") {
     Icon = <Loader2Icon className="size-4 animate-spin" />;
-    text = "生成中...";
   } else if (status === "streaming") {
     Icon = <SquareIcon className="size-4" />;
-    text = "停止";
   } else if (status === "error") {
     Icon = <XIcon className="size-4" />;
-    text = "错误";
   }
 
   return (
-    <Tooltip content={t.inputBox.sendMessagePrice}>
-      <InputGroupButton
-        aria-label="Submit"
-        // 被button{bgc:#fff}覆盖了，只能加"!"
-        className={cn(
-          "h-[40px] w-[140px] rounded-[10px] border-0 font-bold transition-all",
-          // isDisabled
-          //   ? "cursor-not-allowed !bg-gray-200 text-gray-400":
-          "!bg-[#F0E8FB] text-[#8E47F0] hover:!bg-[#8E47F0] hover:text-[#FFFFFF]",
-          className,
-        )}
-        size={size}
-        type="submit"
-        variant={variant}
-        // disabled={isDisabled}
-        {...props}
-      >
-        {/* {children ?? Icon} */}
-        {text}
-      </InputGroupButton>
-    </Tooltip>
+    <InputGroupButton
+      aria-label="Submit"
+      className={cn(className)}
+      size={size}
+      type="submit"
+      variant={variant}
+      {...props}
+    >
+      {children ?? Icon}
+    </InputGroupButton>
   );
 };
 
@@ -1197,6 +1128,8 @@ export const PromptInputSpeechButton = ({
     null,
   );
   const recognitionRef = useRef<SpeechRecognition | null>(null);
+  const callbacksRef = useRef({ textareaRef, onTranscriptionChange });
+  callbacksRef.current = { textareaRef, onTranscriptionChange };
 
   useEffect(() => {
     if (
@@ -1229,15 +1162,18 @@ export const PromptInputSpeechButton = ({
           }
         }
 
-        if (finalTranscript && textareaRef?.current) {
-          const textarea = textareaRef.current;
+        const currentTextareaRef = callbacksRef.current.textareaRef;
+        const currentOnTranscriptionChange = callbacksRef.current.onTranscriptionChange;
+
+        if (finalTranscript && currentTextareaRef?.current) {
+          const textarea = currentTextareaRef.current;
           const currentValue = textarea.value;
           const newValue =
             currentValue + (currentValue ? " " : "") + finalTranscript;
 
           textarea.value = newValue;
           textarea.dispatchEvent(new Event("input", { bubbles: true }));
-          onTranscriptionChange?.(newValue);
+          currentOnTranscriptionChange?.(newValue);
         }
       };
 
@@ -1255,7 +1191,7 @@ export const PromptInputSpeechButton = ({
         recognitionRef.current.stop();
       }
     };
-  }, [textareaRef, onTranscriptionChange]);
+  }, []);
 
   const toggleListening = useCallback(() => {
     if (!recognition) {
diff --git a/frontend/src/components/ai-elements/queue.tsx b/frontend/src/components/ai-elements/queue.tsx
index a9c5a74e..0c91d130 100644
--- a/frontend/src/components/ai-elements/queue.tsx
+++ b/frontend/src/components/ai-elements/queue.tsx
@@ -36,8 +36,8 @@ export type QueueItemProps = ComponentProps<"li">;
 export const QueueItem = ({ className, ...props }: QueueItemProps) => (
   <li
     className={cn(
-      "group hover:bg-muted flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors",
-      className,
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className
     )}
     {...props}
   />
@@ -58,7 +58,7 @@ export const QueueItemIndicator = ({
       completed
         ? "border-muted-foreground/20 bg-muted-foreground/10"
         : "border-muted-foreground/50",
-      className,
+      className
     )}
     {...props}
   />
@@ -79,7 +79,7 @@ export const QueueItemContent = ({
       completed
         ? "text-muted-foreground/50 line-through"
         : "text-muted-foreground",
-      className,
+      className
     )}
     {...props}
   />
@@ -100,7 +100,7 @@ export const QueueItemDescription = ({
       completed
         ? "text-muted-foreground/40 line-through"
         : "text-muted-foreground",
-      className,
+      className
     )}
     {...props}
   />
@@ -126,8 +126,8 @@ export const QueueItemAction = ({
 }: QueueItemActionProps) => (
   <Button
     className={cn(
-      "text-muted-foreground hover:bg-muted-foreground/10 hover:text-foreground size-auto rounded p-1 opacity-0 transition-opacity group-hover:opacity-100",
-      className,
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
     )}
     size="icon"
     type="button"
@@ -169,8 +169,8 @@ export const QueueItemFile = ({
 }: QueueItemFileProps) => (
   <span
     className={cn(
-      "bg-muted flex items-center gap-1 rounded border px-2 py-1 text-xs",
-      className,
+      "flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
+      className
     )}
     {...props}
   >
@@ -186,8 +186,8 @@ export const QueueList = ({
   className,
   ...props
 }: QueueListProps) => (
-  <ScrollArea className={cn("-mb-1", className)} {...props}>
-    <div className="max-h-40">
+  <ScrollArea className={cn("-mb-1 mt-2", className)} {...props}>
+    <div className="max-h-40 pr-4">
       <ul>{children}</ul>
     </div>
   </ScrollArea>
@@ -215,8 +215,8 @@ export const QueueSectionTrigger = ({
   <CollapsibleTrigger asChild>
     <button
       className={cn(
-        "group bg-muted/40 text-muted-foreground hover:bg-muted flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm font-medium transition-colors",
-        className,
+        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+        className
       )}
       type="button"
       {...props}
@@ -241,7 +241,7 @@ export const QueueSectionLabel = ({
   ...props
 }: QueueSectionLabelProps) => (
   <span className={cn("flex items-center gap-2", className)} {...props}>
-    <ChevronDownIcon className="size-4 transition-transform group-data-[state=closed]:-rotate-90" />
+    <ChevronDownIcon className="group-data-[state=closed]:-rotate-90 size-4 transition-transform" />
     {icon}
     <span>
       {count} {label}
@@ -266,8 +266,8 @@ export type QueueProps = ComponentProps<"div">;
 export const Queue = ({ className, ...props }: QueueProps) => (
   <div
     className={cn(
-      "border-border bg-background flex flex-col gap-2 rounded-xl border px-3 pt-2 pb-2 shadow-xs",
-      className,
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
     )}
     {...props}
   />
diff --git a/frontend/src/components/ai-elements/reasoning.tsx b/frontend/src/components/ai-elements/reasoning.tsx
index 8c9d5b20..777f23b1 100644
--- a/frontend/src/components/ai-elements/reasoning.tsx
+++ b/frontend/src/components/ai-elements/reasoning.tsx
@@ -108,12 +108,10 @@ export const Reasoning = memo(
         </Collapsible>
       </ReasoningContext.Provider>
     );
-  },
+  }
 );
 
-export type ReasoningTriggerProps = ComponentProps<
-  typeof CollapsibleTrigger
-> & {
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
   getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
 };
 
@@ -128,19 +126,14 @@ const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
 };
 
 export const ReasoningTrigger = memo(
-  ({
-    className,
-    children,
-    getThinkingMessage = defaultGetThinkingMessage,
-    ...props
-  }: ReasoningTriggerProps) => {
+  ({ className, children, getThinkingMessage = defaultGetThinkingMessage, ...props }: ReasoningTriggerProps) => {
     const { isStreaming, isOpen, duration } = useReasoning();
 
     return (
       <CollapsibleTrigger
         className={cn(
-          "text-muted-foreground hover:text-foreground flex w-full items-center gap-2 text-sm transition-colors",
-          className,
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
         )}
         {...props}
       >
@@ -151,14 +144,14 @@ export const ReasoningTrigger = memo(
             <ChevronDownIcon
               className={cn(
                 "size-4 transition-transform",
-                isOpen ? "rotate-180" : "rotate-0",
+                isOpen ? "rotate-180" : "rotate-0"
               )}
             />
           </>
         )}
       </CollapsibleTrigger>
     );
-  },
+  }
 );
 
 export type ReasoningContentProps = ComponentProps<
@@ -172,14 +165,14 @@ export const ReasoningContent = memo(
     <CollapsibleContent
       className={cn(
         "mt-4 text-sm",
-        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-        className,
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
       )}
       {...props}
     >
       <Streamdown {...props}>{children}</Streamdown>
     </CollapsibleContent>
-  ),
+  )
 );
 
 Reasoning.displayName = "Reasoning";
diff --git a/frontend/src/components/ai-elements/shimmer.tsx b/frontend/src/components/ai-elements/shimmer.tsx
index d92700f4..9163aac4 100644
--- a/frontend/src/components/ai-elements/shimmer.tsx
+++ b/frontend/src/components/ai-elements/shimmer.tsx
@@ -26,12 +26,12 @@ const ShimmerComponent = ({
   spread = 2,
 }: TextShimmerProps) => {
   const MotionComponent = motion.create(
-    Component as keyof JSX.IntrinsicElements,
+    Component as keyof JSX.IntrinsicElements
   );
 
   const dynamicSpread = useMemo(
     () => (children?.length ?? 0) * spread,
-    [children, spread],
+    [children, spread]
   );
 
   return (
@@ -39,8 +39,8 @@ const ShimmerComponent = ({
       animate={{ backgroundPosition: "0% center" }}
       className={cn(
         "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
-        "[background-repeat:no-repeat,padding-box] [--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))]",
-        className,
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
       )}
       initial={{ backgroundPosition: "100% center" }}
       style={
diff --git a/frontend/src/components/ai-elements/sources.tsx b/frontend/src/components/ai-elements/sources.tsx
index f3570f9b..0756664f 100644
--- a/frontend/src/components/ai-elements/sources.tsx
+++ b/frontend/src/components/ai-elements/sources.tsx
@@ -13,7 +13,7 @@ export type SourcesProps = ComponentProps<"div">;
 
 export const Sources = ({ className, ...props }: SourcesProps) => (
   <Collapsible
-    className={cn("not-prose text-primary mb-4 text-xs", className)}
+    className={cn("not-prose mb-4 text-primary text-xs", className)}
     {...props}
   />
 );
@@ -50,8 +50,8 @@ export const SourcesContent = ({
   <CollapsibleContent
     className={cn(
       "mt-3 flex w-fit flex-col gap-2",
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-      className,
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
     )}
     {...props}
   />
diff --git a/frontend/src/components/ai-elements/suggestion.tsx b/frontend/src/components/ai-elements/suggestion.tsx
index a7f3b033..fe12ae2c 100644
--- a/frontend/src/components/ai-elements/suggestion.tsx
+++ b/frontend/src/components/ai-elements/suggestion.tsx
@@ -3,7 +3,6 @@
 import { Button } from "@/components/ui/button";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
-import { Icon } from "@radix-ui/react-select";
 import type { LucideIcon } from "lucide-react";
 import { Children, type ComponentProps } from "react";
 
@@ -61,17 +60,16 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "cursor-pointer rounded-full px-[20px] py-[15px] text-xs font-normal",
-        "border-none bg-[#F9F8FA] text-[#666666]",
-        "hover:bg-[#EAE9EB] hover:text-[#150033]",
+        "text-muted-foreground cursor-pointer rounded-full px-4 text-xs font-normal",
         className,
       )}
       onClick={handleClick}
       size={size}
       type="button"
+      variant={variant}
       {...props}
     >
-      {/* {Icon && <Icon className="size-4" />} */}
+      {Icon && <Icon className="size-4" />}
       {children || suggestion}
     </Button>
   );
diff --git a/frontend/src/components/ai-elements/task.tsx b/frontend/src/components/ai-elements/task.tsx
index 6f635914..eeb802c6 100644
--- a/frontend/src/components/ai-elements/task.tsx
+++ b/frontend/src/components/ai-elements/task.tsx
@@ -18,8 +18,8 @@ export const TaskItemFile = ({
 }: TaskItemFileProps) => (
   <div
     className={cn(
-      "bg-secondary text-foreground inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-xs",
-      className,
+      "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs",
+      className
     )}
     {...props}
   >
@@ -57,7 +57,7 @@ export const TaskTrigger = ({
 }: TaskTriggerProps) => (
   <CollapsibleTrigger asChild className={cn("group", className)} {...props}>
     {children ?? (
-      <div className="text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center gap-2 text-sm transition-colors">
+      <div className="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
         <SearchIcon className="size-4" />
         <p className="text-sm">{title}</p>
         <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
@@ -75,12 +75,12 @@ export const TaskContent = ({
 }: TaskContentProps) => (
   <CollapsibleContent
     className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
-      className,
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
     )}
     {...props}
   >
-    <div className="border-muted mt-4 space-y-2 border-l-2 pl-4">
+    <div className="mt-4 space-y-2 border-muted border-l-2 pl-4">
       {children}
     </div>
   </CollapsibleContent>
diff --git a/frontend/src/components/ai-elements/toolbar.tsx b/frontend/src/components/ai-elements/toolbar.tsx
index 1152a59d..b55aa889 100644
--- a/frontend/src/components/ai-elements/toolbar.tsx
+++ b/frontend/src/components/ai-elements/toolbar.tsx
@@ -7,8 +7,8 @@ type ToolbarProps = ComponentProps<typeof NodeToolbar>;
 export const Toolbar = ({ className, ...props }: ToolbarProps) => (
   <NodeToolbar
     className={cn(
-      "bg-background flex items-center gap-1 rounded-sm border p-1.5",
-      className,
+      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
+      className
     )}
     position={Position.Bottom}
     {...props}
diff --git a/frontend/src/components/ai-elements/web-preview.tsx b/frontend/src/components/ai-elements/web-preview.tsx
index a263fe03..8f0ab5a5 100644
--- a/frontend/src/components/ai-elements/web-preview.tsx
+++ b/frontend/src/components/ai-elements/web-preview.tsx
@@ -66,8 +66,8 @@ export const WebPreview = ({
     <WebPreviewContext.Provider value={contextValue}>
       <div
         className={cn(
-          "bg-card flex size-full flex-col rounded-lg border",
-          className,
+          "flex size-full flex-col rounded-lg border bg-card",
+          className
         )}
         {...props}
       >
@@ -107,7 +107,7 @@ export const WebPreviewNavigationButton = ({
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          className="hover:text-foreground h-8 w-8 p-0"
+          className="h-8 w-8 p-0 hover:text-foreground"
           disabled={disabled}
           onClick={onClick}
           size="sm"
@@ -209,21 +209,21 @@ export const WebPreviewConsole = ({
 
   return (
     <Collapsible
-      className={cn("bg-muted/50 border-t font-mono text-sm", className)}
+      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
       onOpenChange={setConsoleOpen}
       open={consoleOpen}
       {...props}
     >
       <CollapsibleTrigger asChild>
         <Button
-          className="hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium"
+          className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
           variant="ghost"
         >
           Console
           <ChevronDownIcon
             className={cn(
               "h-4 w-4 transition-transform duration-200",
-              consoleOpen && "rotate-180",
+              consoleOpen && "rotate-180"
             )}
           />
         </Button>
@@ -231,7 +231,7 @@ export const WebPreviewConsole = ({
       <CollapsibleContent
         className={cn(
           "px-4 pb-4",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
         )}
       >
         <div className="max-h-48 space-y-1 overflow-y-auto">
@@ -244,7 +244,7 @@ export const WebPreviewConsole = ({
                   "text-xs",
                   log.level === "error" && "text-destructive",
                   log.level === "warn" && "text-yellow-600",
-                  log.level === "log" && "text-foreground",
+                  log.level === "log" && "text-foreground"
                 )}
                 key={`${log.timestamp.getTime()}-${index}`}
               >
diff --git a/frontend/src/components/landing/sections/case-study-section.tsx b/frontend/src/components/landing/sections/case-study-section.tsx
index 9a1fd51c..0ae2f667 100644
--- a/frontend/src/components/landing/sections/case-study-section.tsx
+++ b/frontend/src/components/landing/sections/case-study-section.tsx
@@ -55,7 +55,7 @@ export function CaseStudySection({ className }: { className?: string }) {
         {caseStudies.map((caseStudy) => (
           <Link
             key={caseStudy.title}
-            href={pathOfThread(caseStudy.threadId)}
+            href={pathOfThread(caseStudy.threadId) + "?mock=true"}
             target="_blank"
           >
             <Card className="group/card relative h-64 overflow-hidden">
diff --git a/frontend/src/components/ui/alert.tsx b/frontend/src/components/ui/alert.tsx
index aa7de24d..14213546 100644
--- a/frontend/src/components/ui/alert.tsx
+++ b/frontend/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -16,8 +16,8 @@ const alertVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 function Alert({
   className,
@@ -31,7 +31,7 @@ function Alert({
       className={cn(alertVariants({ variant }), className)}
       {...props}
     />
-  );
+  )
 }
 
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -40,11 +40,11 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="alert-title"
       className={cn(
         "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AlertDescription({
@@ -56,11 +56,11 @@ function AlertDescription({
       data-slot="alert-description"
       className={cn(
         "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertTitle, AlertDescription }
diff --git a/frontend/src/components/ui/aurora-text.tsx b/frontend/src/components/ui/aurora-text.tsx
index eb32cce2..85857c1a 100644
--- a/frontend/src/components/ui/aurora-text.tsx
+++ b/frontend/src/components/ui/aurora-text.tsx
@@ -1,13 +1,12 @@
-"use client";
+"use client"
 
-import React, { memo } from "react";
+import React, { memo } from "react"
 
 interface AuroraTextProps {
-  children: React.ReactNode;
-  className?: string;
-  colors?: string[];
-  speed?: number;
-  style?: React.CSSProperties;
+  children: React.ReactNode
+  className?: string
+  colors?: string[]
+  speed?: number
 }
 
 export const AuroraText = memo(
@@ -16,7 +15,6 @@ export const AuroraText = memo(
     className = "",
     colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
     speed = 1,
-    style,
   }: AuroraTextProps) => {
     const gradientStyle = {
       backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
@@ -25,10 +23,10 @@ export const AuroraText = memo(
       WebkitBackgroundClip: "text",
       WebkitTextFillColor: "transparent",
       animationDuration: `${10 / speed}s`,
-    };
+    }
 
     return (
-      <span className={`relative inline-block ${className}`} style={style}>
+      <span className={`relative inline-block ${className}`}>
         <span className="sr-only">{children}</span>
         <span
           className="animate-aurora relative bg-size-[200%_auto] bg-clip-text text-transparent"
@@ -38,8 +36,8 @@ export const AuroraText = memo(
           {children}
         </span>
       </span>
-    );
-  },
-);
+    )
+  }
+)
 
-AuroraText.displayName = "AuroraText";
+AuroraText.displayName = "AuroraText"
diff --git a/frontend/src/components/ui/avatar.tsx b/frontend/src/components/ui/avatar.tsx
index c4475c2e..71e428b4 100644
--- a/frontend/src/components/ui/avatar.tsx
+++ b/frontend/src/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Avatar({
   className,
@@ -14,11 +14,11 @@ function Avatar({
       data-slot="avatar"
       className={cn(
         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarImage({
@@ -31,7 +31,7 @@ function AvatarImage({
       className={cn("aspect-square size-full", className)}
       {...props}
     />
-  );
+  )
 }
 
 function AvatarFallback({
@@ -43,11 +43,11 @@ function AvatarFallback({
       data-slot="avatar-fallback"
       className={cn(
         "bg-muted flex size-full items-center justify-center rounded-full",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index 55f8352b..fd3a406b 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -1,8 +1,8 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
@@ -22,8 +22,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 function Badge({
   className,
@@ -32,7 +32,7 @@ function Badge({
   ...props
 }: React.ComponentProps<"span"> &
   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
+  const Comp = asChild ? Slot : "span"
 
   return (
     <Comp
@@ -40,7 +40,7 @@ function Badge({
       className={cn(badgeVariants({ variant }), className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }
diff --git a/frontend/src/components/ui/breadcrumb.tsx b/frontend/src/components/ui/breadcrumb.tsx
index f63ae19a..eb88f321 100644
--- a/frontend/src/components/ui/breadcrumb.tsx
+++ b/frontend/src/components/ui/breadcrumb.tsx
@@ -1,11 +1,11 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
@@ -14,11 +14,11 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
       data-slot="breadcrumb-list"
       className={cn(
         "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
@@ -28,7 +28,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
       className={cn("inline-flex items-center gap-1.5", className)}
       {...props}
     />
-  );
+  )
 }
 
 function BreadcrumbLink({
@@ -36,9 +36,9 @@ function BreadcrumbLink({
   className,
   ...props
 }: React.ComponentProps<"a"> & {
-  asChild?: boolean;
+  asChild?: boolean
 }) {
-  const Comp = asChild ? Slot : "a";
+  const Comp = asChild ? Slot : "a"
 
   return (
     <Comp
@@ -46,7 +46,7 @@ function BreadcrumbLink({
       className={cn("hover:text-foreground transition-colors", className)}
       {...props}
     />
-  );
+  )
 }
 
 function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
@@ -59,7 +59,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       className={cn("text-foreground font-normal", className)}
       {...props}
     />
-  );
+  )
 }
 
 function BreadcrumbSeparator({
@@ -77,7 +77,7 @@ function BreadcrumbSeparator({
     >
       {children ?? <ChevronRight />}
     </li>
-  );
+  )
 }
 
 function BreadcrumbEllipsis({
@@ -95,7 +95,7 @@ function BreadcrumbEllipsis({
       <MoreHorizontal className="size-4" />
       <span className="sr-only">More</span>
     </span>
-  );
+  )
 }
 
 export {
@@ -106,4 +106,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-};
+}
diff --git a/frontend/src/components/ui/button-group.tsx b/frontend/src/components/ui/button-group.tsx
index 043802ed..8600af03 100644
--- a/frontend/src/components/ui/button-group.tsx
+++ b/frontend/src/components/ui/button-group.tsx
@@ -1,8 +1,8 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
@@ -18,8 +18,8 @@ const buttonGroupVariants = cva(
     defaultVariants: {
       orientation: "horizontal",
     },
-  },
-);
+  }
+)
 
 function ButtonGroup({
   className,
@@ -34,7 +34,7 @@ function ButtonGroup({
       className={cn(buttonGroupVariants({ orientation }), className)}
       {...props}
     />
-  );
+  )
 }
 
 function ButtonGroupText({
@@ -42,19 +42,19 @@ function ButtonGroupText({
   asChild = false,
   ...props
 }: React.ComponentProps<"div"> & {
-  asChild?: boolean;
+  asChild?: boolean
 }) {
-  const Comp = asChild ? Slot : "div";
+  const Comp = asChild ? Slot : "div"
 
   return (
     <Comp
       className={cn(
         "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function ButtonGroupSeparator({
@@ -68,11 +68,11 @@ function ButtonGroupSeparator({
       orientation={orientation}
       className={cn(
         "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -80,4 +80,4 @@ export {
   ButtonGroupSeparator,
   ButtonGroupText,
   buttonGroupVariants,
-};
+}
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index f11b51b9..f332e0d9 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -18,7 +18,7 @@ const buttonVariants = cva(
         secondary:
           "cursor-pointer bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "cursor-pointer bg-transparent hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "cursor-pointer hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "cursor-pointer text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index 48ae7eb2..681ad980 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -1,18 +1,18 @@
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-[20px]",
-        className,
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -20,12 +20,12 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className,
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("leading-none font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
@@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
@@ -54,11 +54,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="card-action"
       className={cn(
         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("px-6", className)}
       {...props}
     />
-  );
+  )
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -89,4 +89,4 @@ export {
   CardAction,
   CardDescription,
   CardContent,
-};
+}
diff --git a/frontend/src/components/ui/carousel.tsx b/frontend/src/components/ui/carousel.tsx
index dc1985af..0e05a77e 100644
--- a/frontend/src/components/ui/carousel.tsx
+++ b/frontend/src/components/ui/carousel.tsx
@@ -1,45 +1,45 @@
-"use client";
+"use client"
 
-import * as React from "react";
+import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
-} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
 
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
 
 type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
-};
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext);
+  const context = React.useContext(CarouselContext)
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
+    throw new Error("useCarousel must be used within a <Carousel />")
   }
 
-  return context;
+  return context
 }
 
 function Carousel({
@@ -56,53 +56,53 @@ function Carousel({
       ...opts,
       axis: orientation === "horizontal" ? "x" : "y",
     },
-    plugins,
-  );
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
 
   const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return;
-    setCanScrollPrev(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
 
   const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
+    api?.scrollPrev()
+  }, [api])
 
   const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
+    api?.scrollNext()
+  }, [api])
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
+        event.preventDefault()
+        scrollPrev()
       } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
+        event.preventDefault()
+        scrollNext()
       }
     },
-    [scrollPrev, scrollNext],
-  );
+    [scrollPrev, scrollNext]
+  )
 
   React.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
 
   React.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
 
     return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
 
   return (
     <CarouselContext.Provider
@@ -129,11 +129,11 @@ function Carousel({
         {children}
       </div>
     </CarouselContext.Provider>
-  );
+  )
 }
 
 function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel();
+  const { carouselRef, orientation } = useCarousel()
 
   return (
     <div
@@ -145,16 +145,16 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
         className={cn(
           "flex",
           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
+          className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
 function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel();
+  const { orientation } = useCarousel()
 
   return (
     <div
@@ -164,11 +164,11 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CarouselPrevious({
@@ -177,7 +177,7 @@ function CarouselPrevious({
   size = "icon",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
@@ -189,7 +189,7 @@ function CarouselPrevious({
         orientation === "horizontal"
           ? "top-1/2 -left-12 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
+        className
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
@@ -198,7 +198,7 @@ function CarouselPrevious({
       <ArrowLeft />
       <span className="sr-only">Previous slide</span>
     </Button>
-  );
+  )
 }
 
 function CarouselNext({
@@ -207,7 +207,7 @@ function CarouselNext({
   size = "icon",
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
@@ -219,7 +219,7 @@ function CarouselNext({
         orientation === "horizontal"
           ? "top-1/2 -right-12 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
+        className
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
@@ -228,7 +228,7 @@ function CarouselNext({
       <ArrowRight />
       <span className="sr-only">Next slide</span>
     </Button>
-  );
+  )
 }
 
 export {
@@ -238,4 +238,4 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-};
+}
diff --git a/frontend/src/components/ui/command.tsx b/frontend/src/components/ui/command.tsx
index ee7450af..8cb4ca7a 100644
--- a/frontend/src/components/ui/command.tsx
+++ b/frontend/src/components/ui/command.tsx
@@ -1,17 +1,17 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "lucide-react";
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
+} from "@/components/ui/dialog"
 
 function Command({
   className,
@@ -22,11 +22,11 @@ function Command({
       data-slot="command"
       className={cn(
         "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandDialog({
@@ -37,10 +37,10 @@ function CommandDialog({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string;
-  description?: string;
-  className?: string;
-  showCloseButton?: boolean;
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
 }) {
   return (
     <Dialog {...props}>
@@ -57,7 +57,7 @@ function CommandDialog({
         </Command>
       </DialogContent>
     </Dialog>
-  );
+  )
 }
 
 function CommandInput({
@@ -74,12 +74,12 @@ function CommandInput({
         data-slot="command-input"
         className={cn(
           "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-          className,
+          className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
 function CommandList({
@@ -91,11 +91,11 @@ function CommandList({
       data-slot="command-list"
       className={cn(
         "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandEmpty({
@@ -107,7 +107,7 @@ function CommandEmpty({
       className="py-6 text-center text-sm"
       {...props}
     />
-  );
+  )
 }
 
 function CommandGroup({
@@ -119,11 +119,11 @@ function CommandGroup({
       data-slot="command-group"
       className={cn(
         "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandSeparator({
@@ -136,7 +136,7 @@ function CommandSeparator({
       className={cn("bg-border -mx-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
 function CommandItem({
@@ -148,11 +148,11 @@ function CommandItem({
       data-slot="command-item"
       className={cn(
         "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandShortcut({
@@ -164,11 +164,11 @@ function CommandShortcut({
       data-slot="command-shortcut"
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -181,4 +181,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-};
+}
diff --git a/frontend/src/components/ui/dev-dialog.tsx b/frontend/src/components/ui/dev-dialog.tsx
deleted file mode 100644
index 36b600bf..00000000
--- a/frontend/src/components/ui/dev-dialog.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-
-function DevDialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dev-dialog" {...props} />;
-}
-
-function DevDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dev-dialog-trigger" {...props} />;
-}
-
-function DevDialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dev-dialog-portal" {...props} />;
-}
-
-function DevDialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dev-dialog-close" {...props} />;
-}
-
-function DevDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dev-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DevDialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
-  return (
-    <DevDialogPortal data-slot="dev-dialog-portal">
-      <DevDialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dev-dialog-content"
-        className={cn(
-          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[400px] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-[#ffffff] p-[40px] shadow-lg duration-200 outline-none sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dev-dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DevDialogPortal>
-  );
-}
-
-function DevDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dev-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function DevDialogFooter({
-  className,
-  singleColumn = false,
-  ...props
-}: React.ComponentProps<"div"> & { singleColumn?: boolean }) {
-  return (
-    <div
-      data-slot="dev-dialog-footer"
-      className={cn(
-        "grid w-full justify-between gap-[30px] sm:flex-row",
-        singleColumn ? "grid-cols-1" : "grid-cols-2",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DevDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dev-dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function DevDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dev-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  DevDialog,
-  DevDialogClose,
-  DevDialogContent,
-  DevDialogDescription,
-  DevDialogFooter,
-  DevDialogHeader,
-  DevDialogOverlay,
-  DevDialogPortal,
-  DevDialogTitle,
-  DevDialogTrigger,
-};
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index bad9f2de..a6f1cfbd 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -1,33 +1,33 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
 function DialogTrigger({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
 function DialogPortal({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
 function DialogClose({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
 function DialogOverlay({
@@ -39,11 +39,11 @@ function DialogOverlay({
       data-slot="dialog-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogContent({
@@ -52,7 +52,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -61,7 +61,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
-          className,
+          className
         )}
         {...props}
       >
@@ -77,7 +77,7 @@ function DialogContent({
         )}
       </DialogPrimitive.Content>
     </DialogPortal>
-  );
+  )
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,7 +87,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -96,11 +96,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogTitle({
@@ -113,7 +113,7 @@ function DialogTitle({
       className={cn("text-lg leading-none font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DialogDescription({
@@ -126,7 +126,7 @@ function DialogDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -140,4 +140,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-};
+}
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index 1270e58f..bbe6fb01 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -1,15 +1,15 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
 
 function DropdownMenuPortal({
@@ -17,20 +17,18 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  );
+  )
 }
 
 function DropdownMenuTrigger({
-  className,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
-      className={cn(className)}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuContent({
@@ -44,13 +42,13 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-[20px] border p-[20px] shadow-md",
-          className,
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  );
+  )
 }
 
 function DropdownMenuGroup({
@@ -58,7 +56,7 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  );
+  )
 }
 
 function DropdownMenuItem({
@@ -67,8 +65,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
+  inset?: boolean
+  variant?: "default" | "destructive"
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -77,11 +75,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuCheckboxItem({
@@ -95,7 +93,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -107,7 +105,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function DropdownMenuRadioGroup({
@@ -118,7 +116,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuRadioItem({
@@ -130,8 +128,8 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 whitespace-nowrap rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none overflow-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
       )}
       {...props}
     >
@@ -142,7 +140,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function DropdownMenuLabel({
@@ -150,7 +148,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.Label
@@ -158,11 +156,11 @@ function DropdownMenuLabel({
       data-inset={inset}
       className={cn(
         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSeparator({
@@ -175,7 +173,7 @@ function DropdownMenuSeparator({
       className={cn("bg-border -mx-1 my-1 h-px", className)}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuShortcut({
@@ -187,17 +185,17 @@ function DropdownMenuShortcut({
       data-slot="dropdown-menu-shortcut"
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
 }
 
 function DropdownMenuSubTrigger({
@@ -206,7 +204,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
@@ -214,14 +212,14 @@ function DropdownMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
 function DropdownMenuSubContent({
@@ -232,12 +230,12 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-[20px] border p-1 shadow-lg",
-        className,
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -256,4 +254,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-};
+}
diff --git a/frontend/src/components/ui/dropdown-selector.tsx b/frontend/src/components/ui/dropdown-selector.tsx
deleted file mode 100644
index 7d435d7c..00000000
--- a/frontend/src/components/ui/dropdown-selector.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { useState } from "react";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { cn, truncateMiddle } from "@/lib/utils";
-
-export interface DropdownSelectorOption<T extends string> {
-  value: T;
-  label: string;
-}
-
-interface DropdownSelectorProps<T extends string> {
-  value: T;
-  options: DropdownSelectorOption<T>[];
-  onChange: (value: T) => void;
-  triggerClassName?: string;
-  contentClassName?: string;
-}
-
-function ChevronDownIcon() {
-  return (
-    <svg
-      width="10"
-      height="6"
-      viewBox="0 0 10 6"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M0.75 0.75L4.75 4.75L8.75 0.75"
-        stroke="#666666"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function ChevronUpIcon() {
-  return (
-    <svg
-      width="10"
-      height="6"
-      viewBox="0 0 10 6"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M0.75 4.75L4.75 0.75L8.75 4.75"
-        stroke="#666666"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export function DropdownSelector<T extends string>({
-  value,
-  options,
-  onChange,
-  triggerClassName,
-  contentClassName,
-}: DropdownSelectorProps<T>) {
-  const selectedOption = options.find((opt) => opt.value === value);
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
-      <DropdownMenuTrigger
-        className={
-          triggerClassName ??
-          "border-none bg-transparent flex justify-center w-full overflow-hidden text-ellipsis whitespace-nowrap shadow-none select-none focus:outline-none"
-        }
-      >
-        <span className="flex w-full justify-center items-center gap-1">
-          {truncateMiddle(selectedOption?.label ?? value, 50)}
-          {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-        </span>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className={cn(contentClassName, "max-w-80")}>
-        <DropdownMenuRadioGroup
-          value={value}
-          onValueChange={(v) => onChange(v as T)}
-        >
-          {options.map((option) => (
-            <DropdownMenuRadioItem
-              key={option.value}
-              value={option.value}
-              title={option.label}
-            >
-              {truncateMiddle(option.label)}
-            </DropdownMenuRadioItem>
-          ))}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
\ No newline at end of file
diff --git a/frontend/src/components/ui/empty.tsx b/frontend/src/components/ui/empty.tsx
index e4a0754c..df91e9d8 100644
--- a/frontend/src/components/ui/empty.tsx
+++ b/frontend/src/components/ui/empty.tsx
@@ -1,6 +1,6 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Empty({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -8,11 +8,11 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="empty"
       className={cn(
         "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -21,11 +21,11 @@ function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="empty-header"
       className={cn(
         "flex max-w-sm flex-col items-center gap-2 text-center",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 const emptyMediaVariants = cva(
@@ -40,8 +40,8 @@ const emptyMediaVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 function EmptyMedia({
   className,
@@ -55,7 +55,7 @@ function EmptyMedia({
       className={cn(emptyMediaVariants({ variant, className }))}
       {...props}
     />
-  );
+  )
 }
 
 function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -65,7 +65,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("text-lg font-medium tracking-tight", className)}
       {...props}
     />
-  );
+  )
 }
 
 function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -74,11 +74,11 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
       data-slot="empty-description"
       className={cn(
         "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -87,11 +87,11 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="empty-content"
       className={cn(
         "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -101,4 +101,4 @@ export {
   EmptyDescription,
   EmptyContent,
   EmptyMedia,
-};
+}
diff --git a/frontend/src/components/ui/galaxy.jsx b/frontend/src/components/ui/galaxy.jsx
index 549e0e8e..c1d20ab8 100644
--- a/frontend/src/components/ui/galaxy.jsx
+++ b/frontend/src/components/ui/galaxy.jsx
@@ -198,11 +198,28 @@ export default function Galaxy({
   useEffect(() => {
     if (!ctnDom.current) return;
     const ctn = ctnDom.current;
-    const renderer = new Renderer({
-      alpha: transparent,
-      premultipliedAlpha: false,
-    });
+
+    let renderer;
+    try {
+      renderer = new Renderer({
+        alpha: transparent,
+        premultipliedAlpha: false,
+      });
+    } catch (error) {
+      console.warn(
+        "Galaxy: WebGL is not available. The galaxy background will not be rendered.",
+        error,
+      );
+      return;
+    }
+
     const gl = renderer.gl;
+    if (!gl) {
+      console.warn(
+        "Galaxy: WebGL context is null. The galaxy background will not be rendered.",
+      );
+      return;
+    }
 
     if (transparent) {
       gl.enable(gl.BLEND);
diff --git a/frontend/src/components/ui/hover-card.tsx b/frontend/src/components/ui/hover-card.tsx
index f574b4ad..e7541864 100644
--- a/frontend/src/components/ui/hover-card.tsx
+++ b/frontend/src/components/ui/hover-card.tsx
@@ -1,14 +1,14 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function HoverCard({
   ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
 }
 
 function HoverCardTrigger({
@@ -16,7 +16,7 @@ function HoverCardTrigger({
 }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
   return (
     <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  );
+  )
 }
 
 function HoverCardContent({
@@ -33,12 +33,12 @@ function HoverCardContent({
         sideOffset={sideOffset}
         className={cn(
           "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className,
+          className
         )}
         {...props}
       />
     </HoverCardPrimitive.Portal>
-  );
+  )
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/frontend/src/components/ui/input-group.tsx b/frontend/src/components/ui/input-group.tsx
index 392738be..e35f75b2 100644
--- a/frontend/src/components/ui/input-group.tsx
+++ b/frontend/src/components/ui/input-group.tsx
@@ -14,20 +14,20 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group dark:bg-background/80 relative flex w-full max-w-[720px] items-center overflow-hidden rounded-md bg-[#FBFAFC] transition-[color,box-shadow] outline-none",
+        "group/input-group border-input/50 dark:bg-background/80 relative flex w-full items-center rounded-md border bg-white/80 shadow-xs transition-[color,box-shadow] outline-none",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
         "has-[>[data-align=inline-start]]:[&>input]:pl-2",
         "has-[>[data-align=inline-end]]:[&>input]:pr-2",
         "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-input has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
 
         // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
         className,
       )}
@@ -152,7 +152,7 @@ function InputGroupTextarea({
     <Textarea
       data-slot="input-group-control"
       className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent p-[20px] shadow-none focus-visible:ring-0 dark:bg-transparent",
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/item.tsx b/frontend/src/components/ui/item.tsx
index 3d21751b..d97de21e 100644
--- a/frontend/src/components/ui/item.tsx
+++ b/frontend/src/components/ui/item.tsx
@@ -1,9 +1,9 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
-import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -13,7 +13,7 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("group/item-group flex flex-col", className)}
       {...props}
     />
-  );
+  )
 }
 
 function ItemSeparator({
@@ -27,7 +27,7 @@ function ItemSeparator({
       className={cn("my-0", className)}
       {...props}
     />
-  );
+  )
 }
 
 const itemVariants = cva(
@@ -48,8 +48,8 @@ const itemVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 function Item({
   className,
@@ -59,7 +59,7 @@ function Item({
   ...props
 }: React.ComponentProps<"div"> &
   VariantProps<typeof itemVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div";
+  const Comp = asChild ? Slot : "div"
   return (
     <Comp
       data-slot="item"
@@ -68,7 +68,7 @@ function Item({
       className={cn(itemVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
 const itemMediaVariants = cva(
@@ -85,8 +85,8 @@ const itemMediaVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 function ItemMedia({
   className,
@@ -100,7 +100,7 @@ function ItemMedia({
       className={cn(itemMediaVariants({ variant, className }))}
       {...props}
     />
-  );
+  )
 }
 
 function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
@@ -109,11 +109,11 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="item-content"
       className={cn(
         "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
@@ -122,11 +122,11 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="item-title"
       className={cn(
         "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
@@ -136,11 +136,11 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn(
         "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
@@ -150,7 +150,7 @@ function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex items-center gap-2", className)}
       {...props}
     />
-  );
+  )
 }
 
 function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -159,11 +159,11 @@ function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="item-header"
       className={cn(
         "flex basis-full items-center justify-between gap-2",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -172,11 +172,11 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="item-footer"
       className={cn(
         "flex basis-full items-center justify-between gap-2",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -190,4 +190,4 @@ export {
   ItemDescription,
   ItemHeader,
   ItemFooter,
-};
+}
diff --git a/frontend/src/components/ui/magic-bento.css b/frontend/src/components/ui/magic-bento.css
index d18e7f3f..ac6e7994 100644
--- a/frontend/src/components/ui/magic-bento.css
+++ b/frontend/src/components/ui/magic-bento.css
@@ -145,7 +145,7 @@
 
 /* Border glow effect */
 .magic-bento-card--border-glow::after {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   padding: 6px;
@@ -186,7 +186,7 @@
 }
 
 .particle::before {
-  content: "";
+  content: '';
   position: absolute;
   top: -2px;
   left: -2px;
diff --git a/frontend/src/components/ui/progress.tsx b/frontend/src/components/ui/progress.tsx
index e4356372..e7a416c3 100644
--- a/frontend/src/components/ui/progress.tsx
+++ b/frontend/src/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Progress({
   className,
@@ -15,7 +15,7 @@ function Progress({
       data-slot="progress"
       className={cn(
         "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className,
+        className
       )}
       {...props}
     >
@@ -25,7 +25,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  );
+  )
 }
 
-export { Progress };
+export { Progress }
diff --git a/frontend/src/components/ui/resizable.tsx b/frontend/src/components/ui/resizable.tsx
index 18577c8e..2a04e8ef 100644
--- a/frontend/src/components/ui/resizable.tsx
+++ b/frontend/src/components/ui/resizable.tsx
@@ -39,7 +39,7 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
index 5524f1ca..8e4fa13f 100644
--- a/frontend/src/components/ui/scroll-area.tsx
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function ScrollArea({
   className,
@@ -25,7 +25,7 @@ function ScrollArea({
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  );
+  )
 }
 
 function ScrollBar({
@@ -43,7 +43,7 @@ function ScrollBar({
           "h-full w-2.5 border-l border-l-transparent",
         orientation === "horizontal" &&
           "h-2.5 flex-col border-t border-t-transparent",
-        className,
+        className
       )}
       {...props}
     >
@@ -52,7 +52,7 @@ function ScrollBar({
         className="bg-border relative flex-1 rounded-full"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
+  )
 }
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar }
diff --git a/frontend/src/components/ui/separator.tsx b/frontend/src/components/ui/separator.tsx
index 72c18e33..275381ca 100644
--- a/frontend/src/components/ui/separator.tsx
+++ b/frontend/src/components/ui/separator.tsx
@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Separator({
   className,
@@ -18,11 +18,11 @@ function Separator({
       orientation={orientation}
       className={cn(
         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Separator };
+export { Separator }
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index d30779f4..84649ad0 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -1,31 +1,31 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
 function SheetTrigger({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 }
 
 function SheetClose({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 }
 
 function SheetPortal({
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 }
 
 function SheetOverlay({
@@ -37,11 +37,11 @@ function SheetOverlay({
       data-slot="sheet-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SheetContent({
@@ -50,7 +50,7 @@ function SheetContent({
   side = "right",
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left";
+  side?: "top" | "right" | "bottom" | "left"
 }) {
   return (
     <SheetPortal>
@@ -67,7 +67,7 @@ function SheetContent({
             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
           side === "bottom" &&
             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-          className,
+          className
         )}
         {...props}
       >
@@ -78,7 +78,7 @@ function SheetContent({
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
-  );
+  )
 }
 
 function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
@@ -88,7 +88,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("flex flex-col gap-1.5 p-4", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
@@ -98,7 +98,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetTitle({
@@ -111,7 +111,7 @@ function SheetTitle({
       className={cn("text-foreground font-semibold", className)}
       {...props}
     />
-  );
+  )
 }
 
 function SheetDescription({
@@ -124,7 +124,7 @@ function SheetDescription({
       className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -136,4 +136,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-};
+}
diff --git a/frontend/src/components/ui/shine-border.tsx b/frontend/src/components/ui/shine-border.tsx
index 779cf1b0..1a55bfc8 100644
--- a/frontend/src/components/ui/shine-border.tsx
+++ b/frontend/src/components/ui/shine-border.tsx
@@ -1,25 +1,25 @@
-"use client";
+"use client"
 
-import * as React from "react";
+import * as React from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 interface ShineBorderProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Width of the border in pixels
    * @default 1
    */
-  borderWidth?: number;
+  borderWidth?: number
   /**
    * Duration of the animation in seconds
    * @default 14
    */
-  duration?: number;
+  duration?: number
   /**
    * Color of the border, can be a single color or an array of colors
    * @default "#000000"
    */
-  shineColor?: string | string[];
+  shineColor?: string | string[]
 }
 
 /**
@@ -55,9 +55,9 @@ export function ShineBorder({
       }
       className={cn(
         "motion-safe:animate-shine pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position]",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index 5b6a6a96..c232e36c 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -139,7 +139,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar m-auto flex min-h-svh w-full overflow-hidden rounded-t-[20px]",
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
             className,
           )}
           {...props}
@@ -207,7 +207,6 @@ function Sidebar({
 
   return (
     <div
-      // !
       className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
@@ -310,7 +309,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "relative flex w-full flex-1 flex-col",
+        "bg-background relative flex w-full flex-1 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className,
       )}
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
index 01689981..32ea0ef7 100644
--- a/frontend/src/components/ui/skeleton.tsx
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
       className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
index 64734467..9b20afe2 100644
--- a/frontend/src/components/ui/sonner.tsx
+++ b/frontend/src/components/ui/sonner.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client"
 
 import {
   CircleCheckIcon,
@@ -6,23 +6,23 @@ import {
   Loader2Icon,
   OctagonXIcon,
   TriangleAlertIcon,
-} from "lucide-react";
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
+  const { theme = "system" } = useTheme()
 
   return (
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       icons={{
-        success: null,
-        info: null,
-        warning: null,
-        error: null,
-        loading: null,
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
       }}
       style={
         {
@@ -34,7 +34,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }
       {...props}
     />
-  );
-};
+  )
+}
 
-export { Toaster };
+export { Toaster }
diff --git a/frontend/src/components/ui/spotlight-card.css b/frontend/src/components/ui/spotlight-card.css
index fb20e72f..ee533751 100644
--- a/frontend/src/components/ui/spotlight-card.css
+++ b/frontend/src/components/ui/spotlight-card.css
@@ -11,17 +11,13 @@
 }
 
 .card-spotlight::before {
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(
-    circle at var(--mouse-x) var(--mouse-y),
-    var(--spotlight-color),
-    transparent 80%
-  );
+  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);
   opacity: 0;
   transition: opacity 0.5s ease;
   pointer-events: none;
diff --git a/frontend/src/components/ui/switch.tsx b/frontend/src/components/ui/switch.tsx
index d63e4b77..6a2b5241 100644
--- a/frontend/src/components/ui/switch.tsx
+++ b/frontend/src/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Switch({
   className,
@@ -14,18 +14,18 @@ function Switch({
       data-slot="switch"
       className={cn(
         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className,
+        className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
         )}
       />
     </SwitchPrimitive.Root>
-  );
+  )
 }
 
-export { Switch };
+export { Switch }
diff --git a/frontend/src/components/ui/tabs.tsx b/frontend/src/components/ui/tabs.tsx
index 63eae74f..441c5d42 100644
--- a/frontend/src/components/ui/tabs.tsx
+++ b/frontend/src/components/ui/tabs.tsx
@@ -1,10 +1,10 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 function Tabs({
   className,
@@ -18,11 +18,11 @@ function Tabs({
       orientation={orientation}
       className={cn(
         "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 const tabsListVariants = cva(
@@ -37,8 +37,8 @@ const tabsListVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  },
-);
+  }
+)
 
 function TabsList({
   className,
@@ -53,7 +53,7 @@ function TabsList({
       className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
-  );
+  )
 }
 
 function TabsTrigger({
@@ -68,11 +68,11 @@ function TabsTrigger({
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function TabsContent({
@@ -85,7 +85,7 @@ function TabsContent({
       className={cn("flex-1 outline-none", className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/frontend/src/components/ui/toggle-group.tsx b/frontend/src/components/ui/toggle-group.tsx
index e0715805..2739e29b 100644
--- a/frontend/src/components/ui/toggle-group.tsx
+++ b/frontend/src/components/ui/toggle-group.tsx
@@ -69,8 +69,8 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "h-full w-[50px] min-w-0 shrink-0 cursor-pointer bg-white px-3 focus:z-10 focus-visible:z-10",
-        "data-[spacing=0]:data-[variant=outline] data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md",
+        "w-auto min-w-0 shrink-0 cursor-pointer px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
         className,
       )}
       {...props}
diff --git a/frontend/src/components/ui/toggle.tsx b/frontend/src/components/ui/toggle.tsx
index 47517bde..94ec8f58 100644
--- a/frontend/src/components/ui/toggle.tsx
+++ b/frontend/src/components/ui/toggle.tsx
@@ -1,10 +1,10 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
@@ -25,8 +25,8 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  },
-);
+  }
+)
 
 function Toggle({
   className,
@@ -41,7 +41,7 @@ function Toggle({
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
     />
-  );
+  )
 }
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }
diff --git a/frontend/src/components/ui/tooltip.tsx b/frontend/src/components/ui/tooltip.tsx
index 91f395c1..ad590050 100644
--- a/frontend/src/components/ui/tooltip.tsx
+++ b/frontend/src/components/ui/tooltip.tsx
@@ -46,7 +46,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset ?? 4}
         className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-tooltip-background text-background dark:text-foreground z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md border px-3 py-1.5 text-xs text-balance shadow-xs dark:border-white/18 dark:bg-[#050504]",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background dark:text-foreground z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md border px-3 py-1.5 text-xs text-balance shadow-xs dark:border-white/18 dark:bg-[#050504]",
           className,
         )}
         {...props}
diff --git a/frontend/src/components/workspace/agent-welcome.tsx b/frontend/src/components/workspace/agent-welcome.tsx
new file mode 100644
index 00000000..7d30b9b3
--- /dev/null
+++ b/frontend/src/components/workspace/agent-welcome.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { BotIcon } from "lucide-react";
+
+import { type Agent } from "@/core/agents";
+import { cn } from "@/lib/utils";
+
+export function AgentWelcome({
+  className,
+  agent,
+  agentName,
+}: {
+  className?: string;
+  agent: Agent | null | undefined;
+  agentName: string;
+}) {
+  const displayName = agent?.name ?? agentName;
+  const description = agent?.description;
+
+  return (
+    <div
+      className={cn(
+        "mx-auto flex w-full flex-col items-center justify-center gap-2 px-8 py-4 text-center",
+        className,
+      )}
+    >
+      <div className="bg-primary/10 flex h-12 w-12 items-center justify-center rounded-full">
+        <BotIcon className="text-primary h-6 w-6" />
+      </div>
+      <div className="text-2xl font-bold">{displayName}</div>
+      {description && (
+        <p className="text-muted-foreground max-w-sm text-sm">{description}</p>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/workspace/agents/agent-card.tsx b/frontend/src/components/workspace/agents/agent-card.tsx
new file mode 100644
index 00000000..6b2a510b
--- /dev/null
+++ b/frontend/src/components/workspace/agents/agent-card.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { BotIcon, MessageSquareIcon, Trash2Icon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useDeleteAgent } from "@/core/agents";
+import type { Agent } from "@/core/agents";
+import { useI18n } from "@/core/i18n/hooks";
+
+interface AgentCardProps {
+  agent: Agent;
+}
+
+export function AgentCard({ agent }: AgentCardProps) {
+  const { t } = useI18n();
+  const router = useRouter();
+  const deleteAgent = useDeleteAgent();
+  const [deleteOpen, setDeleteOpen] = useState(false);
+
+  function handleChat() {
+    router.push(`/workspace/agents/${agent.name}/chats/new`);
+  }
+
+  async function handleDelete() {
+    try {
+      await deleteAgent.mutateAsync(agent.name);
+      toast.success(t.agents.deleteSuccess);
+      setDeleteOpen(false);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : String(err));
+    }
+  }
+
+  return (
+    <>
+      <Card className="group flex flex-col transition-shadow hover:shadow-md">
+        <CardHeader className="pb-3">
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+                <BotIcon className="h-5 w-5" />
+              </div>
+              <div className="min-w-0">
+                <CardTitle className="truncate text-base">
+                  {agent.name}
+                </CardTitle>
+                {agent.model && (
+                  <Badge variant="secondary" className="mt-0.5 text-xs">
+                    {agent.model}
+                  </Badge>
+                )}
+              </div>
+            </div>
+          </div>
+          {agent.description && (
+            <CardDescription className="mt-2 line-clamp-2 text-sm">
+              {agent.description}
+            </CardDescription>
+          )}
+        </CardHeader>
+
+        {agent.tool_groups && agent.tool_groups.length > 0 && (
+          <CardContent className="pt-0 pb-3">
+            <div className="flex flex-wrap gap-1">
+              {agent.tool_groups.map((group) => (
+                <Badge key={group} variant="outline" className="text-xs">
+                  {group}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        )}
+
+        <CardFooter className="mt-auto flex items-center justify-between gap-2 pt-3">
+          <Button size="sm" className="flex-1" onClick={handleChat}>
+            <MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
+            {t.agents.chat}
+          </Button>
+          <div className="flex gap-1">
+            <Button
+              size="icon"
+              variant="ghost"
+              className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+              onClick={() => setDeleteOpen(true)}
+              title={t.agents.delete}
+            >
+              <Trash2Icon className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+        </CardFooter>
+      </Card>
+
+      {/* Delete Confirm */}
+      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t.agents.delete}</DialogTitle>
+            <DialogDescription>{t.agents.deleteConfirm}</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setDeleteOpen(false)}
+              disabled={deleteAgent.isPending}
+            >
+              {t.common.cancel}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={deleteAgent.isPending}
+            >
+              {deleteAgent.isPending ? t.common.loading : t.common.delete}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/frontend/src/components/workspace/agents/agent-gallery.tsx b/frontend/src/components/workspace/agents/agent-gallery.tsx
new file mode 100644
index 00000000..73986265
--- /dev/null
+++ b/frontend/src/components/workspace/agents/agent-gallery.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { BotIcon, PlusIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+import { Button } from "@/components/ui/button";
+import { useAgents } from "@/core/agents";
+import { useI18n } from "@/core/i18n/hooks";
+
+import { AgentCard } from "./agent-card";
+
+export function AgentGallery() {
+  const { t } = useI18n();
+  const { agents, isLoading } = useAgents();
+  const router = useRouter();
+
+  const handleNewAgent = () => {
+    router.push("/workspace/agents/new");
+  };
+
+  return (
+    <div className="flex size-full flex-col">
+      {/* Page header */}
+      <div className="flex items-center justify-between border-b px-6 py-4">
+        <div>
+          <h1 className="text-xl font-semibold">{t.agents.title}</h1>
+          <p className="text-muted-foreground mt-0.5 text-sm">
+            {t.agents.description}
+          </p>
+        </div>
+        <Button onClick={handleNewAgent}>
+          <PlusIcon className="mr-1.5 h-4 w-4" />
+          {t.agents.newAgent}
+        </Button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {isLoading ? (
+          <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
+            {t.common.loading}
+          </div>
+        ) : agents.length === 0 ? (
+          <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
+            <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
+              <BotIcon className="text-muted-foreground h-7 w-7" />
+            </div>
+            <div>
+              <p className="font-medium">{t.agents.emptyTitle}</p>
+              <p className="text-muted-foreground mt-1 text-sm">
+                {t.agents.emptyDescription}
+              </p>
+            </div>
+            <Button variant="outline" className="mt-2" onClick={handleNewAgent}>
+              <PlusIcon className="mr-1.5 h-4 w-4" />
+              {t.agents.newAgent}
+            </Button>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {agents.map((agent) => (
+              <AgentCard key={agent.name} agent={agent} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index 64e5cbe2..267320b8 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -1,11 +1,14 @@
-import { DownloadIcon, FileTextIcon, LoaderIcon, FileTypeIcon } from "lucide-react";
 import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type HTMLAttributes,
-} from "react";
+  Code2Icon,
+  CopyIcon,
+  DownloadIcon,
+  EyeIcon,
+  LoaderIcon,
+  PackageIcon,
+  SquareArrowOutUpRightIcon,
+  XIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { Streamdown } from "streamdown";
 
@@ -17,26 +20,27 @@ import {
   ArtifactHeader,
   ArtifactTitle,
 } from "@/components/ai-elements/artifact";
+import { Select, SelectItem } from "@/components/ui/select";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { DropdownSelector } from "@/components/ui/dropdown-selector";
+  SelectContent,
+  SelectGroup,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { CodeEditor } from "@/components/workspace/code-editor";
 import { useArtifactContent } from "@/core/artifacts/hooks";
 import { urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
-import { POST_MESSAGE_TYPES, sendToParent } from "@/core/iframe-messages";
 import { installSkill } from "@/core/skills/api";
 import { streamdownPlugins } from "@/core/streamdown";
 import { checkCodeFile, getFileName } from "@/core/utils/files";
-import { useMarkdownDownload } from "@/core/utils/markdown-download";
-import { cn, copyToClipboard, truncateMiddle } from "@/lib/utils";
+import { env } from "@/env";
+import { cn } from "@/lib/utils";
 
-import { CitationLink } from "../citations/citation-link";
+import { ArtifactLink } from "../citations/artifact-link";
+import { useThread } from "../messages/context";
+import { Tooltip } from "../tooltip";
 
 import { useArtifacts } from "./context";
 
@@ -50,8 +54,7 @@ export function ArtifactFileDetail({
   threadId: string;
 }) {
   const { t } = useI18n();
-  const { artifacts, setOpen, select, fullscreen, setFullscreen } =
-    useArtifacts();
+  const { artifacts, setOpen, select } = useArtifacts();
   const isWriteFile = useMemo(() => {
     return filepathFromProps.startsWith("write-file:");
   }, [filepathFromProps]);
@@ -77,9 +80,9 @@ export function ArtifactFileDetail({
     }
     return checkCodeFile(filepath);
   }, [filepath, isWriteFile, isSkillFile]);
-  const previewable = useMemo(() => {
-    return (language === "html" && !isWriteFile) || language === "markdown";
-  }, [isWriteFile, language]);
+  const isSupportPreview = useMemo(() => {
+    return language === "html" || language === "markdown";
+  }, [language]);
   const { content } = useArtifactContent({
     threadId,
     filepath: filepathFromProps,
@@ -88,62 +91,16 @@ export function ArtifactFileDetail({
 
   const displayContent = content ?? "";
 
-  const artifactOptions = useMemo(() => {
-    return (artifacts ?? []).map((artifactPath) => ({
-      value: artifactPath,
-      label: getFileName(artifactPath),
-    }));
-  }, [artifacts]);
-
   const [viewMode, setViewMode] = useState<"code" | "preview">("code");
   const [isInstalling, setIsInstalling] = useState(false);
-  const [zoom, setZoom] = useState(80);
-
-  // 获取文件名（不含路径）
-  const fileName = useMemo(() => getFileName(filepath), [filepath]);
-
-  // 是否可以转换为docx/pdf（仅markdown文件支持）
-  const canConvertToDocxPdf = language === "markdown";
-
-  // 使用 Markdown 下载 hook
-  const { isDownloading, downloadAsDocx, downloadAsPdf } = useMarkdownDownload({
-    onError: (error, format) => {
-      console.error(`Failed to download as ${format}:`, error);
-      toast.error(`Failed to download as ${format.toUpperCase()}`);
-    },
-  });
-
-  // 下载为 DOCX
-  const handleDownloadDocx = useCallback(() => {
-    if (content) {
-      void downloadAsDocx(content, fileName);
-    }
-  }, [content, fileName, downloadAsDocx]);
-
-  // 下载为 PDF
-  const handleDownloadPdf = useCallback(() => {
-    if (content) {
-      void downloadAsPdf(content, fileName);
-    }
-  }, [content, fileName, downloadAsPdf]);
-
-  // 全屏切换处理
-  const handleFullscreenToggle = useCallback(() => {
-    const newFullscreen = !fullscreen;
-    setFullscreen(newFullscreen);
-    sendToParent({
-      type: POST_MESSAGE_TYPES.FULLSCREEN,
-      fullscreen: newFullscreen,
-    });
-  }, [fullscreen, setFullscreen]);
-
+  const { isMock } = useThread();
   useEffect(() => {
-    if (previewable) {
+    if (isSupportPreview) {
       setViewMode("preview");
     } else {
       setViewMode("code");
     }
-  }, [previewable]);
+  }, [isSupportPreview]);
 
   const handleInstallSkill = useCallback(async () => {
     if (isInstalling) return;
@@ -166,18 +123,38 @@ export function ArtifactFileDetail({
       setIsInstalling(false);
     }
   }, [threadId, filepath, isInstalling]);
-
   return (
-    // 给滚动遮挡头部定位relative
-    <Artifact className={cn("relative",className)}>
-      <ArtifactHeader>
-        <div className="flex items-center justify-start gap-2">
-          {previewable && (
+    <Artifact className={cn(className)}>
+      <ArtifactHeader className="px-2">
+        <div className="flex items-center gap-2">
+          <ArtifactTitle>
+            {isWriteFile ? (
+              <div className="px-2">{getFileName(filepath)}</div>
+            ) : (
+              <Select value={filepath} onValueChange={select}>
+                <SelectTrigger className="border-none bg-transparent! shadow-none select-none focus:outline-0 active:outline-0">
+                  <SelectValue placeholder="Select a file" />
+                </SelectTrigger>
+                <SelectContent className="select-none">
+                  <SelectGroup>
+                    {(artifacts ?? []).map((filepath) => (
+                      <SelectItem key={filepath} value={filepath}>
+                        {getFileName(filepath)}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            )}
+          </ArtifactTitle>
+        </div>
+        <div className="flex min-w-0 grow items-center justify-center">
+          {isSupportPreview && (
             <ToggleGroup
+              className="mx-auto"
               type="single"
-              variant={null}
-              size="default"
-              className="h-[28px]"
+              variant="outline"
+              size="sm"
               value={viewMode}
               onValueChange={(value) => {
                 if (value) {
@@ -186,75 +163,47 @@ export function ArtifactFileDetail({
               }}
             >
               <ToggleGroupItem value="code">
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5 6L2 9L5 12"
-                    stroke="#150033"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M11 3L7 15"
-                    stroke="#150033"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M13 6L16 9L13 12"
-                    stroke="#150033"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
+                <Code2Icon />
               </ToggleGroupItem>
               <ToggleGroupItem value="preview">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="10"
-                  viewBox="0 0 16 10"
-                  fill="none"
-                >
-                  <path
-                    d="M8 0.5C10.4943 0.5 12.8473 1.84466 14.792 4.21973C15.1644 4.67466 15.1644 5.32534 14.792 5.78027C12.8473 8.15534 10.4943 9.5 8 9.5C5.50561 9.49989 3.15269 8.15543 1.20801 5.78027C0.835561 5.32534 0.835562 4.67466 1.20801 4.21973C3.15269 1.84457 5.50561 0.500106 8 0.5Z"
-                    stroke="#666666"
-                  />
-                  <circle cx="8" cy="5" r="1.5" stroke="#666666" />
-                </svg>
+                <EyeIcon />
               </ToggleGroupItem>
             </ToggleGroup>
           )}
-          {/* 放大缩小选择器 */}
-          <ArtifactZoomSelector value={zoom} onChange={setZoom} />
         </div>
-        <div className="flex min-w-0 grow items-center justify-center">
-          <ArtifactTitle>
-            {isWriteFile ? (
-              <div className=" w-full text-center overflow-hidden text-ellipsis whitespace-nowrap px-2">{truncateMiddle(getFileName(filepath), 50)}</div>
-            ) : (
-              <DropdownSelector
-                value={filepath}
-                options={artifactOptions}
-                onChange={select}
-              />
-            )}
-          </ArtifactTitle>
-        </div>
-        <div className="flex items-center justify-end overflow-hidden">
+        <div className="flex items-center gap-2">
           <ArtifactActions>
+            {!isWriteFile && filepath.endsWith(".skill") && (
+              <Tooltip content={t.toolCalls.skillInstallTooltip}>
+                <ArtifactAction
+                  icon={isInstalling ? LoaderIcon : PackageIcon}
+                  label={t.common.install}
+                  tooltip={t.common.install}
+                  disabled={
+                    isInstalling ||
+                    env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
+                  }
+                  onClick={handleInstallSkill}
+                />
+              </Tooltip>
+            )}
+            {!isWriteFile && (
+              <a href={urlOfArtifact({ filepath, threadId })} target="_blank">
+                <ArtifactAction
+                  icon={SquareArrowOutUpRightIcon}
+                  label={t.common.openInNewWindow}
+                  tooltip={t.common.openInNewWindow}
+                />
+              </a>
+            )}
             {isCodeFile && (
               <ArtifactAction
+                icon={CopyIcon}
                 label={t.clipboard.copyToClipboard}
                 disabled={!content}
                 onClick={async () => {
                   try {
-                    await copyToClipboard(displayContent ?? "");
+                    await navigator.clipboard.writeText(displayContent ?? "");
                     toast.success(t.clipboard.copiedToClipboard);
                   } catch (error) {
                     toast.error("Failed to copy to clipboard");
@@ -262,210 +211,49 @@ export function ArtifactFileDetail({
                   }
                 }}
                 tooltip={t.clipboard.copyToClipboard}
-              >
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M6 2H13C14.1046 2 15 2.89543 15 4V13"
-                    stroke="#666666"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <rect
-                    x="2.5"
-                    y="4.5"
-                    width="10"
-                    height="11"
-                    rx="1.5"
-                    stroke="#666666"
-                  />
-                </svg>
-              </ArtifactAction>
+              />
             )}
             {!isWriteFile && (
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <ArtifactAction
-                    label={t.common.download}
-                    tooltip={t.common.download}
-                  >
-                    {isDownloading ? (
-                      <LoaderIcon className="size-4 animate-spin" />
-                    ) : (
-                      <svg
-                        width="18"
-                        height="18"
-                        viewBox="0 0 18 18"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16 9V14C16 15.1046 15.1046 16 14 16H4C2.89543 16 2 15.1046 2 14V9"
-                          stroke="#666666"
-                          strokeLinecap="round"
-                        />
-                        <path
-                          d="M9 2V13M9 13L5 9M9 13L13 9"
-                          stroke="#666666"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    )}
-                  </ArtifactAction>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="min-w-[160px]">
-                  <DropdownMenuItem asChild>
-                    <a
-                      href={urlOfArtifact({
-                        filepath,
-                        threadId,
-                        download: true,
-                      })}
-                      target="_blank"
-                      className="w-full cursor-pointer"
-                    >
-                      <DownloadIcon className="size-4" />
-                      {t.common.downloadOriginal}
-                    </a>
-                  </DropdownMenuItem>
-                  {/* DOCX 和 PDF 导出选项仅对 Markdown 文件显示。 */}
-                  {canConvertToDocxPdf && (
-                    <>
-                      <DropdownMenuItem
-                        onClick={handleDownloadDocx}
-                        disabled={isDownloading !== null || !content}
-                        className="cursor-pointer"
-                      >
-                        <FileTextIcon className="size-4" />
-                        {isDownloading === "docx" ? t.common.loading : t.common.downloadAsDocx}
-                      </DropdownMenuItem>
-                      <DropdownMenuItem
-                        onClick={handleDownloadPdf}
-                        disabled={isDownloading !== null || !content}
-                        className="cursor-pointer"
-                      >
-                        <FileTypeIcon className="size-4" />
-                        {isDownloading === "pdf" ? t.common.loading : t.common.downloadAsPdf}
-                      </DropdownMenuItem>
-                    </>
-                  )}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            )}
-            {/* 全屏按钮 */}
-            <ArtifactAction
-              label={
-                fullscreen ? t.common.closeFullScreen : t.common.fullScreen
-              }
-              onClick={handleFullscreenToggle}
-              tooltip={
-                fullscreen ? t.common.closeFullScreen : t.common.fullScreen
-              }
-            >
-              {fullscreen ? (
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M6 2V4C6 5.10457 5.10457 6 4 6H2"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M6 16V14C6 12.8954 5.10457 12 4 12H2"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M12 2V4C12 5.10457 12.8954 6 14 6H16"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M12 16V14C12 12.8954 12.8954 12 14 12H16"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              ) : (
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M5.75 15.5H4.5C3.39543 15.5 2.5 14.6046 2.5 13.5V12.25M2.5 5.75V4.5C2.5 3.39543 3.39543 2.5 4.5 2.5H5.75M12.25 2.5H13.5C14.6046 2.5 15.5 3.39543 15.5 4.5V5.75M15.5 12.25V13.5C15.5 14.6046 14.6046 15.5 13.5 15.5H12.25"
-                    stroke="currentColor"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              )}
-            </ArtifactAction>
-            {!fullscreen && (
-              <ArtifactAction
-                label={t.common.close}
-                onClick={() => setOpen(false)}
-                tooltip={t.common.close}
+              <a
+                href={urlOfArtifact({ filepath, threadId, download: true })}
+                target="_blank"
               >
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M4 14L14 4M4 4L14 14"
-                    stroke="#666666"
-                    strokeLinecap="round"
-                  />
-                </svg>
-              </ArtifactAction>
+                <ArtifactAction
+                  icon={DownloadIcon}
+                  label={t.common.download}
+                  tooltip={t.common.download}
+                />
+              </a>
             )}
+            <ArtifactAction
+              icon={XIcon}
+              label={t.common.close}
+              onClick={() => setOpen(false)}
+              tooltip={t.common.close}
+            />
           </ArtifactActions>
         </div>
       </ArtifactHeader>
-      <ArtifactContent className=" rounded-b-[10px] bg-white p-0">
-        {/* 遮挡多余的滚动顶部 */}
-        <div className="absolute w-[calc(100%-40px)] bg-white z-20 h-5 rounded-t-[10px] top-[57px]"></div>
-        {previewable &&
+      <ArtifactContent className="p-0">
+        {isSupportPreview &&
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
             <ArtifactFilePreview
               content={displayContent}
               language={language ?? "text"}
-              zoom={zoom}
             />
           )}
         {isCodeFile && viewMode === "code" && (
           <CodeEditor
-            className="size-full py-[20px] resize-none rounded-none border-none"
+            className="size-full resize-none rounded-none border-none"
             value={displayContent ?? ""}
-            zoom={zoom}
             readonly
           />
         )}
         {!isCodeFile && (
           <iframe
             className="size-full"
-            src={urlOfArtifact({ filepath, threadId })}
+            src={urlOfArtifact({ filepath, threadId, isMock })}
           />
         )}
       </ArtifactContent>
@@ -476,24 +264,17 @@ export function ArtifactFileDetail({
 export function ArtifactFilePreview({
   content,
   language,
-  zoom = 100,
 }: {
   content: string;
   language: string;
-  zoom?: number;
 }) {
-  const zoomScale = zoom / 100;
-
   if (language === "markdown") {
     return (
-      <div
-        className={cn("size-full p-[20px]")}
-        style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
-      >
+      <div className="size-full px-4">
         <Streamdown
           className="size-full"
           {...streamdownPlugins}
-          components={{ a: CitationLink }}
+          components={{ a: ArtifactLink }}
         >
           {content ?? ""}
         </Streamdown>
@@ -507,130 +288,8 @@ export function ArtifactFilePreview({
         title="Artifact preview"
         srcDoc={content}
         sandbox="allow-scripts allow-forms"
-        style={{ zoom: zoomScale }}
       />
     );
   }
   return null;
 }
-
-// 缩放比例选项
-const ZOOM_LEVELS = [50, 60, 70, 80, 90, 100, 110, 120, 130, 150, 175, 200];
-
-export type ArtifactZoomSelectorProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  "onChange"
-> & {
-  value?: number;
-  onChange?: (value: number) => void;
-};
-
-export const ArtifactZoomSelector = ({
-  value = 100,
-  onChange,
-  className,
-  ...props
-}: ArtifactZoomSelectorProps) => {
-  const handleZoomIn = () => {
-    const currentIndex = ZOOM_LEVELS.indexOf(value);
-    const nextValue = ZOOM_LEVELS[currentIndex + 1];
-    if (currentIndex < ZOOM_LEVELS.length - 1 && nextValue !== undefined) {
-      onChange?.(nextValue);
-    }
-  };
-
-  const handleZoomOut = () => {
-    const currentIndex = ZOOM_LEVELS.indexOf(value);
-    const prevValue = ZOOM_LEVELS[currentIndex - 1];
-    if (currentIndex > 0 && prevValue !== undefined) {
-      onChange?.(prevValue);
-    }
-  };
-
-  const canZoomIn = ZOOM_LEVELS.indexOf(value) < ZOOM_LEVELS.length - 1;
-  const canZoomOut = ZOOM_LEVELS.indexOf(value) > 0;
-
-  return (
-    <div
-      className={cn(
-        "inline-flex h-[28px] items-center gap-1 rounded-[10px] bg-white backdrop-blur-sm",
-        "dark:border-gray-700/50 dark:bg-gray-800/90",
-        className,
-      )}
-      {...props}
-    >
-      <button
-        type="button"
-        onClick={handleZoomIn}
-        disabled={!canZoomIn}
-        className={cn(
-          "flex h-full w-10 items-center justify-center rounded py-1 transition-colors",
-          "text-gray-400 hover:bg-gray-100 hover:text-gray-600",
-          "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
-          "dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300",
-        )}
-        aria-label="放大"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-        >
-          <circle cx="7.55558" cy="7.55534" r="6.16667" stroke="#666666" />
-          <path
-            d="M13.8688 15.4646C14.064 15.6598 14.3806 15.6598 14.5759 15.4646C14.7711 15.2693 14.7711 14.9527 14.5759 14.7574L14.2223 15.111L13.8688 15.4646ZM14.2223 15.111L14.5759 14.7574L11.9092 12.0908L11.5557 12.4443L11.2021 12.7979L13.8688 15.4646L14.2223 15.111Z"
-            fill="#666666"
-          />
-          <path
-            d="M5.33325 7.5H9.7777M7.55547 5V10"
-            stroke="#666666"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </button>
-      <span
-        className={cn(
-          "min-w-[36px] text-center text-xs font-medium text-gray-600",
-          "dark:text-gray-300",
-        )}
-      >
-        {value}%
-      </span>
-      <button
-        type="button"
-        onClick={handleZoomOut}
-        disabled={!canZoomOut}
-        className={cn(
-          "flex h-full w-10 items-center justify-center rounded transition-colors",
-          "text-gray-400 hover:bg-gray-100 hover:text-gray-600",
-          "disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
-          "dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-300",
-        )}
-        aria-label="缩小"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-        >
-          <circle cx="7.55558" cy="7.55534" r="6.16667" stroke="#666666" />
-          <path
-            d="M13.8688 15.4646C14.064 15.6598 14.3806 15.6598 14.5759 15.4646C14.7711 15.2693 14.7711 14.9527 14.5759 14.7574L14.2223 15.111L13.8688 15.4646ZM14.2223 15.111L14.5759 14.7574L11.9092 12.0908L11.5557 12.4443L11.2021 12.7979L13.8688 15.4646L14.2223 15.111Z"
-            fill="#666666"
-          />
-          <path
-            d="M4.99927 7.5H9.99927"
-            stroke="#666666"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      </button>
-    </div>
-  );
-};
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
index 4aad6301..99b2e374 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
@@ -18,7 +18,7 @@ import {
   getFileIcon,
   getFileName,
 } from "@/core/utils/files";
-import { cn, truncateMiddle } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 
 import { useArtifacts } from "./context";
 
@@ -80,14 +80,12 @@ export function ArtifactFileList({
           onClick={() => handleClick(file)}
         >
           <CardHeader className="pr-2 pl-1">
-            <CardTitle className=" relative pl-8 overflow-hidden">
-              <div className=" text-ellipsis whitespace-nowrap text-sm font-normal" title={getFileName(file)}>
-                {truncateMiddle(getFileName(file), 50)}
+            <CardTitle className="relative pl-8">
+              <div>{getFileName(file)}</div>
+              <div className="absolute top-2 -left-0.5">
+                {getFileIcon(file, "size-6")}
               </div>
             </CardTitle>
-             <div className="absolute top-5 left-3">
-                {getFileIcon(file, "size-6 stroke-[1.5px] stroke-[#333333]")}
-            </div>
             <CardDescription className="pl-8 text-xs">
               {getFileExtensionDisplayName(file)} file
             </CardDescription>
diff --git a/frontend/src/components/workspace/artifacts/artifact-trigger.tsx b/frontend/src/components/workspace/artifacts/artifact-trigger.tsx
new file mode 100644
index 00000000..df1fe684
--- /dev/null
+++ b/frontend/src/components/workspace/artifacts/artifact-trigger.tsx
@@ -0,0 +1,30 @@
+import { FilesIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/workspace/tooltip";
+import { useI18n } from "@/core/i18n/hooks";
+
+import { useArtifacts } from "./context";
+
+export const ArtifactTrigger = () => {
+  const { t } = useI18n();
+  const { artifacts, setOpen: setArtifactsOpen } = useArtifacts();
+
+  if (!artifacts || artifacts.length === 0) {
+    return null;
+  }
+  return (
+    <Tooltip content="Show artifacts of this conversation">
+      <Button
+        className="text-muted-foreground hover:text-foreground"
+        variant="ghost"
+        onClick={() => {
+          setArtifactsOpen(true);
+        }}
+      >
+        <FilesIcon />
+        {t.common.artifacts}
+      </Button>
+    </Tooltip>
+  );
+};
diff --git a/frontend/src/components/workspace/artifacts/context.tsx b/frontend/src/components/workspace/artifacts/context.tsx
index 3804e3b2..af9b19ab 100644
--- a/frontend/src/components/workspace/artifacts/context.tsx
+++ b/frontend/src/components/workspace/artifacts/context.tsx
@@ -1,4 +1,10 @@
-import { createContext, useContext, useState, type ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react";
 
 import { useSidebar } from "@/components/ui/sidebar";
 import { env } from "@/env";
@@ -15,9 +21,6 @@ export interface ArtifactsContextType {
   open: boolean;
   autoOpen: boolean;
   setOpen: (open: boolean) => void;
-
-  fullscreen: boolean;
-  setFullscreen: (fullscreen: boolean) => void;
 }
 
 const ArtifactsContext = createContext<ArtifactsContextType | undefined>(
@@ -36,23 +39,26 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
     env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true",
   );
   const [autoOpen, setAutoOpen] = useState(true);
-  const [fullscreen, setFullscreen] = useState(false);
   const { setOpen: setSidebarOpen } = useSidebar();
 
-  const select = (artifact: string, autoSelect = false) => {
-    setSelectedArtifact(artifact);
-    if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true") {
-      setSidebarOpen(false);
-    }
-    if (!autoSelect) {
-      setAutoSelect(false);
-    }
-  };
+  const select = useCallback(
+    (artifact: string, autoSelect = false) => {
+      setSelectedArtifact(artifact);
+      if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY !== "true") {
+        setSidebarOpen(false);
+      }
+      if (!autoSelect) {
+        setAutoSelect(false);
+      }
+    },
+    [setSidebarOpen, setSelectedArtifact, setAutoSelect],
+  );
 
-  const deselect = () => {
+  const deselect = useCallback(() => {
     setSelectedArtifact(null);
     setAutoSelect(true);
-  };
+    setOpen(false);
+  }, []);
 
   const value: ArtifactsContextType = {
     artifacts,
@@ -72,9 +78,6 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
     selectedArtifact,
     select,
     deselect,
-
-    fullscreen,
-    setFullscreen,
   };
 
   return (
diff --git a/frontend/src/components/workspace/artifacts/index.ts b/frontend/src/components/workspace/artifacts/index.ts
index bedf505e..0e589d5f 100644
--- a/frontend/src/components/workspace/artifacts/index.ts
+++ b/frontend/src/components/workspace/artifacts/index.ts
@@ -1,3 +1,4 @@
 export * from "./artifact-file-detail";
 export * from "./artifact-file-list";
+export * from "./artifact-trigger";
 export * from "./context";
diff --git a/frontend/src/components/workspace/chats/chat-box.tsx b/frontend/src/components/workspace/chats/chat-box.tsx
new file mode 100644
index 00000000..a57aa522
--- /dev/null
+++ b/frontend/src/components/workspace/chats/chat-box.tsx
@@ -0,0 +1,180 @@
+import { FilesIcon, XIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { GroupImperativeHandle } from "react-resizable-panels";
+
+import { ConversationEmptyState } from "@/components/ai-elements/conversation";
+import { Button } from "@/components/ui/button";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { env } from "@/env";
+import { cn } from "@/lib/utils";
+
+import {
+  ArtifactFileDetail,
+  ArtifactFileList,
+  useArtifacts,
+} from "../artifacts";
+import { useThread } from "../messages/context";
+
+const CLOSE_MODE = { chat: 100, artifacts: 0 };
+const OPEN_MODE = { chat: 60, artifacts: 40 };
+
+const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
+  children,
+  threadId,
+}) => {
+  const { thread } = useThread();
+  const pathname = usePathname();
+  const threadIdRef = useRef(threadId);
+  const layoutRef = useRef<GroupImperativeHandle>(null);
+
+  const {
+    artifacts,
+    open: artifactsOpen,
+    setOpen: setArtifactsOpen,
+    setArtifacts,
+    select: selectArtifact,
+    deselect,
+    selectedArtifact,
+  } = useArtifacts();
+
+  const [autoSelectFirstArtifact, setAutoSelectFirstArtifact] = useState(true);
+  useEffect(() => {
+    if (threadIdRef.current !== threadId) {
+      threadIdRef.current = threadId;
+      deselect();
+    }
+
+    // Update artifacts from the current thread
+    setArtifacts(thread.values.artifacts);
+
+    // DO NOT automatically deselect the artifact when switching threads, because the artifacts auto discovering is not work now.
+    // if (
+    //   selectedArtifact &&
+    //   !thread.values.artifacts?.includes(selectedArtifact)
+    // ) {
+    //   deselect();
+    // }
+
+    if (
+      env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" &&
+      autoSelectFirstArtifact
+    ) {
+      if (thread?.values?.artifacts?.length > 0) {
+        setAutoSelectFirstArtifact(false);
+        selectArtifact(thread.values.artifacts[0]!);
+      }
+    }
+  }, [
+    threadId,
+    autoSelectFirstArtifact,
+    deselect,
+    selectArtifact,
+    selectedArtifact,
+    setArtifacts,
+    thread.values.artifacts,
+  ]);
+
+  const artifactPanelOpen = useMemo(() => {
+    if (env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true") {
+      return artifactsOpen && artifacts?.length > 0;
+    }
+    return artifactsOpen;
+  }, [artifactsOpen, artifacts]);
+
+  const resizableIdBase = useMemo(() => {
+    return pathname.replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  }, [pathname]);
+
+  useEffect(() => {
+    if (layoutRef.current) {
+      if (artifactPanelOpen) {
+        layoutRef.current.setLayout(OPEN_MODE);
+      } else {
+        layoutRef.current.setLayout(CLOSE_MODE);
+      }
+    }
+  }, [artifactPanelOpen]);
+
+  return (
+    <ResizablePanelGroup
+      id={`${resizableIdBase}-panels`}
+      orientation="horizontal"
+      defaultLayout={{ chat: 100, artifacts: 0 }}
+      groupRef={layoutRef}
+    >
+      <ResizablePanel className="relative" defaultSize={100} id="chat">
+        {children}
+      </ResizablePanel>
+      <ResizableHandle
+        id={`${resizableIdBase}-separator`}
+        className={cn(
+          "opacity-33 hover:opacity-100",
+          !artifactPanelOpen && "pointer-events-none opacity-0",
+        )}
+      />
+      <ResizablePanel
+        className={cn(
+          "transition-all duration-300 ease-in-out",
+          !artifactsOpen && "opacity-0",
+        )}
+        id="artifacts"
+      >
+        <div
+          className={cn(
+            "h-full p-4 transition-transform duration-300 ease-in-out",
+            artifactPanelOpen ? "translate-x-0" : "translate-x-full",
+          )}
+        >
+          {selectedArtifact ? (
+            <ArtifactFileDetail
+              className="size-full"
+              filepath={selectedArtifact}
+              threadId={threadId}
+            />
+          ) : (
+            <div className="relative flex size-full justify-center">
+              <div className="absolute top-1 right-1 z-30">
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  onClick={() => {
+                    setArtifactsOpen(false);
+                  }}
+                >
+                  <XIcon />
+                </Button>
+              </div>
+              {thread.values.artifacts?.length === 0 ? (
+                <ConversationEmptyState
+                  icon={<FilesIcon />}
+                  title="No artifact selected"
+                  description="Select an artifact to view its details"
+                />
+              ) : (
+                <div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4 pt-8">
+                  <header className="shrink-0">
+                    <h2 className="text-lg font-medium">Artifacts</h2>
+                  </header>
+                  <main className="min-h-0 grow">
+                    <ArtifactFileList
+                      className="max-w-(--container-width-sm) p-4 pt-12"
+                      files={thread.values.artifacts ?? []}
+                      threadId={threadId}
+                    />
+                  </main>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+};
+
+export { ChatBox };
diff --git a/frontend/src/components/workspace/chats/index.ts b/frontend/src/components/workspace/chats/index.ts
new file mode 100644
index 00000000..5a915422
--- /dev/null
+++ b/frontend/src/components/workspace/chats/index.ts
@@ -0,0 +1,3 @@
+export * from "./chat-box";
+export * from "./use-chat-mode";
+export * from "./use-thread-chat";
diff --git a/frontend/src/components/workspace/use-chat-mode.ts b/frontend/src/components/workspace/chats/use-chat-mode.ts
similarity index 91%
rename from frontend/src/components/workspace/use-chat-mode.ts
rename to frontend/src/components/workspace/chats/use-chat-mode.ts
index fedbef4c..75de6d13 100644
--- a/frontend/src/components/workspace/use-chat-mode.ts
+++ b/frontend/src/components/workspace/chats/use-chat-mode.ts
@@ -5,8 +5,7 @@ import { usePromptInputController } from "@/components/ai-elements/prompt-input"
 import { useI18n } from "@/core/i18n/hooks";
 
 /**
- * 根据 URL 参数判断当前是否处于特定 Chat 模式（如 iframe 技能模式），
- * 并根据模式自动填入默认 prompt 值。
+ * Hook to determine if the chat is in a specific mode based on URL parameters, and to set an initial prompt input value accordingly.
  */
 export function useSpecificChatMode() {
   const { t } = useI18n();
diff --git a/frontend/src/components/workspace/chats/use-thread-chat.ts b/frontend/src/components/workspace/chats/use-thread-chat.ts
new file mode 100644
index 00000000..b3164485
--- /dev/null
+++ b/frontend/src/components/workspace/chats/use-thread-chat.ts
@@ -0,0 +1,29 @@
+"use client";
+
+import { useParams, usePathname, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { uuid } from "@/core/utils/uuid";
+
+export function useThreadChat() {
+  const { thread_id: threadIdFromPath } = useParams<{ thread_id: string }>();
+  const pathname = usePathname();
+
+  const searchParams = useSearchParams();
+  const [threadId, setThreadId] = useState(() => {
+    return threadIdFromPath === "new" ? uuid() : threadIdFromPath;
+  });
+
+  const [isNewThread, setIsNewThread] = useState(
+    () => threadIdFromPath === "new",
+  );
+
+  useEffect(() => {
+    if (pathname.endsWith("/new")) {
+      setIsNewThread(true);
+      setThreadId(uuid());
+    }
+  }, [pathname]);
+  const isMock = searchParams.get("mock") === "true";
+  return { threadId, isNewThread, setIsNewThread, isMock };
+}
diff --git a/frontend/src/components/workspace/citations/artifact-link.tsx b/frontend/src/components/workspace/citations/artifact-link.tsx
new file mode 100644
index 00000000..c7bc1719
--- /dev/null
+++ b/frontend/src/components/workspace/citations/artifact-link.tsx
@@ -0,0 +1,33 @@
+import type { AnchorHTMLAttributes } from "react";
+
+import { cn } from "@/lib/utils";
+
+import { CitationLink } from "./citation-link";
+
+function isExternalUrl(href: string | undefined): boolean {
+  return !!href && /^https?:\/\//.test(href);
+}
+
+/** Link renderer for artifact markdown: citation: prefix → CitationLink, otherwise underlined text. */
+export function ArtifactLink(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  if (typeof props.children === "string") {
+    const match = /^citation:(.+)$/.exec(props.children);
+    if (match) {
+      const [, text] = match;
+      return <CitationLink {...props}>{text}</CitationLink>;
+    }
+  }
+  const { className, target, rel, ...rest } = props;
+  const external = isExternalUrl(props.href);
+  return (
+    <a
+      {...rest}
+      className={cn(
+        "text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 transition-colors",
+        className,
+      )}
+      target={target ?? (external ? "_blank" : undefined)}
+      rel={rel ?? (external ? "noopener noreferrer" : undefined)}
+    />
+  );
+}
diff --git a/frontend/src/components/workspace/citations/citation-link.tsx b/frontend/src/components/workspace/citations/citation-link.tsx
index a80e71bc..6aab8c26 100644
--- a/frontend/src/components/workspace/citations/citation-link.tsx
+++ b/frontend/src/components/workspace/citations/citation-link.tsx
@@ -9,13 +9,13 @@ import {
 } from "@/components/ui/hover-card";
 import { cn } from "@/lib/utils";
 
-export function CitationLink({
-  href,
+export function CitationLink({ 
+  href, 
   children,
-  ...props
+  ...props 
 }: ComponentProps<"a">) {
   const domain = extractDomain(href ?? "");
-
+  
   // Priority: children > domain
   const childrenText =
     typeof children === "string"
@@ -48,12 +48,12 @@ export function CitationLink({
         <div className="p-3">
           <div className="space-y-1">
             {displayText && (
-              <h4 className="truncate text-sm leading-tight font-medium">
+              <h4 className="truncate font-medium text-sm leading-tight">
                 {displayText}
               </h4>
             )}
             {href && (
-              <p className="text-muted-foreground truncate text-xs break-all">
+              <p className="truncate break-all text-muted-foreground text-xs">
                 {href}
               </p>
             )}
diff --git a/frontend/src/components/workspace/code-editor.tsx b/frontend/src/components/workspace/code-editor.tsx
index cdda7f86..84c558c4 100644
--- a/frontend/src/components/workspace/code-editor.tsx
+++ b/frontend/src/components/workspace/code-editor.tsx
@@ -42,7 +42,6 @@ export function CodeEditor({
   disabled,
   autoFocus,
   settings,
-  zoom = 100,
 }: {
   className?: string;
   placeholder?: string;
@@ -51,7 +50,6 @@ export function CodeEditor({
   disabled?: boolean;
   autoFocus?: boolean;
   settings?: unknown;
-  zoom?: number;
 }) {
   const {
     thread: { isLoading },
@@ -72,14 +70,12 @@ export function CodeEditor({
     ];
   }, []);
 
-  const zoomScale = (zoom ?? 100) / 100;
   return (
     <div
       className={cn(
         "flex cursor-text flex-col overflow-hidden rounded-md",
         className,
       )}
-      style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
     >
       {isLoading ? (
         <Textarea
diff --git a/frontend/src/components/workspace/command-palette.tsx b/frontend/src/components/workspace/command-palette.tsx
new file mode 100644
index 00000000..4f9a417b
--- /dev/null
+++ b/frontend/src/components/workspace/command-palette.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import {
+  KeyboardIcon,
+  MessageSquarePlusIcon,
+  SettingsIcon,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/core/i18n/hooks";
+import { useGlobalShortcuts } from "@/hooks/use-global-shortcuts";
+
+import { SettingsDialog } from "./settings";
+
+export function CommandPalette() {
+  const { t } = useI18n();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+  const handleNewChat = useCallback(() => {
+    router.push("/workspace/chats/new");
+    setOpen(false);
+  }, [router]);
+
+  const handleOpenSettings = useCallback(() => {
+    setOpen(false);
+    setSettingsOpen(true);
+  }, []);
+
+  const handleShowShortcuts = useCallback(() => {
+    setOpen(false);
+    setShortcutsOpen(true);
+  }, []);
+
+  const shortcuts = useMemo(
+    () => [
+      { key: "k", meta: true, action: () => setOpen((o) => !o) },
+      { key: "n", meta: true, shift: true, action: handleNewChat },
+      { key: ",", meta: true, action: handleOpenSettings },
+      { key: "/", meta: true, action: handleShowShortcuts },
+    ],
+    [handleNewChat, handleOpenSettings, handleShowShortcuts],
+  );
+
+  useGlobalShortcuts(shortcuts);
+
+
+  const isMac =
+    typeof navigator !== "undefined" && navigator.userAgent.includes("Mac");
+  const metaKey = isMac ? "⌘" : "Ctrl+";
+  const shiftKey = isMac ? "⇧" : "Shift+";
+
+  return (
+    <>
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder={t.shortcuts.searchActions} />
+        <CommandList>
+          <CommandEmpty>{t.shortcuts.noResults}</CommandEmpty>
+          <CommandGroup heading={t.shortcuts.actions}>
+            <CommandItem onSelect={handleNewChat}>
+              <MessageSquarePlusIcon className="mr-2 h-4 w-4" />
+              {t.sidebar.newChat}
+              <CommandShortcut>{metaKey}{shiftKey}N</CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={handleOpenSettings}>
+              <SettingsIcon className="mr-2 h-4 w-4" />
+              {t.common.settings}
+              <CommandShortcut>{metaKey},</CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={handleShowShortcuts}>
+              <KeyboardIcon className="mr-2 h-4 w-4" />
+              {t.shortcuts.keyboardShortcuts}
+              <CommandShortcut>{metaKey}/</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+
+      <Dialog open={shortcutsOpen} onOpenChange={setShortcutsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t.shortcuts.keyboardShortcuts}</DialogTitle>
+            <DialogDescription>
+              {t.shortcuts.keyboardShortcutsDescription}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 text-sm">
+            {[
+              { keys: `${metaKey}K`, label: t.shortcuts.openCommandPalette },
+              { keys: `${metaKey}${shiftKey}N`, label: t.sidebar.newChat },
+              { keys: `${metaKey}B`, label: t.shortcuts.toggleSidebar },
+              { keys: `${metaKey},`, label: t.common.settings },
+              {
+                keys: `${metaKey}/`,
+                label: t.shortcuts.keyboardShortcuts,
+              },
+            ].map(({ keys, label }) => (
+              <div key={keys} className="flex items-center justify-between">
+                <span className="text-muted-foreground">{label}</span>
+                <kbd className="bg-muted text-muted-foreground rounded px-2 py-0.5 font-mono text-xs">
+                  {keys}
+                </kbd>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/frontend/src/components/workspace/copy-button.tsx b/frontend/src/components/workspace/copy-button.tsx
index b279a56b..13d331b5 100644
--- a/frontend/src/components/workspace/copy-button.tsx
+++ b/frontend/src/components/workspace/copy-button.tsx
@@ -3,7 +3,6 @@ import { useCallback, useState, type ComponentProps } from "react";
 
 import { Button } from "@/components/ui/button";
 import { useI18n } from "@/core/i18n/hooks";
-import { copyToClipboard } from "@/lib/utils";
 
 import { Tooltip } from "./tooltip";
 
@@ -16,7 +15,7 @@ export function CopyButton({
   const { t } = useI18n();
   const [copied, setCopied] = useState(false);
   const handleCopy = useCallback(() => {
-    void copyToClipboard(clipboardData);
+    void navigator.clipboard.writeText(clipboardData);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   }, [clipboardData]);
diff --git a/frontend/src/components/workspace/dev-todo-list.tsx b/frontend/src/components/workspace/dev-todo-list.tsx
deleted file mode 100644
index 466d395a..00000000
--- a/frontend/src/components/workspace/dev-todo-list.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-"use client";
-
-import type { Todo } from "@/core/todos";
-import { cn } from "@/lib/utils";
-
-import {
-  QueueItem,
-  QueueItemContent,
-  QueueItemIndicator,
-  QueueList,
-} from "../ai-elements/queue";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
-
-export function DevTodoList({
-  className,
-  todos,
-  trigger,
-  hidden,
-}: {
-  className?: string;
-  todos: Todo[];
-  trigger: React.ReactNode;
-  hidden: boolean;
-}) {
-  if (hidden) {
-    return null;
-  }
-  console.log(todos);
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
-      <DropdownMenuContent
-        className={cn(
-          "z-[100] rounded-[20px] bg-white p-5 shadow-[0_0_20px_0_rgba(0,0,0,0.20)]",
-          className,
-        )}
-        align="start"
-        side="top"
-      >
-        <QueueList className="w-64">
-          {todos.map((todo, i) => (
-            <QueueItem key={i + (todo.content ?? "")}>
-              <div className="flex items-center gap-2">
-                <QueueItemIndicator
-                  className={
-                    todo.status === "in_progress" ? "bg-primary/70" : ""
-                  }
-                  completed={todo.status === "completed"}
-                />
-                <QueueItemContent
-                  className={
-                    todo.status === "in_progress" ? "text-primary/70" : ""
-                  }
-                  completed={todo.status === "completed"}
-                >
-                  {todo.content}
-                </QueueItemContent>
-              </div>
-            </QueueItem>
-          ))}
-        </QueueList>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
diff --git a/frontend/src/components/workspace/export-trigger.tsx b/frontend/src/components/workspace/export-trigger.tsx
new file mode 100644
index 00000000..b75d4e45
--- /dev/null
+++ b/frontend/src/components/workspace/export-trigger.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { Download, FileJson, FileText } from "lucide-react";
+import { useCallback } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useI18n } from "@/core/i18n/hooks";
+import {
+  exportThreadAsJSON,
+  exportThreadAsMarkdown,
+} from "@/core/threads/export";
+import type { AgentThread } from "@/core/threads/types";
+
+import { useThread } from "./messages/context";
+import { Tooltip } from "./tooltip";
+
+export function ExportTrigger({ threadId }: { threadId: string }) {
+  const { t } = useI18n();
+  const { thread } = useThread();
+
+  const messages = thread.messages;
+
+  const handleExport = useCallback(
+    (format: "markdown" | "json") => {
+      if (messages.length === 0) {
+        toast.error(t.conversation.noMessages);
+        return;
+      }
+      const agentThread = {
+        thread_id: threadId,
+        updated_at: new Date().toISOString(),
+        values: thread.values,
+      } as AgentThread;
+
+      if (format === "markdown") {
+        exportThreadAsMarkdown(agentThread, messages);
+      } else {
+        exportThreadAsJSON(agentThread, messages);
+      }
+      toast.success(t.common.exportSuccess);
+    },
+    [messages, thread.values, threadId, t],
+  );
+
+  if (messages.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <Tooltip content={t.common.export}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            className="text-muted-foreground hover:text-foreground"
+            variant="ghost"
+          >
+            <Download />
+            {t.common.export}
+          </Button>
+        </DropdownMenuTrigger>
+      </Tooltip>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onSelect={() => handleExport("markdown")}>
+          <FileText className="text-muted-foreground" />
+          <span>{t.common.exportAsMarkdown}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={() => handleExport("json")}>
+          <FileJson className="text-muted-foreground" />
+          <span>{t.common.exportAsJSON}</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/frontend/src/components/workspace/iframe-test-panel.tsx b/frontend/src/components/workspace/iframe-test-panel.tsx
deleted file mode 100644
index 0967bde9..00000000
--- a/frontend/src/components/workspace/iframe-test-panel.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-"use client";
-
-import { useSearchParams, useRouter } from "next/navigation";
-import { useState } from "react";
-
-import { Button } from "@/components/ui/button";
-import { useIframeSkill } from "@/hooks/use-iframe-skill";
-import { copyToClipboard } from "@/lib/utils";
-import { cn } from "@/lib/utils";
-
-/**
- * IframeTestPanel —— 仅用于开发阶段测试 iframe 通信功能
- *
- * 测试场景：
- * 1. mode=skill 侧边栏隐藏
- * 2. useSpecificChatMode 注入提示词
- * 3. sendSelectSkill / openSkillDialog / clearSkill
- */
-export function IframeTestPanel() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const iframeSkill = useIframeSkill();
-  const [log, setLog] = useState<string[]>([]);
-  const [open, setOpen] = useState(true);
-
-  const isSkillMode = searchParams.get("mode") === "skill";
-
-  function addLog(msg: string) {
-    setLog((prev) => [
-      `[${new Date().toLocaleTimeString()}] ${msg}`,
-      ...prev.slice(0, 9),
-    ]);
-  }
-
-  function handleEnterSkillMode() {
-    router.push(`?mode=skill&skill_id=123&title=测试技能`);
-    addLog("进入 mode=skill，URL 已更新");
-  }
-
-  function handleExitSkillMode() {
-    router.push(`?`);
-    addLog("退出 skill 模式");
-  }
-
-  function handleSendSelectSkill() {
-    iframeSkill.sendSelectSkill("skill_001");
-    addLog("postMessage → selectSkill (skill_id=skill_001)");
-  }
-
-  function handleOpenSkillDialog() {
-    iframeSkill.openSkillDialog();
-    addLog("postMessage → openSkillDialog");
-  }
-
-  function handleClearSkill() {
-    iframeSkill.clearSkill();
-    addLog("clearSkill 已调用，postMessage → skill_id=0");
-  }
-
-  function handleTestClipboardCopy() {
-    const testText = "测试复制内容 - " + new Date().toISOString();
-    copyToClipboard(testText);
-    addLog(`copyToClipboard → "${testText.slice(0, 30)}..."`);
-  }
-
-  // 检测是否在 iframe 中
-  const isInIframe = typeof window !== "undefined" && window.self !== window.top;
-  if (!open) {
-    return (
-      <button
-        className="fixed bottom-24 left-3 z-[9999] rounded-full bg-violet-500 px-3 py-1 text-xs font-bold text-white shadow-lg hover:bg-violet-600"
-        onClick={() => setOpen(true)}
-      >
-        🧪 测试面板
-      </button>
-    );
-  }
-  return (
-    <div className="fixed bottom-24 left-3 z-[9999] w-72 rounded-xl border border-violet-200 bg-white/95 shadow-2xl backdrop-blur-sm">
-      {/* 标题栏 */}
-      <div className="flex items-center justify-between rounded-t-xl bg-violet-500 px-3 py-2">
-        <span className="text-xs font-bold text-white">🧪 iframe 通信测试</span>
-        <button
-          className="text-white/70 hover:text-white"
-          onClick={() => setOpen(false)}
-        >
-          ✕
-        </button>
-      </div>
-
-      <div className="space-y-3 p-3">
-        {/* 当前状态 */}
-        <div className="rounded-lg bg-gray-50 px-3 py-2 text-xs">
-          <div className="mb-1 font-semibold text-gray-500">当前状态</div>
-          <div className="flex flex-col gap-1">
-            <span>
-              <span className="text-gray-400">mode：</span>
-              <span
-                className={cn(
-                  "font-mono font-bold",
-                  isSkillMode ? "text-violet-600" : "text-gray-400",
-                )}
-              >
-                {isSkillMode ? "skill ✅" : "普通"}
-              </span>
-            </span>
-            <span>
-              <span className="text-gray-400">selectedSkill：</span>
-              <span className="font-mono text-violet-600">
-                {iframeSkill.selectedSkill
-                  ? `${iframeSkill.selectedSkill.skill_id} / ${iframeSkill.selectedSkill.title}`
-                  : "无"}
-              </span>
-            </span>
-          </div>
-        </div>
-
-        {/* 场景 1：侧边栏隐藏 */}
-        <div>
-          <div className="mb-1 text-xs font-semibold text-gray-500">
-            ① 侧边栏隐藏（layout）
-          </div>
-          <div className="flex gap-2">
-            <Button
-              size="sm"
-              className="flex-1 text-xs"
-              variant="outline"
-              onClick={handleEnterSkillMode}
-            >
-              进入 skill 模式
-            </Button>
-            <Button
-              size="sm"
-              className="flex-1 text-xs"
-              variant="outline"
-              onClick={handleExitSkillMode}
-            >
-              退出 skill 模式
-            </Button>
-          </div>
-        </div>
-
-        {/* 场景 2：skill 选择通信 */}
-        <div>
-          <div className="mb-1 text-xs font-semibold text-gray-500">
-            ② postMessage 通信（发送到宿主）
-          </div>
-          <div className="flex flex-col gap-2">
-            <Button
-              size="sm"
-              className="w-full bg-violet-50 text-xs text-violet-700 hover:bg-violet-100"
-              variant="ghost"
-              onClick={handleSendSelectSkill}
-            >
-              sendSelectSkill (skill_001)
-            </Button>
-            <Button
-              size="sm"
-              className="w-full bg-violet-50 text-xs text-violet-700 hover:bg-violet-100"
-              variant="ghost"
-              onClick={handleOpenSkillDialog}
-            >
-              openSkillDialog
-            </Button>
-            <Button
-              size="sm"
-              className="w-full bg-red-50 text-xs text-red-600 hover:bg-red-100"
-              variant="ghost"
-              onClick={handleClearSkill}
-            >
-              clearSkill (发送 skill_id=0)
-            </Button>
-          </div>
-        </div>
-
-        {/* 场景 3：接收宿主页 selectedSkill */}
-        <div>
-          <div className="mb-1 text-xs font-semibold text-gray-500">
-            ③ 接收宿主页 selectedSkill
-          </div>
-          <div className="flex flex-col gap-2">
-            <Button
-              size="sm"
-              className="w-full bg-green-50 text-xs text-green-700 hover:bg-green-100"
-              variant="ghost"
-              onClick={() => {
-                window.postMessage(
-                  { type: "selectedSkill", id: 5, title: "文档处理" },
-                  "*",
-                );
-                addLog(
-                  "模拟宿主页 → selectedSkill { id: 5, title: '文档处理' }",
-                );
-              }}
-            >
-              ✅ 模拟 selectedSkill（成功）
-            </Button>
-            <Button
-              size="sm"
-              className="w-full bg-orange-50 text-xs text-orange-700 hover:bg-orange-100"
-              variant="ghost"
-              onClick={() => {
-                window.postMessage(
-                  { type: "selectedSkill", id: 999999, title: "不存在的技能" },
-                  "*",
-                );
-                addLog(
-                  "模拟宿主页 → selectedSkill { id: 999999, title: '不存在的技能' }",
-                );
-              }}
-            >
-              ❌ 模拟 selectedSkill（失败/错误）
-            </Button>
-          </div>
-        </div>
-
-        {/* 场景 4：剪贴板复制（iframe 通信） */}
-        <div>
-          <div className="mb-1 flex items-center justify-between">
-            <span className="text-xs font-semibold text-gray-500">
-              ④ 剪贴板复制（iframe 通信）
-            </span>
-            <span
-              className={cn(
-                "rounded px-1.5 py-0.5 text-[10px] font-medium",
-                isInIframe
-                  ? "bg-violet-100 text-violet-700"
-                  : "bg-gray-100 text-gray-500",
-              )}
-            >
-              {isInIframe ? "iframe 模式" : "独立页面"}
-            </span>
-          </div>
-          <div className="flex flex-col gap-2">
-            <Button
-              size="sm"
-              className="w-full bg-blue-50 text-xs text-blue-700 hover:bg-blue-100"
-              variant="ghost"
-              onClick={handleTestClipboardCopy}
-            >
-              📋 测试复制到剪贴板
-            </Button>
-            <div className="rounded bg-gray-100 px-2 py-1.5 text-[10px] text-gray-600">
-              {isInIframe
-                ? "将通过 postMessage 请求父页面复制"
-                : "将直接调用 navigator.clipboard"}
-            </div>
-          </div>
-        </div>
-
-        {/* 日志 */}
-        {log.length > 0 && (
-          <div className="rounded-lg bg-gray-900 p-2">
-            <div className="mb-1 text-[10px] font-semibold text-gray-400">
-              操作日志
-            </div>
-            {log.map((l, i) => (
-              <div
-                key={i}
-                className="truncate font-mono text-[10px] text-green-400"
-              >
-                {l}
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index b517019b..d1682bb7 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -12,7 +12,7 @@ import {
   XIcon,
   ZapIcon,
 } from "lucide-react";
-import { useParams, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import {
   useCallback,
   useEffect,
@@ -40,7 +40,6 @@ import {
   usePromptInputController,
   type PromptInputMessage,
 } from "@/components/ai-elements/prompt-input";
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { ConfettiButton } from "@/components/ui/confetti-button";
 import {
@@ -56,10 +55,11 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
+import { getBackendBaseURL } from "@/core/config";
 import { useI18n } from "@/core/i18n/hooks";
 import { useModels } from "@/core/models/hooks";
 import type { AgentThreadContext } from "@/core/threads";
-import { useIframeSkill } from "@/hooks/use-iframe-skill";
+import { textOfMessage } from "@/core/threads/utils";
 import { cn } from "@/lib/utils";
 
 import {
@@ -79,9 +79,25 @@ import {
   DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 
+import { useThread } from "./messages/context";
 import { ModeHoverGuide } from "./mode-hover-guide";
 import { Tooltip } from "./tooltip";
 
+type InputMode = "flash" | "thinking" | "pro" | "ultra";
+
+function getResolvedMode(
+  mode: InputMode | undefined,
+  supportsThinking: boolean,
+): InputMode {
+  if (!supportsThinking && mode !== "flash") {
+    return "flash";
+  }
+  if (mode) {
+    return mode;
+  }
+  return supportsThinking ? "pro" : "flash";
+}
+
 export function InputBox({
   className,
   disabled,
@@ -90,7 +106,7 @@ export function InputBox({
   context,
   extraHeader,
   isNewThread,
-  hasSubmitted,
+  threadId,
   initialValue,
   onContextChange,
   onSubmit,
@@ -105,10 +121,11 @@ export function InputBox({
     "thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
   > & {
     mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
+    reasoning_effort?: "minimal" | "low" | "medium" | "high";
   };
   extraHeader?: React.ReactNode;
   isNewThread?: boolean;
-  hasSubmitted?: boolean;
+  threadId: string;
   initialValue?: string;
   onContextChange?: (
     context: Omit<
@@ -116,6 +133,7 @@ export function InputBox({
       "thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
     > & {
       mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
+      reasoning_effort?: "minimal" | "low" | "medium" | "high";
     },
   ) => void;
   onSubmit?: (message: PromptInputMessage) => void;
@@ -123,82 +141,106 @@ export function InputBox({
 }) {
   const { t } = useI18n();
   const searchParams = useSearchParams();
-  const iframeSkill = useIframeSkill();
-
-  const params = useParams();
-  const threadId = params?.thread_id;
+  const [modelDialogOpen, setModelDialogOpen] = useState(false);
+  const { models } = useModels();
+  const { thread, isMock } = useThread();
   const { textInput } = usePromptInputController();
-  const attachments = usePromptInputAttachments();
   const promptRootRef = useRef<HTMLDivElement | null>(null);
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
+
   const [followups, setFollowups] = useState<string[]>([]);
   const [followupsHidden, setFollowupsHidden] = useState(false);
   const [followupsLoading, setFollowupsLoading] = useState(false);
+  const lastGeneratedForAiIdRef = useRef<string | null>(null);
+  const wasStreamingRef = useRef(false);
+
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
     null,
   );
-  const [isFocused, setIsFocused] = useState(false);
 
-  // isNewThread 时禁用收缩，始终保持展开（除非已提交消息）
-  const effectiveIsFocused =
-    ((isNewThread ?? false) && !hasSubmitted) || isFocused;
-
-  // 点击外部区域时收起输入框
   useEffect(() => {
-    if (!isFocused) return;
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
-        setIsFocused(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isFocused]);
-
-  const [modelDialogOpen, setModelDialogOpen] = useState(false);
-  const { models } = useModels();
-  const selectedModel = useMemo(() => {
-    if (!context.model_name && models.length > 0) {
-      const model = models[0]!;
-      setTimeout(() => {
-        onContextChange?.({
-          ...context,
-          model_name: model.name,
-          mode: model.supports_thinking ? "pro" : "flash",
-        });
-      }, 0);
-      return model;
+    if (models.length === 0) {
+      return;
     }
-    return models.find((m) => m.name === context.model_name);
+    const currentModel = models.find((m) => m.name === context.model_name);
+    const fallbackModel = currentModel ?? models[0]!;
+    const supportsThinking = fallbackModel.supports_thinking ?? false;
+    const nextModelName = fallbackModel.name;
+    const nextMode = getResolvedMode(context.mode, supportsThinking);
+
+    if (context.model_name === nextModelName && context.mode === nextMode) {
+      return;
+    }
+
+    onContextChange?.({
+      ...context,
+      model_name: nextModelName,
+      mode: nextMode,
+    });
   }, [context, models, onContextChange]);
+
+  const selectedModel = useMemo(() => {
+    if (models.length === 0) {
+      return undefined;
+    }
+    return models.find((m) => m.name === context.model_name) ?? models[0];
+  }, [context.model_name, models]);
+
   const supportThinking = useMemo(
     () => selectedModel?.supports_thinking ?? false,
     [selectedModel],
   );
+
+  const supportReasoningEffort = useMemo(
+    () => selectedModel?.supports_reasoning_effort ?? false,
+    [selectedModel],
+  );
+
   const handleModelSelect = useCallback(
     (model_name: string) => {
+      const model = models.find((m) => m.name === model_name);
+      if (!model) {
+        return;
+      }
       onContextChange?.({
         ...context,
         model_name,
+        mode: getResolvedMode(context.mode, model.supports_thinking ?? false),
+        reasoning_effort: context.reasoning_effort,
       });
       setModelDialogOpen(false);
     },
-    [onContextChange, context],
+    [onContextChange, context, models],
   );
+
   const handleModeSelect = useCallback(
-    (mode: "flash" | "thinking" | "pro" | "ultra") => {
+    (mode: InputMode) => {
       onContextChange?.({
         ...context,
-        mode,
+        mode: getResolvedMode(mode, supportThinking),
+        reasoning_effort:
+          mode === "ultra"
+            ? "high"
+            : mode === "pro"
+              ? "medium"
+              : mode === "thinking"
+                ? "low"
+                : "minimal",
+      });
+    },
+    [onContextChange, context, supportThinking],
+  );
+
+  const handleReasoningEffortSelect = useCallback(
+    (effort: "minimal" | "low" | "medium" | "high") => {
+      onContextChange?.({
+        ...context,
+        reasoning_effort: effort,
       });
     },
     [onContextChange, context],
   );
+
   const handleSubmit = useCallback(
     async (message: PromptInputMessage) => {
       if (status === "streaming") {
@@ -208,7 +250,9 @@ export function InputBox({
       if (!message.text) {
         return;
       }
-      setIsFocused(false);
+      setFollowups([]);
+      setFollowupsHidden(false);
+      setFollowupsLoading(false);
       onSubmit?.(message);
     },
     [onSubmit, onStop, status],
@@ -221,14 +265,16 @@ export function InputBox({
 
   const handleFollowupClick = useCallback(
     (suggestion: string) => {
-      if (status === "streaming") return;
-      const current = (textInput?.value ?? "").trim();
+      if (status === "streaming") {
+        return;
+      }
+      const current = (textInput.value ?? "").trim();
       if (current) {
         setPendingSuggestion(suggestion);
         setConfirmOpen(true);
         return;
       }
-      textInput?.setInput(suggestion);
+      textInput.setInput(suggestion);
       setFollowupsHidden(true);
       setTimeout(() => requestFormSubmit(), 0);
     },
@@ -236,119 +282,137 @@ export function InputBox({
   );
 
   const confirmReplaceAndSend = useCallback(() => {
-    if (!pendingSuggestion) return;
-    textInput?.setInput(pendingSuggestion);
+    if (!pendingSuggestion) {
+      setConfirmOpen(false);
+      return;
+    }
+    textInput.setInput(pendingSuggestion);
     setFollowupsHidden(true);
     setConfirmOpen(false);
+    setPendingSuggestion(null);
     setTimeout(() => requestFormSubmit(), 0);
   }, [pendingSuggestion, requestFormSubmit, textInput]);
 
   const confirmAppendAndSend = useCallback(() => {
-    if (!pendingSuggestion) return;
-    const current = (textInput?.value ?? "").trim();
-    textInput?.setInput(
-      current ? `${current}\n${pendingSuggestion}` : pendingSuggestion,
-    );
+    if (!pendingSuggestion) {
+      setConfirmOpen(false);
+      return;
+    }
+    const current = (textInput.value ?? "").trim();
+    const next = current
+      ? `${current}\n${pendingSuggestion}`
+      : pendingSuggestion;
+    textInput.setInput(next);
     setFollowupsHidden(true);
     setConfirmOpen(false);
+    setPendingSuggestion(null);
     setTimeout(() => requestFormSubmit(), 0);
   }, [pendingSuggestion, requestFormSubmit, textInput]);
 
   useEffect(() => {
-    if (!threadId || isNewThread || disabled) return;
+    const streaming = status === "streaming";
+    const wasStreaming = wasStreamingRef.current;
+    wasStreamingRef.current = streaming;
+    if (!wasStreaming || streaming) {
+      return;
+    }
+
+    if (disabled || isMock) {
+      return;
+    }
+
+    const lastAi = [...thread.messages].reverse().find((m) => m.type === "ai");
+    const lastAiId = lastAi?.id ?? null;
+    if (!lastAiId || lastAiId === lastGeneratedForAiIdRef.current) {
+      return;
+    }
+    lastGeneratedForAiIdRef.current = lastAiId;
+
+    const recent = thread.messages
+      .filter((m) => m.type === "human" || m.type === "ai")
+      .map((m) => {
+        const role = m.type === "human" ? "user" : "assistant";
+        const content = textOfMessage(m) ?? "";
+        return { role, content };
+      })
+      .filter((m) => m.content.trim().length > 0)
+      .slice(-6);
+
+    if (recent.length === 0) {
+      return;
+    }
+
     const controller = new AbortController();
     setFollowupsHidden(false);
     setFollowupsLoading(true);
     setFollowups([]);
 
-    fetch(`/api/threads/${String(threadId)}/suggestions`, {
+    fetch(`${getBackendBaseURL()}/api/threads/${threadId}/suggestions`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ messages: [], n: 3 }),
+      body: JSON.stringify({
+        messages: recent,
+        n: 3,
+        model_name: context.model_name ?? undefined,
+      }),
       signal: controller.signal,
     })
       .then(async (res) => {
-        if (!res.ok) return { suggestions: [] };
-        return await res.json();
+        if (!res.ok) {
+          return { suggestions: [] as string[] };
+        }
+        return (await res.json()) as { suggestions?: string[] };
       })
       .then((data) => {
         const suggestions = (data.suggestions ?? [])
-          .filter(Boolean)
+          .map((s) => (typeof s === "string" ? s.trim() : ""))
+          .filter((s) => s.length > 0)
           .slice(0, 5);
         setFollowups(suggestions);
       })
-      .catch(() => setFollowups([]))
-      .finally(() => setFollowupsLoading(false));
+      .catch(() => {
+        setFollowups([]);
+      })
+      .finally(() => {
+        setFollowupsLoading(false);
+      });
 
     return () => controller.abort();
-  }, [disabled, isNewThread, threadId]);
+  }, [context.model_name, disabled, isMock, status, thread.messages, threadId]);
 
   return (
-    <div
-      ref={(el) => {
-        promptRootRef.current = el;
-        containerRef.current = el;
-      }}
-      className="relative w-full"
-    >
-      <AttachmentPreviewBar />
-
-      {extraHeader && (
-        <ExtraHeaderContainer hasAttachments={attachments.files.length > 0}>
-          {extraHeader}
-        </ExtraHeaderContainer>
-      )}
-
+    <div ref={promptRootRef} className="relative">
       <PromptInput
         className={cn(
-          "bg-background w-full rounded-2xl transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
+          "bg-background/85 rounded-2xl backdrop-blur-sm transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
           className,
         )}
-        inputGroupClassName={cn(
-          "border-0 rounded-[20px] backdrop-blur-sm",
-          "transition-[height] duration-300 ease-out shadow-none ",
-          !isNewThread && "h-[200px] shadow-[0_0_20px_0_rgba(0,0,0,0.10)]",
-          hasSubmitted && "shadow-[0_0_20px_0_rgba(0,0,0,0.10)]!",
-          effectiveIsFocused ? "h-[200px]" : "h-[80px]",
-        )}
         disabled={disabled}
         globalDrop
         multiple
         onSubmit={handleSubmit}
         {...props}
       >
-        <PromptInputBody
-          className={cn("transition-[opacity,transform] duration-300 ease-out")}
-        >
+        {extraHeader && (
+          <div className="absolute top-0 right-0 left-0 z-10">
+            <div className="absolute right-0 bottom-0 left-0 flex items-center justify-center">
+              {extraHeader}
+            </div>
+          </div>
+        )}
+        <PromptInputAttachments>
+          {(attachment) => <PromptInputAttachment data={attachment} />}
+        </PromptInputAttachments>
+        <PromptInputBody className="absolute top-0 right-0 left-0 z-3">
           <PromptInputTextarea
-            ref={textareaRef}
-            className={cn(
-              "size-full",
-              !effectiveIsFocused && "h-[80px] py-0 leading-20",
-            )}
+            className={cn("size-full")}
             disabled={disabled}
             placeholder={t.inputBox.placeholder}
             autoFocus={autoFocus}
             defaultValue={initialValue}
-            onFocus={() => setIsFocused(true)}
           />
         </PromptInputBody>
-        {!effectiveIsFocused && (
-          <div
-            className="absolute inset-0 z-1 cursor-text"
-            onClick={() => {
-              setIsFocused(true);
-              textareaRef.current?.focus();
-            }}
-          />
-        )}
-        <PromptInputFooter
-          className={cn(
-            "flex transition-all duration-300 ease-out",
-            !effectiveIsFocused &&
-            "pointer-events-none invisible h-[0px] translate-y-2 p-[0px] opacity-0",
-          )}
-        >
+        <PromptInputFooter className="flex">
           <PromptInputTools>
             {/* TODO: Add more connectors here
           <PromptInputActionMenu>
@@ -360,64 +424,351 @@ export function InputBox({
             </PromptInputActionMenuContent>
           </PromptInputActionMenu> */}
             <AddAttachmentsButton className="px-2!" />
-            <IframeSkillDialogButton
-              className="px-2!"
-              selectedSkill={iframeSkill.selectedSkill}
-              openSkillDialog={iframeSkill.openSkillDialog}
-              clearSkill={iframeSkill.clearSkill}
-            />
-            {/* 参考 kexue 版本隐藏运行模式切换按钮 */}
-          </PromptInputTools>
-          {/* <ModelSelector
-            open={modelDialogOpen}
-            onOpenChange={setModelDialogOpen}
-          >
-            <ModelSelectorTrigger asChild>
-              <PromptInputButton>
-                <ModelSelectorName className="text-xs font-normal">
-                  {selectedModel?.display_name}
-                </ModelSelectorName>
-              </PromptInputButton>
-            </ModelSelectorTrigger>
-            <ModelSelectorContent>
-              <ModelSelectorInput placeholder={t.inputBox.searchModels} />
-              <ModelSelectorList>
-                {models.map((m) => (
-                  <ModelSelectorItem
-                    key={m.name}
-                    value={m.name}
-                    onSelect={() => handleModelSelect(m.name)}
-                  >
-                    <ModelSelectorName>{m.display_name}</ModelSelectorName>
-                    {m.name === context.model_name ? (
-                      <CheckIcon className="ml-auto size-4" />
-                    ) : (
-                      <div className="ml-auto size-4" />
+            <PromptInputActionMenu>
+              <ModeHoverGuide
+                mode={
+                  context.mode === "flash" ||
+                  context.mode === "thinking" ||
+                  context.mode === "pro" ||
+                  context.mode === "ultra"
+                    ? context.mode
+                    : "flash"
+                }
+              >
+                <PromptInputActionMenuTrigger className="gap-1! px-2!">
+                  <div>
+                    {context.mode === "flash" && <ZapIcon className="size-3" />}
+                    {context.mode === "thinking" && (
+                      <LightbulbIcon className="size-3" />
                     )}
-                  </ModelSelectorItem>
-                ))}
-              </ModelSelectorList>
-            </ModelSelectorContent>
-          </ModelSelector> */}
+                    {context.mode === "pro" && (
+                      <GraduationCapIcon className="size-3" />
+                    )}
+                    {context.mode === "ultra" && (
+                      <RocketIcon className="size-3 text-[#dabb5e]" />
+                    )}
+                  </div>
+                  <div
+                    className={cn(
+                      "text-xs font-normal",
+                      context.mode === "ultra" ? "golden-text" : "",
+                    )}
+                  >
+                    {(context.mode === "flash" && t.inputBox.flashMode) ||
+                      (context.mode === "thinking" &&
+                        t.inputBox.reasoningMode) ||
+                      (context.mode === "pro" && t.inputBox.proMode) ||
+                      (context.mode === "ultra" && t.inputBox.ultraMode)}
+                  </div>
+                </PromptInputActionMenuTrigger>
+              </ModeHoverGuide>
+              <PromptInputActionMenuContent className="w-80">
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                    {t.inputBox.mode}
+                  </DropdownMenuLabel>
+                  <PromptInputActionMenu>
+                    <PromptInputActionMenuItem
+                      className={cn(
+                        context.mode === "flash"
+                          ? "text-accent-foreground"
+                          : "text-muted-foreground/65",
+                      )}
+                      onSelect={() => handleModeSelect("flash")}
+                    >
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-1 font-bold">
+                          <ZapIcon
+                            className={cn(
+                              "mr-2 size-4",
+                              context.mode === "flash" &&
+                                "text-accent-foreground",
+                            )}
+                          />
+                          {t.inputBox.flashMode}
+                        </div>
+                        <div className="pl-7 text-xs">
+                          {t.inputBox.flashModeDescription}
+                        </div>
+                      </div>
+                      {context.mode === "flash" ? (
+                        <CheckIcon className="ml-auto size-4" />
+                      ) : (
+                        <div className="ml-auto size-4" />
+                      )}
+                    </PromptInputActionMenuItem>
+                    {supportThinking && (
+                      <PromptInputActionMenuItem
+                        className={cn(
+                          context.mode === "thinking"
+                            ? "text-accent-foreground"
+                            : "text-muted-foreground/65",
+                        )}
+                        onSelect={() => handleModeSelect("thinking")}
+                      >
+                        <div className="flex flex-col gap-2">
+                          <div className="flex items-center gap-1 font-bold">
+                            <LightbulbIcon
+                              className={cn(
+                                "mr-2 size-4",
+                                context.mode === "thinking" &&
+                                  "text-accent-foreground",
+                              )}
+                            />
+                            {t.inputBox.reasoningMode}
+                          </div>
+                          <div className="pl-7 text-xs">
+                            {t.inputBox.reasoningModeDescription}
+                          </div>
+                        </div>
+                        {context.mode === "thinking" ? (
+                          <CheckIcon className="ml-auto size-4" />
+                        ) : (
+                          <div className="ml-auto size-4" />
+                        )}
+                      </PromptInputActionMenuItem>
+                    )}
+                    <PromptInputActionMenuItem
+                      className={cn(
+                        context.mode === "pro"
+                          ? "text-accent-foreground"
+                          : "text-muted-foreground/65",
+                      )}
+                      onSelect={() => handleModeSelect("pro")}
+                    >
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-1 font-bold">
+                          <GraduationCapIcon
+                            className={cn(
+                              "mr-2 size-4",
+                              context.mode === "pro" &&
+                                "text-accent-foreground",
+                            )}
+                          />
+                          {t.inputBox.proMode}
+                        </div>
+                        <div className="pl-7 text-xs">
+                          {t.inputBox.proModeDescription}
+                        </div>
+                      </div>
+                      {context.mode === "pro" ? (
+                        <CheckIcon className="ml-auto size-4" />
+                      ) : (
+                        <div className="ml-auto size-4" />
+                      )}
+                    </PromptInputActionMenuItem>
+                    <PromptInputActionMenuItem
+                      className={cn(
+                        context.mode === "ultra"
+                          ? "text-accent-foreground"
+                          : "text-muted-foreground/65",
+                      )}
+                      onSelect={() => handleModeSelect("ultra")}
+                    >
+                      <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-1 font-bold">
+                          <RocketIcon
+                            className={cn(
+                              "mr-2 size-4",
+                              context.mode === "ultra" && "text-[#dabb5e]",
+                            )}
+                          />
+                          <div
+                            className={cn(
+                              context.mode === "ultra" && "golden-text",
+                            )}
+                          >
+                            {t.inputBox.ultraMode}
+                          </div>
+                        </div>
+                        <div className="pl-7 text-xs">
+                          {t.inputBox.ultraModeDescription}
+                        </div>
+                      </div>
+                      {context.mode === "ultra" ? (
+                        <CheckIcon className="ml-auto size-4" />
+                      ) : (
+                        <div className="ml-auto size-4" />
+                      )}
+                    </PromptInputActionMenuItem>
+                  </PromptInputActionMenu>
+                </DropdownMenuGroup>
+              </PromptInputActionMenuContent>
+            </PromptInputActionMenu>
+            {supportReasoningEffort && context.mode !== "flash" && (
+              <PromptInputActionMenu>
+                <PromptInputActionMenuTrigger className="gap-1! px-2!">
+                  <div className="text-xs font-normal">
+                    {t.inputBox.reasoningEffort}:
+                    {context.reasoning_effort === "minimal" &&
+                      " " + t.inputBox.reasoningEffortMinimal}
+                    {context.reasoning_effort === "low" &&
+                      " " + t.inputBox.reasoningEffortLow}
+                    {context.reasoning_effort === "medium" &&
+                      " " + t.inputBox.reasoningEffortMedium}
+                    {context.reasoning_effort === "high" &&
+                      " " + t.inputBox.reasoningEffortHigh}
+                  </div>
+                </PromptInputActionMenuTrigger>
+                <PromptInputActionMenuContent className="w-70">
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                      {t.inputBox.reasoningEffort}
+                    </DropdownMenuLabel>
+                    <PromptInputActionMenu>
+                      <PromptInputActionMenuItem
+                        className={cn(
+                          context.reasoning_effort === "minimal"
+                            ? "text-accent-foreground"
+                            : "text-muted-foreground/65",
+                        )}
+                        onSelect={() => handleReasoningEffortSelect("minimal")}
+                      >
+                        <div className="flex flex-col gap-2">
+                          <div className="flex items-center gap-1 font-bold">
+                            {t.inputBox.reasoningEffortMinimal}
+                          </div>
+                          <div className="pl-2 text-xs">
+                            {t.inputBox.reasoningEffortMinimalDescription}
+                          </div>
+                        </div>
+                        {context.reasoning_effort === "minimal" ? (
+                          <CheckIcon className="ml-auto size-4" />
+                        ) : (
+                          <div className="ml-auto size-4" />
+                        )}
+                      </PromptInputActionMenuItem>
+                      <PromptInputActionMenuItem
+                        className={cn(
+                          context.reasoning_effort === "low"
+                            ? "text-accent-foreground"
+                            : "text-muted-foreground/65",
+                        )}
+                        onSelect={() => handleReasoningEffortSelect("low")}
+                      >
+                        <div className="flex flex-col gap-2">
+                          <div className="flex items-center gap-1 font-bold">
+                            {t.inputBox.reasoningEffortLow}
+                          </div>
+                          <div className="pl-2 text-xs">
+                            {t.inputBox.reasoningEffortLowDescription}
+                          </div>
+                        </div>
+                        {context.reasoning_effort === "low" ? (
+                          <CheckIcon className="ml-auto size-4" />
+                        ) : (
+                          <div className="ml-auto size-4" />
+                        )}
+                      </PromptInputActionMenuItem>
+                      <PromptInputActionMenuItem
+                        className={cn(
+                          context.reasoning_effort === "medium" ||
+                            !context.reasoning_effort
+                            ? "text-accent-foreground"
+                            : "text-muted-foreground/65",
+                        )}
+                        onSelect={() => handleReasoningEffortSelect("medium")}
+                      >
+                        <div className="flex flex-col gap-2">
+                          <div className="flex items-center gap-1 font-bold">
+                            {t.inputBox.reasoningEffortMedium}
+                          </div>
+                          <div className="pl-2 text-xs">
+                            {t.inputBox.reasoningEffortMediumDescription}
+                          </div>
+                        </div>
+                        {context.reasoning_effort === "medium" ||
+                        !context.reasoning_effort ? (
+                          <CheckIcon className="ml-auto size-4" />
+                        ) : (
+                          <div className="ml-auto size-4" />
+                        )}
+                      </PromptInputActionMenuItem>
+                      <PromptInputActionMenuItem
+                        className={cn(
+                          context.reasoning_effort === "high"
+                            ? "text-accent-foreground"
+                            : "text-muted-foreground/65",
+                        )}
+                        onSelect={() => handleReasoningEffortSelect("high")}
+                      >
+                        <div className="flex flex-col gap-2">
+                          <div className="flex items-center gap-1 font-bold">
+                            {t.inputBox.reasoningEffortHigh}
+                          </div>
+                          <div className="pl-2 text-xs">
+                            {t.inputBox.reasoningEffortHighDescription}
+                          </div>
+                        </div>
+                        {context.reasoning_effort === "high" ? (
+                          <CheckIcon className="ml-auto size-4" />
+                        ) : (
+                          <div className="ml-auto size-4" />
+                        )}
+                      </PromptInputActionMenuItem>
+                    </PromptInputActionMenu>
+                  </DropdownMenuGroup>
+                </PromptInputActionMenuContent>
+              </PromptInputActionMenu>
+            )}
+          </PromptInputTools>
           <PromptInputTools>
-            {/* 占位符 */}
-            <div className="w-[150px]"></div>
+            <ModelSelector
+              open={modelDialogOpen}
+              onOpenChange={setModelDialogOpen}
+            >
+              <ModelSelectorTrigger asChild>
+                <PromptInputButton>
+                  <div className="flex min-w-0 flex-col items-start text-left">
+                    <ModelSelectorName className="text-xs font-normal">
+                      {selectedModel?.display_name}
+                    </ModelSelectorName>
+                  </div>
+                </PromptInputButton>
+              </ModelSelectorTrigger>
+              <ModelSelectorContent>
+                <ModelSelectorInput placeholder={t.inputBox.searchModels} />
+                <ModelSelectorList>
+                  {models.map((m) => (
+                    <ModelSelectorItem
+                      key={m.name}
+                      value={m.name}
+                      onSelect={() => handleModelSelect(m.name)}
+                    >
+                      <div className="flex min-w-0 flex-1 flex-col">
+                        <ModelSelectorName>{m.display_name}</ModelSelectorName>
+                        <span className="text-muted-foreground truncate text-[10px]">
+                          {m.model}
+                        </span>
+                      </div>
+                      {m.name === context.model_name ? (
+                        <CheckIcon className="ml-auto size-4" />
+                      ) : (
+                        <div className="ml-auto size-4" />
+                      )}
+                    </ModelSelectorItem>
+                  ))}
+                </ModelSelectorList>
+              </ModelSelectorContent>
+            </ModelSelector>
+            <PromptInputSubmit
+              className="rounded-full"
+              disabled={disabled}
+              variant="outline"
+              status={status}
+            />
           </PromptInputTools>
         </PromptInputFooter>
-        <PromptInputSubmit
-          className="absolute right-3 bottom-5 z-[20] border-0"
-          disabled={disabled}
-          variant="outline"
-          status={status}
-        />
+        {isNewThread && searchParams.get("mode") !== "skill" && (
+          <div className="absolute right-0 -bottom-20 left-0 z-0 flex items-center justify-center">
+            <SuggestionList />
+          </div>
+        )}
+        {!isNewThread && (
+          <div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
+        )}
       </PromptInput>
 
-      {isNewThread && !hasSubmitted && searchParams.get("mode") !== "skill" && (
-        <SuggestionListContainer
-          sendSelectSkill={iframeSkill.sendSelectSkill}
-        />
-      )}
-
       {!disabled &&
         !isNewThread &&
         !followupsHidden &&
@@ -426,7 +777,7 @@ export function InputBox({
             <div className="flex items-center gap-2">
               {followupsLoading ? (
                 <div className="text-muted-foreground bg-background/80 rounded-full border px-4 py-2 text-xs backdrop-blur-sm">
-                  加载中...
+                  {t.inputBox.followupLoading}
                 </div>
               ) : (
                 <Suggestions className="min-h-16 w-fit items-start">
@@ -456,19 +807,21 @@ export function InputBox({
       <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>提示</DialogTitle>
+            <DialogTitle>{t.inputBox.followupConfirmTitle}</DialogTitle>
             <DialogDescription>
-              请确认要如何处理当前的追加建议内容？
+              {t.inputBox.followupConfirmDescription}
             </DialogDescription>
           </DialogHeader>
           <DialogFooter>
             <Button variant="outline" onClick={() => setConfirmOpen(false)}>
-              取消
+              {t.common.cancel}
             </Button>
             <Button variant="secondary" onClick={confirmAppendAndSend}>
-              追加内容
+              {t.inputBox.followupConfirmAppend}
+            </Button>
+            <Button onClick={confirmReplaceAndSend}>
+              {t.inputBox.followupConfirmReplace}
             </Button>
-            <Button onClick={confirmReplaceAndSend}>替换发送</Button>
           </DialogFooter>
         </DialogContent>
       </Dialog>
@@ -476,45 +829,20 @@ export function InputBox({
   );
 }
 
-// SuggestionList 容器
-function SuggestionListContainer({
-  sendSelectSkill,
-}: {
-  sendSelectSkill: (skill_id: string) => void;
-}) {
-  return (
-    <div className="absolute right-0 bottom-0 left-0 z-0 flex translate-y-full items-center justify-center pt-4">
-      <SuggestionList sendSelectSkill={sendSelectSkill} />
-    </div>
-  );
-}
-
-// 快速选择skillbutton
-function SuggestionList({
-  sendSelectSkill,
-}: {
-  sendSelectSkill: (skill_id: string) => void;
-}) {
+function SuggestionList() {
   const { t } = useI18n();
   const { textInput } = usePromptInputController();
-
   const handleSuggestionClick = useCallback(
-    (suggestion: { prompt: string; skill_id?: string }) => {
-      // 如果有 skill_id，发送给宿主页
-      if (suggestion.skill_id) {
-        sendSelectSkill(suggestion.skill_id);
-        return;
-      }
-      // 原有逻辑
-      if (!suggestion.prompt) return;
-      textInput.setInput(suggestion.prompt);
+    (prompt: string | undefined) => {
+      if (!prompt) return;
+      textInput.setInput(prompt);
       setTimeout(() => {
         const textarea = document.querySelector<HTMLTextAreaElement>(
           "textarea[name='message']",
         );
         if (textarea) {
-          const selStart = suggestion.prompt.indexOf("[");
-          const selEnd = suggestion.prompt.indexOf("]");
+          const selStart = prompt.indexOf("[");
+          const selEnd = prompt.indexOf("]");
           if (selStart !== -1 && selEnd !== -1) {
             textarea.setSelectionRange(selStart, selEnd + 1);
             textarea.focus();
@@ -522,18 +850,50 @@ function SuggestionList({
         }
       }, 500);
     },
-    [textInput, sendSelectSkill],
+    [textInput],
   );
   return (
     <Suggestions className="min-h-16 w-fit items-start">
+      <ConfettiButton
+        className="text-muted-foreground cursor-pointer rounded-full px-4 text-xs font-normal"
+        variant="outline"
+        size="sm"
+        onClick={() => handleSuggestionClick(t.inputBox.surpriseMePrompt)}
+      >
+        <SparklesIcon className="size-4" /> {t.inputBox.surpriseMe}
+      </ConfettiButton>
       {t.inputBox.suggestions.map((suggestion) => (
         <Suggestion
           key={suggestion.suggestion}
           icon={suggestion.icon}
           suggestion={suggestion.suggestion}
-          onClick={() => handleSuggestionClick(suggestion)}
+          onClick={() => handleSuggestionClick(suggestion.prompt)}
         />
       ))}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Suggestion icon={PlusIcon} suggestion={t.common.create} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuGroup>
+            {t.inputBox.suggestionsCreate.map((suggestion, index) =>
+              "type" in suggestion && suggestion.type === "separator" ? (
+                <DropdownMenuSeparator key={index} />
+              ) : (
+                !("type" in suggestion) && (
+                  <DropdownMenuItem
+                    key={suggestion.suggestion}
+                    onClick={() => handleSuggestionClick(suggestion.prompt)}
+                  >
+                    {suggestion.icon && <suggestion.icon className="size-4" />}
+                    {suggestion.suggestion}
+                  </DropdownMenuItem>
+                )
+              ),
+            )}
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </Suggestions>
   );
 }
@@ -544,115 +904,11 @@ function AddAttachmentsButton({ className }: { className?: string }) {
   return (
     <Tooltip content={t.inputBox.addAttachments}>
       <PromptInputButton
-        className={cn("group px-2! hover:bg-[#EAE2F5]", className)}
+        className={cn("px-2!", className)}
         onClick={() => attachments.openFileDialog()}
       >
-        <svg
-          width="18"
-          height="15"
-          viewBox="0 0 18 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="transition-[stroke] duration-200 [&>path]:transition-[fill,stroke] [&>path]:duration-200 [&>path:first-child]:group-hover:fill-[#8E47F0] [&>path:last-child]:group-hover:stroke-[#8E47F0]"
-        >
-          <path
-            d="M7.05042 7.65254C6.9754 7.72756 6.90039 7.80257 6.90039 7.95258C6.90039 8.02759 6.9754 8.1776 7.05042 8.25262C7.20043 8.40263 7.42545 8.40263 7.57546 8.25262L8.8506 6.97747V10.7279C8.8506 10.9529 9.00061 11.1029 9.22563 11.1029C9.30065 11.1029 9.45066 11.0279 9.52567 11.0279C9.60067 10.9529 9.67568 10.8779 9.67568 10.7279V6.97747L10.9508 8.25262C11.1008 8.40263 11.3259 8.40263 11.4759 8.25262C11.5509 8.1776 11.6259 8.10259 11.6259 7.95258C11.6259 7.87757 11.5509 7.72756 11.4759 7.65254L9.52567 5.70235C9.37564 5.55234 9.15062 5.55234 9.00061 5.70235L7.05042 7.65254Z"
-            fill="#150033"
-          />
-          <path
-            d="M1.12695 0.5H6.67871C6.87077 0.500077 7.01409 0.574515 7.07324 0.648438L7.09082 0.669922L8.30762 1.88672C8.6222 2.20119 9.01344 2.3681 9.44629 2.36816H16.875C17.2382 2.36842 17.5012 2.63339 17.5 2.99414V13.8848C17.5048 14.2408 17.2454 14.5056 16.8818 14.5059H1.12695C0.764649 14.5057 0.5 14.2401 0.5 13.877V1.12793C0.500049 0.810129 0.702664 0.567404 0.996094 0.511719L1.12695 0.5Z"
-            stroke="#150033"
-          />
-        </svg>
+        <PaperclipIcon className="size-3" />
       </PromptInputButton>
     </Tooltip>
   );
 }
-// 启动iframeSkillDialog
-function IframeSkillDialogButton({
-  className,
-  selectedSkill,
-  openSkillDialog,
-  clearSkill,
-}: {
-  className?: string;
-  selectedSkill: { skill_id: string; title: string } | null;
-  openSkillDialog: () => void;
-  clearSkill: () => void;
-}) {
-  const { t } = useI18n();
-
-  return (
-    <div className="flex items-center gap-2">
-      <Tooltip content={t.inputBox.selectSkill}>
-        <PromptInputButton
-          className={cn("group px-2! hover:bg-[#EAE2F5]", className)}
-          onClick={openSkillDialog}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="size-4 transition-[stroke] duration-200 [&>path]:transition-[stroke] [&>path]:duration-200 [&>path]:group-hover:stroke-[#8E47F0]"
-            viewBox="0 0 12 16"
-            fill="none"
-          >
-            <path
-              d="M3.7998 0.5H9.19922C9.24033 0.5 9.26852 0.518136 9.28516 0.541992C9.30124 0.565318 9.30411 0.588767 9.29395 0.613281H9.29297L7.43066 5.07422L7.1416 5.76758H11.3994C11.4295 5.76765 11.4474 5.77552 11.459 5.7832C11.4724 5.79207 11.4846 5.80503 11.4922 5.82129C11.4997 5.83745 11.5013 5.85253 11.5 5.86328C11.4989 5.87156 11.4953 5.88556 11.4785 5.9043L2.87891 15.4629V15.4639C2.85396 15.4914 2.83406 15.4971 2.82031 15.499C2.80144 15.5016 2.77553 15.4981 2.74902 15.4844C2.72225 15.4705 2.70837 15.453 2.70312 15.4424C2.70056 15.4372 2.69457 15.4253 2.70312 15.3936V15.3926L4.30273 9.49512L4.47461 8.86426H0.600586C0.559682 8.86424 0.531324 8.84587 0.514648 8.82227C0.498608 8.79944 0.496551 8.777 0.505859 8.75293L3.70508 0.558594C3.71075 0.544183 3.72173 0.529788 3.73828 0.518555C3.74688 0.51277 3.75704 0.508037 3.76758 0.504883L3.7998 0.5Z"
-              stroke="#150033"
-            />
-          </svg>
-        </PromptInputButton>
-      </Tooltip>
-      {selectedSkill && (
-        <Badge
-          variant="secondary"
-          className="gap-1 bg-[#EAE2F5] px-[15px] py-[4px] text-[#8E47F0]"
-        >
-          {selectedSkill.title}
-          <button
-            onClick={clearSkill}
-            className="hover:bg-muted-foreground/20 ml-1 rounded-full"
-          >
-            <XIcon className="size-3" />
-          </button>
-        </Badge>
-      )}
-    </div>
-  );
-}
-
-// 附件预览栏 - 在输入框上方显示
-function AttachmentPreviewBar() {
-  const attachments = usePromptInputAttachments();
-
-  if (!attachments.files.length) {
-    return null;
-  }
-
-  return (
-    <div className="absolute bottom-full left-0 z-20 mb-3 ml-1 flex justify-start">
-      <PromptInputAttachments>
-        {(attachment) => <PromptInputAttachment data={attachment} />}
-      </PromptInputAttachments>
-    </div>
-  );
-}
-
-// ExtraHeader 容器 - 有附件时上浮
-function ExtraHeaderContainer({
-  hasAttachments,
-  children,
-}: {
-  hasAttachments: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <div
-      className={cn(
-        "absolute right-0 bottom-full left-0 z-30 flex items-center justify-center pb-4 transition-transform duration-300",
-        hasAttachments && "-translate-y-20",
-      )}
-    >
-      {children}
-    </div>
-  );
-}
diff --git a/frontend/src/components/workspace/messages/context.ts b/frontend/src/components/workspace/messages/context.ts
index 3d1ee827..967cf008 100644
--- a/frontend/src/components/workspace/messages/context.ts
+++ b/frontend/src/components/workspace/messages/context.ts
@@ -1,11 +1,11 @@
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";
 import { createContext, useContext } from "react";
 
 import type { AgentThreadState } from "@/core/threads";
 
 export interface ThreadContextType {
-  threadId: string;
-  thread: UseStream<AgentThreadState>;
+  thread: BaseStream<AgentThreadState>;
+  isMock?: boolean;
 }
 
 export const ThreadContext = createContext<ThreadContextType | undefined>(
diff --git a/frontend/src/components/workspace/messages/markdown-content.tsx b/frontend/src/components/workspace/messages/markdown-content.tsx
index 2e240d8e..4b61fc9f 100644
--- a/frontend/src/components/workspace/messages/markdown-content.tsx
+++ b/frontend/src/components/workspace/messages/markdown-content.tsx
@@ -1,16 +1,21 @@
 "use client";
 
 import { useMemo } from "react";
-import type { HTMLAttributes } from "react";
+import type { AnchorHTMLAttributes } from "react";
 
 import {
   MessageResponse,
   type MessageResponseProps,
 } from "@/components/ai-elements/message";
 import { streamdownPlugins } from "@/core/streamdown";
+import { cn } from "@/lib/utils";
 
 import { CitationLink } from "../citations/citation-link";
 
+function isExternalUrl(href: string | undefined): boolean {
+  return !!href && /^https?:\/\//.test(href);
+}
+
 export type MarkdownContentProps = {
   content: string;
   isLoading: boolean;
@@ -30,7 +35,7 @@ export function MarkdownContent({
 }: MarkdownContentProps) {
   const components = useMemo(() => {
     return {
-      a: (props: HTMLAttributes<HTMLAnchorElement>) => {
+      a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
         if (typeof props.children === "string") {
           const match = /^citation:(.+)$/.exec(props.children);
           if (match) {
@@ -38,7 +43,16 @@ export function MarkdownContent({
             return <CitationLink {...props}>{text}</CitationLink>;
           }
         }
-        return <a {...props} />;
+        const { className, target, rel, ...rest } = props;
+        const external = isExternalUrl(props.href);
+        return (
+          <a
+            {...rest}
+            className={cn("text-primary underline decoration-primary/30 underline-offset-2 hover:decoration-primary/60 transition-colors", className)}
+            target={target ?? (external ? "_blank" : undefined)}
+            rel={rel ?? (external ? "noopener noreferrer" : undefined)}
+          />
+        );
       },
       ...componentsFromProps,
     };
diff --git a/frontend/src/components/workspace/messages/message-group.tsx b/frontend/src/components/workspace/messages/message-group.tsx
index 45c57211..b7205f55 100644
--- a/frontend/src/components/workspace/messages/message-group.tsx
+++ b/frontend/src/components/workspace/messages/message-group.tsx
@@ -79,7 +79,7 @@ export function MessageGroup({
   const rehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
   return (
     <ChainOfThought
-      className={cn("w-full gap-2 rounded-lg bg-white", className)}
+      className={cn("w-full gap-2 rounded-lg border p-0.5", className)}
       open={true}
     >
       {aboveLastToolCallSteps.length > 0 && (
diff --git a/frontend/src/components/workspace/messages/message-list-item.tsx b/frontend/src/components/workspace/messages/message-list-item.tsx
index 12992d07..af137f29 100644
--- a/frontend/src/components/workspace/messages/message-list-item.tsx
+++ b/frontend/src/components/workspace/messages/message-list-item.tsx
@@ -1,26 +1,33 @@
 import type { Message } from "@langchain/langgraph-sdk";
-import { FileIcon } from "lucide-react";
+import { FileIcon, Loader2Icon } from "lucide-react";
 import { useParams } from "next/navigation";
-import { memo, useMemo, useState, type ImgHTMLAttributes } from "react";
+import { memo, useMemo, type ImgHTMLAttributes } from "react";
 import rehypeKatex from "rehype-katex";
 
+import { Loader } from "@/components/ai-elements/loader";
 import {
   Message as AIElementMessage,
   MessageContent as AIElementMessageContent,
   MessageResponse as AIElementMessageResponse,
   MessageToolbar,
 } from "@/components/ai-elements/message";
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from "@/components/ai-elements/reasoning";
+import { Task, TaskTrigger } from "@/components/ai-elements/task";
 import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import { resolveArtifactURL } from "@/core/artifacts/utils";
+import { useI18n } from "@/core/i18n/hooks";
 import {
   extractContentFromMessage,
   extractReasoningContentFromMessage,
   parseUploadedFiles,
-  type UploadedFile,
+  stripUploadedFilesTag,
+  type FileInMessage,
 } from "@/core/messages/utils";
 import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
-import { materializeSkillYaml } from "@/core/skills";
 import { humanMessagePlugins } from "@/core/streamdown";
 import { cn } from "@/lib/utils";
 
@@ -40,7 +47,7 @@ export function MessageListItem({
   const isHuman = message.type === "human";
   return (
     <AIElementMessage
-      className={cn("group/conversation-message relative w-full mb-1", className)}
+      className={cn("group/conversation-message relative w-full", className)}
       from={isHuman ? "user" : "assistant"}
     >
       <MessageContent
@@ -48,22 +55,24 @@ export function MessageListItem({
         message={message}
         isLoading={isLoading}
       />
-      <MessageToolbar
-        className={cn(
-          isHuman ? "-bottom-8 justify-end" : "-bottom-8",
-          "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
-        )}
-      >
-        <div className="flex gap-1">
-          <CopyButton
-            clipboardData={
-              extractContentFromMessage(message) ??
-              extractReasoningContentFromMessage(message) ??
-              ""
-            }
-          />
-        </div>
-      </MessageToolbar>
+      {!isLoading && (
+        <MessageToolbar
+          className={cn(
+            isHuman ? "-bottom-9 justify-end" : "-bottom-8",
+            "absolute right-0 left-0 z-20 opacity-0 transition-opacity delay-200 duration-300 group-hover/conversation-message:opacity-100",
+          )}
+        >
+          <div className="flex gap-1">
+            <CopyButton
+              clipboardData={
+                extractContentFromMessage(message) ??
+                extractReasoningContentFromMessage(message) ??
+                ""
+              }
+            />
+          </div>
+        </MessageToolbar>
+      )}
     </AIElementMessage>
   );
 }
@@ -121,37 +130,67 @@ function MessageContent_({
 
   const rawContent = extractContentFromMessage(message);
   const reasoningContent = extractReasoningContentFromMessage(message);
-  const { contentToParse, uploadedFiles } = useMemo(() => {
-    if (!isLoading && reasoningContent && !rawContent) {
-      return {
-        contentToParse: reasoningContent,
-        uploadedFiles: [] as UploadedFile[],
-      };
+
+  const files = useMemo(() => {
+    const files = message.additional_kwargs?.files;
+    if (!Array.isArray(files) || files.length === 0) {
+      if (rawContent.includes("<uploaded_files>")) {
+        // If the content contains the <uploaded_files> tag, we return the parsed files from the content for backward compatibility.
+        return parseUploadedFiles(rawContent);
+      }
+      return null;
     }
-    if (isHuman && rawContent) {
-      const { files, cleanContent: contentWithoutFiles } =
-        parseUploadedFiles(rawContent);
-      return { contentToParse: contentWithoutFiles, uploadedFiles: files };
+    return files as FileInMessage[];
+  }, [message.additional_kwargs?.files, rawContent]);
+
+  const contentToDisplay = useMemo(() => {
+    if (isHuman) {
+      return rawContent ? stripUploadedFilesTag(rawContent) : "";
     }
-    return {
-      contentToParse: rawContent ?? "",
-      uploadedFiles: [] as UploadedFile[],
-    };
-  }, [isLoading, rawContent, reasoningContent, isHuman]);
+    return rawContent ?? "";
+  }, [rawContent, isHuman]);
 
   const filesList =
-    uploadedFiles.length > 0 && thread_id ? (
-      <UploadedFilesList files={uploadedFiles} threadId={thread_id} />
+    files && files.length > 0 && thread_id ? (
+      <RichFilesList files={files} threadId={thread_id} />
     ) : null;
 
+  // Uploading state: mock AI message shown while files upload
+  if (message.additional_kwargs?.element === "task") {
+    return (
+      <AIElementMessageContent className={className}>
+        <Task defaultOpen={false}>
+          <TaskTrigger title="">
+            <div className="text-muted-foreground flex w-full cursor-default items-center gap-2 text-sm select-none">
+              <Loader className="size-4" />
+              <span>{contentToDisplay}</span>
+            </div>
+          </TaskTrigger>
+        </Task>
+      </AIElementMessageContent>
+    );
+  }
+
+  // Reasoning-only AI message (no main response content yet)
+  if (!isHuman && reasoningContent && !rawContent) {
+    return (
+      <AIElementMessageContent className={className}>
+        <Reasoning isStreaming={isLoading}>
+          <ReasoningTrigger />
+          <ReasoningContent>{reasoningContent}</ReasoningContent>
+        </Reasoning>
+      </AIElementMessageContent>
+    );
+  }
+
   if (isHuman) {
-    const messageResponse = contentToParse ? (
+    const messageResponse = contentToDisplay ? (
       <AIElementMessageResponse
         remarkPlugins={humanMessagePlugins.remarkPlugins}
         rehypePlugins={humanMessagePlugins.rehypePlugins}
         components={components}
       >
-        {contentToParse}
+        {contentToDisplay}
       </AIElementMessageResponse>
     ) : null;
     return (
@@ -170,7 +209,7 @@ function MessageContent_({
     <AIElementMessageContent className={className}>
       {filesList}
       <MarkdownContent
-        content={contentToParse}
+        content={contentToDisplay}
         isLoading={isLoading}
         rehypePlugins={[...rehypePlugins, [rehypeKatex, { output: "html" }]]}
         className="my-3"
@@ -223,28 +262,32 @@ function isImageFile(filename: string): boolean {
   return IMAGE_EXTENSIONS.includes(getFileExt(filename));
 }
 
-function isYamlFile(filename: string): boolean {
-  const ext = getFileExt(filename);
-  return ext === "yaml" || ext === "yml";
+/**
+ * Format bytes to human-readable size string
+ */
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "—";
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
 }
 
 /**
- * Uploaded files list component
+ * List of files from additional_kwargs.files (with optional upload status)
  */
-function UploadedFilesList({
+function RichFilesList({
   files,
   threadId,
 }: {
-  files: UploadedFile[];
+  files: FileInMessage[];
   threadId: string;
 }) {
   if (files.length === 0) return null;
-
   return (
     <div className="mb-2 flex flex-wrap justify-end gap-2">
       {files.map((file, index) => (
-        <UploadedFileCard
-          key={`${file.path}-${index}`}
+        <RichFileCard
+          key={`${file.filename}-${index}`}
           file={file}
           threadId={threadId}
         />
@@ -254,47 +297,49 @@ function UploadedFilesList({
 }
 
 /**
- * Single uploaded file card component
+ * Single file card that handles FileInMessage (supports uploading state)
  */
-function UploadedFileCard({
+function RichFileCard({
   file,
   threadId,
 }: {
-  file: UploadedFile;
+  file: FileInMessage;
   threadId: string;
 }) {
-  const [isMaterializing, setIsMaterializing] = useState(false);
-  const [materializeMessage, setMaterializeMessage] = useState<string | null>(
-    null,
-  );
-
-  if (!threadId) return null;
-
+  const { t } = useI18n();
+  const isUploading = file.status === "uploading";
   const isImage = isImageFile(file.filename);
-  const isYaml = isYamlFile(file.filename);
-  const fileUrl = resolveArtifactURL(file.path, threadId);
 
-  const handleMaterializeYaml = async () => {
-    if (isMaterializing) return;
-    setIsMaterializing(true);
-    setMaterializeMessage(null);
-    try {
-      const result = await materializeSkillYaml({
-        thread_id: threadId,
-        path: file.path,
-        target_dir: "/mnt/user-data/uploads/skill",
-        clear_target: true,
-      });
-      setMaterializeMessage(
-        `已创建 ${result.created_files} 个文件 / ${result.created_directories} 个目录`,
-      );
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "解析失败";
-      setMaterializeMessage(`失败: ${message}`);
-    } finally {
-      setIsMaterializing(false);
-    }
-  };
+  if (isUploading) {
+    return (
+      <div className="bg-background border-border/40 flex max-w-50 min-w-30 flex-col gap-1 rounded-lg border p-3 opacity-60 shadow-sm">
+        <div className="flex items-start gap-2">
+          <Loader2Icon className="text-muted-foreground mt-0.5 size-4 shrink-0 animate-spin" />
+          <span
+            className="text-foreground truncate text-sm font-medium"
+            title={file.filename}
+          >
+            {file.filename}
+          </span>
+        </div>
+        <div className="flex items-center justify-between gap-2">
+          <Badge
+            variant="secondary"
+            className="rounded px-1.5 py-0.5 text-[10px] font-normal"
+          >
+            {getFileTypeLabel(file.filename)}
+          </Badge>
+          <span className="text-muted-foreground text-[10px]">
+            {t.uploads.uploading}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  if (!file.path) return null;
+
+  const fileUrl = resolveArtifactURL(file.path, threadId);
 
   if (isImage) {
     return (
@@ -307,14 +352,14 @@ function UploadedFileCard({
         <img
           src={fileUrl}
           alt={file.filename}
-          className="h-32 w-auto max-w-[240px] object-cover transition-transform group-hover:scale-105"
+          className="h-32 w-auto max-w-60 object-cover transition-transform group-hover:scale-105"
         />
       </a>
     );
   }
 
   return (
-    <div className="bg-background border-border/40 flex max-w-[200px] min-w-[120px] flex-col gap-1 rounded-lg border p-3 shadow-sm">
+    <div className="bg-background border-border/40 flex max-w-50 min-w-30 flex-col gap-1 rounded-lg border p-3 shadow-sm">
       <div className="flex items-start gap-2">
         <FileIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
         <span
@@ -331,29 +376,10 @@ function UploadedFileCard({
         >
           {getFileTypeLabel(file.filename)}
         </Badge>
-        <span className="text-muted-foreground text-[10px]">{file.size}</span>
+        <span className="text-muted-foreground text-[10px]">
+          {formatBytes(file.size)}
+        </span>
       </div>
-      {/* 注释掉测试按钮，后续根据需求再决定是否保留 */}
-      {/* {isYaml && (
-        <div className="mt-1 flex flex-col gap-1">
-          <Button
-            size="sm"
-            variant="secondary"
-            className="h-7 text-xs"
-            onClick={() => {
-              void handleMaterializeYaml();
-            }}
-            disabled={isMaterializing}
-          >
-            {isMaterializing ? "解析中..." : "一键导入为 Skill 目录"}
-          </Button>
-          {materializeMessage && (
-            <span className="text-muted-foreground text-[10px] leading-tight">
-              {materializeMessage}
-            </span>
-          )}
-        </div>
-      )} */}
     </div>
   );
 }
diff --git a/frontend/src/components/workspace/messages/message-list.tsx b/frontend/src/components/workspace/messages/message-list.tsx
index c83194e2..8d5e0f6b 100644
--- a/frontend/src/components/workspace/messages/message-list.tsx
+++ b/frontend/src/components/workspace/messages/message-list.tsx
@@ -1,5 +1,4 @@
-import type { Message } from "@langchain/langgraph-sdk";
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";
 
 import {
   Conversation,
@@ -34,39 +33,36 @@ export function MessageList({
   className,
   threadId,
   thread,
-  messagesOverride,
-  suppressThreadLoading = false,
   paddingBottom = 160,
 }: {
   className?: string;
   threadId: string;
-  thread: UseStream<AgentThreadState>;
-  /** When set (e.g. from onFinish), use instead of thread.messages so SSE end shows complete state. */
-  messagesOverride?: Message[];
-  suppressThreadLoading?: boolean;
+  thread: BaseStream<AgentThreadState>;
   paddingBottom?: number;
 }) {
   const { t } = useI18n();
   const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
   const updateSubtask = useUpdateSubtask();
-  const messages = messagesOverride ?? thread.messages;
-  if (thread.isThreadLoading && !suppressThreadLoading) {
+  const messages = thread.messages;
+  if (thread.isThreadLoading && messages.length === 0) {
     return <MessageListSkeleton />;
   }
   return (
     <Conversation
       className={cn("flex size-full flex-col justify-center", className)}
     >
-      <ConversationContent className="w-full gap-8 px-[20px]">
+      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-8 pt-12">
         {groupMessages(messages, (group) => {
           if (group.type === "human" || group.type === "assistant") {
-            return (
-              <MessageListItem
-                key={group.id}
-                message={group.messages[0]!}
-                isLoading={thread.isLoading}
-              />
-            );
+            return group.messages.map((msg) => {
+              return (
+                <MessageListItem
+                  key={`${group.id}/${msg.id}`}
+                  message={msg}
+                  isLoading={thread.isLoading}
+                />
+              );
+            });
           } else if (group.type === "assistant:clarification") {
             const message = group.messages[0];
             if (message && hasContent(message)) {
@@ -172,9 +168,9 @@ export function MessageList({
                   {t.subtasks.executing(tasks.size)}
                 </div>,
               );
-              const taskIds = message.tool_calls?.map(
-                (toolCall) => toolCall.id,
-              );
+              const taskIds = message.tool_calls
+                ?.filter((toolCall) => toolCall.name === "task")
+                .map((toolCall) => toolCall.id);
               for (const taskId of taskIds ?? []) {
                 results.push(
                   <SubtaskCard
diff --git a/frontend/src/components/workspace/mode-hover-guide.tsx b/frontend/src/components/workspace/mode-hover-guide.tsx
index c5c1811c..6bd12d47 100644
--- a/frontend/src/components/workspace/mode-hover-guide.tsx
+++ b/frontend/src/components/workspace/mode-hover-guide.tsx
@@ -29,10 +29,7 @@ function getModeDescriptionKey(
   mode: AgentMode,
 ): keyof Pick<
   Translations["inputBox"],
-  | "flashModeDescription"
-  | "reasoningModeDescription"
-  | "proModeDescription"
-  | "ultraModeDescription"
+  "flashModeDescription" | "reasoningModeDescription" | "proModeDescription" | "ultraModeDescription"
 > {
   switch (mode) {
     case "flash":
diff --git a/frontend/src/components/workspace/recent-chat-list.tsx b/frontend/src/components/workspace/recent-chat-list.tsx
index 546b1f46..09f0b343 100644
--- a/frontend/src/components/workspace/recent-chat-list.tsx
+++ b/frontend/src/components/workspace/recent-chat-list.tsx
@@ -1,6 +1,14 @@
 "use client";
 
-import { MoreHorizontal, Pencil, Share2, Trash2 } from "lucide-react";
+import {
+  Download,
+  FileJson,
+  FileText,
+  MoreHorizontal,
+  Pencil,
+  Share2,
+  Trash2,
+} from "lucide-react";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
@@ -19,6 +27,9 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
@@ -31,15 +42,20 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
+import { getAPIClient } from "@/core/api";
 import { useI18n } from "@/core/i18n/hooks";
+import {
+  exportThreadAsJSON,
+  exportThreadAsMarkdown,
+} from "@/core/threads/export";
 import {
   useDeleteThread,
   useRenameThread,
   useThreads,
 } from "@/core/threads/hooks";
+import type { AgentThread, AgentThreadState } from "@/core/threads/types";
 import { pathOfThread, titleOfThread } from "@/core/threads/utils";
 import { env } from "@/env";
-import { copyToClipboard } from "@/lib/utils";
 
 export function RecentChatList() {
   const { t } = useI18n();
@@ -103,7 +119,7 @@ export function RecentChatList() {
       const baseUrl = isLocalhost ? VERCEL_URL : window.location.origin;
       const shareUrl = `${baseUrl}/workspace/chats/${threadId}`;
       try {
-        await copyToClipboard(shareUrl);
+        await navigator.clipboard.writeText(shareUrl);
         toast.success(t.clipboard.linkCopied);
       } catch {
         toast.error(t.clipboard.failedToCopyToClipboard);
@@ -111,6 +127,32 @@ export function RecentChatList() {
     },
     [t],
   );
+
+  const handleExport = useCallback(
+    async (thread: AgentThread, format: "markdown" | "json") => {
+      try {
+        const apiClient = getAPIClient();
+        const state = await apiClient.threads.getState<AgentThreadState>(
+          thread.thread_id,
+        );
+        const messages = state.values?.messages ?? [];
+        if (messages.length === 0) {
+          toast.error(t.conversation.noMessages);
+          return;
+        }
+        if (format === "markdown") {
+          exportThreadAsMarkdown(thread, messages);
+        } else {
+          exportThreadAsJSON(thread, messages);
+        }
+        toast.success(t.common.exportSuccess);
+      } catch {
+        toast.error("Failed to export conversation");
+      }
+    },
+    [t],
+  );
+
   if (threads.length === 0) {
     return null;
   }
@@ -173,6 +215,30 @@ export function RecentChatList() {
                                 <Share2 className="text-muted-foreground" />
                                 <span>{t.common.share}</span>
                               </DropdownMenuItem>
+                              <DropdownMenuSub>
+                                <DropdownMenuSubTrigger>
+                                  <Download className="text-muted-foreground" />
+                                  <span>{t.common.export}</span>
+                                </DropdownMenuSubTrigger>
+                                <DropdownMenuSubContent>
+                                  <DropdownMenuItem
+                                    onSelect={() =>
+                                      handleExport(thread, "markdown")
+                                    }
+                                  >
+                                    <FileText className="text-muted-foreground" />
+                                    <span>{t.common.exportAsMarkdown}</span>
+                                  </DropdownMenuItem>
+                                  <DropdownMenuItem
+                                    onSelect={() =>
+                                      handleExport(thread, "json")
+                                    }
+                                  >
+                                    <FileJson className="text-muted-foreground" />
+                                    <span>{t.common.exportAsJSON}</span>
+                                  </DropdownMenuItem>
+                                </DropdownMenuSubContent>
+                              </DropdownMenuSub>
                               <DropdownMenuSeparator />
                               <DropdownMenuItem
                                 onSelect={() => handleDelete(thread.thread_id)}
diff --git a/frontend/src/components/workspace/settings/about.md b/frontend/src/components/workspace/settings/about.md
index 5ab97cb7..fa74de7d 100644
--- a/frontend/src/components/workspace/settings/about.md
+++ b/frontend/src/components/workspace/settings/about.md
@@ -33,20 +33,17 @@ DeerFlow is proudly open source and distributed under the **MIT License**.
 We extend our heartfelt gratitude to the open source projects and contributors who have made DeerFlow a reality. We truly stand on the shoulders of giants.
 
 ### Core Frameworks
-
 - **[LangChain](https://github.com/langchain-ai/langchain)**: A phenomenal framework that powers our LLM interactions and chains.
 - **[LangGraph](https://github.com/langchain-ai/langgraph)**: Enabling sophisticated multi-agent orchestration.
 - **[Next.js](https://nextjs.org/)**: A cutting-edge framework for building web applications.
 
 ### UI Libraries
-
 - **[Shadcn](https://ui.shadcn.com/)**: Minimalistic components that power our UI.
 - **[SToneX](https://github.com/stonexer)**: For his invaluable contribution to token-by-token visual effects.
 
 These outstanding projects form the backbone of DeerFlow and exemplify the transformative power of open source collaboration.
 
 ### Special Thanks
-
 Finally, we want to express our heartfelt gratitude to the core authors of DeerFlow 1.0 and 2.0:
 
 - **[Daniel Walnut](https://github.com/hetaoBackend/)**
diff --git a/frontend/src/components/workspace/settings/appearance-settings-page.tsx b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
index 125fdaea..2e76d68e 100644
--- a/frontend/src/components/workspace/settings/appearance-settings-page.tsx
+++ b/frontend/src/components/workspace/settings/appearance-settings-page.tsx
@@ -12,7 +12,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { enUS, zhCN, type Locale } from "@/core/i18n";
+import { enUS, isLocale, zhCN, type Locale } from "@/core/i18n";
 import { useI18n } from "@/core/i18n/hooks";
 import { cn } from "@/lib/utils";
 
@@ -89,7 +89,11 @@ export function AppearanceSettingsPage() {
       >
         <Select
           value={locale}
-          onValueChange={(value) => changeLocale(value as Locale)}
+          onValueChange={(value) => {
+            if (isLocale(value)) {
+              changeLocale(value);
+            }
+          }}
         >
           <SelectTrigger className="w-[220px]">
             <SelectValue />
diff --git a/frontend/src/components/workspace/thread-title.tsx b/frontend/src/components/workspace/thread-title.tsx
index 2541ffec..bfc469e8 100644
--- a/frontend/src/components/workspace/thread-title.tsx
+++ b/frontend/src/components/workspace/thread-title.tsx
@@ -1,11 +1,50 @@
+import type { BaseStream } from "@langchain/langgraph-sdk";
+import { useEffect } from "react";
+
+import { useI18n } from "@/core/i18n/hooks";
+import type { AgentThreadState } from "@/core/threads";
+
+import { useThreadChat } from "./chats";
 import { FlipDisplay } from "./flip-display";
 
 export function ThreadTitle({
-  threadTitle,
+  threadId,
+  thread,
 }: {
   className?: string;
   threadId: string;
-  threadTitle: string;
+  thread: BaseStream<AgentThreadState>;
 }) {
-  return <FlipDisplay uniqueKey={threadTitle}>{threadTitle}</FlipDisplay>;
+  const { t } = useI18n();
+  const { isNewThread } = useThreadChat();
+  useEffect(() => {
+    let _title = t.pages.untitled;
+
+    if (thread.values?.title) {
+      _title = thread.values.title;
+    } else if (isNewThread) {
+      _title = t.pages.newChat;
+    }
+    if (thread.isThreadLoading) {
+      document.title = `Loading... - ${t.pages.appName}`;
+    } else {
+      document.title = `${_title} - ${t.pages.appName}`;
+    }
+  }, [
+    isNewThread,
+    t.pages.newChat,
+    t.pages.untitled,
+    t.pages.appName,
+    thread.isThreadLoading,
+    thread.values,
+  ]);
+
+  if (!thread.values?.title) {
+    return null;
+  }
+  return (
+    <FlipDisplay uniqueKey={threadId}>
+      {thread.values.title ?? "Untitled"}
+    </FlipDisplay>
+  );
 }
diff --git a/frontend/src/components/workspace/todo-list.tsx b/frontend/src/components/workspace/todo-list.tsx
index 277f6c21..7e39b7c2 100644
--- a/frontend/src/components/workspace/todo-list.tsx
+++ b/frontend/src/components/workspace/todo-list.tsx
@@ -1,4 +1,5 @@
 import { ChevronUpIcon, ListTodoIcon } from "lucide-react";
+import { useState } from "react";
 
 import type { Todo } from "@/core/todos";
 import { cn } from "@/lib/utils";
@@ -13,7 +14,7 @@ import {
 export function TodoList({
   className,
   todos,
-  collapsed = false,
+  collapsed: controlledCollapsed,
   hidden = false,
   onToggle,
 }: {
@@ -23,6 +24,18 @@ export function TodoList({
   hidden?: boolean;
   onToggle?: () => void;
 }) {
+  const [internalCollapsed, setInternalCollapsed] = useState(true);
+  const isControlled = controlledCollapsed !== undefined;
+  const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+
+  const handleToggle = () => {
+    if (isControlled) {
+      onToggle?.();
+    } else {
+      setInternalCollapsed((prev) => !prev);
+    }
+  };
+
   return (
     <div
       className={cn(
@@ -35,9 +48,7 @@ export function TodoList({
         className={cn(
           "bg-accent flex min-h-8 shrink-0 cursor-pointer items-center justify-between px-4 text-sm transition-all duration-300 ease-out",
         )}
-        onClick={() => {
-          onToggle?.();
-        }}
+        onClick={handleToggle}
       >
         <div className="text-muted-foreground">
           <div className="flex items-center justify-center gap-2">
diff --git a/frontend/src/components/workspace/token-usage-indicator.tsx b/frontend/src/components/workspace/token-usage-indicator.tsx
new file mode 100644
index 00000000..9f0b02f7
--- /dev/null
+++ b/frontend/src/components/workspace/token-usage-indicator.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import type { Message } from "@langchain/langgraph-sdk";
+import { CoinsIcon } from "lucide-react";
+import { useMemo } from "react";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useI18n } from "@/core/i18n/hooks";
+import { accumulateUsage, formatTokenCount } from "@/core/messages/usage";
+import { cn } from "@/lib/utils";
+
+interface TokenUsageIndicatorProps {
+  messages: Message[];
+  className?: string;
+}
+
+export function TokenUsageIndicator({
+  messages,
+  className,
+}: TokenUsageIndicatorProps) {
+  const { t } = useI18n();
+
+  const usage = useMemo(() => accumulateUsage(messages), [messages]);
+
+  if (!usage) {
+    return null;
+  }
+
+  return (
+    <Tooltip delayDuration={200}>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          className={cn(
+            "text-muted-foreground flex cursor-default items-center gap-1 text-xs",
+            className,
+          )}
+        >
+          <CoinsIcon size={14} />
+          <span>{formatTokenCount(usage.totalTokens)}</span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" align="end">
+        <div className="space-y-1 text-xs">
+          <div className="font-medium">{t.tokenUsage.title}</div>
+          <div className="flex justify-between gap-4">
+            <span>{t.tokenUsage.input}</span>
+            <span className="font-mono">
+              {formatTokenCount(usage.inputTokens)}
+            </span>
+          </div>
+          <div className="flex justify-between gap-4">
+            <span>{t.tokenUsage.output}</span>
+            <span className="font-mono">
+              {formatTokenCount(usage.outputTokens)}
+            </span>
+          </div>
+          <div className="border-t pt-1">
+            <div className="flex justify-between gap-4">
+              <span>{t.tokenUsage.total}</span>
+              <span className="font-mono font-medium">
+                {formatTokenCount(usage.totalTokens)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/frontend/src/components/workspace/welcome.tsx b/frontend/src/components/workspace/welcome.tsx
index 8386df27..4fa9ec74 100644
--- a/frontend/src/components/workspace/welcome.tsx
+++ b/frontend/src/components/workspace/welcome.tsx
@@ -41,16 +41,10 @@ export function Welcome({
           `✨ ${t.welcome.createYourOwnSkill} ✨`
         ) : (
           <div className="flex items-center gap-2">
-            <AuroraText
-              className="text-center text-[18px] leading-normal font-normal"
-              style={{
-                color: "var(--color-foreground, #333333)",
-                fontFamily: '"Microsoft YaHei"',
-              }}
-              colors={colors}
-            >
-              {t.welcome.greeting}
-            </AuroraText>
+            <div className={cn("inline-block", !waved ? "animate-wave" : "")}>
+              {isUltra ? "🚀" : "👋"}
+            </div>
+            <AuroraText colors={colors}>{t.welcome.greeting}</AuroraText>
           </div>
         )}
       </div>
@@ -65,7 +59,13 @@ export function Welcome({
           )}
         </div>
       ) : (
-        <div> </div>
+        <div className="text-muted-foreground text-sm">
+          {t.welcome.description.includes("\n") ? (
+            <pre className="whitespace-pre">{t.welcome.description}</pre>
+          ) : (
+            <p>{t.welcome.description}</p>
+          )}
+        </div>
       )}
     </div>
   );
diff --git a/frontend/src/components/workspace/workspace-nav-chat-list.tsx b/frontend/src/components/workspace/workspace-nav-chat-list.tsx
index c699b81e..2028da0b 100644
--- a/frontend/src/components/workspace/workspace-nav-chat-list.tsx
+++ b/frontend/src/components/workspace/workspace-nav-chat-list.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MessagesSquare } from "lucide-react";
+import { BotIcon, MessagesSquare } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
@@ -26,6 +26,17 @@ export function WorkspaceNavChatList() {
             </Link>
           </SidebarMenuButton>
         </SidebarMenuItem>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            isActive={pathname.startsWith("/workspace/agents")}
+            asChild
+          >
+            <Link className="text-muted-foreground" href="/workspace/agents">
+              <BotIcon />
+              <span>{t.sidebar.agents}</span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
       </SidebarMenu>
     </SidebarGroup>
   );
diff --git a/frontend/src/core/agents/api.ts b/frontend/src/core/agents/api.ts
new file mode 100644
index 00000000..d9c2f176
--- /dev/null
+++ b/frontend/src/core/agents/api.ts
@@ -0,0 +1,67 @@
+import { getBackendBaseURL } from "@/core/config";
+
+import type { Agent, CreateAgentRequest, UpdateAgentRequest } from "./types";
+
+export async function listAgents(): Promise<Agent[]> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents`);
+  if (!res.ok) throw new Error(`Failed to load agents: ${res.statusText}`);
+  const data = (await res.json()) as { agents: Agent[] };
+  return data.agents;
+}
+
+export async function getAgent(name: string): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`);
+  if (!res.ok) throw new Error(`Agent '${name}' not found`);
+  return res.json() as Promise<Agent>;
+}
+
+export async function createAgent(request: CreateAgentRequest): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to create agent: ${res.statusText}`);
+  }
+  return res.json() as Promise<Agent>;
+}
+
+export async function updateAgent(
+  name: string,
+  request: UpdateAgentRequest,
+): Promise<Agent> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(request),
+  });
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(err.detail ?? `Failed to update agent: ${res.statusText}`);
+  }
+  return res.json() as Promise<Agent>;
+}
+
+export async function deleteAgent(name: string): Promise<void> {
+  const res = await fetch(`${getBackendBaseURL()}/api/agents/${name}`, {
+    method: "DELETE",
+  });
+  if (!res.ok) throw new Error(`Failed to delete agent: ${res.statusText}`);
+}
+
+export async function checkAgentName(
+  name: string,
+): Promise<{ available: boolean; name: string }> {
+  const res = await fetch(
+    `${getBackendBaseURL()}/api/agents/check?name=${encodeURIComponent(name)}`,
+  );
+  if (!res.ok) {
+    const err = (await res.json().catch(() => ({}))) as { detail?: string };
+    throw new Error(
+      err.detail ?? `Failed to check agent name: ${res.statusText}`,
+    );
+  }
+  return res.json() as Promise<{ available: boolean; name: string }>;
+}
diff --git a/frontend/src/core/agents/hooks.ts b/frontend/src/core/agents/hooks.ts
new file mode 100644
index 00000000..c40f0dae
--- /dev/null
+++ b/frontend/src/core/agents/hooks.ts
@@ -0,0 +1,64 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import {
+  createAgent,
+  deleteAgent,
+  getAgent,
+  listAgents,
+  updateAgent,
+} from "./api";
+import type { CreateAgentRequest, UpdateAgentRequest } from "./types";
+
+export function useAgents() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["agents"],
+    queryFn: () => listAgents(),
+  });
+  return { agents: data ?? [], isLoading, error };
+}
+
+export function useAgent(name: string | null | undefined) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["agents", name],
+    queryFn: () => getAgent(name!),
+    enabled: !!name,
+  });
+  return { agent: data ?? null, isLoading, error };
+}
+
+export function useCreateAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (request: CreateAgentRequest) => createAgent(request),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+}
+
+export function useUpdateAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      name,
+      request,
+    }: {
+      name: string;
+      request: UpdateAgentRequest;
+    }) => updateAgent(name, request),
+    onSuccess: (_data, { name }) => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+      void queryClient.invalidateQueries({ queryKey: ["agents", name] });
+    },
+  });
+}
+
+export function useDeleteAgent() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (name: string) => deleteAgent(name),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["agents"] });
+    },
+  });
+}
diff --git a/frontend/src/core/agents/index.ts b/frontend/src/core/agents/index.ts
new file mode 100644
index 00000000..0733bf1a
--- /dev/null
+++ b/frontend/src/core/agents/index.ts
@@ -0,0 +1,3 @@
+export * from "./api";
+export * from "./hooks";
+export * from "./types";
diff --git a/frontend/src/core/agents/types.ts b/frontend/src/core/agents/types.ts
new file mode 100644
index 00000000..0ff0efff
--- /dev/null
+++ b/frontend/src/core/agents/types.ts
@@ -0,0 +1,22 @@
+export interface Agent {
+  name: string;
+  description: string;
+  model: string | null;
+  tool_groups: string[] | null;
+  soul?: string | null;
+}
+
+export interface CreateAgentRequest {
+  name: string;
+  description?: string;
+  model?: string | null;
+  tool_groups?: string[] | null;
+  soul?: string;
+}
+
+export interface UpdateAgentRequest {
+  description?: string | null;
+  model?: string | null;
+  tool_groups?: string[] | null;
+  soul?: string | null;
+}
diff --git a/frontend/src/core/api/api-client.ts b/frontend/src/core/api/api-client.ts
index 8e504725..b8625151 100644
--- a/frontend/src/core/api/api-client.ts
+++ b/frontend/src/core/api/api-client.ts
@@ -4,10 +4,41 @@ import { Client as LangGraphClient } from "@langchain/langgraph-sdk/client";
 
 import { getLangGraphBaseURL } from "../config";
 
-let _singleton: LangGraphClient | null = null;
-export function getAPIClient(): LangGraphClient {
-  _singleton ??= new LangGraphClient({
-    apiUrl: getLangGraphBaseURL(),
+import { sanitizeRunStreamOptions } from "./stream-mode";
+
+function createCompatibleClient(isMock?: boolean): LangGraphClient {
+  const client = new LangGraphClient({
+    apiUrl: getLangGraphBaseURL(isMock),
   });
-  return _singleton;
+
+  const originalRunStream = client.runs.stream.bind(client.runs);
+  client.runs.stream = ((threadId, assistantId, payload) =>
+    originalRunStream(
+      threadId,
+      assistantId,
+      sanitizeRunStreamOptions(payload),
+    )) as typeof client.runs.stream;
+
+  const originalJoinStream = client.runs.joinStream.bind(client.runs);
+  client.runs.joinStream = ((threadId, runId, options) =>
+    originalJoinStream(
+      threadId,
+      runId,
+      sanitizeRunStreamOptions(options),
+    )) as typeof client.runs.joinStream;
+
+  return client;
+}
+
+const _clients = new Map<string, LangGraphClient>();
+export function getAPIClient(isMock?: boolean): LangGraphClient {
+  const cacheKey = isMock ? "mock" : "default";
+  let client = _clients.get(cacheKey);
+
+  if (!client) {
+    client = createCompatibleClient(isMock);
+    _clients.set(cacheKey, client);
+  }
+
+  return client;
 }
diff --git a/frontend/src/core/api/stream-mode.test.ts b/frontend/src/core/api/stream-mode.test.ts
new file mode 100644
index 00000000..879cf03d
--- /dev/null
+++ b/frontend/src/core/api/stream-mode.test.ts
@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+const { sanitizeRunStreamOptions } = await import(
+  new URL("./stream-mode.ts", import.meta.url).href
+);
+
+void test("drops unsupported stream modes from array payloads", () => {
+  const sanitized = sanitizeRunStreamOptions({
+    streamMode: [
+      "values",
+      "messages-tuple",
+      "custom",
+      "updates",
+      "events",
+      "tools",
+    ],
+  });
+
+  assert.deepEqual(sanitized.streamMode, [
+    "values",
+    "messages-tuple",
+    "custom",
+    "updates",
+    "events",
+  ]);
+});
+
+void test("drops unsupported stream modes from scalar payloads", () => {
+  const sanitized = sanitizeRunStreamOptions({
+    streamMode: "tools",
+  });
+
+  assert.equal(sanitized.streamMode, undefined);
+});
+
+void test("keeps payloads without streamMode untouched", () => {
+  const options = {
+    streamSubgraphs: true,
+  };
+
+  assert.equal(sanitizeRunStreamOptions(options), options);
+});
diff --git a/frontend/src/core/api/stream-mode.ts b/frontend/src/core/api/stream-mode.ts
new file mode 100644
index 00000000..7acae864
--- /dev/null
+++ b/frontend/src/core/api/stream-mode.ts
@@ -0,0 +1,68 @@
+const SUPPORTED_RUN_STREAM_MODES = new Set([
+  "values",
+  "messages",
+  "messages-tuple",
+  "updates",
+  "events",
+  "debug",
+  "tasks",
+  "checkpoints",
+  "custom",
+] as const);
+
+const warnedUnsupportedStreamModes = new Set<string>();
+
+export function warnUnsupportedStreamModes(
+  modes: string[],
+  warn: (message: string) => void = console.warn,
+) {
+  const unseenModes = modes.filter((mode) => {
+    if (warnedUnsupportedStreamModes.has(mode)) {
+      return false;
+    }
+    warnedUnsupportedStreamModes.add(mode);
+    return true;
+  });
+
+  if (unseenModes.length === 0) {
+    return;
+  }
+
+  warn(
+    `[deer-flow] Dropped unsupported LangGraph stream mode(s): ${unseenModes.join(", ")}`,
+  );
+}
+
+export function sanitizeRunStreamOptions<T>(options: T): T {
+  if (
+    typeof options !== "object" ||
+    options === null ||
+    !("streamMode" in options)
+  ) {
+    return options;
+  }
+
+  const streamMode = options.streamMode;
+  if (streamMode == null) {
+    return options;
+  }
+
+  const requestedModes = Array.isArray(streamMode) ? streamMode : [streamMode];
+  const sanitizedModes = requestedModes.filter((mode) =>
+    SUPPORTED_RUN_STREAM_MODES.has(mode),
+  );
+
+  if (sanitizedModes.length === requestedModes.length) {
+    return options;
+  }
+
+  const droppedModes = requestedModes.filter(
+    (mode) => !SUPPORTED_RUN_STREAM_MODES.has(mode),
+  );
+  warnUnsupportedStreamModes(droppedModes);
+
+  return {
+    ...options,
+    streamMode: Array.isArray(streamMode) ? sanitizedModes : sanitizedModes[0],
+  };
+}
diff --git a/frontend/src/core/artifacts/hooks.ts b/frontend/src/core/artifacts/hooks.ts
index f8f15ff5..4df9db70 100644
--- a/frontend/src/core/artifacts/hooks.ts
+++ b/frontend/src/core/artifacts/hooks.ts
@@ -17,17 +17,18 @@ export function useArtifactContent({
   const isWriteFile = useMemo(() => {
     return filepath.startsWith("write-file:");
   }, [filepath]);
-  const { thread } = useThread();
+  const { thread, isMock } = useThread();
   const content = useMemo(() => {
     if (isWriteFile) {
       return loadArtifactContentFromToolCall({ url: filepath, thread });
     }
     return null;
   }, [filepath, isWriteFile, thread]);
+
   const { data, isLoading, error } = useQuery({
-    queryKey: ["artifact", filepath, threadId],
+    queryKey: ["artifact", filepath, threadId, isMock],
     queryFn: () => {
-      return loadArtifactContent({ filepath, threadId });
+      return loadArtifactContent({ filepath, threadId, isMock });
     },
     enabled,
     // Cache artifact content for 5 minutes to avoid repeated fetches (especially for .skill ZIP extraction)
diff --git a/frontend/src/core/artifacts/loader.ts b/frontend/src/core/artifacts/loader.ts
index 32389c01..64a36799 100644
--- a/frontend/src/core/artifacts/loader.ts
+++ b/frontend/src/core/artifacts/loader.ts
@@ -1,4 +1,4 @@
-import type { UseStream } from "@langchain/langgraph-sdk/react";
+import type { BaseStream } from "@langchain/langgraph-sdk/react";
 
 import type { AgentThreadState } from "../threads";
 
@@ -7,15 +7,17 @@ import { urlOfArtifact } from "./utils";
 export async function loadArtifactContent({
   filepath,
   threadId,
+  isMock,
 }: {
   filepath: string;
   threadId: string;
+  isMock?: boolean;
 }) {
   let enhancedFilepath = filepath;
   if (filepath.endsWith(".skill")) {
     enhancedFilepath = filepath + "/SKILL.md";
   }
-  const url = urlOfArtifact({ filepath: enhancedFilepath, threadId });
+  const url = urlOfArtifact({ filepath: enhancedFilepath, threadId, isMock });
   const response = await fetch(url);
   const text = await response.text();
   return text;
@@ -26,7 +28,7 @@ export function loadArtifactContentFromToolCall({
   thread,
 }: {
   url: string;
-  thread: UseStream<AgentThreadState>;
+  thread: BaseStream<AgentThreadState>;
 }) {
   const url = new URL(urlString);
   const toolCallId = url.searchParams.get("tool_call_id");
diff --git a/frontend/src/core/artifacts/utils.ts b/frontend/src/core/artifacts/utils.ts
index d2013410..40269650 100644
--- a/frontend/src/core/artifacts/utils.ts
+++ b/frontend/src/core/artifacts/utils.ts
@@ -5,11 +5,16 @@ export function urlOfArtifact({
   filepath,
   threadId,
   download = false,
+  isMock = false,
 }: {
   filepath: string;
   threadId: string;
   download?: boolean;
+  isMock?: boolean;
 }) {
+  if (isMock) {
+    return `${getBackendBaseURL()}/mock/api/threads/${threadId}/artifacts${filepath}${download ? "?download=true" : ""}`;
+  }
   return `${getBackendBaseURL()}/api/threads/${threadId}/artifacts${filepath}${download ? "?download=true" : ""}`;
 }
 
diff --git a/frontend/src/core/config/index.ts b/frontend/src/core/config/index.ts
index bcf9cbd1..88c2e5dd 100644
--- a/frontend/src/core/config/index.ts
+++ b/frontend/src/core/config/index.ts
@@ -1,16 +1,35 @@
 import { env } from "@/env";
 
+function getBaseOrigin() {
+  if (typeof window !== "undefined") {
+    return window.location.origin;
+  }
+
+  return undefined;
+}
+
 export function getBackendBaseURL() {
   if (env.NEXT_PUBLIC_BACKEND_BASE_URL) {
-    return env.NEXT_PUBLIC_BACKEND_BASE_URL;
+    return new URL(
+      env.NEXT_PUBLIC_BACKEND_BASE_URL,
+      getBaseOrigin(),
+    ).toString();
   } else {
     return "";
   }
 }
 
-export function getLangGraphBaseURL() {
+export function getLangGraphBaseURL(isMock?: boolean) {
   if (env.NEXT_PUBLIC_LANGGRAPH_BASE_URL) {
-    return env.NEXT_PUBLIC_LANGGRAPH_BASE_URL;
+    return new URL(
+      env.NEXT_PUBLIC_LANGGRAPH_BASE_URL,
+      getBaseOrigin(),
+    ).toString();
+  } else if (isMock) {
+    if (typeof window !== "undefined") {
+      return `${window.location.origin}/mock/api`;
+    }
+    return "http://localhost:3000/mock/api";
   } else {
     // LangGraph SDK requires a full URL, construct it from current origin
     if (typeof window !== "undefined") {
diff --git a/frontend/src/core/i18n/hooks.ts b/frontend/src/core/i18n/hooks.ts
index f9e252f8..b96acb00 100644
--- a/frontend/src/core/i18n/hooks.ts
+++ b/frontend/src/core/i18n/hooks.ts
@@ -7,7 +7,13 @@ import { getLocaleFromCookie, setLocaleInCookie } from "./cookies";
 import { enUS } from "./locales/en-US";
 import { zhCN } from "./locales/zh-CN";
 
-import { detectLocale, type Locale, type Translations } from "./index";
+import {
+  DEFAULT_LOCALE,
+  detectLocale,
+  normalizeLocale,
+  type Locale,
+  type Translations,
+} from "./index";
 
 const translations: Record<Locale, Translations> = {
   "en-US": enUS,
@@ -17,7 +23,7 @@ const translations: Record<Locale, Translations> = {
 export function useI18n() {
   const { locale, setLocale } = useI18nContext();
 
-  const t = translations[locale];
+  const t = translations[locale] ?? translations[DEFAULT_LOCALE];
 
   const changeLocale = (newLocale: Locale) => {
     setLocale(newLocale);
@@ -26,12 +32,19 @@ export function useI18n() {
 
   // Initialize locale on mount
   useEffect(() => {
-    const saved = getLocaleFromCookie() as Locale | null;
-    if (!saved) {
-      const detected = detectLocale();
-      setLocale(detected);
-      setLocaleInCookie(detected);
+    const saved = getLocaleFromCookie();
+    if (saved) {
+      const normalizedSaved = normalizeLocale(saved);
+      setLocale(normalizedSaved);
+      if (saved !== normalizedSaved) {
+        setLocaleInCookie(normalizedSaved);
+      }
+      return;
     }
+
+    const detected = detectLocale();
+    setLocale(detected);
+    setLocaleInCookie(detected);
   }, [setLocale]);
 
   return {
diff --git a/frontend/src/core/i18n/index.ts b/frontend/src/core/i18n/index.ts
index 90f03ec8..c301cee0 100644
--- a/frontend/src/core/i18n/index.ts
+++ b/frontend/src/core/i18n/index.ts
@@ -1,23 +1,11 @@
 export { enUS } from "./locales/en-US";
 export { zhCN } from "./locales/zh-CN";
 export type { Translations } from "./locales/types";
-
-export type Locale = "en-US" | "zh-CN";
-
-// Helper function to detect browser locale
-export function detectLocale(): Locale {
-  if (typeof window === "undefined") {
-    return "en-US";
-  }
-
-  const browserLang =
-    navigator.language ||
-    (navigator as unknown as { userLanguage: string }).userLanguage;
-
-  // Check if browser language is Chinese (zh, zh-CN, zh-TW, etc.)
-  if (browserLang.toLowerCase().startsWith("zh")) {
-    return "zh-CN";
-  }
-
-  return "en-US";
-}
+export {
+  DEFAULT_LOCALE,
+  SUPPORTED_LOCALES,
+  detectLocale,
+  isLocale,
+  normalizeLocale,
+} from "./locale";
+export type { Locale } from "./locale";
diff --git a/frontend/src/core/i18n/locale.ts b/frontend/src/core/i18n/locale.ts
new file mode 100644
index 00000000..7fbde14d
--- /dev/null
+++ b/frontend/src/core/i18n/locale.ts
@@ -0,0 +1,36 @@
+export const SUPPORTED_LOCALES = ["en-US", "zh-CN"] as const;
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+export const DEFAULT_LOCALE: Locale = "en-US";
+
+export function isLocale(value: string): value is Locale {
+  return (SUPPORTED_LOCALES as readonly string[]).includes(value);
+}
+
+export function normalizeLocale(locale: string | null | undefined): Locale {
+  if (!locale) {
+    return DEFAULT_LOCALE;
+  }
+
+  if (isLocale(locale)) {
+    return locale;
+  }
+
+  if (locale.toLowerCase().startsWith("zh")) {
+    return "zh-CN";
+  }
+
+  return DEFAULT_LOCALE;
+}
+
+// Helper function to detect browser locale
+export function detectLocale(): Locale {
+  if (typeof window === "undefined") {
+    return DEFAULT_LOCALE;
+  }
+
+  const browserLang =
+    navigator.language ||
+    (navigator as unknown as { userLanguage: string }).userLanguage;
+
+  return normalizeLocale(browserLang);
+}
diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts
index eea40584..83e88c34 100644
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -24,16 +24,11 @@ export const enUS: Translations = {
     delete: "Delete",
     rename: "Rename",
     share: "Share",
-    fullScreen: "fullScreen",
-    closeFullScreen: "closeFullScreen",
     openInNewWindow: "Open in new window",
     close: "Close",
     more: "More",
     search: "Search",
     download: "Download",
-    downloadOriginal: "Original File",
-    downloadAsDocx: "Download as DOCX",
-    downloadAsPdf: "Download as PDF",
     thinking: "Thinking",
     artifacts: "Artifacts",
     public: "Public",
@@ -48,7 +43,10 @@ export const enUS: Translations = {
     save: "Save",
     install: "Install",
     create: "Create",
-    removeAttachment: "Remove attachment",
+    export: "Export",
+    exportAsMarkdown: "Export as Markdown",
+    exportAsJSON: "Export as JSON",
+    exportSuccess: "Conversation exported",
   },
 
   // Welcome
@@ -75,10 +73,7 @@ export const enUS: Translations = {
     placeholder: "How can I assist you today?",
     createSkillPrompt:
       "We're going to build a new skill step by step with `skill-creator`. To start, what do you want this skill to do?",
-    sendMessagePrice:
-      "Please note, this feature will consume tokens. Ensure your account balance is greater than 200 credits.",
     addAttachments: "Add attachments",
-    selectSkill: "Select Skill",
     mode: "Mode",
     flashMode: "Flash",
     flashModeDescription: "Fast and efficient, but may not be accurate",
@@ -113,32 +108,25 @@ export const enUS: Translations = {
     followupConfirmReplace: "Replace & send",
     suggestions: [
       {
-        suggestion: "Paper Writing",
-        prompt:
-          "Write an academic paper about [topic], including abstract, introduction, body and references.",
+        suggestion: "Write",
+        prompt: "Write a blog post about the latest trends on [topic]",
         icon: PenLineIcon,
-        skill_id: "paper-writing",
       },
       {
-        suggestion: "Report Generation",
+        suggestion: "Research",
         prompt:
-          "Analyze [topic] in depth and generate a well-structured research report.",
+          "Conduct a deep dive research on [topic], and summarize the findings.",
         icon: MicroscopeIcon,
-        skill_id: "report-generation",
       },
       {
-        suggestion: "Copywriting",
-        prompt:
-          "Create a complete planning proposal and promotional copy for [project/event].",
+        suggestion: "Collect",
+        prompt: "Collect data from [source] and create a report.",
         icon: ShapesIcon,
-        skill_id: "planning-copywriting",
       },
       {
-        suggestion: "Document Processing",
-        prompt:
-          "Process [document] with reading, summarizing, translating or format conversion.",
-        icon: CompassIcon,
-        skill_id: "document-processing",
+        suggestion: "Learn",
+        prompt: "Learn about [topic] and create a tutorial.",
+        icon: GraduationCapIcon,
       },
     ],
     suggestionsCreate: [
@@ -286,6 +274,25 @@ export const enUS: Translations = {
     failed: "Subtask failed",
   },
 
+  // Token Usage
+  tokenUsage: {
+    title: "Token Usage",
+    input: "Input",
+    output: "Output",
+    total: "Total",
+  },
+  
+  // Shortcuts
+  shortcuts: {
+    searchActions: "Search actions...",
+    noResults: "No results found.",
+    actions: "Actions",
+    keyboardShortcuts: "Keyboard Shortcuts",
+    keyboardShortcutsDescription: "Navigate DeerFlow faster with keyboard shortcuts.",
+    openCommandPalette: "Open Command Palette",
+    toggleSidebar: "Toggle Sidebar",
+  },
+
   // Settings
   settings: {
     title: "Settings",
diff --git a/frontend/src/core/i18n/locales/types.ts b/frontend/src/core/i18n/locales/types.ts
index 45f5d820..0d220edf 100644
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -15,14 +15,9 @@ export interface Translations {
     share: string;
     openInNewWindow: string;
     close: string;
-    fullScreen: string;
-    closeFullScreen: string;
     more: string;
     search: string;
     download: string;
-    downloadOriginal: string;
-    downloadAsDocx: string;
-    downloadAsPdf: string;
     thinking: string;
     artifacts: string;
     public: string;
@@ -37,7 +32,10 @@ export interface Translations {
     save: string;
     install: string;
     create: string;
-    removeAttachment: string;
+    export: string;
+    exportAsMarkdown: string;
+    exportAsJSON: string;
+    exportSuccess: string;
   };
 
   // Welcome
@@ -58,11 +56,9 @@ export interface Translations {
 
   // Input Box
   inputBox: {
-    sendMessagePrice: string;
     placeholder: string;
     createSkillPrompt: string;
     addAttachments: string;
-    selectSkill: string;
     mode: string;
     flashMode: string;
     flashModeDescription: string;
@@ -93,7 +89,6 @@ export interface Translations {
       suggestion: string;
       prompt: string;
       icon: LucideIcon;
-      skill_id?: string;
     }[];
     suggestionsCreate: (
       | {
@@ -216,6 +211,25 @@ export interface Translations {
     failed: string;
   };
 
+  // Token Usage
+  tokenUsage: {
+    title: string;
+    input: string;
+    output: string;
+    total: string;
+  };
+  
+  // Shortcuts
+  shortcuts: {
+    searchActions: string;
+    noResults: string;
+    actions: string;
+    keyboardShortcuts: string;
+    keyboardShortcutsDescription: string;
+    openCommandPalette: string;
+    toggleSidebar: string;
+  };
+
   // Settings
   settings: {
     title: string;
diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts
index 90509445..d77a5468 100644
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -26,16 +26,11 @@ export const zhCN: Translations = {
     share: "分享",
     openInNewWindow: "在新窗口打开",
     close: "关闭",
-    fullScreen: "全屏",
-    closeFullScreen: "关闭全屏",
     more: "更多",
     search: "搜索",
     download: "下载",
-    downloadOriginal: "原文件",
-    downloadAsDocx: "下载为 DOCX",
-    downloadAsPdf: "下载为 PDF",
     thinking: "思考",
-    artifacts: "查看结果",
+    artifacts: "文件",
     public: "公共",
     custom: "自定义",
     notAvailableInDemoMode: "在演示模式下不可用",
@@ -48,12 +43,15 @@ export const zhCN: Translations = {
     save: "保存",
     install: "安装",
     create: "创建",
-    removeAttachment: "移除附件",
+    export: "导出",
+    exportAsMarkdown: "导出为 Markdown",
+    exportAsJSON: "导出为 JSON",
+    exportSuccess: "对话已导出",
   },
 
   // Welcome
   welcome: {
-    greeting: "轻办公.XClaw",
+    greeting: "你好，欢迎回来！",
     description:
       "欢迎使用 🦌 DeerFlow，一个完全开源的超级智能体。通过内置和自定义的 Skills，\nDeerFlow 可以帮你搜索网络、分析数据，还能为你生成幻灯片、\n图片、视频、播客及网页等，几乎可以做任何事情。",
 
@@ -72,13 +70,10 @@ export const zhCN: Translations = {
 
   // Input Box
   inputBox: {
-    placeholder: "先输入说明需求，选择Skill，开始使用吧",
+    placeholder: "今天我能为你做些什么？",
     createSkillPrompt:
       "我们一起用 skill-creator 技能来创建一个技能吧。先问问我希望这个技能能做什么。",
-    sendMessagePrice:
-      "请注意，此功能将消耗token，请保证账户余额大于200可学豆。",
     addAttachments: "添加附件",
-    selectSkill: "选择Skill",
     mode: "模式",
     flashMode: "闪速",
     flashModeDescription: "快速且高效的完成任务，但可能不够精准",
@@ -108,35 +103,24 @@ export const zhCN: Translations = {
     followupConfirmReplace: "替换并发送",
     suggestions: [
       {
-        suggestion: "自媒体文案",
-        prompt:
-          "为[主题/产品]撰写吸引人的自媒体文案，包括标题、正文和话题标签。",
+        suggestion: "写作",
+        prompt: "撰写一篇关于[主题]的博客文章",
         icon: PenLineIcon,
-        skill_id: "431",
       },
       {
-        suggestion: "需求文档",
-        prompt: "编写[项目/功能]的需求文档，包含功能描述、用户故事和验收标准。",
-        icon: CompassIcon,
-        skill_id: "520",
-      },
-      {
-        suggestion: "使用指南",
-        prompt: "编写[产品/功能]的使用指南，包含操作步骤、注意事项和常见问题。",
-        icon: GraduationCapIcon,
-        skill_id: "409",
-      },
-      {
-        suggestion: "Excel数据分析",
-        prompt: "对[Excel文件/数据]进行分析，生成数据洞察和可视化建议。",
+        suggestion: "研究",
+        prompt: "深入浅出的研究一下[主题]，并总结发现。",
         icon: MicroscopeIcon,
-        skill_id: "5",
       },
       {
-        suggestion: "市场调研",
-        prompt: "针对[行业/产品]进行市场调研，分析市场规模、竞品和趋势。",
+        suggestion: "收集",
+        prompt: "从[来源]收集数据并创建报告。",
         icon: ShapesIcon,
-        skill_id: "30",
+      },
+      {
+        suggestion: "学习",
+        prompt: "学习关于[主题]并创建教程。",
+        icon: GraduationCapIcon,
       },
     ],
     suggestionsCreate: [
@@ -277,6 +261,25 @@ export const zhCN: Translations = {
     failed: "子任务失败",
   },
 
+  // Token Usage
+  tokenUsage: {
+    title: "Token 用量",
+    input: "输入",
+    output: "输出",
+    total: "总计",
+  },
+  
+  // Shortcuts
+  shortcuts: {
+    searchActions: "搜索操作...",
+    noResults: "未找到结果。",
+    actions: "操作",
+    keyboardShortcuts: "键盘快捷键",
+    keyboardShortcutsDescription: "使用键盘快捷键更快地操作 DeerFlow。",
+    openCommandPalette: "打开命令面板",
+    toggleSidebar: "切换侧边栏",
+  },
+
   // Settings
   settings: {
     title: "设置",
diff --git a/frontend/src/core/i18n/server.ts b/frontend/src/core/i18n/server.ts
index a03efd77..3600bd73 100644
--- a/frontend/src/core/i18n/server.ts
+++ b/frontend/src/core/i18n/server.ts
@@ -1,9 +1,17 @@
 import { cookies } from "next/headers";
 
-export type Locale = "en-US" | "zh-CN";
+import { normalizeLocale, type Locale } from "./locale";
 
 export async function detectLocaleServer(): Promise<Locale> {
   const cookieStore = await cookies();
-  const locale = cookieStore.get("locale")?.value ?? "en-US";
-  return locale as Locale;
+  let locale = cookieStore.get("locale")?.value;
+  if (locale !== undefined) {
+    try {
+      locale = decodeURIComponent(locale);
+    } catch {
+      // Keep raw cookie value when decoding fails.
+    }
+  }
+
+  return normalizeLocale(locale);
 }
diff --git a/frontend/src/core/iframe-messages.ts b/frontend/src/core/iframe-messages.ts
deleted file mode 100644
index 9a28b2f1..00000000
--- a/frontend/src/core/iframe-messages.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * iframe 与宿主页通信消息类型常量
- *
- * 消息格式：{ type: MESSAGE_TYPE, ...其他字段 }
- * 发送方式：window.parent.postMessage(message, "*")
- */
-
-// 发送给宿主页的消息类型
-export const POST_MESSAGE_TYPES = {
-  // 全屏切换
-  FULLSCREEN: "fullscreen",
-  // 选择预定义 skill
-  SELECT_SKILL: "selectSkill",
-  // 打开 skill 选择对话框
-  OPEN_SKILL_DIALOG: "openSkillDialog",
-} as const;
-
-// 接收来自宿主页的消息类型
-export const RECEIVE_MESSAGE_TYPES = {
-  // 选中的 skill 数据
-  SELECTED_SKILL: "selectedSkill",
-} as const;
-
-// 消息类型
-export type PostMessageType =
-  (typeof POST_MESSAGE_TYPES)[keyof typeof POST_MESSAGE_TYPES];
-export type ReceiveMessageType =
-  (typeof RECEIVE_MESSAGE_TYPES)[keyof typeof RECEIVE_MESSAGE_TYPES];
-
-// 消息数据类型
-export interface FullscreenMessage {
-  type: typeof POST_MESSAGE_TYPES.FULLSCREEN;
-  fullscreen: boolean;
-}
-
-export interface SelectSkillMessage {
-  type: typeof POST_MESSAGE_TYPES.SELECT_SKILL;
-  skill_id: string;
-}
-
-export interface OpenSkillDialogMessage {
-  type: typeof POST_MESSAGE_TYPES.OPEN_SKILL_DIALOG;
-  openSkillDialog: true;
-}
-
-export interface SelectedSkillMessage {
-  type: typeof RECEIVE_MESSAGE_TYPES.SELECTED_SKILL;
-  id: string | number;
-  title: string;
-}
-
-// 发送消息的辅助函数
-export function sendToParent(
-  message: FullscreenMessage | SelectSkillMessage | OpenSkillDialogMessage,
-): void {
-  if (window.parent !== window) {
-    window.parent.postMessage(message, "*");
-  }
-}
diff --git a/frontend/src/core/mcp/api.ts b/frontend/src/core/mcp/api.ts
index 00330323..c63a3e83 100644
--- a/frontend/src/core/mcp/api.ts
+++ b/frontend/src/core/mcp/api.ts
@@ -8,12 +8,14 @@ export async function loadMCPConfig() {
 }
 
 export async function updateMCPConfig(config: MCPConfig) {
-  const response = await fetch(`${getBackendBaseURL()}/api/mcp/config`, {
-    method: "PUT",
-    headers: {
-      "Content-Type": "application/json",
+  const response = await fetch(`${getBackendBaseURL()}/api/mcp/config`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(config),
     },
-    body: JSON.stringify(config),
-  });
+  );
   return response.json();
 }
diff --git a/frontend/src/core/messages/usage.ts b/frontend/src/core/messages/usage.ts
new file mode 100644
index 00000000..44cee07e
--- /dev/null
+++ b/frontend/src/core/messages/usage.ts
@@ -0,0 +1,62 @@
+import type { Message } from "@langchain/langgraph-sdk";
+
+export interface TokenUsage {
+  inputTokens: number;
+  outputTokens: number;
+  totalTokens: number;
+}
+
+/**
+ * Extract usage_metadata from an AI message if present.
+ * The field is added by the backend (PR #1218) but not typed in the SDK.
+ */
+function getUsageMetadata(
+  message: Message,
+): TokenUsage | null {
+  if (message.type !== "ai") {
+    return null;
+  }
+  const usage = (message as Record<string, unknown>).usage_metadata as
+    | { input_tokens?: number; output_tokens?: number; total_tokens?: number }
+    | undefined;
+  if (!usage) {
+    return null;
+  }
+  return {
+    inputTokens: usage.input_tokens ?? 0,
+    outputTokens: usage.output_tokens ?? 0,
+    totalTokens: usage.total_tokens ?? 0,
+  };
+}
+
+/**
+ * Accumulate token usage across all AI messages in a thread.
+ */
+export function accumulateUsage(messages: Message[]): TokenUsage | null {
+  const cumulative: TokenUsage = {
+    inputTokens: 0,
+    outputTokens: 0,
+    totalTokens: 0,
+  };
+  let hasUsage = false;
+  for (const message of messages) {
+    const usage = getUsageMetadata(message);
+    if (usage) {
+      hasUsage = true;
+      cumulative.inputTokens += usage.inputTokens;
+      cumulative.outputTokens += usage.outputTokens;
+      cumulative.totalTokens += usage.totalTokens;
+    }
+  }
+  return hasUsage ? cumulative : null;
+}
+
+/**
+ * Format a token count for display: 1234 -> "1,234", 12345 -> "12.3K"
+ */
+export function formatTokenCount(count: number): string {
+  if (count < 10_000) {
+    return count.toLocaleString();
+  }
+  return `${(count / 1000).toFixed(1)}K`;
+}
diff --git a/frontend/src/core/messages/utils.ts b/frontend/src/core/messages/utils.ts
index 92951ca6..57e05bbc 100644
--- a/frontend/src/core/messages/utils.ts
+++ b/frontend/src/core/messages/utils.ts
@@ -34,146 +34,100 @@ export function groupMessages<T>(
     return [];
   }
 
-  // 预处理：收集所有 ToolMessage 的 tool_call_id
-  const toolMessageIds = new Set<string>();
-  for (const message of messages) {
-    if (message.type === "tool" && message.tool_call_id) {
-      toolMessageIds.add(message.tool_call_id);
-    }
-  }
-
-  // 预处理：检查哪些 tool_calls 没有对应的响应
-  const danglingToolCallIds = new Set<string>();
-  for (const message of messages) {
-    if (message.type === "ai" && message.tool_calls) {
-      for (const tc of message.tool_calls) {
-        const tcId = tc.id;
-        if (tcId && !toolMessageIds.has(tcId)) {
-          danglingToolCallIds.add(tcId);
-        }
-      }
-    }
-  }
-
-  // 过滤掉只有悬空 tool_calls 且没有其他内容的 AI 消息
-  const filteredMessages = messages.filter((message) => {
-    if (message.type === "ai" && hasToolCalls(message)) {
-      // 检查是否所有 tool_calls 都是悬空的
-      const allDangling = message.tool_calls?.every((tc) =>
-        danglingToolCallIds.has(tc.id!),
-      );
-      // 如果全部悬空且没有其他内容，跳过该消息
-      if (allDangling && !hasReasoning(message) && !hasContent(message)) {
-        console.warn("过滤只有悬空 tool_calls 的 AI 消息:", message.id);
-        return false;
-      }
-    }
-    return true;
-  });
-
   const groups: MessageGroup[] = [];
 
-  for (const message of filteredMessages) {
-    const lastGroup = groups[groups.length - 1];
+  // Returns the last group if it can still accept tool messages
+  // (i.e. it's an in-flight processing group, not a terminal human/assistant group).
+  function lastOpenGroup() {
+    const last = groups[groups.length - 1];
+    if (
+      last &&
+      last.type !== "human" &&
+      last.type !== "assistant" &&
+      last.type !== "assistant:clarification"
+    ) {
+      return last;
+    }
+    return null;
+  }
+
+  for (const message of messages) {
+    if (message.name === "todo_reminder") {
+      continue;
+    }
+
     if (message.type === "human") {
-      groups.push({
-        id: message.id,
-        type: "human",
-        messages: [message],
-      });
-    } else if (message.type === "tool") {
-      // 检查是否为澄清问题的工具消息
+      groups.push({ id: message.id, type: "human", messages: [message] });
+      continue;
+    }
+
+    if (message.type === "tool") {
       if (isClarificationToolMessage(message)) {
-        // 如果有可用的处理组，添加到其中（保持工具调用关联）
-        if (
-          lastGroup &&
-          lastGroup.type !== "human" &&
-          lastGroup.type !== "assistant" &&
-          lastGroup.type !== "assistant:clarification"
-        ) {
-          lastGroup.messages.push(message);
-        }
-        // 同时创建单独的澄清组以便突出显示
+        // Add to the preceding processing group to preserve tool-call association,
+        // then also open a standalone clarification group for prominent display.
+        lastOpenGroup()?.messages.push(message);
         groups.push({
           id: message.id,
           type: "assistant:clarification",
           messages: [message],
         });
-      } else if (
-        lastGroup &&
-        lastGroup.type !== "human" &&
-        lastGroup.type !== "assistant" &&
-        lastGroup.type !== "assistant:clarification"
-      ) {
-        lastGroup.messages.push(message);
       } else {
-        // 悬空的工具消息（如生成被中断导致）
-        // 创建独立的处理组以便显示
-        console.warn(
-          "检测到悬空的工具消息，创建独立组:",
-          message.tool_call_id,
-        );
+        const open = lastOpenGroup();
+        if (open) {
+          open.messages.push(message);
+        } else {
+          console.error(
+            "Unexpected tool message outside a processing group",
+            message,
+          );
+        }
+      }
+      continue;
+    }
+
+    if (message.type === "ai") {
+      if (hasPresentFiles(message)) {
         groups.push({
           id: message.id,
-          type: "assistant:processing",
+          type: "assistant:present-files",
           messages: [message],
         });
-      }
-    } else if (message.type === "ai") {
-      if (hasReasoning(message) || hasToolCalls(message)) {
-        if (hasPresentFiles(message)) {
+      } else if (hasSubagent(message)) {
+        groups.push({
+          id: message.id,
+          type: "assistant:subagent",
+          messages: [message],
+        });
+      } else if (hasReasoning(message) || hasToolCalls(message)) {
+        const lastGroup = groups[groups.length - 1];
+        // Accumulate consecutive intermediate AI messages into one processing group.
+        if (lastGroup?.type !== "assistant:processing") {
           groups.push({
             id: message.id,
-            type: "assistant:present-files",
-            messages: [message],
-          });
-        } else if (hasSubagent(message)) {
-          groups.push({
-            id: message.id,
-            type: "assistant:subagent",
+            type: "assistant:processing",
             messages: [message],
           });
         } else {
-          if (lastGroup?.type !== "assistant:processing") {
-            groups.push({
-              id: message.id,
-              type: "assistant:processing",
-              messages: [],
-            });
-          }
-          const currentGroup = groups[groups.length - 1];
-          if (currentGroup?.type === "assistant:processing") {
-            currentGroup.messages.push(message);
-          } else {
-            throw new Error(
-              "带有推理或工具调用的 AI 消息必须位于处理组之后",
-            );
-          }
+          lastGroup.messages.push(message);
         }
       }
+
+      // Not an else-if: a message with reasoning + content (but no tool calls) goes
+      // into the processing group above AND gets its own assistant bubble here.
       if (hasContent(message) && !hasToolCalls(message)) {
-        groups.push({
-          id: message.id,
-          type: "assistant",
-          messages: [message],
-        });
+        groups.push({ id: message.id, type: "assistant", messages: [message] });
       }
     }
   }
 
-  const resultsOfGroups: T[] = [];
-  for (const group of groups) {
-    const resultOfGroup = mapper(group);
-    if (resultOfGroup !== undefined && resultOfGroup !== null) {
-      resultsOfGroups.push(resultOfGroup);
-    }
-  }
-  return resultsOfGroups;
+  return groups
+    .map(mapper)
+    .filter((result) => result !== undefined && result !== null) as T[];
 }
 
 export function extractTextFromMessage(message: Message) {
   if (typeof message.content === "string") {
-    return message.content.trim();
+    return splitInlineReasoningFromAIMessage(message)?.content ?? message.content.trim();
   }
   if (Array.isArray(message.content)) {
     return message.content
@@ -184,9 +138,36 @@ export function extractTextFromMessage(message: Message) {
   return "";
 }
 
+const THINK_TAG_RE = /<think>\s*([\s\S]*?)\s*<\/think>/g;
+
+function splitInlineReasoning(content: string) {
+  const reasoningParts: string[] = [];
+  const cleaned = content
+    .replace(THINK_TAG_RE, (_, reasoning: string) => {
+      const normalized = reasoning.trim();
+      if (normalized) {
+        reasoningParts.push(normalized);
+      }
+      return "";
+    })
+    .trim();
+
+  return {
+    content: cleaned,
+    reasoning: reasoningParts.length > 0 ? reasoningParts.join("\n\n") : null,
+  };
+}
+
+function splitInlineReasoningFromAIMessage(message: Message) {
+  if (message.type !== "ai" || typeof message.content !== "string") {
+    return null;
+  }
+  return splitInlineReasoning(message.content);
+}
+
 export function extractContentFromMessage(message: Message) {
   if (typeof message.content === "string") {
-    return message.content.trim();
+    return splitInlineReasoningFromAIMessage(message)?.content ?? message.content.trim();
   }
   if (Array.isArray(message.content)) {
     return message.content
@@ -208,12 +189,24 @@ export function extractContentFromMessage(message: Message) {
 }
 
 export function extractReasoningContentFromMessage(message: Message) {
-  if (message.type !== "ai" || !message.additional_kwargs) {
+  if (message.type !== "ai") {
     return null;
   }
-  if ("reasoning_content" in message.additional_kwargs) {
+  if (
+    message.additional_kwargs &&
+    "reasoning_content" in message.additional_kwargs
+  ) {
     return message.additional_kwargs.reasoning_content as string | null;
   }
+  if (Array.isArray(message.content)) {
+    const part = message.content[0];
+    if (part && "thinking" in part) {
+      return part.thinking as string;
+    }
+  }
+  if (typeof message.content === "string") {
+    return splitInlineReasoning(message.content).reasoning;
+  }
   return null;
 }
 
@@ -239,7 +232,9 @@ export function extractURLFromImageURLContent(
 
 export function hasContent(message: Message) {
   if (typeof message.content === "string") {
-    return message.content.trim().length > 0;
+    return (
+      splitInlineReasoningFromAIMessage(message)?.content ?? message.content.trim()
+    ).length > 0;
   }
   if (Array.isArray(message.content)) {
     return message.content.length > 0;
@@ -248,10 +243,21 @@ export function hasContent(message: Message) {
 }
 
 export function hasReasoning(message: Message) {
-  return (
-    message.type === "ai" &&
-    typeof message.additional_kwargs?.reasoning_content === "string"
-  );
+  if (message.type !== "ai") {
+    return false;
+  }
+  if (typeof message.additional_kwargs?.reasoning_content === "string") {
+    return true;
+  }
+  if (Array.isArray(message.content)) {
+    const part = message.content[0];
+    // Compatible with the Anthropic gateway
+    return (part as unknown as { type: "thinking" })?.type === "thinking";
+  }
+  if (typeof message.content === "string") {
+    return splitInlineReasoning(message.content).reasoning !== null;
+  }
+  return false;
 }
 
 export function hasToolCalls(message: Message) {
@@ -309,57 +315,61 @@ export function findToolCallResult(toolCallId: string, messages: Message[]) {
 }
 
 /**
- * Represents an uploaded file parsed from the <uploaded_files> tag
+ * Represents a file stored in message additional_kwargs.files.
+ * Used for optimistic UI (uploading state) and structured file metadata.
  */
-export interface UploadedFile {
+export interface FileInMessage {
   filename: string;
-  size: string;
-  path: string;
+  size: number; // bytes
+  path?: string; // virtual path, may not be set during upload
+  status?: "uploading" | "uploaded";
 }
 
 /**
- * Result of parsing uploaded files from message content
+ * Strip <uploaded_files> tag from message content.
+ * Returns the content with the tag removed.
  */
-export interface ParsedUploadedFiles {
-  files: UploadedFile[];
-  cleanContent: string;
+export function stripUploadedFilesTag(content: string): string {
+  return content
+    .replace(/<uploaded_files>[\s\S]*?<\/uploaded_files>/g, "")
+    .trim();
 }
 
-/**
- * Parse <uploaded_files> tag from message content and extract file information.
- * Returns the list of uploaded files and the content with the tag removed.
- */
-export function parseUploadedFiles(content: string): ParsedUploadedFiles {
+export function parseUploadedFiles(content: string): FileInMessage[] {
   // Match <uploaded_files>...</uploaded_files> tag
   const uploadedFilesRegex = /<uploaded_files>([\s\S]*?)<\/uploaded_files>/;
   // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
   const match = content.match(uploadedFilesRegex);
 
   if (!match) {
-    return { files: [], cleanContent: content };
+    return [];
   }
 
   const uploadedFilesContent = match[1];
-  const cleanContent = content.replace(uploadedFilesRegex, "").trim();
 
   // Check if it's "No files have been uploaded yet."
   if (uploadedFilesContent?.includes("No files have been uploaded yet.")) {
-    return { files: [], cleanContent };
+    return [];
+  }
+
+  // Check if the backend reported no new files were uploaded in this message
+  if (uploadedFilesContent?.includes("(empty)")) {
+    return [];
   }
 
   // Parse file list
   // Format: - filename (size)\n  Path: /path/to/file
   const fileRegex = /- ([^\n(]+)\s*\(([^)]+)\)\s*\n\s*Path:\s*([^\n]+)/g;
-  const files: UploadedFile[] = [];
+  const files: FileInMessage[] = [];
   let fileMatch;
 
   while ((fileMatch = fileRegex.exec(uploadedFilesContent ?? "")) !== null) {
     files.push({
       filename: fileMatch[1].trim(),
-      size: fileMatch[2].trim(),
+      size: parseInt(fileMatch[2].trim(), 10) ?? 0,
       path: fileMatch[3].trim(),
     });
   }
 
-  return { files, cleanContent };
+  return files;
 }
diff --git a/frontend/src/core/models/api.ts b/frontend/src/core/models/api.ts
index 5fe77764..362bb0d7 100644
--- a/frontend/src/core/models/api.ts
+++ b/frontend/src/core/models/api.ts
@@ -3,7 +3,7 @@ import { getBackendBaseURL } from "../config";
 import type { Model } from "./types";
 
 export async function loadModels() {
-  const res = fetch(`${getBackendBaseURL()}/api/models`);
-  const { models } = (await (await res).json()) as { models: Model[] };
+  const res = await fetch(`${getBackendBaseURL()}/api/models`);
+  const { models } = (await res.json()) as { models: Model[] };
   return models;
 }
diff --git a/frontend/src/core/models/hooks.ts b/frontend/src/core/models/hooks.ts
index 0627593f..2becbbbc 100644
--- a/frontend/src/core/models/hooks.ts
+++ b/frontend/src/core/models/hooks.ts
@@ -7,6 +7,7 @@ export function useModels({ enabled = true }: { enabled?: boolean } = {}) {
     queryKey: ["models"],
     queryFn: () => loadModels(),
     enabled,
+    refetchOnWindowFocus: false,
   });
   return { models: data ?? [], isLoading, error };
 }
diff --git a/frontend/src/core/models/types.ts b/frontend/src/core/models/types.ts
index f923d2d0..0b9ea5a1 100644
--- a/frontend/src/core/models/types.ts
+++ b/frontend/src/core/models/types.ts
@@ -1,7 +1,9 @@
 export interface Model {
   id: string;
   name: string;
+  model: string;
   display_name: string;
   description?: string | null;
   supports_thinking?: boolean;
+  supports_reasoning_effort?: boolean;
 }
diff --git a/frontend/src/core/settings/hooks.ts b/frontend/src/core/settings/hooks.ts
index b4e5c40b..47797d48 100644
--- a/frontend/src/core/settings/hooks.ts
+++ b/frontend/src/core/settings/hooks.ts
@@ -1,5 +1,4 @@
-import { useCallback, useState } from "react";
-import { useEffect } from "react";
+import { useCallback, useLayoutEffect, useState } from "react";
 
 import {
   DEFAULT_LOCAL_SETTINGS,
@@ -17,7 +16,7 @@ export function useLocalSettings(): [
 ] {
   const [mounted, setMounted] = useState(false);
   const [state, setState] = useState<LocalSettings>(DEFAULT_LOCAL_SETTINGS);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!mounted) {
       setState(getLocalSettings());
     }
@@ -28,6 +27,7 @@ export function useLocalSettings(): [
       key: keyof LocalSettings,
       value: Partial<LocalSettings[keyof LocalSettings]>,
     ) => {
+      if (!mounted) return;
       setState((prev) => {
         const newState = {
           ...prev,
@@ -36,12 +36,11 @@ export function useLocalSettings(): [
             ...value,
           },
         };
-        // localStorage 置空
-        saveLocalSettings({} as LocalSettings);
+        saveLocalSettings(newState);
         return newState;
       });
     },
-    [],
+    [mounted],
   );
   return [state, setter];
 }
diff --git a/frontend/src/core/settings/local.ts b/frontend/src/core/settings/local.ts
index 9bdcf328..d560e7b8 100644
--- a/frontend/src/core/settings/local.ts
+++ b/frontend/src/core/settings/local.ts
@@ -7,6 +7,7 @@ export const DEFAULT_LOCAL_SETTINGS: LocalSettings = {
   context: {
     model_name: undefined,
     mode: undefined,
+    reasoning_effort: undefined,
   },
   layout: {
     sidebar_collapsed: false,
@@ -24,6 +25,7 @@ export interface LocalSettings {
     "thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
   > & {
     mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
+    reasoning_effort?: "minimal" | "low" | "medium" | "high";
   };
   layout: {
     sidebar_collapsed: boolean;
diff --git a/frontend/src/core/skills/api.ts b/frontend/src/core/skills/api.ts
index 9fdb576b..b6a358f0 100644
--- a/frontend/src/core/skills/api.ts
+++ b/frontend/src/core/skills/api.ts
@@ -35,38 +35,6 @@ export interface InstallSkillResponse {
   message: string;
 }
 
-export interface MaterializeSkillYamlRequest {
-  thread_id: string;
-  path: string;
-  target_dir?: string;
-  clear_target?: boolean;
-}
-
-export interface MaterializeSkillYamlResponse {
-  success: boolean;
-  target_dir: string;
-  created_directories: number;
-  created_files: number;
-  message: string;
-}
-
-export interface BootstrapRemoteSkillRequest {
-  thread_id: string;
-  content_id: number;
-  language_type?: number;
-  target_dir?: string;
-  clear_target?: boolean;
-}
-
-export interface BootstrapRemoteSkillResponse {
-  success: boolean;
-  target_dir: string;
-  created_directories: number;
-  created_files: number;
-  sandbox_id: string;
-  message: string;
-}
-
 export async function installSkill(
   request: InstallSkillRequest,
 ): Promise<InstallSkillResponse> {
@@ -92,51 +60,3 @@ export async function installSkill(
 
   return response.json();
 }
-
-export async function materializeSkillYaml(
-  request: MaterializeSkillYamlRequest,
-): Promise<MaterializeSkillYamlResponse> {
-  const response = await fetch(
-    `${getBackendBaseURL()}/api/skills/materialize-yaml`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(request),
-    },
-  );
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    const errorMessage =
-      errorData.detail ?? `HTTP ${response.status}: ${response.statusText}`;
-    throw new Error(errorMessage);
-  }
-
-  return response.json();
-}
-
-export async function bootstrapRemoteSkill(
-  request: BootstrapRemoteSkillRequest,
-): Promise<BootstrapRemoteSkillResponse> {
-  const response = await fetch(
-    `${getBackendBaseURL()}/api/skills/bootstrap-remote`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(request),
-    },
-  );
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    const errorMessage =
-      errorData.detail ?? `HTTP ${response.status}: ${response.statusText}`;
-    throw new Error(errorMessage);
-  }
-
-  return response.json();
-}
diff --git a/frontend/src/core/threads/export.ts b/frontend/src/core/threads/export.ts
new file mode 100644
index 00000000..cf3e2f3b
--- /dev/null
+++ b/frontend/src/core/threads/export.ts
@@ -0,0 +1,142 @@
+import type { Message } from "@langchain/langgraph-sdk";
+
+import {
+  extractContentFromMessage,
+  extractReasoningContentFromMessage,
+  hasContent,
+  hasToolCalls,
+  stripUploadedFilesTag,
+} from "../messages/utils";
+
+import type { AgentThread } from "./types";
+import { titleOfThread } from "./utils";
+
+function formatMessageContent(message: Message): string {
+  const text = extractContentFromMessage(message);
+  if (!text) return "";
+  return stripUploadedFilesTag(text);
+}
+
+function formatToolCalls(message: Message): string {
+  if (message.type !== "ai" || !hasToolCalls(message)) return "";
+  const calls = message.tool_calls ?? [];
+  return calls.map((call) => `- **Tool:** \`${call.name}\``).join("\n");
+}
+
+export function formatThreadAsMarkdown(
+  thread: AgentThread,
+  messages: Message[],
+): string {
+  const title = titleOfThread(thread);
+  const createdAt = thread.created_at
+    ? new Date(thread.created_at).toLocaleString()
+    : "Unknown";
+
+  const lines: string[] = [
+    `# ${title}`,
+    "",
+    `*Exported on ${new Date().toLocaleString()} · Created ${createdAt}*`,
+    "",
+    "---",
+    "",
+  ];
+
+  for (const message of messages) {
+    if (message.type === "human") {
+      const content = formatMessageContent(message);
+      if (content) {
+        lines.push(`## 🧑 User`, "", content, "", "---", "");
+      }
+    } else if (message.type === "ai") {
+      const reasoning = extractReasoningContentFromMessage(message);
+      const content = formatMessageContent(message);
+      const toolCalls = formatToolCalls(message);
+
+      if (!content && !toolCalls && !reasoning) continue;
+
+      lines.push(`## 🤖 Assistant`);
+
+      if (reasoning) {
+        lines.push(
+          "",
+          "<details>",
+          "<summary>Thinking</summary>",
+          "",
+          reasoning,
+          "",
+          "</details>",
+        );
+      }
+
+      if (toolCalls) {
+        lines.push("", toolCalls);
+      }
+
+      if (content && hasContent(message)) {
+        lines.push("", content);
+      }
+
+      lines.push("", "---", "");
+    }
+  }
+
+  return lines.join("\n").trimEnd() + "\n";
+}
+
+export function formatThreadAsJSON(
+  thread: AgentThread,
+  messages: Message[],
+): string {
+  const exportData = {
+    title: titleOfThread(thread),
+    thread_id: thread.thread_id,
+    created_at: thread.created_at,
+    exported_at: new Date().toISOString(),
+    messages: messages.map((msg) => ({
+      type: msg.type,
+      id: msg.id,
+      content: typeof msg.content === "string" ? msg.content : msg.content,
+      ...(msg.type === "ai" && msg.tool_calls?.length
+        ? { tool_calls: msg.tool_calls }
+        : {}),
+    })),
+  };
+  return JSON.stringify(exportData, null, 2);
+}
+
+function sanitizeFilename(name: string): string {
+  return (
+    name.replace(/[^\p{L}\p{N}_\- ]/gu, "").trim() || "conversation"
+  );
+}
+
+export function downloadAsFile(
+  content: string,
+  filename: string,
+  mimeType: string,
+) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+export function exportThreadAsMarkdown(
+  thread: AgentThread,
+  messages: Message[],
+) {
+  const markdown = formatThreadAsMarkdown(thread, messages);
+  const filename = `${sanitizeFilename(titleOfThread(thread))}.md`;
+  downloadAsFile(markdown, filename, "text/markdown;charset=utf-8");
+}
+
+export function exportThreadAsJSON(thread: AgentThread, messages: Message[]) {
+  const json = formatThreadAsJSON(thread, messages);
+  const filename = `${sanitizeFilename(titleOfThread(thread))}.json`;
+  downloadAsFile(json, filename, "application/json;charset=utf-8");
+}
diff --git a/frontend/src/core/threads/hooks.ts b/frontend/src/core/threads/hooks.ts
index d612e199..f637ac4e 100644
--- a/frontend/src/core/threads/hooks.ts
+++ b/frontend/src/core/threads/hooks.ts
@@ -1,44 +1,163 @@
-import type { HumanMessage } from "@langchain/core/messages";
-import type { AIMessage } from "@langchain/langgraph-sdk";
+import type { AIMessage, Message } from "@langchain/langgraph-sdk";
 import type { ThreadsClient } from "@langchain/langgraph-sdk/client";
-import { useStream, type UseStream } from "@langchain/langgraph-sdk/react";
+import { useStream } from "@langchain/langgraph-sdk/react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
 
 import type { PromptInputMessage } from "@/components/ai-elements/prompt-input";
 
 import { getAPIClient } from "../api";
+import { getBackendBaseURL } from "../config";
+import { useI18n } from "../i18n/hooks";
+import type { FileInMessage } from "../messages/utils";
+import type { LocalSettings } from "../settings";
 import { useUpdateSubtask } from "../tasks/context";
+import type { UploadedFileInfo } from "../uploads";
 import { uploadFiles } from "../uploads";
-import type { UploadTarget } from "../uploads/api";
 
-import type {
-  AgentThread,
-  AgentThreadContext,
-  AgentThreadState,
-} from "./types";
+import type { AgentThread, AgentThreadState } from "./types";
+
+export type ToolEndEvent = {
+  name: string;
+  data: unknown;
+};
+
+export type ThreadStreamOptions = {
+  threadId?: string | null | undefined;
+  context: LocalSettings["context"];
+  isMock?: boolean;
+  onStart?: (threadId: string) => void;
+  onFinish?: (state: AgentThreadState) => void;
+  onToolEnd?: (event: ToolEndEvent) => void;
+};
+
+function getStreamErrorMessage(error: unknown): string {
+  if (typeof error === "string" && error.trim()) {
+    return error;
+  }
+  if (error instanceof Error && error.message.trim()) {
+    return error.message;
+  }
+  if (typeof error === "object" && error !== null) {
+    const message = Reflect.get(error, "message");
+    if (typeof message === "string" && message.trim()) {
+      return message;
+    }
+    const nestedError = Reflect.get(error, "error");
+    if (nestedError instanceof Error && nestedError.message.trim()) {
+      return nestedError.message;
+    }
+    if (typeof nestedError === "string" && nestedError.trim()) {
+      return nestedError;
+    }
+  }
+  return "Request failed.";
+}
 
 export function useThreadStream({
   threadId,
-  isNewThread,
-  fetchStateHistory = true,
+  context,
+  isMock,
+  onStart,
   onFinish,
-}: {
-  isNewThread: boolean;
-  threadId: string | null | undefined;
-  fetchStateHistory?: boolean;
-  onFinish?: (state: AgentThreadState) => void;
-}) {
+  onToolEnd,
+}: ThreadStreamOptions) {
+  const { t } = useI18n();
+  // Track the thread ID that is currently streaming to handle thread changes during streaming
+  const [onStreamThreadId, setOnStreamThreadId] = useState(() => threadId);
+  // Ref to track current thread ID across async callbacks without causing re-renders,
+  // and to allow access to the current thread id in onUpdateEvent
+  const threadIdRef = useRef<string | null>(threadId ?? null);
+  const startedRef = useRef(false);
+
+  const listeners = useRef({
+    onStart,
+    onFinish,
+    onToolEnd,
+  });
+
+  // Keep listeners ref updated with latest callbacks
+  useEffect(() => {
+    listeners.current = { onStart, onFinish, onToolEnd };
+  }, [onStart, onFinish, onToolEnd]);
+
+  useEffect(() => {
+    const normalizedThreadId = threadId ?? null;
+    if (!normalizedThreadId) {
+      // Just reset for new thread creation when threadId becomes null/undefined
+      startedRef.current = false;
+      setOnStreamThreadId(normalizedThreadId);
+    }
+    threadIdRef.current = normalizedThreadId;
+  }, [threadId]);
+
+  const _handleOnStart = useCallback((id: string) => {
+    if (!startedRef.current) {
+      listeners.current.onStart?.(id);
+      startedRef.current = true;
+    }
+  }, []);
+
+  const handleStreamStart = useCallback(
+    (_threadId: string) => {
+      threadIdRef.current = _threadId;
+      _handleOnStart(_threadId);
+    },
+    [_handleOnStart],
+  );
+
   const queryClient = useQueryClient();
   const updateSubtask = useUpdateSubtask();
+
   const thread = useStream<AgentThreadState>({
-    client: getAPIClient(),
+    client: getAPIClient(isMock),
     assistantId: "lead_agent",
-    threadId: isNewThread ? undefined : threadId,
+    threadId: onStreamThreadId,
     reconnectOnMount: true,
-    fetchStateHistory,
+    fetchStateHistory: { limit: 1 },
+    onCreated(meta) {
+      handleStreamStart(meta.thread_id);
+      setOnStreamThreadId(meta.thread_id);
+    },
+    onLangChainEvent(event) {
+      if (event.event === "on_tool_end") {
+        listeners.current.onToolEnd?.({
+          name: event.name,
+          data: event.data,
+        });
+      }
+    },
+    onUpdateEvent(data) {
+      const updates: Array<Partial<AgentThreadState> | null> = Object.values(
+        data || {},
+      );
+      for (const update of updates) {
+        if (update && "title" in update && update.title) {
+          void queryClient.setQueriesData(
+            {
+              queryKey: ["threads", "search"],
+              exact: false,
+            },
+            (oldData: Array<AgentThread> | undefined) => {
+              return oldData?.map((t) => {
+                if (t.thread_id === threadIdRef.current) {
+                  return {
+                    ...t,
+                    values: {
+                      ...t.values,
+                      title: update.title,
+                    },
+                  };
+                }
+                return t;
+              });
+            },
+          );
+        }
+      }
+    },
     onCustomEvent(event: unknown) {
-      console.info(event);
       if (
         typeof event === "object" &&
         event !== null &&
@@ -53,158 +172,242 @@ export function useThreadStream({
         updateSubtask({ id: e.task_id, latestMessage: e.message });
       }
     },
+    onError(error) {
+      setOptimisticMessages([]);
+      toast.error(getStreamErrorMessage(error));
+    },
     onFinish(state) {
-      onFinish?.(state.values);
-      // void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
-      queryClient.setQueriesData(
-        {
-          queryKey: ["threads", "search"],
-          exact: false,
-        },
-        (oldData: Array<AgentThread>) => {
-          return oldData.map((t) => {
-            if (t.thread_id === threadId) {
-              return {
-                ...t,
-                values: {
-                  ...t.values,
-                  title: state.values.title,
-                },
-              };
-            }
-            return t;
-          });
-        },
-      );
+      listeners.current.onFinish?.(state.values);
+      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
     },
   });
-  return thread;
-}
 
-export function useSubmitThread({
-  threadId,
-  thread,
-  threadContext,
-  isNewThread,
-  createNewSession,
-  uploadTarget,
-  afterSubmit,
-}: {
-  isNewThread: boolean;
-  createNewSession: boolean;
-  threadId: string | null | undefined;
-  thread: UseStream<AgentThreadState>;
-  threadContext: Omit<AgentThreadContext, "thread_id">;
-  uploadTarget?: UploadTarget;
-  afterSubmit?: () => void;
-}) {
-  const queryClient = useQueryClient();
-  const apiClient = getAPIClient();
-  const callback = useCallback(
-    async (message: PromptInputMessage) => {
-      const text = message.text.trim();
+  // Optimistic messages shown before the server stream responds
+  const [optimisticMessages, setOptimisticMessages] = useState<Message[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const sendInFlightRef = useRef(false);
+  // Track message count before sending so we know when server has responded
+  const prevMsgCountRef = useRef(thread.messages.length);
 
-      // Guard: ignore empty submits (avoids unintended side effects during page init).
-      const hasFiles = !!(message.files && message.files.length > 0);
-      if (!text && !hasFiles) {
+  // Clear optimistic when server messages arrive (count increases)
+  useEffect(() => {
+    if (
+      optimisticMessages.length > 0 &&
+      thread.messages.length > prevMsgCountRef.current
+    ) {
+      setOptimisticMessages([]);
+    }
+  }, [thread.messages.length, optimisticMessages.length]);
+
+  const sendMessage = useCallback(
+    async (
+      threadId: string,
+      message: PromptInputMessage,
+      extraContext?: Record<string, unknown>,
+    ) => {
+      if (sendInFlightRef.current) {
         return;
       }
+      sendInFlightRef.current = true;
 
-      // For "new session" semantics, ensure the target thread id starts fresh.
-      // If the same id already exists, delete it first and let submit recreate it.
-      if (createNewSession && threadId) {
-        try {
-          await apiClient.threads.delete(threadId);
-        } catch {
-          // Ignore delete errors (e.g. thread does not exist yet)
-        }
-      }
+      const text = message.text.trim();
 
-      // Upload files first if any
-      if (message.files && message.files.length > 0) {
-        try {
-          // Convert FileUIPart to File objects by fetching blob URLs
-          const filePromises = message.files.map(async (fileUIPart) => {
-            if (fileUIPart.url && fileUIPart.filename) {
-              try {
-                // Fetch the blob URL to get the file data
-                const response = await fetch(fileUIPart.url);
-                const blob = await response.blob();
+      // Capture current count before showing optimistic messages
+      prevMsgCountRef.current = thread.messages.length;
 
-                // Create a File object from the blob
-                return new File([blob], fileUIPart.filename, {
-                  type: fileUIPart.mediaType || blob.type,
-                });
-              } catch (error) {
-                console.error(
-                  `Failed to fetch file ${fileUIPart.filename}:`,
-                  error,
-                );
-                return null;
-              }
-            }
-            return null;
-          });
-
-          const files = (await Promise.all(filePromises)).filter(
-            (file): file is File => file !== null,
-          );
-
-          if (files.length > 0 && threadId) {
-            await uploadFiles(threadId, files, { target: uploadTarget });
-          }
-        } catch (error) {
-          console.error("Failed to upload files:", error);
-          // Continue with message submission even if upload fails
-          // You might want to show an error toast here
-        }
-      }
-
-      await thread.submit(
-        {
-          messages: [
-            {
-              type: "human",
-              content: [
-                {
-                  type: "text",
-                  text,
-                },
-              ],
-            },
-          ] as HumanMessage[],
-        },
-        {
-          threadId: createNewSession ? threadId! : undefined,
-          streamSubgraphs: true,
-          streamResumable: true,
-          streamMode: ["values", "messages-tuple", "custom"],
-          config: {
-            recursion_limit: 1000,
-          },
-          context: {
-            ...threadContext,
-            thread_id: threadId,
-          },
-        },
+      // Build optimistic files list with uploading status
+      const optimisticFiles: FileInMessage[] = (message.files ?? []).map(
+        (f) => ({
+          filename: f.filename ?? "",
+          size: 0,
+          status: "uploading" as const,
+        }),
       );
 
-      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
-      afterSubmit?.();
+      // Create optimistic human message (shown immediately)
+      const optimisticHumanMsg: Message = {
+        type: "human",
+        id: `opt-human-${Date.now()}`,
+        content: text ? [{ type: "text", text }] : "",
+        additional_kwargs:
+          optimisticFiles.length > 0 ? { files: optimisticFiles } : {},
+      };
+
+      const newOptimistic: Message[] = [optimisticHumanMsg];
+      if (optimisticFiles.length > 0) {
+        // Mock AI message while files are being uploaded
+        newOptimistic.push({
+          type: "ai",
+          id: `opt-ai-${Date.now()}`,
+          content: t.uploads.uploadingFiles,
+          additional_kwargs: { element: "task" },
+        });
+      }
+      setOptimisticMessages(newOptimistic);
+
+      _handleOnStart(threadId);
+
+      let uploadedFileInfo: UploadedFileInfo[] = [];
+
+      try {
+        // Upload files first if any
+        if (message.files && message.files.length > 0) {
+          setIsUploading(true);
+          try {
+            // Convert FileUIPart to File objects by fetching blob URLs
+            const filePromises = message.files.map(async (fileUIPart) => {
+              if (fileUIPart.url && fileUIPart.filename) {
+                try {
+                  // Fetch the blob URL to get the file data
+                  const response = await fetch(fileUIPart.url);
+                  const blob = await response.blob();
+
+                  // Create a File object from the blob
+                  return new File([blob], fileUIPart.filename, {
+                    type: fileUIPart.mediaType || blob.type,
+                  });
+                } catch (error) {
+                  console.error(
+                    `Failed to fetch file ${fileUIPart.filename}:`,
+                    error,
+                  );
+                  return null;
+                }
+              }
+              return null;
+            });
+
+            const conversionResults = await Promise.all(filePromises);
+            const files = conversionResults.filter(
+              (file): file is File => file !== null,
+            );
+            const failedConversions = conversionResults.length - files.length;
+
+            if (failedConversions > 0) {
+              throw new Error(
+                `Failed to prepare ${failedConversions} attachment(s) for upload. Please retry.`,
+              );
+            }
+
+            if (!threadId) {
+              throw new Error("Thread is not ready for file upload.");
+            }
+
+            if (files.length > 0) {
+              const uploadResponse = await uploadFiles(threadId, files);
+              uploadedFileInfo = uploadResponse.files;
+
+              // Update optimistic human message with uploaded status + paths
+              const uploadedFiles: FileInMessage[] = uploadedFileInfo.map(
+                (info) => ({
+                  filename: info.filename,
+                  size: info.size,
+                  path: info.virtual_path,
+                  status: "uploaded" as const,
+                }),
+              );
+              setOptimisticMessages((messages) => {
+                if (messages.length > 1 && messages[0]) {
+                  const humanMessage: Message = messages[0];
+                  return [
+                    {
+                      ...humanMessage,
+                      additional_kwargs: { files: uploadedFiles },
+                    },
+                    ...messages.slice(1),
+                  ];
+                }
+                return messages;
+              });
+            }
+          } catch (error) {
+            console.error("Failed to upload files:", error);
+            const errorMessage =
+              error instanceof Error
+                ? error.message
+                : "Failed to upload files.";
+            toast.error(errorMessage);
+            setOptimisticMessages([]);
+            throw error;
+          } finally {
+            setIsUploading(false);
+          }
+        }
+
+        // Build files metadata for submission (included in additional_kwargs)
+        const filesForSubmit: FileInMessage[] = uploadedFileInfo.map(
+          (info) => ({
+            filename: info.filename,
+            size: info.size,
+            path: info.virtual_path,
+            status: "uploaded" as const,
+          }),
+        );
+
+        await thread.submit(
+          {
+            messages: [
+              {
+                type: "human",
+                content: [
+                  {
+                    type: "text",
+                    text,
+                  },
+                ],
+                additional_kwargs:
+                  filesForSubmit.length > 0 ? { files: filesForSubmit } : {},
+              },
+            ],
+          },
+          {
+            threadId: threadId,
+            streamSubgraphs: true,
+            streamResumable: true,
+            config: {
+              recursion_limit: 1000,
+            },
+            context: {
+              ...extraContext,
+              ...context,
+              thinking_enabled: context.mode !== "flash",
+              is_plan_mode: context.mode === "pro" || context.mode === "ultra",
+              subagent_enabled: context.mode === "ultra",
+              reasoning_effort:
+                context.reasoning_effort ??
+                (context.mode === "ultra"
+                  ? "high"
+                  : context.mode === "pro"
+                    ? "medium"
+                    : context.mode === "thinking"
+                      ? "low"
+                      : undefined),
+              thread_id: threadId,
+            },
+          },
+        );
+        void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
+      } catch (error) {
+        setOptimisticMessages([]);
+        setIsUploading(false);
+        throw error;
+      } finally {
+        sendInFlightRef.current = false;
+      }
     },
-    [
-      thread,
-      isNewThread,
-      createNewSession,
-      threadId,
-      threadContext,
-      uploadTarget,
-      queryClient,
-      apiClient,
-      afterSubmit,
-    ],
+    [thread, _handleOnStart, t.uploads.uploadingFiles, context, queryClient],
   );
-  return callback;
+
+  // Merge thread with optimistic messages for display
+  const mergedThread =
+    optimisticMessages.length > 0
+      ? ({
+          ...thread,
+          messages: [...thread.messages, ...optimisticMessages],
+        } as typeof thread)
+      : thread;
+
+  return [mergedThread, sendMessage, isUploading] as const;
 }
 
 export function useThreads(
@@ -212,15 +415,64 @@ export function useThreads(
     limit: 50,
     sortBy: "updated_at",
     sortOrder: "desc",
+    select: ["thread_id", "updated_at", "values"],
   },
 ) {
   const apiClient = getAPIClient();
   return useQuery<AgentThread[]>({
     queryKey: ["threads", "search", params],
     queryFn: async () => {
-      const response = await apiClient.threads.search<AgentThreadState>(params);
-      return response as AgentThread[];
+      const maxResults = params.limit;
+      const initialOffset = params.offset ?? 0;
+      const DEFAULT_PAGE_SIZE = 50;
+
+      // Preserve prior semantics: if a non-positive limit is explicitly provided,
+      // delegate to a single search call with the original parameters.
+      if (maxResults !== undefined && maxResults <= 0) {
+        const response = await apiClient.threads.search<AgentThreadState>(params);
+        return response as AgentThread[];
+      }
+
+      const pageSize =
+        typeof maxResults === "number" && maxResults > 0
+          ? Math.min(DEFAULT_PAGE_SIZE, maxResults)
+          : DEFAULT_PAGE_SIZE;
+
+      const threads: AgentThread[] = [];
+      let offset = initialOffset;
+
+      while (true) {
+        if (typeof maxResults === "number" && threads.length >= maxResults) {
+          break;
+        }
+
+        const currentLimit =
+          typeof maxResults === "number"
+            ? Math.min(pageSize, maxResults - threads.length)
+            : pageSize;
+
+        if (typeof maxResults === "number" && currentLimit <= 0) {
+          break;
+        }
+
+        const response = (await apiClient.threads.search<AgentThreadState>({
+          ...params,
+          limit: currentLimit,
+          offset,
+        })) as AgentThread[];
+
+        threads.push(...response);
+
+        if (response.length < currentLimit) {
+          break;
+        }
+
+        offset += response.length;
+      }
+
+      return threads;
     },
+    refetchOnWindowFocus: false,
   });
 }
 
@@ -230,6 +482,20 @@ export function useDeleteThread() {
   return useMutation({
     mutationFn: async ({ threadId }: { threadId: string }) => {
       await apiClient.threads.delete(threadId);
+
+      const response = await fetch(
+        `${getBackendBaseURL()}/api/threads/${encodeURIComponent(threadId)}`,
+        {
+          method: "DELETE",
+        },
+      );
+
+      if (!response.ok) {
+        const error = await response
+          .json()
+          .catch(() => ({ detail: "Failed to delete local thread data." }));
+        throw new Error(error.detail ?? "Failed to delete local thread data.");
+      }
     },
     onSuccess(_, { threadId }) {
       queryClient.setQueriesData(
@@ -237,11 +503,17 @@ export function useDeleteThread() {
           queryKey: ["threads", "search"],
           exact: false,
         },
-        (oldData: Array<AgentThread>) => {
+        (oldData: Array<AgentThread> | undefined) => {
+          if (oldData == null) {
+            return oldData;
+          }
           return oldData.filter((t) => t.thread_id !== threadId);
         },
       );
     },
+    onSettled() {
+      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
+    },
   });
 }
 
diff --git a/frontend/src/core/threads/types.ts b/frontend/src/core/threads/types.ts
index 106ef8a3..b9c41616 100644
--- a/frontend/src/core/threads/types.ts
+++ b/frontend/src/core/threads/types.ts
@@ -1,11 +1,10 @@
-import { type BaseMessage } from "@langchain/core/messages";
-import type { Thread } from "@langchain/langgraph-sdk";
+import type { Message, Thread } from "@langchain/langgraph-sdk";
 
 import type { Todo } from "../todos";
 
 export interface AgentThreadState extends Record<string, unknown> {
   title: string;
-  messages: BaseMessage[];
+  messages: Message[];
   artifacts: string[];
   todos?: Todo[];
 }
@@ -18,4 +17,6 @@ export interface AgentThreadContext extends Record<string, unknown> {
   thinking_enabled: boolean;
   is_plan_mode: boolean;
   subagent_enabled: boolean;
+  reasoning_effort?: "minimal" | "low" | "medium" | "high";
+  agent_name?: string;
 }
diff --git a/frontend/src/core/threads/utils.ts b/frontend/src/core/threads/utils.ts
index dba38aaf..22510fa8 100644
--- a/frontend/src/core/threads/utils.ts
+++ b/frontend/src/core/threads/utils.ts
@@ -1,4 +1,4 @@
-import type { BaseMessage } from "@langchain/core/messages";
+import type { Message } from "@langchain/langgraph-sdk";
 
 import type { AgentThread } from "./types";
 
@@ -6,19 +6,19 @@ export function pathOfThread(threadId: string) {
   return `/workspace/chats/${threadId}`;
 }
 
-export function textOfMessage(message: BaseMessage) {
+export function textOfMessage(message: Message) {
   if (typeof message.content === "string") {
     return message.content;
   } else if (Array.isArray(message.content)) {
-    return message.content.find((part) => part.type === "text" && part.text)
-      ?.text as string;
+    for (const part of message.content) {
+      if (part.type === "text") {
+        return part.text;
+      }
+    }
   }
   return null;
 }
 
 export function titleOfThread(thread: AgentThread) {
-  if (thread.values && "title" in thread.values) {
-    return thread.values.title;
-  }
-  return "Untitled";
+  return thread.values?.title ?? "Untitled";
 }
diff --git a/frontend/src/core/uploads/api.ts b/frontend/src/core/uploads/api.ts
index 5622a053..0d83b6f8 100644
--- a/frontend/src/core/uploads/api.ts
+++ b/frontend/src/core/uploads/api.ts
@@ -29,7 +29,15 @@ export interface ListFilesResponse {
   count: number;
 }
 
-export type UploadTarget = "skill";
+async function readErrorDetail(
+  response: Response,
+  fallback: string,
+): Promise<string> {
+  const error = await response
+    .json()
+    .catch(() => ({ detail: fallback }));
+  return error.detail ?? fallback;
+}
 
 /**
  * Upload files to a thread
@@ -37,7 +45,6 @@ export type UploadTarget = "skill";
 export async function uploadFiles(
   threadId: string,
   files: File[],
-  options?: { target?: UploadTarget },
 ): Promise<UploadResponse> {
   const formData = new FormData();
 
@@ -45,10 +52,6 @@ export async function uploadFiles(
     formData.append("files", file);
   });
 
-  if (options?.target) {
-    formData.append("upload_target", options.target);
-  }
-
   const response = await fetch(
     `${getBackendBaseURL()}/api/threads/${threadId}/uploads`,
     {
@@ -58,10 +61,7 @@ export async function uploadFiles(
   );
 
   if (!response.ok) {
-    const error = await response
-      .json()
-      .catch(() => ({ detail: "Upload failed" }));
-    throw new Error(error.detail ?? "Upload failed");
+    throw new Error(await readErrorDetail(response, "Upload failed"));
   }
 
   return response.json();
@@ -78,7 +78,9 @@ export async function listUploadedFiles(
   );
 
   if (!response.ok) {
-    throw new Error("Failed to list uploaded files");
+    throw new Error(
+      await readErrorDetail(response, "Failed to list uploaded files"),
+    );
   }
 
   return response.json();
@@ -99,7 +101,7 @@ export async function deleteUploadedFile(
   );
 
   if (!response.ok) {
-    throw new Error("Failed to delete file");
+    throw new Error(await readErrorDetail(response, "Failed to delete file"));
   }
 
   return response.json();
diff --git a/frontend/src/core/utils/markdown-download/converter.ts b/frontend/src/core/utils/markdown-download/converter.ts
deleted file mode 100644
index a9c91af8..00000000
--- a/frontend/src/core/utils/markdown-download/converter.ts
+++ /dev/null
@@ -1,464 +0,0 @@
-import { Document as DocxDocument, Packer, Paragraph, TextRun, HeadingLevel } from "docx";
-import { marked } from "marked";
-
-// ============================================================================
-// Types
-// ============================================================================
-
-/**
- * Markdown Token 类型（简化版）
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type MarkdownToken = any;
-
-/**
- * PDF 转换选项
- */
-export interface PdfOptions {
-  /**
-   * 页边距 [上, 右, 下, 左]，单位 mm
-   * @default [15, 15, 15, 15]
-   */
-  margin?: [number, number, number, number];
-  /**
-   * 页面格式
-   * @default "a4"
-   */
-  format?: "a3" | "a4" | "a5" | "letter" | "legal";
-  /**
-   * 页面方向
-   * @default "portrait"
-   */
-  orientation?: "portrait" | "landscape";
-  /**
-   * 缩放比例
-   * @default 2
-   */
-  scale?: number;
-}
-
-/**
- * DOCX 转换选项
- */
-export interface DocxOptions {
-  /**
-   * 代码块字体
-   * @default "Courier New"
-   */
-  codeFont?: string;
-  /**
-   * 代码块字号（半磅）
-   * @default 22 (11pt)
-   */
-  codeFontSize?: number;
-}
-
-// ============================================================================
-// DOCX Converter
-// ============================================================================
-
-/**
- * 将 Markdown 内容转换为 DOCX 文件并下载
- *
- * @param markdown - Markdown 文本内容
- * @param filename - 文件名（不含扩展名，或包含 .md 扩展名）
- * @param options - 转换选项
- *
- * @example
- * ```ts
- * await downloadMarkdownAsDocx("# Hello World", "document");
- * ```
- */
-export async function downloadMarkdownAsDocx(markdown: string, filename: string, options: DocxOptions = {}): Promise<void> {
-  const { codeFont = "Courier New", codeFontSize = 22 } = options;
-
-  const tokens = marked.lexer(markdown);
-  const children = parseTokensToDocx(tokens, { codeFont, codeFontSize });
-
-  const doc = new DocxDocument({
-    sections: [{ children }],
-  });
-
-  const blob = await Packer.toBlob(doc);
-  downloadBlob(blob, normalizeFilename(filename, ".docx"));
-}
-
-// ============================================================================
-// PDF Converter
-// ============================================================================
-
-/**
- * 将 Markdown 内容转换为 PDF 文件并下载
- *
- * @param markdown - Markdown 文本内容
- * @param filename - 文件名（不含扩展名，或包含 .md 扩展名）
- * @param options - 转换选项
- *
- * @example
- * ```ts
- * await downloadMarkdownAsPdf("# Hello World", "document");
- * ```
- */
-export async function downloadMarkdownAsPdf(markdown: string, filename: string, options: PdfOptions = {}): Promise<void> {
-  const html2pdf = await loadHtml2Pdf();
-
-  const { margin = [15, 15, 15, 15], format = "a4", orientation = "portrait", scale = 2 } = options;
-
-  // 解析 Markdown 为 HTML
-  const htmlContent = await marked.parse(markdown);
-
-  // 创建容器并应用样式
-  const container = createStyledContainer(htmlContent);
-
-  // 配置 html2pdf
-  const opt = {
-    margin,
-    filename: normalizeFilename(filename, ".pdf"),
-    image: { type: "jpeg" as const, quality: 0.98 },
-    html2canvas: {
-      scale,
-      useCORS: true,
-      logging: false,
-      onclone: fixColorsForHtml2Canvas,
-    },
-    jsPDF: { unit: "mm" as const, format, orientation },
-  };
-
-  await html2pdf().set(opt).from(container).save();
-}
-
-// ============================================================================
-// Internal Utilities
-// ============================================================================
-
-/**
- * 动态加载 html2pdf.js
- */
-// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-async function loadHtml2Pdf(): Promise<Function> {
-  const html2pdf = await import("html2pdf.js");
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  return html2pdf.default;
-}
-
-/**
- * 创建带样式的 HTML 容器
- */
-function createStyledContainer(htmlContent: string): HTMLDivElement {
-  const container = document.createElement("div");
-  container.innerHTML = htmlContent;
-
-  // 容器基础样式
-  container.style.cssText = `
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    font-size: 14px;
-    line-height: 1.6;
-    padding: 20px;
-    max-width: 800px;
-    color: #333333;
-    background-color: #ffffff;
-  `;
-
-  // 应用元素样式
-  applyElementStyles(container);
-
-  return container;
-}
-
-/**
- * 应用元素样式
- */
-function applyElementStyles(container: HTMLElement): void {
-  // 标题
-  container.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach((h) => {
-    const el = h as HTMLElement;
-    el.style.marginTop = "1.5em";
-    el.style.marginBottom = "0.5em";
-    el.style.fontWeight = "600";
-    el.style.color = "#1a1a1a";
-  });
-
-  // 段落
-  container.querySelectorAll("p").forEach((p) => {
-    (p as HTMLElement).style.marginBottom = "1em";
-  });
-
-  // 代码块
-  container.querySelectorAll("pre, code").forEach((code) => {
-    const el = code as HTMLElement;
-    el.style.fontFamily = "'SF Mono', 'Fira Code', Consolas, monospace";
-    el.style.backgroundColor = "#f5f5f5";
-    el.style.color = "#333333";
-    el.style.fontSize = "13px";
-    if (code.tagName === "PRE") {
-      el.style.padding = "12px";
-      el.style.borderRadius = "6px";
-      el.style.overflow = "auto";
-    } else {
-      el.style.padding = "2px 4px";
-      el.style.borderRadius = "3px";
-    }
-  });
-
-  // 列表
-  container.querySelectorAll("ul, ol").forEach((list) => {
-    const el = list as HTMLElement;
-    el.style.marginBottom = "1em";
-    el.style.paddingLeft = "2em";
-  });
-
-  // 引用块
-  container.querySelectorAll("blockquote").forEach((bq) => {
-    const el = bq as HTMLElement;
-    el.style.borderLeft = "4px solid #dddddd";
-    el.style.marginLeft = "0";
-    el.style.paddingLeft = "16px";
-    el.style.color = "#666666";
-  });
-
-  // 表格
-  container.querySelectorAll("table").forEach((table) => {
-    const el = table as HTMLElement;
-    el.style.borderCollapse = "collapse";
-    el.style.width = "100%";
-    el.style.marginBottom = "1em";
-  });
-
-  container.querySelectorAll("th, td").forEach((cell) => {
-    const el = cell as HTMLElement;
-    el.style.border = "1px solid #dddddd";
-    el.style.padding = "8px";
-  });
-
-  // 链接
-  container.querySelectorAll("a").forEach((link) => {
-    const el = link as HTMLElement;
-    el.style.color = "#0066cc";
-    el.style.textDecoration = "underline";
-  });
-
-  // 分割线
-  container.querySelectorAll("hr").forEach((hr) => {
-    const el = hr as HTMLElement;
-    el.style.border = "none";
-    el.style.borderTop = "1px solid #dddddd";
-    el.style.margin = "2em 0";
-  });
-}
-
-/**
- * 修复 html2canvas 不支持的颜色函数
- */
-function fixColorsForHtml2Canvas(clonedDoc: Document): void {
-  // 移除外部样式表（可能包含 lab、oklab 等不支持的颜色）
-  clonedDoc.querySelectorAll<HTMLStyleElement | HTMLLinkElement>('link[rel="stylesheet"], style').forEach((sheet) => sheet.remove());
-
-  // 重置所有元素的颜色属性为安全值
-  clonedDoc.querySelectorAll<HTMLElement>("*").forEach((el) => {
-    const props = [
-      "color",
-      "background-color",
-      "border-color",
-      "border-top-color",
-      "border-bottom-color",
-      "border-left-color",
-      "border-right-color",
-      "outline-color",
-      "text-decoration-color",
-      "caret-color",
-      "column-rule-color",
-      "accent-color",
-      "fill",
-      "stroke",
-    ];
-
-    props.forEach((prop) => el.style.removeProperty(prop));
-
-    el.style.color = "#333333";
-    el.style.backgroundColor = "transparent";
-  });
-
-  // 设置 body 背景
-  const body = clonedDoc.body;
-  body.style.color = "#333333";
-  body.style.backgroundColor = "#ffffff";
-}
-
-/**
- * 解析 Markdown Token 为 DOCX Paragraph
- */
-function parseTokensToDocx(tokens: MarkdownToken[], options: Required<DocxOptions>): Paragraph[] {
-  const paragraphs: Paragraph[] = [];
-
-  for (const token of tokens) {
-    switch (token.type) {
-      case "heading": {
-        const runs = parseInlineTokens(token.tokens ?? [], options);
-        paragraphs.push(
-          new Paragraph({
-            children: runs,
-            heading: getHeadingLevel(token.depth),
-            spacing: { before: 240, after: 120 },
-          })
-        );
-        break;
-      }
-
-      case "paragraph": {
-        const runs = parseInlineTokens(token.tokens ?? [], options);
-        paragraphs.push(
-          new Paragraph({
-            children: runs.length > 0 ? runs : [new TextRun("")],
-            spacing: { after: 200 },
-          })
-        );
-        break;
-      }
-
-      case "code": {
-        const lines = token.text.split("\n");
-        lines.forEach((line: string) => {
-          paragraphs.push(
-            new Paragraph({
-              children: [
-                new TextRun({
-                  text: line.length > 0 ? line : " ",
-                  font: options.codeFont,
-                  size: options.codeFontSize,
-                }),
-              ],
-              shading: { fill: "F5F5F5" },
-            })
-          );
-        });
-        paragraphs.push(new Paragraph({ children: [] }));
-        break;
-      }
-
-      case "list": {
-        token.items?.forEach((item: MarkdownToken) => {
-          const runs = parseInlineTokens(item.tokens?.[0]?.tokens ?? [], options);
-          paragraphs.push(
-            new Paragraph({
-              children: runs.length > 0 ? runs : [new TextRun("")],
-              bullet: { level: 0 },
-              spacing: { after: 80 },
-            })
-          );
-        });
-        break;
-      }
-
-      case "blockquote": {
-        const runs = parseInlineTokens(token.tokens?.[0]?.tokens ?? [], options);
-        paragraphs.push(
-          new Paragraph({
-            children: runs.length > 0 ? runs : [new TextRun("")],
-            indent: { left: 720 },
-            border: { left: { style: "single", size: 12, color: "CCCCCC" } },
-            spacing: { after: 200 },
-          })
-        );
-        break;
-      }
-
-      case "hr": {
-        paragraphs.push(
-          new Paragraph({
-            children: [new TextRun({ text: "─".repeat(50), color: "CCCCCC" })],
-            spacing: { before: 200, after: 200 },
-          })
-        );
-        break;
-      }
-
-      case "space": {
-        paragraphs.push(new Paragraph({ children: [] }));
-        break;
-      }
-    }
-  }
-
-  return paragraphs;
-}
-
-/**
- * 解析行内 Token 为 TextRun
- */
-function parseInlineTokens(tokens: MarkdownToken[], options: Required<DocxOptions>): TextRun[] {
-  const runs: TextRun[] = [];
-
-  for (const token of tokens) {
-    switch (token.type) {
-      case "text":
-        runs.push(new TextRun(token.raw ?? token.text ?? ""));
-        break;
-
-      case "strong":
-        runs.push(new TextRun({ text: token.text, bold: true }));
-        break;
-
-      case "em":
-        runs.push(new TextRun({ text: token.text, italics: true }));
-        break;
-
-      case "codespan":
-        runs.push(
-          new TextRun({
-            text: token.text,
-            font: options.codeFont,
-            shading: { fill: "F0F0F0" },
-          })
-        );
-        break;
-
-      case "link":
-        runs.push(
-          new TextRun({
-            text: token.text,
-            color: "0066CC",
-            underline: {},
-          })
-        );
-        break;
-
-      case "br":
-        runs.push(new TextRun({ text: "", break: 1 }));
-        break;
-
-      default:
-        runs.push(new TextRun(token.raw ?? ""));
-    }
-  }
-
-  return runs;
-}
-
-/**
- * 获取标题级别
- */
-function getHeadingLevel(depth: number): typeof HeadingLevel[keyof typeof HeadingLevel] | undefined {
-  const levels = [HeadingLevel.HEADING_1, HeadingLevel.HEADING_2, HeadingLevel.HEADING_3, HeadingLevel.HEADING_4, HeadingLevel.HEADING_5, HeadingLevel.HEADING_6];
-  return levels[depth - 1];
-}
-
-/**
- * 规范化文件名
- */
-function normalizeFilename(filename: string, extension: string): string {
-  return filename.replace(/\.md$/i, "") + extension;
-}
-
-/**
- * 触发 Blob 下载
- */
-function downloadBlob(blob: Blob, filename: string): void {
-  const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = filename;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-  URL.revokeObjectURL(url);
-}
\ No newline at end of file
diff --git a/frontend/src/core/utils/markdown-download/index.ts b/frontend/src/core/utils/markdown-download/index.ts
deleted file mode 100644
index 7b3c158c..00000000
--- a/frontend/src/core/utils/markdown-download/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Markdown 文档下载工具
- *
- * @description
- * 将 Markdown 内容转换为 DOCX 或 PDF 格式并下载。
- * 可在任何 React + TypeScript 项目中使用。
- *
- * @example
- * ```tsx
- * // React Hook 使用方式
- * import { useMarkdownDownload } from "./markdown-download";
- *
- * function MyComponent() {
- *   const { downloadAsDocx, downloadAsPdf, isDownloading } = useMarkdownDownload();
- *
- *   return (
- *     <div>
- *       <button onClick={() => downloadAsDocx("# Hello", "doc")}>
- *         Download DOCX
- *       </button>
- *       <button onClick={() => downloadAsPdf("# Hello", "doc")}>
- *         Download PDF
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- *
- * @example
- * ```ts
- * // 非 React 环境直接使用转换函数
- * import { downloadMarkdownAsDocx, downloadMarkdownAsPdf } from "./markdown-download";
- *
- * await downloadMarkdownAsDocx("# Hello World", "document");
- * await downloadMarkdownAsPdf("# Hello World", "document", { format: "a4" });
- * ```
- */
-
-// React Hook
-export { useMarkdownDownload } from "./use-markdown-download";
-
-// 类型
-export type { UseMarkdownDownloadOptions, UseMarkdownDownloadReturn } from "./use-markdown-download";
-export type { PdfOptions, DocxOptions } from "./converter";
-
-// 转换函数（供非 React 环境使用）
-export { downloadMarkdownAsDocx, downloadMarkdownAsPdf } from "./converter";
\ No newline at end of file
diff --git a/frontend/src/core/utils/markdown-download/use-markdown-download.ts b/frontend/src/core/utils/markdown-download/use-markdown-download.ts
deleted file mode 100644
index d95b2172..00000000
--- a/frontend/src/core/utils/markdown-download/use-markdown-download.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import { useCallback, useState } from "react";
-
-import { downloadMarkdownAsDocx, downloadMarkdownAsPdf } from "./converter";
-
-/**
- * Markdown 下载 Hook 配置选项
- */
-export interface UseMarkdownDownloadOptions {
-  /**
-   * 下载开始时的回调
-   */
-  onDownloadStart?: (format: "docx" | "pdf") => void;
-  /**
-   * 下载完成时的回调
-   */
-  onDownloadEnd?: (format: "docx" | "pdf") => void;
-  /**
-   * 下载失败时的回调
-   */
-  onError?: (error: Error, format: "docx" | "pdf") => void;
-}
-
-/**
- * Markdown 下载 Hook 返回值
- */
-export interface UseMarkdownDownloadReturn {
-  /**
-   * 当前下载状态
-   */
-  isDownloading: "docx" | "pdf" | null;
-  /**
-   * 下载为 DOCX
-   */
-  downloadAsDocx: (markdown: string, filename: string) => Promise<void>;
-  /**
-   * 下载为 PDF
-   */
-  downloadAsPdf: (markdown: string, filename: string) => Promise<void>;
-  /**
-   * 是否可以下载（没有正在进行的下载）
-   */
-  canDownload: boolean;
-}
-
-/**
- * Markdown 文档下载 Hook
- *
- * @description
- * 将 Markdown 内容转换为 DOCX 或 PDF 格式并下载。
- * 可在任何 React + TypeScript 项目中使用。
- *
- * @example
- * ```tsx
- * import { useMarkdownDownload } from "./hooks/use-markdown-download";
- *
- * function MyComponent() {
- *   const { downloadAsDocx, downloadAsPdf, isDownloading, canDownload } = useMarkdownDownload({
- *     onError: (error, format) => {
- *       console.error(`Failed to download as ${format}:`, error);
- *     },
- *   });
- *
- *   const handleDownload = () => {
- *     downloadAsDocx("# Hello World", "document");
- *   };
- *
- *   return (
- *     <button onClick={handleDownload} disabled={!canDownload}>
- *       {isDownloading === "docx" ? "Converting..." : "Download DOCX"}
- *     </button>
- *   );
- * }
- * ```
- */
-export function useMarkdownDownload(options: UseMarkdownDownloadOptions = {}): UseMarkdownDownloadReturn {
-  const { onDownloadStart, onDownloadEnd, onError } = options;
-
-  const [isDownloading, setIsDownloading] = useState<"docx" | "pdf" | null>(null);
-
-  const downloadAsDocx = useCallback(
-    async (markdown: string, filename: string) => {
-      if (isDownloading) return;
-
-      setIsDownloading("docx");
-      onDownloadStart?.("docx");
-
-      try {
-        await downloadMarkdownAsDocx(markdown, filename);
-      } catch (error) {
-        onError?.(error instanceof Error ? error : new Error(String(error)), "docx");
-      } finally {
-        setIsDownloading(null);
-        onDownloadEnd?.("docx");
-      }
-    },
-    [isDownloading, onDownloadStart, onDownloadEnd, onError]
-  );
-
-  const downloadAsPdf = useCallback(
-    async (markdown: string, filename: string) => {
-      if (isDownloading) return;
-
-      setIsDownloading("pdf");
-      onDownloadStart?.("pdf");
-
-      try {
-        await downloadMarkdownAsPdf(markdown, filename);
-      } catch (error) {
-        onError?.(error instanceof Error ? error : new Error(String(error)), "pdf");
-      } finally {
-        setIsDownloading(null);
-        onDownloadEnd?.("pdf");
-      }
-    },
-    [isDownloading, onDownloadStart, onDownloadEnd, onError]
-  );
-
-  return {
-    isDownloading,
-    downloadAsDocx,
-    downloadAsPdf,
-    canDownload: isDownloading === null,
-  };
-}
-
-// 导出转换函数，供非 React 环境使用
-export { downloadMarkdownAsDocx, downloadMarkdownAsPdf } from "./converter";
\ No newline at end of file
diff --git a/frontend/src/hooks/use-global-shortcuts.ts b/frontend/src/hooks/use-global-shortcuts.ts
new file mode 100644
index 00000000..f0423582
--- /dev/null
+++ b/frontend/src/hooks/use-global-shortcuts.ts
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+
+type ShortcutAction = () => void;
+
+interface Shortcut {
+  key: string;
+  meta: boolean;
+  shift?: boolean;
+  action: ShortcutAction;
+}
+
+/**
+ * Register global keyboard shortcuts on window.
+ * Shortcuts are suppressed when focus is inside an input, textarea, or
+ * contentEditable element - except for Cmd+K which always fires.
+ */
+export function useGlobalShortcuts(shortcuts: Shortcut[]) {
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      const meta = event.metaKey || event.ctrlKey;
+
+      for (const shortcut of shortcuts) {
+        if (
+          event.key.toLowerCase() === shortcut.key.toLowerCase() &&
+          meta === shortcut.meta &&
+          (shortcut.shift ?? false) === event.shiftKey
+        ) {
+          // Allow Cmd+K even in inputs (standard command palette behavior)
+          if (shortcut.key !== "k") {
+            const target = event.target as HTMLElement;
+            const tag = target.tagName;
+            if (
+              tag === "INPUT" ||
+              tag === "TEXTAREA" ||
+              target.isContentEditable
+            ) {
+              continue;
+            }
+          }
+
+          event.preventDefault();
+          shortcut.action();
+          return;
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [shortcuts]);
+}
diff --git a/frontend/src/hooks/use-iframe-skill.ts b/frontend/src/hooks/use-iframe-skill.ts
deleted file mode 100644
index 63cd5cee..00000000
--- a/frontend/src/hooks/use-iframe-skill.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useSearchParams } from "next/navigation";
-import { useState, useEffect, useCallback } from "react";
-
-import {
-  POST_MESSAGE_TYPES,
-  RECEIVE_MESSAGE_TYPES,
-  sendToParent,
-  type SelectedSkillMessage,
-} from "@/core/iframe-messages";
-
-// Skill 数据类型
-interface SkillData {
-  skill_id: string;
-  title: string;
-}
-
-// Hook 返回类型
-interface UseIframeSkillReturn {
-  selectedSkill: SkillData | null;
-  sendSelectSkill: (skill_id: string) => void;
-  openSkillDialog: () => void;
-  clearSkill: () => void;
-}
-
-export function useIframeSkill(): UseIframeSkillReturn {
-  const searchParams = useSearchParams();
-  const skillIdFromQuery = searchParams.get("skill_id");
-  const titleFromQuery = searchParams.get("title");
-
-  const [selectedSkill, setSelectedSkill] = useState<SkillData | null>(null);
-
-  // 1. 监听 query 参数变化
-  useEffect(() => {
-    if (skillIdFromQuery && titleFromQuery) {
-      setSelectedSkill({ skill_id: skillIdFromQuery, title: titleFromQuery });
-    }
-  }, [skillIdFromQuery, titleFromQuery]);
-
-  // 2. 监听宿主页 postMessage
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === RECEIVE_MESSAGE_TYPES.SELECTED_SKILL) {
-        const { id, title } = event.data as SelectedSkillMessage;
-        setSelectedSkill({ skill_id: String(id), title });
-      }
-    };
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, []);
-
-  // 发送选择预定义 skill
-  const sendSelectSkill = useCallback((skill_id: string) => {
-    const message = { type: POST_MESSAGE_TYPES.SELECT_SKILL, skill_id };
-    console.log("[useIframeSkill] sendSelectSkill:", message);
-    sendToParent(message);
-  }, []);
-
-  // 打开 skill 选择对话框
-  const openSkillDialog = useCallback(() => {
-    const message = {
-      type: POST_MESSAGE_TYPES.OPEN_SKILL_DIALOG,
-      openSkillDialog: true,
-    } as const;
-    console.log("[useIframeSkill] openSkillDialog:", message);
-    sendToParent(message);
-  }, []);
-
-  // 清除选中并发送 skill_id=0 给主页
-  const clearSkill = useCallback(() => {
-    setSelectedSkill(null);
-    // 发送 skill_id=0 给主页，通知取消选择
-    const message = { type: POST_MESSAGE_TYPES.SELECT_SKILL, skill_id: "0" };
-    console.log("[useIframeSkill] clearSkill, sending skill_id=0:", message);
-    sendToParent(message);
-  }, []);
-
-  return { selectedSkill, sendSelectSkill, openSkillDialog, clearSkill };
-}
diff --git a/frontend/src/hooks/use-mobile.ts b/frontend/src/hooks/use-mobile.ts
index a93d5839..2b0fe1df 100644
--- a/frontend/src/hooks/use-mobile.ts
+++ b/frontend/src/hooks/use-mobile.ts
@@ -1,21 +1,19 @@
-import * as React from "react";
+import * as React from "react"
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined,
-  );
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-    mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
-  }, []);
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
 
-  return !!isMobile;
+  return !!isMobile
 }
diff --git a/frontend/src/hooks/use-selected-skill-listener.ts b/frontend/src/hooks/use-selected-skill-listener.ts
deleted file mode 100644
index fc20d66d..00000000
--- a/frontend/src/hooks/use-selected-skill-listener.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import { useSearchParams } from "next/navigation";
-import { useEffect, useCallback, useState, useRef } from "react";
-import { toast } from "sonner";
-
-import { bootstrapRemoteSkill } from "@/core/skills/api";
-
-/** 宿主页发过来的 selectedSkill 消息结构 */
-interface SelectedSkillMessage {
-  type: "selectedSkill";
-  id: number | string;
-  title: string;
-}
-
-/** 技能基础数据 */
-interface SkillData {
-  skill_id: string;
-  title: string;
-}
-
-/** 错误信息状态 */
-interface SkillError {
-  title: string;
-  message: string;
-}
-
-interface UseSelectedSkillListenerOptions {
-  /** 当前会话 thread_id，用于调用 bootstrapRemoteSkill */
-  threadId: string | null;
-}
-
-interface UseSelectedSkillListenerReturn {
-  /** 当前选中的技能数据（用于 UI 展示，如 Badge） */
-  selectedSkill: SkillData | null;
-  /** 当前错误信息，不为 null 时展示 DevDialog */
-  skillError: SkillError | null;
-  /** 清除错误信息（关闭 DevDialog 时调用） */
-  clearSkillError: () => void;
-  /** 是否正在加载（处理 skill 中） */
-  isBootstrapping: boolean;
-}
-
-/**
- * 监听宿主页通过 postMessage 发送的 selectedSkill 消息或 URL 中的 skill 参数，
- * 收到后自动调用 bootstrapRemoteSkill 接口：
- * - 成功：使用 toast 提示
- * - 失败：返回 skillError 供 DevDialog 显示
- */
-export function useSelectedSkillListener({
-  threadId,
-}: UseSelectedSkillListenerOptions): UseSelectedSkillListenerReturn {
-  const searchParams = useSearchParams();
-  const [selectedSkill, setSelectedSkill] = useState<SkillData | null>(null);
-  const [skillError, setSkillError] = useState<SkillError | null>(null);
-  const [isBootstrapping, setIsBootstrapping] = useState(false);
-
-  const isFirstLoadRef = useRef(false);
-  const skillBootstrappedKeyRef = useRef<string | null>(null);
-
-  const performBootstrap = useCallback(
-    async (id: number | string, title: string) => {
-      if (!threadId) return;
-
-      const languageTypeRaw =
-        searchParams.get("languageType")?.trim() ??
-        searchParams.get("language_type")?.trim();
-      const languageType = languageTypeRaw ? Number(languageTypeRaw) : 0;
-
-      const initKey = `${threadId}:${id}:${languageType}`;
-      if (skillBootstrappedKeyRef.current === initKey) {
-        return;
-      }
-
-      console.log(
-        `[useSelectedSkillListener] 开始初始化技能: ${title} (${id})`,
-      );
-      setIsBootstrapping(true);
-      toast.loading(`正在加载技能「${title}」...`, { id: "skill-bootstrap" });
-
-      try {
-        const result = await bootstrapRemoteSkill({
-          thread_id: threadId,
-          content_id: Number(id),
-          language_type: languageType,
-          target_dir: "/mnt/user-data/uploads/skill",
-          clear_target: true,
-        });
-
-        toast.dismiss("skill-bootstrap");
-
-        if (result.success) {
-          skillBootstrappedKeyRef.current = initKey;
-          toast.success(`技能「${title}」加载成功`, {
-            description:
-              result.message || `已创建 ${result.created_files} 个文件`,
-            duration: 4000,
-          });
-        } else {
-          setSkillError({
-            title: `技能「${title}」加载失败`,
-            message: result.message || "未知错误",
-          });
-        }
-      } catch (err) {
-        toast.dismiss("skill-bootstrap");
-        const message = err instanceof Error ? err.message : "网络请求失败";
-        setSkillError({ title: `技能「${title}」加载出错`, message });
-      } finally {
-        setIsBootstrapping(false);
-      }
-    },
-    [threadId, searchParams],
-  );
-
-  // 1. URL 初始化集成
-  useEffect(() => {
-    if (!threadId || isFirstLoadRef.current) return;
-
-    const skillIdFromQuery = searchParams.get("skill_id");
-    const titleFromQuery = searchParams.get("title");
-    if (skillIdFromQuery && titleFromQuery) {
-      isFirstLoadRef.current = true;
-      setSelectedSkill({ skill_id: skillIdFromQuery, title: titleFromQuery });
-      void performBootstrap(skillIdFromQuery, titleFromQuery);
-    }
-  }, [threadId, searchParams, performBootstrap]);
-
-  const handleMessage = useCallback(
-    (event: MessageEvent) => {
-      const data = event.data as SelectedSkillMessage;
-      if (data?.type !== "selectedSkill") return;
-
-      const { id, title } = data;
-      console.log(
-        "[useSelectedSkillListener] 收到 postMessage selectedSkill:",
-        data,
-      );
-
-      setSelectedSkill({ skill_id: String(id), title });
-      void performBootstrap(id, title);
-    },
-    [performBootstrap],
-  );
-
-  useEffect(() => {
-    window.addEventListener("message", handleMessage);
-    return () => window.removeEventListener("message", handleMessage);
-  }, [handleMessage]);
-
-  const clearSkillError = useCallback(() => setSkillError(null), []);
-
-  return { selectedSkill, skillError, clearSkillError, isBootstrapping };
-}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index db85669d..f8ff63a2 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -10,72 +10,3 @@ export const externalLinkClass =
   "text-primary underline underline-offset-2 hover:no-underline";
 /** Link style without underline by default (e.g. for streaming/loading). */
 export const externalLinkClassNoUnderline = "text-primary hover:underline";
-
-/**
- * Copy text to clipboard, using postMessage when in iframe.
- * In iframe context, sends message to parent window to handle clipboard operation.
- */
-export async function copyToClipboard(text: string): Promise<void> {
-  const isInIframe = window.self !== window.top;
-  const message = {
-    type: "copyToClipboard",
-    text,
-  };
-
-  if (isInIframe && window.parent) {
-    // Request parent window to copy
-    window.parent.postMessage(message, "*");
-    console.log("[copyToClipboard] iframe mode → postMessage to parent", message);
-    return;
-  }
-
-  // Direct clipboard access when not in iframe
-  console.log("[copyToClipboard] direct mode", message);
-  await navigator.clipboard.writeText(text);
-}
-
-/**
- * 计算字符串的视觉宽度（中文算2，英文算1）
- */
-export function getVisualWidth(text: string): number {
-  let width = 0;
-  for (const char of text) {
-    // 中文字符范围：\u4e00-\u9fff（基本汉字）
-    width += /[\u4e00-\u9fff]/.test(char) ? 2 : 1;
-  }
-  return width;
-}
-
-/**
- * 截断字符串中间部分，保留开头和结尾
- * 例如: "very-long-file-name.txt" -> "very-lon...me.txt"
- * 中文按视觉宽度计算（中文算2，英文算1）
- */
-export function truncateMiddle(text: string, maxVisualWidth: number = 30): string {
-  const visualWidth = getVisualWidth(text);
-  if (visualWidth <= maxVisualWidth) return text;
-
-  const startWidth = Math.ceil(maxVisualWidth * 0.6);
-  const endWidth = Math.floor(maxVisualWidth * 0.4) - 3; // -3 for "..."
-
-  let startPart = "";
-  let currentWidth = 0;
-  for (const char of text) {
-    const charWidth = /[\u4e00-\u9fff]/.test(char) ? 2 : 1;
-    if (currentWidth + charWidth > startWidth) break;
-    startPart += char;
-    currentWidth += charWidth;
-  }
-
-  let endPart = "";
-  currentWidth = 0;
-  for (let i = text.length - 1; i >= 0; i--) {
-    const char = text[i]!;
-    const charWidth = /[\u4e00-\u9fff]/.test(char) ? 2 : 1;
-    if (currentWidth + charWidth > endWidth) break;
-    endPart = char + endPart;
-    currentWidth += charWidth;
-  }
-
-  return `${startPart}...${endPart}`;
-}
diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index 593623c9..065d3264 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -72,9 +72,8 @@
 
 @theme {
   --font-sans:
-    "Microsoft YaHei", "微软雅黑", var(--font-geist-sans), ui-sans-serif,
-    system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol", "Noto Color Emoji";
+    ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   --animate-fade-in: fade-in 1.1s;
   @keyframes fade-in {
@@ -186,7 +185,6 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
-  --color-tooltip-background: var(--tooltip-background);
   --animate-aurora: aurora 8s ease-in-out infinite alternate;
   @keyframes aurora {
     0% {
@@ -226,25 +224,19 @@
 
 :root {
   --radius: 0.625rem;
-  --background: #f9f8fa;
+  --background: oklch(0.9855 0.0098 87.47);
   --foreground: oklch(0.145 0 0);
-  /* --foreground: #00000066; */
-  /* --card: oklch(1 0.0098 87.47); */
-  --card: #ffffff;
+  --card: oklch(1 0.0098 87.47);
   --card-foreground: oklch(0.145 0 0);
-  /* --popover: oklch(1 0.0098 87.47); */
-  --popover: #ffffff;
+  --popover: oklch(1 0.0098 87.47);
   --popover-foreground: oklch(0.145 0 0);
   --primary: oklch(0 0 0);
   --primary-foreground: oklch(0.985 0 0);
-  /* --secondary: oklch(0.9455 0.0098 87.47); */
-  --secondary: #1500331a;
+  --secondary: oklch(0.9455 0.0098 87.47);
   --secondary-foreground: oklch(0.205 0 0);
-  /* --muted: oklch(0.97 0.0098 87.47); */
-  --muted: #1500331a;
+  --muted: oklch(0.97 0.0098 87.47);
   --muted-foreground: oklch(0.556 0 0);
-  /* --accent: oklch(0.94 0.0098 87.47); */
-  --accent: #1500331a;
+  --accent: oklch(0.94 0.0098 87.47);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0.0098 87.47);
@@ -263,7 +255,6 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0.0098 87.47);
   --sidebar-ring: oklch(0.708 0 0);
-  --tooltip-background: #00000066;
 }
 
 .dark {
@@ -298,7 +289,6 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
-  --tooltip-background: oklch(0.85 0 0);
   font-weight: 300;
 }
 
@@ -307,7 +297,7 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply text-foreground;
+    @apply bg-background text-foreground;
   }
 
   .container-md {
@@ -394,62 +384,9 @@
   }
 }
 
-/* Hide scrollbar but keep scroll behavior */
-* {
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE and Edge */
-}
-
-*::-webkit-scrollbar {
-  display: none; /* Chrome, Safari, Opera */
-}
-
 :root {
   --container-width-xs: calc(var(--spacing) * 72);
   --container-width-sm: calc(var(--spacing) * 144);
   --container-width-md: calc(var(--spacing) * 204);
   --container-width-lg: calc(var(--spacing) * 256);
 }
-
-/* ========================================
-   Streamdown Markdown Styles
-   使用 data-streamdown 属性选择器统一定义
-   支持 zoom-scale CSS 变量进行缩放
-   ======================================== */
-
-/* 缩放变量，默认为 1 (100%) */
-:root {
-  --zoom-scale: 1;
-}
-
-/* p标签没有标识data-streamdown，暂时只能这么写 */
-p {
-  font-size: calc(14px * var(--zoom-scale));
-}
-
-/* 列表项 - 14px */
-[data-streamdown="list-item"] {
-  font-size: calc(14px * var(--zoom-scale));
-  padding-top: calc(4px * var(--zoom-scale));
-  padding-bottom: calc(4px * var(--zoom-scale));
-}
-
-/* 一级标题 - 20px */
-[data-streamdown="heading-1"] {
-  font-size: calc(20px * var(--zoom-scale));
-}
-
-/* 二三级标题 - 16px */
-[data-streamdown="heading-2"],
-[data-streamdown="heading-3"] {
-  font-size: calc(16px * var(--zoom-scale));
-}
-
-/* 二三级标题 - 16px */
-[data-streamdown="code-block"] pre {
-  font-size: calc(16px * var(--zoom-scale));
-}
-
-.cm-line {
-  font-size: calc(14px * var(--zoom-scale));
-}