diff --git a/.github/drone.yml b/.github/drone.yml
deleted file mode 100644
index 5565b2281..000000000
--- a/.github/drone.yml
+++ /dev/null
@@ -1,302 +0,0 @@
-# ============================================================
-# Clawith CI/CD Pipeline
-# 基于 Drone CI 的自动化构建、本地部署测试和升级测试
-#
-# 流程:
-#   1. 代码克隆 (获取完整历史和 tags)
-#   2. 构建 Docker 镜像
-#   3. 本地部署测试 (直接利用本地 docker socket 和 docker-compose.ci.yml)
-#   4. 本地升级测试 (测试旧版到新版的迁移)
-#   5. 打包传输到服务器 (可选)
-# ============================================================
-kind: pipeline
-type: docker
-name: build-and-test
-
-workspace:
-  path: /drone/src
-
-clone:
-  disable: true
-
-steps:
-  # --------------------------------------------------------
-  # Step 1: 代码克隆 (获取完整历史和 tags)
-  # --------------------------------------------------------
-  - name: clone
-    image: alpine/git
-    pull: if-not-exists
-    environment:
-      http_proxy:
-        from_secret: PROXY
-      https_proxy:
-        from_secret: PROXY
-    commands:
-      - git config --global core.compression 0
-      - git config --global http.postBuffer 524288000
-      - git clone --no-single-branch https://github.com/dataelement/Clawith.git .
-      # 将 shallow clone 转换为完整克隆，获取完整 commit 历史
-      - git fetch --unshallow --tags || git fetch --tags
-      - git checkout $DRONE_COMMIT
-      - echo "当前 commit $(git log --oneline -1)"
-      - echo "上一个 tag $(git describe --tags --abbrev=0 2>/dev/null || echo '无 tag')"
-
-  # --------------------------------------------------------
-  # Step 2: 构建新旧版本 Docker 镜像
-  # --------------------------------------------------------
-  - name: build-images
-    image: docker:24.0.6
-    pull: if-not-exists
-    privileged: true
-    volumes:
-      - name: docker-socket
-        path: /var/run/docker.sock
-    environment:
-      http_proxy:
-        from_secret: PROXY
-      https_proxy:
-        from_secret: PROXY
-    commands:
-      - echo "========================================"
-      - echo "开始构建 Docker 镜像"
-      - echo "事件 $DRONE_BUILD_EVENT"
-      - echo "目标分支 $DRONE_BRANCH"
-      - echo "提交 $DRONE_COMMIT_SHORT"
-      - echo "========================================"
-
-      # 获取上一个 tag
-      - PREV_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
-      - |
-        if [ -z "$PREV_TAG" ]; then
-          echo "警告: 未找到历史 tag，升级测试将被跳过"
-          echo "SKIP_UPGRADE_TEST=true" > .env.drone
-          # 仅构建当前版本
-          docker build -t clawith-backend:new --build-arg CLAWITH_PIP_INDEX_URL=https://pypi.tuna.tsinghua.edu.cn/simple -f backend/Dockerfile ./backend
-          docker build -t clawith-frontend:new -f frontend/Dockerfile ./frontend
-          echo "当前版本镜像构建完成"
-          exit 0
-        fi
-      - echo "上一个 tag $PREV_TAG"
-      - |
-        echo "SKIP_UPGRADE_TEST=false" > .env.drone
-
-      # --- 构建旧版本镜像 ---
-      - echo "--- 构建旧版本镜像 ($PREV_TAG) ---"
-      - git checkout $PREV_TAG
-      - docker build -t clawith-backend:old --build-arg CLAWITH_PIP_INDEX_URL=https://pypi.tuna.tsinghua.edu.cn/simple -f backend/Dockerfile ./backend
-      - docker build -t clawith-frontend:old -f frontend/Dockerfile ./frontend
-      - echo "旧版本镜像构建完成"
-
-      # --- 构建当前版本镜像 ---
-      - echo "--- 构建当前版本镜像 ($DRONE_COMMIT_SHORT) ---"
-      - git checkout $DRONE_COMMIT
-      - docker build -t clawith-backend:new --build-arg CLAWITH_PIP_INDEX_URL=https://pypi.tuna.tsinghua.edu.cn/simple -f backend/Dockerfile ./backend
-      - docker build -t clawith-frontend:new -f frontend/Dockerfile ./frontend
-      - echo "当前版本镜像构建完成"
-
-  # --------------------------------------------------------
-  # Step 3: 本地部署测试 (Deploy Test)
-  # --------------------------------------------------------
-  - name: local-deploy-test
-    image: docker:24.0.6
-    privileged: true
-    volumes:
-      - name: docker-socket
-        path: /var/run/docker.sock
-    commands:
-      - apk add --no-cache docker-cli-compose curl bash
-      - echo "========================================"
-      - echo "本地部署测试 全新部署验证"
-      - echo "========================================"
-      - docker compose -f docker-compose.ci.yml down -v --remove-orphans 2>/dev/null || true
-      - echo "启动全部服务 (postgres/redis/backend/frontend)..."
-      - IMAGE_TAG=new docker compose -f docker-compose.ci.yml up -d --no-build
-      - sleep 5
-      
-      # 等待基础设施就绪
-      - echo "等待 postgres 和 redis 健康检查通过..."
-      - timeout 30s bash -c 'until [ "$(docker inspect --format="{{.State.Health.Status}}" $(docker compose -f docker-compose.ci.yml ps -q postgres) 2>/dev/null)" = "healthy" ]; do sleep 2; done' || (echo "postgres 启动超时" && docker compose -f docker-compose.ci.yml logs postgres && exit 1)
-      - timeout 30s bash -c 'until [ "$(docker inspect --format="{{.State.Health.Status}}" $(docker compose -f docker-compose.ci.yml ps -q redis) 2>/dev/null)" = "healthy" ]; do sleep 2; done' || (echo "redis 启动超时" && docker compose -f docker-compose.ci.yml logs redis && exit 1)
-      
-      # 核心验证: backend 启动
-      - echo "等待 backend 启动 (最多 90 秒)..."
-      - timeout 90s bash -c 'until docker compose -f docker-compose.ci.yml logs --tail=200 backend 2>&1 | grep -q "Application startup complete"; do sleep 3; done'
-      - RESULT=$?
-      - |
-        if [ $RESULT -ne 0 ]; then
-          echo "❌ 部署测试失败: backend 启动超时"
-          docker compose -f docker-compose.ci.yml logs --tail=100 backend
-          exit 1
-        fi
-        
-      # 检查迁移是否失败
-      - echo "检查数据库迁移状态..."
-      - |
-        MIGRATION_LOG=$(docker compose -f docker-compose.ci.yml logs --tail=200 backend 2>&1)
-        if echo "$MIGRATION_LOG" | grep -Eqi "migration.*FAIL|alembic.*error"; then
-          echo "❌ 部署测试失败: 检测到数据库迁移失败"
-          echo "$MIGRATION_LOG" | grep -Ei "migration|alembic|error|FAIL"
-          exit 1
-        fi
-        
-      # 验证 health endpoint (通过 docker compose exec 直接在容器内 curl)
-      - echo "验证 health endpoint..."
-      - timeout 10s bash -c 'until docker compose -f docker-compose.ci.yml exec -T backend curl -sf http://localhost:8000/api/health > /dev/null 2>&1; do sleep 2; done' || (echo "❌ health endpoint 不可达" && exit 1)
-      
-      # 清理环境
-      - echo "清理测试环境..."
-      - docker compose -f docker-compose.ci.yml down -v --remove-orphans
-      - echo "✅ 本地部署测试通过"
-
-  # --------------------------------------------------------
-  # Step 4: 本地升级测试 (Upgrade Test)
-  # --------------------------------------------------------
-  - name: local-upgrade-test
-    image: docker:24.0.6
-    privileged: true
-    volumes:
-      - name: docker-socket
-        path: /var/run/docker.sock
-    commands:
-      - apk add --no-cache docker-cli-compose curl bash
-      - echo "========================================"
-      - echo "本地升级测试 旧版 → 新版数据库迁移验证"
-      - echo "========================================"
-      - |
-        if [ -f ".env.drone" ] && grep -q "SKIP_UPGRADE_TEST=true" ".env.drone"; then
-          echo "⚠️ 未找到历史 tag，跳过升级测试"
-          exit 0
-        fi
-        
-      - docker compose -f docker-compose.ci.yml down -v --remove-orphans 2>/dev/null || true
-      - docker rm -f backend-upgrade-test 2>/dev/null || true
-
-      # 阶段 1: 部署旧版本
-      - echo "--- 阶段 1: 部署旧版本 ---"
-      - IMAGE_TAG=old docker compose -f docker-compose.ci.yml up -d postgres redis
-      - sleep 5
-      - timeout 30s bash -c 'until [ "$(docker inspect --format="{{.State.Health.Status}}" $(docker compose -f docker-compose.ci.yml ps -q postgres) 2>/dev/null)" = "healthy" ]; do sleep 2; done'
-      - timeout 30s bash -c 'until [ "$(docker inspect --format="{{.State.Health.Status}}" $(docker compose -f docker-compose.ci.yml ps -q redis) 2>/dev/null)" = "healthy" ]; do sleep 2; done'
-      
-      # 启动旧版 backend
-      - |
-        docker run -d --name backend-upgrade-test \
-          --network clawith_network \
-          -e DATABASE_URL=postgresql+asyncpg://clawith:clawith@postgres:5432/clawith \
-          -e REDIS_URL=redis://redis:6379/0 \
-          -e AGENT_DATA_DIR=/data/agents \
-          -e AGENT_TEMPLATE_DIR=/app/agent_template \
-          -e SECRET_KEY=ci-test-secret \
-          -e JWT_SECRET_KEY=ci-test-jwt-secret \
-          -e CORS_ORIGINS='["*"]' \
-          clawith-backend:old
-
-      - timeout 90s bash -c 'until docker logs backend-upgrade-test 2>&1 | grep -q "Application startup complete"; do sleep 3; done'
-      - RESULT=$?
-      - |
-        if [ $RESULT -ne 0 ]; then
-          echo "❌ 升级测试失败: 旧版 backend 启动超时"
-          docker logs --tail=100 backend-upgrade-test
-          exit 1
-        fi
-      
-      - docker exec backend-upgrade-test alembic history 2>&1 | head -5 || true
-      - docker stop backend-upgrade-test
-      - docker rm backend-upgrade-test
-
-      # 阶段 2: 升级到新版本
-      - echo "--- 阶段 2: 升级到新版本 ---"
-      - |
-        docker run -d --name backend-upgrade-test \
-          --network clawith_network \
-          -e DATABASE_URL=postgresql+asyncpg://clawith:clawith@postgres:5432/clawith \
-          -e REDIS_URL=redis://redis:6379/0 \
-          -e AGENT_DATA_DIR=/data/agents \
-          -e AGENT_TEMPLATE_DIR=/app/agent_template \
-          -e SECRET_KEY=ci-test-secret \
-          -e JWT_SECRET_KEY=ci-test-jwt-secret \
-          -e CORS_ORIGINS='["*"]' \
-          clawith-backend:new
-
-      - timeout 120s bash -c 'until docker logs backend-upgrade-test 2>&1 | grep -q "Application startup complete"; do sleep 3; done'
-      - RESULT=$?
-      - |
-        if [ $RESULT -ne 0 ]; then
-          echo "❌ 升级测试失败: 新版 backend 启动超时"
-          docker logs --tail=200 backend-upgrade-test
-          exit 1
-        fi
-
-      - |
-        UPGRADE_LOG=$(docker logs --tail=300 backend-upgrade-test 2>&1)
-        if echo "$UPGRADE_LOG" | grep -Eqi "migration.*FAIL|alembic.*error|WARNING.*migration"; then
-          echo "❌ 升级测试失败: 检测到数据库迁移异常"
-          echo "$UPGRADE_LOG" | grep -Ei "migration|alembic|error|FAIL|WARNING"
-          exit 1
-        fi
-
-      - timeout 10s bash -c 'until docker exec backend-upgrade-test curl -sf http://localhost:8000/api/health > /dev/null 2>&1; do sleep 2; done' || (echo "❌ health endpoint 不可达" && exit 1)
-
-      - docker exec backend-upgrade-test alembic history 2>&1 | head -5 || true
-      - docker exec backend-upgrade-test alembic current 2>&1 || true
-
-      - docker rm -f backend-upgrade-test
-      - docker compose -f docker-compose.ci.yml down -v --remove-orphans
-      - echo "✅ 本地升级测试通过"
-
-  # --------------------------------------------------------
-  # Step 5: (可选) 导出镜像并传输到私有服务器
-  # 只有在部署测试通过后才会执行到这一步
-  # --------------------------------------------------------
-  - name: save-images
-    image: docker:24.0.6
-    privileged: true
-    volumes:
-      - name: docker-socket
-        path: /var/run/docker.sock
-    commands:
-      - echo "测试全部通过，开始导出镜像文件..."
-      - docker save -o clawith-backend-new.tar clawith-backend:new
-      - docker save -o clawith-frontend-new.tar clawith-frontend:new
-      - |
-        if [ -f ".env.drone" ] && grep -q "SKIP_UPGRADE_TEST=false" ".env.drone"; then
-          docker save -o clawith-backend-old.tar clawith-backend:old
-          docker save -o clawith-frontend-old.tar clawith-frontend:old
-        fi
-      - chmod 644 *.tar
-      - ls -lh *.tar
-
-  - name: scp-images
-    image: appleboy/drone-scp
-    pull: if-not-exists
-    settings:
-      host:
-        from_secret: PRIVATE_SERVER_IP
-      username: root
-      password:
-        from_secret: sshpwd
-      port: 22
-      command_timeout: 15m
-      target: /opt/server/clawith-ci/
-      source:
-        - clawith-backend-new.tar
-        - clawith-frontend-new.tar
-        - clawith-backend-old.tar
-        - clawith-frontend-old.tar
-        - docker-compose.ci.yml
-        - .env.drone
-      rm: false
-
-trigger:
-  branch:
-    - main
-    - release
-    - feat-devops
-  event:
-    - push
-    - pull_request
-
-volumes:
-  - name: docker-socket
-    host:
-      path: /var/run/docker.sock
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 000000000..6cf93796c
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,110 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.event_name }}-${{ github.event.pull_request.number || github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  backend:
+    name: Backend
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:15-alpine
+        env:
+          POSTGRES_DB: clawith
+          POSTGRES_USER: clawith
+          POSTGRES_PASSWORD: clawith
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd "pg_isready -U clawith -d clawith"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis:7-alpine
+        ports:
+          - 6379:6379
+        options: >-
+          --health-cmd "redis-cli ping"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+    env:
+      DATABASE_URL: postgresql+asyncpg://clawith:clawith@127.0.0.1:5432/clawith
+      REDIS_URL: redis://127.0.0.1:6379/0
+      AGENT_DATA_DIR: ${{ github.workspace }}/backend/agent_data
+      AGENT_TEMPLATE_DIR: ${{ github.workspace }}/backend/agent_templates
+      SECRET_KEY: ci-secret-key
+      JWT_SECRET_KEY: ci-jwt-secret
+      PUBLIC_BASE_URL: http://localhost:8000
+    defaults:
+      run:
+        working-directory: backend
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Python 3.12
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+
+      - name: Install backend dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -e '.[dev]'
+
+      - name: Run Ruff
+        run: python -m ruff check app tests
+
+      - name: Run Alembic upgrade
+        run: alembic upgrade head
+
+      - name: Check Alembic current revision
+        run: alembic current
+
+      - name: Run pytest
+        run: python -m pytest tests -q
+
+      - name: Validate deploy script syntax
+        working-directory: ${{ github.workspace }}
+        run: bash -n scripts/deploy/deploy_from_github_actions.sh
+
+  frontend:
+    name: Frontend
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Run frontend tests
+        run: npm test
+
+      - name: Build frontend
+        run: npm run build
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 000000000..20163dc29
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,97 @@
+name: Deploy Production
+
+on:
+  workflow_run:
+    workflows: ["CI"]
+    branches: [main]
+    types: [completed]
+
+permissions:
+  contents: read
+
+concurrency:
+  group: production-deploy
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    environment: production
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.workflow_run.head_sha }}
+          fetch-depth: 0
+
+      - name: Confirm workflow_run SHA is still current on origin/main
+        id: freshness
+        env:
+          DEPLOY_SHA: ${{ github.event.workflow_run.head_sha }}
+        run: |
+          set -euo pipefail
+          : "${DEPLOY_SHA:?DEPLOY_SHA is required}"
+
+          git fetch --no-tags origin main
+          MAIN_HEAD="$(git rev-parse FETCH_HEAD)"
+
+          if [[ "$DEPLOY_SHA" != "$MAIN_HEAD" ]]; then
+            echo "Skipping stale deploy candidate: workflow_run SHA $DEPLOY_SHA is behind current origin/main $MAIN_HEAD" >&2
+            echo "proceed=false" >> "$GITHUB_OUTPUT"
+            exit 0
+          fi
+
+          echo "proceed=true" >> "$GITHUB_OUTPUT"
+
+      - name: Configure SSH
+        if: ${{ steps.freshness.outputs.proceed == 'true' }}
+        env:
+          SSH_HOST: ${{ secrets.SSH_HOST }}
+          SSH_USER: ${{ secrets.SSH_USER }}
+          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
+          SSH_PORT: ${{ secrets.SSH_PORT }}
+          SSH_KNOWN_HOSTS: ${{ secrets.SSH_KNOWN_HOSTS }}
+        run: |
+          set -euo pipefail
+          : "${SSH_HOST:?SSH_HOST is required}"
+          : "${SSH_USER:?SSH_USER is required}"
+          : "${SSH_PRIVATE_KEY:?SSH_PRIVATE_KEY is required}"
+          : "${SSH_KNOWN_HOSTS:?SSH_KNOWN_HOSTS is required}"
+
+          mkdir -p ~/.ssh
+          chmod 700 ~/.ssh
+
+          printf '%s\n' "$SSH_PRIVATE_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+
+          SSH_PORT="${SSH_PORT:-22}"
+
+          printf '%s\n' "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
+          chmod 644 ~/.ssh/known_hosts
+
+      - name: Deploy to production
+        if: ${{ steps.freshness.outputs.proceed == 'true' }}
+        env:
+          SSH_HOST: ${{ secrets.SSH_HOST }}
+          SSH_USER: ${{ secrets.SSH_USER }}
+          SSH_PORT: ${{ secrets.SSH_PORT }}
+          DEPLOY_SHA: ${{ github.event.workflow_run.head_sha }}
+        run: |
+          set -euo pipefail
+          : "${SSH_HOST:?SSH_HOST is required}"
+          : "${SSH_USER:?SSH_USER is required}"
+          : "${DEPLOY_SHA:?DEPLOY_SHA is required}"
+
+          SSH_PORT="${SSH_PORT:-22}"
+
+          ssh \
+            -p "$SSH_PORT" \
+            -o BatchMode=yes \
+            -o ConnectTimeout=10 \
+            -o ServerAliveInterval=15 \
+            -o ServerAliveCountMax=3 \
+            -o StrictHostKeyChecking=yes \
+            "$SSH_USER@$SSH_HOST" \
+            "bash -s -- '$DEPLOY_SHA' '/opt/clawith'" < scripts/deploy/deploy_from_github_actions.sh
diff --git a/.gitignore b/.gitignore
index fe83a12a5..2066bb6bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,14 @@ _agents/
 # Internal docs
 docs/
 .agents/rules/deploy.md
+
+# Runtime data (postgres, redis, agent workspaces)
+data/
+
+# Infrastructure config (not code)
+cloudfront-config.json
+
+# Unnecessary extra requirements file (deps in pyproject.toml)
+backend/requirements.txt
+.worktrees/
+.gitnexus
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index deac03729..281ae050a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -60,6 +60,30 @@ Please describe:
    - Frontend: TypeScript — standard React conventions
 5. Use `Fixes #<issue_number>` in the PR description
 
+## GitHub Actions CI/CD
+
+GitHub Actions is now the active in-repo CI/CD path after the Drone pipeline was removed.
+
+- Pull requests to `main` run CI automatically.
+- On pushes to `main`, production deployment runs after CI succeeds.
+- Production deployment uses the GitHub Actions `production` environment.
+
+Current verification boundary for this first migration:
+
+- Covered now: backend/frontend CI plus the production deploy workflow.
+- Not yet covered as a full replacement: the old Drone deploy-test and upgrade-test rehearsal coverage.
+
+For maintainers setting up the production environment bootstrap in GitHub Actions, configure these environment secrets with GitHub CLI:
+
+```bash
+gh secret set SSH_HOST --env production --body "ai-company.growatt-support.com"
+gh secret set SSH_USER --env production --body "ubuntu"
+gh secret set SSH_PRIVATE_KEY --env production < ~/.ssh/your_key
+gh secret set SSH_KNOWN_HOSTS --env production < ~/.ssh/known_hosts
+# Optional
+gh secret set SSH_PORT --env production --body "22"
+```
+
 ## Working on Multiple Features
 
 It is common to develop several improvements in one sitting before submitting. Rather than sending one giant PR, please split your work into smaller, focused PRs — this makes review faster and merges cleaner.
diff --git a/backend/alembic/env.py b/backend/alembic/env.py
index eb3420d3f..f31ea6068 100644
--- a/backend/alembic/env.py
+++ b/backend/alembic/env.py
@@ -31,7 +31,23 @@
 from app.models.tool import Tool  # noqa: F401
 from app.models.trigger import AgentTrigger  # noqa: F401
 from app.models.agent_credential import AgentCredential  # noqa: F401
+from app.models.focus import AgentFocusItem  # noqa: F401
+from app.models.gateway_message import GatewayMessage  # noqa: F401
+from app.models.notification import Notification  # noqa: F401
+from app.models.okr import (  # noqa: F401
+    CompanyReport,
+    MemberDailyReport,
+    OKRAlignment,
+    OKRKeyResult,
+    OKRObjective,
+    OKRProgressLog,
+    OKRSettings,
+    WorkReport,
+)
 from app.models.onboarding import UserTenantOnboarding  # noqa: F401
+from app.models.published_page import PublishedPage  # noqa: F401
+from app.models.tenant_setting import TenantSetting  # noqa: F401
+from app.models.workspace import WorkspaceBugReport, WorkspaceEditLock, WorkspaceFileRevision, WorkspaceProject  # noqa: F401
 
 config = context.config
 settings = get_settings()
diff --git a/backend/alembic/versions/20260313_column_modify.py b/backend/alembic/versions/20260313_column_modify.py
index 5781535d4..5ff1a4a3b 100644
--- a/backend/alembic/versions/20260313_column_modify.py
+++ b/backend/alembic/versions/20260313_column_modify.py
@@ -4,8 +4,6 @@
 Revises: add_microsoft_teams_support
 """
 from alembic import op
-import sqlalchemy as sa
-from sqlalchemy.dialects.postgresql import UUID
 
 revision = "20260313_column_modify"
 down_revision = "add_microsoft_teams_support"
diff --git a/backend/alembic/versions/20260330_refactor_user_system_phase2.py b/backend/alembic/versions/20260330_refactor_user_system_phase2.py
index 17647feef..7967db23b 100644
--- a/backend/alembic/versions/20260330_refactor_user_system_phase2.py
+++ b/backend/alembic/versions/20260330_refactor_user_system_phase2.py
@@ -9,7 +9,6 @@
  
 from alembic import op
 import sqlalchemy as sa
-from sqlalchemy.dialects import postgresql
 from sqlalchemy import inspect
  
 # revision identifiers, used by Alembic.
diff --git a/backend/alembic/versions/5b0be8fbd941_add_chat_message_is_hidden_column.py b/backend/alembic/versions/5b0be8fbd941_add_chat_message_is_hidden_column.py
new file mode 100644
index 000000000..c1e3fab47
--- /dev/null
+++ b/backend/alembic/versions/5b0be8fbd941_add_chat_message_is_hidden_column.py
@@ -0,0 +1,26 @@
+"""add chat_message is_hidden column
+
+Revision ID: 5b0be8fbd941
+Revises: add_user_tenant_onboarding
+Create Date: 2026-03-25 21:47:36.761546
+"""
+from typing import Sequence, Union
+
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = '5b0be8fbd941'
+down_revision: Union[str, None] = 'add_user_tenant_onboarding'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.execute(
+        "ALTER TABLE chat_messages "
+        "ADD COLUMN IF NOT EXISTS is_hidden BOOLEAN NOT NULL DEFAULT FALSE"
+    )
+
+
+def downgrade() -> None:
+    op.execute("ALTER TABLE chat_messages DROP COLUMN IF EXISTS is_hidden")
diff --git a/backend/alembic/versions/add_agent_is_system.py b/backend/alembic/versions/add_agent_is_system.py
index 3a7a05b82..628d906c2 100644
--- a/backend/alembic/versions/add_agent_is_system.py
+++ b/backend/alembic/versions/add_agent_is_system.py
@@ -5,7 +5,6 @@
 """
 
 from alembic import op
-import sqlalchemy as sa
 
 # revision identifiers
 revision = "add_agent_is_system"
diff --git a/backend/alembic/versions/add_agent_tool_source.py b/backend/alembic/versions/add_agent_tool_source.py
index 030ea519e..79f5aca5d 100644
--- a/backend/alembic/versions/add_agent_tool_source.py
+++ b/backend/alembic/versions/add_agent_tool_source.py
@@ -5,7 +5,6 @@
 Create Date: 2026-03-06
 """
 from alembic import op
-import sqlalchemy as sa
 
 revision = "add_agent_tool_source"
 down_revision = "add_quota_fields"
diff --git a/backend/alembic/versions/add_chat_sessions.py b/backend/alembic/versions/add_chat_sessions.py
index 815c1b65e..c18147486 100644
--- a/backend/alembic/versions/add_chat_sessions.py
+++ b/backend/alembic/versions/add_chat_sessions.py
@@ -1,7 +1,5 @@
 """Add chat_sessions table and update existing chat_messages conversation_ids."""
 
-import uuid
-import sqlalchemy as sa
 from alembic import op
 
 revision = "add_chat_sessions"
diff --git a/backend/alembic/versions/add_daily_token_usage.py b/backend/alembic/versions/add_daily_token_usage.py
index 385e1b043..55d3f1dcb 100644
--- a/backend/alembic/versions/add_daily_token_usage.py
+++ b/backend/alembic/versions/add_daily_token_usage.py
@@ -4,8 +4,6 @@
 """
 
 from alembic import op
-import sqlalchemy as sa
-from sqlalchemy.dialects import postgresql
 
 revision = "add_daily_token_usage"
 down_revision = "add_agentbay_enum_value"
diff --git a/backend/alembic/versions/add_invitation_codes.py b/backend/alembic/versions/add_invitation_codes.py
index 382e30e27..eddcb014e 100644
--- a/backend/alembic/versions/add_invitation_codes.py
+++ b/backend/alembic/versions/add_invitation_codes.py
@@ -4,7 +4,6 @@
 """
 
 from alembic import op
-import sqlalchemy as sa
 
 revision = "add_invitation_codes"
 down_revision = "add_chat_sessions"
diff --git a/backend/alembic/versions/add_llm_max_output_tokens.py b/backend/alembic/versions/add_llm_max_output_tokens.py
index b6892ca4a..16aeee9ad 100644
--- a/backend/alembic/versions/add_llm_max_output_tokens.py
+++ b/backend/alembic/versions/add_llm_max_output_tokens.py
@@ -6,7 +6,6 @@
 
 """
 from alembic import op
-import sqlalchemy as sa
 
 # revision identifiers, used by Alembic.
 revision = 'add_llm_max_output_tokens'
diff --git a/backend/alembic/versions/add_llm_temperature.py b/backend/alembic/versions/add_llm_temperature.py
index e4f57de09..4b077308a 100644
--- a/backend/alembic/versions/add_llm_temperature.py
+++ b/backend/alembic/versions/add_llm_temperature.py
@@ -6,7 +6,6 @@
 
 """
 from alembic import op
-import sqlalchemy as sa
 
 # revision identifiers, used by Alembic.
 revision = 'add_llm_temperature'
diff --git a/backend/alembic/versions/add_llm_tenant_id.py b/backend/alembic/versions/add_llm_tenant_id.py
index 8d71d53a6..cf44e62e8 100644
--- a/backend/alembic/versions/add_llm_tenant_id.py
+++ b/backend/alembic/versions/add_llm_tenant_id.py
@@ -4,8 +4,6 @@
 Revises: 20260313_column_modify
 """
 from alembic import op
-import sqlalchemy as sa
-from sqlalchemy.dialects.postgresql import UUID
 
 revision = "add_llm_tenant_id"
 down_revision = "20260313_column_modify"
diff --git a/backend/alembic/versions/add_microsoft_teams_support.py b/backend/alembic/versions/add_microsoft_teams_support.py
index d09aa6c2b..bfcfbf163 100644
--- a/backend/alembic/versions/add_microsoft_teams_support.py
+++ b/backend/alembic/versions/add_microsoft_teams_support.py
@@ -1,7 +1,6 @@
 """Add Microsoft Teams support to im_provider and channel_type enums."""
 
 from alembic import op
-import sqlalchemy as sa
 
 revision = "add_microsoft_teams_support"
 down_revision = "add_agent_usage_fields"
diff --git a/backend/alembic/versions/add_notification_agent_id.py b/backend/alembic/versions/add_notification_agent_id.py
index 639d92de0..d30765b08 100644
--- a/backend/alembic/versions/add_notification_agent_id.py
+++ b/backend/alembic/versions/add_notification_agent_id.py
@@ -7,7 +7,6 @@
 from typing import Sequence, Union
 
 from alembic import op
-import sqlalchemy as sa
 
 
 revision: str = 'add_notification_agent_id'
diff --git a/backend/alembic/versions/add_notifications_table.py b/backend/alembic/versions/add_notifications_table.py
new file mode 100644
index 000000000..8ad820571
--- /dev/null
+++ b/backend/alembic/versions/add_notifications_table.py
@@ -0,0 +1,57 @@
+"""Create notifications table for legacy installs.
+
+Revision ID: add_notifications_table
+Revises: add_workspace_deployment_tables
+Create Date: 2026-05-12
+"""
+
+from alembic import op
+
+
+revision = "add_notifications_table"
+down_revision = "add_workspace_deployment_tables"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.execute(
+        """
+        CREATE TABLE IF NOT EXISTS notifications (
+            id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+            user_id UUID REFERENCES users(id),
+            agent_id UUID REFERENCES agents(id),
+            type VARCHAR(50) NOT NULL,
+            title VARCHAR(200) NOT NULL,
+            body TEXT NOT NULL DEFAULT '',
+            link VARCHAR(500),
+            ref_id UUID,
+            sender_name VARCHAR(100),
+            is_read BOOLEAN NOT NULL DEFAULT FALSE,
+            created_at TIMESTAMPTZ DEFAULT now()
+        )
+        """
+    )
+
+    for statement in [
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS user_id UUID REFERENCES users(id)",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS agent_id UUID REFERENCES agents(id)",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS type VARCHAR(50)",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS title VARCHAR(200)",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS body TEXT NOT NULL DEFAULT ''",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS link VARCHAR(500)",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS ref_id UUID",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS sender_name VARCHAR(100)",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS is_read BOOLEAN NOT NULL DEFAULT FALSE",
+        "ALTER TABLE notifications ADD COLUMN IF NOT EXISTS created_at TIMESTAMPTZ DEFAULT now()",
+        "ALTER TABLE notifications ALTER COLUMN user_id DROP NOT NULL",
+    ]:
+        op.execute(statement)
+
+    op.execute("CREATE INDEX IF NOT EXISTS ix_notifications_user_id ON notifications(user_id)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_notifications_agent_id ON notifications(agent_id)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_notifications_created_at ON notifications(created_at)")
+
+
+def downgrade() -> None:
+    op.execute("DROP TABLE IF EXISTS notifications")
diff --git a/backend/alembic/versions/add_published_pages.py b/backend/alembic/versions/add_published_pages.py
index a73dc09e4..53f758858 100644
--- a/backend/alembic/versions/add_published_pages.py
+++ b/backend/alembic/versions/add_published_pages.py
@@ -7,8 +7,6 @@
 from typing import Sequence, Union
 
 from alembic import op
-import sqlalchemy as sa
-from sqlalchemy.dialects.postgresql import UUID
 
 
 revision: str = 'add_published_pages'
diff --git a/backend/alembic/versions/add_skill_tenant_id.py b/backend/alembic/versions/add_skill_tenant_id.py
index 6cc6eb2ec..27e492231 100644
--- a/backend/alembic/versions/add_skill_tenant_id.py
+++ b/backend/alembic/versions/add_skill_tenant_id.py
@@ -4,7 +4,6 @@
 Revises: add_llm_tenant_id
 """
 from alembic import op
-import sqlalchemy as sa
 
 revision = "add_skill_tenant_id"
 down_revision = "add_llm_tenant_id"
diff --git a/backend/alembic/versions/add_sso_login_enabled.py b/backend/alembic/versions/add_sso_login_enabled.py
index 5d2a33acb..b4683f5c0 100644
--- a/backend/alembic/versions/add_sso_login_enabled.py
+++ b/backend/alembic/versions/add_sso_login_enabled.py
@@ -5,7 +5,6 @@
 Create Date: 2026-03-29
 """
 from alembic import op
-import sqlalchemy as sa
 
 revision = "add_sso_login_enabled"
 down_revision = "user_refactor_v1"
diff --git a/backend/alembic/versions/add_title_edit_util_model.py b/backend/alembic/versions/add_title_edit_util_model.py
new file mode 100644
index 000000000..e8198792a
--- /dev/null
+++ b/backend/alembic/versions/add_title_edit_util_model.py
@@ -0,0 +1,27 @@
+"""Add title_edited to chat_sessions and utility_model_id to tenants.
+
+Revision ID: add_title_edit_util_model
+Revises: 5b0be8fbd941
+"""
+from alembic import op
+
+revision = "add_title_edit_util_model"
+down_revision = "5b0be8fbd941"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.execute(
+        "ALTER TABLE chat_sessions ADD COLUMN IF NOT EXISTS "
+        "title_edited BOOLEAN NOT NULL DEFAULT FALSE"
+    )
+    op.execute(
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS "
+        "utility_model_id UUID REFERENCES llm_models(id) ON DELETE SET NULL"
+    )
+
+
+def downgrade() -> None:
+    op.execute("ALTER TABLE tenants DROP COLUMN IF EXISTS utility_model_id")
+    op.execute("ALTER TABLE chat_sessions DROP COLUMN IF EXISTS title_edited")
diff --git a/backend/alembic/versions/add_tool_source.py b/backend/alembic/versions/add_tool_source.py
index 06815b314..91c8e6675 100644
--- a/backend/alembic/versions/add_tool_source.py
+++ b/backend/alembic/versions/add_tool_source.py
@@ -7,7 +7,6 @@
 from typing import Sequence, Union
 
 from alembic import op
-import sqlalchemy as sa
 
 
 revision: str = 'add_tool_source'
diff --git a/backend/alembic/versions/add_user_tenant_onboarding.py b/backend/alembic/versions/add_user_tenant_onboarding.py
index fb5719031..dd04a11c2 100644
--- a/backend/alembic/versions/add_user_tenant_onboarding.py
+++ b/backend/alembic/versions/add_user_tenant_onboarding.py
@@ -19,22 +19,29 @@
 
 
 def upgrade() -> None:
-    op.create_table(
-        "user_tenant_onboardings",
-        sa.Column("id", postgresql.UUID(as_uuid=True), primary_key=True, nullable=False),
-        sa.Column("user_id", postgresql.UUID(as_uuid=True), sa.ForeignKey("users.id", ondelete="CASCADE"), nullable=False),
-        sa.Column("tenant_id", postgresql.UUID(as_uuid=True), sa.ForeignKey("tenants.id", ondelete="CASCADE"), nullable=False),
-        sa.Column("status", sa.String(length=32), nullable=False, server_default="in_progress"),
-        sa.Column("current_step", sa.String(length=32), nullable=False, server_default="assistant"),
-        sa.Column("entry_mode", sa.String(length=32), nullable=False, server_default="create"),
-        sa.Column("personal_assistant_agent_id", postgresql.UUID(as_uuid=True), sa.ForeignKey("agents.id", ondelete="SET NULL"), nullable=True),
-        sa.Column("started_at", sa.DateTime(timezone=True), server_default=sa.func.now(), nullable=False),
-        sa.Column("completed_at", sa.DateTime(timezone=True), nullable=True),
-        sa.Column("updated_at", sa.DateTime(timezone=True), server_default=sa.func.now(), nullable=False),
-        sa.UniqueConstraint("user_id", "tenant_id", name="uq_user_tenant_onboarding"),
-    )
-    op.create_index("ix_user_tenant_onboardings_user_id", "user_tenant_onboardings", ["user_id"])
-    op.create_index("ix_user_tenant_onboardings_tenant_id", "user_tenant_onboardings", ["tenant_id"])
+    conn = op.get_bind()
+    if not conn.dialect.has_table(conn, "user_tenant_onboardings"):
+        op.create_table(
+            "user_tenant_onboardings",
+            sa.Column("id", postgresql.UUID(as_uuid=True), primary_key=True, nullable=False),
+            sa.Column("user_id", postgresql.UUID(as_uuid=True), sa.ForeignKey("users.id", ondelete="CASCADE"), nullable=False),
+            sa.Column("tenant_id", postgresql.UUID(as_uuid=True), sa.ForeignKey("tenants.id", ondelete="CASCADE"), nullable=False),
+            sa.Column("status", sa.String(length=32), nullable=False, server_default="in_progress"),
+            sa.Column("current_step", sa.String(length=32), nullable=False, server_default="assistant"),
+            sa.Column("entry_mode", sa.String(length=32), nullable=False, server_default="create"),
+            sa.Column("personal_assistant_agent_id", postgresql.UUID(as_uuid=True), sa.ForeignKey("agents.id", ondelete="SET NULL"), nullable=True),
+            sa.Column("started_at", sa.DateTime(timezone=True), server_default=sa.func.now(), nullable=False),
+            sa.Column("completed_at", sa.DateTime(timezone=True), nullable=True),
+            sa.Column("updated_at", sa.DateTime(timezone=True), server_default=sa.func.now(), nullable=False),
+            sa.UniqueConstraint("user_id", "tenant_id", name="uq_user_tenant_onboarding"),
+        )
+
+    inspector = sa.inspect(conn)
+    index_names = {idx["name"] for idx in inspector.get_indexes("user_tenant_onboardings")}
+    if "ix_user_tenant_onboardings_user_id" not in index_names:
+        op.create_index("ix_user_tenant_onboardings_user_id", "user_tenant_onboardings", ["user_id"])
+    if "ix_user_tenant_onboardings_tenant_id" not in index_names:
+        op.create_index("ix_user_tenant_onboardings_tenant_id", "user_tenant_onboardings", ["tenant_id"])
 
 
 def downgrade() -> None:
diff --git a/backend/alembic/versions/add_workspace_deployment_tables.py b/backend/alembic/versions/add_workspace_deployment_tables.py
new file mode 100644
index 000000000..c916e529c
--- /dev/null
+++ b/backend/alembic/versions/add_workspace_deployment_tables.py
@@ -0,0 +1,166 @@
+"""Add workspace deployment tables and dockerfile path.
+
+Revision ID: add_workspace_deployment_tables
+Revises: add_title_edit_util_model
+Create Date: 2026-05-11
+"""
+
+from alembic import op
+
+
+revision = "add_workspace_deployment_tables"
+down_revision = "add_title_edit_util_model"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.execute(
+        """
+        DO $$
+        BEGIN
+            CREATE TYPE deploy_type_enum AS ENUM ('static', 'container');
+        EXCEPTION
+            WHEN duplicate_object THEN NULL;
+        END $$;
+        """
+    )
+    op.execute(
+        """
+        DO $$
+        BEGIN
+            CREATE TYPE workspace_status_enum AS ENUM (
+                'requested', 'building', 'awaiting_approval', 'deployed',
+                'failed', 'rejected', 'stopped', 'undeployed'
+            );
+        EXCEPTION
+            WHEN duplicate_object THEN NULL;
+        END $$;
+        """
+    )
+    op.execute(
+        """
+        DO $$
+        BEGIN
+            CREATE TYPE bug_source_enum AS ENUM ('health_check', 'user_report');
+        EXCEPTION
+            WHEN duplicate_object THEN NULL;
+        END $$;
+        """
+    )
+    op.execute(
+        """
+        DO $$
+        BEGIN
+            CREATE TYPE bug_status_enum AS ENUM ('open', 'investigating', 'fixed', 'escalated');
+        EXCEPTION
+            WHEN duplicate_object THEN NULL;
+        END $$;
+        """
+    )
+
+    # Legacy-schema compatibility: some long-lived installations still have the
+    # pre-refactor shape for users, tenants, tools, triggers, org tables, and
+    # agent templates. This migration is the current Alembic head in this
+    # branch, so it also normalizes those older schemas before the app boots.
+    for value in ("wechat", "whatsapp", "agentbay"):
+        op.execute(f"ALTER TYPE channel_type_enum ADD VALUE IF NOT EXISTS '{value}'")
+
+    for statement in [
+        "ALTER TABLE agent_triggers ADD COLUMN IF NOT EXISTS is_system BOOLEAN NOT NULL DEFAULT FALSE",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_read_tokens_today INTEGER DEFAULT 0",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_read_tokens_month INTEGER DEFAULT 0",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_read_tokens_total INTEGER DEFAULT 0",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_creation_tokens_today INTEGER DEFAULT 0",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_creation_tokens_month INTEGER DEFAULT 0",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_creation_tokens_total INTEGER DEFAULT 0",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS is_system BOOLEAN NOT NULL DEFAULT FALSE",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS access_mode VARCHAR(20) NOT NULL DEFAULT 'company'",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS company_access_level VARCHAR(20) NOT NULL DEFAULT 'use'",
+        "ALTER TABLE users ADD COLUMN IF NOT EXISTS identity_id UUID",
+        "ALTER TABLE users ADD COLUMN IF NOT EXISTS registration_source VARCHAR(50) DEFAULT 'web'",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS country_region VARCHAR(10) NOT NULL DEFAULT '001'",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS sso_enabled BOOLEAN NOT NULL DEFAULT FALSE",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS sso_domain VARCHAR(255)",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS a2a_async_enabled BOOLEAN NOT NULL DEFAULT FALSE",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS default_model_id UUID",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS utility_model_id UUID",
+        "ALTER TABLE tools ADD COLUMN IF NOT EXISTS source VARCHAR(20) NOT NULL DEFAULT 'builtin'",
+        "ALTER TABLE agent_templates ADD COLUMN IF NOT EXISTS default_mcp_servers JSON NOT NULL DEFAULT '[]'::json",
+        "ALTER TABLE agent_templates ADD COLUMN IF NOT EXISTS capability_bullets JSON NOT NULL DEFAULT '[]'::json",
+        "ALTER TABLE agent_templates ADD COLUMN IF NOT EXISTS bootstrap_content TEXT",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS open_id VARCHAR(100)",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS unionid VARCHAR(100)",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS external_id VARCHAR(100)",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS provider_id UUID",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS user_id UUID",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS name_translit_full VARCHAR(255)",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS name_translit_initial VARCHAR(50)",
+        "ALTER TABLE agent_agent_relationships ADD COLUMN IF NOT EXISTS updated_at TIMESTAMPTZ",
+        "ALTER TABLE agent_agent_relationships ADD COLUMN IF NOT EXISTS created_by_user_id UUID",
+        "ALTER TABLE agent_agent_relationships ADD COLUMN IF NOT EXISTS updated_by_user_id UUID",
+    ]:
+        op.execute(statement)
+
+    op.execute(
+        """
+        CREATE TABLE IF NOT EXISTS workspace_projects (
+            id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+            slug VARCHAR(50) NOT NULL UNIQUE,
+            name VARCHAR(200) NOT NULL,
+            description TEXT,
+            tenant_id UUID REFERENCES tenants(id) ON DELETE SET NULL,
+            requested_by UUID REFERENCES agents(id) ON DELETE SET NULL,
+            requested_by_human VARCHAR(200),
+            built_by UUID REFERENCES agents(id) ON DELETE SET NULL,
+            deploy_type deploy_type_enum,
+            status workspace_status_enum NOT NULL DEFAULT 'requested',
+            container_id VARCHAR(100),
+            container_image VARCHAR(300),
+            container_port INTEGER,
+            health_endpoint VARCHAR(200),
+            resource_limits JSON,
+            dockerfile_path VARCHAR(500),
+            auto_fix_attempts INTEGER NOT NULL DEFAULT 0,
+            auto_fix_window_start TIMESTAMPTZ,
+            created_at TIMESTAMPTZ DEFAULT now(),
+            updated_at TIMESTAMPTZ DEFAULT now()
+        )
+        """
+    )
+    op.execute("ALTER TABLE workspace_projects ADD COLUMN IF NOT EXISTS tenant_id UUID REFERENCES tenants(id) ON DELETE SET NULL")
+    op.execute("ALTER TABLE workspace_projects ADD COLUMN IF NOT EXISTS dockerfile_path VARCHAR(500)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_workspace_projects_slug ON workspace_projects(slug)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_workspace_projects_created_at ON workspace_projects(created_at)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_workspace_projects_tenant_id ON workspace_projects(tenant_id)")
+    op.execute(
+        """
+        UPDATE workspace_projects wp
+        SET tenant_id = COALESCE(
+            (SELECT a.tenant_id FROM agents a WHERE a.id = wp.built_by),
+            (SELECT a.tenant_id FROM agents a WHERE a.id = wp.requested_by)
+        )
+        WHERE wp.tenant_id IS NULL
+        """
+    )
+
+    op.execute(
+        """
+        CREATE TABLE IF NOT EXISTS workspace_bug_reports (
+            id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+            project_id UUID NOT NULL REFERENCES workspace_projects(id) ON DELETE CASCADE,
+            source bug_source_enum NOT NULL,
+            description TEXT NOT NULL,
+            status bug_status_enum NOT NULL DEFAULT 'open',
+            created_at TIMESTAMPTZ DEFAULT now(),
+            updated_at TIMESTAMPTZ DEFAULT now()
+        )
+        """
+    )
+    op.execute("CREATE INDEX IF NOT EXISTS ix_workspace_bug_reports_project_id ON workspace_bug_reports(project_id)")
+    op.execute("CREATE INDEX IF NOT EXISTS ix_workspace_bug_reports_created_at ON workspace_bug_reports(created_at)")
+
+
+def downgrade() -> None:
+    op.execute("DROP TABLE IF EXISTS workspace_bug_reports")
+    op.execute("DROP TABLE IF EXISTS workspace_projects")
diff --git a/backend/alembic/versions/be48e94fa052_add_name_translit_fields_to_orgmember.py b/backend/alembic/versions/be48e94fa052_add_name_translit_fields_to_orgmember.py
index 54828c822..46f2d69c0 100644
--- a/backend/alembic/versions/be48e94fa052_add_name_translit_fields_to_orgmember.py
+++ b/backend/alembic/versions/be48e94fa052_add_name_translit_fields_to_orgmember.py
@@ -7,8 +7,6 @@
 from typing import Sequence, Union
 
 from alembic import op
-import sqlalchemy as sa
-from sqlalchemy.dialects import postgresql
 
 # revision identifiers, used by Alembic.
 revision: str = 'be48e94fa052'
diff --git a/backend/alembic/versions/d9cbd43b62e5_add_llm_request_timeout.py b/backend/alembic/versions/d9cbd43b62e5_add_llm_request_timeout.py
index a9d4d0344..a54e382fe 100644
--- a/backend/alembic/versions/d9cbd43b62e5_add_llm_request_timeout.py
+++ b/backend/alembic/versions/d9cbd43b62e5_add_llm_request_timeout.py
@@ -7,7 +7,6 @@
 from typing import Sequence, Union
 
 from alembic import op
-import sqlalchemy as sa
 
 
 # revision identifiers, used by Alembic.
diff --git a/backend/alembic/versions/df3da9cf3b27_add_entrypoint_missing_columns.py b/backend/alembic/versions/df3da9cf3b27_add_entrypoint_missing_columns.py
index c1eb564cb..deb2f3324 100644
--- a/backend/alembic/versions/df3da9cf3b27_add_entrypoint_missing_columns.py
+++ b/backend/alembic/versions/df3da9cf3b27_add_entrypoint_missing_columns.py
@@ -7,7 +7,6 @@
 from typing import Sequence, Union
 
 from alembic import op
-import sqlalchemy as sa
 
 
 # revision identifiers, used by Alembic.
diff --git a/backend/alembic/versions/merge_okr_and_llm_timeout.py b/backend/alembic/versions/merge_okr_and_llm_timeout.py
index 3660371e9..ed8d9722a 100644
--- a/backend/alembic/versions/merge_okr_and_llm_timeout.py
+++ b/backend/alembic/versions/merge_okr_and_llm_timeout.py
@@ -9,7 +9,6 @@
 Revises: add_okr_tables, d9cbd43b62e5
 """
 
-from alembic import op
 
 # revision identifiers
 revision = "merge_okr_and_llm_timeout"
diff --git a/backend/app/api/activity.py b/backend/app/api/activity.py
index a22e5a98f..8cf5094c7 100644
--- a/backend/app/api/activity.py
+++ b/backend/app/api/activity.py
@@ -128,7 +128,7 @@ async def list_conversations(
             # Extract sender name from [发送者: xxx] prefix
             import re
             sender_match = re.search(r'\[发送者:\s*([^\]]+?)(?:\s*\(ID:.*?\))?\]', first_msg)
-            display_name = f"📱 {sender_match.group(1)}" if sender_match else f"📱 飞书用户"
+            display_name = f"📱 {sender_match.group(1)}" if sender_match else "📱 飞书用户"
         else:
             display_name = "👥 飞书群聊"
 
@@ -256,7 +256,6 @@ async def get_conversation_messages(
     elif conv_id.startswith("agent_") or len(conv_id) == 36:
         # Agent-to-agent conversation — conv_id is the ChatSession UUID
         from app.models.audit import ChatMessage
-        from app.models.agent import Agent
         from app.models.participant import Participant
 
         result = await db.execute(
diff --git a/backend/app/api/admin.py b/backend/app/api/admin.py
index 80c53261b..f6c0e5705 100644
--- a/backend/app/api/admin.py
+++ b/backend/app/api/admin.py
@@ -206,7 +206,6 @@ async def toggle_company(
 # ─── Platform Metrics Dashboard ─────────────────────────
 
 from typing import Any
-from fastapi import Query
 
 @router.get("/metrics/timeseries", response_model=list[dict[str, Any]])
 async def get_platform_timeseries(
diff --git a/backend/app/api/advanced.py b/backend/app/api/advanced.py
index bf58bb696..c6a9b9719 100644
--- a/backend/app/api/advanced.py
+++ b/backend/app/api/advanced.py
@@ -10,7 +10,7 @@
 from app.core.permissions import check_agent_access
 from app.core.security import get_current_user, get_current_admin
 from app.database import get_db
-from app.models.agent import Agent, AgentTemplate
+from app.models.agent import AgentTemplate
 from app.models.user import User
 from app.services.collaboration import collaboration_service
 
diff --git a/backend/app/api/agent_credentials.py b/backend/app/api/agent_credentials.py
index be2244226..20d81cd53 100644
--- a/backend/app/api/agent_credentials.py
+++ b/backend/app/api/agent_credentials.py
@@ -21,7 +21,6 @@
 from app.models.user import User
 from app.schemas.agent_credential import (
     AgentCredentialCreate,
-    AgentCredentialResponse,
     AgentCredentialUpdate,
 )
 
diff --git a/backend/app/api/agents.py b/backend/app/api/agents.py
index 66a05b36c..ddd9c540e 100644
--- a/backend/app/api/agents.py
+++ b/backend/app/api/agents.py
@@ -146,7 +146,7 @@ async def _build_unread_count_by_agent(
         .where(
             ChatSession.agent_id.in_(agent_ids),
             ChatSession.user_id == current_user.id,
-            ChatSession.is_group == False,
+            ChatSession.is_group.is_(False),
             ChatSession.source_channel.notin_(["agent", "trigger"]),
             ChatMessage.role.in_(["assistant", "system", "tool_call"]),
             ChatMessage.created_at > func.coalesce(
@@ -543,6 +543,10 @@ async def get_agent(
             effective_tz = tenant.timezone or "UTC"
     out["effective_timezone"] = effective_tz or "UTC"
 
+    # Skill map for autocomplete
+    from app.services.skill_map import get_skill_map_for_api
+    out["skill_map"] = get_skill_map_for_api(agent_id)
+
     return out
 
 
@@ -737,7 +741,7 @@ async def get_agent_permission_candidates(
     if access_level != "manage":
         raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Only manager can change permissions")
 
-    user_query = select(User).where(User.tenant_id == agent.tenant_id, User.is_active == True)
+    user_query = select(User).where(User.tenant_id == agent.tenant_id, User.is_active)
     if search:
         pattern = f"%{search}%"
         user_query = user_query.where(
diff --git a/backend/app/api/atlassian.py b/backend/app/api/atlassian.py
index e1befb9d2..f51ab3aee 100644
--- a/backend/app/api/atlassian.py
+++ b/backend/app/api/atlassian.py
@@ -284,7 +284,7 @@ async def _fetch(session):
             select(ChannelConfig).where(
                 ChannelConfig.agent_id == agent_id,
                 ChannelConfig.channel_type == "atlassian",
-                ChannelConfig.is_configured == True,
+                ChannelConfig.is_configured,
             )
         )
         config = result.scalar_one_or_none()
diff --git a/backend/app/api/auth.py b/backend/app/api/auth.py
index 8cff5f0b3..262cb94df 100644
--- a/backend/app/api/auth.py
+++ b/backend/app/api/auth.py
@@ -2,7 +2,6 @@
 
 import uuid
 from datetime import datetime, timezone
-import uuid
 
 from typing import Any
 
@@ -28,11 +27,8 @@
     UserUpdate,
     VerifyEmailRequest,
     ResendVerificationRequest,
-    NeedsVerificationResponse,
     RegisterInitRequest,
     RegisterInitResponse,
-    RegisterCompleteRequest,
-    RegisterCompleteResponse,
     SSORegisterRequest,
     TenantChoice,
     MultiTenantResponse,
@@ -62,7 +58,7 @@ async def check_duplicate(
     db: AsyncSession = Depends(get_db),
 ):
     """Check if email or username already exists."""
-    from app.models.user import Identity, User
+    from app.models.user import Identity
     result = {"email_exists": False, "username_exists": False, "conflicts": []}
 
     if email:
@@ -222,7 +218,7 @@ async def register_init(
     else:
         # Check for a "tenant-less" user (pending company setup)
         existing_user_res = await db.execute(
-            select(User).where(User.identity_id == identity.id, User.tenant_id == None)
+            select(User).where(User.identity_id == identity.id, User.tenant_id is None)
         )
         user = existing_user_res.scalar_one_or_none()
 
@@ -455,37 +451,21 @@ async def login(data: UserLogin, background_tasks: BackgroundTasks, db: AsyncSes
 
     if not identity.email_verified:
         from app.config import get_settings
-        from sqlalchemy import update
-        from app.services.system_email_service import resolve_email_config_async
-
-        email_config = await resolve_email_config_async(db)
-        if not email_config:
-            identity.email_verified = True
-            identity.is_active = True
-            await db.execute(
-                update(User)
-                .where(User.identity_id == identity.id)
-                .values(is_active=True)
-            )
-            await db.flush()
-        else:
-            # Find any user record (just for the task)
-            user_res = await db.execute(select(User).where(User.identity_id == identity.id).limit(1))
-            user = user_res.scalar_one_or_none()
-            
-            # Trigger email delivery in background
-            if user:
-                await _send_verification_email_task(user, background_tasks, get_settings(), db)
-            
-            # Consistent with identity-first flow: Return 403 Forbidden with verification intent
-            raise HTTPException(
-                status_code=status.HTTP_403_FORBIDDEN,
-                detail={
-                    "needs_verification": True,
-                    "email": identity.email,
-                    "message": "Please verify your email to continue."
-                }
-            )
+
+        user_res = await db.execute(select(User).where(User.identity_id == identity.id).limit(1))
+        user = user_res.scalar_one_or_none()
+
+        if user:
+            await _send_verification_email_task(user, background_tasks, get_settings(), db)
+
+        raise HTTPException(
+            status_code=status.HTTP_403_FORBIDDEN,
+            detail={
+                "needs_verification": True,
+                "email": identity.email,
+                "message": "Please verify your email to continue.",
+            },
+        )
 
     # 3. Find all User records (tenants)
     result = await db.execute(select(User).where(User.identity_id == identity.id).options(selectinload(User.identity)))
@@ -608,15 +588,6 @@ async def forgot_password(
     db: AsyncSession = Depends(get_db),
 ):
     """Request a password reset link for a global Identity."""
-    from app.services.system_email_service import resolve_email_config_async
-    email_config = await resolve_email_config_async(db)
-
-    if not email_config:
-        raise HTTPException(
-            status_code=status.HTTP_400_BAD_REQUEST,
-            detail="Password reset is currently unavailable (no mail server configured)."
-        )
-
     generic_response = {
         "ok": True,
         "message": "If an account with that email exists, a password reset email has been sent.",
@@ -647,6 +618,7 @@ async def forgot_password(
             reset_url,
             expiry_minutes,
         )
+        await db.commit()
     except Exception as exc:
         logger.warning(f"Failed to process password reset email for {data.email}: {exc}")
 
@@ -662,7 +634,7 @@ async def reset_password(data: ResetPasswordRequest, db: AsyncSession = Depends(
     if not token_data:
         raise HTTPException(status_code=400, detail="Invalid or expired reset token")
 
-    identity_id = token_data["identity_id"]
+    identity_id = token_data.get("identity_id") or token_data.get("user_id")
     result = await db.execute(select(Identity).where(Identity.id == identity_id))
     identity = result.scalar_one_or_none()
     
@@ -681,7 +653,11 @@ async def reset_password(data: ResetPasswordRequest, db: AsyncSession = Depends(
 async def get_me(current_user: User = Depends(get_authenticated_user)):
     """Get current user profile."""
     data = UserOut.model_validate(current_user)
-    data.is_platform_admin = bool(getattr(getattr(current_user, "identity", None), "is_platform_admin", False))
+    is_platform_admin = bool(getattr(getattr(current_user, "identity", None), "is_platform_admin", False))
+    if isinstance(data, dict):
+        data["is_platform_admin"] = is_platform_admin
+    else:
+        data.is_platform_admin = is_platform_admin
     return data
 
 
@@ -794,7 +770,6 @@ async def switch_tenant(
 ):
     """Switch to a different tenant and return a new token and redirect URL."""
     from app.models.tenant import Tenant
-    from app.models.system_settings import SystemSetting
 
     # 1. Verify membership
     result = await db.execute(
@@ -898,7 +873,6 @@ async def authorize(
 ):
     """Start OAuth authorization flow for a provider."""
     from app.services.auth_registry import auth_provider_registry
-    from app.services.sso_service import sso_service
 
     # Get provider
     auth_provider = await auth_provider_registry.get_provider(db, provider)
@@ -947,7 +921,7 @@ async def oauth_callback(
         if not user:
             raise HTTPException(status_code=500, detail="Failed to create user")
 
-        if not user.is_active:
+        if not getattr(user, "is_active", True):
             raise HTTPException(status_code=403, detail="Account is disabled")
 
     except HTTPException:
@@ -958,8 +932,7 @@ async def oauth_callback(
 
     # Generate JWT token
     jwt_token = create_access_token(str(user.id), user.role)
-
-    return TokenResponse(
+    return TokenResponse.model_construct(
         access_token=jwt_token,
         user=UserOut.model_validate(user),
         needs_company_setup=user.tenant_id is None,
diff --git a/backend/app/api/chat_sessions.py b/backend/app/api/chat_sessions.py
index 356d14700..374a7c3b7 100644
--- a/backend/app/api/chat_sessions.py
+++ b/backend/app/api/chat_sessions.py
@@ -2,9 +2,10 @@
 
 import uuid
 from datetime import datetime, timezone as tz
+import re
 from typing import Optional
 
-from fastapi import APIRouter, Depends, HTTPException, Query, status
+from fastapi import APIRouter, Depends, HTTPException, Query
 from pydantic import BaseModel
 from sqlalchemy import cast, select, func, String
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -106,24 +107,25 @@ async def list_sessions(
             for row in count_res.all():
                 message_counts[row[0]] = row[1]
 
-            unread_res = await db.execute(
-                select(ChatSession.id, func.count(ChatMessage.id))
-                .join(ChatMessage, ChatMessage.conversation_id == cast(ChatSession.id, String))
-                .where(
-                    ChatSession.id.in_(session_uuid_ids),
-                    ChatSession.user_id == current_user.id,
-                    ChatSession.source_channel.notin_(["agent", "trigger"]),
-                    ChatSession.is_group == False,
-                    ChatMessage.role.in_(["assistant", "system", "tool_call"]),
-                    ChatMessage.created_at > func.coalesce(
-                        ChatSession.last_read_at_by_user,
-                        datetime(1970, 1, 1, tzinfo=tz.utc),
-                    ),
+            if any(str(s.user_id) == str(current_user.id) for s in sessions):
+                unread_res = await db.execute(
+                    select(ChatSession.id, func.count(ChatMessage.id))
+                    .join(ChatMessage, ChatMessage.conversation_id == cast(ChatSession.id, String))
+                    .where(
+                        ChatSession.id.in_(session_uuid_ids),
+                        ChatSession.user_id == current_user.id,
+                        ChatSession.source_channel.notin_(["agent", "trigger"]),
+                        ChatSession.is_group.is_(False),
+                        ChatMessage.role.in_(["assistant", "system", "tool_call"]),
+                        ChatMessage.created_at > func.coalesce(
+                            ChatSession.last_read_at_by_user,
+                            datetime(1970, 1, 1, tzinfo=tz.utc),
+                        ),
+                    )
+                    .group_by(ChatSession.id)
                 )
-                .group_by(ChatSession.id)
-            )
-            for row in unread_res.all():
-                unread_counts[str(row[0])] = int(row[1] or 0)
+                for row in unread_res.all():
+                    unread_counts[str(row[0])] = int(row[1] or 0)
 
         # Collect IDs to resolve in bulk
         from app.models.user import Identity
@@ -185,7 +187,7 @@ async def list_sessions(
                 last_message_at=session.last_message_at.isoformat() if session.last_message_at else None,
                 message_count=count,
                 unread_count=unread_counts.get(str(session.id), 0),
-                is_primary=bool(session.is_primary),
+                is_primary=bool(getattr(session, "is_primary", False)),
                 peer_agent_id=peer_agent_id,
                 peer_agent_name=peer_agent_name,
                 participant_type="group" if session.is_group else participant_type,
@@ -200,7 +202,7 @@ async def list_sessions(
             .where(
                 ChatSession.agent_id == agent_id,
                 ChatSession.user_id == current_user.id,
-                ChatSession.is_group == False,  # Group sessions are not "mine"
+                ChatSession.is_group.is_(False),  # Group sessions are not "mine"
                 ChatSession.source_channel.notin_(["agent", "trigger"]),  # Exclude agent-to-agent and reflection sessions
             )
             .order_by(ChatSession.last_message_at.desc().nulls_last(), ChatSession.created_at.desc())
@@ -326,6 +328,7 @@ async def rename_session(
         raise HTTPException(status_code=403, detail="Not authorized")
 
     session.title = body.title
+    session.title_edited = True
     await db.commit()
     return {"id": str(session.id), "title": session.title}
 
@@ -415,10 +418,18 @@ async def get_session_messages(
     out = []
     for m in messages:
         sender_name = sender_cache.get(str(m.participant_id)) if m.participant_id else None
+        message_id = getattr(m, "id", None)
+        message_id_str = str(message_id) if message_id else None
 
         if m.role == "tool_call":
             import json
-            entry: dict = {"role": m.role, "content": m.content, "created_at": m.created_at.isoformat() if m.created_at else None}
+            entry: dict = {
+                "role": m.role,
+                "content": m.content,
+                "created_at": m.created_at.isoformat() if m.created_at else None,
+            }
+            if message_id_str:
+                entry["id"] = message_id_str
             try:
                 data = json.loads(m.content)
                 entry["content"] = ""
@@ -429,6 +440,8 @@ async def get_session_messages(
                 entry["toolThinking"] = data.get("reasoning_content", "")
             except Exception:
                 pass
+            if getattr(m, "is_hidden", False):
+                entry["is_hidden"] = True
             if sender_name:
                 entry["sender_name"] = sender_name
             out.append(entry)
@@ -442,9 +455,19 @@ async def get_session_messages(
                     part["sender_name"] = sender_name
                 if m.participant_id:
                     part["participant_id"] = str(m.participant_id)
+                if getattr(m, "is_hidden", False):
+                    part["is_hidden"] = True
                 out.append(part)
         else:
-            entry = {"role": m.role, "content": m.content, "created_at": m.created_at.isoformat() if m.created_at else None}
+            entry = {
+                "role": m.role,
+                "content": m.content,
+                "created_at": m.created_at.isoformat() if m.created_at else None,
+            }
+            if message_id_str:
+                entry["id"] = message_id_str
+            if getattr(m, "is_hidden", False):
+                entry["is_hidden"] = True
             if hasattr(m, 'thinking') and m.thinking:
                 entry["thinking"] = m.thinking
             if sender_name:
@@ -455,9 +478,6 @@ async def get_session_messages(
 
     return out
 
-
-import re
-
 def _split_inline_tools(content: str) -> list[dict]:
     """Parse assistant content containing inline ```tool_code blocks.
 
diff --git a/backend/app/api/dingtalk.py b/backend/app/api/dingtalk.py
index b4a3e14a8..1f7c8ab0a 100644
--- a/backend/app/api/dingtalk.py
+++ b/backend/app/api/dingtalk.py
@@ -5,7 +5,7 @@
 
 import uuid
 
-from fastapi import APIRouter, Depends, HTTPException, status
+from fastapi import APIRouter, Depends, HTTPException
 from loguru import logger
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -158,7 +158,6 @@ async def process_dingtalk_message(
         sender_nick: Display name of the sender from DingTalk.
         message_id: DingTalk message ID (used for reactions).
     """
-    import json
     import httpx
     from datetime import datetime, timezone
     from sqlalchemy import select as _select
@@ -181,7 +180,6 @@ async def process_dingtalk_message(
         if not sender_staff_id:
             logger.warning("[DingTalk] Skip message attribution because sender_staff_id is empty")
             return
-        creator_id = agent_obj.creator_id
         from app.models.agent import DEFAULT_CONTEXT_WINDOW_SIZE
         ctx_size = (agent_obj.context_window_size or DEFAULT_CONTEXT_WINDOW_SIZE) if agent_obj else DEFAULT_CONTEXT_WINDOW_SIZE
 
@@ -442,7 +440,7 @@ async def dingtalk_callback(
         access_token = token_data.get("access_token")
         if not access_token:
             logger.error(f"DingTalk token exchange failed: {token_data}")
-            return HTMLResponse(f"Auth failed: Token exchange error")
+            return HTMLResponse("Auth failed: Token exchange error")
 
         # Step 2: Get user info using modern v1.0 API
         user_info = await auth_provider.get_user_info(access_token)
diff --git a/backend/app/api/discord_bot.py b/backend/app/api/discord_bot.py
index 72f4e5aa8..40611fb93 100644
--- a/backend/app/api/discord_bot.py
+++ b/backend/app/api/discord_bot.py
@@ -3,7 +3,7 @@
 import os
 import uuid
 
-from fastapi import APIRouter, Depends, HTTPException, Request, Response, status
+from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from loguru import logger
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -181,7 +181,6 @@ def _verify_discord_signature(public_key: str, body: bytes, headers: dict) -> bo
     """Verify Discord ed25519 signature."""
     try:
         from nacl.signing import VerifyKey
-        from nacl.exceptions import BadSignatureError
 
         timestamp = headers.get("x-signature-timestamp", "")
         signature = headers.get("x-signature-ed25519", "")
@@ -267,7 +266,6 @@ async def discord_interaction_webhook(
             return {"type": 4, "data": {"content": "⚠️ 请提供消息内容。Usage: `/ask message:<你的问题>`"}}
 
         interaction_token = body.get("token", "")
-        application_id = config.app_id or ""
         sender_id = body.get("member", {}).get("user", {}).get("id") or body.get("user", {}).get("id", "")
         channel_id = body.get("channel_id", "")
         # Discord: guild interactions are group chats, DM interactions are P2P
diff --git a/backend/app/api/enterprise.py b/backend/app/api/enterprise.py
index 715adf25f..bfd3ebb91 100644
--- a/backend/app/api/enterprise.py
+++ b/backend/app/api/enterprise.py
@@ -12,7 +12,7 @@
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.config import get_settings
-from app.core.security import get_current_admin, get_current_user, require_role, encrypt_data
+from app.core.security import get_current_admin, get_current_user, encrypt_data
 from app.database import async_session, get_db
 from app.models.org import OrgDepartment, OrgMember
 from app.models.identity import IdentityProvider
@@ -327,7 +327,7 @@ async def update_llm_model(
         await db.commit()
         await db.refresh(model)
         return LLMModelOut.model_validate(model)
-    except SQLAlchemyError as e:
+    except SQLAlchemyError:
         await db.rollback()
         raise HTTPException(status_code=500, detail="Failed to update model")
 
@@ -377,7 +377,7 @@ async def list_approvals(
         tenant_agent_ids = select(Agent.id).where(Agent.tenant_id == tid)
         query = query.where(ApprovalRequest.agent_id.in_(tenant_agent_ids))
     # Non-admins further restricted to their own agents
-    if current_user.role != "platform_admin":
+    if getattr(current_user, "role", None) != "platform_admin":
         query = query.where(ApprovalRequest.agent_id.in_(
             select(Agent.id).where(Agent.creator_id == current_user.id)
         ))
@@ -461,7 +461,7 @@ async def get_enterprise_stats(
 
     # Base queries
     agent_q = select(func.count(Agent.id))
-    user_q = select(func.count(User.id)).where(User.is_active == True)
+    user_q = select(func.count(User.id)).where(User.is_active)
     approval_q = select(func.count(ApprovalRequest.id))
 
     if tid:
@@ -504,17 +504,50 @@ class TenantQuotaUpdate(BaseModel):
     default_max_triggers: int | None = None
     min_poll_interval_floor: int | None = None
     max_webhook_rate_ceiling: int | None = None
+    utility_model_id: str | None = None
+
+
+def _resolve_quota_tenant_id(current_user: User, tenant_id: str | None) -> uuid.UUID | None:
+    requested_tenant_id = tenant_id.strip() if tenant_id else ""
+    current_tenant_id = str(current_user.tenant_id) if current_user.tenant_id else ""
+
+    if requested_tenant_id:
+        if not _is_platform_admin_user(current_user) and requested_tenant_id != current_tenant_id:
+            raise HTTPException(status_code=403, detail="Cannot access other tenant quotas")
+        return uuid.UUID(requested_tenant_id)
+
+    if current_tenant_id:
+        return uuid.UUID(current_tenant_id)
 
+    return None
+
+
+
+
+def _resolve_tenant_quota_target(
+    current_user: User,
+    tenant_id: str | None,
+) -> uuid.UUID:
+    if tenant_id:
+        if getattr(current_user, "role", None) != "platform_admin":
+            if not current_user.tenant_id or str(current_user.tenant_id) != tenant_id:
+                raise HTTPException(status_code=403, detail="Not allowed")
+        return uuid.UUID(tenant_id)
+    if not current_user.tenant_id:
+        raise HTTPException(status_code=400, detail="No tenant assigned")
+    return current_user.tenant_id
 
 @router.get("/tenant-quotas")
 async def get_tenant_quotas(
+    tenant_id: str | None = None,
     current_user: User = Depends(get_current_user),
     db: AsyncSession = Depends(get_db),
 ):
     """Get tenant quota defaults and heartbeat settings."""
-    if not current_user.tenant_id:
+    resolved_tenant_id = _resolve_quota_tenant_id(current_user, tenant_id)
+    if not resolved_tenant_id:
         return {}
-    result = await db.execute(select(Tenant).where(Tenant.id == current_user.tenant_id))
+    result = await db.execute(select(Tenant).where(Tenant.id == resolved_tenant_id))
     tenant = result.scalar_one_or_none()
     if not tenant:
         return {}
@@ -528,20 +561,23 @@ async def get_tenant_quotas(
         "default_max_triggers": tenant.default_max_triggers,
         "min_poll_interval_floor": tenant.min_poll_interval_floor,
         "max_webhook_rate_ceiling": tenant.max_webhook_rate_ceiling,
+        "utility_model_id": str(tenant.utility_model_id) if tenant.utility_model_id else None,
     }
 
 
 @router.patch("/tenant-quotas")
 async def update_tenant_quotas(
     data: TenantQuotaUpdate,
+    tenant_id: str | None = None,
     current_user: User = Depends(get_current_admin),
     db: AsyncSession = Depends(get_db),
 ):
     """Update tenant quota defaults (admin only). Enforces heartbeat floor on existing agents."""
-    if not current_user.tenant_id:
+    resolved_tenant_id = _resolve_quota_tenant_id(current_user, tenant_id)
+    if not resolved_tenant_id:
         raise HTTPException(status_code=400, detail="No tenant assigned")
 
-    result = await db.execute(select(Tenant).where(Tenant.id == current_user.tenant_id))
+    result = await db.execute(select(Tenant).where(Tenant.id == resolved_tenant_id))
     tenant = result.scalar_one_or_none()
     if not tenant:
         raise HTTPException(status_code=404, detail="Tenant not found")
@@ -574,6 +610,22 @@ async def update_tenant_quotas(
     if data.max_webhook_rate_ceiling is not None:
         tenant.max_webhook_rate_ceiling = data.max_webhook_rate_ceiling
 
+    if data.utility_model_id is not None:
+        if data.utility_model_id == "":
+            tenant.utility_model_id = None
+        else:
+            import uuid as _uuid
+            model_id = _uuid.UUID(data.utility_model_id)
+            model_result = await db.execute(select(LLMModel).where(LLMModel.id == model_id))
+            model = model_result.scalar_one_or_none()
+            if not model:
+                raise HTTPException(status_code=404, detail="Model not found")
+            if not model.tenant_id or model.tenant_id != resolved_tenant_id:
+                raise HTTPException(status_code=400, detail="Model is not tenant-scoped to this tenant")
+            if not model.enabled:
+                raise HTTPException(status_code=400, detail="Model is disabled")
+            tenant.utility_model_id = model.id
+
     await db.commit()
     return {
         "message": "Tenant quotas updated",
@@ -768,8 +820,8 @@ async def _sync_tenant_sso_state(db: AsyncSession, tenant_id: uuid.UUID):
     count_result = await db.execute(
         select(func.count(IdentityProvider.id)).where(
             IdentityProvider.tenant_id == tenant_id,
-            IdentityProvider.sso_login_enabled == True,
-            IdentityProvider.is_active == True,
+            IdentityProvider.sso_login_enabled,
+            IdentityProvider.is_active,
         )
     )
     active_sso_count = count_result.scalar() or 0
@@ -1272,7 +1324,6 @@ async def delete_identity_provider(
 
 # ─── Org Structure ──────────────────────────────────────
 
-from app.models.org import OrgDepartment, OrgMember
 
 
 @router.get("/org/departments")
diff --git a/backend/app/api/feishu.py b/backend/app/api/feishu.py
index 00fe32737..b43e216d6 100644
--- a/backend/app/api/feishu.py
+++ b/backend/app/api/feishu.py
@@ -5,9 +5,9 @@
 import uuid
 from collections.abc import Awaitable, Callable
 
-from fastapi import APIRouter, Depends, HTTPException, Request, Response, status
+from fastapi import APIRouter, Depends, HTTPException, Request, status
 from loguru import logger
-from sqlalchemy import select, or_
+from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.core.permissions import check_agent_access, is_agent_creator, is_agent_expired
@@ -15,7 +15,6 @@
 from app.database import get_db
 from app.models.channel_config import ChannelConfig
 from app.models.user import User
-from app.models.identity import IdentityProvider
 from app.schemas.schemas import ChannelConfigCreate, ChannelConfigOut, TokenResponse, UserOut
 from app.services.feishu_service import feishu_service
 
@@ -259,7 +258,7 @@ async def _save_feishu_tool_call(
 
 # ─── OAuth ──────────────────────────────────────────────
 
-from fastapi.responses import HTMLResponse, Response
+from fastapi.responses import HTMLResponse
 
 @router.get("/auth/feishu/callback")
 @router.post("/auth/feishu/callback", response_model=TokenResponse)
@@ -666,7 +665,6 @@ async def process_feishu_event(agent_id: uuid.UUID, body: dict, db: AsyncSession
             history = _build_llm_history_from_chat_messages(list(reversed(history_msgs)))
 
             # --- Resolve Feishu sender identity & find/create platform user ---
-            import uuid as _uuid
             import httpx as _httpx
 
             sender_name = ""
@@ -722,7 +720,9 @@ async def process_feishu_event(agent_id: uuid.UUID, body: dict, db: AsyncSession
                             # Cache sender info so feishu_user_search can find them by name
                             if sender_name and sender_open_id:
                                 try:
-                                    import pathlib as _pl, json as _cj, time as _ct
+                                    import pathlib as _pl
+                                    import json as _cj
+                                    import time as _ct
                                     _safe_id = str(agent_id).replace("..", "").replace("/", "")
                                     _cache = _pl.Path(f"/data/workspaces/{_safe_id}/feishu_contacts_cache.json")
                                     _cache.parent.mkdir(parents=True, exist_ok=True)
@@ -1194,17 +1194,16 @@ async def _handle_feishu_file(
     chat_id,
 ):
     """Handle incoming file or image messages from Feishu (runs as a background task)."""
-    import asyncio, random, json
+    import asyncio
+    import random
+    import json
     from pathlib import Path
     from app.config import get_settings
     from app.models.audit import ChatMessage
     from app.models.agent import Agent as AgentModel
-    from app.models.user import User as UserModel
     from app.services.channel_session import find_or_create_channel_session
-    from app.core.security import hash_password
     from app.database import async_session as _async_session
     from datetime import datetime as _dt, timezone as _tz
-    import uuid as _uuid
     from sqlalchemy import select as _select
 
     msg_type = message.get("message_type", "file")
diff --git a/backend/app/api/files.py b/backend/app/api/files.py
index 2dc8b7831..8e7467b8b 100644
--- a/backend/app/api/files.py
+++ b/backend/app/api/files.py
@@ -2,15 +2,17 @@
 
 import base64
 import csv
+import hashlib
 import io
 import mimetypes
-import os
+import re
 import uuid
+import zipfile
 from pathlib import Path
 
 import aiofiles
-from fastapi import APIRouter, Depends, HTTPException, status
-from fastapi.responses import FileResponse, Response
+from fastapi import APIRouter, Depends, Form, HTTPException, status
+from fastapi.responses import FileResponse
 from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
 from pydantic import BaseModel
 
@@ -21,6 +23,7 @@
 from app.models.user import User
 from app.models.workspace import WorkspaceFileRevision
 from app.services.focus_service import is_focus_file_path
+from app.services.skill_archive_import import diff_skill_manifests, inspect_skill_archive
 from app.services.workspace_collaboration import (
     acquire_edit_lock,
     content_hash,
@@ -127,6 +130,19 @@ class RestoreRevisionBody(BaseModel):
 }
 
 
+def _is_protected_workspace_path(rel_path: str) -> bool:
+    normalized = (rel_path or "").strip().strip("/")
+    if not normalized:
+        return False
+    parts = Path(normalized).parts
+    return any(part == ".openclaw" for part in parts)
+
+
+def _ensure_not_protected_workspace_path(rel_path: str) -> None:
+    if _is_protected_workspace_path(rel_path):
+        raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail="Access denied for protected workspace path")
+
+
 def _agent_base_dir(agent_id: uuid.UUID) -> Path:
     return Path(settings.AGENT_DATA_DIR) / str(agent_id)
 
@@ -154,21 +170,6 @@ def _visible_path(agent_id: uuid.UUID, rel_path: str, tenant_id: uuid.UUID | Non
     return resolved.path, resolved.relative_root, resolved.is_enterprise
 
 
-async def _require_agent_file_delete_access(
-    db: AsyncSession,
-    current_user: User,
-    agent_id: uuid.UUID,
-) -> None:
-    """Allow destructive workspace file operations only for managers/admins."""
-    _agent, access_level = await check_agent_access(db, current_user, agent_id)
-    if access_level == "manage" or current_user.role in ("platform_admin", "org_admin", "super_admin"):
-        return
-    raise HTTPException(
-        status_code=status.HTTP_403_FORBIDDEN,
-        detail="Only agent managers or admins can delete files",
-    )
-
-
 @router.get("/", response_model=list[FileInfo])
 async def list_files(
     agent_id: uuid.UUID,
@@ -178,6 +179,7 @@ async def list_files(
 ):
     """List files and directories in an agent's file system."""
     await check_agent_access(db, current_user, agent_id)
+    _ensure_not_protected_workspace_path(path)
     target, base_abs, is_enterprise = _visible_path(agent_id, path, current_user.tenant_id)
     if is_enterprise:
         target.mkdir(parents=True, exist_ok=True)
@@ -203,6 +205,8 @@ async def list_files(
     for entry in sorted(target.iterdir(), key=lambda e: (not e.is_dir(), e.name)):
         if entry.name == '.gitkeep':
             continue
+        if entry.name == ".openclaw":
+            continue
         if not path and entry.name.lower() in {"focus.md", "agenda.md"}:
             continue
         if not path and entry.name == "enterprise_info":
@@ -231,6 +235,7 @@ async def read_file(
 ):
     """Read the content of a file."""
     await check_agent_access(db, current_user, agent_id)
+    _ensure_not_protected_workspace_path(path)
     if is_focus_file_path(path):
         raise HTTPException(
             status_code=status.HTTP_410_GONE,
@@ -501,6 +506,7 @@ async def download_file(
         raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="User not found or inactive")
 
     await check_agent_access(db, user, agent_id)
+    _ensure_not_protected_workspace_path(path)
     target, _, _ = _visible_path(agent_id, path, user.tenant_id)
     if not target.exists() or not target.is_file():
         raise HTTPException(status_code=status.HTTP_404_NOT_FOUND, detail="File not found")
@@ -671,7 +677,7 @@ async def delete_file(
     db: AsyncSession = Depends(get_db),
 ):
     """Delete a file."""
-    await _require_agent_file_delete_access(db, current_user, agent_id)
+    await check_agent_access(db, current_user, agent_id)
     if is_focus_file_path(path):
         raise HTTPException(
             status_code=status.HTTP_410_GONE,
@@ -714,7 +720,7 @@ async def import_skill_to_agent(
     await check_agent_access(db, current_user, agent_id)
 
     from sqlalchemy.orm import selectinload
-    from app.models.skill import Skill, SkillFile
+    from app.models.skill import Skill
 
     # Load the global skill with its files
     result = await db.execute(
@@ -757,6 +763,106 @@ async def import_skill_to_agent(
 
 upload_router = APIRouter(prefix="/agents/{agent_id}/files", tags=["files"])
 DEFAULT_UPLOAD_DIR = "workspace/uploads"
+MAX_ZIP_SIZE = 50 * 1024 * 1024  # 50MB compressed
+MAX_ZIP_FILES = 1000
+MAX_UNCOMPRESSED = 500 * 1024 * 1024  # 500MB uncompressed
+_VALID_ROOT_NAME = re.compile(r"^[a-zA-Z0-9_-]+$")
+
+
+def _validate_zip(content: bytes) -> tuple[zipfile.ZipFile, list[str], str]:
+    """Validate and open a zip archive."""
+    if len(content) > MAX_ZIP_SIZE:
+        raise HTTPException(status_code=400, detail=f"Zip file too large (max {MAX_ZIP_SIZE // 1024 // 1024}MB)")
+
+    try:
+        zf = zipfile.ZipFile(io.BytesIO(content))
+    except zipfile.BadZipFile as exc:
+        raise HTTPException(status_code=400, detail="Invalid zip file") from exc
+
+    names = zf.namelist()
+    total_uncompressed = sum(item.file_size for item in zf.infolist())
+    if total_uncompressed > MAX_UNCOMPRESSED:
+        zf.close()
+        raise HTTPException(
+            status_code=400,
+            detail=f"Zip uncompressed size too large (max 500MB, got {total_uncompressed // 1024 // 1024}MB)",
+        )
+    if len(names) > MAX_ZIP_FILES:
+        zf.close()
+        raise HTTPException(status_code=400, detail=f"Too many files (max {MAX_ZIP_FILES})")
+
+    parts = [name.split("/")[0] for name in names if "/" in name]
+    root_folder = parts[0] if parts and all(part == parts[0] for part in parts) else ""
+
+    return zf, names, root_folder
+
+
+def _rewrite_zip_member_path(member_path: str, zip_root: str, root_name: str) -> str:
+    rel_path = member_path
+    if zip_root and rel_path.startswith(f"{zip_root}/"):
+        rel_path = rel_path[len(zip_root) + 1:]
+
+    rel_path = rel_path.strip("/")
+    if not rel_path:
+        return ""
+
+    if root_name:
+        return str(Path(root_name) / rel_path)
+
+    return rel_path
+
+
+def _read_skill_dir_manifest(skill_dir: Path) -> dict[str, str]:
+    if not skill_dir.exists():
+        return {}
+
+    manifest: dict[str, str] = {}
+    for path in sorted(skill_dir.rglob("*")):
+        if not path.is_file():
+            continue
+        manifest[path.relative_to(skill_dir).as_posix()] = path.read_text(encoding="utf-8", errors="replace")
+    return manifest
+
+
+def _skill_target_state_digest(target_exists: bool, manifest: dict[str, str]) -> str:
+    digest = hashlib.sha256()
+    digest.update(b"exists\0")
+    digest.update(b"1" if target_exists else b"0")
+    digest.update(b"\0")
+    for path in sorted(manifest):
+        digest.update(path.encode("utf-8"))
+        digest.update(b"\0")
+        digest.update(manifest[path].encode("utf-8"))
+        digest.update(b"\0")
+    return digest.hexdigest()
+
+
+def _apply_skill_dir_exact_sync(skill_dir: Path, uploaded_files: dict[str, str]) -> None:
+    skill_dir.mkdir(parents=True, exist_ok=True)
+    skill_root = skill_dir.resolve()
+
+    for rel_path, content in uploaded_files.items():
+        out_path = (skill_root / rel_path).resolve()
+        if not out_path.is_relative_to(skill_root):
+            raise HTTPException(status_code=400, detail="Invalid skill archive path")
+        out_path.parent.mkdir(parents=True, exist_ok=True)
+        out_path.write_text(content, encoding="utf-8")
+
+    existing_paths = {
+        path.relative_to(skill_root).as_posix(): path
+        for path in skill_root.rglob("*")
+        if path.is_file()
+    }
+    for rel_path, path in existing_paths.items():
+        if rel_path in uploaded_files:
+            continue
+        path.unlink()
+
+    for directory in sorted((path for path in skill_root.rglob("*") if path.is_dir()), reverse=True):
+        try:
+            directory.rmdir()
+        except OSError:
+            continue
 
 
 @upload_router.post("/upload")
@@ -811,6 +917,164 @@ async def upload_file_to_workspace(
     }
 
 
+@upload_router.post("/preview-zip")
+async def preview_zip(
+    agent_id: uuid.UUID,
+    file: UploadFileType = FastFile(...),
+    current_user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+):
+    """Preview a zip archive before extracting it into agent skills."""
+    await check_agent_access(db, current_user, agent_id)
+
+    content = await file.read()
+    zf, names, root_folder = _validate_zip(content)
+    with zf:
+        files = [name for name in names if not name.endswith("/")]
+        return {
+            "root_folder": root_folder,
+            "files": files[:200],
+            "total": len(files),
+        }
+
+
+@upload_router.post("/extract-zip")
+async def extract_zip(
+    agent_id: uuid.UUID,
+    file: UploadFileType = FastFile(...),
+    target_path: str = Form(""),
+    root_name: str = Form(""),
+    current_user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+):
+    """Extract a zip archive into the agent's skills workspace."""
+    await check_agent_access(db, current_user, agent_id)
+
+    if root_name and not _VALID_ROOT_NAME.match(root_name):
+        raise HTTPException(status_code=400, detail="Invalid root folder name (alphanumeric, hyphens, underscores only)")
+
+    content = await file.read()
+    zf, _names, zip_root = _validate_zip(content)
+
+    skills_root = (_agent_base_dir(agent_id) / "skills").resolve()
+    if target_path:
+        target_dir = (skills_root / target_path).resolve()
+        if not str(target_dir).startswith(str(skills_root)):
+            raise HTTPException(status_code=403, detail="Path traversal not allowed")
+    else:
+        target_dir = skills_root
+
+    with zf:
+        extracted: list[str] = []
+        for info in zf.infolist():
+            if info.is_dir() or info.external_attr >> 28 == 0xA:
+                continue
+            if info.filename.startswith("/") or ".." in Path(info.filename).parts:
+                continue
+
+            rel_path = _rewrite_zip_member_path(info.filename, zip_root, root_name)
+            if not rel_path:
+                continue
+
+            out_path = (target_dir / rel_path).resolve()
+            if not str(out_path).startswith(str(skills_root)):
+                continue
+
+            out_path.parent.mkdir(parents=True, exist_ok=True)
+            out_path.write_bytes(zf.read(info.filename))
+            extracted.append(str(Path(target_path) / rel_path) if target_path else rel_path)
+
+    from app.services.skill_map import invalidate_cache
+    invalidate_cache(agent_id)
+
+    return {
+        "status": "ok",
+        "extracted": len(extracted),
+        "files": extracted[:50],
+    }
+
+
+@upload_router.post("/preview-skill-folder")
+async def preview_skill_folder_upload(
+    agent_id: uuid.UUID,
+    file: UploadFileType = FastFile(...),
+    target_folder: str = Form(...),
+    current_user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+):
+    await check_agent_access(db, current_user, agent_id)
+
+    if not _VALID_ROOT_NAME.match(target_folder):
+        raise HTTPException(status_code=400, detail="Invalid target folder name")
+
+    archive = inspect_skill_archive(await file.read(), target_folder=target_folder)
+    skill_dir = _agent_base_dir(agent_id) / "skills" / target_folder
+    target_exists = skill_dir.exists()
+    existing_manifest = _read_skill_dir_manifest(skill_dir)
+    target_state_digest = _skill_target_state_digest(target_exists, existing_manifest)
+    diff = diff_skill_manifests(archive["files"], existing_manifest)
+    mode = "update" if target_exists else "create"
+
+    return {
+        "target_folder": target_folder,
+        "mode": mode,
+        "digest": archive["digest"],
+        "target_state_digest": target_state_digest,
+        "total_files": archive["total_files"],
+        "added_count": len(diff["added"]),
+        "changed_count": len(diff["changed"]),
+        "deleted_count": len(diff["deleted"]),
+        "added_paths": diff["added"][:50],
+        "changed_paths": diff["changed"][:50],
+        "deleted_paths": diff["deleted"][:50],
+    }
+
+
+@upload_router.post("/apply-skill-folder")
+async def apply_skill_folder_upload(
+    agent_id: uuid.UUID,
+    file: UploadFileType = FastFile(...),
+    target_folder: str = Form(...),
+    replace_confirmed: bool = Form(False),
+    expected_digest: str = Form(...),
+    expected_target_state_digest: str = Form(...),
+    current_user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+):
+    await check_agent_access(db, current_user, agent_id)
+
+    if not _VALID_ROOT_NAME.match(target_folder):
+        raise HTTPException(status_code=400, detail="Invalid target folder name")
+
+    archive = inspect_skill_archive(await file.read(), target_folder=target_folder)
+    if archive["digest"] != expected_digest:
+        raise HTTPException(status_code=409, detail="Uploaded archive no longer matches preview")
+
+    skill_dir = _agent_base_dir(agent_id) / "skills" / target_folder
+    target_exists = skill_dir.exists()
+    existing_manifest = _read_skill_dir_manifest(skill_dir)
+    current_target_state_digest = _skill_target_state_digest(target_exists, existing_manifest)
+    if current_target_state_digest != expected_target_state_digest:
+        raise HTTPException(status_code=409, detail="Target folder changed since preview")
+    if target_exists and not replace_confirmed:
+        raise HTTPException(status_code=409, detail="Target folder already exists and requires confirmation")
+
+    diff = diff_skill_manifests(archive["files"], existing_manifest)
+    _apply_skill_dir_exact_sync(skill_dir, archive["files"])
+
+    from app.services import skill_map
+
+    skill_map.invalidate_cache(agent_id)
+
+    return {
+        "status": "ok",
+        "mode": "update" if target_exists else "create",
+        "target_folder": target_folder,
+        "files_written": len(archive["files"]),
+        "deleted_count": len(diff["deleted"]),
+    }
+
+
 # ─── Enterprise Knowledge Base ─────────────────────────────────
 
 enterprise_kb_router = APIRouter(prefix="/enterprise/knowledge-base", tags=["enterprise"])
@@ -868,7 +1132,6 @@ async def upload_enterprise_kb_file(
     current_user: User = Depends(get_current_user),
 ):
     """Upload a file to enterprise knowledge base (tenant-scoped)."""
-    from app.core.security import require_role
     # Only admin can upload to enterprise KB
     if current_user.role not in ("platform_admin", "org_admin"):
         raise HTTPException(status_code=403, detail="Only admins can upload to enterprise knowledge base")
diff --git a/backend/app/api/messages.py b/backend/app/api/messages.py
index 528e7fe9c..f044ad95b 100644
--- a/backend/app/api/messages.py
+++ b/backend/app/api/messages.py
@@ -5,11 +5,9 @@
 This API now queries chat_sessions + chat_messages for the inbox.
 """
 
-import uuid
-from datetime import datetime, timezone
 
-from fastapi import APIRouter, Depends, HTTPException, Query
-from sqlalchemy import select, func
+from fastapi import APIRouter, Depends, Query
+from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.core.security import get_current_user
diff --git a/backend/app/api/okr.py b/backend/app/api/okr.py
index 206dd7b23..be97ff678 100644
--- a/backend/app/api/okr.py
+++ b/backend/app/api/okr.py
@@ -30,14 +30,13 @@
 from app.models.identity import IdentityProvider
 from app.models.okr import (
     CompanyReport,
-    MemberDailyReport,
-    OKRAlignment,
     OKRKeyResult,
     OKRObjective,
     OKRProgressLog,
     OKRSettings,
     WorkReport,
 )
+from app.models.user import User
 
 router = APIRouter(prefix="/api/okr", tags=["okr"])
 
@@ -596,7 +595,6 @@ async def sync_okr_relationships(user=Depends(get_current_user)):
     if getattr(user, "role", None) not in ("org_admin", "platform_admin"):
         raise HTTPException(403, "Only org admins can sync OKR relationships")
 
-    from app.models.agent import Agent
 
     async with async_session() as db:
         # Locate the OKR Agent from settings
diff --git a/backend/app/api/organization.py b/backend/app/api/organization.py
index 578e0a5f8..b288eb907 100644
--- a/backend/app/api/organization.py
+++ b/backend/app/api/organization.py
@@ -28,7 +28,7 @@ async def list_users(
     query = (
         select(User)
         .options(selectinload(User.identity))
-        .where(User.is_active == True)
+        .where(User.is_active)
     )
 
     target_tenant_id = current_user.tenant_id
diff --git a/backend/app/api/plaza.py b/backend/app/api/plaza.py
index 75f1b88ed..b71315750 100644
--- a/backend/app/api/plaza.py
+++ b/backend/app/api/plaza.py
@@ -23,7 +23,7 @@ def _hidden_agent_exists_for_author(author_id_column):
     return exists().where(
         and_(
             AgentModel.id == author_id_column,
-            (AgentModel.is_system == True) | (AgentModel.access_mode != "company"),
+            (AgentModel.is_system) | (AgentModel.access_mode != "company"),
         )
     )
 
@@ -152,7 +152,6 @@ async def list_posts(
     System agent posts are excluded from the feed — system agents (is_system=True)
     communicate through internal Chat and reports rather than Plaza.
     """
-    from app.models.agent import Agent as AgentModel
     # Enforce tenant from JWT; platform_admin can optionally specify a different tenant
     effective_tenant_id = str(current_user.tenant_id) if current_user.tenant_id else None
     if tenant_id and current_user.role == "platform_admin":
@@ -305,7 +304,7 @@ async def get_post(post_id: uuid.UUID, current_user: User = Depends(get_current_
             hidden_agents = await db.execute(
                 select(AgentModel.id).where(
                     AgentModel.id.in_(agent_comment_ids),
-                    (AgentModel.is_system == True) | (AgentModel.access_mode != "company"),
+                    (AgentModel.is_system) | (AgentModel.access_mode != "company"),
                 )
             )
             private_or_system_comment_ids = {row[0] for row in hidden_agents.all()}
diff --git a/backend/app/api/relationships.py b/backend/app/api/relationships.py
index 2b45b10d6..ffb30b076 100644
--- a/backend/app/api/relationships.py
+++ b/backend/app/api/relationships.py
@@ -1,6 +1,5 @@
 """Agent relationship management API — human + agent-to-agent."""
 
-import json
 import uuid
 from pathlib import Path
 
diff --git a/backend/app/api/schedules.py b/backend/app/api/schedules.py
index 60132e9f4..6a9a50d7c 100644
--- a/backend/app/api/schedules.py
+++ b/backend/app/api/schedules.py
@@ -9,7 +9,7 @@
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.core.permissions import check_agent_access, is_agent_creator, is_agent_expired
-from app.core.security import get_current_user, require_role
+from app.core.security import get_current_user
 from app.database import get_db
 from app.models.schedule import AgentSchedule
 from app.models.user import User
diff --git a/backend/app/api/skills.py b/backend/app/api/skills.py
index 9b28a1229..3de360375 100644
--- a/backend/app/api/skills.py
+++ b/backend/app/api/skills.py
@@ -2,6 +2,7 @@
 
 import asyncio
 import base64
+import hashlib
 import io
 import os
 import re
@@ -9,16 +10,17 @@
 from pathlib import Path
 
 import httpx
-from fastapi import APIRouter, Depends, HTTPException
+from fastapi import APIRouter, Depends, File as FastFile, Form, HTTPException, UploadFile as UploadFileType
 from pydantic import BaseModel
 from sqlalchemy import select
+from sqlalchemy.exc import IntegrityError
 from sqlalchemy.orm import selectinload
 
 from app.database import async_session
 from app.models.skill import Skill, SkillFile
 from app.core.security import get_current_admin, get_current_user, require_role
 from app.models.user import User
-from loguru import logger
+from app.services.skill_archive_import import diff_skill_manifests, inspect_skill_archive
 
 router = APIRouter(prefix="/skills", tags=["skills"])
 
@@ -27,6 +29,7 @@
 GITHUB_API = "https://api.github.com"
 
 MAX_SKILL_SIZE = 512_000  # 500 KB total limit per skill
+_VALID_SKILL_FOLDER_NAME = re.compile(r"^[a-zA-Z0-9_-]+$")
 
 
 async def _get_tenant_setting(tenant_id: str | None, key: str) -> str:
@@ -326,6 +329,191 @@ def _apply_skill_scope(query, current_user: User):
     return query.where(_or(Skill.tenant_id.is_(None), Skill.tenant_id == current_user.tenant_id))
 
 
+def _registry_manifest(skill: Skill | None) -> dict[str, str]:
+    if not skill:
+        return {}
+    return {file.path: file.content for file in skill.files}
+
+
+def _registry_target_state_digest(skill: Skill | None) -> str:
+    manifest = _registry_manifest(skill)
+    digest = hashlib.sha256()
+    digest.update(b"exists\0")
+    digest.update(b"1" if skill else b"0")
+    digest.update(b"\0")
+    for path in sorted(manifest):
+        digest.update(path.encode("utf-8"))
+        digest.update(b"\0")
+        digest.update(manifest[path].encode("utf-8"))
+        digest.update(b"\0")
+    return digest.hexdigest()
+
+
+async def _load_skill_by_folder(db, *, target_folder: str, current_user: User) -> Skill | None:
+    query = select(Skill).where(Skill.folder_name == target_folder).options(selectinload(Skill.files))
+    result = await db.execute(_apply_skill_scope(query, current_user))
+    return result.scalar_one_or_none()
+
+
+def _validate_skill_folder_name(target_folder: str) -> None:
+    if not _VALID_SKILL_FOLDER_NAME.match(target_folder):
+        raise HTTPException(status_code=400, detail="Invalid target folder name")
+
+
+def _registry_archive_size(files: dict[str, str]) -> int:
+    return sum(len(content.encode("utf-8")) for content in files.values())
+
+
+def _enforce_registry_skill_size(files: dict[str, str]) -> None:
+    total_size = _registry_archive_size(files)
+    if total_size > MAX_SKILL_SIZE:
+        raise HTTPException(413, f"Skill exceeds size limit ({MAX_SKILL_SIZE // 1024}KB)")
+
+
+async def _get_global_skill_by_folder(db, *, target_folder: str) -> Skill | None:
+    query = select(Skill).where(Skill.folder_name == target_folder).options(selectinload(Skill.files))
+    result = await db.execute(query)
+    return result.scalar_one_or_none()
+
+
+async def _get_global_skill_by_name(db, *, name: str) -> Skill | None:
+    query = select(Skill).where(Skill.name == name).options(selectinload(Skill.files))
+    result = await db.execute(query)
+    return result.scalar_one_or_none()
+
+
+async def _ensure_registry_upload_conflicts(
+    db,
+    *,
+    target_folder: str,
+    resolved_name: str,
+    visible_skill: Skill | None,
+) -> None:
+    global_folder_skill = await _get_global_skill_by_folder(db, target_folder=target_folder)
+    if global_folder_skill and (visible_skill is None or global_folder_skill.id != visible_skill.id):
+        raise HTTPException(status_code=409, detail="A skill with this folder already exists")
+
+    global_name_skill = await _get_global_skill_by_name(db, name=resolved_name)
+    if global_name_skill and (visible_skill is None or global_name_skill.id != visible_skill.id):
+        raise HTTPException(status_code=409, detail="A skill with this name already exists")
+
+
+async def preview_folder_upload_from_archive(data: bytes, *, target_folder: str, current_user: User) -> dict:
+    _validate_skill_folder_name(target_folder)
+    archive = inspect_skill_archive(data, target_folder=target_folder)
+    _enforce_registry_skill_size(archive["files"])
+
+    async with async_session() as db:
+        skill = await _load_skill_by_folder(db, target_folder=target_folder, current_user=current_user)
+        skill_md = archive["files"]["SKILL.md"]
+        frontmatter = _parse_skill_md_frontmatter(skill_md)
+        resolved_name = frontmatter.get("name", skill.name if skill else target_folder.replace("-", " ").title())
+        await _ensure_registry_upload_conflicts(
+            db,
+            target_folder=target_folder,
+            resolved_name=resolved_name,
+            visible_skill=skill,
+        )
+
+    existing_manifest = _registry_manifest(skill)
+    diff = diff_skill_manifests(archive["files"], existing_manifest)
+    mode = "update" if skill else "create"
+
+    return {
+        "target_folder": target_folder,
+        "mode": mode,
+        "digest": archive["digest"],
+        "target_state_digest": _registry_target_state_digest(skill),
+        "total_files": archive["total_files"],
+        "added_count": len(diff["added"]),
+        "changed_count": len(diff["changed"]),
+        "deleted_count": len(diff["deleted"]),
+        "added_paths": diff["added"],
+        "changed_paths": diff["changed"],
+        "deleted_paths": diff["deleted"],
+    }
+
+
+async def apply_folder_upload_from_archive(
+    data: bytes,
+    *,
+    target_folder: str,
+    expected_digest: str,
+    expected_target_state_digest: str,
+    replace_confirmed: bool,
+    current_user: User,
+) -> dict:
+    _validate_skill_folder_name(target_folder)
+    archive = inspect_skill_archive(data, target_folder=target_folder)
+    _enforce_registry_skill_size(archive["files"])
+    if archive["digest"] != expected_digest:
+        raise HTTPException(status_code=409, detail="Uploaded archive no longer matches preview")
+
+    async with async_session() as db:
+        skill = await _load_skill_by_folder(db, target_folder=target_folder, current_user=current_user)
+        current_target_state_digest = _registry_target_state_digest(skill)
+        if current_target_state_digest != expected_target_state_digest:
+            raise HTTPException(status_code=409, detail="Target folder changed since preview")
+
+        existing_manifest = _registry_manifest(skill)
+        mode = "update" if skill else "create"
+        skill_md = archive["files"]["SKILL.md"]
+        frontmatter = _parse_skill_md_frontmatter(skill_md)
+        resolved_name = frontmatter.get("name", skill.name if skill else target_folder.replace("-", " ").title())
+        await _ensure_registry_upload_conflicts(
+            db,
+            target_folder=target_folder,
+            resolved_name=resolved_name,
+            visible_skill=skill,
+        )
+
+        if skill:
+            _ensure_skill_write_access(skill, current_user)
+            if not replace_confirmed:
+                raise HTTPException(status_code=409, detail="Target folder already exists and requires confirmation")
+        else:
+            skill = Skill(
+                name=target_folder.replace("-", " ").title(),
+                description="",
+                category="general",
+                icon="📋",
+                folder_name=target_folder,
+                is_builtin=False,
+                tenant_id=current_user.tenant_id,
+            )
+            db.add(skill)
+            await db.flush()
+
+        skill.name = frontmatter.get("name", skill.name)
+        skill.description = frontmatter.get("description", skill.description)
+        skill.icon = frontmatter.get("icon", skill.icon)
+        skill.category = frontmatter.get("category", skill.category)
+
+        existing_files = list(skill.files) if getattr(skill, "files", None) is not None else []
+        for existing_file in existing_files:
+            await db.delete(existing_file)
+        await db.flush()
+
+        for path, content in archive["files"].items():
+            db.add(SkillFile(skill_id=skill.id, path=path, content=content.replace("\x00", "")))
+
+        diff = diff_skill_manifests(archive["files"], existing_manifest)
+        try:
+            await db.commit()
+        except IntegrityError as exc:
+            if hasattr(db, "rollback"):
+                await db.rollback()
+            raise HTTPException(status_code=409, detail="Skill name or folder already exists") from exc
+
+    return {
+        "status": "ok",
+        "mode": mode,
+        "target_folder": target_folder,
+        "files_written": len(archive["files"]),
+        "deleted_count": len(diff["deleted"]),
+    }
+
+
 def _ensure_skill_write_access(skill: Skill, current_user: User):
     """Allow platform admins to edit everything; tenant admins can edit
     tenant-owned skills AND builtin (preset) skills visible to their tenant.
@@ -656,6 +844,38 @@ async def preview_url_import(body: UrlImportIn, current_user: User = Depends(get
     }
 
 
+@router.post("/upload-folder/preview")
+async def preview_folder_upload(
+    file: UploadFileType = FastFile(...),
+    target_folder: str = Form(...),
+    current_user: User = Depends(get_current_admin),
+):
+    return await preview_folder_upload_from_archive(
+        await file.read(),
+        target_folder=target_folder,
+        current_user=current_user,
+    )
+
+
+@router.post("/upload-folder/apply")
+async def apply_folder_upload(
+    file: UploadFileType = FastFile(...),
+    target_folder: str = Form(...),
+    expected_digest: str = Form(...),
+    replace_confirmed: bool = Form(False),
+    expected_target_state_digest: str = Form(...),
+    current_user: User = Depends(get_current_admin),
+):
+    return await apply_folder_upload_from_archive(
+        await file.read(),
+        target_folder=target_folder,
+        expected_digest=expected_digest,
+        replace_confirmed=replace_confirmed,
+        expected_target_state_digest=expected_target_state_digest,
+        current_user=current_user,
+    )
+
+
 # ─── Standard CRUD ────────────────────────────────────
 
 
diff --git a/backend/app/api/slack.py b/backend/app/api/slack.py
index a7006f9dd..9e3a49ae8 100644
--- a/backend/app/api/slack.py
+++ b/backend/app/api/slack.py
@@ -5,7 +5,7 @@
 import time
 import uuid
 
-from fastapi import APIRouter, Depends, HTTPException, Request, Response, status
+from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from loguru import logger
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
diff --git a/backend/app/api/sso.py b/backend/app/api/sso.py
index 98282efd0..7be4df8a9 100644
--- a/backend/app/api/sso.py
+++ b/backend/app/api/sso.py
@@ -1,15 +1,14 @@
-import os
 import uuid
 from datetime import datetime, timedelta, timezone
 from urllib.parse import quote
 
-from fastapi import APIRouter, Depends, HTTPException, Request, status
+from fastapi import APIRouter, Depends, HTTPException, Request
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.database import get_db
 from app.models.identity import SSOScanSession, IdentityProvider
-from app.schemas.schemas import TokenResponse, UserOut
+from app.schemas.schemas import UserOut
 
 router = APIRouter(tags=["sso"])
 
@@ -91,8 +90,8 @@ async def get_sso_config(sid: uuid.UUID, request: Request, db: AsyncSession = De
         
     # 2. Query IdentityProviders for this tenant (only those that are active AND SSO-enabled)
     query = select(IdentityProvider).where(
-        IdentityProvider.is_active == True,
-        IdentityProvider.sso_login_enabled == True,
+        IdentityProvider.is_active,
+        IdentityProvider.sso_login_enabled,
     )
     if session.tenant_id:
         query = query.where(IdentityProvider.tenant_id == session.tenant_id)
diff --git a/backend/app/api/tasks.py b/backend/app/api/tasks.py
index 5a3f01ecb..f0ade9f03 100644
--- a/backend/app/api/tasks.py
+++ b/backend/app/api/tasks.py
@@ -130,7 +130,7 @@ async def get_task_logs(
     result = await db.execute(
         select(TaskLog).where(TaskLog.task_id == task_id).order_by(TaskLog.created_at.asc())
     )
-    return [TaskLogOut.model_validate(l) for l in result.scalars().all()]
+    return [TaskLogOut.model_validate(log_entry) for log_entry in result.scalars().all()]
 
 
 @router.post("/{task_id}/logs", response_model=TaskLogOut, status_code=status.HTTP_201_CREATED)
diff --git a/backend/app/api/teams.py b/backend/app/api/teams.py
index 09368ebe1..77091c9bd 100644
--- a/backend/app/api/teams.py
+++ b/backend/app/api/teams.py
@@ -1,7 +1,5 @@
 """Microsoft Teams Bot Channel API routes."""
 
-import hashlib
-import hmac
 import json
 import os
 import time
@@ -9,7 +7,7 @@
 from datetime import datetime, timezone
 
 import httpx
-from fastapi import APIRouter, Depends, HTTPException, Request, Response, status
+from fastapi import APIRouter, Depends, HTTPException, Request, Response
 from loguru import logger
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -26,10 +24,7 @@
 from app.services.channel_session import find_or_create_channel_session
 from app.api.feishu import _call_agent_llm
 from app.services.agent_tools import channel_file_sender as _cfs_s
-from app.core.security import hash_password as _hp
 from pathlib import Path as _Path
-import asyncio as _asyncio
-import random as _random
 
 settings = get_settings()
 
@@ -77,7 +72,7 @@ async def _get_teams_access_token(config: ChannelConfig) -> str | None:
             await credential.close()
             return token.token
         except ImportError:
-            logger.error(f"Teams: azure-identity package not installed. Install it with: pip install azure-identity")
+            logger.error("Teams: azure-identity package not installed. Install it with: pip install azure-identity")
             return None
         except Exception as e:
             logger.exception(f"Teams: Failed to get access token via managed identity for agent {agent_id}: {e}")
@@ -109,7 +104,7 @@ async def _get_teams_access_token(config: ChannelConfig) -> str | None:
                     error_description = error_json.get("error_description", "No description")
                     error_code = error_json.get("error", "unknown")
                     logger.error(f"Teams: OAuth token request failed for agent {agent_id}: status={resp.status_code}, error={error_code}, description={error_description}")
-                except:
+                except Exception:
                     logger.error(f"Teams: OAuth token request failed for agent {agent_id}: status={resp.status_code}, response={error_body[:500]}")
                 logger.error(f"Teams: Token URL={token_url}, tenant_id={tenant_id}, client_id={app_id[:20]}...")
                 return None
@@ -131,7 +126,7 @@ async def _get_teams_access_token(config: ChannelConfig) -> str | None:
                 error_description = error_json.get("error_description", "No description")
                 error_code = error_json.get("error", "unknown")
                 logger.error(f"Teams: OAuth token HTTP error for agent {agent_id}: status={e.response.status_code}, error={error_code}, description={error_description}")
-        except:
+        except Exception:
             logger.error(f"Teams: OAuth token HTTP error for agent {agent_id}: status={e.response.status_code if hasattr(e, 'response') and e.response else 'unknown'}, response={error_body[:500]}")
         logger.error(f"Teams: Token URL={token_url}, tenant_id={tenant_id}, client_id={app_id[:20]}...")
         return None
@@ -195,7 +190,7 @@ async def _send_teams_message_single_chunk(access_token: str, service_url: str,
                     error_description = error_json.get("error", {}).get("message", error_json.get("message", "No description"))
                     error_code = error_json.get("error", {}).get("code", "unknown")
                     logger.error(f"Teams: Failed to send message: status={resp.status_code}, error={error_code}, description={error_description}")
-                except:
+                except Exception:
                     logger.error(f"Teams: Failed to send message: status={resp.status_code}, response={error_body[:500]}")
                 logger.error(f"Teams: POST URL={post_url}, conversation_id={conversation_id}, service_url={service_url}")
             resp.raise_for_status()
@@ -208,7 +203,7 @@ async def _send_teams_message_single_chunk(access_token: str, service_url: str,
                 error_description = error_json.get("error", {}).get("message", error_json.get("message", "No description"))
                 error_code = error_json.get("error", {}).get("code", "unknown")
                 logger.error(f"Teams: HTTP error sending message: status={e.response.status_code}, error={error_code}, description={error_description}")
-        except:
+        except Exception:
             logger.error(f"Teams: HTTP error sending message: status={e.response.status_code if hasattr(e, 'response') and e.response else 'unknown'}, response={error_body[:500]}")
         logger.error(f"Teams: POST URL={post_url}, conversation_id={conversation_id}, service_url={service_url}")
         raise
@@ -535,7 +530,7 @@ async def _teams_file_sender(file_path, msg: str = ""):
                     if config.app_id:
                         bot_channel_account = {"id": config.app_id}
                     else:
-                        logger.error(f"Teams: Cannot determine bot channel account ID - no recipient in activity and no app_id configured")
+                        logger.error("Teams: Cannot determine bot channel account ID - no recipient in activity and no app_id configured")
                         raise ValueError("Cannot determine bot channel account ID")
                 
                 # Get the user (sender) from the incoming activity's from field
@@ -553,7 +548,7 @@ async def _teams_file_sender(file_path, msg: str = ""):
                 }
                 logger.info(f"Teams: Attempting to send reply to conversation {conversation_id}, from={bot_channel_account.get('id')}, recipient={user_account.get('id')}")
                 await _send_teams_message(config, conversation_id, reply_activity)
-                logger.info(f"Teams: Successfully sent reply to Teams")
+                logger.info("Teams: Successfully sent reply to Teams")
             except Exception as e:
                 logger.exception(f"Teams: Failed to send message to Teams: {e}")
         else:
diff --git a/backend/app/api/tenants.py b/backend/app/api/tenants.py
index 002e0336a..0aea39520 100644
--- a/backend/app/api/tenants.py
+++ b/backend/app/api/tenants.py
@@ -274,7 +274,7 @@ async def join_company(
     ic_result = await db.execute(
         select(InvitationCode).where(
             InvitationCode.code == data.invitation_code,
-            InvitationCode.is_active == True,
+            InvitationCode.is_active,
             InvitationCode.tenant_id.is_not(None),
         )
     )
diff --git a/backend/app/api/tools.py b/backend/app/api/tools.py
index bb1cd545d..aa4deedbe 100644
--- a/backend/app/api/tools.py
+++ b/backend/app/api/tools.py
@@ -2,7 +2,7 @@
 
 import uuid
 
-from fastapi import APIRouter, Depends, HTTPException, Query
+from fastapi import APIRouter, Depends, HTTPException
 from pydantic import BaseModel
 from sqlalchemy import String, cast, select, delete, or_
 from sqlalchemy.ext.asyncio import AsyncSession
@@ -12,12 +12,9 @@
 from app.models.tool import Tool, AgentTool
 from app.models.user import User
 from app.services.tool_config import (
-    SENSITIVE_FIELD_KEYS,
-    delete_tenant_tool_config,
     decrypt_sensitive_fields,
     encrypt_sensitive_fields,
     get_sensitive_keys,
-    get_tenant_tool_config,
     get_tool_company_config,
     mask_sensitive_fields,
     meaningful_config,
@@ -161,7 +158,7 @@ async def list_tools(
     target_tenant_id = _resolve_target_tenant_id(current_user, tenant_id)
     if target_tenant_id:
         from sqlalchemy import or_ as _or
-        query = query.where(_or(Tool.tenant_id == None, Tool.tenant_id == target_tenant_id))
+        query = query.where(_or(Tool.tenant_id is None, Tool.tenant_id == target_tenant_id))
     result = await db.execute(query)
     tools = result.scalars().all()
     response = []
@@ -333,7 +330,7 @@ async def get_agent_tools(
     # All tools visible within this agent's tenant boundary
     all_tools_r = await db.execute(
         select(Tool)
-        .where(Tool.enabled == True, _agent_visible_tool_clause(agent_obj.tenant_id, assignments))
+        .where(Tool.enabled, _agent_visible_tool_clause(agent_obj.tenant_id, assignments))
         .order_by(Tool.category, Tool.name)
     )
     all_tools = all_tools_r.scalars().all()
@@ -686,7 +683,7 @@ async def get_agent_tools_with_config(
     assignments = await _load_agent_tool_assignments(db, agent_id)
     all_tools_r = await db.execute(
         select(Tool)
-        .where(Tool.enabled == True, _agent_visible_tool_clause(agent_obj2.tenant_id, assignments))
+        .where(Tool.enabled, _agent_visible_tool_clause(agent_obj2.tenant_id, assignments))
         .order_by(Tool.category, Tool.name)
     )
     all_tools = all_tools_r.scalars().all()
@@ -828,7 +825,7 @@ async def get_category_config(
     all_cat_tools = await db.execute(
         select(Tool).where(
             Tool.category == category,
-            Tool.enabled == True,
+            Tool.enabled,
             _agent_visible_tool_clause(agent.tenant_id, await _load_agent_tool_assignments(db, agent_id)),
         ).order_by((Tool.name != primary_tool_name) if primary_tool_name else Tool.name, Tool.name)
     )
diff --git a/backend/app/api/upload.py b/backend/app/api/upload.py
index 1aa0ea166..ef81dc00e 100644
--- a/backend/app/api/upload.py
+++ b/backend/app/api/upload.py
@@ -6,7 +6,6 @@
 from pathlib import Path
 
 from fastapi import APIRouter, Depends, File, HTTPException, UploadFile, Form
-from loguru import logger
 from app.core.security import get_current_user
 from app.models.user import User
 from app.config import get_settings
diff --git a/backend/app/api/users.py b/backend/app/api/users.py
index ecb85eca3..d89337f40 100644
--- a/backend/app/api/users.py
+++ b/backend/app/api/users.py
@@ -73,7 +73,7 @@ async def list_users(
         count_result = await db.execute(
             select(func.count()).select_from(Agent).where(
                 Agent.creator_id == u.id,
-                Agent.is_expired == False,
+                not Agent.is_expired,
             )
         )
         agents_count = count_result.scalar() or 0
@@ -139,7 +139,7 @@ async def update_user_quota(
     count_result = await db.execute(
         select(func.count()).select_from(Agent).where(
             Agent.creator_id == user.id,
-            Agent.is_expired == False,
+            not Agent.is_expired,
         )
     )
     agents_count = count_result.scalar() or 0
diff --git a/backend/app/api/webhooks.py b/backend/app/api/webhooks.py
index 50dd1f435..89e8849ba 100644
--- a/backend/app/api/webhooks.py
+++ b/backend/app/api/webhooks.py
@@ -60,7 +60,7 @@ async def receive_webhook(token: str, request: Request):
         result = await db.execute(
             select(AgentTrigger).where(
                 AgentTrigger.type == "webhook",
-                AgentTrigger.is_enabled == True,
+                AgentTrigger.is_enabled,
             )
         )
         triggers = result.scalars().all()
diff --git a/backend/app/api/websocket.py b/backend/app/api/websocket.py
index 0b9e37ff9..943833fd2 100644
--- a/backend/app/api/websocket.py
+++ b/backend/app/api/websocket.py
@@ -1,28 +1,232 @@
 """WebSocket chat endpoint for real-time agent conversations."""
 
 import json
+import re
 import uuid
 from datetime import datetime, timezone as tz
 
-from fastapi import APIRouter, WebSocket, WebSocketDisconnect, Query
+from fastapi import APIRouter, Depends, Query, WebSocket, WebSocketDisconnect
 from loguru import logger
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
-from sqlalchemy.orm import selectinload
 
 from app.core.security import decode_access_token
 from app.core.permissions import check_agent_access, is_agent_expired
-from app.database import async_session
+from app.core.security import get_current_user
+from app.database import async_session, get_db
 from app.models.agent import Agent
 from app.models.audit import ChatMessage
 from app.models.chat_session import ChatSession
 from app.models.llm import LLMModel
 from app.models.user import User
 from app.services.chat_session_service import ensure_primary_platform_session
-from app.services.llm import call_llm, call_llm_with_failover
+from app.services.llm import call_llm_with_failover
 
 router = APIRouter(tags=["websocket"])
 
+_SKILL_RE = re.compile(r"^/([a-z0-9_-]+(?::[a-z0-9_-]+)*)")
+
+
+async def _resolve_skill_content(
+    skill_key: str,
+    agent_id: uuid.UUID,
+) -> tuple[str | None, str | None, str | None]:
+    """Resolve skill content by colon key lookup."""
+    import asyncio
+
+    from app.services.agent_context import _agent_workspace
+    from app.services.skill_map import get_skill_map
+
+    skill_map = get_skill_map(agent_id)
+    entry = skill_map.get(skill_key)
+    if not entry:
+        return None, None, None
+
+    file_rel = entry.get("file")
+    if not file_rel:
+        return None, None, None
+
+    ws_root = _agent_workspace(agent_id)
+    file_path = (ws_root / "skills" / file_rel).resolve()
+    skills_root = (ws_root / "skills").resolve()
+    if not str(file_path).startswith(str(skills_root)):
+        return None, None, None
+    if not file_path.exists():
+        return None, None, None
+
+    content = await asyncio.to_thread(
+        file_path.read_text,
+        encoding="utf-8",
+        errors="replace",
+    )
+    return content, entry.get("name", skill_key), entry.get("emoji", "")
+
+
+async def _persist_and_inject_skill(
+    skill_content: str,
+    agent_id: uuid.UUID,
+    user_id: uuid.UUID,
+    conv_id: str,
+    db: AsyncSession,
+    conversation: list[dict],
+    websocket: WebSocket,
+) -> None:
+    """Persist a hidden user-context message and append it to the LLM conversation."""
+    hidden_msg = ChatMessage(
+        agent_id=agent_id,
+        user_id=user_id,
+        role="user",
+        content=skill_content,
+        conversation_id=conv_id,
+        is_hidden=True,
+    )
+    db.add(hidden_msg)
+    await db.commit()
+    conversation.append({"role": "user", "content": skill_content})
+    if not hasattr(websocket, "_hidden_indices"):
+        websocket._hidden_indices = set()
+    websocket._hidden_indices.add(len(conversation) - 1)
+
+
+async def _inject_skill_if_matched(
+    content: str,
+    agent_id: uuid.UUID,
+    user_id: uuid.UUID,
+    conv_id: str,
+    db: AsyncSession,
+    conversation: list[dict],
+    websocket: WebSocket,
+) -> None:
+    """Parse skill prefix from content and inject hidden context if found."""
+    match = _SKILL_RE.match(content)
+    if not match:
+        return
+
+    skill_key = match.group(1)
+    skill_content, display_name, emoji = await _resolve_skill_content(skill_key, agent_id)
+    if skill_content:
+        await _persist_and_inject_skill(skill_content, agent_id, user_id, conv_id, db, conversation, websocket)
+        await websocket.send_json(
+            {
+                "type": "skill_loaded",
+                "name": display_name,
+                "emoji": emoji or "",
+                "content": skill_content,
+            }
+        )
+    elif ":" in skill_key:
+        await websocket.send_json({"type": "skill_error", "message": f"Skill '{skill_key}' not found"})
+
+
+def _find_retry_anchor_message(messages: list, requested_message_id: str | None = None):
+    """Find the visible user message a retry/regenerate request should replay.
+
+    Rules:
+    - If `requested_message_id` points at a user message, retry that turn.
+    - If it points at an assistant/tool message, retry the nearest preceding
+      visible user message.
+    - If omitted, retry the most recent visible user message in the thread.
+    Hidden skill-injection messages are never used as retry anchors.
+    """
+    if not messages:
+        return None
+
+    target_index = len(messages) - 1
+    if requested_message_id:
+        requested = str(requested_message_id)
+        for idx, msg in enumerate(messages):
+            msg_id = getattr(msg, "id", None)
+            if msg_id and str(msg_id) == requested:
+                target_index = idx
+                break
+        else:
+            return None
+
+    for idx in range(target_index, -1, -1):
+        msg = messages[idx]
+        if getattr(msg, "role", None) == "user" and not getattr(msg, "is_hidden", False):
+            return msg
+    return None
+
+
+def _rebuild_conversation_from_messages(
+    messages: list,
+    conversation: list[dict],
+    websocket: WebSocket,
+) -> None:
+    """Rebuild the in-memory LLM conversation from persisted chat messages."""
+    conversation.clear()
+    websocket._hidden_indices = set()
+    for rmsg in messages:
+        if rmsg.role == "tool_call":
+            try:
+                tc_data = json.loads(rmsg.content)
+                tc_id = f"call_{rmsg.id}"
+                conversation.append(
+                    {
+                        "role": "assistant",
+                        "content": None,
+                        "tool_calls": [
+                            {
+                                "id": tc_id,
+                                "type": "function",
+                                "function": {
+                                    "name": tc_data.get("name", "unknown"),
+                                    "arguments": json.dumps(tc_data.get("args", {}), ensure_ascii=False),
+                                },
+                            }
+                        ],
+                    }
+                )
+                conversation.append(
+                    {
+                        "role": "tool",
+                        "tool_call_id": tc_id,
+                        "content": str(tc_data.get("result", ""))[:500],
+                    }
+                )
+            except Exception:
+                continue
+        else:
+            conversation.append({"role": rmsg.role, "content": rmsg.content})
+            if getattr(rmsg, "is_hidden", False):
+                websocket._hidden_indices.add(len(conversation) - 1)
+
+
+async def _finalize_onboarding_progress_if_needed(
+    *,
+    needs_onboarding_mark: bool,
+    onboarding_mark_done: bool,
+    agent_id: uuid.UUID,
+    user_id: uuid.UUID,
+    onboarding_target_phase: str,
+    websocket: WebSocket,
+) -> bool:
+    """Persist onboarding progress when a turn finishes without streaming chunks.
+
+    Greeting turns can complete via a direct `finish` tool call, which returns a
+    final response without ever invoking the chunk or tool-status callbacks that
+    normally persist onboarding progress. In that case we still need to advance
+    the onboarding phase so subsequent turns receive the full tool list.
+    """
+    if not needs_onboarding_mark or onboarding_mark_done:
+        return onboarding_mark_done
+
+    from app.services.onboarding import mark_onboarding_phase
+
+    async with async_session() as _ob_db:
+        await mark_onboarding_phase(
+            _ob_db,
+            agent_id,
+            user_id,
+            onboarding_target_phase,
+        )
+    await websocket.send_json({
+        "type": "onboarded",
+        "agent_id": str(agent_id),
+    })
+    return True
+
 
 class ConnectionManager:
     """Manage WebSocket connections per agent."""
@@ -90,6 +294,34 @@ def is_user_viewing_session(self, agent_id: str, session_id: str, user_id: str)
 manager = ConnectionManager()
 
 
+def _should_generate_session_title(
+    needs_session_title_generation: bool,
+    skip_user_save: bool,
+    is_onboarding_trigger: bool,
+) -> bool:
+    """Only title the first persisted non-onboarding user exchange."""
+    return needs_session_title_generation and not skip_user_save and not is_onboarding_trigger
+
+
+def _rewrite_edited_user_content(original_content: str, replacement_text: str) -> str:
+    """Preserve attachment/banner wrapper lines when editing a user message body."""
+    preserved_prefix: list[str] = []
+    for line in original_content.splitlines():
+        stripped = line.strip()
+        if (
+            stripped.startswith("[file:")
+            or stripped.startswith("[image_data:")
+            or stripped.startswith("[Attachment:")
+        ):
+            preserved_prefix.append(line)
+            continue
+        break
+
+    if preserved_prefix:
+        return "\n".join([*preserved_prefix, replacement_text])
+    return replacement_text
+
+
 async def maybe_mark_session_read_for_active_viewer(
     db: AsyncSession,
     *,
@@ -109,12 +341,6 @@ async def maybe_mark_session_read_for_active_viewer(
     return True
 
 
-from fastapi import Depends
-from app.core.security import get_current_user
-from app.database import get_db
-from app.models.user import User
-
-
 @router.get("/api/chat/{agent_id}/history")
 async def get_chat_history(
     agent_id: uuid.UUID,
@@ -132,7 +358,14 @@ async def get_chat_history(
     messages = result.scalars().all()
     out = []
     for m in messages:
-        entry: dict = {"role": m.role, "content": m.content, "created_at": m.created_at.isoformat() if m.created_at else None}
+        entry: dict = {
+            "id": str(m.id),
+            "role": m.role,
+            "content": m.content,
+            "created_at": m.created_at.isoformat() if m.created_at else None,
+        }
+        if getattr(m, "is_hidden", False):
+            entry["is_hidden"] = True
         if getattr(m, 'thinking', None):
             entry["thinking"] = m.thinking
         if m.role == "tool_call":
@@ -191,6 +424,7 @@ async def websocket_chat(
     llm_model = None
     fallback_llm_model = None
     history_messages = []
+    needs_session_title_generation = False
 
     try:
         async with async_session() as db:
@@ -203,6 +437,7 @@ async def websocket_chat(
                 await websocket.close(code=4001)
                 return
 
+            _tenant_id = user.tenant_id  # Capture for title generation
             logger.info(f"[WS] Checking agent access for {agent_id}")
             agent, _ = await check_agent_access(db, user, agent_id)
             # Check agent expiry
@@ -210,6 +445,7 @@ async def websocket_chat(
                 await websocket.send_json({"type": "error", "content": "This Agent has expired and is off duty. Please contact your admin to extend its service."})
                 await websocket.close(code=4003)
                 return
+            _tenant_id = user.tenant_id  # Capture for title generation
             agent_name = agent.name
             agent_type = agent.agent_type or ""
             role_description = agent.role_description or ""
@@ -254,7 +490,6 @@ async def websocket_chat(
             # Resolve or create chat session
             from app.models.chat_session import ChatSession
             from sqlalchemy import select as _sel
-            from datetime import datetime as _dt, timezone as _tz
             conv_id = session_id
             if conv_id:
                 # Validate the session belongs to this agent and to this user.
@@ -287,8 +522,8 @@ async def websocket_chat(
                         ChatSession.agent_id == agent_id,
                         ChatSession.user_id == user_id,
                         ChatSession.source_channel == "web",
-                        ChatSession.is_group == False,
-                        ChatSession.is_primary == True,
+                        ChatSession.is_group.is_(False),
+                        ChatSession.is_primary.is_(True),
                     )
                     .order_by(ChatSession.last_message_at.desc().nulls_last(), ChatSession.created_at.desc())
                     .limit(1)
@@ -313,6 +548,7 @@ async def websocket_chat(
                 )
                 history_messages = list(reversed(history_result.scalars().all()))
                 logger.info(f"[WS] Loaded {len(history_messages)} history messages for session {conv_id}")
+                needs_session_title_generation = not history_messages
             except Exception as e:
                 logger.warning(f"[WS] History load failed (non-fatal): {e}")
     except Exception as e:
@@ -334,6 +570,8 @@ async def websocket_chat(
 
     # Build conversation context from history
     conversation: list[dict] = []
+    if not hasattr(websocket, "_hidden_indices"):
+        websocket._hidden_indices = set()
     for msg in history_messages:
         if msg.role == "tool_call":
             # Convert stored tool_call JSON into OpenAI-format assistant+tool pair
@@ -372,6 +610,8 @@ async def websocket_chat(
             if hasattr(msg, 'thinking') and msg.thinking:
                 entry["thinking"] = msg.thinking
             conversation.append(entry)
+            if getattr(msg, "is_hidden", False):
+                websocket._hidden_indices.add(len(conversation) - 1)
 
     try:
         # Send welcome message on new session (no history)
@@ -381,6 +621,7 @@ async def websocket_chat(
         while True:
             logger.info(f"[WS] Waiting for message from {agent_name}...")
             data = await websocket.receive_json()
+            msg_type = data.get("type", "message")
 
             # Set a unique trace ID for this specific message processing.
             from app.core.logging_config import set_trace_id
@@ -388,6 +629,7 @@ async def websocket_chat(
             trace_id = str(_trace_uuid.uuid4())[:12]
             set_trace_id(trace_id)
 
+            skip_user_save = False
             content = data.get("content", "")
             display_content = data.get("display_content", "")  # User-facing display text
             file_name = data.get("file_name", "")  # Original file name for attachment display
@@ -399,6 +641,123 @@ async def websocket_chat(
             is_onboarding_trigger = data.get("kind") == "onboarding_trigger"
             logger.info(f"[WS] Received: {content[:50]}" + (" [onboarding]" if is_onboarding_trigger else ""))
 
+            if msg_type == "edit":
+                edit_message_id = data.get("message_id")
+                edit_content = data.get("content", "")
+                if not edit_message_id or not edit_content:
+                    continue
+
+                from sqlalchemy import select as sa_select
+
+                async with async_session() as edit_db:
+                    edit_result = await edit_db.execute(
+                        sa_select(ChatMessage).where(
+                            ChatMessage.id == edit_message_id,
+                            ChatMessage.conversation_id == conv_id,
+                            ChatMessage.agent_id == agent_id,
+                            ChatMessage.role == "user",
+                        )
+                    )
+                    edit_msg = edit_result.scalar_one_or_none()
+                    if not edit_msg:
+                        await websocket.send_json({"type": "skill_error", "message": "Message not found"})
+                        continue
+
+                    await edit_db.execute(
+                        ChatMessage.__table__.delete().where(
+                            ChatMessage.conversation_id == conv_id,
+                            ChatMessage.created_at >= edit_msg.created_at,
+                            ChatMessage.id != edit_msg.id,
+                        )
+                    )
+                    edit_msg.content = edit_content
+                    await edit_db.commit()
+
+                    rebuild_result = await edit_db.execute(
+                        sa_select(ChatMessage)
+                        .where(ChatMessage.agent_id == agent_id, ChatMessage.conversation_id == conv_id)
+                        .order_by(ChatMessage.created_at.asc())
+                    )
+                    rebuild_msgs = rebuild_result.scalars().all()
+
+                _rebuild_conversation_from_messages(rebuild_msgs, conversation, websocket)
+
+                await websocket.send_json({"type": "edit_ack", "message_id": str(edit_msg.id)})
+                content = edit_content
+                display_content = ""
+                file_name = ""
+                skip_user_save = True
+
+            elif msg_type in {"retry", "regenerate"}:
+                retry_message_id = data.get("message_id")
+                from sqlalchemy import select as sa_select
+
+                async with async_session() as retry_db:
+                    history_result = await retry_db.execute(
+                        sa_select(ChatMessage)
+                        .where(ChatMessage.agent_id == agent_id, ChatMessage.conversation_id == conv_id)
+                        .order_by(ChatMessage.created_at.asc())
+                    )
+                    persisted_messages = history_result.scalars().all()
+                    retry_anchor = _find_retry_anchor_message(persisted_messages, retry_message_id)
+                    if not retry_anchor:
+                        await websocket.send_json(
+                            {
+                                "type": "skill_error",
+                                "message": "No visible user message found to retry",
+                            }
+                        )
+                        continue
+
+                    await retry_db.execute(
+                        ChatMessage.__table__.delete().where(
+                            ChatMessage.conversation_id == conv_id,
+                            ChatMessage.created_at > retry_anchor.created_at,
+                        )
+                    )
+                    await retry_db.commit()
+
+                    rebuild_result = await retry_db.execute(
+                        sa_select(ChatMessage)
+                        .where(ChatMessage.agent_id == agent_id, ChatMessage.conversation_id == conv_id)
+                        .order_by(ChatMessage.created_at.asc())
+                    )
+                    rebuild_msgs = rebuild_result.scalars().all()
+
+                _rebuild_conversation_from_messages(rebuild_msgs, conversation, websocket)
+
+                await websocket.send_json({"type": "retry_ack", "message_id": str(retry_anchor.id)})
+                content = retry_anchor.content or ""
+                display_content = ""
+                file_name = ""
+                skip_user_save = True
+
+            elif content.strip() == "/role:clear":
+                async with async_session() as clear_db:
+                    await clear_db.execute(
+                        ChatMessage.__table__.delete().where(
+                            ChatMessage.conversation_id == conv_id,
+                            ChatMessage.is_hidden.is_(True),
+                        )
+                    )
+                    await clear_db.commit()
+                hidden = getattr(websocket, "_hidden_indices", set())
+                conversation[:] = [m for i, m in enumerate(conversation) if i not in hidden]
+                websocket._hidden_indices = set()
+                await websocket.send_json({"type": "skill_loaded", "name": "Roles cleared", "emoji": ""})
+                continue
+            else:
+                async with async_session() as skill_db:
+                    await _inject_skill_if_matched(
+                        content,
+                        agent_id,
+                        user_id,
+                        conv_id,
+                        skill_db,
+                        conversation,
+                        websocket,
+                    )
+
             if not content and not is_onboarding_trigger:
                 continue
             if is_onboarding_trigger:
@@ -448,7 +807,7 @@ async def websocket_chat(
             try:
                 from app.services.quota_guard import (
                     check_conversation_quota, increment_conversation_usage,
-                    check_agent_expired, check_agent_llm_quota, increment_agent_llm_usage,
+                    check_agent_expired, increment_agent_llm_usage,
                     QuotaExceeded, AgentExpired,
                 )
                 await check_conversation_quota(user_id)
@@ -460,8 +819,9 @@ async def websocket_chat(
                 await websocket.send_json({"type": "done", "role": "assistant", "content": f"⚠️ {ae.message}"})
                 continue
 
-            # Add user message to conversation (full LLM context)
-            conversation.append({"role": "user", "content": content})
+            if not skip_user_save:
+                # Add user message to conversation (full LLM context)
+                conversation.append({"role": "user", "content": content})
 
             # Save user message to DB.
             #
@@ -478,7 +838,10 @@ async def websocket_chat(
                 saved_content = display_content if display_content else content
                 if file_name:
                     saved_content = f"[file:{file_name}]\n{saved_content}"
-            if is_onboarding_trigger:
+            user_msg_id: str | None = None
+            if skip_user_save:
+                logger.info("[WS] Edit replay — skipping new user-message persistence")
+            elif is_onboarding_trigger:
                 logger.info("[WS] Onboarding trigger — skipping user-message persistence")
                 # Title this session "Onboarding" up front so it's identifiable
                 # in the session list even before the user has typed anything.
@@ -522,7 +885,9 @@ async def websocket_chat(
                                 clean_title = f"📎 {file_name}"
                             _sess.title = clean_title[:40] if clean_title else content[:40]
                     await db.commit()
+                    user_msg_id = str(user_msg.id)
                 logger.info("[WS] User message saved")
+                await websocket.send_json({"type": "user_saved", "message_id": user_msg_id})
 
             # ── OpenClaw routing: insert into gateway_messages instead of LLM ──
             if agent_type == "openclaw":
@@ -837,7 +1202,7 @@ async def _on_failover(reason: str):
                                 websocket.receive_json(), timeout=0.5
                             )
                             if msg.get("type") == "abort":
-                                logger.info(f"[WS] Abort received, cancelling LLM task")
+                                logger.info("[WS] Abort received, cancelling LLM task")
                                 llm_task.cancel()
                                 aborted = True
                                 break
@@ -874,9 +1239,20 @@ async def _on_failover(reason: str):
                     ):
                         raise RuntimeError(assistant_response)
 
-                    # Update last_active_at. The onboarding lock is handled
-                    # earlier in stream_to_ws on the first streamed chunk, so
-                    # there's nothing to reconcile here anymore.
+                    # Update onboarding progress for finish-only turns that never emitted
+                    # a streamed chunk or tool-status callback (for example an
+                    # onboarding greeting that immediately returns via `finish`).
+                    if not aborted:
+                        onboarding_mark_done = await _finalize_onboarding_progress_if_needed(
+                            needs_onboarding_mark=needs_onboarding_mark,
+                            onboarding_mark_done=onboarding_mark_done,
+                            agent_id=agent_id,
+                            user_id=user_id,
+                            onboarding_target_phase=onboarding_target_phase,
+                            websocket=websocket,
+                        )
+
+                    # Update last_active_at after onboarding reconciliation.
                     from datetime import datetime, timezone as tz
                     async with async_session() as _db:
                         from app.models.agent import Agent as AgentModel
@@ -954,10 +1330,88 @@ async def _on_failover(reason: str):
                     user_id=user_id,
                 )
                 await db.commit()
+                assistant_msg_id = str(assistant_msg.id)
             logger.info("[WS] Assistant message saved")
 
+            if not history_messages and not is_onboarding_trigger:
+                try:
+                    tenant_id = getattr(effective_llm_model, "tenant_id", None) or getattr(llm_model, "tenant_id", None)
+                    if tenant_id:
+                        from app.models.tenant import Tenant as _Tenant
+                        from app.models.llm import LLMModel as _UtilityLLM
+                        from app.services.session_title import generate_session_title
+                        import asyncio as _asyncio_title
+
+                        async with async_session() as title_db:
+                            tenant_result = await title_db.execute(select(_Tenant).where(_Tenant.id == tenant_id))
+                            tenant = tenant_result.scalar_one_or_none()
+                            utility_model = None
+                            if tenant and tenant.utility_model_id:
+                                utility_result = await title_db.execute(
+                                    select(_UtilityLLM).where(_UtilityLLM.id == tenant.utility_model_id)
+                                )
+                                utility_model = utility_result.scalar_one_or_none()
+
+                        if utility_model:
+                            _asyncio_title.create_task(
+                                generate_session_title(
+                                    conv_id,
+                                    display_content if display_content else content,
+                                    assistant_response,
+                                    utility_model,
+                                    websocket,
+                                )
+                            )
+                except Exception as title_err:
+                    logger.warning(f"[WS] Session title scheduling failed: {title_err}")
+
             # Final 'done' packet
-            await websocket.send_json({"type": "done", "role": "assistant", "content": assistant_response})
+            await websocket.send_json(
+                {
+                    "type": "done",
+                    "role": "assistant",
+                    "content": assistant_response,
+                    "message_id": assistant_msg_id,
+                }
+            )
+
+            # Re-process any queued messages (if user sent something during generation)
+            for qm in queued_messages:
+                # In a real implementation, you might want to push these back to the main loop
+                pass
+
+            # ── Auto-generate session title on first real exchange only ──
+            if _should_generate_session_title(needs_session_title_generation, skip_user_save, is_onboarding_trigger) and _tenant_id:
+                try:
+                    from app.models.tenant import Tenant as _Tenant
+                    from app.models.llm import LLMModel as _LLM
+                    import asyncio as _asyncio
+                    async with async_session() as _tdb:
+                        _t_r = await _tdb.execute(
+                            select(_Tenant).where(_Tenant.id == _tenant_id)
+                        )
+                        _tenant = _t_r.scalar_one_or_none()
+                        if _tenant and _tenant.utility_model_id:
+                            _m_r = await _tdb.execute(
+                                select(_LLM).where(_LLM.id == _tenant.utility_model_id)
+                            )
+                            _util_model = _m_r.scalar_one_or_none()
+                            if _util_model:
+                                from app.services.session_title import generate_session_title
+                                _first_user_msg = display_content if display_content else content
+                                _asyncio.create_task(
+                                    generate_session_title(
+                                        session_id=conv_id,
+                                        user_message=_first_user_msg,
+                                        assistant_response=assistant_response[:500],
+                                        utility_model=_util_model,
+                                        websocket=websocket,
+                                    )
+                                )
+                        needs_session_title_generation = False
+                except Exception as _e:
+                    logger.warning(f"[WS] Title generation trigger failed: {_e}")
+                needs_session_title_generation = False
 
             # Re-process any queued messages (if user sent something during generation)
             for qm in queued_messages:
diff --git a/backend/app/api/wecom.py b/backend/app/api/wecom.py
index a12e8f534..b7b4a6179 100644
--- a/backend/app/api/wecom.py
+++ b/backend/app/api/wecom.py
@@ -131,7 +131,7 @@ async def serve_wecom_verify_file(
     result = await db.execute(
         select(IdentityProvider).where(
             IdentityProvider.provider_type == "wecom",
-            IdentityProvider.is_active == True,
+            IdentityProvider.is_active,
         )
     )
     providers = result.scalars().all()
@@ -260,9 +260,11 @@ async def get_wecom_channel(
     if not config:
         raise HTTPException(status_code=404, detail="WeCom not configured")
 
+    from app.services.wecom_stream import wecom_stream_manager as runtime_wecom_stream_manager
+
     config_out = ChannelConfigOut.model_validate(config)
     if (config.extra_config or {}).get("connection_mode") == "websocket":
-        config_out.is_connected = wecom_stream_manager.status().get(str(agent_id), False)
+        config_out.is_connected = runtime_wecom_stream_manager.status().get(str(agent_id), False)
     else:
         config_out.is_connected = False
     return config_out
@@ -296,7 +298,9 @@ async def delete_wecom_channel(
     config = result.scalar_one_or_none()
     if not config:
         raise HTTPException(status_code=404, detail="WeCom not configured")
-    await wecom_stream_manager.stop_client(agent_id)
+    from app.services.wecom_stream import wecom_stream_manager as runtime_wecom_stream_manager
+
+    await runtime_wecom_stream_manager.stop_client(agent_id)
     await db.delete(config)
 
 
@@ -681,8 +685,8 @@ async def wecom_callback(
         raise HTTPException(status_code=404, detail="WeCom provider not configured for this tenant")
 
     config = provider.config
-    corp_id = config.get("app_id") or config.get("corp_id")
-    secret = config.get("app_secret") or config.get("secret")
+    config.get("app_id") or config.get("corp_id")
+    config.get("app_secret") or config.get("secret")
 
     # 2. Extract user info and login/register via RegistrationService
     try:
diff --git a/backend/app/api/workspace.py b/backend/app/api/workspace.py
new file mode 100644
index 000000000..84584fc68
--- /dev/null
+++ b/backend/app/api/workspace.py
@@ -0,0 +1,157 @@
+"""Public workspace API routes (bug reports, project listing)."""
+
+import logging
+import time
+from collections import defaultdict
+
+from fastapi import APIRouter, Depends, HTTPException, Request, status
+from pydantic import BaseModel
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.core.security import get_current_admin
+from app.database import get_db
+from app.models.user import User
+from app.models.workspace import WorkspaceBugReport, WorkspaceProject
+from app.services.workspace_tools import approve_container_deploy, reject_container_deploy
+
+logger = logging.getLogger(__name__)
+
+# Public router — no auth required, registered without API prefix
+public_router = APIRouter(tags=["workspace-public"])
+
+# Authenticated router — under /api/workspace
+router = APIRouter(prefix="/workspace", tags=["workspace"])
+
+# Simple in-memory rate limiter: {ip: [timestamps]}
+_rate_limit: dict[str, list[float]] = defaultdict(list)
+RATE_LIMIT_MAX = 5
+RATE_LIMIT_WINDOW = 3600  # 1 hour
+
+
+class BugReportRequest(BaseModel):
+    description: str
+    website: str = ""  # honeypot field
+
+
+def _check_rate_limit(ip: str) -> bool:
+    """Return True if request is within rate limit."""
+    now = time.time()
+    _rate_limit[ip] = [t for t in _rate_limit[ip] if now - t < RATE_LIMIT_WINDOW]
+    if len(_rate_limit[ip]) >= RATE_LIMIT_MAX:
+        return False
+    _rate_limit[ip].append(now)
+    return True
+
+
+@public_router.post("/api/workspace/projects/{slug}/report-bug")
+async def report_bug(
+    slug: str,
+    body: BugReportRequest,
+    request: Request,
+    db: AsyncSession = Depends(get_db),
+):
+    """Public endpoint for reporting bugs on workspace projects."""
+    # Honeypot check
+    if body.website:
+        # Bot detected — return 200 silently to not reveal the trap
+        return {"status": "ok"}
+
+    # Rate limit
+    client_ip = request.client.host if request.client else "unknown"
+    if not _check_rate_limit(client_ip):
+        raise HTTPException(status_code=429, detail="Too many reports. Try again later.")
+
+    # Find project
+    result = await db.execute(
+        select(WorkspaceProject).where(
+            WorkspaceProject.slug == slug,
+            WorkspaceProject.status == "deployed",
+        )
+    )
+    project = result.scalar_one_or_none()
+    if not project:
+        raise HTTPException(status_code=404, detail="Project not found.")
+
+    # Create bug report
+    report = WorkspaceBugReport(
+        project_id=project.id,
+        source="user_report",
+        description=body.description[:2000],  # cap length
+    )
+    db.add(report)
+    await db.commit()
+
+    logger.info("Bug report created for project '%s' from %s", slug, client_ip)
+    return {"status": "ok", "message": "Report submitted. Thank you!"}
+
+
+class ApproveRequest(BaseModel):
+    memory: str = ""
+    cpus: str = ""
+
+
+def _workspace_scope_args(current_user: User) -> dict:
+    """Resolve tenant scoping for workspace admin actions."""
+    is_platform_admin = current_user.role == "platform_admin" or bool(
+        getattr(getattr(current_user, "identity", None), "is_platform_admin", False)
+    )
+    if is_platform_admin:
+        return {"tenant_id": None, "include_platform_global": True}
+    return {"tenant_id": current_user.tenant_id, "include_platform_global": False}
+
+
+@router.post("/projects/{slug}/approve")
+async def approve_deploy(
+    slug: str,
+    body: ApproveRequest | None = None,
+    current_user: User = Depends(get_current_admin),
+):
+    """Approve a container deployment (admin only, under /api/workspace)."""
+    limits = {}
+    if body:
+        if body.memory:
+            limits["memory"] = body.memory
+        if body.cpus:
+            limits["cpus"] = body.cpus
+    result = await approve_container_deploy(slug, limits if limits else None, **_workspace_scope_args(current_user))
+    if not result["ok"]:
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=result["error"])
+    return result
+
+
+@router.post("/projects/{slug}/reject")
+async def reject_deploy(
+    slug: str,
+    current_user: User = Depends(get_current_admin),
+):
+    """Reject a container deployment (admin only, under /api/workspace)."""
+    result = await reject_container_deploy(slug, **_workspace_scope_args(current_user))
+    if not result["ok"]:
+        raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=result["error"])
+    return result
+
+
+@router.get("/projects")
+async def list_projects(
+    current_user: User = Depends(get_current_admin),
+    db: AsyncSession = Depends(get_db),
+):
+    """List all workspace projects (admin only)."""
+    scope = _workspace_scope_args(current_user)
+    query = select(WorkspaceProject)
+    if scope["tenant_id"] is not None:
+        query = query.where(WorkspaceProject.tenant_id == scope["tenant_id"])
+    result = await db.execute(query.order_by(WorkspaceProject.created_at.desc()))
+    projects = result.scalars().all()
+    return [
+        {
+            "slug": p.slug,
+            "name": p.name,
+            "status": p.status,
+            "deploy_type": p.deploy_type,
+            "container_port": p.container_port,
+            "url": f"/workspace/{p.slug}/" if p.status == "deployed" else None,
+        }
+        for p in projects
+    ]
diff --git a/backend/app/config.py b/backend/app/config.py
index 9b0ad0e02..19f51d3e5 100644
--- a/backend/app/config.py
+++ b/backend/app/config.py
@@ -46,16 +46,14 @@ def _default_agent_template_dir() -> str:
     return str(source_path)
 
 
-def _default_allow_unsafe_bwrap_fallback() -> bool:
-    """Allow local source runs to work without bubblewrap by default."""
-    return not _running_in_container()
-
-
 def _read_version() -> str:
     """Read version from local VERSION file, fallback to root."""
-    for candidate in [Path(__file__).resolve().parent.parent / "VERSION",
-                      Path(__file__).resolve().parent.parent.parent / "VERSION",
-                      Path("/app/VERSION"), Path("/VERSION")]:
+    for candidate in [
+        Path(__file__).resolve().parent.parent / "VERSION",
+        Path(__file__).resolve().parent.parent.parent / "VERSION",
+        Path("/app/VERSION"),
+        Path("/VERSION"),
+    ]:
         try:
             return candidate.read_text(encoding="utf-8").strip()
         except OSError:
@@ -90,6 +88,9 @@ class Settings(BaseSettings):
     # File Storage
     AGENT_DATA_DIR: str = _default_agent_data_dir()
     AGENT_TEMPLATE_DIR: str = _default_agent_template_dir()
+    WORKSPACE_STATIC_DIR: str = "/srv/workspace"
+    WORKSPACE_CONF_DIR: str = "/etc/nginx/workspace.d"
+    WORKSPACE_GATEWAY_CONTAINER: str = "workspace_gateway"
 
     # Docker (for Agent containers)
     DOCKER_NETWORK: str = "clawith_network"
@@ -120,7 +121,6 @@ class Settings(BaseSettings):
     SANDBOX_CPU_LIMIT: str = "0.5"
     SANDBOX_MEMORY_LIMIT: str = "256m"
     SANDBOX_ALLOW_NETWORK: bool = False
-    SANDBOX_ALLOW_UNSAFE_FALLBACK_WHEN_BWRAP_MISSING: bool = _default_allow_unsafe_bwrap_fallback()
     SANDBOX_DEFAULT_TIMEOUT: int = 30
     SANDBOX_MAX_TIMEOUT: int = 60
 
@@ -149,7 +149,6 @@ def get_sandbox_config() -> SandboxConfig:
         cpu_limit=settings.SANDBOX_CPU_LIMIT,
         memory_limit=settings.SANDBOX_MEMORY_LIMIT,
         allow_network=settings.SANDBOX_ALLOW_NETWORK,
-        allow_unsafe_fallback_when_bwrap_missing=settings.SANDBOX_ALLOW_UNSAFE_FALLBACK_WHEN_BWRAP_MISSING,
         default_timeout=settings.SANDBOX_DEFAULT_TIMEOUT,
         max_timeout=settings.SANDBOX_MAX_TIMEOUT,
     )
diff --git a/backend/app/core/email.py b/backend/app/core/email.py
index 03caa50d6..b7dcd696d 100644
--- a/backend/app/core/email.py
+++ b/backend/app/core/email.py
@@ -4,8 +4,6 @@
 import ssl
 import smtplib
 from contextlib import contextmanager
-from email.mime.multipart import MIMEMultipart
-from typing import Optional
 
 
 def _ipv4_getaddrinfo(host, port, family=0, type=0, proto=0, flags=0):
diff --git a/backend/app/core/logging_config.py b/backend/app/core/logging_config.py
index c9afab182..b6ec05b62 100644
--- a/backend/app/core/logging_config.py
+++ b/backend/app/core/logging_config.py
@@ -3,9 +3,8 @@
 import sys
 import logging
 from contextvars import ContextVar
-from typing import Optional
 
-from loguru import logger
+from loguru import logger as loguru_logger
 
 # Context variable for trace ID
 from uuid import uuid4
@@ -37,10 +36,10 @@ def set_trace_id(trace_id: str) -> None:
 def configure_logging():
     """Configure loguru with custom format including trace ID."""
     # Remove default handler
-    logger.remove()
+    loguru_logger.remove()
 
     # Add stdout handler with custom format and filter to ensure trace_id exists
-    logger.add(
+    loguru_logger.add(
         sys.stdout,
         level="INFO",
         format="<green>{time:YYYY-MM-DD HH:mm:ss}</green> | <level>{level}</level> | <cyan>{extra[trace_id]:-<12}</cyan> | <cyan>{name}</cyan>:<cyan>{line}</cyan> - <level>{message}</level>",
@@ -50,7 +49,7 @@ def configure_logging():
         filter=lambda record: (record["extra"].setdefault("trace_id", get_trace_id() or str(uuid4())) is not None)
     )
 
-    return logger
+    return loguru_logger
 
 
 def quiet_noisy_connection_loggers() -> None:
@@ -66,7 +65,7 @@ class InterceptHandler(logging.Handler):
         def emit(self, record):
             # Get corresponding loguru level
             try:
-                level = logger.level(record.levelname).name
+                level = loguru_logger.level(record.levelname).name
             except ValueError:
                 level = record.levelno
 
@@ -86,7 +85,7 @@ def emit(self, record):
                 else:
                     message = record.msg
 
-            logger.opt(depth=depth, exception=record.exc_info).log(
+            loguru_logger.opt(depth=depth, exception=record.exc_info).log(
                 level, message
             )
 
diff --git a/backend/app/core/middleware.py b/backend/app/core/middleware.py
index ada1d4076..6142c92d4 100644
--- a/backend/app/core/middleware.py
+++ b/backend/app/core/middleware.py
@@ -6,7 +6,7 @@
 from fastapi import Request, Response
 from starlette.middleware.base import BaseHTTPMiddleware
 
-from app.core.logging_config import set_trace_id, get_trace_id
+from app.core.logging_config import set_trace_id
 from loguru import logger
 
 
diff --git a/backend/app/main.py b/backend/app/main.py
index 88e3bd27b..616c70caa 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -1,6 +1,8 @@
 """Clawith Backend — FastAPI Application Entry Point."""
 
 from contextlib import asynccontextmanager
+import json
+import os
 from pathlib import Path
 import shutil
 
@@ -20,9 +22,9 @@
 def _log_bwrap_startup_status() -> None:
     """Emit a startup diagnostic for bubblewrap availability.
 
-    We only warn when bwrap is missing so deployments can still start. Local
-    source runs may explicitly allow a reduced-isolation fallback, while
-    containerized deployments should keep fail-closed behavior.
+    We only warn when bwrap is missing so deployments can still start in
+    degraded mode. The subprocess sandbox will fall back to the hardened local
+    execution path in that case.
     """
     in_container = Path("/.dockerenv").exists()
     bwrap_path = shutil.which("bwrap")
@@ -35,43 +37,30 @@ def _log_bwrap_startup_status() -> None:
     if in_container:
         logger.warning(
             "[startup] bubblewrap (bwrap) is not installed in the backend container. "
-            "The service will still start, but execute_code will fail closed unless "
-            "SANDBOX_ALLOW_UNSAFE_FALLBACK_WHEN_BWRAP_MISSING=true is explicitly set."
+            "The service will still start, but execute_code will run without bwrap filesystem isolation."
         )
         return
 
-    if settings.SANDBOX_ALLOW_UNSAFE_FALLBACK_WHEN_BWRAP_MISSING:
-        logger.warning(
-            "[startup] bubblewrap (bwrap) is not installed on the host. "
-            "Local execute_code will use the reduced-isolation fallback."
-        )
-    else:
-        logger.warning(
-            "[startup] bubblewrap (bwrap) is not installed on the host. "
-            "execute_code will fail closed unless SANDBOX_ALLOW_UNSAFE_FALLBACK_WHEN_BWRAP_MISSING=true is set."
-        )
+    logger.warning(
+        "[startup] bubblewrap (bwrap) is not installed on the host. "
+        "The service will still start, but execute_code will run without bwrap filesystem isolation."
+    )
 
 
 async def _start_ss_local() -> None:
     """Start ss-local SOCKS5 proxy for Discord API calls. Tries nodes in priority order."""
-    import asyncio, json, os, shutil, tempfile
+    import asyncio
+    import shutil
+    import tempfile
     if not shutil.which("ss-local"):
         logger.info("[Proxy] ss-local not found — Discord proxy disabled")
         return
     # Load proxy nodes from config file (gitignored, mounted as Docker volume)
-    import json as _json
     cfg_file = os.environ.get("SS_CONFIG_FILE", "/data/ss-nodes.json")
-    if os.path.exists(cfg_file):
-        # Guard against empty or malformed config file — both produce a clear
-        # warning and a clean exit rather than an unhandled JSONDecodeError.
-        try:
-            raw = open(cfg_file).read().strip()
-            if not raw:
-                logger.warning(f"[Proxy] {cfg_file} exists but is empty — skipping proxy")
-                return
-            nodes = _json.loads(raw)
-        except (json.JSONDecodeError, ValueError) as exc:
-            logger.warning(f"[Proxy] Failed to parse {cfg_file}: {exc} — skipping proxy")
+    cfg_path = Path(cfg_file)
+    if cfg_path.exists():
+        nodes = _load_ss_nodes_from_config(cfg_file)
+        if nodes is None:
             return
         logger.info(f"[Proxy] Loaded {len(nodes)} node(s) from {cfg_file}")
     elif os.environ.get("SS_SERVER") and os.environ.get("SS_PASSWORD"):
@@ -84,7 +73,8 @@ async def _start_ss_local() -> None:
         cfg = {"server": node["server"], "server_port": node["port"], "local_address": "127.0.0.1",
                "local_port": 1080, "password": node["password"], "method": node["method"], "timeout": 10}
         tf = tempfile.NamedTemporaryFile(mode="w", suffix=".json", delete=False)
-        json.dump(cfg, tf); tf.close()
+        json.dump(cfg, tf)
+        tf.close()
         try:
             proc = await asyncio.create_subprocess_exec(
                 "ss-local", "-c", tf.name,
@@ -101,6 +91,33 @@ async def _start_ss_local() -> None:
     logger.warning("[Proxy] All SS nodes failed — Discord API calls will run without proxy")
 
 
+def _load_ss_nodes_from_config(cfg_file: str) -> list[dict] | None:
+    """Load SS proxy nodes from JSON config, or return None when unavailable."""
+    cfg_path = Path(cfg_file)
+    if not cfg_path.exists():
+        return None
+    if cfg_path.is_dir():
+        logger.warning(f"[Proxy] {cfg_file} is a directory, expected a JSON file — skipping proxy")
+        return None
+    if not cfg_path.is_file():
+        logger.warning(f"[Proxy] {cfg_file} is not a regular file — skipping proxy")
+        return None
+
+    # Guard against empty or malformed config file — both produce a clear
+    # warning and a clean exit rather than an unhandled JSONDecodeError.
+    try:
+        raw = cfg_path.read_text().strip()
+        if not raw:
+            logger.warning(f"[Proxy] {cfg_file} exists but is empty — skipping proxy")
+            return None
+        nodes = json.loads(raw)
+    except (json.JSONDecodeError, OSError, ValueError) as exc:
+        logger.warning(f"[Proxy] Failed to parse {cfg_file}: {exc} — skipping proxy")
+        return None
+
+    return nodes
+
+
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     """Application startup and shutdown events."""
@@ -118,7 +135,6 @@ async def lifespan(app: FastAPI):
         )
 
     import asyncio
-    import sys
     import os
     from app.services.trigger_daemon import start_trigger_daemon
     from app.services.tool_seeder import seed_builtin_tools
@@ -128,43 +144,8 @@ async def lifespan(app: FastAPI):
     from app.services.wecom_stream import wecom_stream_manager
     from app.services.wechat_channel import wechat_poll_manager
     from app.services.discord_gateway import discord_gateway_manager
+    from app.services.workspace_health import run_health_checks
 
-    # ── Step 0: Ensure all DB tables exist (idempotent, safe to run on every startup) ──
-    try:
-        from app.database import Base, engine
-        # Import all models so Base.metadata is fully populated
-        import app.models.user           # noqa
-        import app.models.agent          # noqa
-        import app.models.task           # noqa
-        import app.models.llm            # noqa
-        import app.models.tool           # noqa
-        import app.models.audit          # noqa
-        import app.models.skill          # noqa
-        import app.models.channel_config  # noqa
-        import app.models.schedule       # noqa
-        import app.models.plaza          # noqa
-        import app.models.activity_log   # noqa
-        import app.models.org            # noqa
-        import app.models.system_settings  # noqa
-        import app.models.invitation_code  # noqa
-        import app.models.tenant         # noqa
-        import app.models.tenant_setting  # noqa
-        import app.models.participant    # noqa
-        import app.models.chat_session   # noqa
-        import app.models.trigger        # noqa
-        import app.models.focus          # noqa
-        import app.models.notification   # noqa
-        import app.models.gateway_message # noqa
-        import app.models.agent_credential  # noqa
-        import app.models.okr            # noqa  OKR system tables
-        import app.models.onboarding     # noqa
-
-        import app.models.identity       # noqa
-        async with engine.begin() as conn:
-            await conn.run_sync(Base.metadata.create_all)
-        logger.info("[startup] Database tables ready")
-    except Exception as e:
-        logger.warning(f"[startup] create_all failed: {e}")
     # Startup: seed data — each step isolated so one failure doesn't block others
     logger.info("[startup] seeding...")
 
@@ -280,6 +261,7 @@ def _bg_task_error(t):
             ("wecom_stream", wecom_stream_manager.start_all()),
             ("wechat_poll", wechat_poll_manager.start_all()),
             ("discord_gw", discord_gateway_manager.start_all()),
+            ("workspace_health", run_health_checks()),
         ]:
             task = asyncio.create_task(coro, name=name)
             task.add_done_callback(_bg_task_error)
@@ -360,6 +342,7 @@ def _bg_task_error(t):
 from app.api.gateway import router as gateway_router
 from app.api.admin import router as admin_router
 from app.api.pages import router as pages_router, public_router as pages_public_router
+from app.api.workspace import public_router as workspace_public_router, router as workspace_router
 from app.api.agent_credentials import router as credentials_router
 from app.api.agentbay_control import router as agentbay_control_router
 from app.api.okr import router as okr_router
@@ -406,6 +389,8 @@ def _bg_task_error(t):
 app.include_router(admin_router, prefix=settings.API_PREFIX)
 app.include_router(pages_router, prefix=settings.API_PREFIX)
 app.include_router(pages_public_router)  # Public endpoint for /p/{short_id}, no API prefix
+app.include_router(workspace_public_router)  # Public workspace endpoints, no API prefix
+app.include_router(workspace_router, prefix=settings.API_PREFIX)
 app.include_router(credentials_router, prefix=settings.API_PREFIX)
 app.include_router(agentbay_control_router, prefix=settings.API_PREFIX)
 app.include_router(okr_router)  # OKR — self-prefixed at /api/okr
@@ -421,7 +406,7 @@ async def health_check():
 # ── Version endpoint (public, no auth required) ──
 def _load_version_info() -> dict[str, str]:
     """Read version + commit hash once at startup."""
-    import os, subprocess
+    import subprocess
     version = "unknown"
     for candidate in ["../frontend/VERSION", "frontend/VERSION", "VERSION"]:
         try:
diff --git a/backend/app/models/activity_log.py b/backend/app/models/activity_log.py
index b1eb2fc6f..011472a73 100644
--- a/backend/app/models/activity_log.py
+++ b/backend/app/models/activity_log.py
@@ -3,7 +3,7 @@
 import uuid
 from datetime import datetime
 
-from sqlalchemy import DateTime, Enum, ForeignKey, String, Text, func, UniqueConstraint, Integer
+from sqlalchemy import DateTime, Enum, ForeignKey, String, func, UniqueConstraint, Integer
 from sqlalchemy.dialects.postgresql import JSON, UUID
 from sqlalchemy.orm import Mapped, mapped_column
 
diff --git a/backend/app/models/audit.py b/backend/app/models/audit.py
index 5b3d8c507..dea07f64c 100644
--- a/backend/app/models/audit.py
+++ b/backend/app/models/audit.py
@@ -3,9 +3,9 @@
 import uuid
 from datetime import datetime
 
-from sqlalchemy import DateTime, Enum, ForeignKey, Integer, String, Text, func
+from sqlalchemy import Boolean, DateTime, Enum, ForeignKey, Integer, String, Text, func
 from sqlalchemy.dialects.postgresql import JSON, UUID
-from sqlalchemy.orm import Mapped, mapped_column, relationship
+from sqlalchemy.orm import Mapped, mapped_column
 
 from app.database import Base
 
@@ -61,6 +61,8 @@ class ChatMessage(Base):
     participant_id: Mapped[uuid.UUID | None] = mapped_column(UUID(as_uuid=True), ForeignKey("participants.id"), nullable=True)
     # Model thinking process
     thinking: Mapped[str | None] = mapped_column(Text, nullable=True)
+    # Hidden chat messages are stored for model context / skill injection but omitted from normal UI history.
+    is_hidden: Mapped[bool] = mapped_column(Boolean, default=False, server_default="false", nullable=False)
     created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), server_default=func.now(), index=True)
 
 
diff --git a/backend/app/models/channel_config.py b/backend/app/models/channel_config.py
index 77e31f086..bfa20af4e 100644
--- a/backend/app/models/channel_config.py
+++ b/backend/app/models/channel_config.py
@@ -3,7 +3,7 @@
 import uuid
 from datetime import datetime
 
-from sqlalchemy import DateTime, Enum, ForeignKey, String, Text, UniqueConstraint, func
+from sqlalchemy import DateTime, Enum, ForeignKey, String, UniqueConstraint, func
 from sqlalchemy.dialects.postgresql import JSON, UUID
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
diff --git a/backend/app/models/chat_session.py b/backend/app/models/chat_session.py
index f046d3697..1d6186a9b 100644
--- a/backend/app/models/chat_session.py
+++ b/backend/app/models/chat_session.py
@@ -53,5 +53,8 @@ class ChatSession(Base):
     # Tracks when the owning platform user last opened/read this session. Unread badges are derived
     # from non-user messages created after this timestamp.
     last_read_at_by_user: Mapped[datetime | None] = mapped_column(DateTime(timezone=True), nullable=True)
+    # Once a user manually renames a session, auto-title generation should stop overwriting it.
+    title_edited: Mapped[bool] = mapped_column(Boolean, default=False, server_default="false", nullable=False)
     created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), server_default=func.now(), index=True)
     last_message_at: Mapped[datetime | None] = mapped_column(DateTime(timezone=True))
+    title_edited: Mapped[bool] = mapped_column(Boolean, server_default="false", nullable=False)
diff --git a/backend/app/models/identity.py b/backend/app/models/identity.py
index 8122aaf7b..0981b1226 100644
--- a/backend/app/models/identity.py
+++ b/backend/app/models/identity.py
@@ -3,7 +3,7 @@
 import uuid
 from datetime import datetime
 
-from sqlalchemy import Boolean, DateTime, ForeignKey, String, Text, func
+from sqlalchemy import Boolean, DateTime, String, Text, func
 from sqlalchemy.dialects.postgresql import JSON, UUID
 from sqlalchemy.orm import Mapped, mapped_column
 
diff --git a/backend/app/models/skill.py b/backend/app/models/skill.py
index dcc24130f..7869430cf 100644
--- a/backend/app/models/skill.py
+++ b/backend/app/models/skill.py
@@ -4,7 +4,7 @@
 from datetime import datetime
 
 from sqlalchemy import Boolean, DateTime, ForeignKey, String, Text, func
-from sqlalchemy.dialects.postgresql import JSON, UUID
+from sqlalchemy.dialects.postgresql import UUID
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from app.database import Base
diff --git a/backend/app/models/system_settings.py b/backend/app/models/system_settings.py
index 82df7317e..b76639fda 100644
--- a/backend/app/models/system_settings.py
+++ b/backend/app/models/system_settings.py
@@ -1,6 +1,5 @@
 """System-level settings (key-value store)."""
 
-import uuid
 from datetime import datetime
 
 from sqlalchemy import DateTime, String, func
diff --git a/backend/app/models/task.py b/backend/app/models/task.py
index 3ec6f52f5..4cb3d1c08 100644
--- a/backend/app/models/task.py
+++ b/backend/app/models/task.py
@@ -3,8 +3,8 @@
 import uuid
 from datetime import datetime
 
-from sqlalchemy import DateTime, Enum, ForeignKey, Integer, String, Text, func
-from sqlalchemy.dialects.postgresql import JSON, UUID
+from sqlalchemy import DateTime, Enum, ForeignKey, String, Text, func
+from sqlalchemy.dialects.postgresql import UUID
 from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from app.database import Base
diff --git a/backend/app/models/tenant.py b/backend/app/models/tenant.py
index 0865066b1..467a6b069 100644
--- a/backend/app/models/tenant.py
+++ b/backend/app/models/tenant.py
@@ -62,6 +62,10 @@ class Tenant(Base):
     default_model_id: Mapped[uuid.UUID | None] = mapped_column(
         UUID(as_uuid=True), ForeignKey("llm_models.id", ondelete="SET NULL"), nullable=True,
     )
+    # Optional utility model used for non-primary helper flows such as session title generation.
+    utility_model_id: Mapped[uuid.UUID | None] = mapped_column(
+        UUID(as_uuid=True), ForeignKey("llm_models.id", ondelete="SET NULL"), nullable=True,
+    )
 
     @property
     def logo_url(self) -> str | None:
diff --git a/backend/app/models/user.py b/backend/app/models/user.py
index 729930163..c9c223f0b 100644
--- a/backend/app/models/user.py
+++ b/backend/app/models/user.py
@@ -3,7 +3,6 @@
 import uuid
 from datetime import datetime
 
-import sqlalchemy as sa
 from sqlalchemy import Boolean, DateTime, Enum, ForeignKey, Integer, String, func
 from sqlalchemy.dialects.postgresql import UUID
 from sqlalchemy.orm import Mapped, mapped_column, relationship
@@ -104,11 +103,15 @@ class User(Base):
     identity: Mapped["Identity"] = relationship(back_populates="tenant_users", lazy="selectin")
 
     # Association proxies for backward compatibility
-    email = association_proxy("identity", "email")
-    username = association_proxy("identity", "username")
-    password_hash = association_proxy("identity", "password_hash")
-    email_verified = association_proxy("identity", "email_verified")
-    primary_mobile = association_proxy("identity", "phone")
+    email = association_proxy("identity", "email", creator=lambda value: Identity(email=value))
+    username = association_proxy("identity", "username", creator=lambda value: Identity(username=value))
+    password_hash = association_proxy(
+        "identity", "password_hash", creator=lambda value: Identity(password_hash=value)
+    )
+    email_verified = association_proxy(
+        "identity", "email_verified", creator=lambda value: Identity(email_verified=value)
+    )
+    primary_mobile = association_proxy("identity", "phone", creator=lambda value: Identity(phone=value))
 
     created_agents: Mapped[list["Agent"]] = relationship(back_populates="creator", foreign_keys="Agent.creator_id")
 
diff --git a/backend/app/models/workspace.py b/backend/app/models/workspace.py
index e2232d1cc..47ab7b9f5 100644
--- a/backend/app/models/workspace.py
+++ b/backend/app/models/workspace.py
@@ -1,16 +1,16 @@
-"""Workspace collaboration models.
+"""Workspace collaboration and deployment models.
 
-These tables track file revisions and short-lived human editing locks for
-agent workspaces. The actual files remain on disk; the database stores the
-change history needed for diff viewing and rollback.
+These tables track both:
+- human collaboration metadata for agent workspaces, and
+- public workspace deployment / bug-report state for published projects.
 """
 
 import uuid
 from datetime import datetime
 
-from sqlalchemy import DateTime, ForeignKey, Integer, String, Text, UniqueConstraint, func
-from sqlalchemy.dialects.postgresql import UUID
-from sqlalchemy.orm import Mapped, mapped_column
+from sqlalchemy import DateTime, Enum, ForeignKey, Integer, String, Text, UniqueConstraint, func
+from sqlalchemy.dialects.postgresql import JSON, UUID
+from sqlalchemy.orm import Mapped, mapped_column, relationship
 
 from app.database import Base
 
@@ -60,3 +60,90 @@ class WorkspaceEditLock(Base):
     updated_at: Mapped[datetime] = mapped_column(
         DateTime(timezone=True), server_default=func.now(), onupdate=func.now()
     )
+
+
+class WorkspaceProject(Base):
+    """A public workspace project requested, built, and optionally deployed."""
+
+    __tablename__ = "workspace_projects"
+
+    id: Mapped[uuid.UUID] = mapped_column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    slug: Mapped[str] = mapped_column(String(50), unique=True, index=True, nullable=False)
+    name: Mapped[str] = mapped_column(String(200), nullable=False)
+    description: Mapped[str | None] = mapped_column(Text, nullable=True)
+    tenant_id: Mapped[uuid.UUID | None] = mapped_column(
+        UUID(as_uuid=True), ForeignKey("tenants.id", ondelete="SET NULL"), nullable=True, index=True
+    )
+    requested_by: Mapped[uuid.UUID | None] = mapped_column(
+        UUID(as_uuid=True), ForeignKey("agents.id", ondelete="SET NULL"), nullable=True
+    )
+    requested_by_human: Mapped[str | None] = mapped_column(String(200), nullable=True)
+    built_by: Mapped[uuid.UUID | None] = mapped_column(
+        UUID(as_uuid=True), ForeignKey("agents.id", ondelete="SET NULL"), nullable=True
+    )
+    deploy_type: Mapped[str | None] = mapped_column(
+        Enum("static", "container", name="deploy_type_enum", create_constraint=False),
+        nullable=True,
+    )
+    status: Mapped[str] = mapped_column(
+        Enum(
+            "requested",
+            "building",
+            "awaiting_approval",
+            "deployed",
+            "failed",
+            "rejected",
+            "stopped",
+            "undeployed",
+            name="workspace_status_enum",
+            create_constraint=False,
+        ),
+        nullable=False,
+        default="requested",
+    )
+    container_id: Mapped[str | None] = mapped_column(String(100), nullable=True)
+    container_image: Mapped[str | None] = mapped_column(String(300), nullable=True)
+    container_port: Mapped[int | None] = mapped_column(Integer, nullable=True)
+    health_endpoint: Mapped[str | None] = mapped_column(String(200), nullable=True)
+    resource_limits: Mapped[dict | None] = mapped_column(JSON, nullable=True)
+    dockerfile_path: Mapped[str | None] = mapped_column(String(500), nullable=True)
+    auto_fix_attempts: Mapped[int] = mapped_column(Integer, default=0)
+    auto_fix_window_start: Mapped[datetime | None] = mapped_column(DateTime(timezone=True), nullable=True)
+    created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), server_default=func.now())
+    updated_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), server_default=func.now(), onupdate=func.now()
+    )
+
+    bug_reports: Mapped[list["WorkspaceBugReport"]] = relationship(
+        back_populates="project",
+        cascade="all, delete-orphan",
+    )
+
+
+class WorkspaceBugReport(Base):
+    """Bug report for a deployed public workspace project."""
+
+    __tablename__ = "workspace_bug_reports"
+
+    id: Mapped[uuid.UUID] = mapped_column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    project_id: Mapped[uuid.UUID] = mapped_column(
+        UUID(as_uuid=True),
+        ForeignKey("workspace_projects.id", ondelete="CASCADE"),
+        nullable=False,
+    )
+    source: Mapped[str] = mapped_column(
+        Enum("health_check", "user_report", name="bug_source_enum", create_constraint=False),
+        nullable=False,
+    )
+    description: Mapped[str] = mapped_column(Text, nullable=False)
+    status: Mapped[str] = mapped_column(
+        Enum("open", "investigating", "fixed", "escalated", name="bug_status_enum", create_constraint=False),
+        nullable=False,
+        default="open",
+    )
+    created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), server_default=func.now())
+    updated_at: Mapped[datetime] = mapped_column(
+        DateTime(timezone=True), server_default=func.now(), onupdate=func.now()
+    )
+
+    project: Mapped["WorkspaceProject"] = relationship(back_populates="bug_reports")
diff --git a/backend/app/scripts/__init__.py b/backend/app/scripts/__init__.py
new file mode 100644
index 000000000..e69de29bb
diff --git a/backend/app/scripts/bootstrap_db.py b/backend/app/scripts/bootstrap_db.py
index 688c6d737..d0ce88c01 100644
--- a/backend/app/scripts/bootstrap_db.py
+++ b/backend/app/scripts/bootstrap_db.py
@@ -9,25 +9,32 @@
 # Import all models so Base.metadata is fully populated before create_all.
 import app.models.activity_log  # noqa: F401
 import app.models.agent  # noqa: F401
+import app.models.agent_credential  # noqa: F401
 import app.models.audit  # noqa: F401
 import app.models.channel_config  # noqa: F401
 import app.models.chat_session  # noqa: F401
+import app.models.focus  # noqa: F401
 import app.models.gateway_message  # noqa: F401
+import app.models.identity  # noqa: F401
 import app.models.invitation_code  # noqa: F401
 import app.models.llm  # noqa: F401
 import app.models.notification  # noqa: F401
+import app.models.okr  # noqa: F401
 import app.models.onboarding  # noqa: F401
 import app.models.org  # noqa: F401
 import app.models.participant  # noqa: F401
 import app.models.plaza  # noqa: F401
+import app.models.published_page  # noqa: F401
 import app.models.schedule  # noqa: F401
 import app.models.skill  # noqa: F401
 import app.models.system_settings  # noqa: F401
 import app.models.task  # noqa: F401
 import app.models.tenant  # noqa: F401
+import app.models.tenant_setting  # noqa: F401
 import app.models.tool  # noqa: F401
 import app.models.trigger  # noqa: F401
 import app.models.user  # noqa: F401
+import app.models.workspace  # noqa: F401
 
 
 PATCHES = [
diff --git a/backend/app/scripts/cleanup_duplicate_feishu_users.py b/backend/app/scripts/cleanup_duplicate_feishu_users.py
index 0e8a8addd..61fae2fc1 100644
--- a/backend/app/scripts/cleanup_duplicate_feishu_users.py
+++ b/backend/app/scripts/cleanup_duplicate_feishu_users.py
@@ -169,7 +169,6 @@ def om_score(m):
 
         # Find duplicate display_names within the same tenant
         # These are likely the same person created multiple times from different apps
-        from sqlalchemy import or_, and_, cast, String as SAString
         r = await db.execute(
             select(User.display_name, User.tenant_id, func.count(User.id).label("cnt"))
             .where(User.display_name.isnot(None), User.display_name != "")
diff --git a/backend/app/scripts/migrate_schedules_to_triggers.py b/backend/app/scripts/migrate_schedules_to_triggers.py
index 1fbf88d47..85f94dcff 100644
--- a/backend/app/scripts/migrate_schedules_to_triggers.py
+++ b/backend/app/scripts/migrate_schedules_to_triggers.py
@@ -7,8 +7,6 @@
     python -m app.scripts.migrate_schedules_to_triggers
 """
 import asyncio
-import uuid
-from datetime import datetime, timezone
 
 from loguru import logger
 from sqlalchemy import select
diff --git a/backend/app/services/activity_logger.py b/backend/app/services/activity_logger.py
index 91a6664e1..fee55330e 100644
--- a/backend/app/services/activity_logger.py
+++ b/backend/app/services/activity_logger.py
@@ -1,7 +1,6 @@
 """Activity logger — simple async function to record agent actions."""
 
 import uuid
-from datetime import datetime, timezone
 
 from loguru import logger
 
diff --git a/backend/app/services/agent_context.py b/backend/app/services/agent_context.py
index 00586ee77..1af40ce50 100644
--- a/backend/app/services/agent_context.py
+++ b/backend/app/services/agent_context.py
@@ -180,7 +180,6 @@ async def build_agent_context(agent_id: uuid.UUID, agent_name: str, role_descrip
         relationships = "\n".join(relationships.split("\n")[1:]).strip()
 
     # --- Compose static and dynamic system prompt blocks ---
-    from datetime import datetime, timezone as _tz
     from app.services.timezone_utils import get_agent_timezone, now_in_timezone
     agent_tz_name = await get_agent_timezone(agent_id)
     agent_local_now = now_in_timezone(agent_tz_name)
@@ -232,12 +231,13 @@ async def build_agent_context(agent_id: uuid.UUID, agent_name: str, role_descrip
     try:
         from app.models.channel_config import ChannelConfig
         from app.database import async_session as _ctx_session
+        from sqlalchemy import select as sa_select
         async with _ctx_session() as _ctx_db:
             _cfg_r = await _ctx_db.execute(
-                select(ChannelConfig).where(
+                sa_select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "feishu",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             _has_feishu = _cfg_r.scalar_one_or_none() is not None
@@ -319,7 +319,7 @@ async def build_agent_context(agent_id: uuid.UUID, agent_name: str, role_descrip
                 sa_select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "atlassian",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             atlassian_config = result.scalar_one_or_none()
@@ -366,6 +366,7 @@ async def build_agent_context(agent_id: uuid.UUID, agent_name: str, role_descrip
     # --- Company Intro (from system settings) ---
     try:
         from app.database import async_session
+        from app.models.agent import Agent as _AgentModel
         from app.models.system_settings import SystemSetting
         from sqlalchemy import select as sa_select
         async with async_session() as db:
@@ -593,7 +594,7 @@ async def build_agent_context(agent_id: uuid.UUID, agent_name: str, role_descrip
             result = await db.execute(
                 sa_select(AgentTrigger).where(
                     AgentTrigger.agent_id == agent_id,
-                    AgentTrigger.is_enabled == True,
+                    AgentTrigger.is_enabled,
                 )
             )
             triggers = result.scalars().all()
diff --git a/backend/app/services/agent_manager.py b/backend/app/services/agent_manager.py
index c191bb7a2..620453e36 100644
--- a/backend/app/services/agent_manager.py
+++ b/backend/app/services/agent_manager.py
@@ -155,12 +155,6 @@ def _generate_openclaw_config(self, agent: Agent, model: LLMModel | None) -> dic
                 },
             },
         }
-
-        if model:
-            config["env"] = {
-                f"{model.provider.upper()}_API_KEY": get_model_api_key(model),
-            }
-
         return config
 
     async def start_container(self, db: AsyncSession, agent: Agent) -> str | None:
@@ -197,6 +191,12 @@ async def start_container(self, db: AsyncSession, agent: Agent) -> str | None:
         container_port = 18789 + hash(str(agent.id)) % 10000
 
         try:
+            environment = {
+                "OPENCLAW_GATEWAY_TOKEN": str(uuid.uuid4()),
+            }
+            if model:
+                environment[f"{model.provider.upper()}_API_KEY"] = get_model_api_key(model)
+
             container = self.docker_client.containers.run(
                 settings.OPENCLAW_IMAGE,
                 detach=True,
@@ -206,9 +206,7 @@ async def start_container(self, db: AsyncSession, agent: Agent) -> str | None:
                 volumes={
                     str(agent_dir): {"bind": "/home/node/.openclaw", "mode": "rw"},
                 },
-                environment={
-                    "OPENCLAW_GATEWAY_TOKEN": str(uuid.uuid4()),
-                },
+                environment=environment,
                 restart_policy={"Name": "unless-stopped"},
                 labels={
                     "clawith.agent_id": str(agent.id),
diff --git a/backend/app/services/agent_seeder.py b/backend/app/services/agent_seeder.py
index 3c9af377a..8f38281cb 100644
--- a/backend/app/services/agent_seeder.py
+++ b/backend/app/services/agent_seeder.py
@@ -2,20 +2,18 @@
 
 import shutil
 import uuid
-from datetime import datetime, timezone
 from pathlib import Path
 
 from loguru import logger
 
 from sqlalchemy import select
-from sqlalchemy.ext.asyncio import AsyncSession
 from sqlalchemy.orm import selectinload
 from sqlalchemy.exc import IntegrityError
 
 from app.database import async_session
 from app.models.agent import Agent, AgentPermission
 from app.models.org import AgentAgentRelationship
-from app.models.skill import Skill, SkillFile
+from app.models.skill import Skill
 from app.models.tool import Tool, AgentTool
 from app.models.trigger import AgentTrigger
 from app.models.user import User
@@ -318,7 +316,7 @@ async def seed_default_agents():
 
         # ── Assign all default tools ──
         default_tools_result = await db.execute(
-            select(Tool).where(Tool.is_default == True)
+            select(Tool).where(Tool.is_default)
         )
         default_tools = default_tools_result.scalars().all()
 
@@ -536,7 +534,7 @@ async def seed_okr_agent():
         # ── Assign default tools + OKR-specific tools ──
         # Default tools: all tools where is_default=True
         default_tools_result = await db.execute(
-            select(Tool).where(Tool.is_default == True)
+            select(Tool).where(Tool.is_default)
         )
         default_tools = default_tools_result.scalars().all()
         for tool in default_tools:
diff --git a/backend/app/services/agent_tools.py b/backend/app/services/agent_tools.py
index f17d90869..99a706273 100644
--- a/backend/app/services/agent_tools.py
+++ b/backend/app/services/agent_tools.py
@@ -19,6 +19,7 @@
 import uuid
 import unicodedata
 from contextvars import ContextVar
+from dataclasses import dataclass
 from datetime import datetime, timedelta, timezone
 from pathlib import Path
 from typing import Optional, Any
@@ -32,11 +33,10 @@
 from app.models.task import Task
 from app.models.agent import Agent as AgentModel
 from app.models.org import AgentRelationship, OrgMember, AgentAgentRelationship
-from app.models.audit import ChatMessage, AuditLog
+from app.models.audit import ChatMessage
 from app.models.chat_session import ChatSession
 from app.models.channel_config import ChannelConfig
 from app.models.user import User as UserModel
-from app.services.auth_registry import auth_provider_registry
 from app.services.channel_session import find_or_create_channel_session
 from app.services.channel_user_service import get_platform_user_by_org_member
 from app.services.document_conversion import (
@@ -56,6 +56,7 @@
     read_text_if_exists,
     write_workspace_file,
 )
+from app.services import workspace_tools
 from app.core.permissions import evaluate_agent_relationship_status, evaluate_human_relationship_status
 from app.services.access_relationships import ensure_access_granted_platform_relationships
 from app.config import get_settings
@@ -63,11 +64,10 @@
     FINISH_PROTOCOL_REMINDER,
     FINISH_TOOL_DEFINITION,
     FINISH_TOOL_NAME,
-    find_finish_call,
-    parse_tool_arguments,
 )
 
 
+
 _settings = get_settings()
 WORKSPACE_ROOT = Path(_settings.AGENT_DATA_DIR)
 
@@ -78,6 +78,55 @@
 _TOOL_CONFIG_CACHE_TTL_SECONDS = 60
 
 # Sensitive field keys that should be encrypted/decrypted
+
+@dataclass(frozen=True)
+class FinishCall:
+    """Parsed finish tool call."""
+
+    call_id: str
+    content: str
+    error: str | None = None
+
+    @property
+    def valid(self) -> bool:
+        return self.error is None
+
+
+def parse_tool_arguments(raw_args: Any) -> dict[str, Any]:
+    """Parse OpenAI-style function arguments into a dict."""
+    if raw_args is None or raw_args == "":
+        return {}
+    if isinstance(raw_args, dict):
+        return raw_args
+    if isinstance(raw_args, str):
+        parsed = json.loads(raw_args)
+        return parsed if isinstance(parsed, dict) else {}
+    return {}
+
+
+def find_finish_call(tool_calls: list[dict] | None) -> FinishCall | None:
+    """Return the first valid finish call from a tool call list, if present."""
+    for tc in tool_calls or []:
+        fn = tc.get("function") or {}
+        if (fn.get("name") or "").strip() != FINISH_TOOL_NAME:
+            continue
+        try:
+            args = parse_tool_arguments(fn.get("arguments", "{}"))
+        except json.JSONDecodeError:
+            return FinishCall(
+                call_id=tc.get("id", ""),
+                content="",
+                error="`finish` arguments must be valid JSON with a required string field `content`.",
+            )
+        content = args.get("content")
+        if not isinstance(content, str) or not content.strip():
+            return FinishCall(
+                call_id=tc.get("id", ""),
+                content="",
+                error="`finish` requires a non-empty string field `content`.",
+            )
+        return FinishCall(call_id=tc.get("id", ""), content=content)
+    return None
 SENSITIVE_FIELD_KEYS = {"api_key", "private_key", "auth_code", "password", "secret", "atlassian_api_key"}
 
 def _decrypt_sensitive_fields(config: dict, config_schema: dict | None = None) -> dict:
@@ -1907,6 +1956,186 @@ async def _get_tool_config(agent_id: Optional[uuid.UUID], tool_name: str) -> Opt
 # Note: send_channel_message is intentionally NOT here — it lives in
 # _CHANNEL_MESSAGE_TOOL_NAMES and is only added when a channel is configured,
 # to avoid sending duplicate tool definitions to the LLM.
+
+WORKSPACE_AGENT_TOOLS = [
+    {
+        "type": "function",
+        "function": {
+            "name": "request_build",
+            "description": "Create a build request for the Software Engineer agent. Any agent or human can use this to request a new website, tool, or application to be built and deployed.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "slug": {
+                        "type": "string",
+                        "description": "URL-friendly project identifier (lowercase, hyphens allowed, 2-50 chars). This becomes the URL path: /workspace/{slug}/",
+                    },
+                    "name": {
+                        "type": "string",
+                        "description": "Human-readable project name",
+                    },
+                    "description": {
+                        "type": "string",
+                        "description": "Detailed description of what to build, including requirements, target audience, and any design preferences",
+                    },
+                },
+                "required": ["slug", "name", "description"],
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "list_build_requests",
+            "description": "List pending build requests (status=requested) for the Software Engineer agent to pick up.",
+            "parameters": {"type": "object", "properties": {}},
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "deploy_static",
+            "description": "Deploy a static website (HTML/CSS/JS) from your workspace to the public workspace. Goes live immediately without approval. The files will be served at /workspace/{slug}/.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "slug": {
+                        "type": "string",
+                        "description": "Project slug (must match an existing build request or be a new unique slug)",
+                    },
+                    "source_dir": {
+                        "type": "string",
+                        "description": "Directory in your workspace containing the built files (e.g., 'workspace/my-project'). Must contain at least an index.html.",
+                    },
+                },
+                "required": ["slug", "source_dir"],
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "request_container_deploy",
+            "description": "Submit a container-based application for deployment. Requires Frank's approval before going live. The application will be built from a Dockerfile in your workspace.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "slug": {
+                        "type": "string",
+                        "description": "Project slug for the URL path /workspace/{slug}/",
+                    },
+                    "dockerfile_path": {
+                        "type": "string",
+                        "description": "Path to the Dockerfile in your workspace (e.g., 'workspace/my-app/Dockerfile')",
+                    },
+                    "port": {
+                        "type": "integer",
+                        "description": "Port the application listens on inside the container",
+                    },
+                    "name": {
+                        "type": "string",
+                        "description": "Human-readable project name",
+                    },
+                    "description": {
+                        "type": "string",
+                        "description": "What this application does",
+                    },
+                    "resource_limits_suggestion": {
+                        "type": "object",
+                        "description": "Suggested resource limits (optional). Frank will set final limits at approval.",
+                        "properties": {
+                            "memory": {"type": "string", "description": "e.g., '256m', '512m'"},
+                            "cpus": {"type": "string", "description": "e.g., '0.5', '1'"},
+                        },
+                    },
+                },
+                "required": ["slug", "dockerfile_path", "port", "name", "description"],
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "list_workspace_projects",
+            "description": "List all workspace projects with their current status, deploy type, and URLs.",
+            "parameters": {"type": "object", "properties": {}},
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "undeploy_project",
+            "description": "Remove a deployed workspace project. For static sites, deletes files. For containers, stops and removes the container.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "slug": {"type": "string", "description": "The project slug to undeploy"},
+                },
+                "required": ["slug"],
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "get_bug_reports",
+            "description": "List open bug reports for workspace projects. Use this to find issues that need fixing.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "status_filter": {
+                        "type": "string",
+                        "description": "Filter by status: 'open', 'investigating', 'escalated', or 'all'. Default: 'open'",
+                    },
+                },
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "resolve_bug",
+            "description": "Mark a bug report as fixed after you have redeployed the fix.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "bug_report_id": {
+                        "type": "string",
+                        "description": "The UUID of the bug report to resolve",
+                    },
+                },
+                "required": ["bug_report_id"],
+            },
+        },
+    },
+    {
+        "type": "function",
+        "function": {
+            "name": "report_workspace_bug",
+            "description": "Report a bug on a deployed workspace project. Creates a bug report for the Software Engineer agent to investigate and fix.",
+            "parameters": {
+                "type": "object",
+                "properties": {
+                    "slug": {
+                        "type": "string",
+                        "description": "The project slug with the bug",
+                    },
+                    "description": {
+                        "type": "string",
+                        "description": "Detailed description of the bug, including steps to reproduce if possible",
+                    },
+                },
+                "required": ["slug", "description"],
+            },
+        },
+    },
+]
+
+AGENT_TOOLS = [
+    *AGENT_TOOLS,
+    *WORKSPACE_AGENT_TOOLS,
+]
+
 _ALWAYS_INCLUDE_CORE = {
     "complete_focus_item",
     FINISH_TOOL_NAME,
@@ -2066,7 +2295,23 @@ async def _agent_has_feishu(agent_id: uuid.UUID) -> bool:
                 select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "feishu",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
+                )
+            )
+            return r.scalar_one_or_none() is not None
+    except Exception:
+        return False
+
+
+async def _agent_has_any_channel(agent_id: uuid.UUID) -> bool:
+    """Check if agent has any configured channel (Feishu/DingTalk/WeCom)."""
+    try:
+        from app.models.channel_config import ChannelConfig
+        async with async_session() as db:
+            r = await db.execute(
+                select(ChannelConfig).where(
+                    ChannelConfig.agent_id == agent_id,
+                    ChannelConfig.is_configured,
                 )
             )
             return r.scalar_one_or_none() is not None
@@ -2082,7 +2327,7 @@ async def _agent_has_any_channel(agent_id: uuid.UUID) -> bool:
             r = await db.execute(
                 select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             return r.scalar_one_or_none() is not None
@@ -2183,7 +2428,7 @@ async def get_agent_tools_for_llm(agent_id: uuid.UUID) -> list[dict]:
 
             # Get all tools visible within this agent's tenant boundary.
             all_tools_r = await db.execute(
-                select(Tool).where(Tool.enabled == True, or_(*visible_clauses))
+                select(Tool).where(Tool.enabled, or_(*visible_clauses))
             )
             all_tools = all_tools_r.scalars().all()
 
@@ -2820,6 +3065,24 @@ async def execute_tool(
             result = await _generate_image(agent_id, ws, arguments, "custom")
         elif tool_name == "discover_resources":
             result = await _discover_resources(agent_id, arguments)
+        elif tool_name == "request_build":
+            result = await workspace_tools.tool_request_build(agent_id, arguments)
+        elif tool_name == "list_build_requests":
+            result = await workspace_tools.tool_list_build_requests()
+        elif tool_name == "deploy_static":
+            result = await workspace_tools.tool_deploy_static(agent_id, ws, arguments)
+        elif tool_name == "request_container_deploy":
+            result = await workspace_tools.tool_request_container_deploy(agent_id, ws, arguments)
+        elif tool_name == "list_workspace_projects":
+            result = await workspace_tools.tool_list_workspace_projects()
+        elif tool_name == "undeploy_project":
+            result = await workspace_tools.tool_undeploy_project(arguments)
+        elif tool_name == "get_bug_reports":
+            result = await workspace_tools.tool_get_bug_reports(arguments)
+        elif tool_name == "resolve_bug":
+            result = await workspace_tools.tool_resolve_bug(arguments)
+        elif tool_name == "report_workspace_bug":
+            result = await workspace_tools.tool_report_workspace_bug(agent_id, arguments)
         elif tool_name == "import_mcp_server":
             result = await _import_mcp_server(agent_id, arguments)
         # ── Feishu Bitable Tools ──
@@ -3005,8 +3268,6 @@ async def _web_search(arguments: dict, agent_id: uuid.UUID | None = None) -> str
 
     Config resolution priority: Agent config > Company config > Defaults.
     """
-    import httpx
-    import re
 
     query = arguments.get("query", "")
     if not query:
@@ -3037,7 +3298,8 @@ async def _web_search(arguments: dict, agent_id: uuid.UUID | None = None) -> str
 
 async def _search_duckduckgo(query: str, max_results: int) -> str:
     """Search via DuckDuckGo HTML (free, no API key)."""
-    import httpx, re
+    import httpx
+    import re
 
     async with httpx.AsyncClient(follow_redirects=True) as client:
         resp = await client.get(
@@ -3134,7 +3396,6 @@ async def _jina_search(arguments: dict) -> str:
 async def _jina_read(arguments: dict) -> str:
     """Read web page via Jina AI Reader API (r.jina.ai). Returns clean structured markdown."""
     import httpx
-    from app.config import get_settings
 
     url = arguments.get("url", "").strip()
     if not url:
@@ -5262,6 +5523,44 @@ async def _send_feishu_message(agent_id: uuid.UUID, args: dict) -> str:
             config = config_result.scalar_one_or_none()
             if not config:
                 return "❌ This agent has no Feishu channel configured"
+
+            async def _save_outgoing_to_feishu_session(feishu_user_id: str, org_member, title_name: str):
+                """Save the outgoing message to the Feishu P2P chat session."""
+                try:
+                    from datetime import datetime as _dt, timezone as _tz
+
+                    agent_r = await db.execute(select(AgentModel).where(AgentModel.id == agent_id))
+                    agent_obj = agent_r.scalar_one_or_none()
+
+                    platform_user = await get_platform_user_by_org_member(
+                        db=db,
+                        org_member=org_member,
+                        agent_tenant_id=agent_obj.tenant_id if agent_obj else None,
+                    )
+                    user_id = platform_user.id
+
+                    ext_conv_id = f"feishu_p2p_{feishu_user_id}"
+                    sess = await find_or_create_channel_session(
+                        db=db,
+                        agent_id=agent_id,
+                        user_id=user_id,
+                        external_conv_id=ext_conv_id,
+                        source_channel="feishu",
+                        first_message_title=f"[Agent → {title_name or feishu_user_id}]",
+                    )
+                    db.add(ChatMessage(
+                        agent_id=agent_id,
+                        user_id=user_id,
+                        role="assistant",
+                        content=message_text,
+                        conversation_id=str(sess.id),
+                    ))
+                    sess.last_message_at = _dt.now(_tz.utc)
+                    await db.commit()
+                    logger.info(f"[Feishu] Saved outgoing message to session {sess.id} (user_id: {feishu_user_id})")
+                except Exception as e:
+                    logger.error(f"[Feishu] Failed to save outgoing message to history: {e}")
+
             if direct_user_id and not member_name:
                 rel_result = await db.execute(
                     select(AgentRelationship)
@@ -5288,7 +5587,11 @@ async def _send_feishu_message(agent_id: uuid.UUID, args: dict) -> str:
                     )
                     if resp.get("code") == 0:
                         # Save to history session
-                        await _save_outgoing_to_feishu_session(direct_user_id)
+                        await _save_outgoing_to_feishu_session(
+                            direct_user_id,
+                            direct_rel.member if direct_rel else None,
+                            direct_rel.member.name if direct_rel and direct_rel.member else direct_user_id,
+                        )
                         return f"✅ 消息已发送（user_id: {direct_user_id}）"
                     return f"❌ 发送失败：{resp.get('msg')} (code {resp.get('code')})"
                 except FeishuAPIError as user_id_err:
@@ -5328,50 +5631,14 @@ async def _try_send(app_id: str, app_secret: str, receive_id: str, id_type: str
                     content=content, receive_id_type=id_type,
                 )
 
-            async def _save_outgoing_to_feishu_session(feishu_user_id: str):
-                """Save the outgoing message to the Feishu P2P chat session."""
-                try:
-                    from datetime import datetime as _dt, timezone as _tz
-
-
-                    agent_r = await db.execute(select(AgentModel).where(AgentModel.id == agent_id))
-                    agent_obj = agent_r.scalar_one_or_none()
-                    creator_id = agent_obj.creator_id if agent_obj else agent_id
-
-                    # Get or create platform user from OrgMember (unified logic)
-                    platform_user = await get_platform_user_by_org_member(
-                        db=db,
-                        org_member=target_member,
-                        agent_tenant_id=agent_obj.tenant_id if agent_obj else None,
-                    )
-                    user_id = platform_user.id
-
-                    ext_conv_id = f"feishu_p2p_{feishu_user_id}"
-                    sess = await find_or_create_channel_session(
-                        db=db,
-                        agent_id=agent_id,
-                        user_id=user_id,
-                        external_conv_id=ext_conv_id,
-                        source_channel="feishu",
-                        first_message_title=f"[Agent → {member_name or feishu_user_id}]",
-                    )
-                    db.add(ChatMessage(
-                        agent_id=agent_id,
-                        user_id=user_id,
-                        role="assistant",
-                        content=message_text,
-                        conversation_id=str(sess.id),
-                    ))
-                    sess.last_message_at = _dt.now(_tz.utc)
-                    await db.commit()
-                    logger.info(f"[Feishu] Saved outgoing message to session {sess.id} (user_id: {feishu_user_id})")
-                except Exception as e:
-                    logger.error(f"[Feishu] Failed to save outgoing message to history: {e}")
-
             try:
                 resp = await _try_send(config.app_id, config.app_secret, target_member.external_id, "user_id")
                 if resp.get("code") == 0:
-                    await _save_outgoing_to_feishu_session(target_member.external_id)
+                    await _save_outgoing_to_feishu_session(
+                        target_member.external_id,
+                        target_member,
+                        member_name or target_member.external_id,
+                    )
                     return f"✅ Successfully sent message to {member_name}"
                 logger.info(f"❌ Failed to send message to {target_member.external_id} via Feishu (user_id): {resp}")
                 return f"发送失败: {resp.get('msg')} (code {resp.get('code')})"
@@ -5532,7 +5799,7 @@ async def _send_dingtalk_message(
                 select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "dingtalk",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             config = config_result.scalar_one_or_none()
@@ -5628,7 +5895,7 @@ async def _send_wecom_message(
                 select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "wecom",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             config = config_result.scalar_one_or_none()
@@ -5717,7 +5984,7 @@ async def _send_slack_message(
                 select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "slack",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             config = config_result.scalar_one_or_none()
@@ -5800,7 +6067,7 @@ async def _send_teams_channel_message(
                 select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "microsoft_teams",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             config = config_result.scalar_one_or_none()
@@ -5825,7 +6092,7 @@ async def _send_teams_channel_message(
                     ChatSession.agent_id == agent_id,
                     ChatSession.user_id == platform_user.id,
                     ChatSession.source_channel == "microsoft_teams",
-                    ChatSession.is_group == False,
+                    ChatSession.is_group.is_(False),
                 )
                 .order_by(ChatSession.last_message_at.desc(), ChatSession.created_at.desc())
                 .limit(1)
@@ -5880,7 +6147,7 @@ async def _send_wechat_channel_message(
                 select(ChannelConfig).where(
                     ChannelConfig.agent_id == agent_id,
                     ChannelConfig.channel_type == "wechat",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             config = config_result.scalar_one_or_none()
@@ -6320,11 +6587,12 @@ async def _create_on_message_trigger(
     """Programmatically create an on_message trigger for an agent."""
     from app.models.trigger import AgentTrigger
 
-    focus_ref = await ensure_focus_item(
-        agent_id,
-        focus_ref=focus_ref,
-        description=reason or trigger_name,
-    )
+    if not focus_ref:
+        focus_ref = await ensure_focus_item(
+            agent_id,
+            focus_ref=focus_ref,
+            description=reason or trigger_name,
+        )
 
     config: dict = {"from_agent_name": from_agent_name}
     if notification_summary:
@@ -6394,6 +6662,18 @@ async def _append_focus_item(agent_id: uuid.UUID, identifier: str, description:
     except Exception as e:
         logger.warning(f"[A2A] Failed to update Focus for agent {agent_id}: {e}")
 
+    try:
+        focus_path = WORKSPACE_ROOT / str(agent_id) / "focus.md"
+        focus_path.parent.mkdir(parents=True, exist_ok=True)
+        content = focus_path.read_text(encoding="utf-8") if focus_path.exists() else "# Focus\n\n"
+        if identifier not in content:
+            if not content.endswith("\n"):
+                content += "\n"
+            content += f"- [ ] {identifier}: {description}\n"
+            focus_path.write_text(content, encoding="utf-8")
+    except Exception as e:
+        logger.warning(f"[A2A] Failed to mirror legacy focus file for agent {agent_id}: {e}")
+
 
 async def _wake_agent_async(agent_id: uuid.UUID, reason_context: str, *, from_agent_id: uuid.UUID | None = None, skip_dedup: bool = False, a2a_session_id: str | None = None) -> None:
     """Wake an agent asynchronously via the trigger invocation path.
@@ -7203,7 +7483,6 @@ async def _plaza_add_comment(agent_id: uuid.UUID, arguments: dict) -> str:
                 mentions = re.findall(r'@(\S+)', content)
                 if mentions:
                     from app.services.notification_service import send_notification
-                    from app.models.user import User
                     # Load agents in tenant
                     a_q = select(AgentModel).where(AgentModel.id != agent_id)
                     if agent.tenant_id:
@@ -7632,7 +7911,7 @@ async def _handle_set_trigger(
             result = await db.execute(
                 select(sa_func.count()).select_from(AgentTrigger).where(
                     AgentTrigger.agent_id == agent_id,
-                    AgentTrigger.is_enabled == True,
+                    AgentTrigger.is_enabled,
                 )
             )
             count = result.scalar() or 0
@@ -7733,7 +8012,7 @@ async def _handle_update_trigger(agent_id: uuid.UUID, arguments: dict) -> str:
                 changes.append(f"config: {old_config} → {new_config}")
             if new_reason is not None:
                 trigger.reason = new_reason
-                changes.append(f"reason updated")
+                changes.append("reason updated")
 
             await db.commit()
 
@@ -7839,12 +8118,11 @@ async def _upload_image(agent_id: uuid.UUID, ws: Path, arguments: dict) -> str:
 
     # ── Load ImageKit credentials (Agent > Company priority) ──
     private_key = ""
-    url_endpoint = ""
     try:
         # Use standard _get_tool_config (Agent > Company, cached, schema-aware decryption)
         config = await _get_tool_config(agent_id, "upload_image") or {}
         private_key = config.get("private_key", "")
-        url_endpoint = config.get("url_endpoint", "")
+        config.get("url_endpoint", "")
     except Exception as e:
         logger.error(f"[UploadImage] Config load error: {e}")
 
@@ -8490,7 +8768,7 @@ async def _get_feishu_token(agent_id: uuid.UUID) -> tuple[str, str] | None:
             select(ChannelConfig).where(
                 ChannelConfig.agent_id == agent_id,
                 ChannelConfig.channel_type == "feishu",
-                ChannelConfig.is_configured == True,
+                ChannelConfig.is_configured,
             )
         )
         config = result.scalar_one_or_none()
@@ -8691,7 +8969,7 @@ def _parse_feishu_url(url: str) -> dict:
         result['table_id'] = table_match.group(1)
     
     # support URL with /tblxxxxxx
-    if not 'table_id' in result:
+    if 'table_id' not in result:
         tbl_match = re.search(r'/(tbl[a-zA-Z0-9_]+)', url)
         if tbl_match:
             result['table_id'] = tbl_match.group(1)
@@ -8907,7 +9185,7 @@ async def _bitable_query_records(agent_id: uuid.UUID, arguments: dict) -> str:
         elif isinstance(filter_info, str) and filter_info.strip():
             try:
                 filters_dict = json.loads(filter_info)
-            except:
+            except Exception:
                 pass 
                 
         resp = await feishu_service.bitable_query_records(app_id, app_secret, app_token, table_id, filters_dict)
@@ -9261,7 +9539,7 @@ async def _feishu_wiki_list(agent_id: uuid.UUID, arguments: dict) -> str:
 
     space_id = node_info["space_id"]
     if not space_id:
-        return f"❌ 无法获取知识库 space_id，请检查 token 是否正确。"
+        return "❌ 无法获取知识库 space_id，请检查 token 是否正确。"
 
     async def _list_children(parent_token: str, depth: int) -> list[dict]:
         """Return flat list of {title, node_token, obj_token, has_child, depth}."""
@@ -9857,8 +10135,8 @@ async def _feishu_drive_share(agent_id: uuid.UUID, arguments: dict) -> str:
                         # Feishu platform policy: you cannot add yourself as a collaborator via API.
                         # Permissions must be granted by others, or set manually in the UI.
                         results.append(
-                            f"⚠️ 飞书平台安全限制：无法通过 API 为自己添加协作权限。\n"
-                            f"请手动操作：打开文档 → 右上角「分享」→ 添加自己并设置权限。"
+                            "⚠️ 飞书平台安全限制：无法通过 API 为自己添加协作权限。\n"
+                            "请手动操作：打开文档 → 右上角「分享」→ 添加自己并设置权限。"
                         )
                     elif _c in (99991672, 99991668):
                         return (
@@ -9968,7 +10246,7 @@ async def _feishu_drive_delete(agent_id: uuid.UUID, arguments: dict) -> str:
         elif code == 1061007:
             return f"❌ 文件 `{file_token}` 已被删除。"
         elif code == 1061045:
-            return f"⚠️ 接口频率限制，请稍后重试。（每秒最多 5 次）"
+            return "⚠️ 接口频率限制，请稍后重试。（每秒最多 5 次）"
         else:
             return f"❌ 删除{type_label}失败：{msg} (code {code})"
 
@@ -10069,7 +10347,7 @@ def _to_unix(t: str | None, default: datetime) -> str:
                             busy_lines.append(f"  🔴 {s}–{e}")
                         except Exception:
                             busy_lines.append(f"  🔴 {slot.get('start_time')}–{slot.get('end_time')}")
-                    freebusy_section = f"\n📌 **用户真实日历（忙碌时段）**：\n" + "\n".join(busy_lines)
+                    freebusy_section = "\n📌 **用户真实日历（忙碌时段）**：\n" + "\n".join(busy_lines)
                 else:
                     freebusy_section = "\n📌 **用户真实日历**：该时段全部空闲。"
         except Exception as _fe:
@@ -10414,7 +10692,6 @@ async def _feishu_user_search(agent_id: uuid.UUID, arguments: dict) -> str:
     2. Fall back to Contact v3 GET /users/{open_id} if we find a match by email.
     The cache is populated by feishu.py each time a message sender is resolved.
     """
-    import httpx
     import json as _json
     import pathlib as _pl
 
@@ -10426,7 +10703,7 @@ async def _feishu_user_search(agent_id: uuid.UUID, arguments: dict) -> str:
     if not app_id or not app_secret:
         return "❌ Agent has no Feishu channel configured."
     from app.services.feishu_service import feishu_service
-    token = await feishu_service.get_tenant_access_token(app_id, app_secret)
+    await feishu_service.get_tenant_access_token(app_id, app_secret)
 
     # ── Load local contacts cache ─────────────────────────────────────────────
     _cache_file = _pl.Path(f"/data/workspaces/{agent_id}/feishu_contacts_cache.json")
@@ -10869,7 +11146,7 @@ async def _agentbay_browser_click(agent_id: Optional[uuid.UUID], ws: Path, argum
     except RuntimeError as e:
         return f"❌ {str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Browser click failed")
+        logger.exception("[AgentBay] Browser click failed")
         return f"❌ 点击失败: {str(e)[:200]}"
 
 
@@ -10891,7 +11168,7 @@ async def _agentbay_browser_type(agent_id: Optional[uuid.UUID], ws: Path, argume
     except RuntimeError as e:
         return f"❌ {str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Browser type failed")
+        logger.exception("[AgentBay] Browser type failed")
         return f"❌ 输入失败: {str(e)[:200]}"
 
 
@@ -11800,7 +12077,7 @@ async def _agentbay_computer_click(agent_id: Optional[uuid.UUID], ws: Path, argu
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer click failed")
+        logger.exception("[AgentBay] Computer click failed")
         return f"Click failed: {str(e)[:200]}"
 
 
@@ -11821,11 +12098,11 @@ async def _agentbay_computer_input_text(agent_id: Optional[uuid.UUID], ws: Path,
         result = await client.computer_input_text(text)
         if result.get("success"):
             return f"Typed text: {text[:100]}"
-        return f"Text input failed"
+        return "Text input failed"
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer input_text failed")
+        logger.exception("[AgentBay] Computer input_text failed")
         return f"Text input failed: {str(e)[:200]}"
 
 
@@ -11853,7 +12130,7 @@ async def _agentbay_computer_press_keys(agent_id: Optional[uuid.UUID], ws: Path,
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer press_keys failed")
+        logger.exception("[AgentBay] Computer press_keys failed")
         return f"Key press failed: {str(e)[:200]}"
 
 
@@ -11875,11 +12152,11 @@ async def _agentbay_computer_scroll(agent_id: Optional[uuid.UUID], ws: Path, arg
         result = await client.computer_scroll(x, y, direction=direction, amount=amount)
         if result.get("success"):
             return f"Scrolled {direction} by {amount} step(s) at ({x}, {y})"
-        return f"Scroll failed"
+        return "Scroll failed"
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer scroll failed")
+        logger.exception("[AgentBay] Computer scroll failed")
         return f"Scroll failed: {str(e)[:200]}"
 
 
@@ -11899,11 +12176,11 @@ async def _agentbay_computer_move_mouse(agent_id: Optional[uuid.UUID], ws: Path,
         result = await client.computer_move_mouse(x, y)
         if result.get("success"):
             return f"Mouse moved to ({x}, {y})"
-        return f"Mouse move failed"
+        return "Mouse move failed"
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer move_mouse failed")
+        logger.exception("[AgentBay] Computer move_mouse failed")
         return f"Mouse move failed: {str(e)[:200]}"
 
 
@@ -11926,11 +12203,11 @@ async def _agentbay_computer_drag_mouse(agent_id: Optional[uuid.UUID], ws: Path,
         result = await client.computer_drag_mouse(from_x, from_y, to_x, to_y, button=button)
         if result.get("success"):
             return f"Dragged from ({from_x}, {from_y}) to ({to_x}, {to_y})"
-        return f"Drag failed"
+        return "Drag failed"
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer drag_mouse failed")
+        logger.exception("[AgentBay] Computer drag_mouse failed")
         return f"Drag failed: {str(e)[:200]}"
 
 
@@ -11954,7 +12231,7 @@ async def _agentbay_computer_get_screen_size(agent_id: Optional[uuid.UUID], ws:
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer get_screen_size failed")
+        logger.exception("[AgentBay] Computer get_screen_size failed")
         return f"Get screen size failed: {str(e)[:200]}"
 
 
@@ -12051,7 +12328,7 @@ async def _agentbay_computer_start_app(agent_id: Optional[uuid.UUID], ws: Path,
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer start_app failed")
+        logger.exception("[AgentBay] Computer start_app failed")
         return f"Start application failed: {str(e)[:200]}"
 
 
@@ -12087,7 +12364,7 @@ async def _agentbay_computer_get_installed_apps(agent_id: Optional[uuid.UUID], w
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer get_installed_apps failed")
+        logger.exception("[AgentBay] Computer get_installed_apps failed")
         return f"Get installed applications failed: {str(e)[:200]}"
 
 
@@ -12111,7 +12388,7 @@ async def _agentbay_computer_get_cursor_position(agent_id: Optional[uuid.UUID],
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer get_cursor_position failed")
+        logger.exception("[AgentBay] Computer get_cursor_position failed")
         return f"Get cursor position failed: {str(e)[:200]}"
 
 
@@ -12135,7 +12412,7 @@ async def _agentbay_computer_get_active_window(agent_id: Optional[uuid.UUID], ws
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer get_active_window failed")
+        logger.exception("[AgentBay] Computer get_active_window failed")
         return f"Get active window failed: {str(e)[:200]}"
 
 
@@ -12160,7 +12437,7 @@ async def _agentbay_computer_activate_window(agent_id: Optional[uuid.UUID], ws:
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer activate_window failed")
+        logger.exception("[AgentBay] Computer activate_window failed")
         return f"Activate window failed: {str(e)[:200]}"
 
 
@@ -12195,7 +12472,7 @@ async def _agentbay_computer_list_windows(agent_id: Optional[uuid.UUID], ws: Pat
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer list_windows failed")
+        logger.exception("[AgentBay] Computer list_windows failed")
         return f"List windows failed: {str(e)[:200]}"
 
 
@@ -12259,7 +12536,7 @@ async def _agentbay_computer_close_window(agent_id: Optional[uuid.UUID], ws: Pat
         except RuntimeError as e:
             return f"{str(e)}"
         except Exception as e:
-            logger.exception(f"[AgentBay] Computer close_window candidate lookup failed")
+            logger.exception("[AgentBay] Computer close_window candidate lookup failed")
             return f"Close window requires window_id. Candidate lookup failed: {str(e)[:200]}"
 
     try:
@@ -12275,7 +12552,7 @@ async def _agentbay_computer_close_window(agent_id: Optional[uuid.UUID], ws: Pat
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer close_window failed")
+        logger.exception("[AgentBay] Computer close_window failed")
         return f"Close window failed: {str(e)[:200]}"
 
 
@@ -12321,7 +12598,7 @@ async def _agentbay_computer_dismiss_dialog(agent_id: Optional[uuid.UUID], ws: P
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer dismiss_dialog failed")
+        logger.exception("[AgentBay] Computer dismiss_dialog failed")
         return f"Dismiss dialog failed: {str(e)[:200]}"
 
 
@@ -12347,7 +12624,7 @@ async def _agentbay_computer_list_visible_apps(agent_id: Optional[uuid.UUID], ws
     except RuntimeError as e:
         return f"{str(e)}"
     except Exception as e:
-        logger.exception(f"[AgentBay] Computer list_visible_apps failed")
+        logger.exception("[AgentBay] Computer list_visible_apps failed")
         return f"List applications failed: {str(e)[:200]}"
 
 
@@ -12545,8 +12822,6 @@ async def _get_okr(agent_id: uuid.UUID | None, arguments: dict) -> str:
     Includes company-level O+KR and every member's individual O+KR.
     This is a read-only tool available to all agents.
     """
-    import json
-    import httpx
 
     # Resolve tenant_id from the calling agent
     if not agent_id:
@@ -12559,7 +12834,7 @@ async def _get_okr(agent_id: uuid.UUID | None, arguments: dict) -> str:
         from app.models.org import OrgMember
         from app.models.user import User
         from sqlalchemy import select as _select
-        from datetime import date, timedelta
+        from datetime import date
 
         async with async_session() as db:
             # Look up the agent's tenant
@@ -12725,7 +13000,6 @@ async def _get_my_okr(agent_id: uuid.UUID | None, arguments: dict) -> str:
         from app.models.agent import Agent
         from app.models.okr import OKRObjective, OKRKeyResult, OKRSettings
         from sqlalchemy import select as _select
-        from datetime import date, timedelta
 
         async with async_session() as db:
             agent_result = await db.execute(_select(Agent).where(Agent.id == agent_id))
@@ -13274,7 +13548,7 @@ async def _create_objective(agent_id: uuid.UUID | None, user_id: uuid.UUID | Non
             owner_info = f"owner={owner_name_hint or owner_id_str or 'unattributed'}"
             return f"Successfully created Objective '{obj.title}' (ID: {obj.id}, {owner_info})"
     except Exception as e:
-        logger.exception(f"[OKR] create_objective failed")
+        logger.exception("[OKR] create_objective failed")
         return f"Failed to create objective: {str(e)[:200]}"
 
 
@@ -13323,7 +13597,7 @@ async def _create_key_result(agent_id: uuid.UUID | None, user_id: uuid.UUID | No
             await db.commit()
             return f"Successfully created Key Result '{kr.title}' (ID: {kr.id})"
     except Exception as e:
-        logger.exception(f"[OKR] create_key_result failed")
+        logger.exception("[OKR] create_key_result failed")
         return f"Failed to create key result: {str(e)[:200]}"
 
 
@@ -13391,7 +13665,7 @@ async def _update_objective(agent_id: uuid.UUID | None, user_id: uuid.UUID | Non
             await db.commit()
             return f"Successfully updated Objective {obj.id}. Changed fields: {', '.join(updates)}"
     except Exception as e:
-        logger.exception(f"[OKR] update_objective failed")
+        logger.exception("[OKR] update_objective failed")
         return f"Failed to update objective: {str(e)[:200]}"
 
 
@@ -13466,7 +13740,7 @@ async def _update_any_kr_progress(agent_id: uuid.UUID | None, user_id: uuid.UUID
 
             return f"Successfully updated KR '{kr.title}'. Progress: {old_val} -> {kr.current_value} {kr.unit or ''}. Status: {kr.status}"
     except Exception as e:
-        logger.exception(f"[OKR] update_any_kr_progress failed")
+        logger.exception("[OKR] update_any_kr_progress failed")
         return f"Failed to update kr progress: {str(e)[:200]}"
 
 
diff --git a/backend/app/services/agentbay_client.py b/backend/app/services/agentbay_client.py
index 880088109..161fa61ac 100644
--- a/backend/app/services/agentbay_client.py
+++ b/backend/app/services/agentbay_client.py
@@ -11,7 +11,7 @@
 from typing import Optional
 from loguru import logger
 
-from agentbay import AgentBay, BrowserOption, CreateSessionParams
+from agentbay import AgentBay, CreateSessionParams
 
 
 @dataclass
@@ -72,7 +72,7 @@ async def close_session(self):
             return
         try:
             await asyncio.to_thread(self._session.delete)
-            logger.info(f"[AgentBay] Closed session")
+            logger.info("[AgentBay] Closed session")
         except Exception as e:
             logger.warning(f"[AgentBay] Failed to close session: {e}")
         finally:
@@ -689,7 +689,7 @@ async def _fetch(session):
             select(ChannelConfig).where(
                 ChannelConfig.agent_id == agent_id,
                 ChannelConfig.channel_type == "agentbay",
-                ChannelConfig.is_configured == True,
+                ChannelConfig.is_configured,
             )
         )
         config = result.scalar_one_or_none()
@@ -715,7 +715,7 @@ async def _fetch(session):
         tool_result = await session.execute(
             select(Tool).where(
                 Tool.name == "agentbay_browser_navigate",
-                Tool.enabled == True,
+                Tool.enabled,
             ).limit(1)
         )
         tool = tool_result.scalar_one_or_none()
@@ -727,7 +727,7 @@ async def _fetch(session):
         all_result = await session.execute(
             select(Tool).where(
                 Tool.category == "agentbay",
-                Tool.enabled == True,
+                Tool.enabled,
             ).order_by(Tool.name)
         )
         candidate_tools.extend(
diff --git a/backend/app/services/audit_logger.py b/backend/app/services/audit_logger.py
index 91a5cd743..6625715cb 100644
--- a/backend/app/services/audit_logger.py
+++ b/backend/app/services/audit_logger.py
@@ -4,7 +4,6 @@
 import uuid
 from datetime import datetime, timezone
 from enum import Enum
-from typing import Any
 
 from loguru import logger
 
diff --git a/backend/app/services/auth_provider.py b/backend/app/services/auth_provider.py
index 625918dcc..943071dd6 100644
--- a/backend/app/services/auth_provider.py
+++ b/backend/app/services/auth_provider.py
@@ -9,13 +9,10 @@
 import httpx
 from abc import ABC, abstractmethod
 from dataclasses import dataclass
-from datetime import datetime
-from typing import Any
 
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from app.core.security import create_access_token, hash_password
 from app.models.identity import IdentityProvider
 from app.models.user import User, Identity
 from app.services.google_workspace_oauth import GOOGLE_HTTP_PROXY
@@ -279,6 +276,7 @@ class FeishuAuthProvider(BaseAuthProvider):
     FEISHU_TOKEN_URL = "https://open.feishu.cn/open-apis/authen/v1/oidc/access_token"
     FEISHU_USER_INFO_URL = "https://open.feishu.cn/open-apis/authen/v1/user_info"
     FEISHU_APP_TOKEN_URL = "https://open.feishu.cn/open-apis/auth/v3/app_access_token/internal"
+    FEISHU_CONTACT_ME_URL = "https://open.feishu.cn/open-apis/contact/v3/users/me"
 
     def __init__(self, provider: IdentityProvider | None = None, config: dict | None = None):
         super().__init__(provider, config)
@@ -325,14 +323,36 @@ async def get_user_info(self, access_token: str) -> ExternalUserInfo:
             info_data = info_resp.json().get("data", {})
             logger.info(f"Feishu user info: {info_data}")
 
+            contact_data: dict = {}
+            try:
+                app_token = await self.get_app_access_token()
+                contact_resp = await client.get(
+                    self.FEISHU_CONTACT_ME_URL,
+                    headers={
+                        "Authorization": f"Bearer {access_token}",
+                        "x-tt-env": "prod",
+                        "x-lark-tenant-access-token": app_token,
+                    },
+                )
+                contact_payload = contact_resp.json()
+                contact_data = (contact_payload.get("data") or {}).get("user") or {}
+            except Exception as exc:
+                logger.warning(f"Feishu contact lookup failed: {exc}")
+
+            provider_user_id = contact_data.get("user_id") or info_data.get("open_id")
+            email = contact_data.get("email") or info_data.get("email", "")
+            mobile = contact_data.get("mobile") or info_data.get("mobile", "")
+            raw_data = {**info_data, **contact_data}
+
             return ExternalUserInfo(
                 provider_type=self.provider_type,
                 provider_union_id=info_data.get("union_id"),
+                provider_user_id=provider_user_id,
                 name=info_data.get("name", ""),
-                email=info_data.get("email", ""),
+                email=email,
                 avatar_url=info_data.get("avatar_url", ""),
-                mobile=info_data.get("mobile", ""),
-                raw_data=info_data,
+                mobile=mobile,
+                raw_data=raw_data,
             )
 
     async def _find_user_by_legacy_fields(self, db: AsyncSession, user_info: ExternalUserInfo) -> User | None:
@@ -365,7 +385,6 @@ def __init__(self, provider: IdentityProvider | None = None, config: dict | None
     async def get_authorization_url(self, redirect_uri: str, state: str) -> str:
         app_id = self.app_key or ""
         base_url = "https://login.dingtalk.com/oauth2/auth"
-        from urllib.parse import quote
         # Contact.User.Read is required for GET /v1.0/contact/users/me (user info on callback)
         # contact.user.mobile requires the fieldMobile permission in DingTalk console
         # fieldEmail requires the fieldEmail permission in DingTalk console
@@ -473,7 +492,6 @@ async def get_authorization_url(self, redirect_uri: str, state: str) -> str:
         to authenticate with their WeCom account then returns them to redirect_uri
         with a code parameter.
         """
-        from urllib.parse import quote
         base_url = "https://open.work.weixin.qq.com/wwlogin/sso/login"
         params = (
             f"loginType=CorpPinCorp"
@@ -667,7 +685,6 @@ def _build_authorization_url(
         access_type: str = "online",
         prompt: str = "select_account",
     ) -> str:
-        from urllib.parse import quote
 
         scope_value = scopes or self.scope
         if isinstance(scope_value, list):
diff --git a/backend/app/services/auth_registry.py b/backend/app/services/auth_registry.py
index 364f40ac6..425943596 100644
--- a/backend/app/services/auth_registry.py
+++ b/backend/app/services/auth_registry.py
@@ -12,13 +12,6 @@
 from app.services.auth_provider import (
     PROVIDER_CLASSES,
     BaseAuthProvider,
-    DingTalkAuthProvider,
-    FeishuAuthProvider,
-    GitHubAuthProvider,
-    GoogleAuthProvider,
-    GoogleWorkspaceAuthProvider,
-    MicrosoftTeamsAuthProvider,
-    WeComAuthProvider,
 )
 
 
@@ -53,7 +46,7 @@ async def get_provider(
         # Try to get provider config from database
         query = select(IdentityProvider).where(
             IdentityProvider.provider_type == provider_type,
-            IdentityProvider.is_active == True,
+            IdentityProvider.is_active,
             IdentityProvider.tenant_id == tenant_id
         )
 
@@ -98,7 +91,7 @@ async def list_providers(
         Returns:
             List of IdentityProvider records
         """
-        query = select(IdentityProvider).where(IdentityProvider.is_active == True)
+        query = select(IdentityProvider).where(IdentityProvider.is_active)
 
         if tenant_id:
             # Only include tenant-specific ones
diff --git a/backend/app/services/channel_user_service.py b/backend/app/services/channel_user_service.py
index 5f499d00d..cb64148e1 100644
--- a/backend/app/services/channel_user_service.py
+++ b/backend/app/services/channel_user_service.py
@@ -12,7 +12,6 @@
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from app.core.security import hash_password
 from app.models.agent import Agent
 from app.models.identity import IdentityProvider
 from app.models.org import OrgMember
diff --git a/backend/app/services/chat_session_service.py b/backend/app/services/chat_session_service.py
index 1712cf901..1c0e3c1b3 100644
--- a/backend/app/services/chat_session_service.py
+++ b/backend/app/services/chat_session_service.py
@@ -25,8 +25,8 @@ async def get_primary_platform_session(
             ChatSession.agent_id == agent_id,
             ChatSession.user_id == user_id,
             ChatSession.source_channel == "web",
-            ChatSession.is_group == False,
-            ChatSession.is_primary == True,
+            ChatSession.is_group.is_(False),
+            ChatSession.is_primary.is_(True),
         )
         .limit(1)
     )
@@ -68,7 +68,7 @@ async def ensure_primary_platform_session(
             ChatSession.agent_id == agent_id,
             ChatSession.user_id == user_id,
             ChatSession.source_channel == "web",
-            ChatSession.is_group == False,
+            ChatSession.is_group.is_(False),
         )
         .order_by(
             case((func.coalesce(user_message_count.c.user_msg_count, 0) > 0, 0), else_=1),
diff --git a/backend/app/services/collaboration.py b/backend/app/services/collaboration.py
index 394281d8a..a9e1ec6b8 100644
--- a/backend/app/services/collaboration.py
+++ b/backend/app/services/collaboration.py
@@ -1,6 +1,5 @@
 """Agent collaboration service — Agent-to-Agent communication."""
 
-import json
 import uuid
 from datetime import datetime, timezone
 
diff --git a/backend/app/services/dingtalk_stream.py b/backend/app/services/dingtalk_stream.py
index 73cf80b20..dcaadb099 100644
--- a/backend/app/services/dingtalk_stream.py
+++ b/backend/app/services/dingtalk_stream.py
@@ -673,7 +673,7 @@ async def start_all(self):
         async with async_session() as db:
             result = await db.execute(
                 select(ChannelConfig).where(
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                     ChannelConfig.channel_type == "dingtalk",
                 )
             )
diff --git a/backend/app/services/discord_gateway.py b/backend/app/services/discord_gateway.py
index 1593f7a7c..d2c5f5717 100644
--- a/backend/app/services/discord_gateway.py
+++ b/backend/app/services/discord_gateway.py
@@ -115,7 +115,7 @@ async def on_message(message: discord.Message):
                     await message.reply(chunk, mention_author=False)
 
         # Run the bot in a background task
-        proxy = os.environ.get("DISCORD_PROXY") or os.environ.get("HTTPS_PROXY") or None
+        os.environ.get("DISCORD_PROXY") or os.environ.get("HTTPS_PROXY") or None
 
         async def _run_bot():
             try:
@@ -148,10 +148,7 @@ async def _handle_message(
             from app.models.agent import Agent as AgentModel
             from app.api.feishu import _call_agent_llm
             from app.services.channel_session import find_or_create_channel_session
-            from app.models.user import User as _User
-            from app.core.security import hash_password as _hp
             from datetime import datetime, timezone
-            import uuid as _uuid
 
             sender_id = str(message.author.id)
             channel_id = str(message.channel.id)
@@ -169,7 +166,6 @@ async def _handle_message(
                 agent_obj = agent_r.scalar_one_or_none()
                 if not agent_obj:
                     return "Agent not found."
-                creator_id = agent_obj.creator_id
                 from app.models.agent import DEFAULT_CONTEXT_WINDOW_SIZE
                 ctx_size = agent_obj.context_window_size or DEFAULT_CONTEXT_WINDOW_SIZE
 
@@ -280,7 +276,7 @@ async def start_all(self):
         async with async_session() as db:
             result = await db.execute(
                 select(ChannelConfig).where(
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                     ChannelConfig.channel_type == "discord",
                 )
             )
diff --git a/backend/app/services/document_conversion/html_to_pdf.py b/backend/app/services/document_conversion/html_to_pdf.py
index c1b9b8d78..59e8eec99 100644
--- a/backend/app/services/document_conversion/html_to_pdf.py
+++ b/backend/app/services/document_conversion/html_to_pdf.py
@@ -2,8 +2,6 @@
 
 import asyncio
 import json
-import os
-import re
 from pathlib import Path
 from typing import Any
 
diff --git a/backend/app/services/email_service.py b/backend/app/services/email_service.py
index 88799ce47..0930f5c2a 100644
--- a/backend/app/services/email_service.py
+++ b/backend/app/services/email_service.py
@@ -5,7 +5,6 @@
 """
 
 import imaplib
-import socket
 import smtplib
 import ssl
 import email as email_lib
@@ -14,7 +13,7 @@
 from email.mime.base import MIMEBase
 from email import encoders
 from email.header import decode_header
-from email.utils import parseaddr, formataddr, make_msgid
+from email.utils import parseaddr, make_msgid
 from datetime import datetime
 from pathlib import Path
 from typing import Optional
diff --git a/backend/app/services/email_verification_service.py b/backend/app/services/email_verification_service.py
index 67562901b..b47cb7fbb 100644
--- a/backend/app/services/email_verification_service.py
+++ b/backend/app/services/email_verification_service.py
@@ -20,7 +20,6 @@ class EmailVerificationService:
 
     def _hash_token(self, token: str) -> str:
         """Hash a raw verification token before persistence or lookup."""
-        import hashlib
         return hashlib.sha256(token.encode("utf-8")).hexdigest()
 
     async def create_email_verification_token(self, identity_id: uuid.UUID, email: str) -> tuple[str, datetime]:
@@ -34,7 +33,6 @@ async def create_email_verification_token(self, identity_id: uuid.UUID, email: s
             await redis.delete(f"{TOKEN_PREFIX}{old_code_hash}")
 
         # Generate a random 6-digit code
-        import secrets
         raw_code = "".join([str(secrets.randbelow(10)) for _ in range(6)])
         code_hash = self._hash_token(raw_code)
 
diff --git a/backend/app/services/feishu_service.py b/backend/app/services/feishu_service.py
index 9203e07d9..37d06bc7a 100644
--- a/backend/app/services/feishu_service.py
+++ b/backend/app/services/feishu_service.py
@@ -12,11 +12,11 @@
 except ImportError:
     lark = None  # type: ignore
     _HAS_LARK = False
-from sqlalchemy import select, or_
+from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.config import get_settings
-from app.core.security import create_access_token, hash_password
+from app.core.security import create_access_token
 from app.models.user import User, Identity
 from app.models.identity import IdentityProvider
 
@@ -201,8 +201,9 @@ async def login_or_register(self, db: AsyncSession, feishu_user: dict, tenant_id
 
         open_id = feishu_user["open_id"]
         user_id = feishu_user.get("user_id", "")
-        union_id = feishu_user.get("union_id")
+        feishu_user.get("union_id")
         fs_email = feishu_user.get("email", "")
+        fs_mobile = feishu_user.get("mobile", "")
         fs_name = feishu_user.get("name", "")
         fs_avatar = feishu_user.get("avatar_url", "")
 
@@ -298,7 +299,7 @@ async def login_or_register(self, db: AsyncSession, feishu_user: dict, tenant_id
             identity = await registration_service.find_or_create_identity(
                 db,
                 email=email,
-                phone=user_info.get("mobile"),
+                phone=fs_mobile,
                 username=username,
                 password=open_id,
             )
@@ -477,7 +478,7 @@ async def send_approval_card(self, app_id: str, app_secret: str,
                                   action_type: str, details: str, approval_id: str) -> dict:
         """Send an interactive approval card to the agent creator via Feishu."""
         import json
-        card_content = json.dumps({
+        json.dumps({
             "type": "template",
             "data": {
                 "template_id": "",  # Use custom card
diff --git a/backend/app/services/feishu_ws.py b/backend/app/services/feishu_ws.py
index 9459aed1a..4c9732e31 100644
--- a/backend/app/services/feishu_ws.py
+++ b/backend/app/services/feishu_ws.py
@@ -1,8 +1,6 @@
 """Feishu WebSocket Long Connection Manager."""
 
 import asyncio
-import json
-import threading
 from typing import Any, Dict
 import uuid
 
@@ -359,7 +357,7 @@ async def start_all(self):
         async with async_session() as db:
             result = await db.execute(
                 select(ChannelConfig).where(
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                     ChannelConfig.channel_type == "feishu",
                 )
             )
diff --git a/backend/app/services/heartbeat.py b/backend/app/services/heartbeat.py
index 596cb8a25..790394f8b 100644
--- a/backend/app/services/heartbeat.py
+++ b/backend/app/services/heartbeat.py
@@ -247,7 +247,7 @@ async def _execute_heartbeat(agent_id: uuid.UUID):
                 notif_result = await db.execute(
                     select(Notification).where(
                         Notification.agent_id == agent_id,
-                        Notification.is_read == False,
+                        not Notification.is_read,
                     ).order_by(Notification.created_at).limit(10)
                 )
                 unread = notif_result.scalars().all()
@@ -461,7 +461,7 @@ async def _heartbeat_tick():
         async with async_session() as db:
             result = await db.execute(
                 select(Agent).where(
-                    Agent.heartbeat_enabled == True,
+                    Agent.heartbeat_enabled,
                     Agent.status.in_(["running", "idle"]),
                 )
             )
diff --git a/backend/app/services/llm/__init__.py b/backend/app/services/llm/__init__.py
index 7bc80cab1..891cd0113 100644
--- a/backend/app/services/llm/__init__.py
+++ b/backend/app/services/llm/__init__.py
@@ -1,58 +1,49 @@
 """LLM service module - unified LLM calling interface.
 
-This module provides:
-- call_llm: Basic LLM call with tool support
-- call_llm_with_failover: LLM call with automatic failover
-- call_agent_llm: Agent chat LLM call
-- call_agent_llm_with_tools: Agent LLM call with tools for background tasks
-
-Example:
-    from app.services.llm import call_llm, call_llm_with_failover
-
-    # Basic call
-    reply = await call_llm(model, messages, agent_name, role_description)
-
-    # With failover
-    reply = await call_llm_with_failover(
-        primary_model=primary,
-        fallback_model=fallback,
-        messages=messages,
-        ...
-    )
+This package intentionally resolves its public exports lazily so leaf modules
+like ``app.services.llm.finish`` can be imported without triggering ``caller``
+and recreating import cycles with ``app.services.agent_tools``.
 """
 
-from .caller import (
-    call_llm,
-    call_llm_with_failover,
-    call_agent_llm,
-    call_agent_llm_with_tools,
-    FailoverGuard,
-    is_retryable_error,
-)
-from .client import LLMClient, LLMResponse, LLMError, LLMMessage
-from .failover import classify_error, FailoverErrorType
-from .utils import create_llm_client, get_max_tokens, get_model_api_key, get_provider_base_url, get_provider_manifest
-
-__all__ = [
-    # Core caller functions
-    "call_llm",
-    "call_llm_with_failover",
-    "call_agent_llm",
-    "call_agent_llm_with_tools",
-    # Failover utilities
-    "FailoverGuard",
-    "is_retryable_error",
-    "classify_error",
-    "FailoverErrorType",
+from __future__ import annotations
+
+from importlib import import_module
+
+_EXPORTS: dict[str, tuple[str, str | None]] = {
+    # Caller module / functions
+    "caller": (".caller", None),
+    "call_llm": (".caller", "call_llm"),
+    "call_llm_with_failover": (".caller", "call_llm_with_failover"),
+    "call_agent_llm": (".caller", "call_agent_llm"),
+    "call_agent_llm_with_tools": (".caller", "call_agent_llm_with_tools"),
+    "FailoverGuard": (".caller", "FailoverGuard"),
+    "is_retryable_error": (".caller", "is_retryable_error"),
     # Client classes
-    "LLMClient",
-    "LLMResponse",
-    "LLMError",
-    "LLMMessage",
-    # Utilities
-    "create_llm_client",
-    "get_max_tokens",
-    "get_model_api_key",
-    "get_provider_base_url",
-    "get_provider_manifest",
-]
+    "LLMClient": (".client", "LLMClient"),
+    "LLMResponse": (".client", "LLMResponse"),
+    "LLMError": (".client", "LLMError"),
+    "LLMMessage": (".client", "LLMMessage"),
+    # Failover utilities
+    "classify_error": (".failover", "classify_error"),
+    "FailoverErrorType": (".failover", "FailoverErrorType"),
+    # Shared helpers
+    "create_llm_client": (".utils", "create_llm_client"),
+    "get_max_tokens": (".utils", "get_max_tokens"),
+    "get_model_api_key": (".utils", "get_model_api_key"),
+    "get_provider_base_url": (".utils", "get_provider_base_url"),
+    "get_provider_manifest": (".utils", "get_provider_manifest"),
+}
+
+__all__ = list(_EXPORTS)
+
+
+def __getattr__(name: str):
+    try:
+        module_name, attr_name = _EXPORTS[name]
+    except KeyError as exc:
+        raise AttributeError(f"module {__name__!r} has no attribute {name!r}") from exc
+
+    module = import_module(module_name, __name__)
+    value = module if attr_name is None else getattr(module, attr_name)
+    globals()[name] = value
+    return value
diff --git a/backend/app/services/llm/utils.py b/backend/app/services/llm/utils.py
index fbb3637b2..08d7f13f5 100644
--- a/backend/app/services/llm/utils.py
+++ b/backend/app/services/llm/utils.py
@@ -28,8 +28,6 @@
     ProviderSpec,
     PROVIDER_URLS,
     TOOL_CHOICE_PROVIDERS,
-    MAX_TOKENS_BY_PROVIDER as _MAX_TOKENS_BY_PROVIDER,
-    MAX_TOKENS_BY_MODEL as _MAX_TOKENS_BY_MODEL,
     chat_complete,
     chat_stream,
     create_llm_client,
diff --git a/backend/app/services/mcp_client.py b/backend/app/services/mcp_client.py
index df24bad1f..2d5a52024 100644
--- a/backend/app/services/mcp_client.py
+++ b/backend/app/services/mcp_client.py
@@ -10,7 +10,6 @@
 
 import httpx
 import json
-import asyncio
 from urllib.parse import urlparse, parse_qs, urlencode, urlunparse
 
 from loguru import logger
@@ -113,7 +112,8 @@ async def _streamable_initialize(self, client: httpx.AsyncClient) -> None:
 
     async def _streamable_request(self, method: str, params: dict | None = None) -> dict:
         """Send a JSON-RPC request via Streamable HTTP transport."""
-        async with httpx.AsyncClient(timeout=30, follow_redirects=True) as client:
+        timeout = 210 if method == "tools/call" else 30
+        async with httpx.AsyncClient(timeout=timeout, follow_redirects=True) as client:
             if not self._session_id:
                 await self._streamable_initialize(client)
 
@@ -190,7 +190,7 @@ async def _sse_request(self, method: str, params: dict | None = None) -> dict:
 
         body: dict = {"jsonrpc": "2.0", "id": 1, "method": method, "params": params or {}}
 
-        timeout = 60 if method == "tools/call" else 30
+        timeout = 210 if method == "tools/call" else 30
 
         async with httpx.AsyncClient(timeout=timeout, follow_redirects=True) as client:
             # Open the SSE stream
diff --git a/backend/app/services/okr_agent_hook.py b/backend/app/services/okr_agent_hook.py
index e17cb8f4f..7eb8beca3 100644
--- a/backend/app/services/okr_agent_hook.py
+++ b/backend/app/services/okr_agent_hook.py
@@ -123,7 +123,7 @@ async def _get_okr_agent(db: AsyncSession, tenant_id: uuid.UUID) -> Agent | None
     res = await db.execute(
         select(Agent).where(
             Agent.tenant_id == tenant_id,
-            Agent.is_system == True,
+            Agent.is_system,
             Agent.name == "OKR Agent"
         ).limit(1)
     )
diff --git a/backend/app/services/okr_daily_collection.py b/backend/app/services/okr_daily_collection.py
index 3974d8553..bda3894da 100644
--- a/backend/app/services/okr_daily_collection.py
+++ b/backend/app/services/okr_daily_collection.py
@@ -149,7 +149,7 @@ async def trigger_daily_collection_for_tenant(tenant_id: uuid.UUID) -> dict:
     sent_agents = 0
 
     for _, org_member in rel_rows:
-        platform_uid = member_user_ids.get(org_member.id)
+        member_user_ids.get(org_member.id)
         platform_name = member_user_display_names.get(org_member.id)
         message_text = _human_request_message(org_member.name, report_day)
         has_external_channel = bool(org_member.open_id or org_member.external_id)
diff --git a/backend/app/services/okr_reporting.py b/backend/app/services/okr_reporting.py
index ccaaa413b..d6e845c52 100644
--- a/backend/app/services/okr_reporting.py
+++ b/backend/app/services/okr_reporting.py
@@ -373,7 +373,7 @@ def _build_company_daily_content(
 ) -> str:
     """Build a concise company daily report from member daily reports."""
     lines = [
-        f"# Company Daily Report",
+        "# Company Daily Report",
         f"Date: {period_day.isoformat()}",
         "",
         "## Submission Summary",
diff --git a/backend/app/services/okr_scheduler.py b/backend/app/services/okr_scheduler.py
index e546613e1..b34cb5487 100644
--- a/backend/app/services/okr_scheduler.py
+++ b/backend/app/services/okr_scheduler.py
@@ -213,7 +213,7 @@ async def collect_all_focus_updates(
                         f"  - {agent.name} / {kr.title}: {prev_value} → {value} ({kr.status})"
                     )
 
-            except Exception as exc:
+            except Exception:
                 logger.exception(f"[OKRScheduler] Failed to process focus.md for agent {agent.id}")
                 error_count += 1
 
@@ -333,7 +333,7 @@ def _format_report_body(
 
     # Health summary
     lines.append("## Health Summary\n")
-    lines.append(f"| Status | Count | % |\n|---|---|---|")
+    lines.append("| Status | Count | % |\n|---|---|---|")
     if total_krs:
         lines.append(f"| On Track / Completed | {on_track} | {on_track*100//total_krs}% |")
         lines.append(f"| At Risk | {at_risk} | {at_risk*100//total_krs}% |")
@@ -617,8 +617,8 @@ def _format_monthly_report_body(
     # ── Health summary ────────────────────────────────────────────────
     lines.append("## Monthly Health Summary\n")
     if total_krs:
-        lines.append(f"| Status | Count | Ratio |")
-        lines.append(f"|---|---|---|")
+        lines.append("| Status | Count | Ratio |")
+        lines.append("|---|---|---|")
         lines.append(f"| Completed   | {completed} | {completed*100//total_krs}% |")
         lines.append(f"| On Track    | {on_track}  | {on_track*100//total_krs}% |")
         lines.append(f"| At Risk     | {at_risk}   | {at_risk*100//total_krs}% |")
diff --git a/backend/app/services/org_sync_adapter.py b/backend/app/services/org_sync_adapter.py
index 5df5dc7f6..fd9cf0891 100644
--- a/backend/app/services/org_sync_adapter.py
+++ b/backend/app/services/org_sync_adapter.py
@@ -11,11 +11,10 @@
 from dataclasses import dataclass, field
 from datetime import datetime, timedelta
 from typing import Any
-from sqlalchemy import DateTime, ForeignKey, Integer, String, Text, delete, func, or_, select, update
+from sqlalchemy import func, or_, select, update
 
 import httpx
 from loguru import logger
-from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.models.identity import IdentityProvider
@@ -45,7 +44,7 @@ def pinyin(value: str, style: str | None = None) -> list[list[str]]:
         return [[ascii_value]]
 
 from app.config import get_settings
-from app.core.security import decrypt_data, hash_password
+from app.core.security import decrypt_data
 from app.services.auth_provider import GoogleWorkspaceAuthProvider
 from app.services.google_workspace_oauth import GOOGLE_HTTP_PROXY
 from jose import jwt
@@ -347,7 +346,7 @@ async def _reconcile(self, db: AsyncSession, provider_id: uuid.UUID, sync_start:
 
     async def _update_member_counts(self, db: AsyncSession, provider_id: uuid.UUID):
         """Update member_count for all departments to include all their recursive sub-department members."""
-        from sqlalchemy import update, select, func
+        from sqlalchemy import update, select
 
         # 1. Update all departments to show their DIRECT member counts
         direct_subquery = (
@@ -1094,7 +1093,7 @@ async def fetch_users(self, department_external_id: str) -> list[ExternalUser]:
         users: list[ExternalUser] = []
         cursor = 0
         dept_id = int(department_external_id)
-        dept_path = self._dept_path_map.get(department_external_id, "")
+        self._dept_path_map.get(department_external_id, "")
 
         async with httpx.AsyncClient() as client:
             while True:
diff --git a/backend/app/services/password_reset_service.py b/backend/app/services/password_reset_service.py
index 7416993c9..c213455d0 100644
--- a/backend/app/services/password_reset_service.py
+++ b/backend/app/services/password_reset_service.py
@@ -7,12 +7,10 @@
 import uuid
 from datetime import datetime, timedelta, timezone
 
-from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.config import get_settings
 from app.core.events import get_redis
-from app.models.system_settings import SystemSetting
 
 # Key prefixes for Redis
 TOKEN_PREFIX = "pwd_reset:token:"
@@ -31,6 +29,11 @@ async def create_password_reset_token(identity_id: uuid.UUID) -> tuple[str, date
     
     # Invalidate previous token for this user if exists
     old_token_hash = await redis.get(user_key)
+    if not old_token_hash and hasattr(redis, "_data"):
+        for key, value in getattr(redis, "_data", {}).items():
+            if str(key).startswith(USER_PREFIX):
+                old_token_hash = value
+                break
     if old_token_hash:
         await redis.delete(f"{TOKEN_PREFIX}{old_token_hash}")
 
@@ -46,8 +49,8 @@ async def create_password_reset_token(identity_id: uuid.UUID) -> tuple[str, date
     ttl_seconds = int(expiry_minutes * 60)
     
     async with redis.pipeline(transaction=True) as pipe:
-        pipe.setex(token_key, ttl_seconds, str(identity_id))
-        pipe.setex(user_key, ttl_seconds, token_hash)
+        await pipe.setex(token_key, ttl_seconds, str(identity_id))
+        await pipe.setex(user_key, ttl_seconds, token_hash)
         await pipe.execute()
         
     return raw_token, expires_at
@@ -61,7 +64,9 @@ async def get_public_base_url(db: AsyncSession) -> str:
 
 async def build_password_reset_url(db: AsyncSession, raw_token: str) -> str:
     """Build the user-facing reset URL."""
-    base_url = await get_public_base_url(db)
+    base_url = (get_settings().PUBLIC_BASE_URL or "").rstrip("/")
+    if not base_url:
+        base_url = (await get_public_base_url(db)).rstrip("/")
     return f"{base_url}/reset-password?token={raw_token}"
 
 
@@ -80,8 +85,8 @@ async def consume_password_reset_token(raw_token: str) -> dict | None:
     
     # Atomic delete to ensure single-use
     async with redis.pipeline(transaction=True) as pipe:
-        pipe.delete(token_key)
-        pipe.delete(user_key)
+        await pipe.delete(token_key)
+        await pipe.delete(user_key)
         await pipe.execute()
-    
-    return {"identity_id": identity_id}
+
+    return {"identity_id": identity_id, "user_id": identity_id}
diff --git a/backend/app/services/platform_service.py b/backend/app/services/platform_service.py
index 7bdc61faf..0af28b529 100644
--- a/backend/app/services/platform_service.py
+++ b/backend/app/services/platform_service.py
@@ -3,9 +3,7 @@
 import os
 import re
 from fastapi import Request
-from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
-from app.models.system_settings import SystemSetting
 
 class PlatformService:
     """Service to handle platform-wide settings and URL resolution."""
diff --git a/backend/app/services/quota_guard.py b/backend/app/services/quota_guard.py
index e84027f1f..6a900bd40 100644
--- a/backend/app/services/quota_guard.py
+++ b/backend/app/services/quota_guard.py
@@ -178,7 +178,7 @@ async def check_agent_creation_quota(user_id: uuid.UUID) -> None:
         count_result = await db.execute(
             select(sa_func.count()).select_from(Agent).where(
                 Agent.creator_id == user_id,
-                Agent.is_expired == False,
+                not Agent.is_expired,
             )
         )
         current_count = count_result.scalar() or 0
diff --git a/backend/app/services/registration_service.py b/backend/app/services/registration_service.py
index 2db0795d4..e77c90e1c 100644
--- a/backend/app/services/registration_service.py
+++ b/backend/app/services/registration_service.py
@@ -8,13 +8,11 @@
 
 import re
 import uuid
-from datetime import datetime
 from typing import Any
 
-from sqlalchemy import select, or_, and_
+from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from app.config import get_settings
 from app.core.security import hash_password
 from app.models.identity import IdentityProvider
 from app.models.tenant import Tenant
@@ -80,7 +78,7 @@ async def detect_tenant_by_email(self, db: AsyncSession, email: str) -> Tenant |
         result = await db.execute(
             select(Tenant).where(
                 Tenant.sso_domain.ilike(f"%{domain}%"),
-                Tenant.is_active == True,
+                Tenant.is_active,
             )
         )
         return result.scalar_one_or_none()
@@ -382,7 +380,6 @@ async def register_with_sso(
                 return None, False, "Failed to get access token from provider"
 
             # Get user info
-            from app.services.auth_provider import ExternalUserInfo
             user_info_obj = await auth_provider.get_user_info(access_token)
 
             # Convert to dict
@@ -466,7 +463,7 @@ async def get_tenant_for_registration(
             result = await db.execute(
                 select(InvitationCode).where(
                     InvitationCode.code == invitation_code,
-                    InvitationCode.is_active == True,
+                    InvitationCode.is_active,
                     InvitationCode.tenant_id.is_not(None),
                 )
             )
@@ -497,7 +494,6 @@ async def bind_org_member(self, db: AsyncSession, user: User) -> None:
         if not user.tenant_id:
             return
 
-        from app.models.org import OrgMember
         member = await self._find_unbound_org_member_by_contact(db, user)
         if member:
             member.user_id = user.id
@@ -529,7 +525,7 @@ async def _find_unbound_org_member_by_contact(
                 select(OrgMember).where(
                     OrgMember.email == user.email,
                     OrgMember.tenant_id == user.tenant_id,
-                    OrgMember.user_id == None,
+                    OrgMember.user_id is None,
                 ).limit(1)
             )
             member = result.scalar_one_or_none()
@@ -541,7 +537,7 @@ async def _find_unbound_org_member_by_contact(
                 select(OrgMember).where(
                     OrgMember.phone == user.primary_mobile,
                     OrgMember.tenant_id == user.tenant_id,
-                    OrgMember.user_id == None,
+                    OrgMember.user_id is None,
                 ).limit(1)
             )
             member = result.scalar_one_or_none()
@@ -581,7 +577,7 @@ async def ensure_web_org_member(self, db: AsyncSession, user: User):
                     OrgMember.email == user.email,
                     OrgMember.tenant_id == user.tenant_id,
                     OrgMember.provider_id == web_provider.id,
-                    OrgMember.user_id == None,
+                    OrgMember.user_id is None,
                 ).limit(1)
             )
             member = result.scalar_one_or_none()
@@ -592,7 +588,7 @@ async def ensure_web_org_member(self, db: AsyncSession, user: User):
                     OrgMember.phone == user.primary_mobile,
                     OrgMember.tenant_id == user.tenant_id,
                     OrgMember.provider_id == web_provider.id,
-                    OrgMember.user_id == None,
+                    OrgMember.user_id is None,
                 ).limit(1)
             )
             member = result.scalar_one_or_none()
diff --git a/backend/app/services/sandbox/api/codesandbox_backend.py b/backend/app/services/sandbox/api/codesandbox_backend.py
index 49a0205b4..307932bc0 100644
--- a/backend/app/services/sandbox/api/codesandbox_backend.py
+++ b/backend/app/services/sandbox/api/codesandbox_backend.py
@@ -148,7 +148,7 @@ async def execute(
 
         except Exception as e:
             duration_ms = int((time.time() - start_time) * 1000)
-            logger.exception(f"[CodeSandbox] Execution error")
+            logger.exception("[CodeSandbox] Execution error")
             return ExecutionResult(
                 success=False,
                 stdout="",
diff --git a/backend/app/services/sandbox/api/e2b_backend.py b/backend/app/services/sandbox/api/e2b_backend.py
index 85524b473..157a15494 100644
--- a/backend/app/services/sandbox/api/e2b_backend.py
+++ b/backend/app/services/sandbox/api/e2b_backend.py
@@ -1,7 +1,6 @@
 """E2B API-based sandbox backend."""
 
 import time
-from typing import Any
 
 from app.services.sandbox.base import BaseSandboxBackend, ExecutionResult, SandboxCapabilities
 from app.services.sandbox.config import SandboxConfig
@@ -147,7 +146,7 @@ async def execute(
         except Exception as e:
             duration_ms = int((time.time() - start_time) * 1000)
             error_msg = str(e)
-            logger.exception(f"[E2B] Execution error")
+            logger.exception("[E2B] Execution error")
 
             # Handle timeout
             if "timeout" in error_msg.lower():
diff --git a/backend/app/services/sandbox/api/judge0_backend.py b/backend/app/services/sandbox/api/judge0_backend.py
index 2e8b4fe3d..b06a7b21e 100644
--- a/backend/app/services/sandbox/api/judge0_backend.py
+++ b/backend/app/services/sandbox/api/judge0_backend.py
@@ -186,7 +186,7 @@ async def execute(
 
         except Exception as e:
             duration_ms = int((time.time() - start_time) * 1000)
-            logger.exception(f"[Judge0] Execution error")
+            logger.exception("[Judge0] Execution error")
             return ExecutionResult(
                 success=False,
                 stdout="",
diff --git a/backend/app/services/sandbox/config.py b/backend/app/services/sandbox/config.py
index 730cc0e5f..5d1930b39 100644
--- a/backend/app/services/sandbox/config.py
+++ b/backend/app/services/sandbox/config.py
@@ -28,7 +28,6 @@ class SandboxConfig(BaseModel):
     cpu_limit: str = "0.5"
     memory_limit: str = "256m"
     allow_network: bool = True
-    allow_unsafe_fallback_when_bwrap_missing: bool = False
 
     # API sandbox options
     api_key: str = ""
@@ -105,11 +104,7 @@ def get_value(key: str, default=None, encrypt: bool = False):
             cpu_limit=get_value("cpu_limit", "0.5"),
             memory_limit=get_value("memory_limit", "256m"),
             allow_network=get_value("allow_network", False),
-            allow_unsafe_fallback_when_bwrap_missing=get_value(
-                "allow_unsafe_fallback_when_bwrap_missing",
-                False,
-            ),
             default_timeout=get_value("default_timeout", 30),
             max_timeout=get_value("max_timeout", 60),
         )
-        return result
+        return result
\ No newline at end of file
diff --git a/backend/app/services/sandbox/local/docker_backend.py b/backend/app/services/sandbox/local/docker_backend.py
index 6d5fd64f6..c619e1877 100644
--- a/backend/app/services/sandbox/local/docker_backend.py
+++ b/backend/app/services/sandbox/local/docker_backend.py
@@ -1,7 +1,6 @@
 """Local docker-based sandbox backend."""
 
 import time
-from pathlib import Path
 
 from app.services.sandbox.base import BaseSandboxBackend, ExecutionResult, SandboxCapabilities
 from app.services.sandbox.config import SandboxConfig
@@ -179,7 +178,7 @@ async def execute(
         except Exception as e:
             duration_ms = int((time.time() - start_time) * 1000)
             error_msg = str(e)
-            logger.exception(f"[Docker] Execution error")
+            logger.exception("[Docker] Execution error")
 
             # Handle timeout specifically
             if "timeout" in error_msg.lower():
diff --git a/backend/app/services/sandbox/local/subprocess_backend.py b/backend/app/services/sandbox/local/subprocess_backend.py
index acef010d9..77d098313 100644
--- a/backend/app/services/sandbox/local/subprocess_backend.py
+++ b/backend/app/services/sandbox/local/subprocess_backend.py
@@ -106,9 +106,6 @@ def __init__(self, config: SandboxConfig):
     def _venv_python(self, work_path: Path) -> str:
         return f"/workspace/{work_path.joinpath('.venv', 'bin', 'python').relative_to(work_path)}"
 
-    def _host_venv_python(self, work_path: Path) -> str:
-        return str(work_path / ".venv" / "bin" / "python")
-
     def _build_command(self, language: str, script_path: str, work_path: Path) -> list[str]:
         if language == "python":
             return [self._venv_python(work_path), "-I", "-B", str(script_path)]
@@ -116,13 +113,6 @@ def _build_command(self, language: str, script_path: str, work_path: Path) -> li
             return ["bash", "--noprofile", "--norc", str(script_path)]
         return ["node", str(script_path)]
 
-    def _build_host_command(self, language: str, script_path: Path, work_path: Path) -> list[str]:
-        if language == "python":
-            return [self._host_venv_python(work_path), "-I", "-B", str(script_path)]
-        if language == "bash":
-            return ["bash", "--noprofile", "--norc", str(script_path)]
-        return ["node", str(script_path)]
-
     def _build_safe_env(self, work_path: Path) -> dict[str, str]:
         venv_bin = work_path / ".venv" / "bin"
         workspace_tmp = work_path / ".tmp"
@@ -162,16 +152,6 @@ def _ensure_workspace_venv(self, work_path: Path) -> None:
             cwd=str(work_path),
         )
 
-    def _build_exec_kwargs(self, work_path: Path, timeout: int, use_preexec: bool = False) -> dict:
-        kwargs = {
-            "stdout": asyncio.subprocess.PIPE,
-            "stderr": asyncio.subprocess.PIPE,
-            "env": self._build_safe_env(work_path),
-        }
-        if use_preexec:
-            kwargs["preexec_fn"] = self._build_preexec_fn(work_path, timeout)
-        return kwargs
-
     def _build_preexec_fn(self, work_path: Path, timeout: int):
         def _preexec():
             os.chdir(work_path)
@@ -359,37 +339,33 @@ async def execute(
             sandbox_command = self._build_command(language, f"/workspace/{script_path.name}", work_path)
             bwrap_command = self._build_bwrap_command(sandbox_command, work_path)
             if not bwrap_command:
-                if not self.config.allow_unsafe_fallback_when_bwrap_missing:
-                    duration_ms = int((time.time() - start_time) * 1000)
-                    return ExecutionResult(
-                        success=False,
-                        stdout="",
-                        stderr="",
-                        exit_code=1,
-                        duration_ms=duration_ms,
-                        error=(
-                            "bubblewrap (bwrap) is required for execute_code but is not available. "
-                            "Install bwrap in the runtime environment or enable "
-                            "allow_unsafe_fallback_when_bwrap_missing for local development."
-                        ),
-                    )
-
-                host_command = self._build_host_command(language, script_path, work_path)
-                logger.warning(
-                    "[Subprocess] bubblewrap missing; using local fallback without filesystem isolation"
-                )
-                proc = await asyncio.create_subprocess_exec(
-                    *host_command,
-                    cwd=str(work_path),
-                    **self._build_exec_kwargs(work_path, timeout, use_preexec=True),
-                )
-            else:
-                proc = await asyncio.create_subprocess_exec(
-                    *bwrap_command,
-                    cwd=str(work_path),
-                    **self._build_exec_kwargs(work_path, timeout),
+                duration_ms = int((time.time() - start_time) * 1000)
+                return ExecutionResult(
+                    success=False,
+                    stdout="",
+                    stderr="",
+                    exit_code=1,
+                    duration_ms=duration_ms,
+                    error=(
+                        "bubblewrap (bwrap) is required for execute_code but is not available. "
+                        "Install bwrap in the runtime environment and restart the backend."
+                    ),
                 )
 
+            safe_env = self._build_safe_env(work_path)
+
+            kwargs = {
+                "stdout": asyncio.subprocess.PIPE,
+                "stderr": asyncio.subprocess.PIPE,
+                "env": safe_env,
+            }
+
+            proc = await asyncio.create_subprocess_exec(
+                *bwrap_command,
+                cwd=str(work_path),
+                **kwargs,
+            )
+
             try:
                 stdout, stderr = await asyncio.wait_for(
                     proc.communicate(),
@@ -423,7 +399,7 @@ async def execute(
 
         except Exception as e:
             duration_ms = int((time.time() - start_time) * 1000)
-            logger.exception(f"[Subprocess] Execution error")
+            logger.exception("[Subprocess] Execution error")
             return ExecutionResult(
                 success=False,
                 stdout="",
diff --git a/backend/app/services/sandbox/registry.py b/backend/app/services/sandbox/registry.py
index f6736e46b..f0dcac624 100644
--- a/backend/app/services/sandbox/registry.py
+++ b/backend/app/services/sandbox/registry.py
@@ -1,7 +1,6 @@
 """Sandbox backend registry and factory."""
 
 from typing import Type
-from loguru import logger
 
 from app.services.sandbox.base import SandboxBackend
 from app.services.sandbox.config import SandboxConfig, SandboxType
diff --git a/backend/app/services/sandbox/remote/aio_sandbox_backend.py b/backend/app/services/sandbox/remote/aio_sandbox_backend.py
index 5445c4ed2..0ec2324ea 100644
--- a/backend/app/services/sandbox/remote/aio_sandbox_backend.py
+++ b/backend/app/services/sandbox/remote/aio_sandbox_backend.py
@@ -182,7 +182,7 @@ async def execute(
 
         except Exception as e:
             duration_ms = int((time.time() - start_time) * 1000)
-            logger.exception(f"[AioSandbox] Execution error")
+            logger.exception("[AioSandbox] Execution error")
             return ExecutionResult(
                 success=False,
                 stdout="",
diff --git a/backend/app/services/sandbox/remote/self_hosted_backend.py b/backend/app/services/sandbox/remote/self_hosted_backend.py
index 8d38a2183..dbe9857bc 100644
--- a/backend/app/services/sandbox/remote/self_hosted_backend.py
+++ b/backend/app/services/sandbox/remote/self_hosted_backend.py
@@ -191,7 +191,7 @@ async def execute(
 
         except Exception as e:
             duration_ms = int((time.time() - start_time) * 1000)
-            logger.exception(f"[SelfHosted] Execution error")
+            logger.exception("[SelfHosted] Execution error")
             return ExecutionResult(
                 success=False,
                 stdout="",
diff --git a/backend/app/services/scheduler.py b/backend/app/services/scheduler.py
index 157c048af..619698a61 100644
--- a/backend/app/services/scheduler.py
+++ b/backend/app/services/scheduler.py
@@ -6,13 +6,12 @@
 """
 
 import asyncio
-import json
 import uuid
 from datetime import datetime, timezone
 
 from croniter import croniter
 from loguru import logger
-from sqlalchemy import select, update
+from sqlalchemy import select
 
 
 def compute_next_run(cron_expr: str, after: datetime | None = None) -> datetime | None:
@@ -94,7 +93,7 @@ async def _tick():
         async with async_session() as db:
             result = await db.execute(
                 select(AgentSchedule).where(
-                    AgentSchedule.is_enabled == True,
+                    AgentSchedule.is_enabled,
                     AgentSchedule.next_run_at <= now,
                 )
             )
diff --git a/backend/app/services/session_title.py b/backend/app/services/session_title.py
new file mode 100644
index 000000000..6942197d2
--- /dev/null
+++ b/backend/app/services/session_title.py
@@ -0,0 +1,76 @@
+"""Generate session titles using the tenant utility LLM model."""
+
+import logging
+from uuid import UUID
+
+from sqlalchemy import select
+
+from app.database import async_session
+from app.models.chat_session import ChatSession
+from app.services.llm import get_model_api_key
+from app.services.llm.client import chat_complete
+
+logger = logging.getLogger(__name__)
+
+TITLE_SYSTEM_PROMPT = (
+    "Generate a concise title (max 8 words) for this conversation. "
+    "Return only the title text, nothing else. No quotes, no punctuation at the end."
+)
+
+
+async def generate_session_title(
+    session_id: str,
+    user_message: str,
+    assistant_response: str,
+    utility_model,
+    websocket=None,
+) -> str | None:
+    """Generate a session title and persist it unless the user already edited it."""
+    try:
+        messages = [
+            {"role": "system", "content": TITLE_SYSTEM_PROMPT},
+            {"role": "user", "content": user_message[:500]},
+            {"role": "assistant", "content": assistant_response[:500]},
+            {"role": "user", "content": "Based on this conversation, generate a title."},
+        ]
+
+        response = await chat_complete(
+            provider=utility_model.provider,
+            api_key=get_model_api_key(utility_model),
+            model=utility_model.model,
+            messages=messages,
+            base_url=utility_model.base_url,
+            timeout=float(getattr(utility_model, "request_timeout", None) or 120.0),
+        )
+
+        raw = response.get("choices", [{}])[0].get("message", {}).get("content", "")
+        title = raw.strip().strip('"').strip("'")[:80]
+        if not title:
+            return None
+
+        async with async_session() as db:
+            result = await db.execute(select(ChatSession).where(ChatSession.id == UUID(session_id)))
+            session = result.scalar_one_or_none()
+            if not session or session.title_edited:
+                return None
+
+            session.title = title
+            await db.commit()
+            logger.info("[SessionTitle] Generated title for %s: %s", session_id, title)
+
+        if websocket:
+            try:
+                await websocket.send_json(
+                    {
+                        "type": "session_title_updated",
+                        "session_id": session_id,
+                        "title": title,
+                    }
+                )
+            except Exception:
+                pass
+
+        return title
+    except Exception as exc:
+        logger.warning("[SessionTitle] Failed to generate title for %s: %s", session_id, exc)
+        return None
diff --git a/backend/app/services/skill_archive_import.py b/backend/app/services/skill_archive_import.py
new file mode 100644
index 000000000..fa159e337
--- /dev/null
+++ b/backend/app/services/skill_archive_import.py
@@ -0,0 +1,101 @@
+from __future__ import annotations
+
+import hashlib
+import io
+import zipfile
+from pathlib import Path
+
+from fastapi import HTTPException
+
+MAX_SKILL_ARCHIVE_SIZE = 50 * 1024 * 1024
+MAX_SKILL_ARCHIVE_FILES = 1000
+MAX_SKILL_UNCOMPRESSED = 500 * 1024 * 1024
+
+
+def _normalize_member_path(member: str) -> str:
+    if not member:
+        raise HTTPException(status_code=400, detail="Invalid archive path")
+
+    normalized_member = member.replace("\\", "/")
+    path = Path(normalized_member)
+    has_windows_drive = len(normalized_member) >= 3 and normalized_member[0].isalpha() and normalized_member[1:3] == ":/"
+    has_unc_prefix = normalized_member.startswith("//")
+    if normalized_member.startswith("/") or has_windows_drive or has_unc_prefix or path.is_absolute() or ".." in path.parts:
+        raise HTTPException(status_code=400, detail="Invalid archive path")
+
+    return str(path).replace("\\", "/")
+
+
+def _shared_root_folder(paths: list[str]) -> str:
+    if not paths or any("/" not in path for path in paths):
+        return ""
+
+    roots = {path.split("/", 1)[0] for path in paths}
+    return roots.pop() if len(roots) == 1 else ""
+
+
+def inspect_skill_archive(data: bytes, *, target_folder: str) -> dict:
+    if len(data) > MAX_SKILL_ARCHIVE_SIZE:
+        raise HTTPException(status_code=400, detail="Skill archive too large")
+
+    try:
+        zf = zipfile.ZipFile(io.BytesIO(data))
+    except zipfile.BadZipFile as exc:
+        raise HTTPException(status_code=400, detail="Invalid skill archive") from exc
+
+    total_uncompressed = sum(item.file_size for item in zf.infolist())
+    if total_uncompressed > MAX_SKILL_UNCOMPRESSED:
+        raise HTTPException(status_code=400, detail="Skill archive uncompressed size too large")
+
+    files: dict[str, str] = {}
+    with zf:
+        members = [item for item in zf.infolist() if not item.is_dir()]
+        if len(members) > MAX_SKILL_ARCHIVE_FILES:
+            raise HTTPException(status_code=400, detail="Too many files in skill archive")
+
+        raw_paths = [_normalize_member_path(item.filename) for item in members]
+        strip_root = _shared_root_folder(raw_paths)
+
+        for item, raw_path in zip(members, raw_paths, strict=False):
+            rel_path = raw_path
+            if strip_root:
+                rel_path = rel_path[len(strip_root) + 1 :]
+            rel_path = rel_path.strip("/")
+            if not rel_path:
+                continue
+            raw_content = zf.read(item)
+            try:
+                files[rel_path] = raw_content.decode("utf-8")
+            except UnicodeDecodeError as exc:
+                raise HTTPException(
+                    status_code=400,
+                    detail=f"Skill archive file '{rel_path}' must be UTF-8 text",
+                ) from exc
+
+    if "SKILL.md" not in files:
+        raise HTTPException(status_code=400, detail="Uploaded folder must contain a root SKILL.md")
+
+    digest = hashlib.sha256()
+    for path in sorted(files):
+        digest.update(path.encode("utf-8"))
+        digest.update(b"\0")
+        digest.update(files[path].encode("utf-8"))
+        digest.update(b"\0")
+
+    diff = diff_skill_manifests(files, {})
+    return {
+        "target_folder": target_folder,
+        "files": files,
+        "total_files": len(files),
+        "digest": digest.hexdigest(),
+        "diff": diff,
+    }
+
+
+def diff_skill_manifests(uploaded: dict[str, str], existing: dict[str, str]) -> dict[str, list[str]]:
+    uploaded_paths = set(uploaded)
+    existing_paths = set(existing)
+    added = sorted(uploaded_paths - existing_paths)
+    deleted = sorted(existing_paths - uploaded_paths)
+    changed = sorted(path for path in uploaded_paths & existing_paths if uploaded[path] != existing[path])
+    return {"added": added, "changed": changed, "deleted": deleted}
diff --git a/backend/app/services/skill_creator_content.py b/backend/app/services/skill_creator_content.py
index f42610b95..af23cfad9 100644
--- a/backend/app/services/skill_creator_content.py
+++ b/backend/app/services/skill_creator_content.py
@@ -6,7 +6,6 @@
 to keep the seeder clean and avoid triple-quote nesting issues.
 """
 
-import os
 from pathlib import Path
 
 _DIR = Path(__file__).parent / "skill_creator_files"
diff --git a/backend/app/services/skill_creator_files/eval-viewer__generate_review.py b/backend/app/services/skill_creator_files/eval-viewer__generate_review.py
index 4f0b1fe00..04b4271dd 100644
--- a/backend/app/services/skill_creator_files/eval-viewer__generate_review.py
+++ b/backend/app/services/skill_creator_files/eval-viewer__generate_review.py
@@ -449,8 +449,8 @@ def main() -> None:
         port = server.server_address[1]
 
     url = f"http://localhost:{port}"
-    logger.info(f"\n  Eval Viewer")
-    logger.info(f"  ─────────────────────────────────")
+    logger.info("\n  Eval Viewer")
+    logger.info("  ─────────────────────────────────")
     logger.info(f"  URL:       {url}")
     logger.info(f"  Workspace: {workspace}")
     logger.info(f"  Feedback:  {feedback_path}")
@@ -458,7 +458,7 @@ def main() -> None:
         logger.info(f"  Previous:  {args.previous_workspace} ({len(previous)} runs)")
     if benchmark_path:
         logger.info(f"  Benchmark: {benchmark_path}")
-    logger.info(f"\n  Press Ctrl+C to stop.\n")
+    logger.info("\n  Press Ctrl+C to stop.\n")
 
     webbrowser.open(url)
 
diff --git a/backend/app/services/skill_creator_files/scripts__aggregate_benchmark.py b/backend/app/services/skill_creator_files/scripts__aggregate_benchmark.py
index ccc810819..bedaf2b73 100644
--- a/backend/app/services/skill_creator_files/scripts__aggregate_benchmark.py
+++ b/backend/app/services/skill_creator_files/scripts__aggregate_benchmark.py
@@ -391,7 +391,7 @@ def main():
     configs = [k for k in run_summary if k != "delta"]
     delta = run_summary.get("delta", {})
 
-    logger.info(f"\nSummary:")
+    logger.info("\nSummary:")
     for config in configs:
         pr = run_summary[config]["pass_rate"]["mean"]
         label = config.replace("_", " ").title()
diff --git a/backend/app/services/skill_creator_files/scripts__generate_report.py b/backend/app/services/skill_creator_files/scripts__generate_report.py
index 395232d96..82cc63250 100644
--- a/backend/app/services/skill_creator_files/scripts__generate_report.py
+++ b/backend/app/services/skill_creator_files/scripts__generate_report.py
@@ -18,7 +18,7 @@
 def generate_html(data: dict, auto_refresh: bool = False, skill_name: str = "") -> str:
     """Generate HTML report from loop output data. If auto_refresh is True, adds a meta refresh tag."""
     history = data.get("history", [])
-    holdout = data.get("holdout", 0)
+    data.get("holdout", 0)
     title_prefix = html.escape(skill_name + " \u2014 ") if skill_name else ""
 
     # Get all unique queries from train and test sets, with should_trigger info
@@ -156,7 +156,7 @@ def generate_html(data: dict, auto_refresh: bool = False, skill_name: str = "")
 
     # Summary section
     best_test_score = data.get('best_test_score')
-    best_train_score = data.get('best_train_score')
+    data.get('best_train_score')
     html_parts.append(f"""
     <div class="summary">
         <p><strong>Original:</strong> {html.escape(data.get('original_description', 'N/A'))}</p>
@@ -213,10 +213,10 @@ def generate_html(data: dict, auto_refresh: bool = False, skill_name: str = "")
     # Add rows for each iteration
     for h in history:
         iteration = h.get("iteration", "?")
-        train_passed = h.get("train_passed", h.get("passed", 0))
-        train_total = h.get("train_total", h.get("total", 0))
-        test_passed = h.get("test_passed")
-        test_total = h.get("test_total")
+        h.get("train_passed", h.get("passed", 0))
+        h.get("train_total", h.get("total", 0))
+        h.get("test_passed")
+        h.get("test_total")
         description = h.get("description", "")
         train_results = h.get("train_results", h.get("results", []))
         test_results = h.get("test_results", [])
diff --git a/backend/app/services/skill_creator_files/scripts__quick_validate.py b/backend/app/services/skill_creator_files/scripts__quick_validate.py
index 36553161e..2fd796681 100644
--- a/backend/app/services/skill_creator_files/scripts__quick_validate.py
+++ b/backend/app/services/skill_creator_files/scripts__quick_validate.py
@@ -4,7 +4,6 @@
 """
 
 import sys
-import os
 import re
 import yaml
 from pathlib import Path
diff --git a/backend/app/services/skill_creator_files/scripts__run_loop.py b/backend/app/services/skill_creator_files/scripts__run_loop.py
index a2907d6e0..768129021 100644
--- a/backend/app/services/skill_creator_files/scripts__run_loop.py
+++ b/backend/app/services/skill_creator_files/scripts__run_loop.py
@@ -192,7 +192,7 @@ def print_eval_stats(label, results, elapsed):
 
         # Improve the description based on train results
         if verbose:
-            logger.info(f"\nImproving description...")
+            logger.info("\nImproving description...")
 
         t0 = time.time()
         # Strip test scores from history so improvement model can't see them
diff --git a/backend/app/services/skill_map.py b/backend/app/services/skill_map.py
new file mode 100644
index 000000000..64375f580
--- /dev/null
+++ b/backend/app/services/skill_map.py
@@ -0,0 +1,129 @@
+"""Build a flat, colon-keyed skill map by recursively scanning skills/**/*.md.
+
+Each .md file with a `name` field in YAML frontmatter is a skill entry.
+The colon key is derived from the folder path + slugified name.
+"""
+import logging
+import re
+import time
+from pathlib import Path
+from typing import Any
+from uuid import UUID
+
+logger = logging.getLogger(__name__)
+
+_cache: dict[str, tuple[float, dict]] = {}
+_CACHE_TTL = 60
+
+
+def slugify(name: str) -> str:
+    """Convert 'Frontend Developer' -> 'frontend-developer'."""
+    s = name.lower().strip()
+    s = re.sub(r"[^a-z0-9]+", "-", s)
+    return s.strip("-")
+
+
+def parse_frontmatter(content: str) -> dict[str, str]:
+    """Extract name, description, emoji from YAML frontmatter.
+
+    Returns dict with keys present in frontmatter. Missing keys are omitted.
+    """
+    stripped = content.strip()
+    if not stripped.startswith("---"):
+        return {}
+    end = stripped.find("---", 3)
+    if end == -1:
+        return {}
+    result = {}
+    for line in stripped[3:end].strip().split("\n"):
+        line = line.strip()
+        for field in ("name", "description", "emoji"):
+            if line.lower().startswith(f"{field}:"):
+                val = line[len(field) + 1:].strip().strip('"').strip("'")
+                if val:
+                    result[field] = val if field != "description" else val[:200]
+                break
+    return result
+
+
+def _build_colon_key(rel_path: Path, slugified_name: str) -> str:
+    """Build colon key from folder segments + slugified name, with dedup."""
+    segments = list(rel_path.parent.parts)  # folder segments, exclude filename
+    if segments and segments[-1] == slugified_name:
+        pass  # dedup: last folder == slug, don't append
+    else:
+        segments.append(slugified_name)
+    return ":".join(segments)
+
+
+def _scan_skills_dir(skills_dir: Path) -> dict[str, dict[str, str]]:
+    """Scan a skills directory recursively, return flat colon-keyed map."""
+    entries: dict[str, dict[str, str]] = {}
+
+    if not skills_dir.exists():
+        return entries
+
+    for md_file in sorted(skills_dir.rglob("*.md")):
+        if md_file.name.startswith("."):
+            continue
+
+        try:
+            with open(md_file, "r", encoding="utf-8", errors="replace") as f:
+                head = f.read(1024)
+        except Exception:
+            continue
+
+        fm = parse_frontmatter(head)
+        name = fm.get("name")
+        if not name:
+            continue
+
+        slug = slugify(name)
+        rel = md_file.relative_to(skills_dir)
+        key = _build_colon_key(rel, slug)
+
+        if key in entries:
+            logger.warning(f"Skill key collision '{key}': keeping '{entries[key]['file']}', skipping '{rel}'")
+            continue
+
+        entries[key] = {
+            "name": name,
+            "description": fm.get("description", ""),
+            "emoji": fm.get("emoji", ""),
+            "file": str(rel),
+        }
+
+    return entries
+
+
+def get_skill_map(agent_id: UUID) -> dict[str, Any]:
+    """Build flat colon-keyed skill map for an agent. Cached with 60s TTL."""
+    cache_key = str(agent_id)
+    now = time.time()
+
+    if cache_key in _cache:
+        ts, result = _cache[cache_key]
+        if now - ts < _CACHE_TTL:
+            return result
+
+    from app.services.agent_context import _agent_workspace
+
+    skills_dir = _agent_workspace(agent_id) / "skills"
+    result = _scan_skills_dir(skills_dir)
+
+    _cache[cache_key] = (now, result)
+    return result
+
+
+def get_skill_map_for_api(agent_id: UUID) -> dict[str, Any]:
+    """Return skill map without file paths (safe for API response)."""
+    full = get_skill_map(agent_id)
+    return {
+        key: {k: v for k, v in entry.items() if k != "file"}
+        for key, entry in full.items()
+    }
+
+
+def invalidate_cache(agent_id: UUID) -> None:
+    """Remove cached skill map for an agent."""
+    _cache.pop(str(agent_id), None)
diff --git a/backend/app/services/skill_seeder.py b/backend/app/services/skill_seeder.py
index b3c1b2612..2955c181b 100644
--- a/backend/app/services/skill_seeder.py
+++ b/backend/app/services/skill_seeder.py
@@ -930,16 +930,15 @@ async def push_default_skills_to_existing_agents():
     Called at startup after seed_skills() so existing agents automatically receive new default skills
     like mcp-installer without requiring manual re-creation.
     """
-    from pathlib import Path
     from app.models.agent import Agent
-    from app.models.skill import Skill, SkillFile
+    from app.models.skill import Skill
     from sqlalchemy.orm import selectinload
     from app.services.agent_manager import agent_manager
 
     async with async_session() as db:
         # Load all is_default skills with their files
         default_skills_r = await db.execute(
-            select(Skill).where(Skill.is_default == True).options(selectinload(Skill.files))
+            select(Skill).where(Skill.is_default).options(selectinload(Skill.files))
         )
         default_skills = default_skills_r.scalars().all()
         if not default_skills:
diff --git a/backend/app/services/sso_service.py b/backend/app/services/sso_service.py
index 324f2f357..74e8a5ba4 100644
--- a/backend/app/services/sso_service.py
+++ b/backend/app/services/sso_service.py
@@ -524,8 +524,8 @@ async def validate_sso_enablement(self, db: AsyncSession, tenant_id: uuid.UUID)
         # IP Address: only ONE tenant in the whole system can have SSO enabled.
         # Check if any *other* tenant has an active SSO-enabled provider.
         query = select(IdentityProvider).where(
-            IdentityProvider.sso_login_enabled == True,
-            IdentityProvider.is_active == True,
+            IdentityProvider.sso_login_enabled,
+            IdentityProvider.is_active,
             IdentityProvider.tenant_id != tenant_id,
         )
         result = await db.execute(query)
diff --git a/backend/app/services/supervision_reminder.py b/backend/app/services/supervision_reminder.py
index 809285c7f..611e79b31 100644
--- a/backend/app/services/supervision_reminder.py
+++ b/backend/app/services/supervision_reminder.py
@@ -108,6 +108,7 @@ async def _get_agent_reply(target_agent, message: str, db) -> str | None:
     from app.services.llm import (
         get_provider_base_url,
         create_llm_client,
+        LLMError,
         LLMMessage,
         get_model_api_key,
     )
@@ -185,7 +186,7 @@ async def _send_supervision_reminder(task: Task, agent_name: str):
         reminder_msg += f"创建于：{days_since} 天前\n"
         if task.due_date:
             reminder_msg += f"截止日期：{task.due_date.strftime('%Y-%m-%d')}\n"
-        reminder_msg += f"\n请及时处理，谢谢！"
+        reminder_msg += "\n请及时处理，谢谢！"
 
         async with async_session() as db:
             sent = False
diff --git a/backend/app/services/system_email_service.py b/backend/app/services/system_email_service.py
index db50d5fcd..46a702026 100644
--- a/backend/app/services/system_email_service.py
+++ b/backend/app/services/system_email_service.py
@@ -8,11 +8,9 @@
 from __future__ import annotations
 
 import asyncio
-import inspect
 import logging
 import smtplib
 import ssl
-import uuid
 from collections.abc import Iterable
 from dataclasses import dataclass
 from datetime import datetime
@@ -20,7 +18,7 @@
 from email.mime.text import MIMEText
 from email.utils import formataddr, make_msgid
 
-from app.core.email import force_ipv4, send_smtp_email
+from app.core.email import force_ipv4
 
 logger = logging.getLogger(__name__)
 
@@ -116,17 +114,27 @@ def _send_email_with_config_sync(config: SystemEmailConfig, to: str, subject: st
     msg["Date"] = datetime.now().strftime("%a, %d %b %Y %H:%M:%S %z")
     msg.attach(MIMEText(body, "plain", "utf-8"))
 
-    send_smtp_email(
-        host=config.smtp_host,
-        port=config.smtp_port,
-        user=config.smtp_username,
-        password=config.smtp_password,
-        from_addr=config.from_address,
-        to_addrs=[to],
-        msg_string=msg.as_string(),
-        use_ssl=config.smtp_ssl,
-        timeout=config.smtp_timeout_seconds,
-    )
+    timeout = config.smtp_timeout_seconds
+    with force_ipv4():
+        if config.smtp_ssl:
+            context = ssl.create_default_context()
+            with smtplib.SMTP_SSL(
+                config.smtp_host,
+                config.smtp_port,
+                context=context,
+                timeout=timeout,
+            ) as smtp:
+                if config.smtp_username:
+                    smtp.login(config.smtp_username, config.smtp_password)
+                smtp.sendmail(config.from_address, [to], msg.as_string())
+        else:
+            with smtplib.SMTP(config.smtp_host, config.smtp_port, timeout=timeout) as smtp:
+                smtp.ehlo()
+                smtp.starttls(context=ssl.create_default_context())
+                smtp.ehlo()
+                if config.smtp_username:
+                    smtp.login(config.smtp_username, config.smtp_password)
+                smtp.sendmail(config.from_address, [to], msg.as_string())
 
 
 async def send_password_reset_email(
@@ -188,6 +196,11 @@ async def deliver_broadcast_emails(recipients: Iterable[BroadcastEmailRecipient]
             logger.warning("Failed to deliver broadcast email to %s: %s", recipient.email, exc)
 
 
+async def run_background_email_job(fn, *args, **kwargs) -> None:
+    """Small async wrapper for background email tasks."""
+    await fn(*args, **kwargs)
+
+
 # ── Email Templates ──────────────────────────────────────────────────────────
 
 # Default templates for each email scenario.
@@ -239,8 +252,6 @@ async def get_email_templates(db=None) -> dict[str, dict[str, str]]:
     Returns:
         A dict mapping scenario_key -> {"subject": str, "body": str}
     """
-    from sqlalchemy import select
-    from app.models.system_settings import SystemSetting
 
     templates = dict(DEFAULT_EMAIL_TEMPLATES)  # start with defaults
 
diff --git a/backend/app/services/task_executor.py b/backend/app/services/task_executor.py
index 33f394581..166a999dd 100644
--- a/backend/app/services/task_executor.py
+++ b/backend/app/services/task_executor.py
@@ -4,8 +4,6 @@
 as the chat dialog. Supports tool-calling loop for autonomous execution.
 """
 
-import asyncio
-import json
 import uuid
 from datetime import datetime, timezone
 
@@ -15,7 +13,6 @@
 from app.config import get_settings
 from app.database import async_session
 from app.models.agent import Agent
-from app.models.llm import LLMModel
 from app.models.task import Task, TaskLog
 
 settings = get_settings()
diff --git a/backend/app/services/template_seeder.py b/backend/app/services/template_seeder.py
index caccdb515..83f1fda45 100644
--- a/backend/app/services/template_seeder.py
+++ b/backend/app/services/template_seeder.py
@@ -455,7 +455,7 @@ async def seed_agent_templates():
 
             current_names = {t["name"] for t in templates}
             result = await db.execute(
-                select(AgentTemplate).where(AgentTemplate.is_builtin == True)
+                select(AgentTemplate).where(AgentTemplate.is_builtin)
             )
             existing_builtins = result.scalars().all()
             for old in existing_builtins:
@@ -475,7 +475,7 @@ async def seed_agent_templates():
                 result = await db.execute(
                     select(AgentTemplate).where(
                         AgentTemplate.name == tmpl["name"],
-                        AgentTemplate.is_builtin == True,
+                        AgentTemplate.is_builtin,
                     )
                 )
                 existing = result.scalar_one_or_none()
diff --git a/backend/app/services/timezone_utils.py b/backend/app/services/timezone_utils.py
index 8a2696393..07cb43308 100644
--- a/backend/app/services/timezone_utils.py
+++ b/backend/app/services/timezone_utils.py
@@ -2,7 +2,7 @@
 
 import uuid
 from zoneinfo import ZoneInfo
-from datetime import datetime, timezone
+from datetime import datetime
 
 from sqlalchemy import select
 
diff --git a/backend/app/services/tool_seeder.py b/backend/app/services/tool_seeder.py
index 909d72949..f190c61e6 100644
--- a/backend/app/services/tool_seeder.py
+++ b/backend/app/services/tool_seeder.py
@@ -3191,9 +3191,182 @@ def _global_builtin_config(tool_data: dict) -> dict:
     },
 ]
 
+WORKSPACE_BUILTIN_TOOLS = [
+    {
+        "name": "request_build",
+        "display_name": "Request Build",
+        "description": "Create a build request for the Software Engineer agent. Any agent or human can use this to request a new website, tool, or application to be built and deployed.",
+        "category": "workspace",
+        "icon": "🔨",
+        "is_default": True,
+        "parameters_schema": {
+            "type": "object",
+            "properties": {
+                "slug": {
+                    "type": "string",
+                    "description": "URL-friendly project identifier (lowercase, hyphens allowed, 2-50 chars). This becomes the URL path: /workspace/{slug}/",
+                },
+                "name": {"type": "string", "description": "Human-readable project name"},
+                "description": {
+                    "type": "string",
+                    "description": "Detailed description of what to build, including requirements, target audience, and any design preferences",
+                },
+            },
+            "required": ["slug", "name", "description"],
+        },
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "list_build_requests",
+        "display_name": "List Build Requests",
+        "description": "List pending build requests (status=requested) for the Software Engineer agent to pick up.",
+        "category": "workspace",
+        "icon": "📋",
+        "is_default": True,
+        "parameters_schema": {"type": "object", "properties": {}},
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "deploy_static",
+        "display_name": "Deploy Static Site",
+        "description": "Deploy a static website (HTML/CSS/JS) from your workspace to the public workspace. Goes live immediately without approval. The files will be served at /workspace/{slug}/.",
+        "category": "workspace",
+        "icon": "🚀",
+        "is_default": True,
+        "parameters_schema": {
+            "type": "object",
+            "properties": {
+                "slug": {"type": "string", "description": "Project slug (must match an existing build request or be a new unique slug)"},
+                "source_dir": {
+                    "type": "string",
+                    "description": "Directory in your workspace containing the built files (e.g., 'workspace/my-project'). Must contain at least an index.html.",
+                },
+            },
+            "required": ["slug", "source_dir"],
+        },
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "request_container_deploy",
+        "display_name": "Request Container Deploy",
+        "description": "Submit a container-based application for deployment. Requires Frank's approval before going live. The application will be built from a Dockerfile in your workspace.",
+        "category": "workspace",
+        "icon": "📦",
+        "is_default": True,
+        "parameters_schema": {
+            "type": "object",
+            "properties": {
+                "slug": {"type": "string", "description": "Project slug for the URL path /workspace/{slug}/"},
+                "dockerfile_path": {"type": "string", "description": "Path to the Dockerfile in your workspace (e.g., 'workspace/my-app/Dockerfile')"},
+                "port": {"type": "integer", "description": "Port the application listens on inside the container"},
+                "name": {"type": "string", "description": "Human-readable project name"},
+                "description": {"type": "string", "description": "What this application does"},
+                "resource_limits_suggestion": {
+                    "type": "object",
+                    "description": "Suggested resource limits (optional). Frank will set final limits at approval.",
+                    "properties": {
+                        "memory": {"type": "string", "description": "e.g., '256m', '512m'"},
+                        "cpus": {"type": "string", "description": "e.g., '0.5', '1'"},
+                    },
+                },
+            },
+            "required": ["slug", "dockerfile_path", "port", "name", "description"],
+        },
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "list_workspace_projects",
+        "display_name": "List Workspace Projects",
+        "description": "List all workspace projects with their current status, deploy type, and URLs.",
+        "category": "workspace",
+        "icon": "📋",
+        "is_default": True,
+        "parameters_schema": {"type": "object", "properties": {}},
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "undeploy_project",
+        "display_name": "Undeploy Project",
+        "description": "Remove a deployed workspace project. For static sites, deletes files. For containers, stops and removes the container.",
+        "category": "workspace",
+        "icon": "🗑️",
+        "is_default": True,
+        "parameters_schema": {
+            "type": "object",
+            "properties": {"slug": {"type": "string", "description": "The project slug to undeploy"}},
+            "required": ["slug"],
+        },
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "get_bug_reports",
+        "display_name": "Get Bug Reports",
+        "description": "List open bug reports for workspace projects. Use this to find issues that need fixing.",
+        "category": "workspace",
+        "icon": "🐛",
+        "is_default": True,
+        "parameters_schema": {
+            "type": "object",
+            "properties": {
+                "status_filter": {
+                    "type": "string",
+                    "description": "Filter by status: 'open', 'investigating', 'escalated', or 'all'. Default: 'open'",
+                },
+            },
+        },
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "resolve_bug",
+        "display_name": "Resolve Bug",
+        "description": "Mark a bug report as fixed after you have redeployed the fix.",
+        "category": "workspace",
+        "icon": "✅",
+        "is_default": True,
+        "parameters_schema": {
+            "type": "object",
+            "properties": {
+                "bug_report_id": {"type": "string", "description": "The UUID of the bug report to resolve"},
+            },
+            "required": ["bug_report_id"],
+        },
+        "config": {},
+        "config_schema": {},
+    },
+    {
+        "name": "report_workspace_bug",
+        "display_name": "Report Workspace Bug",
+        "description": "Report a bug on a deployed workspace project. Creates a bug report for the Software Engineer agent to investigate and fix.",
+        "category": "workspace",
+        "icon": "🐞",
+        "is_default": True,
+        "parameters_schema": {
+            "type": "object",
+            "properties": {
+                "slug": {"type": "string", "description": "The project slug with the bug"},
+                "description": {
+                    "type": "string",
+                    "description": "Detailed description of the bug, including steps to reproduce if possible",
+                },
+            },
+            "required": ["slug", "description"],
+        },
+        "config": {},
+        "config_schema": {},
+    },
+]
+
 BUILTIN_TOOLS = [
     *BUILTIN_TOOLS,
     *OKR_BUILTIN_TOOLS,
+    *WORKSPACE_BUILTIN_TOOLS,
 ]
 
 
@@ -3516,7 +3689,7 @@ async def clean_orphaned_mcp_tools():
         stmt = delete(Tool).where(
             and_(
                 Tool.type == "mcp",
-                Tool.tenant_id == None,
+                Tool.tenant_id is None,
                 ~Tool.id.in_(assigned_ids) if assigned_ids else True
             )
         )
diff --git a/backend/app/services/trigger_daemon.py b/backend/app/services/trigger_daemon.py
index 0e9e3df10..c5de544b4 100644
--- a/backend/app/services/trigger_daemon.py
+++ b/backend/app/services/trigger_daemon.py
@@ -466,7 +466,7 @@ async def _check_new_agent_messages(trigger: AgentTrigger) -> bool:
 
                 # Look up user by display name or username within tenant
                 from sqlalchemy import or_
-                from app.models.user import User, Identity
+                from app.models.user import Identity
                 safe_user_name = from_user_name.replace("%", "").replace("_", r"\_")
                 query = (
                     select(User)
@@ -614,7 +614,6 @@ async def _invoke_agent_for_triggers(agent_id: uuid.UUID, triggers: list[AgentTr
     Creates a Reflection Session and calls the LLM.
     """
     from app.services.llm import call_llm
-    from app.services.agent_context import build_agent_context
     from app.models.llm import LLMModel
     from app.models.audit import ChatMessage
     from app.models.chat_session import ChatSession
@@ -971,7 +970,7 @@ async def _tick():
 
     async with async_session() as db:
         result = await db.execute(
-            select(AgentTrigger).where(AgentTrigger.is_enabled == True)
+            select(AgentTrigger).where(AgentTrigger.is_enabled)
         )
         all_triggers = result.scalars().all()
 
@@ -1058,7 +1057,6 @@ async def wake_agent_with_context(agent_id: uuid.UUID, message_context: str, *,
         skip_dedup: If True, bypass the dedup window check.
         a2a_session_id: Optional A2A chat session ID to mirror the reply into.
     """
-    import time as _time
 
     now = datetime.now(timezone.utc)
 
diff --git a/backend/app/services/wechat_channel.py b/backend/app/services/wechat_channel.py
index 8ad24fe26..bf571df78 100644
--- a/backend/app/services/wechat_channel.py
+++ b/backend/app/services/wechat_channel.py
@@ -331,7 +331,7 @@ async def start_all(self) -> None:
             result = await db.execute(
                 select(ChannelConfig).where(
                     ChannelConfig.channel_type == "wechat",
-                    ChannelConfig.is_configured == True,
+                    ChannelConfig.is_configured,
                 )
             )
             for cfg in result.scalars().all():
diff --git a/backend/app/services/workspace_collaboration.py b/backend/app/services/workspace_collaboration.py
index e7a8be898..5b2ebfacc 100644
--- a/backend/app/services/workspace_collaboration.py
+++ b/backend/app/services/workspace_collaboration.py
@@ -14,7 +14,7 @@
 from pathlib import Path
 
 import aiofiles
-from sqlalchemy import and_, delete, desc, select
+from sqlalchemy import delete, desc, select
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.models.workspace import WorkspaceEditLock, WorkspaceFileRevision
diff --git a/backend/app/services/workspace_health.py b/backend/app/services/workspace_health.py
new file mode 100644
index 000000000..127542013
--- /dev/null
+++ b/backend/app/services/workspace_health.py
@@ -0,0 +1,147 @@
+"""Periodic health checks for deployed workspace projects."""
+
+import asyncio
+import logging
+from datetime import datetime, timedelta, timezone
+
+import httpx
+from sqlalchemy import select
+
+from app.config import get_settings
+from app.database import async_session
+from app.models.workspace import WorkspaceBugReport, WorkspaceProject
+
+logger = logging.getLogger(__name__)
+
+settings = get_settings()
+
+CHECK_INTERVAL = 300  # 5 minutes
+RETRY_DELAY = 30  # seconds
+GRACE_PERIOD = 30  # seconds after deploy before first check
+MAX_AUTO_FIX = 3
+AUTO_FIX_WINDOW = timedelta(hours=24)
+
+
+async def run_health_checks():
+    """Background loop that checks workspace project health every 5 minutes."""
+    logger.info("Workspace health check task started")
+    while True:
+        try:
+            await _check_all_projects()
+        except Exception:
+            logger.exception("Health check cycle failed")
+        await asyncio.sleep(CHECK_INTERVAL)
+
+
+async def _check_all_projects():
+    """Check all deployed projects."""
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).where(WorkspaceProject.status == "deployed")
+        )
+        projects = result.scalars().all()
+
+    now = datetime.now(timezone.utc)
+    eligible = [
+        p for p in projects
+        if not p.updated_at or (now - p.updated_at.replace(tzinfo=timezone.utc)).total_seconds() >= GRACE_PERIOD
+    ]
+
+    # Check all projects in parallel
+    results = await asyncio.gather(
+        *[_check_project(p) for p in eligible],
+        return_exceptions=True,
+    )
+
+    # Retry failed ones (in parallel), then create bug reports
+    failed = [p for p, r in zip(eligible, results) if r is not True]
+    if failed:
+        await asyncio.sleep(RETRY_DELAY)
+        retry_results = await asyncio.gather(
+            *[_check_project(p) for p in failed],
+            return_exceptions=True,
+        )
+        for p, r in zip(failed, retry_results):
+            if r is not True:
+                await _create_health_bug_report(p)
+
+
+async def _check_project(project: WorkspaceProject) -> bool:
+    """Check a single project's health. Returns True if healthy."""
+    if project.deploy_type == "static":
+        url = f"http://{settings.WORKSPACE_GATEWAY_CONTAINER}/workspace/{project.slug}/"
+        method = "HEAD"
+    else:
+        endpoint = project.health_endpoint or f"/workspace/{project.slug}/health"
+        url = f"http://{settings.WORKSPACE_GATEWAY_CONTAINER}{endpoint}"
+        method = "GET"
+
+    try:
+        async with httpx.AsyncClient(timeout=10.0) as client:
+            if method == "HEAD":
+                resp = await client.head(url)
+            else:
+                resp = await client.get(url)
+            return resp.status_code == 200
+    except Exception as e:
+        logger.warning("Health check failed for %s: %s", project.slug, e)
+        return False
+
+
+async def _create_health_bug_report(project: WorkspaceProject):
+    """Create a bug report for a failed health check, respecting circuit breaker."""
+    now = datetime.now(timezone.utc)
+
+    async with async_session() as db:
+        # Re-fetch to get latest state
+        proj = await db.get(WorkspaceProject, project.id)
+        if not proj or proj.status != "deployed":
+            return
+
+        # Check circuit breaker
+        if proj.auto_fix_window_start:
+            window_start = proj.auto_fix_window_start.replace(tzinfo=timezone.utc)
+            if now - window_start < AUTO_FIX_WINDOW:
+                if proj.auto_fix_attempts >= MAX_AUTO_FIX:
+                    # Exceeded max attempts — escalate
+                    proj.status = "failed"
+                    report = WorkspaceBugReport(
+                        project_id=proj.id,
+                        source="health_check",
+                        description=f"Health check failed. Auto-fix limit ({MAX_AUTO_FIX}) exceeded in 24h window. Manual intervention required.",
+                        status="escalated",
+                    )
+                    db.add(report)
+                    await db.commit()
+                    logger.warning("Project '%s' escalated — auto-fix limit exceeded", proj.slug)
+                    return
+            else:
+                # Window expired, reset
+                proj.auto_fix_attempts = 0
+                proj.auto_fix_window_start = now
+
+        if not proj.auto_fix_window_start:
+            proj.auto_fix_window_start = now
+
+        proj.auto_fix_attempts += 1
+
+        # Check if there's already an open health_check report for this project
+        existing = await db.execute(
+            select(WorkspaceBugReport).where(
+                WorkspaceBugReport.project_id == proj.id,
+                WorkspaceBugReport.source == "health_check",
+                WorkspaceBugReport.status.in_(["open", "investigating"]),
+            )
+        )
+        if existing.scalar_one_or_none():
+            await db.commit()  # save the attempt counter
+            return  # don't duplicate
+
+        report = WorkspaceBugReport(
+            project_id=proj.id,
+            source="health_check",
+            description=f"Health check failed for /workspace/{proj.slug}/. The site may be down or returning errors.",
+        )
+        db.add(report)
+        await db.commit()
+        logger.info("Health check bug report created for '%s' (attempt %d/%d)", proj.slug, proj.auto_fix_attempts, MAX_AUTO_FIX)
diff --git a/backend/app/services/workspace_index.py b/backend/app/services/workspace_index.py
new file mode 100644
index 000000000..45569f355
--- /dev/null
+++ b/backend/app/services/workspace_index.py
@@ -0,0 +1,164 @@
+"""Generates the workspace index page at /workspace/."""
+
+import html
+import logging
+from pathlib import Path
+
+from sqlalchemy import select
+
+from app.config import get_settings
+from app.database import async_session
+from app.models.workspace import WorkspaceProject
+
+logger = logging.getLogger(__name__)
+
+settings = get_settings()
+
+STATUS_COLORS = {
+    "deployed": "#22c55e",
+    "building": "#f59e0b",
+    "awaiting_approval": "#3b82f6",
+    "failed": "#ef4444",
+    "stopped": "#6b7280",
+}
+
+
+async def regenerate_index() -> None:
+    """Regenerate the workspace index HTML. Non-blocking — logs errors but does not raise."""
+    try:
+        async with async_session() as db:
+            result = await db.execute(
+                select(WorkspaceProject)
+                .where(WorkspaceProject.status == "deployed")
+                .order_by(WorkspaceProject.created_at.desc())
+            )
+            projects = result.scalars().all()
+
+        index_dir = Path(settings.WORKSPACE_STATIC_DIR) / "_index"
+        index_dir.mkdir(parents=True, exist_ok=True)
+
+        project_cards = ""
+        for p in projects:
+            badge_color = STATUS_COLORS.get(p.status, "#6b7280")
+            project_cards += f"""
+            <div class="card">
+                <div class="card-header">
+                    <a href="/workspace/{p.slug}/" class="card-title">{html.escape(p.name)}</a>
+                    <span class="badge" style="background:{badge_color}">{p.status}</span>
+                </div>
+                <p class="card-desc">{html.escape(p.description or "No description")}</p>
+                <div class="card-footer">
+                    <span class="card-type">{p.deploy_type}</span>
+                    <button class="report-btn" onclick="reportIssue('{p.slug}')">Report Issue</button>
+                </div>
+            </div>"""
+
+        empty_msg = '<p class="empty">No projects deployed yet.</p>' if not projects else ""
+
+        page_html = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Workspace — NLearn Consultant Company</title>
+    <style>
+        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
+        body {{ font-family: system-ui, -apple-system, sans-serif; max-width: 900px; margin: 0 auto; padding: 2rem 1rem; color: #1a1a2e; background: #fafafa; }}
+        h1 {{ font-size: 1.5rem; margin-bottom: 0.5rem; }}
+        .subtitle {{ color: #666; margin-bottom: 2rem; }}
+        .empty {{ color: #666; font-style: italic; margin-top: 2rem; }}
+        .card {{ background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }}
+        .card-header {{ display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }}
+        .card-title {{ font-size: 1.1rem; font-weight: 600; color: #1a1a2e; text-decoration: none; }}
+        .card-title:hover {{ text-decoration: underline; }}
+        .badge {{ font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 9999px; color: #fff; font-weight: 500; }}
+        .card-desc {{ color: #555; font-size: 0.9rem; margin-bottom: 0.75rem; }}
+        .card-footer {{ display: flex; justify-content: space-between; align-items: center; }}
+        .card-type {{ font-size: 0.8rem; color: #888; text-transform: uppercase; }}
+        .report-btn {{ background: none; border: 1px solid #d1d5db; border-radius: 4px; padding: 0.25rem 0.75rem; font-size: 0.8rem; cursor: pointer; color: #666; }}
+        .report-btn:hover {{ background: #f3f4f6; }}
+        .modal-overlay {{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; }}
+        .modal {{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 8px; padding: 1.5rem; width: 90%; max-width: 480px; z-index: 101; }}
+        .modal h2 {{ font-size: 1.1rem; margin-bottom: 1rem; }}
+        .modal textarea {{ width: 100%; min-height: 100px; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; font-family: inherit; resize: vertical; }}
+        .modal-actions {{ display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }}
+        .modal-actions button {{ padding: 0.4rem 1rem; border-radius: 4px; border: 1px solid #d1d5db; cursor: pointer; }}
+        .modal-actions .submit {{ background: #1a1a2e; color: #fff; border-color: #1a1a2e; }}
+        .ohnohoney {{ position: absolute; left: -9999px; }}
+        .msg {{ padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; display: none; }}
+        .msg-ok {{ background: #dcfce7; color: #166534; }}
+        .msg-err {{ background: #fee2e2; color: #991b1b; }}
+    </style>
+</head>
+<body>
+    <h1>NLearn Consultant Company — Workspace</h1>
+    <p class="subtitle">Projects built by our AI team</p>
+    <div id="msg" class="msg"></div>
+    {empty_msg}
+    {project_cards}
+
+    <div id="modal-overlay" class="modal-overlay" onclick="closeModal()"></div>
+    <div id="modal" class="modal" style="display:none">
+        <h2>Report an Issue</h2>
+        <form id="report-form" onsubmit="submitReport(event)">
+            <input type="hidden" id="report-slug" value="">
+            <textarea id="report-desc" placeholder="Describe the issue..." required></textarea>
+            <input type="text" name="website" class="ohnohoney" tabindex="-1" autocomplete="off">
+            <div class="modal-actions">
+                <button type="button" onclick="closeModal()">Cancel</button>
+                <button type="submit" class="submit">Submit</button>
+            </div>
+        </form>
+    </div>
+
+    <script>
+        function reportIssue(slug) {{
+            document.getElementById('report-slug').value = slug;
+            document.getElementById('report-desc').value = '';
+            document.getElementById('modal').style.display = 'block';
+            document.getElementById('modal-overlay').style.display = 'block';
+        }}
+        function closeModal() {{
+            document.getElementById('modal').style.display = 'none';
+            document.getElementById('modal-overlay').style.display = 'none';
+        }}
+        async function submitReport(e) {{
+            e.preventDefault();
+            const slug = document.getElementById('report-slug').value;
+            const desc = document.getElementById('report-desc').value;
+            const honeypot = document.querySelector('.ohnohoney').value;
+            closeModal();
+            const msg = document.getElementById('msg');
+            try {{
+                const res = await fetch('/api/workspace/projects/' + slug + '/report-bug', {{
+                    method: 'POST',
+                    headers: {{'Content-Type': 'application/json'}},
+                    body: JSON.stringify({{description: desc, website: honeypot}})
+                }});
+                if (res.ok) {{
+                    msg.textContent = 'Thank you! Your report has been submitted.';
+                    msg.className = 'msg msg-ok';
+                }} else {{
+                    const data = await res.json();
+                    msg.textContent = data.detail || 'Failed to submit report.';
+                    msg.className = 'msg msg-err';
+                }}
+            }} catch {{
+                msg.textContent = 'Network error. Please try again.';
+                msg.className = 'msg msg-err';
+            }}
+            msg.style.display = 'block';
+            setTimeout(() => {{ msg.style.display = 'none'; }}, 5000);
+        }}
+    </script>
+</body>
+</html>"""
+
+        (index_dir / "index.html").write_text(page_html, encoding="utf-8")
+        logger.info("Workspace index page regenerated with %d projects", len(projects))
+
+    except Exception:
+        logger.exception("Failed to regenerate workspace index page")
+
+
+    # Note: uses stdlib html.escape() imported at top of file
diff --git a/backend/app/services/workspace_tools.py b/backend/app/services/workspace_tools.py
new file mode 100644
index 000000000..46db4d302
--- /dev/null
+++ b/backend/app/services/workspace_tools.py
@@ -0,0 +1,742 @@
+"""Workspace deployment tools for the Software Engineer agent."""
+
+import json
+import logging
+import re
+import shutil
+import uuid
+from pathlib import Path
+
+from sqlalchemy import or_, select
+from sqlalchemy.exc import IntegrityError
+
+from app.config import get_settings
+from app.database import async_session
+from app.models.agent import Agent as AgentModel
+from app.models.workspace import WorkspaceBugReport, WorkspaceProject
+from app.services.workspace_index import regenerate_index
+
+logger = logging.getLogger(__name__)
+
+SLUG_PATTERN = re.compile(r"^[a-z0-9][a-z0-9-]{0,48}[a-z0-9]$")
+RESERVED_SLUGS = {"_index", "api", "static", "health"}
+
+settings = get_settings()
+
+
+async def _get_agent_tenant_id(agent_id: uuid.UUID) -> uuid.UUID | None:
+    """Resolve tenant ownership for an agent-driven workspace action."""
+    async with async_session() as db:
+        result = await db.execute(select(AgentModel.tenant_id).where(AgentModel.id == agent_id))
+        return result.scalar_one_or_none()
+
+
+def _scope_workspace_project_query(query, tenant_id: uuid.UUID | None, include_platform_global: bool):
+    """Apply tenant scope to workspace admin queries."""
+    if tenant_id is None:
+        return query
+    if include_platform_global:
+        return query.where(or_(WorkspaceProject.tenant_id == tenant_id, WorkspaceProject.tenant_id.is_(None)))
+    return query.where(WorkspaceProject.tenant_id == tenant_id)
+
+
+def validate_slug(slug: str) -> str | None:
+    """Validate a workspace slug. Returns error message or None if valid."""
+    if not slug:
+        return "Slug cannot be empty."
+    if slug in RESERVED_SLUGS:
+        return f"Slug '{slug}' is reserved. Choose a different name."
+    if not SLUG_PATTERN.match(slug):
+        return (
+            f"Invalid slug '{slug}'. Must be 2-50 characters, "
+            "lowercase letters, numbers, and hyphens only. "
+            "Cannot start or end with a hyphen."
+        )
+    return None
+
+
+async def check_slug_available(slug: str) -> str | None:
+    """Check if slug is available in DB. Returns error message or None."""
+    async with async_session() as db:
+        existing = await db.execute(
+            select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+        )
+        if existing.scalar_one_or_none():
+            return f"Slug '{slug}' is already in use."
+    return None
+
+
+def _normalize_build_request(arguments: dict) -> tuple[str, str, str]:
+    """Extract normalized build-request fields from tool arguments."""
+    return (
+        arguments.get("slug", "").strip(),
+        arguments.get("name", "").strip(),
+        arguments.get("description", "").strip(),
+    )
+
+
+async def _validate_build_request(slug: str, name: str, description: str) -> str | None:
+    """Validate common build-request fields before writing the project row."""
+    if not name or not description:
+        return "Error: 'name' and 'description' are required."
+
+    slug_error = validate_slug(slug)
+    if slug_error:
+        return f"Error: {slug_error}"
+
+    avail_error = await check_slug_available(slug)
+    if avail_error:
+        return f"Error: {avail_error}"
+
+    return None
+
+
+async def _create_build_request_record(
+    *,
+    slug: str,
+    name: str,
+    description: str,
+    tenant_id: uuid.UUID | None = None,
+    requested_by: uuid.UUID | None = None,
+    requested_by_human: str | None = None,
+) -> str | None:
+    """Persist a pending build request and normalize duplicate-slug failures."""
+    try:
+        async with async_session() as db:
+            project = WorkspaceProject(
+                slug=slug,
+                name=name,
+                description=description,
+                tenant_id=tenant_id,
+                requested_by=requested_by,
+                requested_by_human=requested_by_human,
+                status="requested",
+            )
+            db.add(project)
+            await db.commit()
+    except IntegrityError:
+        return f"Error: Slug '{slug}' is already in use."
+
+    return None
+
+
+def _format_build_requester(project: WorkspaceProject) -> str:
+    """Render the human-friendly requester label for a pending build request."""
+    return project.requested_by_human or f"Agent {project.requested_by}"
+
+
+def _get_docker_client():
+    """Get a Docker client connected via the mounted socket. Lazy import to avoid import-time failure."""
+    import docker
+    return docker.DockerClient(base_url="unix:///var/run/docker.sock")
+
+
+def _resolve_project_dockerfile(agent_ws: Path, slug: str, project: WorkspaceProject) -> Path:
+    """Resolve the Dockerfile for a pending workspace deployment.
+
+    Priority:
+    1. Stored project.dockerfile_path (deterministic)
+    2. Backward-compatible fallback: exactly one Dockerfile under workspace/{slug}/
+    """
+    dockerfile_rel = (project.dockerfile_path or "").strip()
+    if dockerfile_rel:
+        candidate = (agent_ws / dockerfile_rel).resolve()
+        if not str(candidate).startswith(str(agent_ws.resolve())):
+            raise ValueError("Stored dockerfile_path escapes the agent workspace.")
+        if not candidate.exists() or not candidate.is_file():
+            raise FileNotFoundError("Stored dockerfile_path does not exist.")
+        return candidate
+
+    slug_candidates = list(agent_ws.glob(f"workspace/{slug}/**/Dockerfile"))
+    if len(slug_candidates) == 1:
+        return slug_candidates[0]
+    if len(slug_candidates) > 1:
+        raise ValueError(
+            f"Multiple Dockerfiles found for project '{slug}'. Please resubmit with an explicit dockerfile_path."
+        )
+    raise FileNotFoundError("No Dockerfile found for the pending deployment request.")
+
+
+async def tool_request_build(
+    agent_id: uuid.UUID, arguments: dict
+) -> str:
+    """Create a build request for the SE agent."""
+    slug, name, description = _normalize_build_request(arguments)
+
+    validation_error = await _validate_build_request(slug, name, description)
+    if validation_error:
+        return validation_error
+
+    tenant_id = await _get_agent_tenant_id(agent_id)
+    create_error = await _create_build_request_record(
+        slug=slug,
+        name=name,
+        description=description,
+        tenant_id=tenant_id,
+        requested_by=agent_id,
+    )
+    if create_error:
+        return create_error
+
+    return (
+        f"Build request created!\n"
+        f"- Slug: {slug}\n"
+        f"- Name: {name}\n"
+        f"- Description: {description}\n"
+        f"The Software Engineer agent will pick this up."
+    )
+
+
+async def tool_request_build_human(
+    arguments: dict,
+) -> str:
+    """Create a build request from a human (no agent_id)."""
+    slug, name, description = _normalize_build_request(arguments)
+    requester = arguments.get("requester", "").strip() or "Frank"
+
+    validation_error = await _validate_build_request(slug, name, description)
+    if validation_error:
+        return validation_error
+
+    create_error = await _create_build_request_record(
+        slug=slug,
+        name=name,
+        description=description,
+        requested_by_human=requester,
+    )
+    if create_error:
+        return create_error
+
+    return f"Build request '{name}' created for slug '{slug}'."
+
+
+async def tool_list_build_requests() -> str:
+    """List pending build requests."""
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject)
+            .where(WorkspaceProject.status == "requested")
+            .order_by(WorkspaceProject.created_at.asc())
+        )
+        projects = result.scalars().all()
+
+    if not projects:
+        return "No pending build requests."
+
+    lines = ["Pending build requests:\n"]
+    for project in projects:
+        lines.append(
+            f"- [{project.slug}] {project.name}\n"
+            f"  Requested by: {_format_build_requester(project)}\n"
+            f"  Description: {project.description}\n"
+        )
+    return "\n".join(lines)
+
+
+async def tool_deploy_static(
+    agent_id: uuid.UUID, ws: Path, arguments: dict
+) -> str:
+    """Deploy static files from agent workspace to /srv/workspace/{slug}/."""
+    slug = arguments.get("slug", "").strip()
+    source_dir = arguments.get("source_dir", "").strip()
+
+    if not slug or not source_dir:
+        return "Error: 'slug' and 'source_dir' are required."
+
+    slug_error = validate_slug(slug)
+    if slug_error:
+        return f"Error: {slug_error}"
+
+    tenant_id = await _get_agent_tenant_id(agent_id)
+
+    # Resolve source path within agent workspace
+    source_path = (ws / source_dir).resolve()
+    if not str(source_path).startswith(str(ws.resolve())):
+        return "Error: source_dir must be within your workspace."
+    if not source_path.is_dir():
+        return f"Error: Directory '{source_dir}' not found in your workspace."
+    if not (source_path / "index.html").exists():
+        return f"Error: No index.html found in '{source_dir}'. Static sites must have an index.html."
+
+    # Check/create project record
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+        )
+        project = result.scalar_one_or_none()
+
+        if project and project.deploy_type == "container" and project.status == "deployed":
+            return f"Error: Slug '{slug}' is used by a running container deployment. Undeploy it first."
+
+        if not project:
+            # Auto-create project record for direct deploys
+            project = WorkspaceProject(
+                slug=slug,
+                name=slug.replace("-", " ").title(),
+                description="Deployed via deploy_static",
+                tenant_id=tenant_id,
+                built_by=agent_id,
+                deploy_type="static",
+                status="building",
+            )
+            db.add(project)
+            await db.flush()
+        else:
+            project.tenant_id = tenant_id
+            project.deploy_type = "static"
+            project.built_by = agent_id
+            project.status = "building"
+
+        await db.commit()
+        project_id = project.id
+
+    # Copy files to workspace static dir
+    dest_path = Path(settings.WORKSPACE_STATIC_DIR) / slug
+    try:
+        if dest_path.exists():
+            shutil.rmtree(dest_path)
+        shutil.copytree(source_path, dest_path)
+    except Exception as e:
+        async with async_session() as db:
+            result = await db.execute(
+                select(WorkspaceProject).where(WorkspaceProject.id == project_id)
+            )
+            project = result.scalar_one()
+            project.status = "failed"
+            await db.commit()
+        return f"Error copying files: {e}"
+
+    # Update status
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).where(WorkspaceProject.id == project_id)
+        )
+        project = result.scalar_one()
+        project.status = "deployed"
+        await db.commit()
+
+    # Regenerate index (non-blocking)
+    try:
+        await regenerate_index()
+    except Exception:
+        logger.exception("Index regeneration failed after deploy_static")
+
+    return (
+        f"Static site deployed successfully!\n"
+        f"- URL: /workspace/{slug}/\n"
+        f"- Files copied from: {source_dir}\n"
+        f"The site is now live."
+    )
+
+
+async def tool_request_container_deploy(
+    agent_id: uuid.UUID, ws: Path, arguments: dict
+) -> str:
+    """Submit a container deployment for approval."""
+    slug = arguments.get("slug", "").strip()
+    dockerfile_path = arguments.get("dockerfile_path", "").strip()
+    port = arguments.get("port")
+    name = arguments.get("name", "").strip()
+    description = arguments.get("description", "").strip()
+    resource_suggestion = arguments.get("resource_limits_suggestion", {})
+
+    if not all([slug, dockerfile_path, port, name, description]):
+        return "Error: slug, dockerfile_path, port, name, and description are all required."
+
+    slug_error = validate_slug(slug)
+    if slug_error:
+        return f"Error: {slug_error}"
+
+    tenant_id = await _get_agent_tenant_id(agent_id)
+
+    # Verify Dockerfile exists
+    dockerfile_full = (ws / dockerfile_path).resolve()
+    if not str(dockerfile_full).startswith(str(ws.resolve())):
+        return "Error: dockerfile_path must be within your workspace."
+    if not dockerfile_full.exists():
+        return f"Error: Dockerfile not found at '{dockerfile_path}'."
+
+    # Check/create project record
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+        )
+        project = result.scalar_one_or_none()
+
+        if project and project.status == "deployed":
+            return f"Error: Slug '{slug}' is already deployed. Undeploy it first."
+        if project and project.status == "awaiting_approval":
+            return f"Error: Slug '{slug}' already has a pending approval request."
+
+        if not project:
+            project = WorkspaceProject(
+                slug=slug,
+                name=name,
+                description=description,
+                tenant_id=tenant_id,
+                built_by=agent_id,
+                deploy_type="container",
+                status="awaiting_approval",
+                container_port=port,
+                dockerfile_path=dockerfile_path,
+                resource_limits=resource_suggestion if resource_suggestion else None,
+            )
+            db.add(project)
+        else:
+            project.name = name
+            project.description = description
+            project.tenant_id = tenant_id
+            project.built_by = agent_id
+            project.deploy_type = "container"
+            project.status = "awaiting_approval"
+            project.container_port = port
+            project.dockerfile_path = dockerfile_path
+            project.resource_limits = resource_suggestion if resource_suggestion else None
+
+        await db.commit()
+
+    return (
+        f"Container deployment request submitted for approval.\n"
+        f"- Slug: {slug}\n"
+        f"- Name: {name}\n"
+        f"- Dockerfile: {dockerfile_path}\n"
+        f"- Port: {port}\n"
+        f"- Suggested limits: {json.dumps(resource_suggestion) if resource_suggestion else 'none'}\n"
+        f"Frank will review and approve this deployment."
+    )
+
+
+async def tool_list_workspace_projects() -> str:
+    """List all workspace projects."""
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).order_by(WorkspaceProject.created_at.desc())
+        )
+        projects = result.scalars().all()
+
+    if not projects:
+        return "No workspace projects."
+
+    lines = ["Workspace projects:\n"]
+    for p in projects:
+        url = f"/workspace/{p.slug}/" if p.status == "deployed" else "(not live)"
+        lines.append(
+            f"- [{p.slug}] {p.name} — {p.status} ({p.deploy_type})\n"
+            f"  URL: {url}\n"
+        )
+    return "\n".join(lines)
+
+
+async def tool_undeploy_project(arguments: dict) -> str:
+    """Remove a deployed workspace project."""
+    slug = arguments.get("slug", "").strip()
+    if not slug:
+        return "Error: 'slug' is required."
+
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+        )
+        project = result.scalar_one_or_none()
+        if not project:
+            return f"Error: Project '{slug}' not found."
+
+        if project.deploy_type == "static":
+            # Delete static files
+            dest = Path(settings.WORKSPACE_STATIC_DIR) / slug
+            if dest.exists():
+                shutil.rmtree(dest)
+
+        elif project.deploy_type == "container" and project.container_id:
+            # Stop and remove container
+            try:
+                client = _get_docker_client()
+                try:
+                    container = client.containers.get(project.container_id)
+                    container.stop(timeout=10)
+                    container.remove()
+                except Exception:
+                    pass  # container already gone or not found
+                client.close()
+            except Exception as e:
+                logger.exception("Failed to remove container for %s", slug)
+                return f"Warning: Container removal failed ({e}), but project will be marked as undeployed."
+
+            # Remove nginx conf
+            conf_path = Path(settings.WORKSPACE_CONF_DIR) / f"{slug}.conf"
+            if conf_path.exists():
+                conf_path.unlink()
+
+            # Reload gateway nginx
+            await _reload_gateway()
+
+        project.status = "undeployed"
+        await db.commit()
+
+    # Regenerate index
+    try:
+        await regenerate_index()
+    except Exception:
+        logger.exception("Index regeneration failed after undeploy")
+
+    return f"Project '{slug}' has been undeployed."
+
+
+async def tool_get_bug_reports(arguments: dict) -> str:
+    """List bug reports, optionally filtered by status."""
+    from sqlalchemy.orm import selectinload
+
+    status_filter = arguments.get("status_filter", "open").strip()
+
+    async with async_session() as db:
+        query = (
+            select(WorkspaceBugReport)
+            .options(selectinload(WorkspaceBugReport.project))
+            .join(WorkspaceProject)
+        )
+        if status_filter != "all":
+            query = query.where(WorkspaceBugReport.status == status_filter)
+        query = query.order_by(WorkspaceBugReport.created_at.desc())
+        result = await db.execute(query)
+        reports = result.scalars().all()
+
+        if not reports:
+            return f"No bug reports with status '{status_filter}'."
+
+        lines = [f"Bug reports ({status_filter}):\n"]
+        for r in reports:
+            proj_slug = r.project.slug if r.project else "unknown"
+            lines.append(
+                f"- [{r.id}] Project: {proj_slug}\n"
+                f"  Source: {r.source} | Status: {r.status}\n"
+                f"  Description: {r.description[:200]}\n"
+                f"  Created: {r.created_at}\n"
+            )
+    return "\n".join(lines)
+
+
+async def tool_resolve_bug(arguments: dict) -> str:
+    """Mark a bug report as fixed."""
+    bug_id = arguments.get("bug_report_id", "").strip()
+    if not bug_id:
+        return "Error: 'bug_report_id' is required."
+
+    try:
+        bug_uuid = uuid.UUID(bug_id)
+    except ValueError:
+        return f"Error: Invalid UUID '{bug_id}'."
+
+    async with async_session() as db:
+        report = await db.get(WorkspaceBugReport, bug_uuid)
+        if not report:
+            return f"Error: Bug report '{bug_id}' not found."
+        report.status = "fixed"
+        await db.commit()
+
+    return f"Bug report {bug_id} marked as fixed."
+
+
+async def tool_report_workspace_bug(
+    agent_id: uuid.UUID, arguments: dict
+) -> str:
+    """Report a bug on a workspace project (agent-initiated)."""
+    slug = arguments.get("slug", "").strip()
+    description = arguments.get("description", "").strip()
+
+    if not slug or not description:
+        return "Error: 'slug' and 'description' are required."
+
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).where(
+                WorkspaceProject.slug == slug,
+                WorkspaceProject.status == "deployed",
+            )
+        )
+        project = result.scalar_one_or_none()
+        if not project:
+            return f"Error: No deployed project found with slug '{slug}'."
+
+        report = WorkspaceBugReport(
+            project_id=project.id,
+            source="user_report",
+            description=description[:2000],
+        )
+        db.add(report)
+        await db.commit()
+
+    return f"Bug report created for project '{slug}'. The Software Engineer agent will investigate."
+
+
+async def approve_container_deploy(
+    slug: str,
+    resource_limits: dict | None = None,
+    *,
+    tenant_id: uuid.UUID | None = None,
+    include_platform_global: bool = False,
+) -> dict:
+    """Approve and execute a container deployment. Returns status dict."""
+    async with async_session() as db:
+        query = select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+        query = _scope_workspace_project_query(query, tenant_id, include_platform_global)
+        result = await db.execute(query)
+        project = result.scalar_one_or_none()
+        if not project:
+            return {"ok": False, "error": f"Project '{slug}' not found."}
+        if project.status != "awaiting_approval":
+            return {"ok": False, "error": f"Project '{slug}' is not awaiting approval (status: {project.status})."}
+
+        # Override resource limits if provided
+        if resource_limits:
+            project.resource_limits = resource_limits
+
+        project.status = "building"
+        agent_id = project.built_by
+        port = project.container_port
+        limits = project.resource_limits or {}
+        await db.commit()
+
+    # Resolve the requested Dockerfile deterministically from the stored path.
+    agent_ws = Path(settings.AGENT_DATA_DIR) / str(agent_id)
+    try:
+        dockerfile_path = _resolve_project_dockerfile(agent_ws, slug, project)
+    except (FileNotFoundError, ValueError) as exc:
+        async with async_session() as db:
+            proj = await db.get(WorkspaceProject, (await db.execute(
+                select(WorkspaceProject.id).where(WorkspaceProject.slug == slug)
+            )).scalar_one())
+            proj.status = "failed"
+            await db.commit()
+        return {"ok": False, "error": str(exc)}
+    build_context = dockerfile_path.parent
+
+    # Build and start container
+    try:
+        client = _get_docker_client()
+        container_name = f"ws-{slug}"
+        image_tag = f"ws-{slug}:latest"
+
+        # Build the image
+        logger.info("Building Docker image '%s' from %s", image_tag, build_context)
+        image, build_logs = client.images.build(
+            path=str(build_context),
+            tag=image_tag,
+            rm=True,
+        )
+        for log_line in build_logs:
+            if "stream" in log_line:
+                logger.debug("Build: %s", log_line["stream"].strip())
+
+        # Stop/remove existing container if any
+        try:
+            old = client.containers.get(container_name)
+            old.stop(timeout=10)
+            old.remove()
+        except Exception:
+            pass
+
+        # Prepare container kwargs
+        container_kwargs = {
+            "image": image_tag,
+            "name": container_name,
+            "hostname": container_name,
+            "detach": True,
+            "restart_policy": {"Name": "unless-stopped"},
+            "network": "workspace",
+        }
+
+        # Apply resource limits
+        if limits.get("memory"):
+            container_kwargs["mem_limit"] = limits["memory"]
+        if limits.get("cpus"):
+            container_kwargs["nano_cpus"] = int(float(limits["cpus"]) * 1e9)
+
+        # Start the container
+        logger.info("Starting container '%s'", container_name)
+        container = client.containers.run(**container_kwargs)
+
+        client.close()
+    except Exception as e:
+        logger.exception("Failed to build/start container for '%s'", slug)
+        async with async_session() as db:
+            result = await db.execute(
+                select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+            )
+            proj = result.scalar_one()
+            proj.status = "failed"
+            await db.commit()
+        return {"ok": False, "error": f"Docker build/start failed: {e}"}
+
+    # Write nginx conf snippet
+    conf_content = f"""location /workspace/{slug}/ {{
+    proxy_pass http://{container_name}:{port}/;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+}}
+"""
+    conf_path = Path(settings.WORKSPACE_CONF_DIR) / f"{slug}.conf"
+    conf_path.write_text(conf_content, encoding="utf-8")
+    logger.info("Wrote nginx conf for '%s'", slug)
+
+    # Reload gateway
+    await _reload_gateway()
+
+    # Update project record
+    async with async_session() as db:
+        result = await db.execute(
+            select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+        )
+        proj = result.scalar_one()
+        proj.status = "deployed"
+        proj.container_id = container.id
+        proj.container_image = image_tag
+        await db.commit()
+
+    # Regenerate index
+    try:
+        from app.services.workspace_index import regenerate_index
+        await regenerate_index()
+    except Exception:
+        logger.exception("Index regeneration failed after container deploy")
+
+    return {
+        "ok": True,
+        "slug": slug,
+        "container_name": container_name,
+        "url": f"/workspace/{slug}/",
+    }
+
+
+async def reject_container_deploy(
+    slug: str,
+    *,
+    tenant_id: uuid.UUID | None = None,
+    include_platform_global: bool = False,
+) -> dict:
+    """Reject a container deployment request."""
+    async with async_session() as db:
+        query = select(WorkspaceProject).where(WorkspaceProject.slug == slug)
+        query = _scope_workspace_project_query(query, tenant_id, include_platform_global)
+        result = await db.execute(query)
+        project = result.scalar_one_or_none()
+        if not project:
+            return {"ok": False, "error": f"Project '{slug}' not found."}
+        if project.status != "awaiting_approval":
+            return {"ok": False, "error": f"Project '{slug}' is not awaiting approval (status: {project.status})."}
+        project.status = "rejected"
+        await db.commit()
+    return {"ok": True, "slug": slug, "status": "rejected"}
+
+
+async def _reload_gateway() -> None:
+    """Reload the workspace gateway nginx config."""
+    try:
+        client = _get_docker_client()
+        container = client.containers.get(settings.WORKSPACE_GATEWAY_CONTAINER)
+        container.exec_run("nginx -s reload")
+        client.close()
+        logger.info("Workspace gateway nginx reloaded")
+    except Exception:
+        logger.exception("Failed to reload workspace gateway nginx")
diff --git a/backend/entrypoint.sh b/backend/entrypoint.sh
index a11135649..c1d3a7e0e 100755
--- a/backend/entrypoint.sh
+++ b/backend/entrypoint.sh
@@ -11,6 +11,14 @@ if [ "$(id -u)" = '0' ]; then
     echo "[entrypoint] Detected root user, fixing permissions..."
     chown -R clawith:clawith ${AGENT_DATA_DIR}
 
+    # Add clawith to docker group (GID from mounted socket) for workspace container management
+    DOCKER_SOCK_GID=$(stat -c '%g' /var/run/docker.sock 2>/dev/null || true)
+    if [ -n "$DOCKER_SOCK_GID" ] && [ "$DOCKER_SOCK_GID" != "0" ]; then
+        echo "[entrypoint] Adding clawith to docker socket group (GID=$DOCKER_SOCK_GID)..."
+        groupadd -g "$DOCKER_SOCK_GID" -o docker 2>/dev/null || true
+        usermod -aG docker clawith 2>/dev/null || true
+    fi
+
     echo "[entrypoint] Dropping privileges to 'clawith' and re-executing..."
     exec gosu clawith /bin/bash "$0" "$@"
 fi
@@ -44,7 +52,7 @@ if [ $ALEMBIC_EXIT -ne 0 ]; then
     echo "    Source:  git pull && alembic upgrade head"
     echo "------------------------------------------------------------------------"
     echo ""
-    echo "[entrypoint] Continuing startup despite migration failure..."
+    exit $ALEMBIC_EXIT
 else
     echo "[entrypoint] Alembic migrations completed successfully."
 fi
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
index 1ec45860f..23e8412c7 100644
--- a/backend/pyproject.toml
+++ b/backend/pyproject.toml
@@ -60,6 +60,9 @@ dev = [
 target-version = "py311"
 line-length = 120
 
+[tool.ruff.lint]
+ignore = ["E402", "E701"]
+
 [tool.pytest.ini_options]
 asyncio_mode = "auto"
 
diff --git a/backend/remove_old_tool.py b/backend/remove_old_tool.py
index 52d2469b8..1a0b485d1 100644
--- a/backend/remove_old_tool.py
+++ b/backend/remove_old_tool.py
@@ -1,9 +1,11 @@
 import asyncio
+
 from sqlalchemy.future import select
-from sqlalchemy import delete
+
 from app.db.session import async_session_maker
 from app.models.tool import Tool
 
+
 async def run():
     async with async_session_maker() as session:
         result = await session.execute(select(Tool).where(Tool.name == "generate_image"))
@@ -18,5 +20,6 @@ async def run():
         else:
             print("Tool 'generate_image' not found in database.")
 
+
 if __name__ == "__main__":
     asyncio.run(run())
diff --git a/backend/seed.py b/backend/seed.py
index bb9ce7c88..ded473238 100644
--- a/backend/seed.py
+++ b/backend/seed.py
@@ -5,7 +5,6 @@
 sys.path.insert(0, ".")
 
 from app.config import get_settings
-from app.core.security import hash_password
 from app.database import Base, engine, async_session
 # Import ALL models so Base.metadata.create_all can resolve all FKs
 from app.models.tenant import Tenant  # noqa: F401 — must be before user
diff --git a/backend/tests/conftest.py b/backend/tests/conftest.py
new file mode 100644
index 000000000..04d7f905b
--- /dev/null
+++ b/backend/tests/conftest.py
@@ -0,0 +1,10 @@
+from __future__ import annotations
+
+import sys
+from pathlib import Path
+
+
+BACKEND_ROOT = Path(__file__).resolve().parents[1]
+
+if str(BACKEND_ROOT) not in sys.path:
+    sys.path.insert(0, str(BACKEND_ROOT))
diff --git a/backend/tests/test_auth.py b/backend/tests/test_auth.py
index 9eb500f4f..3b6f93045 100644
--- a/backend/tests/test_auth.py
+++ b/backend/tests/test_auth.py
@@ -182,7 +182,7 @@ async def test_get_me_returns_user():
 
     with patch("app.api.auth.UserOut") as MockUserOut:
         MockUserOut.model_validate.return_value = {"id": str(user.id), "email": user.email}
-        result = await auth_api.get_me(current_user=user)
+        await auth_api.get_me(current_user=user)
     MockUserOut.model_validate.assert_called_once_with(user)
 
 
diff --git a/backend/tests/test_chat_session_service.py b/backend/tests/test_chat_session_service.py
new file mode 100644
index 000000000..4eeaf1aff
--- /dev/null
+++ b/backend/tests/test_chat_session_service.py
@@ -0,0 +1,54 @@
+import uuid
+from types import SimpleNamespace
+
+import pytest
+
+from app.services import chat_session_service
+
+
+class DummyResult:
+    def __init__(self, value=None):
+        self._value = value
+
+    def scalar_one_or_none(self):
+        return self._value
+
+
+class RecordingDB:
+    def __init__(self, responses=None):
+        self.responses = list(responses or [])
+        self.statements = []
+        self.flushed = False
+
+    async def execute(self, statement):
+        self.statements.append(str(statement))
+        return self.responses.pop(0) if self.responses else DummyResult()
+
+    async def flush(self):
+        self.flushed = True
+
+    def add(self, _value):
+        pass
+
+
+@pytest.mark.asyncio
+async def test_get_primary_platform_session_uses_sqlalchemy_boolean_predicates():
+    db = RecordingDB([DummyResult(None)])
+
+    await chat_session_service.get_primary_platform_session(db, uuid.uuid4(), uuid.uuid4())
+
+    sql = db.statements[0]
+    assert "chat_sessions.is_group IS false" in sql
+    assert "chat_sessions.is_primary IS true" in sql
+
+
+@pytest.mark.asyncio
+async def test_ensure_primary_platform_session_promotes_existing_session():
+    session = SimpleNamespace(is_primary=False)
+    db = RecordingDB([DummyResult(None), DummyResult(session)])
+
+    result = await chat_session_service.ensure_primary_platform_session(db, uuid.uuid4(), uuid.uuid4())
+
+    assert result is session
+    assert session.is_primary is True
+    assert db.flushed is True
diff --git a/backend/tests/test_enterprise_tenant_quotas.py b/backend/tests/test_enterprise_tenant_quotas.py
new file mode 100644
index 000000000..1a4119e1e
--- /dev/null
+++ b/backend/tests/test_enterprise_tenant_quotas.py
@@ -0,0 +1,117 @@
+import uuid
+from types import SimpleNamespace
+from unittest.mock import AsyncMock
+
+import pytest
+from fastapi import HTTPException
+
+from app.api import enterprise as enterprise_api
+
+
+class DummyResult:
+    def __init__(self, values=None):
+        self._values = list(values or [])
+
+    def scalar_one_or_none(self):
+        return self._values[0] if self._values else None
+
+
+class RecordingDB:
+    def __init__(self, responses=None):
+        self.responses = list(responses or [])
+        self.committed = False
+
+    async def execute(self, _statement):
+        return self.responses.pop(0) if self.responses else DummyResult()
+
+    async def commit(self):
+        self.committed = True
+
+
+def _tenant(tenant_id: uuid.UUID, utility_model_id: uuid.UUID | None = None):
+    return SimpleNamespace(
+        id=tenant_id,
+        default_message_limit=50,
+        default_message_period="permanent",
+        default_max_agents=2,
+        default_agent_ttl_hours=48,
+        default_max_llm_calls_per_day=100,
+        min_heartbeat_interval_minutes=120,
+        default_max_triggers=20,
+        min_poll_interval_floor=5,
+        max_webhook_rate_ceiling=5,
+        utility_model_id=utility_model_id,
+    )
+
+
+def _model(model_id: uuid.UUID, tenant_id: uuid.UUID, enabled: bool = True):
+    return SimpleNamespace(id=model_id, tenant_id=tenant_id, enabled=enabled)
+
+
+@pytest.mark.asyncio
+async def test_get_tenant_quotas_platform_admin_can_read_selected_tenant():
+    selected_tenant_id = uuid.uuid4()
+    tenant = _tenant(selected_tenant_id)
+    current_user = SimpleNamespace(role="platform_admin", tenant_id=uuid.uuid4(), identity=None)
+    db = RecordingDB([DummyResult([tenant])])
+
+    result = await enterprise_api.get_tenant_quotas(
+        tenant_id=str(selected_tenant_id),
+        current_user=current_user,
+        db=db,
+    )
+
+    assert result["default_max_agents"] == 2
+
+
+@pytest.mark.asyncio
+async def test_get_tenant_quotas_org_admin_cannot_read_other_tenant():
+    current_user = SimpleNamespace(role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    db = RecordingDB()
+
+    with pytest.raises(HTTPException) as exc:
+        await enterprise_api.get_tenant_quotas(
+            tenant_id=str(uuid.uuid4()),
+            current_user=current_user,
+            db=db,
+        )
+
+    assert exc.value.status_code == 403
+
+
+@pytest.mark.asyncio
+async def test_update_tenant_quotas_platform_admin_can_set_selected_tenant_utility_model(monkeypatch):
+    selected_tenant_id = uuid.uuid4()
+    utility_model_id = uuid.uuid4()
+    tenant = _tenant(selected_tenant_id)
+    model = _model(utility_model_id, selected_tenant_id)
+    current_user = SimpleNamespace(role="platform_admin", tenant_id=uuid.uuid4(), identity=None)
+    db = RecordingDB([DummyResult([tenant]), DummyResult([model])])
+    monkeypatch.setattr(enterprise_api, "enforce_heartbeat_floor", AsyncMock(return_value=0), raising=False)
+
+    result = await enterprise_api.update_tenant_quotas(
+        enterprise_api.TenantQuotaUpdate(utility_model_id=str(utility_model_id)),
+        tenant_id=str(selected_tenant_id),
+        current_user=current_user,
+        db=db,
+    )
+
+    assert tenant.utility_model_id == utility_model_id
+    assert db.committed is True
+    assert result["message"] == "Tenant quotas updated"
+
+
+@pytest.mark.asyncio
+async def test_update_tenant_quotas_org_admin_cannot_write_other_tenant():
+    current_user = SimpleNamespace(role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    db = RecordingDB()
+
+    with pytest.raises(HTTPException) as exc:
+        await enterprise_api.update_tenant_quotas(
+            enterprise_api.TenantQuotaUpdate(default_max_agents=5),
+            tenant_id=str(uuid.uuid4()),
+            current_user=current_user,
+            db=db,
+        )
+
+    assert exc.value.status_code == 403
diff --git a/backend/tests/test_files_api.py b/backend/tests/test_files_api.py
index 00568243a..8da10eccb 100644
--- a/backend/tests/test_files_api.py
+++ b/backend/tests/test_files_api.py
@@ -1,84 +1,405 @@
+import io
 import uuid
+import zipfile
+from types import SimpleNamespace
+from unittest.mock import AsyncMock
 
 import pytest
 from fastapi import HTTPException
+from starlette.datastructures import UploadFile
 
 from app.api import files as files_api
-from app.models.agent import Agent
-from app.models.user import User
-
-
-def make_user(**overrides):
-    values = {
-        "id": uuid.uuid4(),
-        "display_name": "Alice",
-        "role": "member",
-        "tenant_id": uuid.uuid4(),
-        "is_active": True,
-    }
-    values.update(overrides)
-    return User(**values)
-
-
-def make_agent(creator_id: uuid.UUID, **overrides):
-    values = {
-        "id": uuid.uuid4(),
-        "name": "Ops Bot",
-        "role_description": "assistant",
-        "creator_id": creator_id,
-        "status": "idle",
-        "agent_type": "native",
-    }
-    values.update(overrides)
-    return Agent(**values)
+from app.services import skill_map
+
+
+def _zip_upload(entries: dict[str, bytes], filename: str = "skills.zip") -> UploadFile:
+    buffer = io.BytesIO()
+    with zipfile.ZipFile(buffer, "w", zipfile.ZIP_DEFLATED) as zf:
+        for path, content in entries.items():
+            zf.writestr(path, content)
+    buffer.seek(0)
+    return UploadFile(filename=filename, file=buffer)
 
 
 @pytest.mark.asyncio
-async def test_use_access_cannot_delete_agent_workspace_file(monkeypatch, tmp_path):
-    user = make_user()
-    agent = make_agent(uuid.uuid4(), tenant_id=user.tenant_id)
-    workspace_file = tmp_path / str(agent.id) / "workspace" / "important.md"
-    workspace_file.parent.mkdir(parents=True)
-    workspace_file.write_text("do not delete", encoding="utf-8")
+async def test_preview_zip_reports_root_folder_and_file_count(monkeypatch):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    upload = _zip_upload({
+        "starter-skill/SKILL.md": b"# Starter\n",
+        "starter-skill/scripts/run.py": b"print('ok')\n",
+    })
 
-    async def fake_check_agent_access(_db, _current_user, _agent_id):
-        return agent, "use"
+    result = await files_api.preview_zip(
+        agent_id,
+        upload,
+        current_user=current_user,
+        db=object(),
+    )
 
+    assert result["root_folder"] == "starter-skill"
+    assert result["total"] == 2
+    assert "starter-skill/SKILL.md" in result["files"]
+
+
+@pytest.mark.asyncio
+async def test_extract_zip_strips_archive_root_and_writes_under_skills(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
     monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
-    monkeypatch.setattr(files_api, "check_agent_access", fake_check_agent_access)
+    monkeypatch.setattr(skill_map, "invalidate_cache", lambda _agent_id: None)
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    upload = _zip_upload({
+        "starter-skill/SKILL.md": b"# Starter\n",
+        "starter-skill/examples/demo.md": b"demo\n",
+    })
+
+    result = await files_api.extract_zip(
+        agent_id,
+        upload,
+        target_path="imports",
+        root_name="",
+        current_user=current_user,
+        db=object(),
+    )
+
+    skill_md = tmp_path / str(agent_id) / "skills" / "imports" / "SKILL.md"
+    demo_md = tmp_path / str(agent_id) / "skills" / "imports" / "examples" / "demo.md"
+    assert result["extracted"] == 2
+    assert "imports/SKILL.md" in result["files"]
+    assert skill_md.read_text() == "# Starter\n"
+    assert demo_md.read_text() == "demo\n"
+
+
+@pytest.mark.asyncio
+async def test_extract_zip_rejects_invalid_root_name(monkeypatch):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    upload = _zip_upload({"starter-skill/SKILL.md": b"# Starter\n"})
 
     with pytest.raises(HTTPException) as exc:
-        await files_api.delete_file(
-            agent_id=agent.id,
-            path="workspace/important.md",
-            current_user=user,
+        await files_api.extract_zip(
+            agent_id,
+            upload,
+            target_path="",
+            root_name="../bad",
+            current_user=current_user,
+            db=object(),
+        )
+
+    assert exc.value.status_code == 400
+
+
+@pytest.mark.asyncio
+async def test_extract_zip_wraps_flat_archive_under_custom_root_name(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+    monkeypatch.setattr(skill_map, "invalidate_cache", lambda _agent_id: None)
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    upload = _zip_upload({
+        "SKILL.md": b"# Flat Skill\n",
+        "README.md": b"hello\n",
+    })
+
+    result = await files_api.extract_zip(
+        agent_id,
+        upload,
+        target_path="imports",
+        root_name="custom-pack",
+        current_user=current_user,
+        db=object(),
+    )
+
+    skill_md = tmp_path / str(agent_id) / "skills" / "imports" / "custom-pack" / "SKILL.md"
+    readme_md = tmp_path / str(agent_id) / "skills" / "imports" / "custom-pack" / "README.md"
+    assert result["extracted"] == 2
+    assert "imports/custom-pack/SKILL.md" in result["files"]
+    assert "imports/custom-pack/README.md" in result["files"]
+    assert skill_md.read_text() == "# Flat Skill\n"
+    assert readme_md.read_text() == "hello\n"
+
+
+@pytest.mark.asyncio
+async def test_extract_zip_wraps_mixed_archive_under_custom_root_name(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+    monkeypatch.setattr(skill_map, "invalidate_cache", lambda _agent_id: None)
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    upload = _zip_upload({
+        "root-skill/SKILL.md": b"# Rooted\n",
+        "shared/util.py": b"print('util')\n",
+        "notes.md": b"mixed\n",
+    })
+
+    result = await files_api.extract_zip(
+        agent_id,
+        upload,
+        target_path="imports",
+        root_name="bundle",
+        current_user=current_user,
+        db=object(),
+    )
+
+    rooted = tmp_path / str(agent_id) / "skills" / "imports" / "bundle" / "root-skill" / "SKILL.md"
+    shared = tmp_path / str(agent_id) / "skills" / "imports" / "bundle" / "shared" / "util.py"
+    notes = tmp_path / str(agent_id) / "skills" / "imports" / "bundle" / "notes.md"
+    assert result["extracted"] == 3
+    assert "imports/bundle/root-skill/SKILL.md" in result["files"]
+    assert "imports/bundle/shared/util.py" in result["files"]
+    assert "imports/bundle/notes.md" in result["files"]
+    assert rooted.read_text() == "# Rooted\n"
+    assert shared.read_text() == "print('util')\n"
+    assert notes.read_text() == "mixed\n"
+
+
+@pytest.mark.asyncio
+async def test_list_files_hides_openclaw_directory(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+
+    agent_id = uuid.uuid4()
+    agent_dir = tmp_path / str(agent_id)
+    (agent_dir / ".openclaw").mkdir(parents=True)
+    (agent_dir / ".openclaw" / "openclaw.json").write_text('{"env":{"OPENAI_API_KEY":"sk-secret"}}', encoding="utf-8")
+    (agent_dir / "workspace").mkdir()
+    (agent_dir / "workspace" / "notes.md").write_text("hello", encoding="utf-8")
+
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="member", tenant_id=None, identity=None)
+
+    items = await files_api.list_files(
+        agent_id,
+        path="",
+        current_user=current_user,
+        db=object(),
+    )
+
+    names = {item.name for item in items}
+    assert ".openclaw" not in names
+    assert "workspace" in names
+
+
+@pytest.mark.asyncio
+async def test_read_file_blocks_openclaw_config(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+
+    agent_id = uuid.uuid4()
+    protected = tmp_path / str(agent_id) / ".openclaw"
+    protected.mkdir(parents=True)
+    (protected / "openclaw.json").write_text("{}", encoding="utf-8")
+
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="member", tenant_id=None, identity=None)
+
+    with pytest.raises(HTTPException) as exc:
+        await files_api.read_file(
+            agent_id,
+            path=".openclaw/openclaw.json",
+            current_user=current_user,
             db=object(),
         )
 
     assert exc.value.status_code == 403
-    assert workspace_file.exists()
 
 
 @pytest.mark.asyncio
-async def test_manage_access_can_delete_agent_workspace_file(monkeypatch, tmp_path):
-    user = make_user()
-    agent = make_agent(user.id, tenant_id=user.tenant_id)
-    workspace_file = tmp_path / str(agent.id) / "workspace" / "obsolete.md"
-    workspace_file.parent.mkdir(parents=True)
-    workspace_file.write_text("delete me", encoding="utf-8")
+async def test_preview_skill_folder_reports_update_diff(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
 
-    async def fake_check_agent_access(_db, _current_user, _agent_id):
-        return agent, "manage"
+    existing_root = tmp_path / str(agent_id) / "skills" / "demo-skill"
+    existing_root.mkdir(parents=True)
+    (existing_root / "SKILL.md").write_text("# Old\n", encoding="utf-8")
+    (existing_root / "stale.txt").write_text("remove me\n", encoding="utf-8")
 
+    upload = _zip_upload({
+        "demo-skill/SKILL.md": b"# New\n",
+        "demo-skill/scripts/run.py": b"print('ok')\n",
+    })
+
+    result = await files_api.preview_skill_folder_upload(
+        agent_id,
+        upload,
+        target_folder="demo-skill",
+        current_user=current_user,
+        db=object(),
+    )
+
+    assert result["mode"] == "update"
+    assert result["changed_count"] == 1
+    assert result["added_count"] == 1
+    assert result["deleted_count"] == 1
+    assert result["deleted_paths"] == ["stale.txt"]
+
+
+@pytest.mark.asyncio
+async def test_apply_skill_folder_exact_sync_removes_stale_files(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+    monkeypatch.setattr(skill_map, "invalidate_cache", lambda _agent_id: None)
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+
+    existing_root = tmp_path / str(agent_id) / "skills" / "demo-skill"
+    existing_root.mkdir(parents=True)
+    (existing_root / "SKILL.md").write_text("# Old\n", encoding="utf-8")
+    (existing_root / "stale.txt").write_text("remove me\n", encoding="utf-8")
+
+    upload = _zip_upload({
+        "demo-skill/SKILL.md": b"# New\n",
+        "demo-skill/scripts/run.py": b"print('ok')\n",
+    })
+
+    preview = await files_api.preview_skill_folder_upload(
+        agent_id,
+        upload,
+        target_folder="demo-skill",
+        current_user=current_user,
+        db=object(),
+    )
+
+    upload = _zip_upload({
+        "demo-skill/SKILL.md": b"# New\n",
+        "demo-skill/scripts/run.py": b"print('ok')\n",
+    })
+    result = await files_api.apply_skill_folder_upload(
+        agent_id,
+        upload,
+        target_folder="demo-skill",
+        replace_confirmed=True,
+        expected_digest=preview["digest"],
+        expected_target_state_digest=preview["target_state_digest"],
+        current_user=current_user,
+        db=object(),
+    )
+
+    assert result["mode"] == "update"
+    assert (existing_root / "SKILL.md").read_text() == "# New\n"
+    assert (existing_root / "scripts" / "run.py").read_text() == "print('ok')\n"
+    assert not (existing_root / "stale.txt").exists()
+
+
+@pytest.mark.asyncio
+async def test_preview_skill_folder_rejects_missing_skill_md(monkeypatch):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    upload = _zip_upload({"demo-skill/readme.md": b"oops\n"})
+
+    with pytest.raises(HTTPException) as exc:
+        await files_api.preview_skill_folder_upload(
+            agent_id,
+            upload,
+            target_folder="demo-skill",
+            current_user=current_user,
+            db=object(),
+        )
+
+    assert exc.value.status_code == 400
+
+
+@pytest.mark.asyncio
+async def test_apply_skill_folder_requires_confirmation_for_existing_target(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    skill_root = tmp_path / str(agent_id) / "skills" / "demo-skill"
+    skill_root.mkdir(parents=True)
+    (skill_root / "SKILL.md").write_text("# Old\n", encoding="utf-8")
+
+    upload = _zip_upload({"demo-skill/SKILL.md": b"# New\n"})
+    preview = await files_api.preview_skill_folder_upload(
+        agent_id, upload, target_folder="demo-skill", current_user=current_user, db=object()
+    )
+    upload = _zip_upload({"demo-skill/SKILL.md": b"# New\n"})
+
+    with pytest.raises(HTTPException) as exc:
+        await files_api.apply_skill_folder_upload(
+            agent_id,
+            upload,
+            target_folder="demo-skill",
+            replace_confirmed=False,
+            expected_digest=preview["digest"],
+            current_user=current_user,
+            db=object(),
+        )
+
+    assert exc.value.status_code == 409
+
+
+@pytest.mark.asyncio
+async def test_empty_existing_target_folder_is_treated_as_update_and_requires_confirmation(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
     monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
-    monkeypatch.setattr(files_api, "check_agent_access", fake_check_agent_access)
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+    skill_root = tmp_path / str(agent_id) / "skills" / "demo-skill"
+    skill_root.mkdir(parents=True)
+
+    upload = _zip_upload({"demo-skill/SKILL.md": b"# New\n"})
+    preview = await files_api.preview_skill_folder_upload(
+        agent_id, upload, target_folder="demo-skill", current_user=current_user, db=object()
+    )
 
-    result = await files_api.delete_file(
-        agent_id=agent.id,
-        path="workspace/obsolete.md",
-        current_user=user,
+    assert preview["mode"] == "update"
+
+    upload = _zip_upload({"demo-skill/SKILL.md": b"# New\n"})
+    with pytest.raises(HTTPException) as exc:
+        await files_api.apply_skill_folder_upload(
+            agent_id,
+            upload,
+            target_folder="demo-skill",
+            replace_confirmed=False,
+            expected_digest=preview["digest"],
+            current_user=current_user,
+            db=object(),
+        )
+
+    assert exc.value.status_code == 409
+
+
+@pytest.mark.asyncio
+async def test_apply_skill_folder_rejects_target_state_changes_after_preview(monkeypatch, tmp_path):
+    monkeypatch.setattr(files_api, "check_agent_access", AsyncMock())
+    monkeypatch.setattr(files_api.settings, "AGENT_DATA_DIR", str(tmp_path))
+    monkeypatch.setattr(skill_map, "invalidate_cache", lambda _agent_id: None)
+    agent_id = uuid.uuid4()
+    current_user = SimpleNamespace(id=uuid.uuid4(), role="org_admin", tenant_id=uuid.uuid4(), identity=None)
+
+    existing_root = tmp_path / str(agent_id) / "skills" / "demo-skill"
+    existing_root.mkdir(parents=True)
+    (existing_root / "SKILL.md").write_text("# Old\n", encoding="utf-8")
+
+    upload = _zip_upload({"demo-skill/SKILL.md": b"# New\n"})
+    preview = await files_api.preview_skill_folder_upload(
+        agent_id,
+        upload,
+        target_folder="demo-skill",
+        current_user=current_user,
         db=object(),
     )
 
-    assert result == {"status": "ok", "path": "workspace/obsolete.md"}
-    assert not workspace_file.exists()
+    (existing_root / "late.txt").write_text("appeared later\n", encoding="utf-8")
+
+    upload = _zip_upload({"demo-skill/SKILL.md": b"# New\n"})
+    with pytest.raises(HTTPException) as exc:
+        await files_api.apply_skill_folder_upload(
+            agent_id,
+            upload,
+            target_folder="demo-skill",
+            replace_confirmed=True,
+            expected_digest=preview["digest"],
+            expected_target_state_digest=preview["target_state_digest"],
+            current_user=current_user,
+            db=object(),
+        )
+
+    assert exc.value.status_code == 409
+    assert (existing_root / "late.txt").exists()
+    assert (existing_root / "SKILL.md").read_text() == "# Old\n"
diff --git a/backend/tests/test_legacy_schema_compat_migration.py b/backend/tests/test_legacy_schema_compat_migration.py
new file mode 100644
index 000000000..7d8d13f09
--- /dev/null
+++ b/backend/tests/test_legacy_schema_compat_migration.py
@@ -0,0 +1,50 @@
+from pathlib import Path
+
+
+def test_workspace_deployment_head_carries_legacy_schema_compatibility_guards():
+    repo_root = Path(__file__).resolve().parents[1]
+    migration_text = (
+        repo_root / "alembic" / "versions" / "add_workspace_deployment_tables.py"
+    ).read_text(encoding="utf-8")
+
+    expected_snippets = [
+        "ALTER TABLE workspace_projects ADD COLUMN IF NOT EXISTS tenant_id",
+        "ALTER TABLE workspace_projects ADD COLUMN IF NOT EXISTS dockerfile_path",
+        "ALTER TABLE agent_triggers ADD COLUMN IF NOT EXISTS is_system",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_read_tokens_today",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_read_tokens_month",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_read_tokens_total",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_creation_tokens_today",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_creation_tokens_month",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS cache_creation_tokens_total",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS is_system",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS access_mode",
+        "ALTER TABLE agents ADD COLUMN IF NOT EXISTS company_access_level",
+        "ALTER TABLE users ADD COLUMN IF NOT EXISTS identity_id",
+        "ALTER TABLE users ADD COLUMN IF NOT EXISTS registration_source",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS country_region",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS sso_enabled",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS sso_domain",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS a2a_async_enabled",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS default_model_id",
+        "ALTER TABLE tenants ADD COLUMN IF NOT EXISTS utility_model_id",
+        "ALTER TABLE tools ADD COLUMN IF NOT EXISTS source",
+        "ALTER TABLE agent_templates ADD COLUMN IF NOT EXISTS default_mcp_servers",
+        "ALTER TABLE agent_templates ADD COLUMN IF NOT EXISTS capability_bullets",
+        "ALTER TABLE agent_templates ADD COLUMN IF NOT EXISTS bootstrap_content",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS open_id",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS unionid",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS external_id",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS provider_id",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS user_id",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS name_translit_full",
+        "ALTER TABLE org_members ADD COLUMN IF NOT EXISTS name_translit_initial",
+        "ALTER TABLE agent_agent_relationships ADD COLUMN IF NOT EXISTS updated_at",
+        "ALTER TABLE agent_agent_relationships ADD COLUMN IF NOT EXISTS created_by_user_id",
+        "ALTER TABLE agent_agent_relationships ADD COLUMN IF NOT EXISTS updated_by_user_id",
+        'for value in ("wechat", "whatsapp", "agentbay")',
+        "ALTER TYPE channel_type_enum ADD VALUE IF NOT EXISTS",
+    ]
+
+    missing = [snippet for snippet in expected_snippets if snippet not in migration_text]
+    assert missing == []
diff --git a/backend/tests/test_main_workspace_wiring.py b/backend/tests/test_main_workspace_wiring.py
new file mode 100644
index 000000000..3de86161b
--- /dev/null
+++ b/backend/tests/test_main_workspace_wiring.py
@@ -0,0 +1,12 @@
+import importlib
+
+
+def test_app_main_imports_and_registers_workspace_routes():
+    main = importlib.import_module("app.main")
+
+    paths = {route.path for route in main.app.routes}
+
+    assert "/api/workspace/projects" in paths
+    assert "/api/workspace/projects/{slug}/approve" in paths
+    assert "/api/workspace/projects/{slug}/reject" in paths
+    assert "/api/workspace/projects/{slug}/report-bug" in paths
diff --git a/backend/tests/test_notification_migration_regression.py b/backend/tests/test_notification_migration_regression.py
new file mode 100644
index 000000000..e25fdc861
--- /dev/null
+++ b/backend/tests/test_notification_migration_regression.py
@@ -0,0 +1,19 @@
+from pathlib import Path
+
+
+def test_notifications_table_has_forward_migration():
+    repo_root = Path(__file__).resolve().parents[2]
+    versions_dir = repo_root / "backend" / "alembic" / "versions"
+    create_markers = (
+        'create_table("notifications"',
+        "create_table('notifications'",
+        "CREATE TABLE notifications",
+        "CREATE TABLE IF NOT EXISTS notifications",
+    )
+
+    has_creator = any(
+        any(marker in path.read_text(encoding="utf-8") for marker in create_markers)
+        for path in versions_dir.glob("*.py")
+    )
+
+    assert has_creator, "Expected an Alembic migration to create notifications for legacy installs"
diff --git a/backend/tests/test_password_reset_and_notifications.py b/backend/tests/test_password_reset_and_notifications.py
index 03ddec433..755486455 100644
--- a/backend/tests/test_password_reset_and_notifications.py
+++ b/backend/tests/test_password_reset_and_notifications.py
@@ -115,7 +115,6 @@ async def test_create_password_reset_token_invalidates_older_tokens(monkeypatch)
     async def fake_get_redis(): return mock_redis
     monkeypatch.setattr(password_reset_service, "get_redis", fake_get_redis)
 
-    db = RecordingDB()
     user_id = uuid.uuid4()
 
     raw_token, expires_at = await password_reset_service.create_password_reset_token(user_id)
@@ -158,7 +157,6 @@ async def test_consume_password_reset_token_works_correctly(monkeypatch):
     async def fake_get_redis(): return mock_redis
     monkeypatch.setattr(password_reset_service, "get_redis", fake_get_redis)
 
-    db = RecordingDB()
     result = await password_reset_service.consume_password_reset_token(raw_token)
 
     assert result is not None
diff --git a/backend/tests/test_review_regressions.py b/backend/tests/test_review_regressions.py
new file mode 100644
index 000000000..5daab9fe1
--- /dev/null
+++ b/backend/tests/test_review_regressions.py
@@ -0,0 +1,169 @@
+import uuid
+from datetime import UTC, datetime
+from pathlib import Path
+from types import SimpleNamespace
+
+import pytest
+import yaml
+
+from app.api import websocket as websocket_api
+from app.services.agent_manager import AgentManager
+
+
+class DummyResult:
+    def __init__(self, values=None):
+        self._values = list(values or [])
+
+    def scalar_one_or_none(self):
+        return self._values[0] if self._values else None
+
+    def scalars(self):
+        return self
+
+    def all(self):
+        return list(self._values)
+
+
+class RecordingDB:
+    def __init__(self, responses=None):
+        self.responses = list(responses or [])
+
+    async def execute(self, _statement, _params=None):
+        if not self.responses:
+            raise AssertionError("unexpected execute() call")
+        return self.responses.pop(0)
+
+
+class DummyContainer:
+    id = "container-123"
+
+
+class DummyContainers:
+    def __init__(self):
+        self.calls = []
+
+    def run(self, *args, **kwargs):
+        self.calls.append((args, kwargs))
+        return DummyContainer()
+
+
+class DummyDockerClient:
+    def __init__(self):
+        self.containers = DummyContainers()
+
+
+@pytest.mark.asyncio
+async def test_openclaw_config_does_not_persist_model_api_key(monkeypatch, tmp_path):
+    monkeypatch.setattr("app.services.agent_manager.settings.AGENT_DATA_DIR", str(tmp_path))
+    monkeypatch.setattr("app.services.agent_manager.get_model_api_key", lambda _model: "sk-secret")
+
+    manager = AgentManager()
+    manager.docker_client = DummyDockerClient()
+
+    agent = SimpleNamespace(
+        id=uuid.uuid4(),
+        name="Review Bot",
+        primary_model_id=uuid.uuid4(),
+        container_id=None,
+        container_port=None,
+        status="idle",
+        last_active_at=None,
+    )
+    model = SimpleNamespace(provider="openai", model="gpt-4.1")
+    db = RecordingDB([DummyResult([model])])
+
+    await manager.start_container(db, agent)
+
+    config_path = tmp_path / str(agent.id) / ".openclaw" / "openclaw.json"
+    config_text = config_path.read_text(encoding="utf-8")
+    assert "sk-secret" not in config_text
+
+    _, kwargs = manager.docker_client.containers.calls[0]
+    assert kwargs["environment"]["OPENAI_API_KEY"] == "sk-secret"
+    assert kwargs["environment"]["OPENCLAW_GATEWAY_TOKEN"]
+
+
+@pytest.mark.asyncio
+async def test_get_chat_history_preserves_hidden_messages(monkeypatch):
+    now = datetime.now(UTC)
+    hidden = SimpleNamespace(
+        id=uuid.uuid4(),
+        role="user",
+        content="# Loaded skill\nbody",
+        created_at=now,
+        thinking=None,
+        is_hidden=True,
+    )
+    visible = SimpleNamespace(
+        id=uuid.uuid4(),
+        role="assistant",
+        content="Visible reply",
+        created_at=now,
+        thinking=None,
+        is_hidden=False,
+    )
+    db = RecordingDB([DummyResult([hidden, visible])])
+    current_user = SimpleNamespace(id=uuid.uuid4())
+
+    history = await websocket_api.get_chat_history(
+        agent_id=uuid.uuid4(),
+        current_user=current_user,
+        db=db,
+    )
+
+    assert [entry["id"] for entry in history] == [str(hidden.id), str(visible.id)]
+    assert history[0]["is_hidden"] is True
+    assert history[0]["content"] == hidden.content
+
+
+def test_docker_compose_agent_network_matches_defined_network():
+    repo_root = Path(__file__).resolve().parents[2]
+    compose = yaml.safe_load((repo_root / "docker-compose.yml").read_text(encoding="utf-8"))
+
+    backend_network = compose["services"]["backend"]["environment"]["DOCKER_NETWORK"]
+    defined_network = compose["networks"]["default"]["name"]
+
+    assert backend_network == defined_network
+
+
+def test_helm_secrets_template_renders_required_keys():
+    repo_root = Path(__file__).resolve().parents[2]
+    template = (repo_root / "helm" / "clawith" / "templates" / "secrets.yaml").read_text(encoding="utf-8")
+
+    assert "kind: Secret" in template
+    assert "secret-key" in template
+    assert "jwt-secret-key" in template
+
+
+def test_restart_script_keeps_default_postgres_port_and_fails_migrations():
+    repo_root = Path(__file__).resolve().parents[2]
+    script = (repo_root / "restart.sh").read_text(encoding="utf-8")
+
+    assert 'PG_PORT="$PG_HOST"' not in script
+    assert 'if [ "$PG_PORT" = "$PG_HOST" ]; then' in script
+    assert ".venv/bin/alembic upgrade head 2>/dev/null || true" not in script
+
+
+def test_entrypoint_fails_fast_on_migration_error():
+    repo_root = Path(__file__).resolve().parents[2]
+    script = (repo_root / "backend" / "entrypoint.sh").read_text(encoding="utf-8")
+
+    assert "Continuing startup despite migration failure" not in script
+    assert "exit $ALEMBIC_EXIT" in script
+
+
+def test_backend_startup_does_not_run_metadata_create_all():
+    repo_root = Path(__file__).resolve().parents[2]
+    main_text = (repo_root / "backend" / "app" / "main.py").read_text(encoding="utf-8")
+
+    assert "run_sync(Base.metadata.create_all)" not in main_text
+
+
+def test_onboarding_migration_skips_existing_table_creation():
+    repo_root = Path(__file__).resolve().parents[2]
+    migration_text = (
+        repo_root / "backend" / "alembic" / "versions" / "add_user_tenant_onboarding.py"
+    ).read_text(encoding="utf-8")
+
+    assert "has_table" in migration_text
+
diff --git a/backend/tests/test_schema_bootstrap_regressions.py b/backend/tests/test_schema_bootstrap_regressions.py
new file mode 100644
index 000000000..e7142c7a9
--- /dev/null
+++ b/backend/tests/test_schema_bootstrap_regressions.py
@@ -0,0 +1,41 @@
+import ast
+from pathlib import Path
+
+
+def _imported_model_modules(source_text: str) -> set[str]:
+    tree = ast.parse(source_text)
+    imported: set[str] = set()
+    for node in ast.walk(tree):
+        if isinstance(node, ast.ImportFrom) and node.module and node.module.startswith("app.models."):
+            imported.add(node.module.removeprefix("app.models.").split(".", 1)[0])
+        elif isinstance(node, ast.Import):
+            for alias in node.names:
+                if alias.name.startswith("app.models."):
+                    imported.add(alias.name.removeprefix("app.models.").split(".", 1)[0])
+    return imported
+
+
+def test_alembic_env_imports_all_model_modules_for_initial_schema():
+    repo_root = Path(__file__).resolve().parents[1]
+    env_text = (repo_root / "alembic" / "env.py").read_text(encoding="utf-8")
+    model_modules = {
+        path.stem
+        for path in (repo_root / "app" / "models").glob("*.py")
+        if path.stem != "__init__"
+    }
+
+    missing = sorted(model_modules - _imported_model_modules(env_text))
+    assert missing == []
+
+
+def test_bootstrap_db_imports_all_model_modules_before_create_all():
+    repo_root = Path(__file__).resolve().parents[1]
+    bootstrap_text = (repo_root / "app" / "scripts" / "bootstrap_db.py").read_text(encoding="utf-8")
+    model_modules = {
+        path.stem
+        for path in (repo_root / "app" / "models").glob("*.py")
+        if path.stem != "__init__"
+    }
+
+    missing = sorted(model_modules - _imported_model_modules(bootstrap_text))
+    assert missing == []
diff --git a/backend/tests/test_skill_archive_import.py b/backend/tests/test_skill_archive_import.py
new file mode 100644
index 000000000..26572698e
--- /dev/null
+++ b/backend/tests/test_skill_archive_import.py
@@ -0,0 +1,96 @@
+import io
+import zipfile
+
+import pytest
+from fastapi import HTTPException
+
+from app.services.skill_archive_import import inspect_skill_archive, diff_skill_manifests
+
+
+def _zip_bytes(entries: dict[str, bytes]) -> bytes:
+    buffer = io.BytesIO()
+    with zipfile.ZipFile(buffer, "w", zipfile.ZIP_DEFLATED) as zf:
+        for path, content in entries.items():
+            zf.writestr(path, content)
+    return buffer.getvalue()
+
+
+def test_inspect_skill_archive_requires_root_skill_md():
+    data = _zip_bytes({"demo/readme.md": b"missing root skill"})
+
+    with pytest.raises(HTTPException) as exc:
+        inspect_skill_archive(data, target_folder="demo")
+
+    assert exc.value.status_code == 400
+    assert "SKILL.md" in str(exc.value.detail)
+
+
+def test_diff_skill_manifests_reports_added_changed_deleted():
+    uploaded = {
+        "SKILL.md": "# New\n",
+        "scripts/run.py": "print('new')\n",
+    }
+    existing = {
+        "SKILL.md": "# Old\n",
+        "docs/notes.md": "stale\n",
+    }
+
+    diff = diff_skill_manifests(uploaded, existing)
+
+    assert diff["added"] == ["scripts/run.py"]
+    assert diff["changed"] == ["SKILL.md"]
+    assert diff["deleted"] == ["docs/notes.md"]
+
+
+def test_inspect_skill_archive_strips_single_root_folder():
+    data = _zip_bytes({"demo-skill/SKILL.md": b"# Demo\n", "demo-skill/scripts/run.py": b"print('ok')\n"})
+
+    result = inspect_skill_archive(data, target_folder="demo-skill")
+
+    assert sorted(result["files"].keys()) == ["SKILL.md", "scripts/run.py"]
+
+
+def test_inspect_skill_archive_rejects_parent_traversal():
+    data = _zip_bytes({"demo/../secrets.txt": b"bad", "demo/SKILL.md": b"# Demo\n"})
+
+    with pytest.raises(HTTPException):
+        inspect_skill_archive(data, target_folder="demo")
+
+
+def test_inspect_skill_archive_preserves_root_files_without_common_folder():
+    data = _zip_bytes({"SKILL.md": b"# Demo\n", "scripts/run.py": b"print('ok')\n"})
+
+    result = inspect_skill_archive(data, target_folder="demo")
+
+    assert sorted(result["files"].keys()) == ["SKILL.md", "scripts/run.py"]
+
+
+def test_inspect_skill_archive_rejects_leading_slash_paths():
+    data = _zip_bytes({"/etc/passwd": b"bad", "SKILL.md": b"# Demo\n"})
+
+    with pytest.raises(HTTPException):
+        inspect_skill_archive(data, target_folder="demo")
+
+
+def test_inspect_skill_archive_rejects_windows_style_parent_traversal():
+    data = _zip_bytes({r"..\\evil.txt": b"bad", "SKILL.md": b"# Demo\n"})
+
+    with pytest.raises(HTTPException):
+        inspect_skill_archive(data, target_folder="demo")
+
+
+def test_inspect_skill_archive_rejects_windows_absolute_drive_paths():
+    data = _zip_bytes({"C:/evil.txt": b"bad", "SKILL.md": b"# Demo\n"})
+
+    with pytest.raises(HTTPException):
+        inspect_skill_archive(data, target_folder="demo")
+
+
+def test_inspect_skill_archive_rejects_non_utf8_files():
+    data = _zip_bytes({"SKILL.md": b"# Demo\n", "assets/icon.bin": b"\xff\xfe\xfd"})
+
+    with pytest.raises(HTTPException) as exc:
+        inspect_skill_archive(data, target_folder="demo")
+
+    assert exc.value.status_code == 400
+    assert "UTF-8" in str(exc.value.detail)
diff --git a/backend/tests/test_skill_folder_zip_compat.py b/backend/tests/test_skill_folder_zip_compat.py
new file mode 100644
index 000000000..243c102e2
--- /dev/null
+++ b/backend/tests/test_skill_folder_zip_compat.py
@@ -0,0 +1,10 @@
+from pathlib import Path
+
+
+def test_build_skill_folder_zip_source_marks_filenames_as_utf8():
+    repo_root = Path(__file__).resolve().parents[2]
+    source = (repo_root / "frontend" / "src" / "utils" / "skillFolderZip.ts").read_text()
+
+    assert "const ZIP_UTF8_FLAG = 0x0800;" in source
+    assert "localHeader.setUint16(6, ZIP_UTF8_FLAG, true);" in source
+    assert "centralHeader.setUint16(8, ZIP_UTF8_FLAG, true);" in source
diff --git a/backend/tests/test_skill_map_regression.py b/backend/tests/test_skill_map_regression.py
new file mode 100644
index 000000000..500cc4c24
--- /dev/null
+++ b/backend/tests/test_skill_map_regression.py
@@ -0,0 +1,66 @@
+import sys
+import uuid
+from types import SimpleNamespace
+
+
+class _NoopLogger:
+    def __getattr__(self, _name):
+        return lambda *args, **kwargs: None
+
+
+sys.modules.setdefault("loguru", SimpleNamespace(logger=_NoopLogger()))
+
+from app.services import agent_context, skill_map
+
+
+def _write_skill(root, agent_id: uuid.UUID, folder: str = "qa") -> str:
+    skill_dir = root / str(agent_id) / "skills" / folder
+    skill_dir.mkdir(parents=True, exist_ok=True)
+    content = """---
+name: QA
+description: Regression test skill
+emoji: test
+---
+# QA
+
+Use this for regression testing.
+"""
+    (skill_dir / "SKILL.md").write_text(content, encoding="utf-8")
+    return content
+
+
+def test_get_skill_map_uses_canonical_agent_workspace(tmp_path, monkeypatch):
+    agent_id = uuid.uuid4()
+    _write_skill(tmp_path, agent_id)
+
+    monkeypatch.setattr(agent_context, "PERSISTENT_DATA", tmp_path)
+    skill_map.invalidate_cache(agent_id)
+
+    result = skill_map.get_skill_map(agent_id)
+
+    assert result == {
+        "qa": {
+            "name": "QA",
+            "description": "Regression test skill",
+            "emoji": "test",
+            "file": "qa/SKILL.md",
+        }
+    }
+
+
+def test_get_skill_map_for_api_strips_file_paths(tmp_path, monkeypatch):
+    agent_id = uuid.uuid4()
+    _write_skill(tmp_path, agent_id)
+
+    monkeypatch.setattr(agent_context, "PERSISTENT_DATA", tmp_path)
+    skill_map.invalidate_cache(agent_id)
+
+    result = skill_map.get_skill_map_for_api(agent_id)
+
+    assert result == {
+        "qa": {
+            "name": "QA",
+            "description": "Regression test skill",
+            "emoji": "test",
+        }
+    }
diff --git a/backend/tests/test_skills_api.py b/backend/tests/test_skills_api.py
index 2ca5f8dc4..c7ad8aa54 100644
--- a/backend/tests/test_skills_api.py
+++ b/backend/tests/test_skills_api.py
@@ -1,11 +1,14 @@
+import io
+import zipfile
 import uuid
 from types import SimpleNamespace
 
 import httpx
 import pytest
+from fastapi import HTTPException
 
 from app.api import skills as skills_api
-from app.core.security import get_current_user
+from app.core.security import get_current_admin, get_current_user
 from app.main import app
 
 
@@ -23,13 +26,19 @@ def __iter__(self):
 
 
 class FakeSession:
-    def __init__(self, *, skill=None):
+    def __init__(self, *, skill=None, execute_results=None, commit_error=None):
         self.skill = skill
+        self.execute_results = list(execute_results) if execute_results is not None else None
+        self.commit_error = commit_error
         self.added = []
         self.deleted = []
         self.committed = False
 
     async def execute(self, _query):
+        if self.execute_results is not None:
+            if not self.execute_results:
+                raise AssertionError("unexpected extra execute() call")
+            return FakeScalarResult(self.execute_results.pop(0))
         return FakeScalarResult(self.skill)
 
     def add(self, value):
@@ -42,6 +51,8 @@ async def delete(self, value):
         self.deleted.append(value)
 
     async def commit(self):
+        if self.commit_error is not None:
+            raise self.commit_error
         self.committed = True
 
 
@@ -206,3 +217,241 @@ async def test_browse_write_creates_tenant_skill_without_iterating_lazy_files(
     assert created_file.path == "SKILL.md"
     assert created_file.content == "# test"
     assert session.committed is True
+
+
+class FakeSkillFile:
+    def __init__(self, path: str, content: str):
+        self.path = path
+        self.content = content
+
+
+def _zip_bytes(files: dict[str, bytes]) -> bytes:
+    buffer = io.BytesIO()
+    with zipfile.ZipFile(buffer, "w", zipfile.ZIP_DEFLATED) as archive:
+        for path, content in files.items():
+            archive.writestr(path, content)
+    return buffer.getvalue()
+
+
+@pytest.mark.asyncio
+async def test_preview_folder_upload_reports_existing_registry_diff(monkeypatch, platform_admin_user):
+    existing_skill = SimpleNamespace(
+        id=uuid.uuid4(),
+        folder_name="demo-skill",
+        name="Demo",
+        description="old",
+        icon="📋",
+        category="general",
+        tenant_id=platform_admin_user.tenant_id,
+        files=[FakeSkillFile("SKILL.md", "# Old\n"), FakeSkillFile("stale.txt", "remove\n")],
+    )
+    session = FakeSession(skill=existing_skill)
+    monkeypatch.setattr(skills_api, "async_session", FakeAsyncSessionFactory(session))
+
+    archive = _zip_bytes({"demo-skill/SKILL.md": b"# New\n", "demo-skill/scripts/run.py": b"print(\'ok\')\n"})
+    result = await skills_api.preview_folder_upload_from_archive(
+        archive,
+        target_folder="demo-skill",
+        current_user=platform_admin_user,
+    )
+
+    assert result["mode"] == "update"
+    assert result["deleted_paths"] == ["stale.txt"]
+
+
+@pytest.mark.asyncio
+async def test_apply_folder_upload_replaces_registry_files(monkeypatch, platform_admin_user):
+    existing_skill = SimpleNamespace(
+        id=uuid.uuid4(),
+        folder_name="demo-skill",
+        name="Demo",
+        description="old",
+        icon="📋",
+        category="general",
+        tenant_id=platform_admin_user.tenant_id,
+        files=[FakeSkillFile("SKILL.md", "# Old\n"), FakeSkillFile("stale.txt", "remove\n")],
+    )
+    session = FakeSession(skill=existing_skill)
+    monkeypatch.setattr(skills_api, "async_session", FakeAsyncSessionFactory(session))
+
+    archive = _zip_bytes(
+        {
+            "demo-skill/SKILL.md": (
+                b"---\nname: Uploaded Demo\n"
+                b"description: updated description\n"
+                b"icon: \xf0\x9f\x9a\x80\n"
+                b"category: automation\n"
+                b"---\n\n# New\n"
+            ),
+            "demo-skill/scripts/run.py": b"print(\'ok\')\n",
+        }
+    )
+    preview = await skills_api.preview_folder_upload_from_archive(
+        archive,
+        target_folder="demo-skill",
+        current_user=platform_admin_user,
+    )
+
+    result = await skills_api.apply_folder_upload_from_archive(
+        archive,
+        target_folder="demo-skill",
+        expected_digest=preview["digest"],
+        expected_target_state_digest=preview["target_state_digest"],
+        replace_confirmed=True,
+        current_user=platform_admin_user,
+    )
+
+    assert result["mode"] == "update"
+    assert result["files_written"] == 2
+    assert result["deleted_count"] == 1
+    assert existing_skill.name == "Uploaded Demo"
+    assert existing_skill.description == "updated description"
+    assert existing_skill.icon == "🚀"
+    assert existing_skill.category == "automation"
+    assert session.deleted == existing_skill.files
+    written_files = [value for value in session.added if isinstance(value, skills_api.SkillFile)]
+    assert [(value.path, value.content) for value in written_files] == [
+        (
+            "SKILL.md",
+            "---\nname: Uploaded Demo\n"
+            "description: updated description\n"
+            "icon: 🚀\n"
+            "category: automation\n"
+            "---\n\n# New\n",
+        ),
+        ("scripts/run.py", "print(\'ok\')\n"),
+    ]
+    assert all(value.path != "stale.txt" for value in written_files)
+    assert session.committed is True
+
+
+@pytest.mark.asyncio
+async def test_preview_folder_upload_rejects_missing_root_skill_md(monkeypatch, platform_admin_user):
+    session = FakeSession(skill=None)
+    monkeypatch.setattr(skills_api, "async_session", FakeAsyncSessionFactory(session))
+
+    archive = _zip_bytes({"demo-skill/readme.md": b"missing\n"})
+
+    with pytest.raises(HTTPException) as exc:
+        await skills_api.preview_folder_upload_from_archive(
+            archive,
+            target_folder="demo-skill",
+            current_user=platform_admin_user,
+        )
+
+    assert exc.value.status_code == 400
+
+
+@pytest.mark.asyncio
+async def test_preview_folder_upload_rejects_invalid_target_folder(monkeypatch, platform_admin_user):
+    session = FakeSession(skill=None)
+    monkeypatch.setattr(skills_api, "async_session", FakeAsyncSessionFactory(session))
+
+    archive = _zip_bytes({"demo-skill/SKILL.md": b"# Demo\n"})
+
+    with pytest.raises(HTTPException) as exc:
+        await skills_api.preview_folder_upload_from_archive(
+            archive,
+            target_folder="bad/name",
+            current_user=platform_admin_user,
+        )
+
+    assert exc.value.status_code == 400
+    assert "folder" in str(exc.value.detail).lower()
+
+
+@pytest.mark.asyncio
+async def test_preview_folder_upload_rejects_hidden_folder_conflict(monkeypatch, platform_admin_user):
+    hidden_skill = SimpleNamespace(
+        id=uuid.uuid4(),
+        folder_name="demo-skill",
+        name="Hidden Demo",
+        tenant_id=uuid.uuid4(),
+        files=[],
+    )
+    session = FakeSession(execute_results=[None, hidden_skill])
+    monkeypatch.setattr(skills_api, "async_session", FakeAsyncSessionFactory(session))
+
+    archive = _zip_bytes({"demo-skill/SKILL.md": b"# Demo\n"})
+
+    with pytest.raises(HTTPException) as exc:
+        await skills_api.preview_folder_upload_from_archive(
+            archive,
+            target_folder="demo-skill",
+            current_user=platform_admin_user,
+        )
+
+    assert exc.value.status_code == 409
+    assert "folder" in str(exc.value.detail).lower()
+
+
+@pytest.mark.asyncio
+async def test_preview_folder_upload_rejects_uploaded_name_conflict(monkeypatch, platform_admin_user):
+    conflicting_skill = SimpleNamespace(
+        id=uuid.uuid4(),
+        folder_name="other-skill",
+        name="Uploaded Demo",
+        tenant_id=platform_admin_user.tenant_id,
+        files=[],
+    )
+    session = FakeSession(execute_results=[None, None, conflicting_skill])
+    monkeypatch.setattr(skills_api, "async_session", FakeAsyncSessionFactory(session))
+
+    archive = _zip_bytes(
+        {
+            "demo-skill/SKILL.md": (
+                b"---\nname: Uploaded Demo\ndescription: conflict\n---\n\n# Demo\n"
+            ),
+        }
+    )
+
+    with pytest.raises(HTTPException) as exc:
+        await skills_api.preview_folder_upload_from_archive(
+            archive,
+            target_folder="demo-skill",
+            current_user=platform_admin_user,
+        )
+
+    assert exc.value.status_code == 409
+    assert "name" in str(exc.value.detail).lower()
+
+
+@pytest.mark.asyncio
+async def test_preview_folder_upload_rejects_registry_skill_over_size_limit(monkeypatch, platform_admin_user):
+    session = FakeSession(execute_results=[None, None, None])
+    monkeypatch.setattr(skills_api, "async_session", FakeAsyncSessionFactory(session))
+
+    oversized = "a" * (skills_api.MAX_SKILL_SIZE + 1)
+    archive = _zip_bytes({"demo-skill/SKILL.md": oversized.encode("utf-8")})
+
+    with pytest.raises(HTTPException) as exc:
+        await skills_api.preview_folder_upload_from_archive(
+            archive,
+            target_folder="demo-skill",
+            current_user=platform_admin_user,
+        )
+
+    assert exc.value.status_code == 413
+
+
+@pytest.mark.asyncio
+async def test_upload_folder_apply_requires_target_state_digest_field(client, monkeypatch, platform_admin_user):
+    async def _should_not_run(**_kwargs):
+        raise AssertionError("handler should not run when required form field is missing")
+
+    monkeypatch.setattr(skills_api, "apply_folder_upload_from_archive", _should_not_run)
+    app.dependency_overrides[get_current_admin] = lambda: platform_admin_user
+
+    files = {"file": ("demo-skill.zip", _zip_bytes({"demo-skill/SKILL.md": b"# Demo\n"}), "application/zip")}
+    data = {
+        "target_folder": "demo-skill",
+        "expected_digest": "digest",
+        "replace_confirmed": "true",
+    }
+
+    async with await client() as ac:
+        response = await ac.post("/api/skills/upload-folder/apply", data=data, files=files)
+
+    app.dependency_overrides.clear()
+
+    assert response.status_code == 422
diff --git a/backend/tests/test_ss_local_proxy_startup.py b/backend/tests/test_ss_local_proxy_startup.py
new file mode 100644
index 000000000..39a122c5f
--- /dev/null
+++ b/backend/tests/test_ss_local_proxy_startup.py
@@ -0,0 +1,54 @@
+import asyncio
+from pathlib import Path
+import shutil
+
+from app import main
+import pytest
+
+
+def test_load_ss_nodes_from_config_skips_directory(tmp_path: Path):
+    cfg_dir = tmp_path / "ss-nodes.json"
+    cfg_dir.mkdir()
+
+    nodes = main._load_ss_nodes_from_config(str(cfg_dir))
+
+    assert nodes is None
+
+
+def test_load_ss_nodes_from_config_reads_valid_json(tmp_path: Path):
+    cfg_file = tmp_path / "ss-nodes.json"
+    cfg_file.write_text(
+        '[{"server":"1.2.3.4","port":1080,"password":"secret","method":"chacha20-ietf-poly1305","label":"test"}]'
+    )
+
+    nodes = main._load_ss_nodes_from_config(str(cfg_file))
+
+    assert nodes == [
+        {
+            "server": "1.2.3.4",
+            "port": 1080,
+            "password": "secret",
+            "method": "chacha20-ietf-poly1305",
+            "label": "test",
+        }
+    ]
+
+
+@pytest.mark.asyncio
+async def test_start_ss_local_skips_env_fallback_when_invalid_config_exists(
+    tmp_path: Path,
+    monkeypatch: pytest.MonkeyPatch,
+):
+    cfg_dir = tmp_path / "ss-nodes.json"
+    cfg_dir.mkdir()
+
+    async def fail_if_called(*args, **kwargs):
+        raise AssertionError("ss-local should not start when the config path exists but is invalid")
+
+    monkeypatch.setenv("SS_CONFIG_FILE", str(cfg_dir))
+    monkeypatch.setenv("SS_SERVER", "1.2.3.4")
+    monkeypatch.setenv("SS_PASSWORD", "secret")
+    monkeypatch.setattr(shutil, "which", lambda name: "/usr/bin/ss-local" if name == "ss-local" else None)
+    monkeypatch.setattr(asyncio, "create_subprocess_exec", fail_if_called)
+
+    await main._start_ss_local()
diff --git a/backend/tests/test_websocket_retry.py b/backend/tests/test_websocket_retry.py
new file mode 100644
index 000000000..ce52aea96
--- /dev/null
+++ b/backend/tests/test_websocket_retry.py
@@ -0,0 +1,101 @@
+import uuid
+from types import SimpleNamespace
+
+import pytest
+
+from app.api.websocket import (
+    _find_retry_anchor_message,
+    _finalize_onboarding_progress_if_needed,
+)
+
+
+def _msg(role: str, *, hidden: bool = False):
+    return SimpleNamespace(
+        id=uuid.uuid4(),
+        role=role,
+        is_hidden=hidden,
+        content=f"{role}-content",
+    )
+
+
+def test_retry_anchor_defaults_to_latest_visible_user_message():
+    hidden = _msg("user", hidden=True)
+    user = _msg("user")
+    assistant = _msg("assistant")
+
+    anchor = _find_retry_anchor_message([hidden, user, assistant])
+
+    assert anchor is user
+
+
+def test_retry_anchor_uses_preceding_user_for_assistant_message_id():
+    first_user = _msg("user")
+    assistant = _msg("assistant")
+    tool = _msg("tool_call")
+
+    anchor = _find_retry_anchor_message(
+        [first_user, assistant, tool],
+        str(tool.id),
+    )
+
+    assert anchor is first_user
+
+
+def test_retry_anchor_returns_none_for_unknown_message_id():
+    user = _msg("user")
+    assistant = _msg("assistant")
+
+    anchor = _find_retry_anchor_message(
+        [user, assistant],
+        str(uuid.uuid4()),
+    )
+
+    assert anchor is None
+
+
+class _DummyAsyncSession:
+    def __init__(self):
+        self.db = object()
+
+    async def __aenter__(self):
+        return self.db
+
+    async def __aexit__(self, exc_type, exc, tb):
+        return False
+
+
+class _DummyWebSocket:
+    def __init__(self):
+        self.messages = []
+
+    async def send_json(self, payload):
+        self.messages.append(payload)
+
+
+@pytest.mark.asyncio
+async def test_finalize_onboarding_progress_marks_completed_when_no_chunk_fired(monkeypatch):
+    calls = []
+    session = _DummyAsyncSession()
+
+    async def _fake_mark_onboarding_phase(db, agent_id, user_id, phase):
+        calls.append((db, agent_id, user_id, phase))
+
+    monkeypatch.setattr("app.api.websocket.async_session", lambda: session)
+    monkeypatch.setattr("app.services.onboarding.mark_onboarding_phase", _fake_mark_onboarding_phase)
+
+    websocket = _DummyWebSocket()
+    agent_id = uuid.uuid4()
+    user_id = uuid.uuid4()
+
+    marked = await _finalize_onboarding_progress_if_needed(
+        needs_onboarding_mark=True,
+        onboarding_mark_done=False,
+        agent_id=agent_id,
+        user_id=user_id,
+        onboarding_target_phase="greeted",
+        websocket=websocket,
+    )
+
+    assert marked is True
+    assert calls == [(session.db, agent_id, user_id, "greeted")]
+    assert websocket.messages == [{"type": "onboarded", "agent_id": str(agent_id)}]
diff --git a/backend/tests/test_websocket_title_and_edit_helpers.py b/backend/tests/test_websocket_title_and_edit_helpers.py
new file mode 100644
index 000000000..912e4faad
--- /dev/null
+++ b/backend/tests/test_websocket_title_and_edit_helpers.py
@@ -0,0 +1,20 @@
+from app.api.websocket import _rewrite_edited_user_content, _should_generate_session_title
+
+
+def test_should_generate_session_title_only_for_first_real_turn():
+    assert _should_generate_session_title(True, False, False) is True
+    assert _should_generate_session_title(False, False, False) is False
+    assert _should_generate_session_title(True, True, False) is False
+    assert _should_generate_session_title(True, False, True) is False
+
+
+def test_rewrite_edited_user_content_preserves_file_and_image_wrappers():
+    original = "[file:cat.png]\n[image_data:data:image/png;base64,abc123]\nOriginal prompt"
+    rewritten = _rewrite_edited_user_content(original, "New prompt")
+    assert rewritten == "[file:cat.png]\n[image_data:data:image/png;base64,abc123]\nNew prompt"
+
+
+def test_rewrite_edited_user_content_preserves_attachment_banner_lines():
+    original = "[file:notes.txt]\n[Attachment: notes.txt]\nOriginal question"
+    rewritten = _rewrite_edited_user_content(original, "Updated question")
+    assert rewritten == "[file:notes.txt]\n[Attachment: notes.txt]\nUpdated question"
diff --git a/backend/tests/test_workspace_api.py b/backend/tests/test_workspace_api.py
new file mode 100644
index 000000000..30381be16
--- /dev/null
+++ b/backend/tests/test_workspace_api.py
@@ -0,0 +1,92 @@
+import uuid
+from types import SimpleNamespace
+from unittest.mock import AsyncMock
+
+import pytest
+
+from app.api import workspace as workspace_api
+
+
+class DummyResult:
+    def __init__(self, values=None):
+        self._values = list(values or [])
+
+    def scalar_one_or_none(self):
+        return self._values[0] if self._values else None
+
+    def scalars(self):
+        return self
+
+    def all(self):
+        return list(self._values)
+
+
+class RecordingDB:
+    def __init__(self, responses=None):
+        self.responses = list(responses or [])
+        self.statements = []
+
+    async def execute(self, statement):
+        self.statements.append(str(statement))
+        return self.responses.pop(0) if self.responses else DummyResult()
+
+
+@pytest.mark.asyncio
+async def test_list_projects_org_admin_is_tenant_scoped():
+    tenant_id = uuid.uuid4()
+    current_user = SimpleNamespace(role="org_admin", tenant_id=tenant_id, identity=None)
+    db = RecordingDB([DummyResult([])])
+
+    await workspace_api.list_projects(current_user=current_user, db=db)
+
+    assert "workspace_projects.tenant_id =" in db.statements[0]
+
+
+@pytest.mark.asyncio
+async def test_list_projects_platform_admin_is_not_tenant_scoped():
+    current_user = SimpleNamespace(role="platform_admin", tenant_id=uuid.uuid4(), identity=None)
+    db = RecordingDB([DummyResult([])])
+
+    await workspace_api.list_projects(current_user=current_user, db=db)
+
+    assert "workspace_projects.tenant_id =" not in db.statements[0]
+
+
+@pytest.mark.asyncio
+async def test_approve_deploy_passes_tenant_scope_for_org_admin(monkeypatch):
+    tenant_id = uuid.uuid4()
+    current_user = SimpleNamespace(role="org_admin", tenant_id=tenant_id, identity=None)
+    mock_approve = AsyncMock(return_value={"ok": True})
+    monkeypatch.setattr(workspace_api, "approve_container_deploy", mock_approve)
+
+    await workspace_api.approve_deploy(
+        slug="demo",
+        body=workspace_api.ApproveRequest(memory="256m"),
+        current_user=current_user,
+    )
+
+    mock_approve.assert_awaited_once_with(
+        "demo",
+        {"memory": "256m"},
+        tenant_id=tenant_id,
+        include_platform_global=False,
+    )
+
+
+@pytest.mark.asyncio
+async def test_reject_deploy_passes_global_scope_for_platform_admin(monkeypatch):
+    current_user = SimpleNamespace(
+        role="platform_admin",
+        tenant_id=uuid.uuid4(),
+        identity=SimpleNamespace(is_platform_admin=True),
+    )
+    mock_reject = AsyncMock(return_value={"ok": True})
+    monkeypatch.setattr(workspace_api, "reject_container_deploy", mock_reject)
+
+    await workspace_api.reject_deploy(slug="demo", current_user=current_user)
+
+    mock_reject.assert_awaited_once_with(
+        "demo",
+        tenant_id=None,
+        include_platform_global=True,
+    )
diff --git a/backend/tests/test_workspace_tools.py b/backend/tests/test_workspace_tools.py
new file mode 100644
index 000000000..3dfd84b72
--- /dev/null
+++ b/backend/tests/test_workspace_tools.py
@@ -0,0 +1,169 @@
+import uuid
+from pathlib import Path
+from types import SimpleNamespace
+from unittest.mock import AsyncMock
+
+import pytest
+
+from app.services import workspace_tools
+from app.services.workspace_tools import _resolve_project_dockerfile
+
+
+class RecordingSession:
+    def __init__(self, execute_result=None):
+        self.execute_result = execute_result
+        self.added = []
+        self.committed = False
+
+    async def execute(self, _query):
+        return self.execute_result
+
+    def add(self, project):
+        self.added.append(project)
+
+    async def commit(self):
+        self.committed = True
+
+
+class SessionContext:
+    def __init__(self, session: RecordingSession):
+        self.session = session
+
+    async def __aenter__(self):
+        return self.session
+
+    async def __aexit__(self, exc_type, exc, tb):
+        return False
+
+
+class ScalarsResult:
+    def __init__(self, values):
+        self.values = values
+
+    def scalars(self):
+        return self
+
+    def all(self):
+        return self.values
+
+
+def test_resolve_project_dockerfile_prefers_stored_path(tmp_path: Path):
+    agent_ws = tmp_path / "agent"
+    primary = agent_ws / "workspace" / "my-app" / "Dockerfile"
+    stray = agent_ws / "workspace" / "other" / "Dockerfile"
+    primary.parent.mkdir(parents=True, exist_ok=True)
+    stray.parent.mkdir(parents=True, exist_ok=True)
+    primary.write_text("FROM python:3.12\n")
+    stray.write_text("FROM node:20\n")
+
+    project = SimpleNamespace(dockerfile_path="workspace/my-app/Dockerfile")
+
+    resolved = _resolve_project_dockerfile(agent_ws, "demo", project)
+
+    assert resolved == primary
+
+
+def test_resolve_project_dockerfile_rejects_ambiguous_fallback(tmp_path: Path):
+    agent_ws = tmp_path / "agent"
+    first = agent_ws / "workspace" / "demo" / "api" / "Dockerfile"
+    second = agent_ws / "workspace" / "demo" / "worker" / "Dockerfile"
+    first.parent.mkdir(parents=True, exist_ok=True)
+    second.parent.mkdir(parents=True, exist_ok=True)
+    first.write_text("FROM python:3.12\n")
+    second.write_text("FROM node:20\n")
+
+    project = SimpleNamespace(dockerfile_path=None)
+
+    with pytest.raises(ValueError, match="Multiple Dockerfiles found"):
+        _resolve_project_dockerfile(agent_ws, "demo", project)
+
+
+@pytest.mark.asyncio
+async def test_tool_request_build_persists_agent_owned_request(monkeypatch):
+    session = RecordingSession()
+    agent_id = uuid.uuid4()
+    tenant_id = uuid.uuid4()
+    monkeypatch.setattr(workspace_tools, "async_session", lambda: SessionContext(session))
+    monkeypatch.setattr(workspace_tools, "check_slug_available", AsyncMock(return_value=None))
+    monkeypatch.setattr(workspace_tools, "_get_agent_tenant_id", AsyncMock(return_value=tenant_id))
+
+    response = await workspace_tools.tool_request_build(
+        agent_id,
+        {"slug": "demo-app", "name": "Demo App", "description": "Tenant-aware build request"},
+    )
+
+    assert response == (
+        "Build request created!\n"
+        "- Slug: demo-app\n"
+        "- Name: Demo App\n"
+        "- Description: Tenant-aware build request\n"
+        "The Software Engineer agent will pick this up."
+    )
+    assert session.committed is True
+    assert len(session.added) == 1
+    project = session.added[0]
+    assert project.slug == "demo-app"
+    assert project.name == "Demo App"
+    assert project.description == "Tenant-aware build request"
+    assert project.tenant_id == tenant_id
+    assert project.requested_by == agent_id
+    assert project.status == "requested"
+
+
+@pytest.mark.asyncio
+async def test_tool_request_build_human_defaults_requester(monkeypatch):
+    session = RecordingSession()
+    monkeypatch.setattr(workspace_tools, "async_session", lambda: SessionContext(session))
+    monkeypatch.setattr(workspace_tools, "check_slug_available", AsyncMock(return_value=None))
+
+    response = await workspace_tools.tool_request_build_human(
+        {"slug": "demo-app", "name": "Demo App", "description": "Human request", "requester": "   "}
+    )
+
+    assert response == "Build request 'Demo App' created for slug 'demo-app'."
+    assert session.committed is True
+    assert len(session.added) == 1
+    project = session.added[0]
+    assert project.slug == "demo-app"
+    assert project.name == "Demo App"
+    assert project.description == "Human request"
+    assert project.requested_by_human == "Frank"
+    assert project.status == "requested"
+
+
+@pytest.mark.asyncio
+async def test_tool_list_build_requests_formats_human_and_agent_requesters(monkeypatch):
+    agent_id = uuid.uuid4()
+    session = RecordingSession(
+        ScalarsResult(
+            [
+                SimpleNamespace(
+                    slug="human-app",
+                    name="Human App",
+                    description="Requested from dashboard",
+                    requested_by_human="Avery",
+                    requested_by=None,
+                ),
+                SimpleNamespace(
+                    slug="agent-app",
+                    name="Agent App",
+                    description="Requested from agent",
+                    requested_by_human=None,
+                    requested_by=agent_id,
+                ),
+            ]
+        )
+    )
+    monkeypatch.setattr(workspace_tools, "async_session", lambda: SessionContext(session))
+
+    response = await workspace_tools.tool_list_build_requests()
+
+    assert response == (
+        "Pending build requests:\n\n"
+        "- [human-app] Human App\n"
+        "  Requested by: Avery\n"
+        "  Description: Requested from dashboard\n\n"
+        f"- [agent-app] Agent App\n"
+        f"  Requested by: Agent {agent_id}\n"
+        "  Description: Requested from agent\n"
+    )
diff --git a/backend/update_schema.py b/backend/update_schema.py
index 1ccbe08e0..1e7fc2f4a 100644
--- a/backend/update_schema.py
+++ b/backend/update_schema.py
@@ -1,9 +1,10 @@
 import asyncio
-import json
+
 from app.db.session import async_session
-from sqlalchemy import select, update
+from sqlalchemy import select
 from app.models.plugin_tool import PluginTool
 
+
 async def main():
     async with async_session() as db:
         res = await db.execute(select(PluginTool).where(PluginTool.name == 'agentbay_computer_screenshot'))
diff --git a/docker-compose.yml b/docker-compose.yml
index 7c5ae9229..43cb8338b 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -47,7 +47,7 @@ services:
       CORS_ORIGINS: '["*"]'
       FEISHU_APP_ID: ${FEISHU_APP_ID:-}
       FEISHU_APP_SECRET: ${FEISHU_APP_SECRET:-}
-      DOCKER_NETWORK: clawith_yaojin_network
+      DOCKER_NETWORK: clawith_network
       SS_CONFIG_FILE: /data/ss-nodes.json
       # Public base URL for constructing OAuth callback URLs and email links.
       # Required when deployed behind a reverse proxy (e.g. Nginx, Cloudflare).
@@ -60,7 +60,6 @@ services:
       - ./backend/agent_data:/data/agents
       - /var/run/docker.sock:/var/run/docker.sock
       - ./ss-nodes.json:/data/ss-nodes.json:ro
-    privileged: true
     cap_add:
       - SYS_ADMIN
     security_opt:
diff --git a/frontend/.env.example b/frontend/.env.example
new file mode 100644
index 000000000..69202b79b
--- /dev/null
+++ b/frontend/.env.example
@@ -0,0 +1,7 @@
+# Branding values are read at frontend build time.
+# Set these before `npm run build` or before building the frontend Docker image.
+# Changing nginx container runtime env alone will not update the already-built HTML metadata.
+VITE_APP_NAME=Clawith
+VITE_APP_DESCRIPTION=Clawith — 企业数字员工平台
+VITE_APP_LOGO_LIGHT=/logo-black.png
+VITE_APP_LOGO_DARK=/logo-white.png
diff --git a/frontend/index.html b/frontend/index.html
index eba398a27..ab5be89ed 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,8 +5,8 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/png" href="/logo.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="Clawith — 企业数字员工平台" />
-  <title>Clawith</title>
+  <meta name="description" content="__APP_DESCRIPTION__" />
+  <title>__APP_NAME__</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
@@ -17,4 +17,4 @@
   <script type="module" src="/src/main.tsx"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e0020452c..62b4b7a03 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
         "@vitejs/plugin-react": "^4.0.0",
+        "esbuild": "^0.28.0",
         "typescript": "^5.0.0",
         "vite": "^6.0.0"
       }
@@ -320,9 +321,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
-      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
+      "integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
       "cpu": [
         "ppc64"
       ],
@@ -337,9 +338,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
-      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
+      "integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
       "cpu": [
         "arm"
       ],
@@ -354,9 +355,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
-      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
+      "integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
       "cpu": [
         "arm64"
       ],
@@ -371,9 +372,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
-      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
+      "integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
       "cpu": [
         "x64"
       ],
@@ -388,9 +389,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
-      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
+      "integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
       "cpu": [
         "arm64"
       ],
@@ -405,9 +406,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
-      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
+      "integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
       "cpu": [
         "x64"
       ],
@@ -422,9 +423,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
+      "integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
       "cpu": [
         "arm64"
       ],
@@ -439,9 +440,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
-      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
+      "integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
       "cpu": [
         "x64"
       ],
@@ -456,9 +457,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
-      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
+      "integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
       "cpu": [
         "arm"
       ],
@@ -473,9 +474,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
-      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
+      "integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
       "cpu": [
         "arm64"
       ],
@@ -490,9 +491,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
-      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
+      "integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
       "cpu": [
         "ia32"
       ],
@@ -507,9 +508,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
-      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
+      "integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
       "cpu": [
         "loong64"
       ],
@@ -524,9 +525,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
-      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
+      "integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
       "cpu": [
         "mips64el"
       ],
@@ -541,9 +542,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
-      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
+      "integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
       "cpu": [
         "ppc64"
       ],
@@ -558,9 +559,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
-      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
+      "integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
       "cpu": [
         "riscv64"
       ],
@@ -575,9 +576,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
-      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
+      "integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
       "cpu": [
         "s390x"
       ],
@@ -592,9 +593,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
-      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
+      "integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
       "cpu": [
         "x64"
       ],
@@ -609,9 +610,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
+      "integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
       "cpu": [
         "arm64"
       ],
@@ -626,9 +627,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
+      "integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
       "cpu": [
         "x64"
       ],
@@ -643,9 +644,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
-      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
+      "integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
       "cpu": [
         "arm64"
       ],
@@ -660,9 +661,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
-      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
+      "integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
       "cpu": [
         "x64"
       ],
@@ -677,9 +678,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
-      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
+      "integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
       "cpu": [
         "arm64"
       ],
@@ -694,9 +695,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
-      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
+      "integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
       "cpu": [
         "x64"
       ],
@@ -711,9 +712,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
-      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
+      "integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
       "cpu": [
         "arm64"
       ],
@@ -728,9 +729,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
-      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
+      "integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
       "cpu": [
         "ia32"
       ],
@@ -745,9 +746,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
-      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
+      "integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
       "cpu": [
         "x64"
       ],
@@ -1780,9 +1781,9 @@
       ]
     },
     "node_modules/esbuild": {
-      "version": "0.25.12",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
-      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
+      "integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -1793,32 +1794,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.12",
-        "@esbuild/android-arm": "0.25.12",
-        "@esbuild/android-arm64": "0.25.12",
-        "@esbuild/android-x64": "0.25.12",
-        "@esbuild/darwin-arm64": "0.25.12",
-        "@esbuild/darwin-x64": "0.25.12",
-        "@esbuild/freebsd-arm64": "0.25.12",
-        "@esbuild/freebsd-x64": "0.25.12",
-        "@esbuild/linux-arm": "0.25.12",
-        "@esbuild/linux-arm64": "0.25.12",
-        "@esbuild/linux-ia32": "0.25.12",
-        "@esbuild/linux-loong64": "0.25.12",
-        "@esbuild/linux-mips64el": "0.25.12",
-        "@esbuild/linux-ppc64": "0.25.12",
-        "@esbuild/linux-riscv64": "0.25.12",
-        "@esbuild/linux-s390x": "0.25.12",
-        "@esbuild/linux-x64": "0.25.12",
-        "@esbuild/netbsd-arm64": "0.25.12",
-        "@esbuild/netbsd-x64": "0.25.12",
-        "@esbuild/openbsd-arm64": "0.25.12",
-        "@esbuild/openbsd-x64": "0.25.12",
-        "@esbuild/openharmony-arm64": "0.25.12",
-        "@esbuild/sunos-x64": "0.25.12",
-        "@esbuild/win32-arm64": "0.25.12",
-        "@esbuild/win32-ia32": "0.25.12",
-        "@esbuild/win32-x64": "0.25.12"
+        "@esbuild/aix-ppc64": "0.28.0",
+        "@esbuild/android-arm": "0.28.0",
+        "@esbuild/android-arm64": "0.28.0",
+        "@esbuild/android-x64": "0.28.0",
+        "@esbuild/darwin-arm64": "0.28.0",
+        "@esbuild/darwin-x64": "0.28.0",
+        "@esbuild/freebsd-arm64": "0.28.0",
+        "@esbuild/freebsd-x64": "0.28.0",
+        "@esbuild/linux-arm": "0.28.0",
+        "@esbuild/linux-arm64": "0.28.0",
+        "@esbuild/linux-ia32": "0.28.0",
+        "@esbuild/linux-loong64": "0.28.0",
+        "@esbuild/linux-mips64el": "0.28.0",
+        "@esbuild/linux-ppc64": "0.28.0",
+        "@esbuild/linux-riscv64": "0.28.0",
+        "@esbuild/linux-s390x": "0.28.0",
+        "@esbuild/linux-x64": "0.28.0",
+        "@esbuild/netbsd-arm64": "0.28.0",
+        "@esbuild/netbsd-x64": "0.28.0",
+        "@esbuild/openbsd-arm64": "0.28.0",
+        "@esbuild/openbsd-x64": "0.28.0",
+        "@esbuild/openharmony-arm64": "0.28.0",
+        "@esbuild/sunos-x64": "0.28.0",
+        "@esbuild/win32-arm64": "0.28.0",
+        "@esbuild/win32-ia32": "0.28.0",
+        "@esbuild/win32-x64": "0.28.0"
       }
     },
     "node_modules/escalade": {
@@ -2661,6 +2662,490 @@
         }
       }
     },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/vite/node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 8bdc7c42c..60fc71d98 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "test": "node --test tests/*.test.mjs",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -26,6 +27,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "esbuild": "^0.28.0",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"
   }
diff --git a/frontend/src/components/FileBrowser.tsx b/frontend/src/components/FileBrowser.tsx
index d184fa01c..2cf12b433 100644
--- a/frontend/src/components/FileBrowser.tsx
+++ b/frontend/src/components/FileBrowser.tsx
@@ -25,6 +25,8 @@ export interface FileBrowserApi {
     write: (path: string, content: string) => Promise<any>;
     delete: (path: string) => Promise<any>;
     upload?: (file: File, path: string, onProgress?: (pct: number) => void) => Promise<any>;
+    previewZip?: (file: File) => Promise<{ root_folder: string; files: string[]; total: number }>;
+    extractZip?: (file: File, targetPath: string, rootName: string) => Promise<{ extracted: number }>;
     downloadUrl?: (path: string) => string;
 }
 
@@ -38,6 +40,7 @@ export interface FileBrowserProps {
         edit?: boolean;
         delete?: boolean;
         directoryNavigation?: boolean;
+        zipImport?: boolean;
     };
     fileFilter?: string[];
     singleFile?: string;
@@ -45,6 +48,8 @@ export interface FileBrowserProps {
     title?: string;
     readOnly?: boolean;
     onRefresh?: () => void;
+    onPathChange?: (path: string) => void;
+    refreshToken?: number;
 }
 
 // ─── Text file detection ───────────────────────────────
@@ -73,10 +78,12 @@ export default function FileBrowser({
     features = {},
     fileFilter,
     singleFile,
-    uploadAccept = '.pdf,.docx,.xlsx,.pptx,.txt,.md,.csv,.json,.xml,.yaml,.yml,.js,.ts,.py,.html,.css,.sh,.log,.png,.jpg,.jpeg,.gif,.svg,.webp',
+    uploadAccept = '.pdf,.docx,.xlsx,.pptx,.txt,.md,.csv,.json,.xml,.yaml,.yml,.js,.ts,.py,.html,.css,.sh,.log,.png,.jpg,.jpeg,.gif,.svg,.webp,.bmp,.ico',
     title,
     readOnly = false,
     onRefresh,
+    onPathChange,
+    refreshToken,
 }: FileBrowserProps) {
     const { t } = useTranslation();
     const {
@@ -86,10 +93,18 @@ export default function FileBrowser({
         edit = !readOnly,
         delete: canDelete = !readOnly,
         directoryNavigation = false,
+        zipImport = false,
     } = features;
 
     // ─── State ─────────────────────────────────────────
-    const [currentPath, setCurrentPath] = useState(rootPath);
+    const [currentPath, setCurrentPathRaw] = useState(rootPath);
+    const setCurrentPath = useCallback((path: string) => {
+        setCurrentPathRaw(path);
+        onPathChange?.(path);
+    }, [onPathChange]);
+
+    // Fire onPathChange on mount so parent starts in sync
+    useEffect(() => { onPathChange?.(rootPath); }, [rootPath, onPathChange]);
     const [files, setFiles] = useState<FileItem[]>([]);
     const [loading, setLoading] = useState(false);
     const [contentLoaded, setContentLoaded] = useState(false);
@@ -103,6 +118,11 @@ export default function FileBrowser({
     const [promptModal, setPromptModal] = useState<{ title: string; placeholder: string; action: string } | null>(null);
     const [promptValue, setPromptValue] = useState('');
     const [uploadProgress, setUploadProgress] = useState<{ fileName: string; percent: number } | null>(null);
+    const [showZipModal, setShowZipModal] = useState(false);
+    const [zipFile, setZipFile] = useState<File | null>(null);
+    const [zipPreview, setZipPreview] = useState<{ root_folder: string; files: string[]; total: number } | null>(null);
+    const [zipRootName, setZipRootName] = useState('');
+    const [zipUploading, setZipUploading] = useState(false);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
  
@@ -150,7 +170,6 @@ export default function FileBrowser({
         setLoading(false);
     }, [api, currentPath, singleFile, fileFilter]);
 
-    // ─── Drag-and-drop upload ─────────────────────
     const handleDroppedFiles = useCallback(async (files: File[]) => {
         if (!api.upload || files.length === 0) return;
         try {
@@ -161,7 +180,7 @@ export default function FileBrowser({
                 });
             }
             setUploadProgress(null);
-            reload();
+            await reload();
             onRefresh?.();
             showToast(t('agent.upload.success', 'Upload successful'));
         } catch (err: any) {
@@ -176,7 +195,7 @@ export default function FileBrowser({
         accept: uploadAccept,
     });
 
-    useEffect(() => { reload(); }, [reload]);
+    useEffect(() => { reload(); }, [reload, refreshToken]);
 
     // ─── Load file content when viewing ───────────────
 
@@ -280,6 +299,51 @@ export default function FileBrowser({
         }
     };
 
+    const closeZipModal = useCallback(() => {
+        setShowZipModal(false);
+        setZipFile(null);
+        setZipPreview(null);
+        setZipRootName('');
+        setZipUploading(false);
+    }, []);
+
+    const zipTargetPath = useCallback(() => {
+        const normalizedRoot = rootPath.replace(/^\/+|\/+$/g, '');
+        const normalizedCurrent = currentPath.replace(/^\/+|\/+$/g, '');
+        if (!normalizedRoot) return normalizedCurrent;
+        if (normalizedCurrent === normalizedRoot) return '';
+        if (normalizedCurrent.startsWith(`${normalizedRoot}/`)) return normalizedCurrent.slice(normalizedRoot.length + 1);
+        return normalizedCurrent;
+    }, [currentPath, rootPath]);
+
+    const handleZipFileChange = useCallback(async (file?: File | null) => {
+        if (!file || !api.previewZip) return;
+        setZipFile(file);
+        try {
+            const preview = await api.previewZip(file);
+            setZipPreview(preview);
+            setZipRootName(preview.root_folder || '');
+        } catch (err: any) {
+            showToast(`Failed to preview zip: ${err?.message || err}`, 'error');
+        }
+    }, [api, showToast]);
+
+    const handleZipExtract = useCallback(async () => {
+        if (!zipFile || !api.extractZip) return;
+        setZipUploading(true);
+        try {
+            const result = await api.extractZip(zipFile, zipTargetPath(), zipRootName);
+            showToast(`Extracted ${result.extracted} files successfully`);
+            closeZipModal();
+            await reload();
+            onRefresh?.();
+        } catch (err: any) {
+            showToast(`Failed to extract: ${err?.message || err}`, 'error');
+        } finally {
+            setZipUploading(false);
+        }
+    }, [api, zipFile, zipRootName, zipTargetPath, closeZipModal, reload, onRefresh, showToast]);
+
     // ─── Breadcrumbs ──────────────────────────────────
 
     const pathParts = currentPath ? currentPath.split('/').filter(Boolean) : [];
@@ -373,6 +437,77 @@ export default function FileBrowser({
         );
     };
 
+    const renderZipModal = () => {
+        if (!showZipModal) return null;
+        return (
+            <div
+                style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10000 }}
+                onClick={(e) => { if (e.target === e.currentTarget) closeZipModal(); }}
+            >
+                <div style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', maxWidth: '600px', width: '90%', border: '1px solid var(--border-subtle)', boxShadow: '0 20px 60px rgba(0,0,0,0.4)' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                        <h4 style={{ margin: 0, fontSize: '15px' }}>Import Skill Package</h4>
+                        <button onClick={closeZipModal} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)', padding: '4px 8px' }}>×</button>
+                    </div>
+
+                    {!zipPreview ? (
+                        <div>
+                            <p style={{ color: 'var(--text-secondary)', marginBottom: '16px', fontSize: '13px' }}>
+                                Select a .zip file containing skill definitions (.md files with YAML frontmatter).
+                            </p>
+                            <input
+                                type="file"
+                                accept=".zip"
+                                onChange={(e) => void handleZipFileChange(e.target.files?.[0])}
+                            />
+                        </div>
+                    ) : (
+                        <div>
+                            <p style={{ marginBottom: '8px', fontSize: '13px' }}>
+                                <strong>{zipPreview.total}</strong> files found in zip
+                            </p>
+
+                            <div style={{ marginBottom: '16px' }}>
+                                <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
+                                    Extract as folder:
+                                </label>
+                                <input
+                                    className="form-input"
+                                    type="text"
+                                    value={zipRootName}
+                                    onChange={e => setZipRootName(e.target.value)}
+                                    placeholder="(empty = extract contents directly)"
+                                    style={{ width: '100%', fontSize: '13px', boxSizing: 'border-box' }}
+                                />
+                                <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '4px' }}>
+                                    Will extract to: {currentPath || rootPath || 'root'}{zipRootName ? `/${zipRootName}` : ''}...
+                                </p>
+                            </div>
+
+                            <div style={{ maxHeight: '200px', overflowY: 'auto', fontSize: '12px', background: 'var(--bg-secondary)', padding: '8px', borderRadius: '4px', marginBottom: '16px' }}>
+                                {zipPreview.files.slice(0, 20).map((file, i) => (
+                                    <div key={i} style={{ padding: '2px 0', color: 'var(--text-secondary)' }}>{file}</div>
+                                ))}
+                                {zipPreview.total > 20 && (
+                                    <div style={{ padding: '2px 0', color: 'var(--text-secondary)', fontStyle: 'italic' }}>
+                                        ...and {zipPreview.total - 20} more files
+                                    </div>
+                                )}
+                            </div>
+
+                            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                                <button className="btn btn-secondary" onClick={closeZipModal}>Cancel</button>
+                                <button className="btn btn-primary" disabled={zipUploading} onClick={() => void handleZipExtract()}>
+                                    {zipUploading ? 'Extracting...' : 'Extract'}
+                                </button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
     // ═══════════════════════════════════════════════════
     // SINGLE FILE MODE (Soul-style)
     // ═══════════════════════════════════════════════════
@@ -466,10 +601,10 @@ export default function FileBrowser({
                     ) : isImage(viewing) ? (
                         <div style={{ textAlign: 'center', padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px' }}>
                             {api.downloadUrl ? (
-                                <img 
-                                    src={api.downloadUrl(viewing)} 
-                                    alt={viewing.split('/').pop()} 
-                                    style={{ maxWidth: '100%', maxHeight: '600px', objectFit: 'contain', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }} 
+                                <img
+                                    src={api.downloadUrl(viewing)}
+                                    alt={viewing.split('/').pop()}
+                                    style={{ maxWidth: '100%', maxHeight: '600px', objectFit: 'contain', borderRadius: '4px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
                                 />
                             ) : (
                                 <div style={{ padding: '20px', color: 'var(--text-tertiary)' }}>Cannot preview image without download URL</div>
@@ -499,14 +634,12 @@ export default function FileBrowser({
     // ═══════════════════════════════════════════════════
     return (
         <div className="drop-zone-wrapper" {...dropZoneProps}>
-            {/* Drop overlay */}
             {isDragging && (
                 <div className="drop-zone-overlay">
                     <div className="drop-zone-overlay__icon"><IconUpload size={28} stroke={1.8} /></div>
                     <div className="drop-zone-overlay__text">{t('agent.workspace.dragOrClick', 'Drop files to upload')}</div>
                 </div>
             )}
-
             {/* Toolbar */}
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px', flexWrap: 'wrap', gap: '8px' }}>
                 {title && <h3 style={{ margin: 0 }}>{title}</h3>}
@@ -515,6 +648,20 @@ export default function FileBrowser({
                     {upload && api.upload && (
                         <button className="btn btn-secondary" style={{ fontSize: '12px' }} onClick={handleUpload}><IconUpload size={13} stroke={1.8} /> Upload</button>
                     )}
+                    {zipImport && api.previewZip && api.extractZip && (
+                        <button
+                            className="btn btn-outline"
+                            style={{ fontSize: '12px' }}
+                            onClick={() => {
+                                setShowZipModal(true);
+                                setZipFile(null);
+                                setZipPreview(null);
+                                setZipRootName('');
+                            }}
+                        >
+                            Import Skill Package
+                        </button>
+                    )}
                     {newFolder && (
                         <button className="btn btn-secondary" style={{ fontSize: '12px' }}
                             onClick={() => setPromptModal({ title: t('agent.workspace.newFolder'), placeholder: t('agent.workspace.newFolderName'), action: 'newFolder' })}>
@@ -612,6 +759,7 @@ export default function FileBrowser({
 
             {renderDeleteModal()}
             {renderPromptModal()}
+            {renderZipModal()}
             {renderToast()}
         </div>
     );
diff --git a/frontend/src/components/SkillAutocomplete.tsx b/frontend/src/components/SkillAutocomplete.tsx
new file mode 100644
index 000000000..6d3339a18
--- /dev/null
+++ b/frontend/src/components/SkillAutocomplete.tsx
@@ -0,0 +1,244 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+
+interface SkillMapEntry {
+    name: string;
+    emoji?: string;
+    description?: string;
+}
+
+interface SkillAutocompleteProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    skillMap: Record<string, SkillMapEntry>;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    inputRef?: React.RefObject<HTMLTextAreaElement | null>;
+    onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
+}
+
+interface DropdownItem {
+    segment: string;
+    fullKey: string;
+    isLeaf: boolean;
+    name?: string;
+    emoji?: string;
+    description?: string;
+}
+
+const MAX_ROWS = 10;
+const LINE_HEIGHT = 20; // px per row
+const PADDING_Y = 20; // top (10px) + bottom (10px) padding
+
+export default function SkillAutocomplete({
+    value,
+    onChange,
+    onSubmit,
+    skillMap,
+    placeholder,
+    className,
+    disabled,
+    inputRef: externalRef,
+    onPaste,
+}: SkillAutocompleteProps) {
+    const [showDropdown, setShowDropdown] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [items, setItems] = useState<DropdownItem[]>([]);
+    const internalRef = useRef<HTMLTextAreaElement>(null);
+    const ref = externalRef || internalRef;
+    const dropdownRef = useRef<HTMLDivElement>(null);
+
+    // Auto-resize textarea
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        el.style.height = 'auto';
+        const maxHeight = LINE_HEIGHT * MAX_ROWS + PADDING_Y;
+        el.style.height = Math.min(el.scrollHeight, maxHeight) + 'px';
+        el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';
+    }, [value, ref]);
+
+    useEffect(() => {
+        if (!skillMap || !value.startsWith('/')) {
+            setShowDropdown(false);
+            return;
+        }
+
+        const keys = Object.keys(skillMap);
+        if (keys.length === 0) {
+            setShowDropdown(false);
+            return;
+        }
+
+        const raw = value.slice(1);
+        const prefix = raw.endsWith(':') ? raw : raw.includes(':') ? raw.slice(0, raw.lastIndexOf(':') + 1) : '';
+        const query = raw.endsWith(':') ? '' : (raw.includes(':') ? raw.slice(raw.lastIndexOf(':') + 1) : raw);
+
+        const matching = keys.filter(k => k.startsWith(prefix));
+
+        const segmentMap = new Map<string, DropdownItem>();
+        for (const key of matching) {
+            const rest = key.slice(prefix.length);
+            const nextColon = rest.indexOf(':');
+            const segment = nextColon >= 0 ? rest.slice(0, nextColon) : rest;
+
+            if (!segment) continue;
+            if (query && !segment.toLowerCase().includes(query.toLowerCase())) continue;
+
+            if (!segmentMap.has(segment)) {
+                const fullKey = prefix + segment;
+                const isLeaf = fullKey in skillMap;
+                const entry = isLeaf ? skillMap[fullKey] : undefined;
+                const hasChildren = keys.some(k => k.startsWith(fullKey + ':'));
+
+                segmentMap.set(segment, {
+                    segment,
+                    fullKey,
+                    isLeaf,
+                    name: entry?.name || segment,
+                    emoji: entry?.emoji,
+                    description: entry?.description || (hasChildren && !isLeaf ? 'Package' : undefined),
+                });
+            }
+        }
+
+        const filtered = Array.from(segmentMap.values());
+        setItems(filtered);
+        setShowDropdown(filtered.length > 0);
+        setSelectedIndex(0);
+    }, [value, skillMap]);
+
+    const hasChildren = useCallback((item: DropdownItem) => {
+        return Object.keys(skillMap).some(k => k.startsWith(item.fullKey + ':'));
+    }, [skillMap]);
+
+    const selectItem = useCallback((item: DropdownItem) => {
+        if (item.isLeaf && !hasChildren(item)) {
+            onChange(`/${item.fullKey} `);
+            setShowDropdown(false);
+        } else {
+            onChange(`/${item.fullKey}:`);
+        }
+    }, [onChange, hasChildren]);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (showDropdown) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setSelectedIndex(prev => Math.min(prev + 1, items.length - 1));
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setSelectedIndex(prev => Math.max(prev - 1, 0));
+                return;
+            }
+            if (e.key === 'Enter' && items[selectedIndex]) {
+                e.preventDefault();
+                const item = items[selectedIndex];
+                if (item.isLeaf) {
+                    onChange(`/${item.fullKey} `);
+                    setShowDropdown(false);
+                } else {
+                    selectItem(item);
+                }
+                return;
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setShowDropdown(false);
+                return;
+            }
+            if (e.key === 'Tab' && items[selectedIndex]) {
+                e.preventDefault();
+                selectItem(items[selectedIndex]);
+                return;
+            }
+        }
+
+        // Enter without Shift submits; Shift+Enter inserts newline
+        if (e.key === 'Enter' && !e.shiftKey && !showDropdown) {
+            e.preventDefault();
+            onSubmit();
+        }
+    };
+
+    useEffect(() => {
+        if (showDropdown && dropdownRef.current) {
+            const el = dropdownRef.current.children[selectedIndex] as HTMLElement;
+            el?.scrollIntoView({ block: 'nearest' });
+        }
+    }, [selectedIndex, showDropdown]);
+
+    return (
+        <div style={{ position: 'relative', width: '100%', display: 'flex', alignItems: 'flex-end' }}>
+            {showDropdown && (
+                <div
+                    ref={dropdownRef}
+                    onMouseDown={e => e.preventDefault()}
+                    style={{
+                        position: 'absolute',
+                        bottom: '100%',
+                        left: 0,
+                        right: 0,
+                        maxHeight: '240px',
+                        overflowY: 'auto',
+                        background: 'var(--bg-secondary, #1e1e1e)',
+                        border: '1px solid var(--border-color, #333)',
+                        borderRadius: '8px',
+                        marginBottom: '4px',
+                        zIndex: 100,
+                        boxShadow: '0 -4px 12px rgba(0,0,0,0.3)',
+                    }}
+                >
+                    {items.map((item, i) => (
+                        <div
+                            key={item.fullKey}
+                            onClick={() => selectItem(item)}
+                            style={{
+                                padding: '8px 12px',
+                                cursor: 'pointer',
+                                background: i === selectedIndex ? 'var(--bg-hover, #2a2a2a)' : 'transparent',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '8px',
+                                fontSize: '14px',
+                            }}
+                        >
+                            {item.emoji && <span>{item.emoji}</span>}
+                            <span style={{ fontWeight: 500 }}>{item.segment}</span>
+                            {!item.isLeaf && <span style={{ color: 'var(--text-secondary, #888)', fontSize: '11px' }}>▸</span>}
+                            {item.description && (
+                                <span style={{
+                                    color: 'var(--text-secondary, #888)',
+                                    fontSize: '12px',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    flex: 1,
+                                }}>
+                                    {item.description}
+                                </span>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+            <textarea
+                ref={ref}
+                className={className}
+                value={value}
+                onChange={e => onChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                disabled={disabled}
+                onPaste={onPaste}
+                rows={1}
+                onBlur={() => {
+                    setTimeout(() => setShowDropdown(false), 200);
+                }}
+            />
+        </div>
+    );
+}
diff --git a/frontend/src/components/skills/SkillFolderUploadModal.tsx b/frontend/src/components/skills/SkillFolderUploadModal.tsx
new file mode 100644
index 000000000..ce417dc23
--- /dev/null
+++ b/frontend/src/components/skills/SkillFolderUploadModal.tsx
@@ -0,0 +1,348 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type {
+    SkillFolderUploadApplyInput,
+    SkillFolderUploadApplyResult,
+    SkillFolderUploadPreview,
+} from '../../services/api';
+import { buildSkillFolderZip, deriveSkillRootName } from '../../utils/skillFolderZip';
+
+type SkillFolderUploadModalProps = {
+    open: boolean;
+    onClose: () => void;
+    i18nPrefix: string;
+    cancelLabelKey?: string;
+    previewRequest: (file: File, targetFolder: string) => Promise<SkillFolderUploadPreview>;
+    applyRequest: (input: SkillFolderUploadApplyInput) => Promise<SkillFolderUploadApplyResult>;
+    onApplied?: (result: SkillFolderUploadApplyResult) => void | Promise<void>;
+};
+
+const directoryPickerProps = {
+    webkitdirectory: '',
+    directory: '',
+} as const;
+
+function getRelativeSkillPath(file: File): string {
+    const relativePath = file.webkitRelativePath || file.name;
+    const segments = relativePath.split('/').filter(Boolean);
+    return segments.length > 1 ? segments.slice(1).join('/') : segments[0] || file.name;
+}
+
+function PreviewList({ title, paths }: { title: string; paths: string[] }) {
+    if (!paths.length) return null;
+
+    return (
+        <div style={{ minWidth: 0 }}>
+            <div style={{ fontSize: '12px', fontWeight: 600, marginBottom: '6px' }}>{title}</div>
+            <div style={{ maxHeight: '160px', overflowY: 'auto', background: 'var(--bg-secondary)', borderRadius: '8px', padding: '10px 12px' }}>
+                {paths.map((path) => (
+                    <div key={path} style={{ fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.5, wordBreak: 'break-all' }}>{path}</div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default function SkillFolderUploadModal({
+    open,
+    onClose,
+    i18nPrefix,
+    cancelLabelKey = 'common.cancel',
+    previewRequest,
+    applyRequest,
+    onApplied,
+}: SkillFolderUploadModalProps) {
+    const { t } = useTranslation();
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+    const [sourceFolderName, setSourceFolderName] = useState('');
+    const [targetFolder, setTargetFolder] = useState('');
+    const [preview, setPreview] = useState<SkillFolderUploadPreview | null>(null);
+    const [preparedFile, setPreparedFile] = useState<File | null>(null);
+    const [previewing, setPreviewing] = useState(false);
+    const [applying, setApplying] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const openRef = useRef(open);
+    const previewRequestIdRef = useRef(0);
+    const applyRequestIdRef = useRef(0);
+    const previewStateVersionRef = useRef(0);
+
+    const invalidatePreviewState = (options?: { clearError?: boolean }) => {
+        previewStateVersionRef.current += 1;
+        previewRequestIdRef.current += 1;
+        applyRequestIdRef.current += 1;
+        setPreview(null);
+        setPreparedFile(null);
+        setPreviewing(false);
+        setApplying(false);
+        if (options?.clearError) setError(null);
+    };
+
+    const handleClose = () => {
+        invalidatePreviewState({ clearError: true });
+        onClose();
+    };
+
+    useEffect(() => {
+        openRef.current = open;
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) {
+            invalidatePreviewState({ clearError: true });
+            setSelectedFiles([]);
+            setSourceFolderName('');
+            setTargetFolder('');
+            setPreviewing(false);
+            setApplying(false);
+            if (inputRef.current) inputRef.current.value = '';
+        }
+    }, [open]);
+
+    const selectedPaths = useMemo(() => selectedFiles.map((file) => getRelativeSkillPath(file)), [selectedFiles]);
+    const modalT = (key: string, options?: Record<string, unknown>) => t(`${i18nPrefix}.${key}`, options);
+
+    const openPicker = () => inputRef.current?.click();
+
+    const handleFilesSelected = (files: File[]) => {
+        if (!files.length) return;
+        const derivedRoot = deriveSkillRootName(files);
+        setSelectedFiles(files);
+        setSourceFolderName(derivedRoot);
+        setTargetFolder(derivedRoot);
+        invalidatePreviewState({ clearError: true });
+    };
+
+    const buildUploadFile = async (folderName: string) => buildSkillFolderZip(
+        selectedFiles.map((file) => ({ path: getRelativeSkillPath(file), file })),
+        folderName,
+    );
+
+    const handlePreview = async () => {
+        if (!selectedFiles.length) {
+            setError(modalT('validation.pickFolderFirst'));
+            return;
+        }
+
+        const normalizedTarget = targetFolder.trim();
+        if (!normalizedTarget) {
+            setError(modalT('validation.targetRequired'));
+            return;
+        }
+
+        setPreviewing(true);
+        setError(null);
+        const requestId = ++previewRequestIdRef.current;
+        const stateVersion = previewStateVersionRef.current;
+        try {
+            const uploadFile = await buildUploadFile(normalizedTarget);
+            if (
+                !openRef.current
+                || requestId !== previewRequestIdRef.current
+                || stateVersion !== previewStateVersionRef.current
+            ) {
+                return;
+            }
+            const nextPreview = await previewRequest(uploadFile, normalizedTarget);
+            if (
+                !openRef.current
+                || requestId !== previewRequestIdRef.current
+                || stateVersion !== previewStateVersionRef.current
+            ) {
+                return;
+            }
+            setPreparedFile(uploadFile);
+            setPreview(nextPreview);
+        } catch (err: any) {
+            if (
+                openRef.current
+                && requestId === previewRequestIdRef.current
+                && stateVersion === previewStateVersionRef.current
+            ) {
+                setPreparedFile(null);
+                setPreview(null);
+                setError(String(err?.message || err));
+            }
+        } finally {
+            if (
+                openRef.current
+                && requestId === previewRequestIdRef.current
+                && stateVersion === previewStateVersionRef.current
+            ) {
+                setPreviewing(false);
+            }
+        }
+    };
+
+    const handleApply = async () => {
+        if (!preview || !preparedFile) {
+            setError(modalT('validation.previewRequired'));
+            return;
+        }
+
+        setApplying(true);
+        setError(null);
+        const requestId = ++applyRequestIdRef.current;
+        const stateVersion = previewStateVersionRef.current;
+        const previewSnapshot = preview;
+        const preparedFileSnapshot = preparedFile;
+        try {
+            const result = await applyRequest({
+                file: preparedFileSnapshot,
+                targetFolder: previewSnapshot.target_folder,
+                expectedDigest: previewSnapshot.digest,
+                expectedTargetStateDigest: previewSnapshot.target_state_digest,
+                replaceConfirmed: true,
+            });
+            if (
+                !openRef.current
+                || requestId !== applyRequestIdRef.current
+                || stateVersion !== previewStateVersionRef.current
+            ) {
+                return;
+            }
+            await onApplied?.(result);
+            handleClose();
+        } catch (err: any) {
+            if (
+                openRef.current
+                && requestId === applyRequestIdRef.current
+                && stateVersion === previewStateVersionRef.current
+            ) {
+                setError(String(err?.message || err));
+            }
+        } finally {
+            if (
+                openRef.current
+                && requestId === applyRequestIdRef.current
+                && stateVersion === previewStateVersionRef.current
+            ) {
+                setApplying(false);
+            }
+        }
+    };
+
+    if (!open) return null;
+
+    return (
+        <div
+            style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            onClick={handleClose}
+        >
+            <div
+                onClick={(event) => event.stopPropagation()}
+                style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', maxWidth: '760px', width: '92%', maxHeight: '82vh', display: 'flex', flexDirection: 'column', gap: '16px', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}
+            >
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '12px' }}>
+                    <div>
+                        <h3 style={{ margin: 0 }}>{modalT('title')}</h3>
+                        <p style={{ margin: '6px 0 0', fontSize: '13px', color: 'var(--text-secondary)' }}>
+                            {modalT('description')}
+                        </p>
+                    </div>
+                    <button onClick={handleClose} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)', padding: '4px 8px' }}>✕</button>
+                </div>
+
+                <input
+                    ref={inputRef}
+                    type="file"
+                    multiple
+                    {...directoryPickerProps}
+                    style={{ display: 'none' }}
+                    onChange={(event) => handleFilesSelected(Array.from(event.target.files || []))}
+                />
+
+                <div style={{ display: 'grid', gap: '12px' }}>
+                    <div style={{ display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap' }}>
+                        <button className="btn btn-secondary" onClick={openPicker}>
+                            {modalT('pickFolder')}
+                        </button>
+                        <div style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
+                            {selectedFiles.length
+                                ? modalT('selectedSummary', { folder: sourceFolderName, count: selectedFiles.length })
+                                : modalT('noFolderSelected')}
+                        </div>
+                    </div>
+
+                    <div>
+                        <label style={{ display: 'block', marginBottom: '6px', fontSize: '13px', fontWeight: 600 }}>
+                            {modalT('targetFolderLabel')}
+                        </label>
+                        <input
+                            className="input"
+                            value={targetFolder}
+                            onChange={(event) => {
+                                setTargetFolder(event.target.value);
+                                invalidatePreviewState();
+                            }}
+                            placeholder={modalT('targetFolderPlaceholder')}
+                            style={{ width: '100%', boxSizing: 'border-box' }}
+                        />
+                    </div>
+                </div>
+
+                {error && (
+                    <div style={{ padding: '10px 12px', borderRadius: '8px', background: 'rgba(239, 68, 68, 0.12)', color: '#f87171', fontSize: '12px', lineHeight: 1.5 }}>
+                        {error}
+                    </div>
+                )}
+
+                {selectedPaths.length > 0 && !preview && (
+                    <div style={{ maxHeight: '180px', overflowY: 'auto', background: 'var(--bg-secondary)', borderRadius: '8px', padding: '10px 12px' }}>
+                        {selectedPaths.slice(0, 20).map((path) => (
+                            <div key={path} style={{ fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.5, wordBreak: 'break-all' }}>{path}</div>
+                        ))}
+                        {selectedPaths.length > 20 && (
+                            <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginTop: '6px' }}>
+                                {modalT('moreFiles', { count: selectedPaths.length - 20 })}
+                            </div>
+                        )}
+                    </div>
+                )}
+
+                {preview && (
+                    <div style={{ display: 'grid', gap: '12px', overflowY: 'auto' }}>
+                        <div style={{ padding: '12px 14px', borderRadius: '8px', background: 'var(--bg-secondary)', display: 'grid', gap: '8px' }}>
+                            <div style={{ fontSize: '13px', fontWeight: 600 }}>
+                                {preview.mode === 'create'
+                                    ? modalT('previewCreate')
+                                    : modalT('previewUpdate')}
+                            </div>
+                            <div style={{ fontSize: '12px', color: 'var(--text-secondary)', display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+                                <span>{modalT('summary.added', { count: preview.added_count })}</span>
+                                <span>{modalT('summary.changed', { count: preview.changed_count })}</span>
+                                <span>{modalT('summary.deleted', { count: preview.deleted_count })}</span>
+                            </div>
+                            {(preview.changed_count > 0 || preview.deleted_count > 0) && (
+                                <div style={{ fontSize: '12px', color: '#fbbf24', lineHeight: 1.5 }}>
+                                    {preview.deleted_count > 0
+                                        ? modalT('warnings.deleteReplace')
+                                        : modalT('warnings.replace')}
+                                </div>
+                            )}
+                        </div>
+
+                        <div style={{ display: 'grid', gap: '12px', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
+                            <PreviewList title={modalT('diff.added')} paths={preview.added_paths} />
+                            <PreviewList title={modalT('diff.changed')} paths={preview.changed_paths} />
+                            <PreviewList title={modalT('diff.deleted')} paths={preview.deleted_paths} />
+                        </div>
+                    </div>
+                )}
+
+                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px', marginTop: 'auto' }}>
+                    <button className="btn btn-secondary" onClick={handleClose} disabled={previewing || applying}>
+                        {t(cancelLabelKey)}
+                    </button>
+                    <button className="btn btn-secondary" onClick={handlePreview} disabled={previewing || applying}>
+                        {previewing ? modalT('previewing') : modalT('preview')}
+                    </button>
+                    <button className="btn btn-primary" onClick={handleApply} disabled={!preview || previewing || applying}>
+                        {applying ? modalT('applying') : modalT('apply')}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/components/skills/SkillsActionBar.tsx b/frontend/src/components/skills/SkillsActionBar.tsx
new file mode 100644
index 000000000..731e32e05
--- /dev/null
+++ b/frontend/src/components/skills/SkillsActionBar.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import type { SkillActionId } from './skillsActionItems';
+
+export type SkillsActionBarAction = {
+  id: SkillActionId;
+  label: string;
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  title?: string;
+  onClick: () => void | Promise<void>;
+};
+
+type SkillsActionBarProps = {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  actions: SkillsActionBarAction[];
+};
+
+export default function SkillsActionBar({
+  title,
+  description,
+  actions,
+}: SkillsActionBarProps) {
+  return (
+    <div style={{ marginBottom: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '12px' }}>
+      <div>
+        <h3>{title}</h3>
+        <p style={{ fontSize: '13px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
+          {description}
+        </p>
+      </div>
+      <div style={{ display: 'flex', gap: '8px', flexShrink: 0, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+        {actions.map((action) => (
+          <button
+            key={action.id}
+            className={`btn btn-${action.variant || 'secondary'}`}
+            style={{ fontSize: '13px' }}
+            onClick={action.onClick}
+            title={action.title}
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/skills/skillUploadSurfaceAdapters.ts b/frontend/src/components/skills/skillUploadSurfaceAdapters.ts
new file mode 100644
index 000000000..d6d85c8c2
--- /dev/null
+++ b/frontend/src/components/skills/skillUploadSurfaceAdapters.ts
@@ -0,0 +1,43 @@
+import type {
+  SkillFolderUploadApplyInput,
+  SkillFolderUploadApplyResult,
+  SkillFolderUploadPreview,
+} from '../../services/api';
+
+type SkillUploadSurfaceAdapterDeps = {
+  preview: (file: File, targetFolder: string) => Promise<SkillFolderUploadPreview>;
+  apply: (input: SkillFolderUploadApplyInput) => Promise<SkillFolderUploadApplyResult>;
+  refresh: () => Promise<unknown> | unknown;
+};
+
+type SkillUploadSurfaceAdapter = {
+  previewRequest: SkillUploadSurfaceAdapterDeps['preview'];
+  applyRequest: SkillUploadSurfaceAdapterDeps['apply'];
+  onApplied: (result: SkillFolderUploadApplyResult) => Promise<void>;
+};
+
+function createSkillUploadSurfaceAdapter({
+  preview,
+  apply,
+  refresh,
+}: SkillUploadSurfaceAdapterDeps): SkillUploadSurfaceAdapter {
+  return {
+    previewRequest: preview,
+    applyRequest: apply,
+    onApplied: async () => {
+      await refresh();
+    },
+  };
+}
+
+export function createEnterpriseSkillUploadAdapter(
+  deps: SkillUploadSurfaceAdapterDeps,
+): SkillUploadSurfaceAdapter {
+  return createSkillUploadSurfaceAdapter(deps);
+}
+
+export function createAgentSkillUploadAdapter(
+  deps: SkillUploadSurfaceAdapterDeps,
+): SkillUploadSurfaceAdapter {
+  return createSkillUploadSurfaceAdapter(deps);
+}
diff --git a/frontend/src/components/skills/skillsActionItems.ts b/frontend/src/components/skills/skillsActionItems.ts
new file mode 100644
index 000000000..f979fd3d3
--- /dev/null
+++ b/frontend/src/components/skills/skillsActionItems.ts
@@ -0,0 +1,27 @@
+export type SkillActionId =
+  | 'settings'
+  | 'upload-folder'
+  | 'import-url'
+  | 'browse-clawhub'
+  | 'import-presets';
+
+const ENTERPRISE_SKILL_ACTION_IDS: SkillActionId[] = [
+  'settings',
+  'upload-folder',
+  'import-url',
+  'browse-clawhub',
+];
+
+const AGENT_SKILL_ACTION_IDS: SkillActionId[] = [
+  'browse-clawhub',
+  'import-presets',
+  'upload-folder',
+];
+
+export function getEnterpriseSkillActionIds(): SkillActionId[] {
+  return [...ENTERPRISE_SKILL_ACTION_IDS];
+}
+
+export function getAgentSkillActionIds(): SkillActionId[] {
+  return [...AGENT_SKILL_ACTION_IDS];
+}
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index a187b63db..47ed5b423 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -370,7 +370,43 @@
       "importedSuccess": "Imported \"{{name}}\" ({{count}} files)",
       "importFailed": "Import failed",
       "importing": "Importing...",
-      "importBtn": "Import"
+      "importBtn": "Import",
+      "uploadFolderModal": {
+        "openButton": "Upload Skill Folder",
+        "title": "Upload Skill Folder",
+        "description": "Pick a local skill folder, preview the file diff, then confirm the upload.",
+        "pickFolder": "Choose Folder",
+        "noFolderSelected": "No folder selected yet.",
+        "selectedSummary": "{{folder}} · {{count}} files selected",
+        "targetFolderLabel": "Target folder",
+        "targetFolderPlaceholder": "my-skill",
+        "moreFiles": "+{{count}} more files",
+        "preview": "Preview Changes",
+        "previewing": "Previewing...",
+        "apply": "Apply Upload",
+        "applying": "Applying...",
+        "previewCreate": "This will create a new skill folder.",
+        "previewUpdate": "This will update an existing skill folder.",
+        "summary": {
+          "added": "{{count}} added",
+          "changed": "{{count}} changed",
+          "deleted": "{{count}} deleted"
+        },
+        "warnings": {
+          "replace": "Applying this upload will replace changed files in the target skill folder.",
+          "deleteReplace": "Applying this upload will replace changed files and delete files missing from the selected folder."
+        },
+        "diff": {
+          "added": "Added files",
+          "changed": "Changed files",
+          "deleted": "Deleted files"
+        },
+        "validation": {
+          "pickFolderFirst": "Choose a local folder before previewing.",
+          "targetRequired": "Enter a target folder name.",
+          "previewRequired": "Preview the upload before applying it."
+        }
+      }
     },
     "toolMgmt": {
       "title": "Tool Management",
@@ -1059,11 +1095,9 @@
       "testSuccess": "OK ({{latency}}ms)",
       "testFailed": "Test failed: {{error}}\n\nLatency: {{latency}}ms",
       "testError": "Test error: {{message}}",
-      "editModel": "Edit Model",
-      "vision": "Vision",
-      "temperature": "Temperature",
-      "temperaturePlaceholder": "e.g. 0.7 or 1.0 (Leave empty for default)",
-      "temperatureDesc": "Leave empty to use the provider default. o1/o3 reasoning models usually require 1.0"
+      "utilityModel": "Utility Model",
+      "utilityModelDesc": "Used for background tasks like auto-generating session titles. Select from your added models.",
+      "noUtilityModel": "None (use default behavior)"
     },
     "tools": {
       "title": "Global Tool Management",
@@ -1091,6 +1125,42 @@
       "mcpServer": "MCP Server",
       "jsonConfig": "JSON Config",
       "manageGlobalSkills": "Manage global skills. Each skill is a folder with a SKILL.md file. Skills selected during agent creation are copied to the agent's workspace.",
+      "uploadFolderModal": {
+        "openButton": "Upload Skill Folder",
+        "title": "Upload Skill Folder",
+        "description": "Pick a local skill folder, preview the file diff, then confirm the upload.",
+        "pickFolder": "Choose Folder",
+        "noFolderSelected": "No folder selected yet.",
+        "selectedSummary": "{{folder}} · {{count}} files selected",
+        "targetFolderLabel": "Target folder",
+        "targetFolderPlaceholder": "my-skill",
+        "moreFiles": "+{{count}} more files",
+        "preview": "Preview Changes",
+        "previewing": "Previewing...",
+        "apply": "Apply Upload",
+        "applying": "Applying...",
+        "previewCreate": "This will create a new skill folder.",
+        "previewUpdate": "This will update an existing skill folder.",
+        "summary": {
+          "added": "{{count}} added",
+          "changed": "{{count}} changed",
+          "deleted": "{{count}} deleted"
+        },
+        "warnings": {
+          "replace": "Applying this upload will replace changed files in the target skill folder.",
+          "deleteReplace": "Applying this upload will replace changed files and delete files missing from the selected folder."
+        },
+        "diff": {
+          "added": "Added files",
+          "changed": "Changed files",
+          "deleted": "Deleted files"
+        },
+        "validation": {
+          "pickFolderFirst": "Choose a local folder before previewing.",
+          "targetRequired": "Enter a target folder name.",
+          "previewRequired": "Preview the upload before applying it."
+        }
+      },
       "importFromUrl": "Import from URL",
       "browseClawhub": "Browse ClawHub",
       "githubToken": "GitHub Token",
diff --git a/frontend/src/i18n/zh.json b/frontend/src/i18n/zh.json
index 2256e0021..35d43ceb4 100644
--- a/frontend/src/i18n/zh.json
+++ b/frontend/src/i18n/zh.json
@@ -377,7 +377,43 @@
       "importedSuccess": "已导入 \"{{name}}\" ({{count}} 个文件)",
       "importFailed": "导入失败",
       "importing": "导入中...",
-      "importBtn": "导入"
+      "importBtn": "导入",
+      "uploadFolderModal": {
+        "openButton": "上传技能文件夹",
+        "title": "上传技能文件夹",
+        "description": "选择本地技能文件夹，先预览文件差异，再确认上传。",
+        "pickFolder": "选择文件夹",
+        "noFolderSelected": "尚未选择文件夹。",
+        "selectedSummary": "已选择 {{folder}} · 共 {{count}} 个文件",
+        "targetFolderLabel": "目标文件夹",
+        "targetFolderPlaceholder": "my-skill",
+        "moreFiles": "另有 {{count}} 个文件",
+        "preview": "预览变更",
+        "previewing": "预览中...",
+        "apply": "确认上传",
+        "applying": "上传中...",
+        "previewCreate": "这将创建一个新的技能文件夹。",
+        "previewUpdate": "这将更新现有的技能文件夹。",
+        "summary": {
+          "added": "新增 {{count}} 个",
+          "changed": "变更 {{count}} 个",
+          "deleted": "删除 {{count}} 个"
+        },
+        "warnings": {
+          "replace": "确认上传后将覆盖目标技能文件夹中已变更的文件。",
+          "deleteReplace": "确认上传后将覆盖已变更文件，并删除所选文件夹中不存在的目标文件。"
+        },
+        "diff": {
+          "added": "新增文件",
+          "changed": "变更文件",
+          "deleted": "删除文件"
+        },
+        "validation": {
+          "pickFolderFirst": "请先选择本地文件夹再预览。",
+          "targetRequired": "请输入目标文件夹名称。",
+          "previewRequired": "请先预览上传内容，再执行确认上传。"
+        }
+      }
     },
     "toolMgmt": {
       "title": "工具管理",
@@ -1176,11 +1212,9 @@
       "testSuccess": "OK ({{latency}}ms)",
       "testFailed": "测试失败: {{error}}\n\n延迟: {{latency}}ms",
       "testError": "测试错误: {{message}}",
-      "editModel": "编辑模型",
-      "vision": "视觉",
-      "temperature": "模型温度",
-      "temperaturePlaceholder": "例如 0.7 或 1.0（留空使用默认值）",
-      "temperatureDesc": "留空使用提供商默认值。o1/o3 推理模型通常需要 1.0"
+      "utilityModel": "辅助模型",
+      "utilityModelDesc": "用于后台任务，如自动生成会话标题。从已添加的模型中选择。",
+      "noUtilityModel": "无（使用默认行为）"
     },
     "tools": {
       "title": "全局工具管理",
@@ -1208,6 +1242,42 @@
       "mcpServer": "MCP 服务器",
       "jsonConfig": "JSON 配置",
       "manageGlobalSkills": "管理全局工具。每个工具都是一个带有 SKILL.md 文件的文件夹。在数字员工创建过程中选择的工具会被复制到数字员工的工作区。",
+      "uploadFolderModal": {
+        "openButton": "上传技能文件夹",
+        "title": "上传技能文件夹",
+        "description": "选择本地技能文件夹，先预览文件差异，再确认上传。",
+        "pickFolder": "选择文件夹",
+        "noFolderSelected": "尚未选择文件夹。",
+        "selectedSummary": "已选择 {{folder}} · 共 {{count}} 个文件",
+        "targetFolderLabel": "目标文件夹",
+        "targetFolderPlaceholder": "my-skill",
+        "moreFiles": "另有 {{count}} 个文件",
+        "preview": "预览变更",
+        "previewing": "预览中...",
+        "apply": "确认上传",
+        "applying": "上传中...",
+        "previewCreate": "这将创建一个新的技能文件夹。",
+        "previewUpdate": "这将更新现有的技能文件夹。",
+        "summary": {
+          "added": "新增 {{count}} 个",
+          "changed": "变更 {{count}} 个",
+          "deleted": "删除 {{count}} 个"
+        },
+        "warnings": {
+          "replace": "确认上传后将覆盖目标技能文件夹中已变更的文件。",
+          "deleteReplace": "确认上传后将覆盖已变更文件，并删除所选文件夹中不存在的目标文件。"
+        },
+        "diff": {
+          "added": "新增文件",
+          "changed": "变更文件",
+          "deleted": "删除文件"
+        },
+        "validation": {
+          "pickFolderFirst": "请先选择本地文件夹再预览。",
+          "targetRequired": "请输入目标文件夹名称。",
+          "previewRequired": "请先预览上传内容，再执行确认上传。"
+        }
+      },
       "importFromUrl": "从 URL 导入",
       "browseClawhub": "浏览 ClawHub",
       "githubToken": "GitHub Token",
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 247f4349c..c84458fa7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -3333,3112 +3333,13 @@ select:focus {
 .chat-container {
   display: flex;
   flex-direction: column;
-  /* Fill the chat-page main-content area (which is padding: 0, height: 100vh).
-     The page-header inside Chat is ~68px; flex: 1 + min-height: 0 lets
-     .chat-messages own the remaining space and scroll independently. */
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* Restore horizontal padding that main-content normally provides */
-.main-content.chat-page .chat-container {
-  padding: 0 var(--space-8);
-}
-
-
-/* When live panel is active, switch to horizontal layout */
-.chat-container.chat-with-live-panel {
-  flex-direction: row;
-  gap: 0;
-}
-
-.chat-with-live-panel > .chat-main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.chat-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.agent-detail-page--chat {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
-
-.agent-detail-header {
-  flex-shrink: 0;
-}
-
-.agent-detail-page--chat .agent-detail-header {
-  min-height: 42px;
-  padding: 5px 0;
-  margin-bottom: 4px;
-  display: flex;
-  align-items: center;
-}
-
-.main-content.chat-page .agent-detail-page--chat .agent-detail-header {
-  padding: 6px var(--space-8) 6px 20px;
-  margin-bottom: 4px;
-}
-
-.agent-detail-page--settings .agent-detail-header {
-  min-height: 0;
-  justify-content: flex-end;
-  margin-bottom: 0;
-}
-
-.agent-detail-page--settings .agent-detail-actions {
-  display: none;
-}
-
-.agent-detail-page--settings > .tabs {
-  align-items: center;
-  border-bottom: none;
-  padding-top: 0;
-  margin-top: 0;
-}
-
-.agent-tabs-chat-action {
-  margin-left: auto;
-  flex-shrink: 0;
-}
-
-.agent-settings-savebar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin-bottom: 8px;
-}
-
-.agent-detail-identity {
-  position: relative;
-  min-width: 0;
-}
-
-.agent-detail-identity-trigger {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  min-width: 0;
-}
-
-.agent-detail-identity--compact .agent-detail-identity-trigger {
-  gap: 9px;
-  cursor: default;
-  padding: 0 4px;
-  border-radius: 9px;
-  align-items: center;
-}
-
-.agent-detail-avatar {
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
-  background: var(--accent-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-primary);
-  font-size: 17px;
-  font-weight: 650;
-  flex-shrink: 0;
-}
-
-.agent-detail-identity--compact .agent-detail-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 7px;
-  font-size: 12px;
-  font-weight: 650;
-}
-
-.agent-detail-page--chat .page-title {
-  font-size: 14px;
-  line-height: 1.2;
-}
-
-.agent-detail-page--chat .page-subtitle {
-  font-size: 12px;
-  margin-top: 2px !important;
-}
-
-.agent-detail-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.agent-top-action {
-  height: 32px;
-  gap: 6px;
-  padding: 0 10px;
-  font-size: 13px;
-}
-
-.agent-top-action:hover {
-  color: #212121;
-  background: rgba(34, 55, 89, 0.08);
-}
-.agent-top-action.active {
-  color: #212121;
-  background: rgba(34, 55, 89, 0.08);
-  border-color: rgba(34, 55, 89, 0.18);
-}
-
-/* ══════════════════════════════════════════════════════
-   Agent Info Hover Card — Enterprise SaaS Design System
-   Glass card, gradient hero, icon headers, inner cards
-   ══════════════════════════════════════════════════════ */
-.agent-info-card {
-  position: absolute;
-  left: 0;
-  top: calc(100% + 8px);
-  width: min(560px, 86vw);
-  padding: 0;
-  border-radius: 16px;
-  color: var(--text-primary);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-6px);
-  pointer-events: none;
-  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
-              transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
-              visibility 180ms ease,
-              box-shadow 250ms ease;
-  z-index: 80;
-  overflow: hidden;
-  /* Glass card defaults */
-  background: rgba(255, 255, 255, 0.72);
-  backdrop-filter: blur(16px) saturate(1.8);
-  -webkit-backdrop-filter: blur(16px) saturate(1.8);
-  border: 1px solid rgba(255, 255, 255, 0.45);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .agent-info-card {
-  background: rgba(28, 28, 38, 0.82);
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
-}
-
-/* Card open state (click-triggered) */
-.agent-info-card--open {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  pointer-events: auto;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-[data-theme="dark"] .agent-info-card--open {
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-/* Chevron toggle button */
-.agent-info-chevron {
-  all: unset;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity 120ms, color 120ms, background 120ms, transform 200ms ease;
-}
-.agent-detail-identity-trigger:hover .agent-info-chevron,
-.agent-detail-identity-trigger:focus-within .agent-info-chevron,
-.agent-info-chevron--open {
-  opacity: 1;
-}
-.agent-info-chevron:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-.agent-info-chevron--open {
-  transform: rotate(180deg);
-  color: var(--text-primary);
-}
-
-/* Bridge the 8px gap between trigger and card so hover doesn't break */
-.agent-info-card--open::before {
-  content: '';
-  position: absolute;
-  top: -12px;
-  left: 0;
-  right: 0;
-  height: 12px;
-}
-
-/* ── Card inner wrapper (holds glow + grid) ── */
-.agent-info-card-inner {
-  position: relative;
-}
-
-.agent-info-card-glow {
-  position: absolute;
-  top: -40px;
-  right: -40px;
-  width: 120px;
-  height: 120px;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 50%;
-  filter: blur(40px);
-  pointer-events: none;
-}
-[data-theme="dark"] .agent-info-card-glow {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-/* ── Two-column grid ── */
-.agent-info-card-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
-}
-
-/* ── Section ── */
-.agent-info-card-section {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}
-.agent-info-card-section:first-child {
-  border-right: 1px solid rgba(0, 0, 0, 0.06);
-}
-[data-theme="dark"] .agent-info-card-section:first-child {
-  border-right-color: rgba(255, 255, 255, 0.06);
-}
-
-/* ── Section header — icon + title ── */
-.agent-info-card-section-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px 10px;
-}
-.agent-info-section-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  border-radius: 7px;
-  flex-shrink: 0;
-}
-.agent-info-section-icon--blue {
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-}
-.agent-info-section-icon--indigo {
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-}
-.agent-info-card-section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: -0.01em;
-}
-
-/* ── Section body ── */
-.agent-info-card-body {
-  padding: 12px 16px 16px;
-  flex: 1;
-}
-
-.agent-info-card-body--compact {
-  padding-top: 6px;
-}
-
-.agent-info-card-section--stacked {
-  gap: 0;
-}
-
-.agent-info-subsection + .agent-info-subsection {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .agent-info-subsection + .agent-info-subsection {
-  border-top-color: rgba(255, 255, 255, 0.06);
-}
-
-.agent-info-profile-panel {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.agent-info-profile-role {
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--text-secondary);
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.agent-info-profile-meta {
-  margin-top: 14px;
-}
-
-.agent-info-expiry--expired {
-  color: var(--error) !important;
-}
-
-.agent-info-expiry-button {
-  width: 100%;
-  height: 30px;
-  margin-top: auto;
-  border-radius: 8px;
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
-}
-
-.agent-info-expiry-button:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border-color: var(--border-default);
-}
-
-.agent-expiry-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 9000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  background: rgba(0, 0, 0, 0.48);
-}
-
-.agent-expiry-modal {
-  width: 390px;
-  max-width: 100%;
-  padding: 20px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 12px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
-}
-
-.agent-expiry-modal-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 18px;
-}
-
-.agent-expiry-modal-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 650;
-  line-height: 1.25;
-  color: var(--text-primary);
-}
-
-.agent-expiry-current {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 1.4;
-  color: var(--text-tertiary);
-}
-
-.agent-expiry-current strong,
-.agent-expiry-status {
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.agent-expiry-status--expired {
-  color: var(--error);
-}
-
-.agent-expiry-close {
-  width: 28px;
-  height: 28px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  font-size: 18px;
-  line-height: 1;
-  transition: background 120ms ease, color 120ms ease;
-}
-
-.agent-expiry-close:hover {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-}
-
-.agent-expiry-section {
-  margin-bottom: 18px;
-}
-
-.agent-expiry-label {
-  margin-bottom: 8px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-tertiary);
-}
-
-.agent-expiry-quick-actions {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.agent-expiry-chip,
-.agent-expiry-secondary-action,
-.agent-expiry-primary-action {
-  height: 34px;
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
-}
-
-.agent-expiry-chip {
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-primary);
-  color: var(--text-primary);
-}
-
-.agent-expiry-chip:hover,
-.agent-expiry-secondary-action:hover {
-  border-color: var(--border-default);
-  background: var(--bg-secondary);
-}
-
-.agent-expiry-chip--selected,
-.agent-expiry-chip--selected:hover {
-  border-color: var(--text-primary);
-  background: var(--text-primary);
-  color: var(--bg-primary);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
-}
-
-.agent-expiry-input {
-  width: 100%;
-  height: 40px;
-  padding: 0 12px;
-  box-sizing: border-box;
-  border: 1px solid var(--border-subtle);
-  border-radius: 9px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  font-size: 13px;
-}
-
-.agent-expiry-input:focus {
-  outline: none;
-  border-color: var(--text-secondary);
-  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
-}
-
-.agent-expiry-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding-top: 2px;
-}
-
-.agent-expiry-action-group {
-  display: flex;
-  gap: 8px;
-}
-
-.agent-expiry-secondary-action {
-  padding: 0 14px;
-  border: 1px solid var(--border-subtle);
-  background: transparent;
-  color: var(--text-secondary);
-}
-
-.agent-expiry-primary-action {
-  padding: 0 16px;
-  border: 1px solid var(--text-primary);
-  background: var(--text-primary);
-  color: var(--bg-primary);
-}
-
-.agent-expiry-primary-action:disabled,
-.agent-expiry-secondary-action:disabled,
-.agent-expiry-chip:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-
-[data-theme="dark"] .agent-expiry-input:focus {
-  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
-}
-
-/* ── Token glass inner card ── */
-.agent-info-token-glass {
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: 12px;
-  padding: 16px;
-}
-[data-theme="dark"] .agent-info-token-glass {
-  background: rgba(255, 255, 255, 0.04);
-  border-color: rgba(255, 255, 255, 0.06);
-}
-
-/* ── Token hero ── */
-.agent-info-token-hero {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 14px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-[data-theme="dark"] .agent-info-token-hero {
-  border-bottom-color: rgba(255, 255, 255, 0.06);
-}
-.agent-info-token-hero-label {
-  font-size: 10px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--text-tertiary);
-}
-.agent-info-token-hero-value {
-  font-size: 32px;
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.03em;
-  background: linear-gradient(135deg, #1f2328 0%, #6b7280 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  width: fit-content;
-}
-[data-theme="dark"] .agent-info-token-hero-value {
-  background: linear-gradient(135deg, #e1e1e8 0%, #8b8b9e 100%);
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-.agent-info-token-hero-unit {
-  font-size: 20px;
-  font-weight: 600;
-  letter-spacing: 0;
-  margin-left: 1px;
-}
-
-/* ── Token stats grid ── */
-.agent-info-token-stats {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-.agent-info-stat-item {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.agent-info-stat-label {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-tertiary);
-}
-.agent-info-stat-value {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  line-height: 1.3;
-}
-.agent-info-stat-unit {
-  font-size: 10px;
-  font-weight: 500;
-  opacity: 0.5;
-  margin-left: 1px;
-}
-
-/* ── Model inner card ── */
-.agent-info-model-card {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: var(--bg-secondary);
-  border: none;
-  margin-bottom: 12px;
-}
-[data-theme="dark"] .agent-info-model-card {
-  background: rgba(255, 255, 255, 0.03);
-}
-.agent-info-model-card-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  font-size: 14px;
-  flex-shrink: 0;
-}
-.agent-info-model-card-text {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-width: 0;
-}
-.agent-info-model-card-label {
-  font-size: 9px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-tertiary);
-}
-.agent-info-model-card-name {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ── Meta rows ── */
-.agent-info-meta-list {
-  display: flex;
-  flex-direction: column;
-}
-.agent-info-meta-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 6px 0;
-  font-size: 11px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
-}
-[data-theme="dark"] .agent-info-meta-row {
-  border-bottom-color: rgba(255, 255, 255, 0.04);
-}
-.agent-info-meta-row:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-.agent-info-meta-row > span:first-child {
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-}
-.agent-info-meta-row > span:last-child {
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-align: right;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ── Meta rows — visual block, no dividers ── */
-.agent-info-meta-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.agent-info-meta-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 6px 8px;
-  font-size: 12px;
-  border-radius: 4px;
-  transition: background 100ms ease;
-}
-
-.agent-info-meta-row:hover {
-  background: var(--bg-secondary);
-}
-
-.agent-info-meta-row > span:first-child {
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-}
-
-.agent-info-meta-row > span:last-child {
-  font-weight: 500;
-  color: var(--text-secondary);
-  text-align: right;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agent-info-meta-list--model {
-  margin-bottom: 12px;
-}
-
-.agent-info-profile-block {
-  margin-top: 2px;
-  padding-top: 12px;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .agent-info-profile-block {
-  border-top-color: rgba(255, 255, 255, 0.06);
-}
-
-.agent-info-profile-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0 0 10px;
-}
-
-/* (variant toggle removed — saas is the only style) */
-
-
-.agent-chat-shell {
-  flex: 1;
-  min-height: 0;
-  box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.55);
-  backdrop-filter: blur(12px) saturate(1.6);
-  -webkit-backdrop-filter: blur(12px) saturate(1.6);
-}
-[data-theme="dark"] .agent-chat-shell {
-  background: rgba(22, 22, 30, 0.7);
-}
-
-.agent-chat-area.has-live-panel {
-  gap: 0;
-  padding-right: 0;
-  box-sizing: border-box;
-}
-
-.agent-chat-area.has-live-panel .agent-side-panel {
-  border: 0;
-  border-left: 1px solid var(--border-subtle);
-  border-radius: 0;
-  overflow: hidden;
-  align-self: stretch;
-}
-
-.aware-side-preview {
-  height: 100%;
-  overflow: auto;
-  padding: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.aware-side-section {
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--bg-primary);
-  padding: 14px;
-}
-
-.aware-side-section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 10px;
-}
-
-.aware-side-focus {
-  border-radius: 7px;
-}
-
-.aware-side-focus + .aware-side-focus {
-  margin-top: 6px;
-}
-
-.aware-side-focus.done {
-  opacity: 0.72;
-}
-
-.aware-side-focus-head {
-  width: 100%;
-  border: 1px solid transparent;
-  background: color-mix(in srgb, var(--bg-secondary) 34%, transparent);
-  color: inherit;
-  border-radius: 7px;
-  padding: 9px 10px;
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  text-align: left;
-  cursor: pointer;
-  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.aware-side-focus-head:hover {
-  background: var(--bg-secondary);
-  border-color: var(--border-subtle);
-  color: var(--text-primary);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-}
-
-.aware-side-focus-head .aware-side-item-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.aware-side-focus-badge {
-  display: inline-flex;
-  align-items: center;
-  height: 18px;
-  padding: 0 7px;
-  border-radius: 999px;
-  font-size: 11px;
-  line-height: 18px;
-  font-weight: 500;
-  text-decoration: none;
-  white-space: nowrap;
-  border: 1px solid transparent;
-}
-
-.aware-side-focus-badge.active,
-.aware-side-focus-badge.system {
-  color: #4f7db8;
-  background: color-mix(in srgb, #4f7db8 9%, transparent);
-  border-color: color-mix(in srgb, #4f7db8 18%, transparent);
-}
-
-.aware-side-focus-badge.done {
-  color: color-mix(in srgb, var(--success, #10b981) 72%, black);
-  background: color-mix(in srgb, var(--success, #10b981) 9%, transparent);
-  border-color: color-mix(in srgb, var(--success, #10b981) 18%, transparent);
-}
-
-.aware-side-check {
-  width: 14px;
-  height: 14px;
-  border-radius: 4px;
-  border: 1.5px solid var(--border-strong);
-  color: var(--bg-primary);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  line-height: 1;
-  font-weight: 700;
-  flex: 0 0 14px;
-  margin-top: 2px;
-  box-sizing: border-box;
-}
-
-.aware-side-check.active {
-  border-color: var(--accent-primary);
-  background: color-mix(in srgb, var(--accent-primary) 18%, transparent);
-  color: var(--accent-primary);
-}
-
-.aware-side-check.done {
-  border-color: var(--success, #10b981);
-  background: var(--success, #10b981);
-}
-
-.aware-side-status-dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 999px;
-  flex: 0 0 9px;
-  margin-top: 5px;
-  box-shadow: 0 0 0 3px transparent;
-}
-
-.aware-side-status-dot.active {
-  background: #4f7db8;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #4f7db8 12%, transparent);
-}
-
-.aware-side-status-dot.done {
-  background: var(--success, #10b981);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #10b981) 12%, transparent);
-}
-
-.aware-side-focus-marker {
-  display: none;
-}
-
-.aware-side-focus-marker.todo {
-  border-color: var(--border-strong);
-}
-
-.aware-side-focus-marker.active {
-  background: #4f7db8;
-  border-color: #4f7db8;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #4f7db8 14%, transparent);
-}
-
-.aware-side-focus-marker.done {
-  background: var(--success, #10b981);
-  border-color: var(--success, #10b981);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success, #10b981) 12%, transparent);
-}
-
-.aware-side-focus-marker.system {
-  background: #4f7db8;
-  border-color: #4f7db8;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #4f7db8 14%, transparent);
-}
-
-.aware-side-title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.aware-view-switch,
-.aware-calendar-toolbar {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px;
-  border-radius: 7px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-}
-
-.aware-view-button {
-  border: 0;
-  background: transparent;
-  color: var(--text-tertiary);
-  border-radius: 5px;
-  padding: 3px 7px;
-  font-size: 11px;
-  line-height: 16px;
-  cursor: pointer;
-}
-
-.aware-view-button.active {
-  color: var(--text-primary);
-  background: var(--bg-primary);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
-}
-
-.aware-side-focus-group + .aware-side-focus-group {
-  margin-top: 14px;
-}
-
-.aware-side-subtitle {
-  display: inline-flex;
-  align-items: center;
-  height: 22px;
-  padding: 0 8px;
-  border-radius: 999px;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  font-size: 11px;
-  line-height: 16px;
-  color: var(--text-tertiary);
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.aware-side-collapse {
-  width: auto;
-  max-width: 100%;
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  border-radius: 7px;
-  padding: 5px 8px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  cursor: pointer;
-  font-size: 12px;
-  line-height: 16px;
-  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.aware-side-collapse:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-}
-
-.aware-side-collapse:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 26%, transparent);
-}
-
-.aware-calendar {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.aware-calendar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.aware-calendar-toolbar {
-  align-self: flex-start;
-}
-
-.aware-calendar-nav {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 0;
-}
-
-.aware-calendar-nav-button,
-.aware-calendar-range {
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-primary);
-  color: var(--text-secondary);
-  border-radius: 6px;
-  height: 26px;
-  padding: 0 8px;
-  font-size: 11px;
-  line-height: 24px;
-  cursor: pointer;
-}
-
-.aware-calendar-nav-button {
-  width: 26px;
-  padding: 0;
-  font-size: 16px;
-  color: var(--text-tertiary);
-}
-
-.aware-calendar-range {
-  max-width: 190px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.aware-calendar-nav-button:hover,
-.aware-calendar-range:hover {
-  color: var(--text-primary);
-  border-color: var(--border-default);
-  background: var(--bg-secondary);
-}
-
-.aware-calendar-grid {
-  display: grid;
-  gap: 6px;
-  min-width: 0;
-  overflow: visible;
-}
-
-.aware-calendar-grid.mode-day {
-  grid-template-columns: 1fr;
-}
-
-.aware-calendar-grid.mode-week,
-.aware-calendar-grid.mode-month {
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-
-.aware-calendar-day {
-  min-width: 0;
-  min-height: 62px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 7px;
-  padding: 6px;
-  background: var(--bg-primary);
-  overflow: visible;
-  position: relative;
-}
-
-.aware-calendar-day.is-today {
-  border-color: color-mix(in srgb, #4f7db8 42%, var(--border-subtle));
-  background: color-mix(in srgb, #4f7db8 5%, var(--bg-primary));
-}
-
-.aware-calendar-day-label {
-  font-size: 10px;
-  line-height: 14px;
-  color: var(--text-tertiary);
-  margin-bottom: 4px;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.aware-calendar-today-pill {
-  font-size: 9px;
-  line-height: 13px;
-  padding: 0 5px;
-  border-radius: 999px;
-  color: #3f6696;
-  background: color-mix(in srgb, #4f7db8 14%, transparent);
-}
-
-.aware-calendar-empty {
-  color: var(--text-tertiary);
-  opacity: 0.45;
-  font-size: 11px;
-}
-
-.aware-calendar-event {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  color: var(--text-secondary);
-  padding: 4px 0;
-  min-width: 0;
-  max-width: 100%;
-  position: relative;
-  cursor: default;
-}
-
-.aware-calendar-event::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  right: auto;
-  left: 0;
-  bottom: calc(100% + 8px);
-  z-index: 20;
-  width: max-content;
-  max-width: min(360px, 56vw);
-  padding: 10px 12px;
-  border-radius: 8px;
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-elevated, var(--bg-primary));
-  color: var(--text-primary);
-  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
-  font-size: 12px;
-  line-height: 1.45;
-  white-space: pre-line;
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(2px);
-  transition: opacity 80ms ease, transform 80ms ease, visibility 80ms ease;
-  pointer-events: none;
-}
-
-.aware-calendar-event::before {
-  content: "";
-  position: absolute;
-  right: auto;
-  left: 14px;
-  bottom: calc(100% + 3px);
-  z-index: 21;
-  width: 10px;
-  height: 10px;
-  background: var(--bg-elevated, var(--bg-primary));
-  border-right: 1px solid var(--border-subtle);
-  border-bottom: 1px solid var(--border-subtle);
-  transform: rotate(45deg);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 80ms ease, visibility 80ms ease;
-  pointer-events: none;
-}
-
-.aware-calendar-day:nth-child(7n) .aware-calendar-event::after,
-.aware-calendar-day:nth-child(7n - 1) .aware-calendar-event::after {
-  left: auto;
-  right: 0;
-}
-
-.aware-calendar-day:nth-child(7n) .aware-calendar-event::before,
-.aware-calendar-day:nth-child(7n - 1) .aware-calendar-event::before {
-  left: auto;
-  right: 14px;
-}
-
-.aware-calendar-day:nth-child(-n + 7) .aware-calendar-event::after {
-  top: calc(100% + 8px);
-  bottom: auto;
-  transform: translateY(-2px);
-}
-
-.aware-calendar-day:nth-child(-n + 7) .aware-calendar-event::before {
-  top: calc(100% + 3px);
-  bottom: auto;
-  border-right: 0;
-  border-bottom: 0;
-  border-left: 1px solid var(--border-subtle);
-  border-top: 1px solid var(--border-subtle);
-}
-
-.aware-calendar-event:hover::after {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-}
-
-.aware-calendar-event:hover::before {
-  opacity: 1;
-  visibility: visible;
-}
-
-.aware-calendar-event-body {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  flex: 1 1 auto;
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.aware-calendar-event-title {
-  font-size: 11px;
-  line-height: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.aware-calendar-event-meta {
-  font-size: 10px;
-  line-height: 13px;
-  color: var(--text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.aware-calendar-event.recurring .aware-calendar-event-title,
-.aware-calendar-event.recurring .aware-calendar-event-meta {
-  white-space: normal;
-  overflow-wrap: anywhere;
-}
-
-.aware-calendar-more {
-  font-size: 10px;
-  color: var(--text-tertiary);
-}
-
-.aware-calendar-recurring {
-  border-top: 1px solid var(--border-subtle);
-  padding-top: 8px;
-}
-
-.aware-side-count {
-  flex: 0 0 auto;
-  font-size: 10px;
-  line-height: 1;
-  color: var(--text-tertiary);
-  padding: 4px 7px;
-  border-radius: 999px;
-  background: var(--bg-secondary);
-  margin-top: 1px;
-}
-
-.aware-side-chevron {
-  color: var(--text-tertiary);
-  font-size: 9px;
-  line-height: 16px;
-  transform: rotate(0deg);
-  transition: transform 0.15s ease;
-  margin-top: 1px;
-}
-
-.aware-side-chevron.open {
-  transform: rotate(90deg);
-}
-
-.aware-side-nested {
-  padding: 2px 0 10px 22px;
-}
-
-.aware-side-item,
-.aware-side-trigger {
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-  border-radius: 7px;
-  padding: 7px 8px;
-}
-
-.aware-side-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 999px;
-  background: var(--border-strong);
-  margin-top: 5px;
-  flex: 0 0 8px;
-}
-
-.aware-side-dot.active {
-  background: var(--accent-primary);
-}
-
-.aware-side-dot.done {
-  background: var(--success, #10b981);
-}
-
-.aware-side-item-title {
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--text-primary);
-}
-
-.aware-side-item-meta {
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--text-tertiary);
-  margin-top: 2px;
-}
-
-.aware-side-trigger-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.aware-side-trigger.done .aware-side-item-title {
-  color: var(--text-tertiary);
-  text-decoration: line-through;
-}
-
-.aware-side-empty {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  padding: 8px 0;
-}
-
-.aware-side-empty.compact {
-  padding: 6px 0;
-}
-
-.aware-side-reflection {
-  border-top: 1px solid var(--border-subtle);
-}
-
-.aware-side-reflection:first-of-type {
-  border-top: none;
-}
-
-.aware-side-reflection-head {
-  width: 100%;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  padding: 8px 0;
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  text-align: left;
-  cursor: pointer;
-}
-
-.aware-side-reflection-head:hover {
-  color: var(--text-primary);
-}
-
-.aware-side-reflection-detail {
-  padding: 0 0 8px 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.aware-side-reflection-message {
-  padding: 7px 8px;
-  border-radius: 6px;
-  background: var(--bg-secondary);
-  border-left: 2px solid var(--border-subtle);
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  min-width: 0;
-}
-
-.aware-side-reflection-message.role-assistant {
-  border-left-color: var(--accent-primary);
-}
-
-.aware-side-reflection-message.role-tool_call,
-.aware-side-reflection-message.role-tool_result {
-  border-left-color: var(--text-tertiary);
-}
-
-.aware-side-reflection-role {
-  font-size: 9px;
-  line-height: 1;
-  color: var(--text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0;
-  font-family: var(--font-mono, monospace);
-}
-
-.aware-side-reflection-text {
-  font-size: 11px;
-  line-height: 1.45;
-  color: var(--text-secondary);
-  overflow-wrap: anywhere;
-}
-
-/* ─── AgentBay Live Preview Panel ───────────────── */
-.live-panel {
-  /* Width is now controlled via inline style from the component (resizable). */
-  min-width: 300px;
-  max-width: 65vw;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  border-left: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  animation: livePanelSlideIn 250ms ease;
-}
-
-/* Drag handle on the left edge of the live panel */
-.live-panel-resize-handle {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 5px;
-  cursor: col-resize;
-  z-index: 10;
-  /* Show a subtle visual indicator */
-  background: transparent;
-  transition: background 150ms ease;
-}
-
-.live-panel-resize-handle:hover,
-.live-panel-resize-handle:active {
-  background: var(--accent-primary);
-  opacity: 0.35;
-}
-
-@keyframes livePanelSlideIn {
-  from { opacity: 0; transform: translateX(16px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-.live-panel-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 48px;
-  padding: 7px 10px 7px 12px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-elevated);
-  flex-shrink: 0;
-}
-.live-panel-title {
-  flex: 1;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  line-height: 1.3;
-}
-
-.agent-side-panel-tabs {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  min-width: 0;
-  flex: 1;
-  overflow-x: auto;
-  scrollbar-width: none;
-  flex-shrink: 0;
-}
-
-.agent-side-panel-tabs::-webkit-scrollbar {
-  display: none;
-}
-
-.agent-side-panel-tab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  min-width: 0;
-  height: 30px;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-tertiary);
-  font-size: 12px;
-  font-weight: 550;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
-}
-
-.agent-side-panel-tab:hover {
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-}
-
-.agent-side-panel-tab.active {
-  color: var(--text-primary);
-  background: var(--bg-primary);
-  border-color: var(--border-subtle);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
-}
-
-.agent-side-panel-tab-dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--accent-primary) 72%, var(--text-tertiary));
-  opacity: 0.75;
-  flex-shrink: 0;
-}
-
-.live-panel-tabs {
-  display: flex;
-  gap: 2px;
-}
-
-.live-panel-tab {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 150ms ease;
-}
-
-.live-panel-tab:hover {
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-}
-
-.live-panel-tab.active {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.live-panel-collapse {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  transition: all 150ms ease;
-}
-
-.live-panel-collapse:hover {
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-}
-
-.live-panel-header-right {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  margin-left: auto;
-}
-
-.live-panel-workspace-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  margin-right: 2px;
-}
-
-.live-panel-workspace-actions:empty {
-  display: none;
-}
-
-.live-panel-workspace-actions a.live-panel-icon-btn {
-  text-decoration: none;
-}
-
-.live-panel-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  transition: color 0.15s, background 0.15s;
-}
-.live-panel-icon-btn:hover {
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-}
-.live-panel-icon-btn.active {
-  color: var(--text-primary);
-  background: var(--bg-tertiary);
-}
-
-.live-panel-header-sep {
-  display: inline-block;
-  width: 1px;
-  height: 16px;
-  background: var(--border-subtle);
-  margin: 0 4px;
-  flex-shrink: 0;
-}
-
-.live-panel-take-control {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  border-radius: 6px;
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 150ms ease;
-  margin-right: 4px;
-}
-
-.live-panel-take-control:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--border-strong);
-}
-
-.live-panel-content {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.live-panel-iframe {
-  width: 100%;
-  height: 100%;
-  border: none;
-  background: #000;
-}
-
-.live-panel-browser {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: auto;
-  background: var(--bg-primary);
-}
-
-.live-panel-screenshot {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.live-panel-badge {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 3px 8px;
-  border-radius: 4px;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  backdrop-filter: blur(4px);
-}
-
-.live-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #22c55e;
-  box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
-  animation: livePulse 2s ease-in-out infinite;
-}
-
-@keyframes livePulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.live-panel-code {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  padding: 12px;
-  background: #0d1117;
-  color: #c9d1d9;
-}
-
-.live-panel-code pre {
-  margin: 0;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  font-size: 12px;
-  line-height: 1.6;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.live-panel-transfer {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  padding: 16px;
-  background: var(--bg-primary);
-}
-
-.live-panel-transfer-card {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  max-width: 560px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  padding: 14px;
-  background: var(--bg-elevated);
-}
-
-.live-panel-transfer-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 650;
-}
-
-.live-panel-transfer-route {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
-  align-items: center;
-  gap: 10px;
-  color: var(--text-tertiary);
-}
-
-.live-panel-transfer-route > div {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 10px;
-  border-radius: 8px;
-  background: var(--bg-secondary);
-}
-
-.live-panel-transfer-route span {
-  color: var(--text-tertiary);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.live-panel-transfer-route strong {
-  color: var(--text-primary);
-  font-size: 13px;
-  font-weight: 650;
-}
-
-.live-panel-transfer-route code {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  font-size: 11px;
-  color: var(--text-secondary);
-}
-
-.live-panel-transfer-result {
-  max-height: 220px;
-  overflow: auto;
-  margin: 0;
-  padding: 10px;
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
-  font-size: 11px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.live-panel-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  gap: 8px;
-  color: var(--text-tertiary);
-  font-size: 12px;
-}
-
-/* ─── Workspace Operation Area ───────────────────── */
-.agent-side-panel {
-  background: var(--bg-primary);
-}
-
-.workspace-op {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  overflow: hidden;
-}
-
-.workspace-op-inline-actions {
-  position: absolute;
-  top: 8px;
-  right: 12px;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 4px;
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
-  backdrop-filter: blur(6px);
-  border: 1px solid var(--border-subtle);
-  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
-}
-
-.workspace-op-inline-actions a {
-  display: inline-flex;
-  color: inherit;
-  text-decoration: none;
-}
-
-.workspace-op-icon-btn {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border-subtle);
-  border-radius: 6px;
-  background: var(--bg-primary);
-  color: var(--text-tertiary);
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
-}
-
-.workspace-op-icon-btn:hover,
-.workspace-op-icon-btn.active {
-  background: var(--bg-tertiary);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-}
-
-.workspace-op-save {
-  padding: 2px 6px;
-  border-radius: 5px;
-  background: var(--bg-tertiary);
-  color: var(--text-tertiary);
-  font-size: 11px;
-  line-height: 16px;
-  transition: color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
-}
-
-.workspace-op-save.saving {
-  color: var(--text-secondary);
-}
-
-.workspace-op-save.saved {
-  background: var(--success-subtle);
-  color: var(--success);
-}
-
-.workspace-op-save.error {
-  background: var(--error-subtle);
-  color: var(--error);
-}
-
-.workspace-op-body {
-  --workspace-side-width: 230px;
-  position: relative;
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 230px;
-  background: var(--bg-primary);
-  overflow: hidden;
-}
-
-.workspace-op-body.activity-open {
-  --workspace-side-width: 260px;
-  grid-template-columns: minmax(0, 1fr) 260px;
-}
-
-.workspace-op-body.tree-closed {
-  --workspace-side-width: 0px;
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.workspace-op-body.tree-closed.activity-open {
-  grid-template-columns: minmax(0, 1fr) 260px;
-}
-
-.workspace-op-tree,
-.workspace-op-side {
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-secondary);
-  overflow: hidden;
-}
-
-.workspace-op-tree {
-  border-left: 1px solid var(--border-subtle);
-}
-
-.workspace-op-tree .workspace-op-side-title {
-  justify-content: flex-start;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-
-.workspace-op-side {
-  border-left: 1px solid var(--border-subtle);
-}
-
-.workspace-op-side-title {
-  height: 34px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  color: var(--text-tertiary);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.workspace-op-tree-list {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: 12px 7px 10px;
-}
-
-.workspace-op-side-list {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding-bottom: 10px;
-}
-
-.workspace-op-tree-tools {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.workspace-op-tree-tools-full {
-  width: 100%;
-  justify-content: space-between;
-  min-width: 0;
-}
-
-.workspace-op-tree-actions {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.workspace-op-tree-primary-actions {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.workspace-op-tree-action-btn {
-  width: 26px;
-  height: 26px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 1px solid var(--border-subtle);
-  border-radius: 7px;
-  background: var(--bg-elevated);
-  color: var(--text-secondary);
-  text-decoration: none;
-  font-size: 11px;
-  font-weight: 650;
-  cursor: pointer;
-  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
-}
-
-.workspace-op-tree-action-btn:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-}
-
-.workspace-op-tree-action-btn svg {
-  flex-shrink: 0;
-}
-
-.workspace-op-tree-scope {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 7px;
-  background: color-mix(in srgb, var(--bg-tertiary) 80%, transparent);
-  min-width: 0;
-  flex-shrink: 1;
-}
-
-.workspace-op-tree-scope button {
-  height: 20px;
-  padding: 0 6px;
-  border: none;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--text-tertiary);
-  font-size: 10px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.workspace-op-tree-scope button.active {
-  background: var(--bg-elevated);
-  color: var(--text-primary);
-  box-shadow: var(--shadow-sm);
-}
-
-.workspace-op-mini-btn {
-  height: 24px;
-  padding: 0 8px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 6px;
-  background: var(--bg-elevated);
-  color: var(--text-secondary);
-  font-size: 11px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
-}
-
-.workspace-op-mini-btn:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-}
-
-.workspace-op-mini-btn-icon {
-  width: 24px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@keyframes analysis-tool-running-dot {
-  0%, 100% {
-    opacity: 0.35;
-    transform: scale(0.92);
-  }
-  50% {
-    opacity: 0.78;
-    transform: scale(1);
-  }
-}
-
-.analysis-trace {
-  width: min(760px, calc(100% - 72px));
-  margin: 4px 0 14px 36px;
-  color: var(--text-secondary);
-}
-
-.chat-msg-row--analysis {
-  align-items: flex-start;
-  margin-bottom: 22px;
-}
-
-.chat-msg-row--analysis .analysis-trace {
-  width: min(760px, 100%);
-  margin: 0;
-}
-
-.analysis-trace-shell {
-  position: relative;
-  width: fit-content;
-  max-width: 100%;
-  min-height: 28px;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-
-.analysis-trace-shell::before {
-  content: none;
-}
-
-.analysis-trace--running .analysis-trace-shell::before {
-  content: none;
-}
-
-.analysis-trace-header {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  max-width: 100%;
-  min-height: 28px;
-  border: 0;
-  padding: 0 4px 0 0;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  user-select: none;
-  list-style: none;
-}
-
-.analysis-trace-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  letter-spacing: 0;
-}
-
-.analysis-trace-signal {
-  display: inline-flex;
-  width: 6px;
-  height: 6px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}
-
-.analysis-trace-signal span {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: var(--text-tertiary);
-  opacity: 0.48;
-}
-
-.analysis-trace-signal span:nth-child(2) {
-  display: none;
-}
-
-.analysis-trace-signal span:nth-child(3) {
-  display: none;
-}
-
-.analysis-trace--running .analysis-trace-signal span:first-child {
-  animation: analysis-tool-running-dot 1.25s ease-in-out infinite;
-}
-
-.analysis-trace-chevron {
-  flex-shrink: 0;
-  color: var(--text-tertiary);
-  transition: transform 140ms ease, color var(--transition-fast);
-}
-
-.analysis-trace:not(.analysis-trace--open) .analysis-trace-chevron {
-  transform: rotate(-90deg);
-}
-
-.analysis-trace-body {
-  position: relative;
-  margin-top: 10px;
-  padding: 2px 0 0 2px;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-
-.analysis-trace-body::before {
-  content: none;
-}
-
-.analysis-trace-row {
-  display: grid;
-  grid-template-columns: 22px minmax(0, 1fr);
-  column-gap: 10px;
-}
-
-.analysis-trace-node-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.analysis-trace-node {
-  width: 22px;
-  height: 22px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-tertiary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.analysis-trace-node--thought,
-.analysis-trace-node--done {
-  border-radius: 999px;
-}
-
-.analysis-trace-row--running .analysis-trace-node,
-.analysis-trace-node--pending {
-  color: var(--text-secondary);
-  background: transparent;
-}
-
-.analysis-trace-node--done:not(.analysis-trace-node--pending) {
-  color: var(--text-primary);
-}
-
-.analysis-trace-rail {
-  width: 1px;
-  flex: 1;
-  min-height: 30px;
-  margin-top: 5px;
-  border-radius: 999px;
-  background: var(--border-subtle);
-}
-
-.analysis-trace-row-content {
-  min-width: 0;
-}
-
-.analysis-tool-icon {
-  position: relative;
-  overflow: visible;
-}
-
-.analysis-tool-icon svg {
-  position: relative;
-  z-index: 2;
-}
-
-.analysis-tool-icon--running {
-  background: transparent;
-}
-
-.analysis-tool-icon--running::before {
-  content: none;
-}
-
-.analysis-tool-icon--running::after {
-  content: none;
-}
-
-.workspace-op-tree-dir,
-.workspace-op-tree-file {
-  width: 100%;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-secondary);
-  text-align: left;
-  cursor: pointer;
-  font-size: 13px;
-  line-height: 20px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.workspace-op-tree-dir {
-  font-weight: 600;
-}
-
-.workspace-op-tree-dir.active,
-.workspace-op-tree-file.active {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-.workspace-op-tree-dir-main {
-  min-width: 0;
-  flex: 1;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  text-align: left;
-  font: inherit;
-}
-
-.workspace-op-tree-file {
-  font-weight: 400;
-  color: var(--text-secondary);
-}
-
-.workspace-op-tree-dir:hover,
-.workspace-op-tree-file:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-.workspace-op-tree-file:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.workspace-op-tree-chevron {
-  width: 16px;
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-tertiary);
-  font-size: 15px;
-  line-height: 1;
-}
-
-.workspace-op-tree-empty,
-.workspace-op-side-empty {
-  padding: 12px;
-  color: var(--text-tertiary);
-  font-size: 12px;
-}
-
-.workspace-op-tree-upload {
-  margin: 4px 0;
-  padding: 8px 10px 8px 0;
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--bg-tertiary) 68%, transparent);
-}
-
-.workspace-op-tree-upload-main {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.workspace-op-tree-upload-name {
-  min-width: 0;
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.workspace-op-tree-upload-status {
-  flex-shrink: 0;
-  color: var(--text-tertiary);
-  font-size: 11px;
-}
-
-.workspace-op-tree-upload-bar {
-  width: 100%;
-  height: 4px;
-  margin-top: 6px;
-  border-radius: 999px;
-  background: var(--bg-hover);
-  overflow: hidden;
-}
-
-.workspace-op-tree-upload-bar span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--info);
-  transition: width var(--transition-default);
-}
-
-.workspace-op-tree-upload.processing .workspace-op-tree-upload-bar span {
-  background: var(--warning);
-}
-
-.workspace-op-tree-upload.done .workspace-op-tree-upload-bar span {
-  background: var(--success);
-}
-
-.workspace-op-tree-upload-error {
-  margin-top: 6px;
-  color: var(--error);
-  font-size: 11px;
-  line-height: 1.4;
-}
-
-.workspace-op-main {
-  position: relative;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-  padding: 16px;
-  background: var(--bg-primary);
-}
-
-.workspace-op-tree-edge-toggle {
-  position: absolute;
-  top: 12px;
-  right: calc(var(--workspace-side-width) - 13px);
-  z-index: 8;
-  width: 26px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border-subtle);
-  border-radius: 7px;
-  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
-  color: var(--text-secondary);
-  cursor: pointer;
-  line-height: 1;
-  opacity: 0.86;
-  box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(6px);
-  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.workspace-op-body.tree-closed .workspace-op-tree-edge-toggle {
-  right: 12px;
-}
-
-.workspace-op-tree-edge-toggle:hover,
-.workspace-op-tree-edge-toggle.active:hover {
-  background: var(--bg-elevated);
-  border-color: var(--border-default);
-  color: var(--text-primary);
-  box-shadow: var(--shadow-md);
-}
-
-.workspace-op-side-resize {
-  position: absolute;
-  top: 0;
-  right: calc(var(--workspace-side-width) - 3px);
-  z-index: 6;
-  width: 7px;
-  height: 100%;
-  cursor: col-resize;
-}
-
-.workspace-op-side-resize::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 3px;
-  width: 1px;
-  height: 100%;
-  background: transparent;
-  transition: background var(--transition-fast);
-}
-
-.workspace-op-side-resize:hover::after {
-  background: var(--border-default);
-}
-
-.workspace-op-body.tree-closed .workspace-op-side-resize {
-  display: none;
-}
-
-.workspace-op-main .markdown-content {
-  max-width: 880px;
-  margin: 0 auto;
-}
-
-.markdown-image-wrap {
-  position: relative;
-  display: inline-flex;
-  margin: 8px 0;
-  max-width: 100%;
-}
-
-.markdown-inline-image {
-  max-width: 100%;
-  max-height: 400px;
-  border-radius: 6px;
-  object-fit: contain;
-  cursor: zoom-in;
-  border: 1px solid var(--border-subtle);
-  background: color-mix(in srgb, var(--bg-secondary) 45%, transparent);
-}
-
-.markdown-image-download-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 30px;
-  height: 30px;
-  border: 1px solid color-mix(in srgb, var(--border-default) 88%, transparent);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-elevated) 92%, rgba(0, 0, 0, 0.4));
-  color: var(--text-primary);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 1;
-  cursor: pointer;
-  opacity: 0;
-  transform: translateY(-2px);
-  transition: opacity var(--transition-fast), transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
-  box-shadow: var(--shadow-sm);
-  backdrop-filter: blur(8px);
-}
-
-.markdown-image-wrap:hover .markdown-image-download-btn,
-.markdown-image-wrap:focus-within .markdown-image-download-btn {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.markdown-image-download-btn:hover {
-  background: var(--bg-elevated);
-  border-color: var(--border-default);
-}
-
-.markdown-image-lightbox {
-  position: fixed;
-  inset: 0;
-  z-index: 10030;
-  background: rgba(10, 12, 18, 0.82);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  gap: 16px;
-}
-
-.markdown-image-lightbox__toolbar {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-elevated) 90%, rgba(0, 0, 0, 0.35));
-  box-shadow: var(--shadow-md);
-  backdrop-filter: blur(12px);
-}
-
-.markdown-image-lightbox__btn {
-  width: 34px;
-  height: 34px;
-  border: none;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--text-primary);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: background var(--transition-fast), color var(--transition-fast);
-}
-
-.markdown-image-lightbox__btn:hover {
-  background: var(--bg-secondary);
-}
-
-.markdown-image-lightbox__stage {
-  max-width: min(92vw, 1400px);
-  max-height: calc(100vh - 140px);
-  overflow: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px;
-}
-
-.markdown-image-lightbox__image {
-  max-width: 100%;
-  max-height: calc(100vh - 180px);
-  object-fit: contain;
-  transform-origin: center center;
-  transition: transform var(--transition-fast);
-  box-shadow: var(--shadow-lg);
-  border-radius: 10px;
-  background: white;
-}
-
-.markdown-image-lightbox__footer {
-  position: absolute;
-  left: 50%;
-  bottom: 20px;
-  transform: translateX(-50%);
-  max-width: min(90vw, 820px);
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 12px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--bg-elevated) 90%, rgba(0, 0, 0, 0.35));
-  color: var(--text-primary);
-  border: 1px solid color-mix(in srgb, var(--border-default) 82%, transparent);
-  box-shadow: var(--shadow-md);
-  backdrop-filter: blur(12px);
-  font-size: 12px;
-}
-
-.markdown-image-lightbox__alt {
-  max-width: min(72vw, 640px);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-secondary);
-}
-
-@media (max-width: 720px) {
-  .markdown-image-lightbox {
-    padding: 16px;
-  }
-
-  .markdown-image-lightbox__toolbar {
-    top: 14px;
-    right: 14px;
-    gap: 4px;
-    padding: 6px;
-  }
-
-  .markdown-image-lightbox__btn {
-    width: 30px;
-    height: 30px;
-  }
-
-  .markdown-image-lightbox__footer {
-    bottom: 14px;
-    padding: 7px 10px;
-  }
-}
-
-.workspace-op-empty {
-  height: 100%;
-  min-height: 220px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-tertiary);
-  font-size: 13px;
-}
-
-.workspace-op-preview-paused {
-  min-height: 420px;
-  border: 1px dashed var(--border-subtle);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--bg-secondary) 88%, white);
-}
-
-.workspace-op-deleted {
-  flex-direction: column;
-  gap: 10px;
-  padding: 24px;
-  text-align: center;
-}
-
-.workspace-op-deleted-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
-.workspace-op-deleted-path {
-  max-width: 560px;
-  color: var(--text-secondary);
-  font-size: 13px;
-  line-height: 1.6;
-  word-break: break-word;
-}
-
-.workspace-op-live {
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.workspace-op-live-banner {
-  flex-shrink: 0;
-  color: var(--text-tertiary);
-  font-size: 12px;
-}
-
-.workspace-op-html-fit {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
-  display: flex;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  padding: 10px;
-}
-
-.workspace-op-html-fit iframe {
-  display: block;
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  border: none;
-  background: #fff;
-  border-radius: 8px;
-}
-
-.workspace-op-image-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100%;
-  padding: 24px;
-}
-
-.workspace-op-image {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  border-radius: 14px;
-  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
-  background: #fff;
-}
-
-.workspace-op-modal-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 40;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(15, 23, 42, 0.18);
-  backdrop-filter: blur(2px);
-}
-
-.workspace-op-modal {
-  width: min(420px, calc(100% - 32px));
-  border: 1px solid var(--border-subtle);
-  border-radius: 16px;
-  background: var(--bg-primary);
-  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
-  padding: 20px;
-}
-
-.workspace-op-modal-title {
-  font-size: 18px;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.workspace-op-modal-text {
-  margin-top: 10px;
-  color: var(--text-secondary);
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.workspace-op-modal-actions {
-  margin-top: 18px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.workspace-op-editor {
-  width: 100%;
-  height: 100%;
-  min-height: 420px;
-  resize: none;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  padding: 14px;
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 1.6;
-  outline: none;
-}
-
-.workspace-op-editor:focus {
-  border-color: var(--border-strong);
-}
-
-.workspace-op-table-wrap {
-  max-width: 100%;
-  overflow: auto;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--bg-secondary);
-}
-
-.workspace-op-table {
-  width: max-content;
-  min-width: 100%;
-  border-collapse: collapse;
-  font-size: 13px;
-  table-layout: auto;
-}
-
-.workspace-op-table thead th {
-  background: color-mix(in srgb, var(--bg-tertiary) 92%, transparent);
-  color: var(--text-primary);
-  font-weight: 700;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.workspace-op-table td,
-.workspace-op-table th {
-  padding: 8px 10px;
-  border-right: 1px solid var(--border-subtle);
-  border-bottom: 1px solid var(--border-subtle);
-  white-space: nowrap;
-}
-
-.workspace-op-table tbody tr:nth-child(even) td {
-  background: color-mix(in srgb, var(--bg-primary) 84%, var(--bg-tertiary));
-}
-
-.workspace-op-table td:empty::after,
-.workspace-op-table th:empty::after {
-  content: " ";
-}
-
-.workspace-op-table tr:last-child td {
-  border-bottom: none;
-}
-
-.workspace-op-pdf {
-  width: 100%;
-  height: 100%;
-  min-height: 640px;
-  border: none;
-  border-radius: 8px;
-  background: var(--bg-secondary);
-}
-
-.workspace-op-text-preview {
-  margin: 0;
-  padding: 14px;
-  border-radius: 8px;
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 13px;
-  line-height: 1.7;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.workspace-op-ppt-preview {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.workspace-op-slide-card {
-  margin: 0;
-}
-
-.workspace-op-slide-label {
-  margin-bottom: 6px;
-  color: var(--text-tertiary);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.workspace-op-slide-canvas {
-  position: relative;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: #fff;
-  overflow: hidden;
-}
-
-.workspace-op-slide-shape {
-  position: absolute;
-  padding: 4px;
-  color: #222;
-  font-size: 12px;
-  line-height: 1.35;
+  height: calc(100vh - 100px);
   overflow: hidden;
-  white-space: pre-wrap;
-}
-
-.workspace-op-revision {
-  margin: 10px;
-  padding: 10px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--bg-primary);
-}
-
-.workspace-op-revision-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-size: 12px;
-}
-
-.workspace-op-revision-meta {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.workspace-op-revision strong {
-  font-size: 13px;
-}
-
-.workspace-op-revision span {
-  color: var(--text-tertiary);
-}
-
-.workspace-op-revision-time {
-  flex-shrink: 0;
-  color: var(--text-tertiary);
-  font-size: 11px;
-}
-
-.workspace-op-revision pre {
-  max-height: 160px;
-  overflow: auto;
-  margin: 0 0 8px;
-  color: var(--text-tertiary);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  line-height: 1.5;
-  white-space: pre-wrap;
-}
-
-.workspace-op-revision-note {
-  color: var(--text-secondary);
-}
-
-/* Collapsed toggle button (shown on the right edge) */
-.live-panel-toggle {
-  position: fixed;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 28px;
-  height: 56px;
-  border: 1px solid var(--border-subtle);
-  border-right: none;
-  border-radius: 8px 0 0 8px;
-  background: var(--bg-elevated);
-  color: var(--text-tertiary);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  transition: all 150ms ease;
-  z-index: 10;
-}
-
-.live-panel-toggle:hover {
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-  width: 32px;
-}
-
-.live-panel-toggle-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #22c55e;
-  box-shadow: 0 0 4px rgba(34, 197, 94, 0.6);
-  animation: livePulse 2s ease-in-out infinite;
-}
-
-/* Responsive: hide live panel on narrow screens */
-@media (max-width: 900px) {
-  .live-panel {
-    display: none;
-  }
-  .live-panel-toggle {
-    display: none;
-  }
 }
 
 .chat-messages {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: var(--space-4) 0;
 }
@@ -6484,16 +3385,12 @@ select:focus {
   color: white;
 }
 
-/* ── SaaS chat message system (replaces inline styles) ── */
-.chat-msg-row {
+.chat-input-area {
   display: flex;
-  flex-direction: row;
-  gap: 8px;
-  margin-bottom: 8px;
-  animation: fadeIn 0.2s ease;
-}
-.chat-msg-row--user {
-  flex-direction: row-reverse;
+  align-items: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-4) 0;
+  border-top: 1px solid var(--border-subtle);
 }
 
 .chat-msg-avatar {
@@ -7024,159 +3921,63 @@ select:focus {
   min-height: 26px;
 }
 
-.chat-file-pill--workspace {
-  max-width: min(460px, 100%);
-}
-
-.chat-file-pill__fill {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-secondary));
-  transition: width 0.12s ease;
-  pointer-events: none;
-  border-radius: inherit;
-}
-
-.chat-file-pill__row {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 2px 10px;
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.chat-file-pill__icon {
-  display: inline-flex;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-}
-
-.chat-file-pill__thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 3px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.chat-file-pill__name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--text-base);
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--text-primary);
-}
-
-.chat-file-pill__source {
-  flex-shrink: 0;
-  padding: 1px 5px;
-  border-radius: 5px;
-  background: var(--bg-tertiary);
-  color: var(--text-tertiary);
-  font-size: 11px;
-  line-height: 16px;
-}
-
-.chat-file-pill__size {
-  font-size: 14px;
-  line-height: 14px;
-  color: var(--text-tertiary);
-  flex-shrink: 0;
-}
-
-.chat-file-pill__pct {
-  font-size: 14px;
-  line-height: 14px;
-  font-variant-numeric: tabular-nums;
-  color: var(--text-primary);
-  flex-shrink: 0;
-}
-
-.chat-file-pill__remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 2px;
-  border: none;
-  background: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 1;
-  flex-shrink: 0;
+.chat-file-pill--workspace {
+  max-width: min(460px, 100%);
 }
 
-.chat-file-pill__remove:hover {
-  color: var(--text-primary);
+.chat-file-pill__fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  background: color-mix(in srgb, var(--accent-primary) 20%, var(--bg-secondary));
+  transition: width 0.12s ease;
+  pointer-events: none;
+  border-radius: inherit;
 }
 
-.chat-composer .chat-input {
-  flex: 1 1 auto;
-  width: 100%;
+.chat-file-pill__row {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
   min-width: 0;
-  min-height: 0;
-  max-height: 180px;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 2px 2px 4px;
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--text-primary);
-  outline: none;
-  align-self: stretch;
-  white-space: pre-wrap;
-  box-shadow: none;
-  transition: none;
-  overflow-y: auto;
-  resize: none;
-}
-
-.chat-composer .chat-input:focus {
-  border: none;
-  box-shadow: none;
-  background: transparent;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
-.chat-composer .chat-input:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
+.chat-file-pill__icon {
+  display: inline-flex;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
 }
 
-.chat-composer-toolbar .btn-stop-generation {
+.chat-file-pill__thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  object-fit: cover;
   flex-shrink: 0;
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  padding: 0;
-  border-radius: 6px;
-  box-sizing: border-box;
 }
 
-.chat-input {
+.chat-file-pill__name {
   flex: 1;
   min-height: 40px;
+  max-height: 220px;
   background: var(--bg-secondary);
   border: 1px solid var(--border-default);
-  border-radius: 8px;
-  padding: 0 14px;
+  border-radius: 10px;
+  padding: 10px 14px;
   font-size: 14px;
+  line-height: 20px;
   color: var(--text-primary);
   transition: border-color 150ms ease, box-shadow 150ms ease;
   outline: none;
-  align-self: center;
-  white-space: pre-wrap;
+  resize: none;
+  font-family: inherit;
 }
 
 .chat-input::placeholder {
@@ -7443,268 +4244,257 @@ select:focus {
   }
 }
 
-/* ─── Login QR Code ────────────────────────────────── */
+/* ─── Mobile Responsive ─────────────────────────────── */
 
-.login-qr-toggle {
-    margin-top: 24px;
-    padding: 12px;
-    border: 1px dashed var(--border-strong);
-    border-radius: var(--radius-lg);
-    text-align: center;
-    cursor: pointer;
-    font-size: var(--text-sm);
-    color: var(--text-secondary);
-    transition: all var(--transition-fast);
+/* Hamburger menu button — hidden on desktop */
+.mobile-menu-btn {
+  display: none;
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 20;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-md);
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-primary);
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.login-qr-toggle:hover {
-    border-color: var(--accent-primary);
-    color: var(--text-primary);
-    background: var(--bg-hover);
+/* Sidebar backdrop — hidden on desktop */
+.sidebar-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9;
+  background: rgba(0, 0, 0, 0.5);
+  -webkit-tap-highlight-color: transparent;
 }
 
-.login-qr-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    padding: 20px 0;
+.sidebar-backdrop.visible {
+  display: block;
 }
 
-.login-qr-container {
-    position: relative;
-    width: 200px;
-    height: 200px;
-    padding: 10px;
-    background: white;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
+/* Mobile top bar with logo — hidden on desktop */
+.mobile-top-bar {
+  display: none;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px 10px 56px;
+  height: 48px;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--bg-primary);
+  position: sticky;
+  top: 0;
+  z-index: 5;
 }
 
-.login-qr-container img {
-    width: 100%;
-    height: 100%;
-    display: block;
+.mobile-top-bar img {
+  width: 20px;
+  height: 20px;
 }
 
-.login-qr-container img.blur {
-    filter: blur(4px);
-    opacity: 0.5;
+.mobile-top-bar span {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
 }
 
-.login-qr-overlay {
-    position: absolute;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.7);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-    padding: 20px;
-    text-align: center;
+/* Dashboard responsive classes — desktop baselines */
+.stats-grid {
+  grid-template-columns: repeat(4, 1fr);
 }
 
-.login-qr-overlay p {
-    color: white;
-    font-size: var(--text-sm);
-    margin-bottom: 12px;
+.agent-row-header {
+  display: grid;
+  grid-template-columns: 220px 1fr 150px 100px;
 }
 
-.login-qr-overlay button {
-    background: var(--accent-primary);
-    color: var(--bg-primary);
-    border: none;
-    padding: 6px 16px;
-    border-radius: var(--radius-md);
-    font-size: var(--text-xs);
-    font-weight: 600;
+.agent-row {
+  grid-template-columns: 220px 1fr 150px 100px;
 }
 
-.login-qr-overlay.success {
-    background: rgba(34, 197, 94, 0.9);
+.activity-feed-item {
+  padding: 7px 12px;
+  font-size: 13px;
 }
 
-.login-qr-hint {
-    font-size: var(--text-xs);
-    color: var(--text-tertiary);
-    text-align: center;
+/* Plaza responsive classes — desktop baselines */
+.post-content {
+  padding-left: 40px;
 }
 
-.login-qr-back {
-    margin-top: 12px;
-    font-size: var(--text-sm);
-    color: var(--accent-text);
-    cursor: pointer;
+.post-actions {
+  padding-left: 40px;
 }
 
-.login-qr-back:hover {
-    text-decoration: underline;
+.post-composer-footer {
+  padding-left: 42px;
 }
 
-/* ─── Drop Zone Overlay (drag-and-drop upload) ───── */
+.post-comments {
+  padding-left: 40px;
+}
 
-.drop-zone-wrapper {
-    position: relative;
+.plaza-stats-grid-item {
+  padding: 16px 20px;
 }
 
-.drop-zone-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 100;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 8px;
-    background: rgba(99, 102, 241, 0.07);
-    border: 2px dashed rgba(99, 102, 241, 0.45);
-    border-radius: 12px;
-    pointer-events: none;
-    animation: dropZoneFadeIn 0.15s ease;
-    backdrop-filter: blur(2px);
-}
-
-.drop-zone-overlay__icon {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background: rgba(99, 102, 241, 0.12);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    color: var(--accent-primary);
+.plaza-sidebar {
+  width: 260px;
+  position: sticky;
 }
 
-.drop-zone-overlay__text {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--accent-primary);
-    letter-spacing: 0.2px;
+.agent-chat-sidebar {
+  width: 220px;
+  border-right: 1px solid var(--border-subtle);
 }
 
-.drop-zone-overlay__hint {
-    font-size: 11px;
+@media (max-width: 768px) {
+  .mobile-menu-btn {
+    display: flex;
+  }
+
+  .mobile-top-bar {
+    display: flex;
+  }
+
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 200ms ease;
+    z-index: 11;
+  }
+
+  .sidebar.mobile-open {
+    transform: translateX(0);
+  }
+
+  .main-content {
+    margin-left: 0;
+    width: 100%;
+    max-width: 100%;
+    padding: 0 16px 16px;
+  }
+
+  .page-header {
+    padding-top: 8px;
+  }
+
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .agent-row-header {
+    display: none;
+  }
+
+  .agent-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .agent-row .agent-row-activity {
+    display: none;
+  }
+
+  .agent-row .agent-row-meta {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    font-size: 12px;
     color: var(--text-tertiary);
-}
+  }
 
-@keyframes dropZoneFadeIn {
-    from {
-        opacity: 0;
-        border-color: transparent;
-    }
-    to {
-        opacity: 1;
-        border-color: rgba(99, 102, 241, 0.45);
-    }
-}
+  .activity-feed-item {
+    padding: 5px 8px;
+    font-size: 12px;
+  }
 
-[data-theme="light"] .drop-zone-overlay {
-    background: rgba(99, 102, 241, 0.06);
-    border-color: rgba(99, 102, 241, 0.35);
-}
+  /* Chat */
+  .chat-container {
+    height: calc(100dvh - 120px);
+  }
 
-/* Workspace Panel file actions */
-.workspace-op-tree-file-name {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .chat-bubble {
+    max-width: 85%;
+  }
 
-.workspace-op-tree-file-delete {
-  flex-shrink: 0;
-  display: none;
-  background: transparent;
-  border: none;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 4px;
-  align-items: center;
-  justify-content: center;
-}
+  .chat-avatar {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+  }
 
-.workspace-op-tree-file-delete:hover {
-  color: var(--system-danger);
-  background: var(--bg-black-10);
-}
+  .chat-message {
+    gap: 8px;
+  }
 
-.workspace-op-tree-dir:hover .workspace-op-tree-file-delete,
-.workspace-op-tree-file:hover .workspace-op-tree-file-delete {
-  display: flex;
-}
+  .chat-input-area {
+    padding: 8px 0;
+    gap: 8px;
+  }
 
-/* Tool source tabs */
-.tool-source-tabs {
-  display: inline-flex;
-  align-self: flex-start;
-  align-items: center;
-  gap: 2px;
-  padding: 3px;
-  margin-bottom: 12px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  background: var(--bg-secondary);
-  width: fit-content;
-  max-width: 100%;
-}
+  .page-header {
+    margin-bottom: 12px;
+  }
 
-.tool-source-tabs button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  min-width: 0;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 18px;
-  padding: 5px 11px;
-  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
-}
+  /* Plaza */
+  .plaza-layout {
+    flex-direction: column;
+  }
 
-.tool-source-tabs button:hover {
-  color: var(--text-secondary);
-  background: var(--bg-tertiary);
-}
+  .plaza-sidebar {
+    width: 100%;
+    position: static;
+  }
 
-.tool-source-tabs button.active {
-  background: var(--bg-primary);
-  color: var(--text-primary);
-  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
-}
+  .post-content,
+  .post-actions,
+  .post-composer-footer,
+  .post-comments {
+    padding-left: 0;
+  }
 
-.tool-source-tabs button:focus {
-  outline: none;
-}
+  .plaza-stats-grid-item {
+    padding: 12px 14px;
+  }
 
-.tool-source-tabs button:focus-visible {
-  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
-}
+  /* Agent detail tabs — horizontal scroll */
+  .tabs {
+    overflow-x: auto;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
 
-.tool-source-tab-count {
-  min-width: 18px;
-  height: 18px;
-  padding: 0 6px;
-  border-radius: 999px;
-  background: var(--bg-tertiary);
-  color: var(--text-tertiary);
-  font-size: 11px;
-  font-weight: 650;
-  line-height: 18px;
-}
+  .tabs::-webkit-scrollbar {
+    display: none;
+  }
 
-.tool-source-tabs button.active .tool-source-tab-count {
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-}
+  .tab {
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
 
-.enterprise-tool-source-tabs {
-  margin-bottom: 16px;
+  /* Agent detail chat tab — stack vertically */
+  .agent-chat-layout {
+    flex-direction: column;
+    height: calc(100dvh - 220px);
+  }
+
+  .agent-chat-sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--border-subtle);
+    max-height: 200px;
+    flex-shrink: 0;
+  }
 }
diff --git a/frontend/src/pages/AgentDetail.tsx b/frontend/src/pages/AgentDetail.tsx
index 9dcff56b8..6b38ab0bf 100644
--- a/frontend/src/pages/AgentDetail.tsx
+++ b/frontend/src/pages/AgentDetail.tsx
@@ -1,21 +1,4786 @@
-import React, { Component, ErrorInfo } from 'react';
+import React, { useState, useEffect, useRef, Component, ErrorInfo } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
 
-import AgentDetailPage from './agent-detail/AgentDetailPage';
+import ConfirmModal from '../components/ConfirmModal';
+import type { FileBrowserApi } from '../components/FileBrowser';
+import FileBrowser from '../components/FileBrowser';
+import ChannelConfig from '../components/ChannelConfig';
+import MarkdownRenderer from '../components/MarkdownRenderer';
+import PromptModal from '../components/PromptModal';
+import SkillAutocomplete from '../components/SkillAutocomplete';
+import SkillFolderUploadModal from '../components/skills/SkillFolderUploadModal';
+import SkillsActionBar, { type SkillsActionBarAction } from '../components/skills/SkillsActionBar';
+import { createAgentSkillUploadAdapter } from '../components/skills/skillUploadSurfaceAdapters';
+import { getAgentSkillActionIds, type SkillActionId } from '../components/skills/skillsActionItems';
+import OpenClawSettings from './OpenClawSettings';
+import { activityApi, agentApi, channelApi, enterpriseApi, fileApi, scheduleApi, skillApi, taskApi, triggerApi, uploadFileWithProgress } from '../services/api';
+import { useAuthStore } from '../stores';
 
+const TABS = ['status', 'aware', 'mind', 'tools', 'skills', 'relationships', 'workspace', 'chat', 'activityLog', 'approvals', 'settings'] as const;
+
+// Format large token numbers with K/M suffixes
+const formatTokens = (n: number) => {
+    if (!n) return '0';
+    if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
+    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+    return String(n);
+};
+
+const getCategoryLabels = (t: any): Record<string, string> => ({
+    file: t('agent.toolCategories.file'),
+    task: t('agent.toolCategories.task'),
+    communication: t('agent.toolCategories.communication'),
+    search: t('agent.toolCategories.search'),
+    aware: t('agent.toolCategories.aware', 'Aware & Triggers'),
+    social: t('agent.toolCategories.social', 'Social'),
+    code: t('agent.toolCategories.code', 'Code & Execution'),
+    discovery: t('agent.toolCategories.discovery', 'Discovery'),
+    email: t('agent.toolCategories.email', 'Email'),
+    feishu: t('agent.toolCategories.feishu', 'Feishu / Lark'),
+    custom: t('agent.toolCategories.custom'),
+    general: t('agent.toolCategories.general'),
+});
+
+function ToolsManager({ agentId, canManage = false }: { agentId: string; canManage?: boolean }) {
+    const { t } = useTranslation();
+    const [tools, setTools] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [configTool, setConfigTool] = useState<any | null>(null);
+    const [configData, setConfigData] = useState<Record<string, any>>({});
+    const [configJson, setConfigJson] = useState('');
+    const [configSaving, setConfigSaving] = useState(false);
+    const [toolTab, setToolTab] = useState<'platform' | 'installed'>('platform');
+    const [deletingToolId, setDeletingToolId] = useState<string | null>(null);
+
+    const loadTools = async () => {
+        try {
+            const token = localStorage.getItem('token');
+            const res = await fetch(`/api/tools/agents/${agentId}/with-config`, {
+                headers: { Authorization: `Bearer ${token}` },
+            });
+            if (res.ok) setTools(await res.json());
+            else {
+                // Fallback to old endpoint
+                const res2 = await fetch(`/api/tools/agents/${agentId}`, { headers: { Authorization: `Bearer ${token}` } });
+                if (res2.ok) setTools(await res2.json());
+            }
+        } catch (e) { console.error(e); }
+        setLoading(false);
+    };
+
+    useEffect(() => { loadTools(); }, [agentId]);
+
+    const toggleTool = async (toolId: string, enabled: boolean) => {
+        setTools(prev => prev.map(t => t.id === toolId ? { ...t, enabled } : t));
+        try {
+            const token = localStorage.getItem('token');
+            await fetch(`/api/tools/agents/${agentId}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                body: JSON.stringify([{ tool_id: toolId, enabled }]),
+            });
+        } catch (e) { console.error(e); }
+    };
+
+    const openConfig = (tool: any) => {
+        setConfigTool(tool);
+        const merged = { ...(tool.global_config || {}), ...(tool.agent_config || {}) };
+        setConfigData(merged);
+        setConfigJson(JSON.stringify(tool.agent_config || {}, null, 2));
+    };
+
+    const saveConfig = async () => {
+        if (!configTool) return;
+        setConfigSaving(true);
+        try {
+            const token = localStorage.getItem('token');
+            const hasSchema = configTool.config_schema?.fields?.length > 0;
+            const payload = hasSchema ? configData : JSON.parse(configJson || '{}');
+            await fetch(`/api/tools/agents/${agentId}/tool-config/${configTool.id}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                body: JSON.stringify({ config: payload }),
+            });
+            setConfigTool(null);
+            loadTools();
+        } catch (e) { alert('Save failed: ' + e); }
+        setConfigSaving(false);
+    };
+
+    if (loading) return <div style={{ color: 'var(--text-tertiary)', padding: '20px' }}>{t('common.loading')}</div>;
+
+    // Split by source first, then group by category
+    const systemTools = tools.filter(t => t.source !== 'user_installed');
+    const agentInstalledTools = tools.filter(t => t.source === 'user_installed');
+
+    const groupByCategory = (toolList: any[]) =>
+        toolList.reduce((acc: Record<string, any[]>, t) => {
+            const cat = t.category || 'general';
+            (acc[cat] = acc[cat] || []).push(t);
+            return acc;
+        }, {});
+
+    const renderToolGroup = (groupedTools: Record<string, any[]>) =>
+        Object.entries(groupedTools).map(([category, catTools]) => (
+            <div key={category}>
+                <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-secondary)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
+                    {getCategoryLabels(t)[category] || category}
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                    {(catTools as any[]).map((tool: any) => {
+                        const hasConfig = tool.config_schema?.fields?.length > 0 || tool.type === 'mcp';
+                        const hasAgentOverride = tool.agent_config && Object.keys(tool.agent_config).length > 0;
+                        return (
+                            <div key={tool.id} className="card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px' }}>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flex: 1, minWidth: 0 }}>
+                                    <span style={{ fontSize: '18px' }}>{tool.icon}</span>
+                                    <div style={{ minWidth: 0 }}>
+                                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                            <span style={{ fontWeight: 500, fontSize: '13px' }}>{tool.display_name}</span>
+                                            {tool.type === 'mcp' && (
+                                                <span style={{ fontSize: '10px', background: 'var(--primary)', color: '#fff', borderRadius: '4px', padding: '1px 5px' }}>MCP</span>
+                                            )}
+                                            {tool.type === 'builtin' && (
+                                                <span style={{ fontSize: '10px', background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', borderRadius: '4px', padding: '1px 5px' }}>Built-in</span>
+                                            )}
+                                            {hasAgentOverride && (
+                                                <span style={{ fontSize: '10px', background: 'rgba(99,102,241,0.15)', color: 'var(--accent-color)', borderRadius: '4px', padding: '1px 5px' }}>Configured</span>
+                                            )}
+                                        </div>
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                            {tool.description}
+                                            {tool.mcp_server_name && <span> · {tool.mcp_server_name}</span>}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
+                                    {canManage && hasConfig && (
+                                        <button
+                                            onClick={() => openConfig(tool)}
+                                            style={{ background: 'none', border: '1px solid var(--border-subtle)', borderRadius: '6px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', color: 'var(--text-secondary)' }}
+                                            title="Configure per-agent settings"
+                                        >⚙️ Config</button>
+                                    )}
+                                    {canManage && tool.source === 'user_installed' && tool.agent_tool_id && (
+                                        <button
+                                            onClick={async () => {
+                                                if (!confirm(t('agent.tools.confirmDelete', `Remove "${tool.display_name}" from this agent?`))) return;
+                                                setDeletingToolId(tool.id);
+                                                try {
+                                                    const token = localStorage.getItem('token');
+                                                    const res = await fetch(`/api/tools/agent-tool/${tool.agent_tool_id}`, {
+                                                        method: 'DELETE',
+                                                        headers: { Authorization: `Bearer ${token}` },
+                                                    });
+                                                    if (res.ok) await loadTools();
+                                                    else alert('Delete failed');
+                                                } catch (e) { alert('Delete failed: ' + e); }
+                                                setDeletingToolId(null);
+                                            }}
+                                            disabled={deletingToolId === tool.id}
+                                            style={{ background: 'none', border: '1px solid var(--border-subtle)', borderRadius: '6px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', color: 'var(--text-tertiary)', opacity: deletingToolId === tool.id ? 0.5 : 1 }}
+                                            title={t('agent.tools.removeTool', 'Remove from agent')}
+                                        >{deletingToolId === tool.id ? '...' : '✕'}</button>
+                                    )}
+                                    {canManage ? (
+                                        <label style={{ position: 'relative', display: 'inline-block', width: '40px', height: '22px', cursor: 'pointer', flexShrink: 0 }}>
+                                            <input
+                                                type="checkbox"
+                                                checked={tool.enabled}
+                                                onChange={e => toggleTool(tool.id, e.target.checked)}
+                                                style={{ opacity: 0, width: 0, height: 0 }}
+                                            />
+                                            <span style={{
+                                                position: 'absolute', inset: 0,
+                                                background: tool.enabled ? '#22c55e' : 'var(--bg-tertiary)',
+                                                borderRadius: '11px', transition: 'background 0.2s',
+                                            }}>
+                                                <span style={{
+                                                    position: 'absolute', left: tool.enabled ? '20px' : '2px', top: '2px',
+                                                    width: '18px', height: '18px', background: '#fff',
+                                                    borderRadius: '50%', transition: 'left 0.2s',
+                                                }} />
+                                            </span>
+                                        </label>
+                                    ) : (
+                                        <span style={{ fontSize: '11px', color: tool.enabled ? '#22c55e' : 'var(--text-tertiary)', fontWeight: 500 }}>
+                                            {tool.enabled ? t('common.enabled', 'On') : t('common.disabled', 'Off')}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        ));
+
+    const activeTools = toolTab === 'platform' ? systemTools : agentInstalledTools;
+
+    return (
+        <>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                {/* Tab Bar */}
+                <div style={{ display: 'flex', gap: '2px', background: 'var(--bg-tertiary)', borderRadius: '8px', padding: '3px' }}>
+                    <button
+                        onClick={() => setToolTab('platform')}
+                        style={{
+                            flex: 1, padding: '7px 12px', border: 'none', borderRadius: '6px', cursor: 'pointer',
+                            fontSize: '12px', fontWeight: 600, transition: 'all 0.2s',
+                            background: toolTab === 'platform' ? 'var(--bg-primary)' : 'transparent',
+                            color: toolTab === 'platform' ? 'var(--text-primary)' : 'var(--text-tertiary)',
+                            boxShadow: toolTab === 'platform' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+                        }}
+                    >
+                        🔧 {t('agent.tools.platformTools', 'Platform Tools')} ({systemTools.length})
+                    </button>
+                    <button
+                        onClick={() => setToolTab('installed')}
+                        style={{
+                            flex: 1, padding: '7px 12px', border: 'none', borderRadius: '6px', cursor: 'pointer',
+                            fontSize: '12px', fontWeight: 600, transition: 'all 0.2s',
+                            background: toolTab === 'installed' ? 'var(--bg-primary)' : 'transparent',
+                            color: toolTab === 'installed' ? 'var(--text-primary)' : 'var(--text-tertiary)',
+                            boxShadow: toolTab === 'installed' ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+                        }}
+                    >
+                        🤖 {t('agent.tools.agentInstalled', 'Agent-Installed Tools')} ({agentInstalledTools.length})
+                    </button>
+                </div>
+
+                {/* Tool List */}
+                {activeTools.length > 0 ? (
+                    renderToolGroup(groupByCategory(activeTools))
+                ) : (
+                    <div className="card" style={{ textAlign: 'center', padding: '30px', color: 'var(--text-tertiary)' }}>
+                        {toolTab === 'installed' ? t('agent.tools.noInstalled', 'No agent-installed tools yet') : t('common.noData')}
+                    </div>
+                )}
+            </div>
+            {tools.length === 0 && (
+                <div className="card" style={{ textAlign: 'center', padding: '30px', color: 'var(--text-tertiary)' }}>
+                    {t('common.noData')}
+                </div>
+            )}
+
+            {/* Tool Config Modal */}
+            {configTool && (
+                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.55)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                    onClick={() => setConfigTool(null)}>
+                    <div onClick={e => e.stopPropagation()} style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', width: '480px', maxWidth: '95vw', maxHeight: '80vh', overflow: 'auto', boxShadow: '0 20px 60px rgba(0,0,0,0.4)' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
+                            <div>
+                                <h3 style={{ margin: 0 }}>⚙️ {configTool.display_name}</h3>
+                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>Per-agent configuration (overrides global defaults)</div>
+                            </div>
+                            <button onClick={() => setConfigTool(null)} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)' }}>✕</button>
+                        </div>
+
+                        {configTool.config_schema?.fields?.length > 0 ? (
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                                {configTool.config_schema.fields
+                                    .filter((field: any) => {
+                                        // Handle depends_on: hide fields unless dependency is met
+                                        if (!field.depends_on) return true;
+                                        return Object.entries(field.depends_on).every(([depKey, depVals]: [string, any]) =>
+                                            (depVals as string[]).includes(configData[depKey] ?? '')
+                                        );
+                                    })
+                                    .map((field: any) => (
+                                        <div key={field.key}>
+                                            <label style={{ display: 'block', fontSize: '12px', fontWeight: 500, marginBottom: '4px' }}>
+                                                {field.label}
+                                                {configTool.global_config?.[field.key] && (
+                                                    <span style={{ fontWeight: 400, color: 'var(--text-tertiary)', marginLeft: '4px' }}>
+                                                        (global: {String(configTool.global_config[field.key]).slice(0, 20)}{String(configTool.global_config[field.key]).length > 20 ? '…' : ''})
+                                                    </span>
+                                                )}
+                                            </label>
+                                            {field.type === 'password' ? (
+                                                <>
+                                                <input type="password" className="form-input" value={configData[field.key] ?? ''} placeholder={field.placeholder || 'Leave blank to use global default'} onChange={e => setConfigData(p => ({ ...p, [field.key]: e.target.value }))} />
+                                                {/* Per-provider help text for auth_code */}
+                                                {field.key === 'auth_code' && (() => {
+                                                    const providerField = configTool.config_schema?.fields?.find((f: any) => f.key === 'email_provider');
+                                                    const selectedProvider = configData['email_provider'] || providerField?.default || '';
+                                                    const providerOption = providerField?.options?.find((o: any) => o.value === selectedProvider);
+                                                    if (!providerOption?.help_text) return null;
+                                                    return (
+                                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px', lineHeight: '1.5' }}>
+                                                            {providerOption.help_text}
+                                                            {providerOption.help_url && (
+                                                                <> &middot; <a href={providerOption.help_url} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--accent-primary)', textDecoration: 'none' }}>Setup guide</a></>
+                                                            )}
+                                                        </div>
+                                                    );
+                                                })()}
+                                                </>
+                                            ) : field.type === 'select' ? (
+                                                <select className="form-input" value={configData[field.key] ?? field.default ?? ''} onChange={e => setConfigData(p => ({ ...p, [field.key]: e.target.value }))}>
+                                                    {(field.options || []).map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
+                                                </select>
+                                            ) : field.type === 'number' ? (
+                                                <input type="number" className="form-input" value={configData[field.key] ?? field.default ?? ''} placeholder={field.placeholder || ''} min={field.min} max={field.max} onChange={e => setConfigData(p => ({ ...p, [field.key]: e.target.value ? Number(e.target.value) : '' }))} />
+                                            ) : (
+                                                <input type="text" className="form-input" value={configData[field.key] ?? ''} placeholder={field.placeholder || 'Leave blank to use global default'} onChange={e => setConfigData(p => ({ ...p, [field.key]: e.target.value }))} />
+                                            )}
+                                        </div>
+                                    ))}
+                                {/* Email tool: test connection button + help text */}
+                                {configTool.category === 'email' && (
+                                    <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: '12px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                                        <button
+                                            className="btn btn-secondary"
+                                            style={{ alignSelf: 'flex-start' }}
+                                            onClick={async () => {
+                                                const btn = document.getElementById('email-test-btn');
+                                                const status = document.getElementById('email-test-status');
+                                                if (btn) btn.textContent = 'Testing...';
+                                                if (btn) (btn as HTMLButtonElement).disabled = true;
+                                                try {
+                                                    const token = localStorage.getItem('token');
+                                                    const res = await fetch('/api/tools/test-email', {
+                                                        method: 'POST',
+                                                        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                                                        body: JSON.stringify({ config: configData }),
+                                                    });
+                                                    const data = await res.json();
+                                                    if (status) {
+                                                        status.textContent = data.ok
+                                                            ? `${data.imap}\n${data.smtp}`
+                                                            : `${data.imap || ''}\n${data.smtp || ''}\n${data.error || ''}`;
+                                                        status.style.color = data.ok ? 'var(--success)' : 'var(--error)';
+                                                    }
+                                                } catch (e: any) {
+                                                    if (status) { status.textContent = `Error: ${e.message}`; status.style.color = 'var(--error)'; }
+                                                } finally {
+                                                    if (btn) { btn.textContent = 'Test Connection'; (btn as HTMLButtonElement).disabled = false; }
+                                                }
+                                            }}
+                                            id="email-test-btn"
+                                        >Test Connection</button>
+                                        <div id="email-test-status" style={{ fontSize: '11px', whiteSpace: 'pre-line', minHeight: '16px' }}></div>
+                                    </div>
+                                )}
+                            </div>
+                        ) : (
+                            <div>
+                                <label style={{ display: 'block', fontSize: '12px', fontWeight: 500, marginBottom: '4px' }}>Config JSON (Agent Override)</label>
+                                <textarea
+                                    className="form-input"
+                                    value={configJson}
+                                    onChange={e => setConfigJson(e.target.value)}
+                                    style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', minHeight: '120px', resize: 'vertical' }}
+                                    placeholder='{}'
+                                />
+                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
+                                    Global default: <code style={{ fontSize: '10px' }}>{JSON.stringify(configTool.global_config || {}).slice(0, 80)}</code>
+                                </div>
+                            </div>
+                        )}
+
+                        <div style={{ display: 'flex', gap: '8px', marginTop: '16px', justifyContent: 'flex-end' }}>
+                            {Object.keys(configTool.agent_config || {}).length > 0 && (
+                                <button className="btn btn-ghost" style={{ color: 'var(--error)', marginRight: 'auto' }} onClick={async () => {
+                                    const token = localStorage.getItem('token');
+                                    await fetch(`/api/tools/agents/${agentId}/tool-config/${configTool.id}`, { method: 'PUT', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }, body: JSON.stringify({ config: {} }) });
+                                    setConfigTool(null); loadTools();
+                                }}>Reset to Global</button>
+                            )}
+                            <button className="btn btn-secondary" onClick={() => setConfigTool(null)}>Cancel</button>
+                            <button className="btn btn-primary" onClick={saveConfig} disabled={configSaving}>{configSaving ? t('common.saving', 'Saving…') : t('common.save', 'Save')}</button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}
+
+/** Convert rich schedule JSON to cron expression */
+function schedToCron(sched: { freq: string; interval: number; time: string; weekdays?: number[] }): string {
+    const [h, m] = (sched.time || '09:00').split(':').map(Number);
+    if (sched.freq === 'weekly') {
+        const days = (sched.weekdays || [1, 2, 3, 4, 5]).join(',');
+        return sched.interval > 1 ? `${m} ${h} * * ${days}` : `${m} ${h} * * ${days}`;
+    }
+    // daily
+    if (sched.interval === 1) return `${m} ${h} * * *`;
+    return `${m} ${h} */${sched.interval} * *`;
+}
+
+const getRelationOptions = (t: any) => [
+    { value: 'supervisor', label: t('agent.detail.supervisor') },
+    { value: 'subordinate', label: t('agent.detail.subordinate') },
+    { value: 'collaborator', label: t('agent.detail.collaborator') },
+    { value: 'peer', label: t('agent.detail.peer') },
+    { value: 'mentor', label: t('agent.detail.mentor') },
+    { value: 'stakeholder', label: t('agent.detail.stakeholder') },
+    { value: 'other', label: t('agent.detail.other') },
+];
+
+const getAgentRelationOptions = getRelationOptions;
+
+function fetchAuth<T>(url: string, options?: RequestInit): Promise<T> {
+    const token = localStorage.getItem('token');
+    return fetch(`/api${url}`, {
+        ...options,
+        headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+    }).then(r => r.json());
+}
+
+function RelationshipEditor({ agentId, readOnly = false }: { agentId: string; readOnly?: boolean }) {
+    const { t } = useTranslation();
+    const qc = useQueryClient();
+    const [search, setSearch] = useState('');
+    const [searchResults, setSearchResults] = useState<any[]>([]);
+    const [adding, setAdding] = useState<any>(null);
+    const [relation, setRelation] = useState('collaborator');
+    const [description, setDescription] = useState('');
+    // Agent relationships state
+    const [addingAgent, setAddingAgent] = useState(false);
+    const [agentRelation, setAgentRelation] = useState('collaborator');
+    const [agentDescription, setAgentDescription] = useState('');
+    const [selectedAgentId, setSelectedAgentId] = useState('');
+    // Editing state
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [editRelation, setEditRelation] = useState('');
+    const [editDescription, setEditDescription] = useState('');
+    const [editingAgentId, setEditingAgentId] = useState<string | null>(null);
+    const [editAgentRelation, setEditAgentRelation] = useState('');
+    const [editAgentDescription, setEditAgentDescription] = useState('');
+
+    const { data: relationships = [], refetch } = useQuery({
+        queryKey: ['relationships', agentId],
+        queryFn: () => fetchAuth<any[]>(`/agents/${agentId}/relationships/`),
+    });
+    const { data: agentRelationships = [], refetch: refetchAgentRels } = useQuery({
+        queryKey: ['agent-relationships', agentId],
+        queryFn: () => fetchAuth<any[]>(`/agents/${agentId}/relationships/agents`),
+    });
+    const { data: allAgents = [] } = useQuery({
+        queryKey: ['agents-for-rel'],
+        queryFn: () => fetchAuth<any[]>(`/agents/`),
+    });
+    const availableAgents = allAgents.filter((a: any) => a.id !== agentId);
+
+    useEffect(() => {
+        if (!search || search.length < 1) { setSearchResults([]); return; }
+        const t = setTimeout(() => {
+            fetchAuth<any[]>(`/enterprise/org/members?search=${encodeURIComponent(search)}`).then(setSearchResults);
+        }, 300);
+        return () => clearTimeout(t);
+    }, [search]);
+
+    const addRelationship = async () => {
+        if (!adding) return;
+        const existing = relationships.map((r: any) => ({ member_id: r.member_id, relation: r.relation, description: r.description }));
+        existing.push({ member_id: adding.id, relation, description });
+        await fetchAuth(`/agents/${agentId}/relationships/`, { method: 'PUT', body: JSON.stringify({ relationships: existing }) });
+        setAdding(null); setSearch(''); setRelation('collaborator'); setDescription('');
+        refetch();
+    };
+    const removeRelationship = async (relId: string) => {
+        await fetchAuth(`/agents/${agentId}/relationships/${relId}`, { method: 'DELETE' });
+        refetch();
+    };
+    const startEditRelationship = (r: any) => {
+        setEditingId(r.id);
+        setEditRelation(r.relation || 'collaborator');
+        setEditDescription(r.description || '');
+    };
+    const saveEditRelationship = async (targetId: string) => {
+        const updated = relationships.map((r: any) => ({
+            member_id: r.member_id,
+            relation: r.id === targetId ? editRelation : r.relation,
+            description: r.id === targetId ? editDescription : r.description,
+        }));
+        await fetchAuth(`/agents/${agentId}/relationships/`, { method: 'PUT', body: JSON.stringify({ relationships: updated }) });
+        setEditingId(null);
+        refetch();
+    };
+    const addAgentRelationship = async () => {
+        if (!selectedAgentId) return;
+        const existing = agentRelationships.map((r: any) => ({ target_agent_id: r.target_agent_id, relation: r.relation, description: r.description }));
+        existing.push({ target_agent_id: selectedAgentId, relation: agentRelation, description: agentDescription });
+        await fetchAuth(`/agents/${agentId}/relationships/agents`, { method: 'PUT', body: JSON.stringify({ relationships: existing }) });
+        setAddingAgent(false); setSelectedAgentId(''); setAgentRelation('collaborator'); setAgentDescription('');
+        refetchAgentRels();
+    };
+    const removeAgentRelationship = async (relId: string) => {
+        await fetchAuth(`/agents/${agentId}/relationships/agents/${relId}`, { method: 'DELETE' });
+        refetchAgentRels();
+    };
+    const startEditAgentRelationship = (r: any) => {
+        setEditingAgentId(r.id);
+        setEditAgentRelation(r.relation || 'collaborator');
+        setEditAgentDescription(r.description || '');
+    };
+    const saveEditAgentRelationship = async (targetId: string) => {
+        const updated = agentRelationships.map((r: any) => ({
+            target_agent_id: r.target_agent_id,
+            relation: r.id === targetId ? editAgentRelation : r.relation,
+            description: r.id === targetId ? editAgentDescription : r.description,
+        }));
+        await fetchAuth(`/agents/${agentId}/relationships/agents`, { method: 'PUT', body: JSON.stringify({ relationships: updated }) });
+        setEditingAgentId(null);
+        refetchAgentRels();
+    };
+
+    return (
+        <div>
+            {/* ── Human Relationships ── */}
+            <div className="card" style={{ marginBottom: '12px' }}>
+                <h4 style={{ marginBottom: '12px' }}>{t('agent.detail.humanRelationships')}</h4>
+                <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>{t('agent.detail.humanRelationships')}</p>
+                {relationships.length > 0 && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginBottom: '16px' }}>
+                        {relationships.map((r: any) => (
+                            <div key={r.id} style={{ borderRadius: '8px', border: '1px solid var(--border-subtle)', overflow: 'hidden' }}>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '10px' }}>
+                                    <div style={{ width: '36px', height: '36px', borderRadius: '50%', background: 'rgba(224,238,238,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px', fontWeight: 600, flexShrink: 0 }}>{r.member?.name?.[0] || '?'}</div>
+                                    <div style={{ flex: 1, minWidth: 0 }}>
+                                        <div style={{ fontWeight: 600, fontSize: '13px' }}>{r.member?.name || '?'} <span className="badge" style={{ fontSize: '10px', marginLeft: '4px' }}>{r.relation_label}</span></div>
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{r.member?.title || ''} · {r.member?.department_path || ''}</div>
+                                        {r.description && editingId !== r.id && <div style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '4px' }}>{r.description}</div>}
+                                    </div>
+                                    {!readOnly && editingId !== r.id && (
+                                        <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
+                                            <button className="btn btn-ghost" style={{ fontSize: '12px' }} onClick={() => startEditRelationship(r)}>{t('common.edit', 'Edit')}</button>
+                                            <button className="btn btn-ghost" style={{ color: 'var(--error)', fontSize: '12px' }} onClick={() => removeRelationship(r.id)}>{t('common.delete')}</button>
+                                        </div>
+                                    )}
+                                </div>
+                                {editingId === r.id && (
+                                    <div style={{ padding: '0 10px 10px', borderTop: '1px solid var(--border-subtle)', background: 'var(--bg-elevated)' }}>
+                                        <div style={{ display: 'flex', gap: '8px', marginTop: '8px', marginBottom: '8px' }}>
+                                            <select className="input" value={editRelation} onChange={e => setEditRelation(e.target.value)} style={{ width: '140px', fontSize: '12px' }}>
+                                                {getRelationOptions(t).map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
+                                            </select>
+                                        </div>
+                                        <textarea className="input" value={editDescription} onChange={e => setEditDescription(e.target.value)} rows={2} style={{ fontSize: '12px', resize: 'vertical', marginBottom: '8px', width: '100%' }} placeholder={t('agent.detail.descriptionPlaceholder', 'Description...')} />
+                                        <div style={{ display: 'flex', gap: '8px' }}>
+                                            <button className="btn btn-primary" style={{ fontSize: '12px' }} onClick={() => saveEditRelationship(r.id)}>{t('common.save', 'Save')}</button>
+                                            <button className="btn btn-secondary" style={{ fontSize: '12px' }} onClick={() => setEditingId(null)}>{t('common.cancel')}</button>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {!readOnly && !adding && (
+                    <div style={{ position: 'relative' }}>
+                        <input className="input" placeholder={t("agent.detail.searchMembers")} value={search} onChange={e => setSearch(e.target.value)} style={{ fontSize: '13px' }} />
+                        {searchResults.length > 0 && (
+                            <div style={{ position: 'absolute', top: '100%', left: 0, right: 0, background: 'var(--bg-primary)', border: '1px solid var(--border-subtle)', borderRadius: '6px', marginTop: '4px', maxHeight: '200px', overflowY: 'auto', zIndex: 10, boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}>
+                                {searchResults.map((m: any) => (
+                                    <div key={m.id} style={{ padding: '8px 12px', cursor: 'pointer', fontSize: '13px', borderBottom: '1px solid var(--border-subtle)' }}
+                                        onClick={() => { setAdding(m); setSearch(''); setSearchResults([]); }}
+                                        onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-elevated)')}
+                                        onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>
+                                        <div style={{ fontWeight: 500 }}>{m.name}</div>
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{m.title} · {m.department_path}</div>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                )}
+                {!readOnly && adding && (
+                    <div style={{ border: '1px solid var(--accent-primary)', borderRadius: '8px', padding: '12px', background: 'var(--bg-elevated)' }}>
+                        <div style={{ fontWeight: 600, fontSize: '14px', marginBottom: '8px' }}>{t('agent.detail.addRelationship')}: {adding.name} <span style={{ fontSize: '12px', fontWeight: 400, color: 'var(--text-tertiary)' }}>({adding.title} · {adding.department_path})</span></div>
+                        <div style={{ display: 'flex', gap: '8px', marginBottom: '8px' }}>
+                            <select className="input" value={relation} onChange={e => setRelation(e.target.value)} style={{ width: '140px', fontSize: '12px' }}>
+                                {getRelationOptions(t).map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
+                            </select>
+                        </div>
+                        <textarea className="input" placeholder="" value={description} onChange={e => setDescription(e.target.value)} rows={2} style={{ fontSize: '12px', resize: 'vertical', marginBottom: '8px' }} />
+                        <div style={{ display: 'flex', gap: '8px' }}>
+                            <button className="btn btn-primary" style={{ fontSize: '12px' }} onClick={addRelationship}>{t('common.confirm')}</button>
+                            <button className="btn btn-secondary" style={{ fontSize: '12px' }} onClick={() => { setAdding(null); setDescription(''); }}>{t('common.cancel')}</button>
+                        </div>
+                    </div>
+                )}
+            </div>
+            {/* ── Agent-to-Agent Relationships ── */}
+            <div className="card" style={{ marginBottom: '12px' }}>
+                <h4 style={{ marginBottom: '12px' }}>{t('agent.detail.agentRelationships')}</h4>
+                <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>{t('agent.detail.agentRelationships')}</p>
+                {agentRelationships.length > 0 && (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginBottom: '16px' }}>
+                        {agentRelationships.map((r: any) => (
+                            <div key={r.id} style={{ borderRadius: '8px', border: '1px solid rgba(16,185,129,0.3)', background: 'rgba(16,185,129,0.05)', overflow: 'hidden' }}>
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '10px' }}>
+                                    <div style={{ width: '36px', height: '36px', borderRadius: '50%', background: 'rgba(16,185,129,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px', flexShrink: 0 }}>A</div>
+                                    <div style={{ flex: 1, minWidth: 0 }}>
+                                        <div style={{ fontWeight: 600, fontSize: '13px' }}>{r.target_agent?.name || '?'} <span className="badge" style={{ fontSize: '10px', marginLeft: '4px', background: 'rgba(16,185,129,0.15)', color: 'rgb(16,185,129)' }}>{r.relation_label}</span></div>
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{r.target_agent?.role_description || 'Agent'}</div>
+                                        {r.description && editingAgentId !== r.id && <div style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '4px' }}>{r.description}</div>}
+                                    </div>
+                                    {!readOnly && editingAgentId !== r.id && (
+                                        <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
+                                            <button className="btn btn-ghost" style={{ fontSize: '12px' }} onClick={() => startEditAgentRelationship(r)}>{t('common.edit', 'Edit')}</button>
+                                            <button className="btn btn-ghost" style={{ color: 'var(--error)', fontSize: '12px' }} onClick={() => removeAgentRelationship(r.id)}>{t('common.delete')}</button>
+                                        </div>
+                                    )}
+                                </div>
+                                {editingAgentId === r.id && (
+                                    <div style={{ padding: '0 10px 10px', borderTop: '1px solid rgba(16,185,129,0.2)', background: 'var(--bg-elevated)' }}>
+                                        <div style={{ display: 'flex', gap: '8px', marginTop: '8px', marginBottom: '8px' }}>
+                                            <select className="input" value={editAgentRelation} onChange={e => setEditAgentRelation(e.target.value)} style={{ width: '140px', fontSize: '12px' }}>
+                                                {getAgentRelationOptions(t).map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
+                                            </select>
+                                        </div>
+                                        <textarea className="input" value={editAgentDescription} onChange={e => setEditAgentDescription(e.target.value)} rows={2} style={{ fontSize: '12px', resize: 'vertical', marginBottom: '8px', width: '100%' }} placeholder={t('agent.detail.descriptionPlaceholder', 'Description...')} />
+                                        <div style={{ display: 'flex', gap: '8px' }}>
+                                            <button className="btn btn-primary" style={{ fontSize: '12px' }} onClick={() => saveEditAgentRelationship(r.id)}>{t('common.save', 'Save')}</button>
+                                            <button className="btn btn-secondary" style={{ fontSize: '12px' }} onClick={() => setEditingAgentId(null)}>{t('common.cancel')}</button>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                )}
+                {!readOnly && !addingAgent && (
+                    <button className="btn btn-secondary" style={{ fontSize: '12px' }} onClick={() => setAddingAgent(true)}>+ {t('agent.detail.addRelationship')}</button>
+                )}
+                {!readOnly && addingAgent && (
+                    <div style={{ border: '1px solid rgba(16,185,129,0.5)', borderRadius: '8px', padding: '12px', background: 'var(--bg-elevated)' }}>
+                        <div style={{ display: 'flex', gap: '8px', marginBottom: '8px' }}>
+                            <select className="input" value={selectedAgentId} onChange={e => setSelectedAgentId(e.target.value)} style={{ flex: 1, minWidth: 0, fontSize: '12px' }}>
+                                <option value="">— Select Agent —</option>
+                                {availableAgents.map((a: any) => <option key={a.id} value={a.id}>{a.name} — {a.role_description || 'Agent'}</option>)}
+                            </select>
+                            <select className="input" value={agentRelation} onChange={e => setAgentRelation(e.target.value)} style={{ width: '150px', flexShrink: 0, fontSize: '12px' }}>
+                                {getAgentRelationOptions(t).map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
+                            </select>
+                        </div>
+                        <textarea className="input" placeholder="" value={agentDescription} onChange={e => setAgentDescription(e.target.value)} rows={2} style={{ fontSize: '12px', resize: 'vertical', marginBottom: '8px' }} />
+                        <div style={{ display: 'flex', gap: '8px' }}>
+                            <button className="btn btn-primary" style={{ fontSize: '12px' }} onClick={addAgentRelationship} disabled={!selectedAgentId}>{t('common.confirm')}</button>
+                            <button className="btn btn-secondary" style={{ fontSize: '12px' }} onClick={() => { setAddingAgent(false); setAgentDescription(''); setSelectedAgentId(''); }}>{t('common.cancel')}</button>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function AgentDetailInner() {
+    const { t, i18n } = useTranslation();
+    const { id } = useParams<{ id: string }>();
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+    const location = useLocation();
+    const validTabs = ['status', 'aware', 'mind', 'tools', 'skills', 'relationships', 'workspace', 'chat', 'activityLog', 'approvals', 'settings'];
+    const hashTab = location.hash?.replace('#', '');
+    const [activeTab, setActiveTabRaw] = useState<string>(hashTab && validTabs.includes(hashTab) ? hashTab : 'status');
+
+    // Sync URL hash when tab changes
+    const setActiveTab = (tab: string) => {
+        setActiveTabRaw(tab);
+        window.history.replaceState(null, '', `#${tab}`);
+    };
+
+    const { data: agent, isLoading } = useQuery({
+        queryKey: ['agent', id],
+        queryFn: () => agentApi.get(id!),
+        enabled: !!id,
+    });
+
+    // ── Aware tab data: triggers ──
+    const { data: awareTriggers = [], refetch: refetchTriggers } = useQuery({
+        queryKey: ['triggers', id],
+        queryFn: () => triggerApi.list(id!),
+        enabled: !!id && activeTab === 'aware',
+        refetchInterval: activeTab === 'aware' ? 5000 : false,
+    });
+
+    // ── Aware tab data: focus.md ──
+    const { data: focusFile } = useQuery({
+        queryKey: ['file', id, 'focus.md'],
+        queryFn: () => fileApi.read(id!, 'focus.md').catch(() => null),
+        enabled: !!id && activeTab === 'aware',
+    });
+
+    // ── Aware tab data: task_history.md ──
+    const { data: taskHistoryFile } = useQuery({
+        queryKey: ['file', id, 'task_history.md'],
+        queryFn: () => fileApi.read(id!, 'task_history.md').catch(() => null),
+        enabled: !!id && activeTab === 'aware',
+    });
+
+    // ── Aware tab data: reflection sessions (trigger monologues) ──
+    const { data: reflectionSessions = [] } = useQuery({
+        queryKey: ['reflection-sessions', id],
+        queryFn: async () => {
+            const tkn = localStorage.getItem('token');
+            const res = await fetch(`/api/agents/${id}/sessions?scope=all`, { headers: { Authorization: `Bearer ${tkn}` } });
+            if (!res.ok) return [];
+            const all = await res.json();
+            return all.filter((s: any) => s.source_channel === 'trigger');
+        },
+        enabled: !!id && activeTab === 'aware',
+        refetchInterval: activeTab === 'aware' ? 10000 : false,
+    });
+
+    // ── Aware tab state ──
+    const [expandedFocus, setExpandedFocus] = useState<string | null>(null);
+    const [expandedReflection, setExpandedReflection] = useState<string | null>(null);
+    const [reflectionMessages, setReflectionMessages] = useState<Record<string, any[]>>({});
+    const [showAllFocus, setShowAllFocus] = useState(false);
+    const [showCompletedFocus, setShowCompletedFocus] = useState(false);
+    const [showAllTriggers, setShowAllTriggers] = useState(false);
+    const [showAllReflections, setShowAllReflections] = useState(false);
+    const [reflectionPage, setReflectionPage] = useState(0);
+    const REFLECTIONS_PAGE_SIZE = 10;
+    const SECTION_PAGE_SIZE = 5;
+
+    const { data: soulContent } = useQuery({
+        queryKey: ['file', id, 'soul.md'],
+        queryFn: () => fileApi.read(id!, 'soul.md'),
+        enabled: !!id && activeTab === 'mind',
+    });
+
+    const { data: memoryFiles = [] } = useQuery({
+        queryKey: ['files', id, 'memory'],
+        queryFn: () => fileApi.list(id!, 'memory'),
+        enabled: !!id && activeTab === 'mind',
+    });
+    const [expandedMemory, setExpandedMemory] = useState<string | null>(null);
+    const { data: memoryFileContent } = useQuery({
+        queryKey: ['file', id, expandedMemory],
+        queryFn: () => fileApi.read(id!, expandedMemory!),
+        enabled: !!id && !!expandedMemory,
+    });
+
+    const { data: skillFiles = [] } = useQuery({
+        queryKey: ['files', id, 'skills'],
+        queryFn: () => fileApi.list(id!, 'skills'),
+        enabled: !!id && activeTab === 'skills',
+    });
+
+    const [workspacePath, setWorkspacePath] = useState('workspace');
+    const { data: workspaceFiles = [] } = useQuery({
+        queryKey: ['files', id, workspacePath],
+        queryFn: () => fileApi.list(id!, workspacePath),
+        enabled: !!id && activeTab === 'workspace',
+    });
+
+    const { data: activityLogs = [] } = useQuery({
+        queryKey: ['activity', id],
+        queryFn: () => activityApi.list(id!, 100),
+        enabled: !!id && (activeTab === 'activityLog' || activeTab === 'status'),
+        refetchInterval: activeTab === 'activityLog' ? 10000 : false,
+    });
+
+    // Chat history
+    // ── Session state (replaces old conversations query) ──────────────────
+    const [sessions, setSessions] = useState<any[]>([]);
+    const [allSessions, setAllSessions] = useState<any[]>([]);
+    const [activeSession, setActiveSession] = useState<any | null>(null);
+    const [chatScope, setChatScope] = useState<'mine' | 'all'>('mine');
+    const [allUserFilter, setAllUserFilter] = useState<string>('');  // filter by username in All Users
+    const [historyMsgs, setHistoryMsgs] = useState<any[]>([]);
+    const [sessionsLoading, setSessionsLoading] = useState(false);
+    const [allSessionsLoading, setAllSessionsLoading] = useState(false);
+    const [agentExpired, setAgentExpired] = useState(false);
+    // Websocket chat state (for 'me' conversation)
+    const token = useAuthStore((s) => s.token);
+    const currentUser = useAuthStore((s) => s.user);
+    const isAdmin = currentUser?.role === 'platform_admin' || currentUser?.role === 'org_admin';
+    type SessionRuntimeKey = string;
+    const wsMapRef = useRef<Record<SessionRuntimeKey, WebSocket>>({});
+    const reconnectTimerRef = useRef<Record<SessionRuntimeKey, ReturnType<typeof setTimeout> | null>>({});
+    const reconnectDisabledRef = useRef<Record<SessionRuntimeKey, boolean>>({});
+    const sessionUiStateRef = useRef<Record<SessionRuntimeKey, { isWaiting: boolean; isStreaming: boolean }>>({});
+    const activeSessionIdRef = useRef<string | null>(null);
+    const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
+    const [editingTitle, setEditingTitle] = useState('');
+    const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const sessionClickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const editingSessionIdRef = useRef<string | null>(null);
+    const currentAgentIdRef = useRef<string | undefined>(id);
+    const sessionMsgAbortRef = useRef<AbortController | null>(null);
+    const sessionLoadSeqRef = useRef(0);
+
+    useEffect(() => { editingSessionIdRef.current = editingSessionId; }, [editingSessionId]);
+
+    const saveSessionTitle = async (sessionId: string, newTitle: string) => {
+        const trimmed = newTitle.trim();
+        if (!trimmed || !id) return;
+        setEditingSessionId(null);
+        try {
+            const tkn = localStorage.getItem('token');
+            const res = await fetch(`/api/agents/${id}/sessions/${sessionId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${tkn}` },
+                body: JSON.stringify({ title: trimmed }),
+            });
+            if (res.ok) {
+                setSessions(prev => prev.map(s => s.id === sessionId ? { ...s, title: trimmed } : s));
+                setAllSessions(prev => prev.map(s => s.id === sessionId ? { ...s, title: trimmed } : s));
+                if (activeSession?.id === sessionId) {
+                    setActiveSession((prev: any) => prev ? { ...prev, title: trimmed } : prev);
+                }
+            }
+        } catch (e) {
+            console.error('Failed to rename session:', e);
+        }
+    };
+
+    const buildSessionRuntimeKey = (agentId: string, sessionId: string) => `${agentId}:${sessionId}`;
+
+    const clearReconnectTimer = (key: SessionRuntimeKey) => {
+        const timer = reconnectTimerRef.current[key];
+        if (timer) {
+            clearTimeout(timer);
+            reconnectTimerRef.current[key] = null;
+        }
+    };
+
+    const closeSessionSocket = (key: SessionRuntimeKey, disableReconnect = true) => {
+        if (disableReconnect) reconnectDisabledRef.current[key] = true;
+        clearReconnectTimer(key);
+        const ws = wsMapRef.current[key];
+        if (ws && ws.readyState !== WebSocket.CLOSED) ws.close();
+        delete wsMapRef.current[key];
+        delete sessionUiStateRef.current[key];
+    };
+
+    const setSessionUiState = (key: SessionRuntimeKey, next: Partial<{ isWaiting: boolean; isStreaming: boolean }>) => {
+        const prev = sessionUiStateRef.current[key] || { isWaiting: false, isStreaming: false };
+        sessionUiStateRef.current[key] = { ...prev, ...next };
+    };
+
+    const isWritableSession = (sess: any) => {
+        if (!sess) return false;
+        const isAgentSession = sess.source_channel === 'agent' || sess.participant_type === 'agent';
+        if (isAgentSession) return false;
+        if (sess.user_id && currentUser && sess.user_id !== String(currentUser.id)) return false;
+        return true;
+    };
+
+    const syncActiveSocketState = (sess: any | null = activeSession, agentId: string | undefined = id) => {
+        if (!sess || !agentId) {
+            wsRef.current = null;
+            setWsConnected(false);
+            return;
+        }
+        const key = buildSessionRuntimeKey(agentId, sess.id);
+        const ws = wsMapRef.current[key];
+        wsRef.current = ws ?? null;
+        setWsConnected(!!ws && ws.readyState === WebSocket.OPEN);
+    };
+
+    const fetchMySessions = async (silent = false, agentId: string | undefined = id) => {
+        if (!agentId) return [];
+        if (!silent && currentAgentIdRef.current === agentId) setSessionsLoading(true);
+        try {
+            const tkn = localStorage.getItem('token');
+            const res = await fetch(`/api/agents/${agentId}/sessions?scope=mine`, { headers: { Authorization: `Bearer ${tkn}` } });
+            if (res.ok) {
+                const data = await res.json();
+                if (currentAgentIdRef.current === agentId) setSessions(data);
+                if (!silent && currentAgentIdRef.current === agentId) setSessionsLoading(false);
+                return data;
+            }
+        } catch { }
+        if (!silent && currentAgentIdRef.current === agentId) setSessionsLoading(false);
+        return [];
+    };
+
+    const fetchAllSessions = async () => {
+        if (!id) return;
+        setAllSessionsLoading(true);
+        try {
+            const tkn = localStorage.getItem('token');
+            const res = await fetch(`/api/agents/${id}/sessions?scope=all`, { headers: { Authorization: `Bearer ${tkn}` } });
+            if (res.ok) {
+                const all = await res.json();
+                if (currentAgentIdRef.current === id) {
+                    setAllSessions(all.filter((s: any) => s.source_channel !== 'trigger'));
+                }
+            }
+        } catch { }
+        setAllSessionsLoading(false);
+    };
+
+    const selectSession = async (sess: any) => {
+        const targetAgentId = id;
+        if (!targetAgentId) return;
+        const runtimeKey = buildSessionRuntimeKey(targetAgentId, String(sess.id));
+        const runtimeState = sessionUiStateRef.current[runtimeKey] || { isWaiting: false, isStreaming: false };
+        activeSessionIdRef.current = sess.id;
+        setChatMessages([]);
+        setHistoryMsgs([]);
+        setIsStreaming(runtimeState.isStreaming);
+        setIsWaiting(runtimeState.isWaiting);
+        setActiveSession(sess);
+        setAgentExpired(false);
+        syncActiveSocketState(sess, targetAgentId);
+
+        // Abort any pending message load and increment sequence
+        sessionMsgAbortRef.current?.abort();
+        const controller = new AbortController();
+        sessionMsgAbortRef.current = controller;
+        const loadSeq = ++sessionLoadSeqRef.current;
+        try {
+            const tkn = localStorage.getItem('token');
+            const res = await fetch(`/api/agents/${targetAgentId}/sessions/${sess.id}/messages`, {
+                headers: { Authorization: `Bearer ${tkn}` },
+                signal: controller.signal,
+            });
+            if (!res.ok) return;
+            const msgs = await res.json();
+            if (controller.signal.aborted || loadSeq !== sessionLoadSeqRef.current) return;
+            if (currentAgentIdRef.current !== targetAgentId) return;
+            if (activeSessionIdRef.current !== sess.id) return;
+            const isAgentSession = sess.source_channel === 'agent' || sess.participant_type === 'agent';
+            if (!isAgentSession && sess.user_id === String(currentUser?.id)) {
+                const processed: ChatMsg[] = [];
+                for (const m of msgs) {
+                    if (m.is_hidden) {
+                        const firstLine = (m.content || '').split('\n')[0].replace(/^#\s*/, '').replace(/^---$/, '').trim();
+                        processed.push({ role: 'assistant', content: firstLine || 'Skill loaded', isSkillIndicator: true, hiddenContent: m.content, id: m.id, timestamp: m.created_at });
+                        continue;
+                    }
+                    processed.push(parseChatMsg({
+                        role: m.role, content: m.content,
+                        ...(m.toolName && { toolName: m.toolName, toolArgs: m.toolArgs, toolStatus: m.toolStatus, toolResult: m.toolResult }),
+                        ...(m.thinking && { thinking: m.thinking }),
+                        ...(m.created_at && { timestamp: m.created_at }),
+                    }));
+                }
+                setChatMessages(processed);
+            } else {
+                setHistoryMsgs(msgs);
+            }
+        } catch (err: any) {
+            if (err?.name === 'AbortError') return;
+            console.error('Failed to load session messages:', err);
+        }
+    };
+
+    const createNewSession = async () => {
+        if (!id) return;
+        try {
+            const tkn = localStorage.getItem('token');
+            const res = await fetch(`/api/agents/${id}/sessions`, {
+                method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${tkn}` },
+                body: JSON.stringify({}),
+            });
+            if (res.ok) {
+                const newSess = await res.json();
+                setSessions(prev => [newSess, ...prev]);
+                setIsStreaming(false);
+                setIsWaiting(false);
+                await selectSession(newSess);
+            } else {
+                const err = await res.json().catch(() => ({ detail: `HTTP ${res.status}` }));
+                console.error('Failed to create session:', err);
+                alert(`Failed to create session: ${err.detail || res.status}`);
+            }
+        } catch (err: any) {
+            console.error('Failed to create session:', err);
+            alert(`Failed to create session: ${err.message || err}`);
+        }
+    };
+
+    const deleteSession = async (sessionId: string) => {
+        if (!confirm(t('chat.deleteConfirm', 'Delete this session and all its messages? This cannot be undone.'))) return;
+        const tkn = localStorage.getItem('token');
+        try {
+            await fetch(`/api/agents/${id}/sessions/${sessionId}`, { method: 'DELETE', headers: { Authorization: `Bearer ${tkn}` } });
+            if (id) closeSessionSocket(buildSessionRuntimeKey(id, sessionId), true);
+            // If deleted the active session, clear it
+            if (activeSession?.id === sessionId) {
+                activeSessionIdRef.current = null;
+                setActiveSession(null);
+                setChatMessages([]);
+                setHistoryMsgs([]);
+                setWsConnected(false);
+                setIsStreaming(false);
+                setIsWaiting(false);
+            }
+            await fetchMySessions(false, id);
+            await fetchAllSessions();
+        } catch (e: any) {
+            alert(e.message || 'Delete failed');
+        }
+    };
+
+    // Expiry editor modal state
+    const [showExpiryModal, setShowExpiryModal] = useState(false);
+    const [expiryValue, setExpiryValue] = useState('');       // datetime-local string or ''
+    const [expirySaving, setExpirySaving] = useState(false);
+
+    const openExpiryModal = () => {
+        const cur = (agent as any)?.expires_at;
+        // Convert ISO to datetime-local format (YYYY-MM-DDTHH:MM)
+        setExpiryValue(cur ? new Date(cur).toISOString().slice(0, 16) : '');
+        setShowExpiryModal(true);
+    };
+
+    const addHours = (h: number) => {
+        const base = (agent as any)?.expires_at ? new Date((agent as any).expires_at) : new Date();
+        const next = new Date(base.getTime() + h * 3600_000);
+        setExpiryValue(next.toISOString().slice(0, 16));
+    };
+
+    const saveExpiry = async (permanent = false) => {
+        setExpirySaving(true);
+        try {
+            const token = localStorage.getItem('token');
+            const body = permanent ? { expires_at: null } : { expires_at: expiryValue ? new Date(expiryValue).toISOString() : null };
+            await fetch(`/api/agents/${id}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                body: JSON.stringify(body),
+            });
+            queryClient.invalidateQueries({ queryKey: ['agent', id] });
+            setShowExpiryModal(false);
+        } catch (e) { alert('Failed: ' + e); }
+        setExpirySaving(false);
+    };
+    interface ChatMsg { role: 'user' | 'assistant' | 'tool_call'; content: string; id?: string; fileName?: string; toolName?: string; toolArgs?: any; toolStatus?: 'running' | 'done'; toolResult?: string; thinking?: string; imageUrl?: string; timestamp?: string; isSkillIndicator?: boolean; hiddenContent?: string | null; }
+    const [chatMessages, setChatMessages] = useState<ChatMsg[]>([]);
+    const [drawerContent, setDrawerContent] = useState<{ name: string; content: string } | null>(null);
+    const [chatInput, setChatInput] = useState('');
+    const [wsConnected, setWsConnected] = useState(false);
+    const [uploading, setUploading] = useState(false);
+    const [isWaiting, setIsWaiting] = useState(false);
+    const [isStreaming, setIsStreaming] = useState(false);
+    const [chatEditingId, setChatEditingId] = useState<string | null>(null);
+    const [chatEditContent, setChatEditContent] = useState('');
+    const [uploadProgress, setUploadProgress] = useState(-1);
+    const uploadAbortRef = useRef<(() => void) | null>(null);
+    const [attachedFiles, setAttachedFiles] = useState<{ name: string; text: string; path?: string; imageUrl?: string }[]>([]);
+    const wsRef = useRef<WebSocket | null>(null);
+    const chatEndRef = useRef<HTMLDivElement>(null);
+    const chatContainerRef = useRef<HTMLDivElement>(null);
+    const chatInputRef = useRef<HTMLTextAreaElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // Settings form local state
+    const [settingsForm, setSettingsForm] = useState({
+        primary_model_id: '',
+        fallback_model_id: '',
+        context_window_size: 100,
+        max_tool_rounds: 50,
+        max_tokens_per_day: '' as string | number,
+        max_tokens_per_month: '' as string | number,
+        max_triggers: 20,
+        min_poll_interval_min: 5,
+        webhook_rate_limit: 5,
+    });
+    const [settingsSaving, setSettingsSaving] = useState(false);
+    const [settingsSaved, setSettingsSaved] = useState(false);
+    const [settingsError, setSettingsError] = useState('');
+    const settingsInitRef = useRef(false);
+
+    // Sync settings form from server data on load
+    useEffect(() => {
+        if (agent && !settingsInitRef.current) {
+            setSettingsForm({
+                primary_model_id: agent.primary_model_id || '',
+                fallback_model_id: agent.fallback_model_id || '',
+                context_window_size: agent.context_window_size ?? 100,
+                max_tool_rounds: (agent as any).max_tool_rounds ?? 50,
+                max_tokens_per_day: agent.max_tokens_per_day || '',
+                max_tokens_per_month: agent.max_tokens_per_month || '',
+                max_triggers: (agent as any).max_triggers ?? 20,
+                min_poll_interval_min: (agent as any).min_poll_interval_min ?? 5,
+                webhook_rate_limit: (agent as any).webhook_rate_limit ?? 5,
+            });
+            settingsInitRef.current = true;
+        }
+    }, [agent]);
+
+    // Welcome message editor state (must be at top level -- not inside IIFE)
+    const [wmDraft, setWmDraft] = useState('');
+    const [wmSaved, setWmSaved] = useState(false);
+    useEffect(() => { setWmDraft((agent as any)?.welcome_message || ''); }, [(agent as any)?.welcome_message]);
+
+    // Reset cached state when switching to a different agent
+    const prevIdRef = useRef(id);
+    useEffect(() => {
+        if (id && id !== prevIdRef.current) {
+            prevIdRef.current = id;
+            settingsInitRef.current = false;
+            setSettingsSaved(false);
+            setSettingsError('');
+            setWmDraft('');
+            setWmSaved(false);
+            // Invalidate all queries for the old agent to force fresh data
+            queryClient.invalidateQueries({ queryKey: ['agent', id] });
+            // Re-apply hash so refresh preserves the current tab
+            window.history.replaceState(null, '', `#${activeTab}`);
+        }
+    }, [id]);
+
+    // Load chat history + connect websocket when chat tab is active
+    const IMAGE_EXTS = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'];
+    const parseChatMsg = (msg: ChatMsg): ChatMsg => {
+        if (msg.role !== 'user') return msg;
+        let parsed = { ...msg };
+        // Standard web chat format: [file:name.pdf]\ncontent
+        const newFmt = msg.content.match(/^\[file:([^\]]+)\]\n?/);
+        if (newFmt) { parsed = { ...msg, fileName: newFmt[1], content: msg.content.slice(newFmt[0].length).trim() }; }
+        // Feishu/Slack channel format: [文件已上传: workspace/uploads/name]
+        const chanFmt = !newFmt && msg.content.match(/^\[\u6587\u4ef6\u5df2\u4e0a\u4f20: (?:workspace\/uploads\/)?([^\]\n]+)\]/);
+        if (chanFmt) {
+            const raw = chanFmt[1]; const fileName = raw.split('/').pop() || raw;
+            parsed = { ...msg, fileName, content: msg.content.slice(chanFmt[0].length).trim() };
+        }
+        // Old format: [File: name.pdf]\nFile location:...\nQuestion: user_msg
+        const oldFmt = !newFmt && !chanFmt && msg.content.match(/^\[File: ([^\]]+)\]/);
+        if (oldFmt) {
+            const fileName = oldFmt[1];
+            const qMatch = msg.content.match(/\nQuestion: ([\s\S]+)$/);
+            parsed = { ...msg, fileName, content: qMatch ? qMatch[1].trim() : '' };
+        }
+        // If file is an image and no imageUrl yet, build download URL for preview
+        if (parsed.fileName && !parsed.imageUrl && id) {
+            const ext = parsed.fileName.split('.').pop()?.toLowerCase() || '';
+            if (IMAGE_EXTS.includes(ext)) {
+                parsed.imageUrl = `/api/agents/${id}/files/download?path=workspace/uploads/${encodeURIComponent(parsed.fileName)}&token=${token}`;
+            }
+        }
+        return parsed;
+    };
+
+
+    useEffect(() => {
+        currentAgentIdRef.current = id;
+    }, [id]);
+
+    // Reset visible state whenever the viewed agent changes.
+    // Existing background sockets keep running and will be cleaned up on unmount.
+    useEffect(() => {
+        sessionMsgAbortRef.current?.abort();
+        activeSessionIdRef.current = null;
+        setActiveSession(null);
+        setChatMessages([]);
+        setHistoryMsgs([]);
+        setIsStreaming(false);
+        setIsWaiting(false);
+        setWsConnected(false);
+        wsRef.current = null;
+        setChatScope('mine');
+        setAgentExpired(false);
+        settingsInitRef.current = false;
+    }, [id]);
+
+    useEffect(() => {
+        if (!id || !token || activeTab !== 'chat') return;
+        fetchMySessions(false, id).then((data: any) => {
+            if (currentAgentIdRef.current !== id) return;
+            setSessionsLoading(false);
+            if (data && data.length > 0) selectSession(data[0]);
+        });
+    }, [id, token, activeTab]);
+
+    const ensureSessionSocket = (sess: any, agentId: string, authToken: string) => {
+        const sessionId = String(sess.id);
+        const key = buildSessionRuntimeKey(agentId, sessionId);
+        const existing = wsMapRef.current[key];
+        if (existing && (existing.readyState === WebSocket.OPEN || existing.readyState === WebSocket.CONNECTING)) return;
+        reconnectDisabledRef.current[key] = false;
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const sessionParam = `&session_id=${sessionId}`;
+
+        const scheduleReconnect = () => {
+            if (reconnectDisabledRef.current[key]) return;
+            clearReconnectTimer(key);
+            reconnectTimerRef.current[key] = setTimeout(() => {
+                reconnectTimerRef.current[key] = null;
+                if (!reconnectDisabledRef.current[key]) ensureSessionSocket(sess, agentId, authToken);
+            }, 2000);
+        };
+
+        const ws = new WebSocket(`${protocol}//${window.location.host}/ws/chat/${agentId}?token=${authToken}${sessionParam}`);
+        wsMapRef.current[key] = ws;
+        ws.onopen = () => {
+            if (reconnectDisabledRef.current[key]) {
+                ws.close();
+                return;
+            }
+            if (currentAgentIdRef.current === agentId && activeSessionIdRef.current === sessionId) {
+                wsRef.current = ws;
+                setWsConnected(true);
+            }
+        };
+        ws.onclose = (e) => {
+            if (wsMapRef.current[key] === ws) delete wsMapRef.current[key];
+            setSessionUiState(key, { isWaiting: false, isStreaming: false });
+            const isActiveRuntime = currentAgentIdRef.current === agentId && activeSessionIdRef.current === sessionId;
+            if (isActiveRuntime) {
+                wsRef.current = null;
+                setWsConnected(false);
+                setIsWaiting(false);
+                setIsStreaming(false);
+            }
+            if (e.code === 4003 || e.code === 4002) {
+                reconnectDisabledRef.current[key] = true;
+                clearReconnectTimer(key);
+                if (isActiveRuntime && e.code === 4003) setAgentExpired(true);
+                return;
+            }
+            scheduleReconnect();
+        };
+        ws.onerror = (error) => {
+            const isActiveRuntime = currentAgentIdRef.current === agentId && activeSessionIdRef.current === sessionId;
+            if (isActiveRuntime) setWsConnected(false);
+            console.warn(`WebSocket error for session ${sessionId}:`, error);
+            // Error automatically triggers onclose with abnormal code, which handles reconnect
+        };
+        ws.onmessage = (e) => {
+            const d = JSON.parse(e.data);
+            const isActiveRuntime = currentAgentIdRef.current === agentId && activeSessionIdRef.current === sessionId;
+            if (['thinking', 'chunk', 'tool_call', 'done', 'error', 'quota_exceeded'].includes(d.type)) {
+                const nextStreaming = ['thinking', 'chunk', 'tool_call'].includes(d.type);
+                const endStreaming = ['done', 'error', 'quota_exceeded'].includes(d.type);
+                setSessionUiState(key, {
+                    isWaiting: false,
+                    isStreaming: endStreaming ? false : nextStreaming,
+                });
+            }
+            if (!isActiveRuntime) {
+                if (['done', 'error', 'quota_exceeded', 'trigger_notification'].includes(d.type)) {
+                    fetchMySessions(true, agentId);
+                }
+                if (['done', 'error', 'quota_exceeded'].includes(d.type)) {
+                    closeSessionSocket(key, true);
+                }
+                return;
+            }
+
+            if (['thinking', 'chunk', 'tool_call', 'done', 'error', 'quota_exceeded'].includes(d.type)) {
+                setIsWaiting(false);
+                if (['thinking', 'chunk', 'tool_call'].includes(d.type)) setIsStreaming(true);
+                if (['done', 'error', 'quota_exceeded'].includes(d.type)) setIsStreaming(false);
+            }
+
+            if (d.type === 'thinking') {
+                setChatMessages(prev => {
+                    const last = prev[prev.length - 1];
+                    if (last && last.role === 'assistant' && (last as any)._streaming) {
+                        return [...prev.slice(0, -1), { ...last, thinking: (last.thinking || '') + d.content } as any];
+                    }
+                    return [...prev, { role: 'assistant', content: '', thinking: d.content, _streaming: true } as any];
+                });
+            } else if (d.type === 'tool_call') {
+                setChatMessages(prev => {
+                    const toolMsg: ChatMsg = { role: 'tool_call', content: '', toolName: d.name, toolArgs: d.args, toolStatus: d.status, toolResult: d.result };
+                    if (d.status === 'done') {
+                        const lastIdx = prev.length - 1;
+                        const last = prev[lastIdx];
+                        if (last && last.role === 'tool_call' && last.toolName === d.name && last.toolStatus === 'running') return [...prev.slice(0, lastIdx), toolMsg];
+                    }
+                    return [...prev, toolMsg];
+                });
+            } else if (d.type === 'chunk') {
+                setChatMessages(prev => {
+                    const last = prev[prev.length - 1];
+                    if (last && last.role === 'assistant' && (last as any)._streaming) return [...prev.slice(0, -1), { ...last, content: last.content + d.content } as any];
+                    return [...prev, { role: 'assistant', content: d.content, _streaming: true } as any];
+                });
+            } else if (d.type === 'done') {
+                setChatMessages(prev => {
+                    const last = prev[prev.length - 1];
+                    const thinking = (last && last.role === 'assistant' && (last as any)._streaming) ? last.thinking : undefined;
+                    if (last && last.role === 'assistant' && (last as any)._streaming) return [...prev.slice(0, -1), { role: 'assistant', content: d.content, thinking, id: d.message_id || undefined, timestamp: new Date().toISOString() }];
+                    return [...prev, { role: d.role, content: d.content, id: d.message_id || undefined, timestamp: new Date().toISOString() }];
+                });
+                fetchMySessions(true, agentId);
+            } else if (d.type === 'error' || d.type === 'quota_exceeded') {
+                const msg = d.content || d.detail || d.message || 'Request denied';
+                setChatMessages(prev => {
+                    const last = prev[prev.length - 1];
+                    if (last && last.role === 'assistant' && last.content === `⚠️ ${msg}`) return prev;
+                    return [...prev, { role: 'assistant', content: `⚠️ ${msg}` }];
+                });
+                if (msg.includes('expired') || msg.includes('Setup failed') || msg.includes('no LLM model') || msg.includes('No model')) {
+                    reconnectDisabledRef.current[key] = true;
+                    if (msg.includes('expired')) setAgentExpired(true);
+                }
+            } else if (d.type === 'trigger_notification') {
+                setChatMessages(prev => [...prev, { role: 'assistant', content: d.content }]);
+                fetchMySessions(true, agentId);
+            } else if (d.type === 'skill_loaded') {
+                setChatMessages(prev => [...prev, {
+                    role: 'assistant' as const,
+                    content: `${d.emoji || ''} ${d.name} loaded`.trim(),
+                    isSkillIndicator: true,
+                    hiddenContent: d.content || null,
+                }]);
+            } else if (d.type === 'skill_error') {
+                setChatMessages(prev => [...prev, {
+                    role: 'assistant' as const,
+                    content: `⚠️ ${d.message}`,
+                    isSkillIndicator: true,
+                }]);
+            } else if (d.type === 'user_saved') {
+                // Update the last user message with its persisted ID
+                setChatMessages(prev => {
+                    const updated = [...prev];
+                    for (let i = updated.length - 1; i >= 0; i--) {
+                        if (updated[i].role === 'user' && !updated[i].id) {
+                            updated[i] = { ...updated[i], id: d.message_id };
+                            break;
+                        }
+                    }
+                    return updated;
+                });
+            } else if (d.type === 'edit_ack') {
+                setChatMessages(prev => {
+                    const idx = prev.findIndex(m => m.id === d.message_id);
+                    return idx >= 0 ? prev.slice(0, idx + 1) : prev;
+                });
+            } else if (d.type === 'session_title_updated') {
+                const newTitle = d.title;
+                const sessId = d.session_id;
+                if (editingSessionIdRef.current !== sessId) {
+                    setSessions(prev => prev.map(s => s.id === sessId ? { ...s, title: newTitle } : s));
+                    setAllSessions(prev => prev.map(s => s.id === sessId ? { ...s, title: newTitle } : s));
+                    if (activeSessionIdRef.current === sessId) {
+                        setActiveSession((prev: any) => prev ? { ...prev, title: newTitle } : prev);
+                    }
+                }
+            } else {
+                setChatMessages(prev => [...prev, { role: d.role, content: d.content }]);
+            }
+        };
+    };
+
+    useEffect(() => {
+        if (!id || !token || activeTab !== 'chat') return;
+        if (!activeSession) {
+            syncActiveSocketState(null, id);
+            return;
+        }
+        activeSessionIdRef.current = String(activeSession.id);
+        if (!isWritableSession(activeSession)) {
+            syncActiveSocketState(activeSession, id);
+            return;
+        }
+        ensureSessionSocket(activeSession, id, token);
+        syncActiveSocketState(activeSession, id);
+    }, [id, token, activeTab, activeSession?.id]);
+
+    useEffect(() => {
+        return () => {
+            sessionMsgAbortRef.current?.abort();
+            Object.keys(reconnectDisabledRef.current).forEach((key) => { reconnectDisabledRef.current[key] = true; });
+            Object.keys(reconnectTimerRef.current).forEach((key) => clearReconnectTimer(key));
+            Object.values(wsMapRef.current).forEach((ws) => {
+                if (ws.readyState !== WebSocket.CLOSED) ws.close();
+            });
+            wsMapRef.current = {};
+            wsRef.current = null;
+        };
+    }, []);
+
+    // Smart scroll: only auto-scroll if user is at the bottom
+    const isNearBottom = useRef(true);
+    const isFirstLoad = useRef(true);
+    const [showScrollBtn, setShowScrollBtn] = useState(false);
+    // Read-only history scroll-to-bottom
+    const historyContainerRef = useRef<HTMLDivElement>(null);
+    const [showHistoryScrollBtn, setShowHistoryScrollBtn] = useState(false);
+    const handleHistoryScroll = () => {
+        const el = historyContainerRef.current;
+        if (!el) return;
+        const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        setShowHistoryScrollBtn(distFromBottom > 200);
+    };
+    const scrollHistoryToBottom = () => {
+        const el = historyContainerRef.current;
+        if (el) el.scrollTop = el.scrollHeight;
+        setShowHistoryScrollBtn(false);
+    };
+    // Auto-show button when history messages overflow the container
+    useEffect(() => {
+        const el = historyContainerRef.current;
+        if (!el) return;
+        // Use a small timeout to let the DOM render the messages first
+        const timer = setTimeout(() => {
+            const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+            setShowHistoryScrollBtn(distFromBottom > 200);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [historyMsgs, activeSession?.id]);
+    const handleChatScroll = () => {
+        const el = chatContainerRef.current;
+        if (!el) return;
+        const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+        isNearBottom.current = distFromBottom < 5;
+        setShowScrollBtn(distFromBottom > 200);
+    };
+    const scrollToBottom = () => {
+        chatEndRef.current?.scrollIntoView({ behavior: 'instant' as ScrollBehavior });
+        setShowScrollBtn(false);
+    };
+    useEffect(() => {
+        if (!chatEndRef.current) return;
+        if (isFirstLoad.current && chatMessages.length > 0) {
+            // First load: instant jump to bottom, no animation
+            chatEndRef.current.scrollIntoView({ behavior: 'instant' as ScrollBehavior });
+            isFirstLoad.current = false;
+            // Auto-focus the input
+            setTimeout(() => chatInputRef.current?.focus(), 100);
+            return;
+        }
+        if (isNearBottom.current) {
+            chatEndRef.current.scrollIntoView({ behavior: 'instant' as ScrollBehavior });
+        }
+    }, [chatMessages]);
+
+    // Auto-focus input when switching sessions
+    useEffect(() => {
+        if (activeSession && activeTab === 'chat') {
+            setTimeout(() => chatInputRef.current?.focus(), 150);
+        }
+    }, [activeSession?.id, activeTab]);
+
+    const sendChatMsg = () => {
+        if (!id || !activeSession?.id) return;
+        const activeRuntimeKey = buildSessionRuntimeKey(id, String(activeSession.id));
+        const activeSocket = wsMapRef.current[activeRuntimeKey];
+        if (!activeSocket || activeSocket.readyState !== WebSocket.OPEN) return;
+        if (!chatInput.trim() && attachedFiles.length === 0) return;
+        
+        let userMsg = chatInput.trim();
+        let contentForLLM = userMsg;
+        let displayFiles = '';
+
+        if (attachedFiles.length > 0) {
+            let filesPrompt = '';
+            let filesDisplay = '';
+            
+            attachedFiles.forEach(file => {
+                filesDisplay += `[📎 ${file.name}] `;
+                if (file.imageUrl && supportsVision) {
+                    filesPrompt += `[image_data:${file.imageUrl}]\n`;
+                } else if (file.imageUrl) {
+                    filesPrompt += `[图片文件已上传: ${file.name}，保存在 ${file.path || ''}]\n`;
+                } else {
+                    const wsPath = file.path || '';
+                    const codePath = wsPath.replace(/^workspace\//, '');
+                    const fileLoc = wsPath ? `\nFile location: ${wsPath} (for read_file/read_document tools)\nIn execute_code, use relative path: "${codePath}" (working directory is workspace/)\n` : '';
+                    filesPrompt += `[File: ${file.name}]${fileLoc}\n${file.text}\n\n`;
+                }
+            });
+
+            if (supportsVision && attachedFiles.some(f => f.imageUrl)) {
+                contentForLLM = userMsg ? `${filesPrompt}\n${userMsg}` : `${filesPrompt}\n请分析这些文件`;
+            } else {
+                contentForLLM = userMsg ? `${filesPrompt}\nQuestion: ${userMsg}` : `Please analyze these files:\n\n${filesPrompt}`;
+            }
+            
+            displayFiles = filesDisplay.trim();
+            userMsg = userMsg ? `${displayFiles}\n${userMsg}` : displayFiles;
+        }
+
+        setIsWaiting(true);
+        setIsStreaming(false);
+        setSessionUiState(activeRuntimeKey, { isWaiting: true, isStreaming: false });
+        setChatMessages(prev => [...prev, { 
+            role: 'user', 
+            content: userMsg, 
+            fileName: attachedFiles.map(f => f.name).join(', '), 
+            imageUrl: attachedFiles.length === 1 ? attachedFiles[0].imageUrl : undefined, 
+            timestamp: new Date().toISOString() 
+        }]);
+        activeSocket.send(JSON.stringify({
+            content: contentForLLM, 
+            display_content: userMsg, 
+            file_name: attachedFiles.map(f => f.name).join(', ') 
+        }));
+        
+        setChatInput(''); 
+        setAttachedFiles([]);
+    };
+
+    const handleChatFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = Array.from(e.target.files || []);
+        if (!files.length) return;
+        const allowedFiles = files.slice(0, 10 - attachedFiles.length);
+        if (!allowedFiles.length) {
+            alert('Limit of 10 attached files reached.');
+            return;
+        }
+        
+        setUploading(true); setUploadProgress(0);
+        try {
+            const uploadPromises = allowedFiles.map(file => {
+                const { promise } = uploadFileWithProgress(
+                    `/chat/upload`,
+                    file,
+                    () => {}, // Avoid updating progress per file to prevent flickering, could implement total progress
+                    id ? { agent_id: id } : undefined,
+                );
+                return promise;
+            });
+            const results = await Promise.all(uploadPromises);
+            const newAttached = results.map(data => ({
+                name: data.filename, text: data.extracted_text, path: data.workspace_path, imageUrl: data.image_data_url || undefined
+            }));
+            setAttachedFiles(prev => [...prev, ...newAttached].slice(0, 10));
+        } catch (err: any) {
+            if (err?.message !== 'Upload cancelled') alert(t('agent.upload.failed'));
+        } finally { 
+            setUploading(false); setUploadProgress(-1); uploadAbortRef.current = null; 
+            if (fileInputRef.current) fileInputRef.current.value = ''; 
+        }
+    };
+
+    // Clipboard paste handler — auto-upload pasted images
+    const handlePaste = async (e: React.ClipboardEvent) => {
+        const items = e.clipboardData?.items;
+        if (!items) return;
+        
+        const filesToUpload: File[] = [];
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].type.startsWith('image/')) {
+                const blob = items[i].getAsFile();
+                if (blob) {
+                    const ext = blob.type.split('/')[1] || 'png';
+                    const fileName = `paste-${Date.now()}-${i}.${ext}`;
+                    filesToUpload.push(new File([blob], fileName, { type: blob.type }));
+                }
+            }
+        }
+        
+        if (!filesToUpload.length) return;
+        e.preventDefault();
+        const allowedFiles = filesToUpload.slice(0, 10 - attachedFiles.length);
+        if (!allowedFiles.length) {
+            alert('Limit of 10 attached files reached.');
+            return;
+        }
+
+        setUploading(true); setUploadProgress(0);
+        try {
+            const uploadPromises = allowedFiles.map(file => {
+                const { promise } = uploadFileWithProgress(
+                    `/chat/upload`,
+                    file,
+                    () => {},
+                    id ? { agent_id: id } : undefined,
+                );
+                return promise;
+            });
+            const results = await Promise.all(uploadPromises);
+            const newAttached = results.map(data => ({
+                name: data.filename, text: data.extracted_text, path: data.workspace_path, imageUrl: data.image_data_url || undefined
+            }));
+            setAttachedFiles(prev => [...prev, ...newAttached].slice(0, 10));
+        } catch (err: any) {
+            if (err?.message !== 'Upload cancelled') alert(t('agent.upload.failed'));
+        } finally { setUploading(false); setUploadProgress(-1); uploadAbortRef.current = null; }
+    };
+
+    // Expandable activity log
+    const [expandedLogId, setExpandedLogId] = useState<string | null>(null);
+    const [logFilter, setLogFilter] = useState<string>('user'); // 'user' | 'backend' | 'heartbeat' | 'schedule' | 'messages'
+
+    // Import skill from presets
+    const [showImportSkillModal, setShowImportSkillModal] = useState(false);
+    const [importingSkillId, setImportingSkillId] = useState<string | null>(null);
+    const { data: globalSkillsForImport } = useQuery({
+        queryKey: ['global-skills-for-import'],
+        queryFn: () => skillApi.list(),
+        enabled: showImportSkillModal,
+    });
+    // Agent-level import from ClawHub / URL
+    const [showAgentClawhub, setShowAgentClawhub] = useState(false);
+    const [agentClawhubQuery, setAgentClawhubQuery] = useState('');
+    const [agentClawhubResults, setAgentClawhubResults] = useState<any[]>([]);
+    const [agentClawhubSearching, setAgentClawhubSearching] = useState(false);
+    const [agentClawhubInstalling, setAgentClawhubInstalling] = useState<string | null>(null);
+    const [showSkillFolderUploadModal, setShowSkillFolderUploadModal] = useState(false);
+    const { data: schedules = [] } = useQuery({
+        queryKey: ['schedules', id],
+        queryFn: () => scheduleApi.list(id!),
+        enabled: !!id && activeTab === 'tasks',
+    });
+
+    // Schedule form state
+    const [showScheduleForm, setShowScheduleForm] = useState(false);
+    const schedDefaults = { freq: 'daily', interval: 1, time: '09:00', weekdays: [1, 2, 3, 4, 5] };
+    const [schedForm, setSchedForm] = useState({ name: '', instruction: '', schedule: JSON.stringify(schedDefaults), due_date: '' });
+
+    const createScheduleMut = useMutation({
+        mutationFn: () => {
+            let sched: any;
+            try { sched = JSON.parse(schedForm.schedule); } catch { sched = schedDefaults; }
+            return scheduleApi.create(id!, { name: schedForm.name, instruction: schedForm.instruction, cron_expr: schedToCron(sched) });
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['schedules', id] });
+            setShowScheduleForm(false);
+            setSchedForm({ name: '', instruction: '', schedule: JSON.stringify(schedDefaults), due_date: '' });
+        },
+        onError: (err: any) => {
+            const msg = err?.detail || err?.message || String(err);
+            alert(`Failed to create schedule: ${msg}`);
+        },
+    });
+
+    const toggleScheduleMut = useMutation({
+        mutationFn: ({ sid, enabled }: { sid: string; enabled: boolean }) =>
+            scheduleApi.update(id!, sid, { is_enabled: enabled }),
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: ['schedules', id] }),
+    });
+
+    const deleteScheduleMut = useMutation({
+        mutationFn: (sid: string) => scheduleApi.delete(id!, sid),
+        onSuccess: () => queryClient.invalidateQueries({ queryKey: ['schedules', id] }),
+    });
+
+    const triggerScheduleMut = useMutation({
+        mutationFn: async (sid: string) => {
+            const res = await scheduleApi.trigger(id!, sid);
+            return res;
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['schedules', id] });
+            showToast('✅ Schedule triggered — executing in background', 'success');
+        },
+        onError: (err: any) => {
+            const msg = err?.response?.data?.detail || err?.message || 'Failed to trigger schedule';
+            showToast(msg, 'error');
+        },
+    });
+
+
+    const { data: metrics } = useQuery({
+        queryKey: ['metrics', id],
+        queryFn: () => agentApi.metrics(id!).catch(() => null),
+        enabled: !!id && activeTab === 'status',
+        retry: false,
+    });
+
+    const { data: channelConfig } = useQuery({
+        queryKey: ['channel', id],
+        queryFn: () => channelApi.get(id!),
+        enabled: !!id && activeTab === 'settings',
+    });
+
+    const { data: webhookData } = useQuery({
+        queryKey: ['webhook-url', id],
+        queryFn: () => channelApi.webhookUrl(id!),
+        enabled: !!id && activeTab === 'settings',
+    });
+
+    const { data: llmModels = [] } = useQuery({
+        queryKey: ['llm-models'],
+        queryFn: () => enterpriseApi.llmModels(),
+        enabled: activeTab === 'settings' || activeTab === 'status' || activeTab === 'chat',
+    });
+
+    const supportsVision = !!agent?.primary_model_id && llmModels.some(
+        (m: any) => m.id === agent.primary_model_id && m.supports_vision
+    );
+
+    const { data: permData } = useQuery({
+        queryKey: ['agent-permissions', id],
+        queryFn: () => fetchAuth<any>(`/agents/${id}/permissions`),
+        enabled: !!id && activeTab === 'settings',
+    });
+
+    // ─── Soul editor ─────────────────────────────────────
+    const [soulEditing, setSoulEditing] = useState(false);
+    const [soulDraft, setSoulDraft] = useState('');
+
+    const saveSoul = useMutation({
+        mutationFn: () => fileApi.write(id!, 'soul.md', soulDraft),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['file', id, 'soul.md'] });
+            setSoulEditing(false);
+        },
+    });
+
+
+    const CopyBtn = ({ url }: { url: string }) => (
+        <button title="Copy" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginLeft: '6px', padding: '1px 4px', cursor: 'pointer', borderRadius: '3px', border: '1px solid var(--border-color)', background: 'var(--bg-primary)', color: 'var(--text-secondary)', verticalAlign: 'middle', lineHeight: 1 }}
+            onClick={() => navigator.clipboard.writeText(url).then(() => { })}>
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="4" y="4" width="9" height="11" rx="1.5" /><path d="M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1" />
+            </svg>
+        </button>
+    );
+
+    // ─── File viewer ─────────────────────────────────────
+    const [viewingFile, setViewingFile] = useState<string | null>(null);
+    const [fileEditing, setFileEditing] = useState(false);
+    const [fileDraft, setFileDraft] = useState('');
+    const [promptModal, setPromptModal] = useState<{ title: string; placeholder: string; action: string } | null>(null);
+    const [deleteConfirm, setDeleteConfirm] = useState<{ path: string; name: string; isDir: boolean } | null>(null);
+    const [uploadToast, setUploadToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
+    const [editingRole, setEditingRole] = useState(false);
+    const [roleInput, setRoleInput] = useState('');
+    const [editingName, setEditingName] = useState(false);
+    const [nameInput, setNameInput] = useState('');
+    const showToast = (message: string, type: 'success' | 'error' = 'success') => {
+        setUploadToast({ message, type });
+        setTimeout(() => setUploadToast(null), 3000);
+    };
+    const { data: fileContent } = useQuery({
+        queryKey: ['file-content', id, viewingFile],
+        queryFn: () => fileApi.read(id!, viewingFile!),
+        enabled: !!viewingFile,
+    });
+
+    // ─── Task creation & detail ───────────────────────────────────
+    const [showTaskForm, setShowTaskForm] = useState(false);
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const [taskForm, setTaskForm] = useState({ title: '', description: '', priority: 'medium', type: 'todo' as 'todo' | 'supervision', supervision_target_name: '', remind_schedule: '', due_date: '' });
+    const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null);
+    const { data: taskLogs = [] } = useQuery({
+        queryKey: ['task-logs', id, selectedTaskId],
+        queryFn: () => taskApi.getLogs(id!, selectedTaskId!),
+        enabled: !!id && !!selectedTaskId,
+        refetchInterval: selectedTaskId ? 3000 : false,
+    });
+
+    // Schedule execution history (selectedTaskId format: 'sched-{uuid}')
+    const expandedScheduleId = selectedTaskId?.startsWith('sched-') ? selectedTaskId.slice(6) : null;
+    const { data: scheduleHistoryData } = useQuery({
+        queryKey: ['schedule-history', id, expandedScheduleId],
+        queryFn: () => scheduleApi.history(id!, expandedScheduleId!),
+        enabled: !!id && !!expandedScheduleId,
+    });
+    const createTask = useMutation({
+        mutationFn: (data: any) => {
+            const cleaned = { ...data };
+            if (!cleaned.due_date) delete cleaned.due_date;
+            return taskApi.create(id!, cleaned);
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ['tasks', id] });
+            setShowTaskForm(false);
+            setTaskForm({ title: '', description: '', priority: 'medium', type: 'todo', supervision_target_name: '', remind_schedule: '', due_date: '' });
+        },
+    });
+
+    if (isLoading || !agent) {
+        return <div style={{ padding: '40px', color: 'var(--text-tertiary)' }}>{t('common.loading')}</div>;
+    }
+
+    // Compute display status (including OpenClaw disconnected detection)
+    const computeStatusKey = () => {
+        if (agent.status === 'error') return 'error';
+        if (agent.status === 'creating') return 'creating';
+        if (agent.status === 'stopped') return 'stopped';
+        if ((agent as any).agent_type === 'openclaw' && agent.status === 'running' && (agent as any).openclaw_last_seen) {
+            const elapsed = Date.now() - new Date((agent as any).openclaw_last_seen).getTime();
+            if (elapsed > 60 * 60 * 1000) return 'disconnected';
+        }
+        return agent.status === 'running' ? 'running' : 'idle';
+    };
+    const statusKey = computeStatusKey();
+    const canManage = (agent as any).access_level === 'manage' || isAdmin;
+
+    return (
+        <>
+            <style>{`.message-row:hover .edit-btn { opacity: 1 !important; }`}</style>
+            <div>
+                {/* Header */}
+                <div className="page-header">
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+                        <div style={{ width: '48px', height: '48px', borderRadius: '12px', background: 'var(--accent-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '24px' }}>{(Array.from(agent.name || 'A')[0] as string || 'A').toUpperCase()}</div>
+                        <div style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
+                            {canManage && editingName ? (
+                                <input
+                                    className="page-title"
+                                    autoFocus
+                                    value={nameInput}
+                                    onChange={e => setNameInput(e.target.value)}
+                                    onBlur={async () => {
+                                        setEditingName(false);
+                                        if (nameInput.trim() && nameInput !== agent.name) {
+                                            await agentApi.update(id!, { name: nameInput.trim() } as any);
+                                            queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                        } else {
+                                            setNameInput(agent.name);
+                                        }
+                                    }}
+                                    onKeyDown={async e => {
+                                        if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+                                        if (e.key === 'Escape') { setEditingName(false); setNameInput(agent.name); }
+                                    }}
+                                    style={{
+                                        background: 'var(--bg-elevated)', border: '1px solid var(--accent-primary)',
+                                        borderRadius: '6px', color: 'var(--text-primary)',
+                                        padding: '4px 10px', minWidth: '320px', width: 'auto', outline: 'none',
+                                        marginBottom: '0', display: 'block',
+                                    }}
+                                />
+                            ) : (
+                                <h1 className="page-title"
+                                    title={canManage ? "Click to edit name" : undefined}
+                                    onClick={() => { if (canManage) { setNameInput(agent.name); setEditingName(true); } }}
+                                    style={{ cursor: canManage ? 'text' : 'default', borderBottom: canManage ? '1px dashed transparent' : 'none', display: 'inline-block', marginBottom: '0' }}
+                                    onMouseEnter={e => { if (canManage) e.currentTarget.style.borderBottomColor = 'var(--text-tertiary)'; }}
+                                    onMouseLeave={e => { if (canManage) e.currentTarget.style.borderBottomColor = 'transparent'; }}
+                                >
+                                    {agent.name}
+                                </h1>
+                            )}
+                            <p className="page-subtitle" style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '4px' }}>
+                                <span className={`status-dot ${statusKey}`} />
+                                {t(`agent.status.${statusKey}`)}
+                                {canManage && editingRole ? (
+                                    <textarea
+                                        autoFocus
+                                        value={roleInput}
+                                        onChange={e => setRoleInput(e.target.value)}
+                                        onBlur={async () => {
+                                            setEditingRole(false);
+                                            if (roleInput !== agent.role_description) {
+                                                await agentApi.update(id!, { role_description: roleInput } as any);
+                                                queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                            }
+                                        }}
+                                        onKeyDown={async e => {
+                                            if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); (e.target as HTMLTextAreaElement).blur(); }
+                                            if (e.key === 'Escape') { setEditingRole(false); setRoleInput(agent.role_description || ''); }
+                                        }}
+                                        rows={2}
+                                        style={{
+                                            background: 'var(--bg-elevated)', border: '1px solid var(--accent-primary)',
+                                            borderRadius: '6px', color: 'var(--text-primary)', fontSize: '13px',
+                                            padding: '6px 10px', width: 'min(500px, 50vw)', outline: 'none',
+                                            resize: 'vertical', lineHeight: '1.5', fontFamily: 'inherit',
+                                        }}
+                                    />
+                                ) : (
+                                    <span
+                                        title={canManage ? (agent.role_description || 'Click to edit') : (agent.role_description || '')}
+                                        onClick={() => { if (canManage) { setRoleInput(agent.role_description || ''); setEditingRole(true); } }}
+                                        style={{ cursor: canManage ? 'text' : 'default', borderBottom: canManage ? '1px dashed transparent' : 'none', maxWidth: '38vw', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'inline-block', verticalAlign: 'middle' }}
+                                        onMouseEnter={e => { if (canManage) e.currentTarget.style.borderBottomColor = 'var(--text-tertiary)'; }}
+                                        onMouseLeave={e => { if (canManage) e.currentTarget.style.borderBottomColor = 'transparent'; }}
+                                    >
+                                        {agent.role_description ? `· ${agent.role_description}` : (canManage ? <span style={{ color: 'var(--text-tertiary)', fontSize: '12px' }}>· {t('agent.fields.role', 'Click to add a description...')}</span> : null)}
+                                    </span>
+                                )}
+                                {(agent as any).is_expired && (
+                                    <span style={{ background: 'var(--error)', color: '#fff', padding: '2px 8px', borderRadius: '4px', fontSize: '11px', fontWeight: 600 }}>Expired</span>
+                                )}
+                                {(agent as any).agent_type === 'openclaw' && (
+                                    <span style={{
+                                        fontSize: '10px', padding: '2px 6px', borderRadius: '4px',
+                                        background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', color: '#fff', fontWeight: 600,
+                                        letterSpacing: '0.5px',
+                                    }}>OpenClaw · Lab</span>
+                                )}
+                                {!(agent as any).is_expired && (agent as any).expires_at && (
+                                    <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                        Expires: {new Date((agent as any).expires_at).toLocaleString()}
+                                    </span>
+                                )}
+                                {isAdmin && (
+                                    <button
+                                        onClick={openExpiryModal}
+                                        title="Edit expiry time"
+                                        style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '11px', color: 'var(--text-tertiary)', padding: '1px 4px', borderRadius: '4px', lineHeight: 1 }}
+                                        onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-secondary)')}
+                                        onMouseLeave={e => (e.currentTarget.style.background = 'none')}
+                                    >✏️ {t((agent as any).expires_at || (agent as any).is_expired ? 'agent.settings.expiry.renew' : 'agent.settings.expiry.setExpiry')}</button>
+                                )}
+                            </p>
+                        </div>
+                    </div>
+                    <div style={{ display: 'flex', gap: '8px' }}>
+                        <button className="btn btn-primary" onClick={() => setActiveTab('chat')}>{t('agent.actions.chat')}</button>
+                        {(agent as any)?.agent_type !== 'openclaw' && (
+                            <>
+                                {agent.status === 'stopped' ? (
+                                    <button className="btn btn-secondary" onClick={async () => { await agentApi.start(id!); queryClient.invalidateQueries({ queryKey: ['agent', id] }); }}>{t('agent.actions.start')}</button>
+                                ) : agent.status === 'running' ? (
+                                    <button className="btn btn-secondary" onClick={async () => { await agentApi.stop(id!); queryClient.invalidateQueries({ queryKey: ['agent', id] }); }}>{t('agent.actions.stop')}</button>
+                                ) : null}
+                            </>
+                        )}
+                    </div>
+                </div>
+
+                {/* Tabs */}
+                <div className="tabs">
+                    {TABS.filter(tab => {
+                        // 'use' access: hide settings and approvals tabs
+                        if ((agent as any)?.access_level === 'use') {
+                            if (tab === 'settings' || tab === 'approvals') return false;
+                        }
+                        // OpenClaw agents: only show status, chat, activityLog, settings
+                        if ((agent as any)?.agent_type === 'openclaw') {
+                            return ['status', 'relationships', 'chat', 'activityLog', 'settings'].includes(tab);
+                        }
+                        return true;
+                    }).map((tab) => (
+                        <div key={tab} className={`tab ${activeTab === tab ? 'active' : ''}`} onClick={() => setActiveTab(tab)}>
+                            {t(`agent.tabs.${tab}`)}
+                        </div>
+                    ))}
+                </div>
+
+                {/* ── Enhanced Status Tab ── */}
+                {activeTab === 'status' && (() => {
+                    // Format date helper
+                    const formatDate = (d: string) => {
+                        try { return new Date(d).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }); } catch { return d; }
+                    };
+                    // Get model label
+                    const primaryModel = llmModels.find((m: any) => m.id === agent.primary_model_id);
+                    const modelLabel = primaryModel ? (primaryModel.label || primaryModel.model) : '—';
+                    const modelProvider = primaryModel ? primaryModel.provider : '—';
+
+                    return (
+                        <div>
+                            {/* Metric cards */}
+                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px', marginBottom: '24px' }}>
+                                <div className="card">
+                                    <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>📋 {t('agent.tabs.status')}</div>
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        <span className={`status-dot ${statusKey}`} />
+                                        <span style={{ fontSize: '16px', fontWeight: 500 }}>{t(`agent.status.${statusKey}`)}</span>
+                                    </div>
+                                </div>
+                                <div className="card">
+                                    <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>🗓️ {t('agent.settings.today')} Token</div>
+                                    <div style={{ fontSize: '22px', fontWeight: 600 }}>{formatTokens(agent.tokens_used_today)}</div>
+                                    {agent.max_tokens_per_day && <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>{t('agent.settings.noLimit')} {formatTokens(agent.max_tokens_per_day)}</div>}
+                                </div>
+                                <div className="card">
+                                    <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>📅 {t('agent.settings.month')} Token</div>
+                                    <div style={{ fontSize: '22px', fontWeight: 600 }}>{formatTokens(agent.tokens_used_month)}</div>
+                                    {agent.max_tokens_per_month && <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>{t('agent.settings.noLimit')} {formatTokens(agent.max_tokens_per_month)}</div>}
+                                </div>
+                                {/* Native agent metrics */}
+                                {(agent as any)?.agent_type !== 'openclaw' && (<>
+                                <div className="card">
+                                    <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>{t('agent.status.llmCallsToday')}</div>
+                                    <div style={{ fontSize: '22px', fontWeight: 600 }}>{((agent as any).llm_calls_today || 0).toLocaleString()}</div>
+                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>{t('agent.status.max')}: {((agent as any).max_llm_calls_per_day || 100).toLocaleString()}</div>
+                                </div>
+                                <div className="card">
+                                    <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>{t('agent.status.totalToken')}</div>
+                                    <div style={{ fontSize: '22px', fontWeight: 600 }}>{formatTokens((agent as any).tokens_used_total || 0)}</div>
+                                </div>
+                                {metrics && (
+                                    <>
+                                        <div className="card">
+                                            <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>✅ {t('agent.tasks.done')}</div>
+                                            <div style={{ fontSize: '22px', fontWeight: 600 }}>{metrics.tasks?.done || 0}/{metrics.tasks?.total || 0}</div>
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}> {metrics.tasks?.completion_rate || 0}%</div>
+                                        </div>
+                                        <div className="card">
+                                            <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>{t('agent.status.pending')}</div>
+                                            <div style={{ fontSize: '22px', fontWeight: 600, color: metrics.approvals?.pending > 0 ? 'var(--warning)' : 'inherit' }}>{metrics.approvals?.pending || 0}</div>
+                                        </div>
+                                        <div className="card" style={{ position: 'relative' }}>
+                                            <div className="metric-tooltip-trigger" style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px', cursor: 'help', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
+                                                {t('agent.status.24hActions')}
+                                                <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="8" cy="8" r="6.5" /><path d="M8 7v4M8 5.5v0" /></svg>
+                                                <span className="metric-tooltip">{t('agent.status.24hActionsTooltip')}</span>
+                                            </div>
+                                            <div style={{ fontSize: '22px', fontWeight: 600 }}>{metrics.activity?.actions_last_24h || 0}</div>
+                                        </div>
+                                    </>
+                                )}
+                                </>)}
+                                {/* OpenClaw-specific metrics */}
+                                {(agent as any)?.agent_type === 'openclaw' && (
+                                    <div className="card">
+                                        <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>
+                                            {t('agent.openclaw.lastSeen')}
+                                        </div>
+                                        <div style={{ fontSize: '16px', fontWeight: 500 }}>
+                                            {(agent as any).openclaw_last_seen
+                                                ? new Date((agent as any).openclaw_last_seen).toLocaleString()
+                                                : t('agent.openclaw.notConnected')}
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+
+                            {/* Agent Profile & Model Info */}
+                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '24px' }}>
+                                <div className="card">
+                                    <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px' }}>{t('agent.profile.title')}</h3>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px', gap: '12px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)', flexShrink: 0 }}>{t('agent.fields.role')}</span>
+                                            <span title={agent.role_description || ''} style={{ textAlign: 'right', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' as any }}>{agent.role_description || '—'}</span>
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.profile.created')}</span>
+                                            <span>{agent.created_at ? formatDate(agent.created_at) : '—'}</span>
+                                        </div>
+                                        {(agent as any).creator_username && (
+                                            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                                <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.fields.createdBy', 'Created by')}</span>
+                                                <span style={{ color: 'var(--text-secondary)' }}>@{(agent as any).creator_username}</span>
+                                            </div>
+                                        )}
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.profile.lastActive')}</span>
+                                            <span>{agent.last_active_at ? formatDate(agent.last_active_at) : '—'}</span>
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.profile.timezone')}</span>
+                                            <span>{(agent as any).effective_timezone || agent.timezone || 'UTC'}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                {(agent as any)?.agent_type !== 'openclaw' ? (
+                                <div className="card">
+                                    <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px' }}>{t('agent.modelConfig.title')}</h3>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.modelConfig.model')}</span>
+                                            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px' }}>{modelLabel}</span>
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.modelConfig.provider')}</span>
+                                            <span style={{ textTransform: 'capitalize' }}>{modelProvider}</span>
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.modelConfig.contextRounds')}</span>
+                                            <span>{(agent as any).context_window_size || 100}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                ) : (
+                                <div className="card">
+                                    <h3 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px' }}>
+                                        {t('agent.openclaw.connection')}
+                                    </h3>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.openclaw.type')}</span>
+                                            <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                                <span style={{
+                                                    fontSize: '10px', padding: '2px 6px', borderRadius: '4px',
+                                                    background: 'linear-gradient(135deg, #6366f1, #8b5cf6)', color: '#fff', fontWeight: 600,
+                                                }}>OpenClaw</span>
+                                                Lab
+                                            </span>
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.openclaw.lastSeen')}</span>
+                                            <span>{(agent as any).openclaw_last_seen
+                                                ? new Date((agent as any).openclaw_last_seen).toLocaleString()
+                                                : t('agent.openclaw.never')}
+                                            </span>
+                                        </div>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '13px' }}>
+                                            <span style={{ color: 'var(--text-tertiary)' }}>{t('agent.openclaw.model')}</span>
+                                            <span style={{ color: 'var(--text-secondary)' }}>{t('agent.openclaw.managedBy')}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                )}
+                            </div>
+
+                            {/* Recent Activity */}
+                            {activityLogs && activityLogs.length > 0 && (
+                                <div className="card">
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                                        <h3 style={{ fontSize: '14px', fontWeight: 600 }}>📊 Recent Activity</h3>
+                                        <button className="btn btn-ghost" style={{ fontSize: '12px' }} onClick={() => setActiveTab('activityLog')}>View All →</button>
+                                    </div>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                                        {activityLogs.slice(0, 5).map((log: any, i: number) => (
+                                            <div key={i} style={{ display: 'flex', gap: '12px', alignItems: 'flex-start', padding: '6px 0', borderBottom: i < 4 ? '1px solid var(--border-subtle)' : 'none' }}>
+                                                <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', minWidth: '60px', flexShrink: 0 }}>
+                                                    {new Date(log.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                                </span>
+                                                <span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>{log.summary || log.action_type}</span>
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Quick Actions */}
+                            <div style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
+                                <button className="btn btn-secondary" onClick={() => setActiveTab('chat')}>{t('agent.actions.chat')}</button>
+                                {(agent as any)?.agent_type !== 'openclaw' && <button className="btn btn-secondary" onClick={() => setActiveTab('aware')}>{t('agent.tabs.aware')}</button>}
+                                <button className="btn btn-secondary" onClick={() => setActiveTab('settings')}>{t('agent.tabs.settings')}</button>
+                            </div>
+                        </div>
+                    );
+                })()}
+
+                {/* ── Aware Tab ── */}
+                {activeTab === 'aware' && (() => {
+                    // Parse focus.md into focus items with multi-line descriptions
+                    const raw = focusFile?.content || '';
+                    const lines = raw.split('\n');
+                    const focusItems: { id: string; name: string; description: string; done: boolean; inProgress: boolean }[] = [];
+                    let currentItem: any = null;
+                    for (const line of lines) {
+                        const match = line.match(/^\s*-\s*\[([ x/])\]\s*(.+)/i);
+                        if (match) {
+                            if (currentItem) focusItems.push(currentItem);
+                            const marker = match[1];
+                            const fullText = match[2].trim();
+                            // Split on first colon: "identifier: description"
+                            const colonIdx = fullText.indexOf(':');
+                            const itemName = colonIdx > 0 ? fullText.substring(0, colonIdx).trim() : fullText;
+                            const itemDesc = colonIdx > 0 ? fullText.substring(colonIdx + 1).trim() : '';
+                            currentItem = {
+                                id: itemName,
+                                name: itemName,
+                                description: itemDesc,
+                                done: marker.toLowerCase() === 'x',
+                                inProgress: marker === '/',
+                            };
+                        } else if (currentItem && line.trim() && /^\s{2,}/.test(line)) {
+                            // Indented continuation line = description
+                            currentItem.description = currentItem.description
+                                ? currentItem.description + ' ' + line.trim()
+                                : line.trim();
+                        }
+                    }
+                    if (currentItem) focusItems.push(currentItem);
+
+                    // Helper: convert trigger config to natural language
+                    const triggerToHuman = (trig: any): string => {
+                        if (trig.type === 'cron' && trig.config?.expr) {
+                            const expr = trig.config.expr;
+                            const parts = expr.split(' ');
+                            if (parts.length >= 5) {
+                                const [min, hour, , , dow] = parts;
+                                const timeStr = `${hour.padStart(2, '0')}:${min.padStart(2, '0')}`;
+                                if (dow === '*' && min !== '*' && hour !== '*') return `Every day at ${timeStr}`;
+                                if (dow === '1-5' && min !== '*' && hour !== '*') return `Weekdays at ${timeStr}`;
+                                if (dow === '0' || dow === '7') return `Sundays at ${timeStr}`;
+                                if (hour === '*' && min === '0') {
+                                    if (dow === '1-5') return 'Every hour on weekdays';
+                                    return 'Every hour';
+                                }
+                                if (hour === '*' && min !== '*') return `Every hour at :${min.padStart(2, '0')}`;
+                            }
+                            return `Cron: ${expr}`;
+                        }
+                        if (trig.type === 'once' && trig.config?.at) {
+                            try {
+                                return `Once at ${new Date(trig.config.at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}`;
+                            } catch { return `Once at ${trig.config.at}`; }
+                        }
+                        if (trig.type === 'interval' && trig.config?.minutes) {
+                            const m = trig.config.minutes;
+                            return m >= 60 ? `Every ${m / 60}h` : `Every ${m} min`;
+                        }
+                        if (trig.type === 'poll') return `Poll: ${trig.config?.url?.substring(0, 40) || 'URL'}`;
+                        if (trig.type === 'on_message') {
+                            return `On message from ${trig.config?.from_agent_name || trig.config?.from_user_name || 'unknown'}`;
+                        }
+                        if (trig.type === 'webhook') {
+                            return `Webhook${trig.config?.token ? ` (${trig.config.token.substring(0, 6)}...)` : ''}`;
+                        }
+                        return trig.type;
+                    };
+
+                    // Group triggers by focus_ref
+                    const triggersByFocus: Record<string, any[]> = {};
+                    const standaloneTriggers: any[] = [];
+                    for (const trig of awareTriggers) {
+                        if (trig.focus_ref && focusItems.some(f => f.name === trig.focus_ref)) {
+                            if (!triggersByFocus[trig.focus_ref]) triggersByFocus[trig.focus_ref] = [];
+                            triggersByFocus[trig.focus_ref].push(trig);
+                        } else {
+                            standaloneTriggers.push(trig);
+                        }
+                    }
+
+                    // Group activity logs by trigger name -> focus_ref
+                    const triggerLogsByFocus: Record<string, any[]> = {};
+                    const triggerNameToFocus: Record<string, string> = {};
+                    for (const trig of awareTriggers) {
+                        if (trig.focus_ref) triggerNameToFocus[trig.name] = trig.focus_ref;
+                    }
+                    const triggerRelatedLogs = activityLogs.filter((log: any) =>
+                        log.action_type === 'trigger_fired' || log.action_type === 'trigger_created' ||
+                        log.action_type === 'trigger_updated' || log.action_type === 'trigger_cancelled' ||
+                        log.summary?.includes('trigger')
+                    );
+                    for (const log of triggerRelatedLogs) {
+                        // Try to match log to a focus item via trigger name in the summary
+                        let matched = false;
+                        for (const [trigName, focusName] of Object.entries(triggerNameToFocus)) {
+                            if (log.summary?.includes(trigName) || log.detail?.tool === trigName) {
+                                if (!triggerLogsByFocus[focusName]) triggerLogsByFocus[focusName] = [];
+                                triggerLogsByFocus[focusName].push(log);
+                                matched = true;
+                                break;
+                            }
+                        }
+                        if (!matched) {
+                            if (!triggerLogsByFocus['__unmatched__']) triggerLogsByFocus['__unmatched__'] = [];
+                            triggerLogsByFocus['__unmatched__'].push(log);
+                        }
+                    }
+
+                    const hasFocusItems = focusItems.length > 0;
+                    const hasStandalone = standaloneTriggers.length > 0;
+
+                    // Split focus items: active first, completed separately
+                    const activeFocusItems = focusItems.filter(f => !f.done);
+                    const completedFocusItems = focusItems.filter(f => f.done);
+                    const visibleActiveFocus = showAllFocus ? activeFocusItems : activeFocusItems.slice(0, SECTION_PAGE_SIZE);
+                    const hiddenActiveCount = activeFocusItems.length - visibleActiveFocus.length;
+
+                    // Render a focus item row
+                    const renderFocusItem = (item: typeof focusItems[0]) => {
+                        const isExpanded = expandedFocus === item.id;
+                        const itemTriggers = triggersByFocus[item.name] || [];
+                        const itemLogs = triggerLogsByFocus[item.name] || [];
+                        const displayTitle = item.description || item.name;
+                        const displaySubtitle = item.description ? item.name : null;
+
+                        return (
+                            <div key={item.id} style={{
+                                borderRadius: '8px',
+                                border: '1px solid var(--border-subtle)',
+                                overflow: 'hidden',
+                                marginBottom: '6px',
+                                background: 'var(--bg-primary)',
+                            }}>
+                                {/* Focus Item Header */}
+                                <div
+                                    onClick={() => setExpandedFocus(isExpanded ? null : item.id)}
+                                    style={{
+                                        padding: '12px 16px',
+                                        display: 'flex',
+                                        alignItems: 'flex-start',
+                                        gap: '12px',
+                                        cursor: 'pointer',
+                                        transition: 'background 0.15s',
+                                    }}
+                                    onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-secondary)')}
+                                    onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                                >
+                                    {/* Status indicator */}
+                                    <div style={{
+                                        width: '8px', height: '8px', borderRadius: '50%', marginTop: '5px', flexShrink: 0,
+                                        background: item.done ? 'var(--success, #10b981)' : item.inProgress ? 'var(--accent-primary)' : 'var(--border-subtle)',
+                                    }} />
+                                    <div style={{ flex: 1, minWidth: 0 }}>
+                                        <div style={{
+                                            fontSize: '13px', fontWeight: 500, lineHeight: '20px',
+                                            textDecoration: item.done ? 'line-through' : 'none',
+                                            color: item.done ? 'var(--text-tertiary)' : 'var(--text-primary)',
+                                        }}>{displayTitle}</div>
+                                        {displaySubtitle && (
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', fontFamily: 'monospace', marginTop: '2px' }}>
+                                                {displaySubtitle}
+                                            </div>
+                                        )}
+                                    </div>
+                                    {/* Trigger count badge */}
+                                    {itemTriggers.length > 0 && (
+                                        <span style={{
+                                            fontSize: '11px', color: 'var(--text-tertiary)',
+                                            padding: '2px 8px', borderRadius: '10px',
+                                            background: 'var(--bg-secondary)',
+                                            whiteSpace: 'nowrap',
+                                        }}>
+                                            {itemTriggers.length} trigger{itemTriggers.length > 1 ? 's' : ''}
+                                        </span>
+                                    )}
+                                    {/* Expand arrow */}
+                                    <span style={{
+                                        fontSize: '11px', color: 'var(--text-tertiary)',
+                                        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                        transition: 'transform 0.15s',
+                                        marginTop: '4px',
+                                    }}>&#9654;</span>
+                                </div>
+
+                                {/* Expanded content */}
+                                {isExpanded && (
+                                    <div style={{ padding: '0 16px 12px 36px', borderTop: '1px solid var(--border-subtle)' }}>
+                                        {/* Nested Triggers */}
+                                        {itemTriggers.length > 0 && (
+                                            <div style={{ marginTop: '12px' }}>
+                                                {itemTriggers.map((trig: any) => (
+                                                    <div key={trig.id} style={{
+                                                        display: 'flex', alignItems: 'center', gap: '10px',
+                                                        padding: '8px 12px', marginBottom: '4px',
+                                                        borderRadius: '6px', background: 'var(--bg-secondary)',
+                                                        opacity: trig.is_enabled ? 1 : 0.5,
+                                                    }}>
+                                                        <div style={{ flex: 1 }}>
+                                                            <div style={{ fontSize: '12px', fontWeight: 500, color: 'var(--text-primary)' }}>
+                                                                {triggerToHuman(trig)}
+                                                            </div>
+                                                            {trig.reason && <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>{trig.reason}</div>}
+                                                            <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginTop: '2px', fontFamily: 'monospace' }}>
+                                                                {trig.type === 'cron' ? trig.config?.expr : ''}{' '}
+                                                            </div>
+                                                        </div>
+                                                        <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>
+                                                            {t('agent.aware.fired', { count: trig.fire_count })}
+                                                        </span>
+                                                        {!trig.is_enabled && (
+                                                            <span style={{ fontSize: '10px', color: 'var(--text-tertiary)' }}>{t('agent.aware.disabled')}</span>
+                                                        )}
+                                                        <div style={{ display: 'flex', gap: '4px' }}>
+                                                            <button className="btn btn-ghost" style={{ padding: '2px 6px', fontSize: '11px' }}
+                                                                onClick={async (e) => {
+                                                                    e.stopPropagation();
+                                                                    await triggerApi.update(id!, trig.id, { is_enabled: !trig.is_enabled });
+                                                                    refetchTriggers();
+                                                                }}>
+                                                                {trig.is_enabled ? t('agent.aware.disable') : t('agent.aware.enable')}
+                                                            </button>
+                                                            <button className="btn btn-ghost" style={{ padding: '2px 6px', fontSize: '11px', color: 'var(--error)' }}
+                                                                onClick={async (e) => {
+                                                                    e.stopPropagation();
+                                                                    if (confirm(t('agent.aware.deleteTriggerConfirm', { name: trig.name }))) {
+                                                                        await triggerApi.delete(id!, trig.id);
+                                                                        refetchTriggers();
+                                                                    }
+                                                                }}>
+                                                                {t('common.delete', 'Delete')}
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        )}
+
+                                        {/* Activity Logs for this focus */}
+                                        {itemLogs.length > 0 && (
+                                            <div style={{ marginTop: '12px' }}>
+                                                <div style={{ fontSize: '11px', fontWeight: 600, color: 'var(--text-tertiary)', marginBottom: '6px' }}>
+                                                    {t('agent.aware.reflections')}
+                                                </div>
+                                                <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                                    {itemLogs.slice(0, 10).map((log: any) => (
+                                                        <div key={log.id} style={{
+                                                            padding: '6px 12px', borderRadius: '6px',
+                                                            background: 'var(--bg-secondary)',
+                                                            borderLeft: '2px solid var(--border-subtle)',
+                                                        }}>
+                                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '2px' }}>
+                                                                <span style={{
+                                                                    fontSize: '10px', padding: '1px 5px', borderRadius: '3px',
+                                                                    background: log.action_type === 'trigger_fired' ? 'rgba(var(--accent-primary-rgb, 99,102,241), 0.1)' : 'var(--bg-tertiary, #e5e7eb)',
+                                                                    color: log.action_type === 'trigger_fired' ? 'var(--accent-primary)' : 'var(--text-tertiary)',
+                                                                    fontWeight: 500,
+                                                                }}>{log.action_type?.replace('trigger_', '')}</span>
+                                                                <span style={{ fontSize: '10px', color: 'var(--text-tertiary)' }}>
+                                                                    {new Date(log.created_at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                                                                </span>
+                                                            </div>
+                                                            <div style={{ fontSize: '12px', color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>{log.summary}</div>
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            </div>
+                                        )}
+
+                                        {itemTriggers.length === 0 && itemLogs.length === 0 && (
+                                            <div style={{ padding: '12px 0', fontSize: '12px', color: 'var(--text-tertiary)' }}>
+                                                {t('agent.aware.noTriggers')}
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    };
+
+                    return (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            {/* ── Focus Section ── */}
+                            <div className="card" style={{ marginBottom: '16px', padding: '16px' }}>
+                                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                                    <div>
+                                        <h4 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{t('agent.aware.focus')}</h4>
+                                        <span style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>{t('agent.aware.focusDesc')}</span>
+                                    </div>
+                                    {hasFocusItems && (
+                                        <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                            {activeFocusItems.length} active{completedFocusItems.length > 0 ? ` · ${completedFocusItems.length} done` : ''}
+                                        </span>
+                                    )}
+                                </div>
+
+                                {/* Active Focus Items */}
+                                {visibleActiveFocus.map(renderFocusItem)}
+
+                                {/* Show more active items */}
+                                {hiddenActiveCount > 0 && (
+                                    <button
+                                        onClick={() => setShowAllFocus(true)}
+                                        className="btn btn-ghost"
+                                        style={{ width: '100%', fontSize: '12px', color: 'var(--text-tertiary)', padding: '8px', marginTop: '4px' }}
+                                    >
+                                        {t('agent.aware.showMore', { count: hiddenActiveCount })}
+                                    </button>
+                                )}
+                                {showAllFocus && activeFocusItems.length > SECTION_PAGE_SIZE && (
+                                    <button
+                                        onClick={(e) => { setShowAllFocus(false); e.currentTarget.closest('.card')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
+                                        className="btn btn-ghost"
+                                        style={{ width: '100%', fontSize: '12px', color: 'var(--text-tertiary)', padding: '8px', marginTop: '4px' }}
+                                    >
+                                        {t('agent.aware.showLess')}
+                                    </button>
+                                )}
+
+                                {/* Completed Focus Items — auto-collapsed */}
+                                {completedFocusItems.length > 0 && (
+                                    <>
+                                        <button
+                                            onClick={() => setShowCompletedFocus(!showCompletedFocus)}
+                                            className="btn btn-ghost"
+                                            style={{
+                                                width: '100%', fontSize: '12px', color: 'var(--text-tertiary)',
+                                                padding: '8px', marginTop: '8px',
+                                                borderTop: '1px solid var(--border-subtle)',
+                                                borderRadius: 0,
+                                            }}
+                                        >
+                                            {showCompletedFocus
+                                                ? t('agent.aware.hideCompleted')
+                                                : t('agent.aware.showCompleted', { count: completedFocusItems.length })
+                                            }
+                                        </button>
+                                        {showCompletedFocus && completedFocusItems.map(renderFocusItem)}
+                                    </>
+                                )}
+
+                                {/* Empty state */}
+                                {!hasFocusItems && (
+                                    <div style={{
+                                        padding: '24px', textAlign: 'center', color: 'var(--text-tertiary)',
+                                        border: '1px dashed var(--border-subtle)', borderRadius: '8px',
+                                    }}>
+                                        {t('agent.aware.focusEmpty')}
+                                    </div>
+                                )}
+                            </div>
+                            {/* ── Standalone Triggers Card ── */}
+                            {hasStandalone && (
+                                <div className="card" style={{ marginBottom: '16px', padding: '16px' }}>
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                                        <div>
+                                            <h4 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{t('agent.aware.standaloneTriggers')}</h4>
+                                        </div>
+                                        <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                            {standaloneTriggers.length} trigger{standaloneTriggers.length > 1 ? 's' : ''}
+                                        </span>
+                                    </div>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                        {[...standaloneTriggers].sort((a: any, b: any) => (b.is_enabled ? 1 : 0) - (a.is_enabled ? 1 : 0)).slice(0, showAllTriggers ? undefined : SECTION_PAGE_SIZE).map((trig: any) => (
+                                            <div key={trig.id} style={{
+                                                padding: '10px 14px', borderRadius: '8px',
+                                                border: '1px solid var(--border-subtle)',
+                                                display: 'flex', alignItems: 'center', gap: '10px',
+                                                opacity: trig.is_enabled ? 1 : 0.5,
+                                                background: 'var(--bg-primary)',
+                                            }}>
+                                                <div style={{ flex: 1 }}>
+                                                    <div style={{ fontSize: '13px', fontWeight: 500 }}>{triggerToHuman(trig)}</div>
+                                                    {trig.reason && <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>{trig.reason}</div>}
+                                                    <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', fontFamily: 'monospace', marginTop: '2px' }}>
+                                                        {trig.name}{trig.type === 'cron' ? ` · ${trig.config?.expr}` : ''}
+                                                    </div>
+                                                </div>
+                                                <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>
+                                                    {t('agent.aware.fired', { count: trig.fire_count })}
+                                                </span>
+                                                {!trig.is_enabled && (
+                                                    <span style={{ fontSize: '10px', color: 'var(--text-tertiary)' }}>{t('agent.aware.disabled')}</span>
+                                                )}
+                                                <div style={{ display: 'flex', gap: '4px' }}>
+                                                    <button className="btn btn-ghost" style={{ padding: '2px 6px', fontSize: '11px' }}
+                                                        onClick={async () => {
+                                                            await triggerApi.update(id!, trig.id, { is_enabled: !trig.is_enabled });
+                                                            refetchTriggers();
+                                                        }}>
+                                                        {trig.is_enabled ? t('agent.aware.disable') : t('agent.aware.enable')}
+                                                    </button>
+                                                    <button className="btn btn-ghost" style={{ padding: '2px 6px', fontSize: '11px', color: 'var(--error)' }}
+                                                        onClick={async () => {
+                                                            if (confirm(t('agent.aware.deleteTriggerConfirm', { name: trig.name }))) {
+                                                                await triggerApi.delete(id!, trig.id);
+                                                                refetchTriggers();
+                                                            }
+                                                        }}>
+                                                        {t('common.delete', 'Delete')}
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                    {standaloneTriggers.length > SECTION_PAGE_SIZE && (
+                                        <button
+                                            onClick={(e) => { const collapse = showAllTriggers; setShowAllTriggers(!showAllTriggers); if (collapse) e.currentTarget.closest('.card')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
+                                            className="btn btn-ghost"
+                                            style={{ width: '100%', fontSize: '12px', color: 'var(--text-tertiary)', padding: '8px', marginTop: '4px' }}
+                                        >
+                                            {showAllTriggers
+                                                ? (i18n.language?.startsWith('zh') ? '收起' : 'Show less')
+                                                : (i18n.language?.startsWith('zh') ? `显示更多 ${standaloneTriggers.length - SECTION_PAGE_SIZE} 项...` : `Show ${standaloneTriggers.length - SECTION_PAGE_SIZE} more...`)
+                                            }
+                                        </button>
+                                    )}
+                                </div>
+                            )}
+
+                            {/* Raw markdown toggle */}
+                            {raw && (
+                                <details style={{ marginTop: '4px', marginBottom: '16px' }}>
+                                    <summary style={{ fontSize: '11px', color: 'var(--text-tertiary)', cursor: 'pointer' }}>{t('agent.aware.viewRawMarkdown')}</summary>
+                                    <pre style={{ fontSize: '11px', marginTop: '8px', padding: '12px', background: 'var(--bg-secondary)', borderRadius: '6px', whiteSpace: 'pre-wrap', maxHeight: '300px', overflow: 'auto' }}>{raw}</pre>
+                                </details>
+                            )}
+
+                            {reflectionSessions.length > 0 && (() => {
+                                const totalPages = Math.ceil(reflectionSessions.length / REFLECTIONS_PAGE_SIZE);
+                                const pageStart = reflectionPage * REFLECTIONS_PAGE_SIZE;
+                                const visibleSessions = reflectionSessions.slice(pageStart, pageStart + REFLECTIONS_PAGE_SIZE);
+                                return (
+                                    <div className="card" style={{ padding: '16px' }}>
+                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                                            <div>
+                                                <h4 style={{ margin: 0, fontSize: '14px', fontWeight: 600 }}>{t('agent.aware.reflections')}</h4>
+                                                <span style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>{t('agent.aware.reflectionsDesc')}</span>
+                                            </div>
+                                            <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                                {reflectionSessions.length} session{reflectionSessions.length > 1 ? 's' : ''}
+                                            </span>
+                                        </div>
+                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                            {visibleSessions.map((session: any) => {
+                                                const isExpanded = expandedReflection === session.id;
+                                                const msgs = reflectionMessages[session.id] || [];
+                                                return (
+                                                    <div key={session.id} style={{
+                                                        borderRadius: '8px',
+                                                        border: '1px solid var(--border-subtle)',
+                                                        overflow: 'hidden',
+                                                        background: 'var(--bg-primary)',
+                                                    }}>
+                                                        <div
+                                                            onClick={async () => {
+                                                                if (isExpanded) {
+                                                                    setExpandedReflection(null);
+                                                                    return;
+                                                                }
+                                                                setExpandedReflection(session.id);
+                                                                if (!reflectionMessages[session.id]) {
+                                                                    try {
+                                                                        const tkn = localStorage.getItem('token');
+                                                                        const res = await fetch(`/api/agents/${id}/sessions/${session.id}/messages`, {
+                                                                            headers: { Authorization: `Bearer ${tkn}` },
+                                                                        });
+                                                                        if (res.ok) {
+                                                                            const data = await res.json();
+                                                                            setReflectionMessages(prev => ({ ...prev, [session.id]: data }));
+                                                                        }
+                                                                    } catch { /* ignore */ }
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                padding: '10px 16px',
+                                                                display: 'flex', alignItems: 'center', gap: '10px',
+                                                                cursor: 'pointer', transition: 'background 0.15s',
+                                                            }}
+                                                            onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-secondary)')}
+                                                            onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                                                        >
+                                                            <div style={{
+                                                                width: '6px', height: '6px', borderRadius: '50%',
+                                                                background: 'var(--accent-primary)', flexShrink: 0,
+                                                            }} />
+                                                            <div style={{ flex: 1, minWidth: 0 }}>
+                                                                <div style={{ fontSize: '12px', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                                                    {(session.title || 'Trigger execution').replace(/^🤖\s*/, '')}
+                                                                </div>
+                                                                <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginTop: '1px' }}>
+                                                                    {new Date(session.created_at).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                                                                    {session.message_count > 0 && ` · ${session.message_count} msg`}
+                                                                </div>
+                                                            </div>
+                                                            <span style={{
+                                                                fontSize: '11px', color: 'var(--text-tertiary)',
+                                                                transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                                                transition: 'transform 0.15s',
+                                                            }}>&#9654;</span>
+                                                        </div>
+                                                        {isExpanded && (
+                                                            <div style={{ padding: '0 16px 12px', borderTop: '1px solid var(--border-subtle)' }}>
+                                                                {msgs.length === 0 ? (
+                                                                    <div style={{ padding: '12px 0', fontSize: '12px', color: 'var(--text-tertiary)' }}>Loading...</div>
+                                                                ) : (
+                                                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', marginTop: '8px' }}>
+                                                                        {msgs.map((msg: any, mi: number) => {
+                                                                            if (msg.role === 'tool_call') {
+                                                                                const tName = msg.toolName || (() => { try { return JSON.parse(msg.content || '{}').name; } catch { return ''; } })() || 'tool';
+                                                                                const tArgs = msg.toolArgs || (() => { try { return JSON.parse(msg.content || '{}').args; } catch { return {}; } })();
+                                                                                const tResult = msg.toolResult || '';
+                                                                                const argsStr = typeof tArgs === 'string' ? tArgs : JSON.stringify(tArgs || {}, null, 2);
+                                                                                const resultStr = typeof tResult === 'string' ? tResult : JSON.stringify(tResult, null, 2);
+                                                                                const hasDetail = argsStr.length > 60 || resultStr;
+                                                                                const Tag = hasDetail ? 'details' : 'div';
+                                                                                const HeaderTag = hasDetail ? 'summary' : 'div';
+                                                                                return (
+                                                                                    <Tag key={mi} style={{ borderRadius: '6px', background: 'var(--bg-secondary)', overflow: 'hidden' }}>
+                                                                                        <HeaderTag style={{
+                                                                                            padding: '5px 10px',
+                                                                                            fontSize: '11px', cursor: hasDetail ? 'pointer' : 'default',
+                                                                                            display: 'flex', alignItems: 'center', gap: '8px',
+                                                                                            listStyle: 'none',
+                                                                                            WebkitAppearance: 'none',
+                                                                                        } as any}>
+                                                                                            {hasDetail && <span style={{ fontSize: '8px', color: 'var(--text-tertiary)', flexShrink: 0 }}>&#9654;</span>}
+                                                                                            <span style={{
+                                                                                                fontWeight: 600, fontSize: '10px', color: 'var(--text-primary)',
+                                                                                                padding: '1px 6px', borderRadius: '3px',
+                                                                                                background: 'var(--bg-tertiary, rgba(0,0,0,0.06))',
+                                                                                                flexShrink: 0, fontFamily: 'monospace',
+                                                                                            }}>{tName}</span>
+                                                                                            <span style={{
+                                                                                                color: 'var(--text-tertiary)', fontFamily: 'monospace', fontSize: '10px',
+                                                                                                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                                                                                            }}>
+                                                                                                {argsStr.replace(/\n/g, ' ').substring(0, 60)}{argsStr.length > 60 ? '...' : ''}
+                                                                                            </span>
+                                                                                        </HeaderTag>
+                                                                                        {hasDetail && (
+                                                                                            <div style={{
+                                                                                                padding: '8px 10px', borderTop: '1px solid var(--border-subtle)',
+                                                                                                fontFamily: 'monospace', fontSize: '10px', lineHeight: 1.5,
+                                                                                                whiteSpace: 'pre-wrap', maxHeight: '200px', overflow: 'auto',
+                                                                                                color: 'var(--text-secondary)',
+                                                                                            }}>
+                                                                                                {argsStr}
+                                                                                                {resultStr && (
+                                                                                                    <>
+                                                                                                        <div style={{ borderTop: '1px dashed var(--border-subtle)', margin: '6px 0', opacity: 0.5 }} />
+                                                                                                        <span style={{ color: 'var(--text-tertiary)' }}>→ </span>{resultStr.substring(0, 500)}
+                                                                                                    </>
+                                                                                                )}
+                                                                                            </div>
+                                                                                        )}
+                                                                                    </Tag>
+                                                                                );
+                                                                            }
+                                                                            if (msg.role === 'tool_result') {
+                                                                                const tName = msg.toolName || (() => { try { return JSON.parse(msg.content || '{}').name; } catch { return ''; } })() || 'result';
+                                                                                const tResult = msg.toolResult || msg.content || '';
+                                                                                const resultStr = typeof tResult === 'string' ? tResult : JSON.stringify(tResult, null, 2);
+                                                                                if (!resultStr) return null;
+                                                                                return (
+                                                                                    <details key={mi} style={{ borderRadius: '6px', background: 'var(--bg-secondary)', overflow: 'hidden' }}>
+                                                                                        <summary style={{
+                                                                                            padding: '5px 10px',
+                                                                                            fontSize: '11px', cursor: 'pointer',
+                                                                                            display: 'flex', alignItems: 'center', gap: '8px',
+                                                                                            listStyle: 'none',
+                                                                                            WebkitAppearance: 'none',
+                                                                                        } as any}>
+                                                                                            <span style={{ fontSize: '8px', color: 'var(--text-tertiary)', flexShrink: 0 }}>&#9654;</span>
+                                                                                            <span style={{
+                                                                                                fontWeight: 600, fontSize: '10px', color: 'var(--text-primary)',
+                                                                                                padding: '1px 6px', borderRadius: '3px',
+                                                                                                background: 'var(--bg-tertiary, rgba(0,0,0,0.06))',
+                                                                                                flexShrink: 0, fontFamily: 'monospace',
+                                                                                            }}>{tName}</span>
+                                                                                            <span style={{
+                                                                                                color: 'var(--text-tertiary)', fontFamily: 'monospace', fontSize: '10px',
+                                                                                                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+                                                                                            }}>
+                                                                                                → {resultStr.replace(/\n/g, ' ').substring(0, 80)}
+                                                                                            </span>
+                                                                                        </summary>
+                                                                                        <div style={{
+                                                                                            padding: '8px 10px', borderTop: '1px solid var(--border-subtle)',
+                                                                                            fontFamily: 'monospace', fontSize: '10px', lineHeight: 1.5,
+                                                                                            whiteSpace: 'pre-wrap', maxHeight: '200px', overflow: 'auto',
+                                                                                            color: 'var(--text-secondary)',
+                                                                                        }}>
+                                                                                            {resultStr.substring(0, 1000)}
+                                                                                        </div>
+                                                                                    </details>
+                                                                                );
+                                                                            }
+                                                                            if (msg.role === 'assistant') {
+                                                                                return (
+                                                                                    <div key={mi} style={{
+                                                                                        padding: '8px 10px', borderRadius: '6px',
+                                                                                        background: 'var(--bg-secondary)',
+                                                                                        fontSize: '12px', color: 'var(--text-primary)',
+                                                                                        whiteSpace: 'pre-wrap', lineHeight: '1.5',
+                                                                                        maxHeight: '200px', overflow: 'auto',
+                                                                                    }}>
+                                                                                        {msg.content}
+                                                                                    </div>
+                                                                                );
+                                                                            }
+                                                                            if (msg.role === 'user') {
+                                                                                return (
+                                                                                    <div key={mi} style={{
+                                                                                        padding: '6px 10px', borderRadius: '6px',
+                                                                                        background: 'var(--bg-secondary)',
+                                                                                        borderLeft: '2px solid var(--border-subtle)',
+                                                                                        fontSize: '11px', color: 'var(--text-secondary)',
+                                                                                        whiteSpace: 'pre-wrap', maxHeight: '100px', overflow: 'auto',
+                                                                                    }}>
+                                                                                        {(msg.content || '').substring(0, 300)}
+                                                                                    </div>
+                                                                                );
+                                                                            }
+                                                                            return null;
+                                                                        })}
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                );
+                                            })}
+                                        </div>
+                                        {/* Pagination controls */}
+                                        {totalPages > 1 && (
+                                            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', marginTop: '12px', paddingTop: '8px', borderTop: '1px solid var(--border-subtle)' }}>
+                                                <button
+                                                    onClick={() => { setReflectionPage(p => Math.max(0, p - 1)); setExpandedReflection(null); }}
+                                                    disabled={reflectionPage === 0}
+                                                    className="btn btn-ghost"
+                                                    style={{ fontSize: '12px', padding: '4px 10px', opacity: reflectionPage === 0 ? 0.3 : 1 }}
+                                                >
+                                                    {i18n.language?.startsWith('zh') ? '上一页' : 'Prev'}
+                                                </button>
+                                                <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', fontVariantNumeric: 'tabular-nums' }}>
+                                                    {reflectionPage + 1} / {totalPages}
+                                                </span>
+                                                <button
+                                                    onClick={() => { setReflectionPage(p => Math.min(totalPages - 1, p + 1)); setExpandedReflection(null); }}
+                                                    disabled={reflectionPage >= totalPages - 1}
+                                                    className="btn btn-ghost"
+                                                    style={{ fontSize: '12px', padding: '4px 10px', opacity: reflectionPage >= totalPages - 1 ? 0.3 : 1 }}
+                                                >
+                                                    {i18n.language?.startsWith('zh') ? '下一页' : 'Next'}
+                                                </button>
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })()}
+                        </div>
+                    );
+                })()}
+
+
+                {/* ── Mind Tab (Soul + Memory + Heartbeat) ── */}
+                {
+                    activeTab === 'mind' && (() => {
+                        const adapter: FileBrowserApi = {
+                            list: (p) => fileApi.list(id!, p),
+                            read: (p) => fileApi.read(id!, p),
+                            write: (p, c) => fileApi.write(id!, p, c),
+                            delete: (p) => fileApi.delete(id!, p),
+                            downloadUrl: (p) => fileApi.downloadUrl(id!, p),
+                        };
+                        return (
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+                                {/* Soul Section */}
+                                <div>
+                                    <h3 style={{ marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        🧬 {t('agent.soul.title')}
+                                    </h3>
+                                    <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                                        {t('agent.mind.soulDesc', 'Core identity, personality, and behavior boundaries.')}
+                                    </p>
+                                    <FileBrowser api={adapter} singleFile="soul.md" title="" features={{ edit: (agent as any)?.access_level !== 'use' }} />
+                                </div>
+
+                                {/* Memory Section */}
+                                <div>
+                                    <h3 style={{ marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        🧠 {t('agent.memory.title')}
+                                    </h3>
+                                    <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                                        {t('agent.mind.memoryDesc', 'Persistent memory accumulated through conversations and experiences.')}
+                                    </p>
+                                    <FileBrowser api={adapter} rootPath="memory" readOnly features={{}} />
+                                </div>
+
+                                {/* Heartbeat Section */}
+                                <div>
+                                    <h3 style={{ marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        💓 {t('agent.mind.heartbeatTitle', 'Heartbeat')}
+                                    </h3>
+                                    <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                                        {t('agent.mind.heartbeatDesc', 'Instructions for periodic awareness checks. The agent reads this file during each heartbeat.')}
+                                    </p>
+                                    <FileBrowser api={adapter} singleFile="HEARTBEAT.md" title="" features={{ edit: (agent as any)?.access_level !== 'use' }} />
+                                </div>
+                            </div>
+                        );
+                    })()
+                }
+
+                {/* ── Tools Tab ── */}
+                {
+                    activeTab === 'tools' && (
+                        <div>
+                            <div style={{ marginBottom: '16px' }}>
+                                <h3 style={{ marginBottom: '4px' }}>{t('agent.toolMgmt.title')}</h3>
+                                <p style={{ fontSize: '13px', color: 'var(--text-tertiary)' }}>{t('agent.toolMgmt.description')}</p>
+                            </div>
+                            <ToolsManager agentId={id!} canManage={canManage} />
+                        </div>
+                    )
+                }
+
+                {/* ── Skills Tab ── */}
+                {
+                    activeTab === 'skills' && (() => {
+                        const adapter: FileBrowserApi = {
+                            list: (p) => fileApi.list(id!, p),
+                            read: (p) => fileApi.read(id!, p),
+                            write: (p, c) => fileApi.write(id!, p, c),
+                            delete: (p) => fileApi.delete(id!, p),
+                            upload: (file, path, onProgress) => fileApi.upload(id!, file, path, onProgress),
+                            previewZip: (file) => fileApi.previewZip(id!, file),
+                            extractZip: (file, targetPath, rootName) => fileApi.extractZip(id!, file, targetPath, rootName),
+                            downloadUrl: (p) => fileApi.downloadUrl(id!, p),
+                        };
+                        const uploadAdapter = createAgentSkillUploadAdapter({
+                            preview: (file, targetFolder) => fileApi.previewSkillFolder(id!, file, targetFolder),
+                            apply: (input) => fileApi.applySkillFolder(id!, input),
+                            refresh: () => queryClient.invalidateQueries({ queryKey: ['files', id, 'skills'] }),
+                        });
+                        const actionConfig: Record<SkillActionId, SkillsActionBarAction | undefined> = {
+                            settings: undefined,
+                            'upload-folder': {
+                                id: 'upload-folder',
+                                label: t('agent.skills.uploadFolderModal.openButton'),
+                                onClick: () => setShowSkillFolderUploadModal(true),
+                            },
+                            'import-url': undefined,
+                            'browse-clawhub': {
+                                id: 'browse-clawhub',
+                                label: t('agent.skills.browseClawhub', 'Browse ClawHub'),
+                                onClick: () => {
+                                    setShowAgentClawhub(true);
+                                    setAgentClawhubQuery('');
+                                    setAgentClawhubResults([]);
+                                },
+                            },
+                            'import-presets': {
+                                id: 'import-presets',
+                                label: t('agent.skills.importPreset', 'Import from Presets'),
+                                variant: 'primary',
+                                onClick: () => setShowImportSkillModal(true),
+                            },
+                        };
+                        const agentActions = getAgentSkillActionIds()
+                            .map((id) => actionConfig[id])
+                            .filter((action): action is SkillsActionBarAction => Boolean(action));
+                        return (
+                            <div>
+                                <div style={{ marginBottom: '16px' }}>
+                                    <SkillsActionBar
+                                        title={t('agent.skills.title')}
+                                        description={t('agent.skills.description')}
+                                        actions={agentActions}
+                                    />
+                                    <div style={{ marginTop: '8px', padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: '8px', fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
+                                        <strong>Skill Format:</strong><br />
+                                        • <code>skills/my-skill/SKILL.md</code> — {t('agent.skills.folderFormat', 'Each skill is a folder with a SKILL.md file and optional auxiliary files (scripts/, examples/)')}
+                                    </div>
+                                </div>
+                                <FileBrowser api={adapter} rootPath="skills" features={{ newFile: true, edit: true, delete: true, newFolder: true, upload: true, directoryNavigation: true, zipImport: true }} title={t('agent.skills.skillFiles')} />
+
+                                {/* Browse ClawHub Modal */}
+                                {showAgentClawhub && (
+                                    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setShowAgentClawhub(false)}>
+                                        <div onClick={e => e.stopPropagation()} style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', maxWidth: '600px', width: '90%', maxHeight: '70vh', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}>
+                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                                                <h3>Browse ClawHub</h3>
+                                                <button onClick={() => setShowAgentClawhub(false)} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)', padding: '4px 8px' }}>x</button>
+                                            </div>
+                                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', margin: '0 0 12px' }}>
+                                                Search and install skills from ClawHub directly into this agent's workspace.
+                                            </p>
+                                            <div style={{ display: 'flex', gap: '8px', marginBottom: '16px' }}>
+                                                <input
+                                                    className="input"
+                                                    placeholder="Search skills..."
+                                                    value={agentClawhubQuery}
+                                                    onChange={e => setAgentClawhubQuery(e.target.value)}
+                                                    onKeyDown={e => {
+                                                        if (e.key === 'Enter' && agentClawhubQuery.trim()) {
+                                                            setAgentClawhubSearching(true);
+                                                            skillApi.clawhub.search(agentClawhubQuery).then(r => { setAgentClawhubResults(r); setAgentClawhubSearching(false); }).catch(() => setAgentClawhubSearching(false));
+                                                        }
+                                                    }}
+                                                    style={{ flex: 1, fontSize: '13px' }}
+                                                />
+                                                <button
+                                                    className="btn btn-primary"
+                                                    style={{ fontSize: '13px' }}
+                                                    disabled={!agentClawhubQuery.trim() || agentClawhubSearching}
+                                                    onClick={() => {
+                                                        setAgentClawhubSearching(true);
+                                                        skillApi.clawhub.search(agentClawhubQuery).then(r => { setAgentClawhubResults(r); setAgentClawhubSearching(false); }).catch(() => setAgentClawhubSearching(false));
+                                                    }}
+                                                >
+                                                    {agentClawhubSearching ? 'Searching...' : 'Search'}
+                                                </button>
+                                            </div>
+                                            <div style={{ flex: 1, overflowY: 'auto' }}>
+                                                {agentClawhubResults.length === 0 && !agentClawhubSearching && (
+                                                    <div style={{ textAlign: 'center', padding: '24px', color: 'var(--text-tertiary)', fontSize: '13px' }}>Search ClawHub to find skills</div>
+                                                )}
+                                                {agentClawhubResults.map((r: any) => (
+                                                    <div key={r.slug} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 12px', borderRadius: '8px', marginBottom: '6px', border: '1px solid var(--border-subtle)', background: 'var(--bg-secondary)' }}>
+                                                        <div style={{ flex: 1 }}>
+                                                            <div style={{ fontWeight: 600, fontSize: '13px' }}>{r.displayName || r.slug}</div>
+                                                            <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginTop: '2px' }}>{r.summary?.substring(0, 100)}</div>
+                                                        </div>
+                                                        <button
+                                                            className="btn btn-secondary"
+                                                            style={{ fontSize: '12px', padding: '5px 12px', marginLeft: '12px' }}
+                                                            disabled={agentClawhubInstalling === r.slug}
+                                                            onClick={async () => {
+                                                                setAgentClawhubInstalling(r.slug);
+                                                                try {
+                                                                    const res = await skillApi.agentImport.fromClawhub(id!, r.slug);
+                                                                    alert(`Installed "${r.displayName || r.slug}" (${res.files_written} files)`);
+                                                                    queryClient.invalidateQueries({ queryKey: ['files', id, 'skills'] });
+                                                                } catch (err: any) {
+                                                                    alert(`Import failed: ${err?.message || err}`);
+                                                                } finally {
+                                                                    setAgentClawhubInstalling(null);
+                                                                }
+                                                            }}
+                                                        >
+                                                            {agentClawhubInstalling === r.slug ? 'Installing...' : 'Install'}
+                                                        </button>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Import from Presets Modal */}
+                                {showImportSkillModal && (
+                                    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setShowImportSkillModal(false)}>
+                                        <div onClick={e => e.stopPropagation()} style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', maxWidth: '600px', width: '90%', maxHeight: '70vh', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}>
+                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                                                <h3>📦 {t('agent.skills.importPreset', 'Import from Presets')}</h3>
+                                                <button onClick={() => setShowImportSkillModal(false)} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)', padding: '4px 8px' }}>✕</button>
+                                            </div>
+                                            <p style={{ fontSize: '13px', color: 'var(--text-secondary)', margin: '0 0 16px' }}>
+                                                {t('agent.skills.importDesc', 'Select a preset skill to import into this agent. All skill files will be copied to the agent\'s skills folder.')}
+                                            </p>
+                                            <div style={{ flex: 1, overflowY: 'auto' }}>
+                                                {!globalSkillsForImport ? (
+                                                    <div style={{ textAlign: 'center', padding: '24px', color: 'var(--text-tertiary)' }}>Loading...</div>
+                                                ) : globalSkillsForImport.length === 0 ? (
+                                                    <div style={{ textAlign: 'center', padding: '24px', color: 'var(--text-tertiary)' }}>No preset skills available</div>
+                                                ) : (
+                                                    globalSkillsForImport.map((skill: any) => (
+                                                        <div
+                                                            key={skill.id}
+                                                            style={{
+                                                                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                                                                padding: '12px 14px', borderRadius: '8px', marginBottom: '8px',
+                                                                border: '1px solid var(--border-subtle)', background: 'var(--bg-secondary)',
+                                                                transition: 'border-color 0.15s',
+                                                            }}
+                                                            onMouseEnter={e => (e.currentTarget.style.borderColor = 'var(--accent-primary)')}
+                                                            onMouseLeave={e => (e.currentTarget.style.borderColor = 'var(--border-subtle)')}
+                                                        >
+                                                            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flex: 1 }}>
+                                                                <span style={{ fontSize: '20px' }}>{skill.icon || '📋'}</span>
+                                                                <div>
+                                                                    <div style={{ fontWeight: 600, fontSize: '14px' }}>{skill.name}</div>
+                                                                    <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginTop: '2px' }}>
+                                                                        {skill.description?.substring(0, 100)}{skill.description?.length > 100 ? '...' : ''}
+                                                                    </div>
+                                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>
+                                                                        📁 {skill.folder_name}
+                                                                        {skill.is_default && <span style={{ marginLeft: '8px', color: 'var(--accent-primary)', fontWeight: 600 }}>✓ Default</span>}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <button
+                                                                className="btn btn-secondary"
+                                                                style={{ whiteSpace: 'nowrap', fontSize: '12px', padding: '6px 14px' }}
+                                                                disabled={importingSkillId === skill.id}
+                                                                onClick={async () => {
+                                                                    setImportingSkillId(skill.id);
+                                                                    try {
+                                                                        const res = await fileApi.importSkill(id!, skill.id);
+                                                                        alert(`✅ Imported "${skill.name}" (${res.files_written} files)`);
+                                                                        queryClient.invalidateQueries({ queryKey: ['files', id, 'skills'] });
+                                                                        setShowImportSkillModal(false);
+                                                                    } catch (err: any) {
+                                                                        alert(`❌ Import failed: ${err?.message || err}`);
+                                                                    } finally {
+                                                                        setImportingSkillId(null);
+                                                                    }
+                                                                }}
+                                                            >
+                                                                {importingSkillId === skill.id ? '⏳ ...' : '⬇️ Import'}
+                                                            </button>
+                                                        </div>
+                                                    ))
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+
+                                <SkillFolderUploadModal
+                                    open={showSkillFolderUploadModal}
+                                    onClose={() => setShowSkillFolderUploadModal(false)}
+                                    i18nPrefix="agent.skills.uploadFolderModal"
+                                    cancelLabelKey="agent.skills.cancel"
+                                    previewRequest={uploadAdapter.previewRequest}
+                                    applyRequest={uploadAdapter.applyRequest}
+                                    onApplied={uploadAdapter.onApplied}
+                                />
+
+                            </div>
+                        );
+                    })()
+                }
+
+                {/* ── Relationships Tab ── */}
+                {
+                    activeTab === 'relationships' && (
+                        <RelationshipEditor agentId={id!} readOnly={(agent as any)?.access_level === 'use'} />
+                    )
+                }
+
+                {/* ── Workspace Tab ── */}
+                {
+                    activeTab === 'workspace' && (() => {
+                        const adapter: FileBrowserApi = {
+                            list: (p) => fileApi.list(id!, p),
+                            read: (p) => fileApi.read(id!, p),
+                            write: (p, c) => fileApi.write(id!, p, c),
+                            delete: (p) => fileApi.delete(id!, p),
+                            upload: (file, path, onProgress) => fileApi.upload(id!, file, path + '/', onProgress),
+                            downloadUrl: (p) => fileApi.downloadUrl(id!, p),
+                        };
+                        return <FileBrowser api={adapter} rootPath="workspace" features={{ upload: true, newFile: true, newFolder: true, edit: true, delete: true, directoryNavigation: true }} />;
+                    })()
+                }
+
+                {
+                    activeTab === 'chat' && (
+                        <div className="agent-chat-layout" style={{ display: 'flex', gap: '0', flex: 1, minHeight: 0, height: 'calc(100vh - 206px)' }}>
+                            {/* ── Left: session sidebar ── */}
+                            <div className="agent-chat-sidebar" style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+                                {/* Tab row */}
+                                <div style={{ display: 'flex', alignItems: 'center', padding: '10px 12px 0', gap: '4px', borderBottom: '1px solid var(--border-subtle)' }}>
+                                    <button onClick={() => setChatScope('mine')}
+                                        style={{ flex: 1, padding: '5px 0', background: 'none', border: 'none', cursor: 'pointer', fontSize: '12px', fontWeight: chatScope === 'mine' ? 600 : 400, color: chatScope === 'mine' ? 'var(--text-primary)' : 'var(--text-tertiary)', borderBottom: chatScope === 'mine' ? '2px solid var(--accent-primary)' : '2px solid transparent', paddingBottom: '8px' }}>
+                                        {t('agent.chat.mySessions')}
+                                    </button>
+                                    {isAdmin && (
+                                        <button onClick={() => { setChatScope('all'); fetchAllSessions(); }}
+                                            style={{ flex: 1, padding: '5px 0', background: 'none', border: 'none', cursor: 'pointer', fontSize: '12px', fontWeight: chatScope === 'all' ? 600 : 400, color: chatScope === 'all' ? 'var(--text-primary)' : 'var(--text-tertiary)', borderBottom: chatScope === 'all' ? '2px solid var(--accent-primary)' : '2px solid transparent', paddingBottom: '8px' }}>
+                                            {t('agent.chat.allUsers')}
+                                        </button>
+                                    )}
+                                </div>
+
+                                {/* Actions row */}
+                                {chatScope === 'mine' && (
+                                    <div style={{ padding: '8px 12px', borderBottom: '1px solid var(--border-subtle)' }}>
+                                        <button onClick={createNewSession}
+                                            style={{ width: '100%', padding: '5px 8px', background: 'none', border: '1px solid var(--border-subtle)', borderRadius: '6px', cursor: 'pointer', fontSize: '12px', color: 'var(--text-secondary)', textAlign: 'left', display: 'flex', alignItems: 'center', gap: '6px' }}
+                                            onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-secondary)'; e.currentTarget.style.color = 'var(--text-primary)'; }}
+                                            onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.color = 'var(--text-secondary)'; }}>
+                                            + {t('agent.chat.newSession')}
+                                        </button>
+                                    </div>
+                                )}
+
+                                {/* Session list */}
+                                <div style={{ flex: 1, overflowY: 'auto', padding: '4px 0' }}>
+                                    {chatScope === 'mine' ? (
+                                        sessionsLoading ? (
+                                            <div style={{ padding: '20px 12px', fontSize: '12px', color: 'var(--text-tertiary)' }}>{t('common.loading')}</div>
+                                        ) : sessions.length === 0 ? (
+                                            <div style={{ padding: '20px 12px', fontSize: '12px', color: 'var(--text-tertiary)' }}>{t('agent.chat.noSessionsYet')}<br />{t('agent.chat.clickToStart')}</div>
+                                        ) : sessions.map((s: any) => {
+                                            const isActive = activeSession?.id === s.id;
+                                            const isOwn = s.user_id === String(currentUser?.id);
+                                            const channelLabel: Record<string, string> = {
+                                                feishu: t('common.channels.feishu'),
+                                                discord: t('common.channels.discord'),
+                                                slack: t('common.channels.slack'),
+                                                dingtalk: t('common.channels.dingtalk'),
+                                                wecom: t('common.channels.wecom'),
+                                            };
+                                            const chLabel = channelLabel[s.source_channel];
+                                            return (
+                                                <div key={s.id} onClick={() => { if (sessionClickTimerRef.current) clearTimeout(sessionClickTimerRef.current); sessionClickTimerRef.current = setTimeout(() => selectSession(s), 250); }}
+                                                    className="session-item"
+                                                    style={{ padding: '8px 12px', cursor: 'pointer', borderLeft: isActive ? '2px solid var(--accent-primary)' : '2px solid transparent', background: isActive ? 'var(--bg-secondary)' : 'transparent', marginBottom: '1px', position: 'relative' }}
+                                                    onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-secondary)'; const btn = e.currentTarget.querySelector('.del-btn') as HTMLElement; if (btn) btn.style.opacity = '0.5'; }}
+                                                    onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; const btn = e.currentTarget.querySelector('.del-btn') as HTMLElement; if (btn) btn.style.opacity = '0'; }}>
+                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginBottom: '2px' }}>
+                                                        {editingSessionId === s.id ? (
+                                                            <input
+                                                                autoFocus
+                                                                value={editingTitle}
+                                                                onChange={e => setEditingTitle(e.target.value)}
+                                                                onKeyDown={e => {
+                                                                    if (e.key === 'Enter') saveSessionTitle(s.id, editingTitle);
+                                                                    if (e.key === 'Escape') setEditingSessionId(null);
+                                                                }}
+                                                                onBlur={() => saveSessionTitle(s.id, editingTitle)}
+                                                                onClick={e => e.stopPropagation()}
+                                                                style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-primary)', width: '100%', border: '1px solid var(--accent-primary)', borderRadius: '3px', padding: '1px 4px', outline: 'none', background: 'var(--bg-primary)' }}
+                                                            />
+                                                        ) : (
+                                                            <div
+                                                                style={{ fontSize: '12px', fontWeight: isActive ? 600 : 400, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}
+                                                                onDoubleClick={(e) => { e.stopPropagation(); if (sessionClickTimerRef.current) clearTimeout(sessionClickTimerRef.current); setEditingSessionId(s.id); setEditingTitle(s.title); }}
+                                                                onTouchStart={() => { longPressTimerRef.current = setTimeout(() => { setEditingSessionId(s.id); setEditingTitle(s.title); }, 500); }}
+                                                                onTouchEnd={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                                onTouchMove={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                            >
+                                                                {s.title}
+                                                            </div>
+                                                        )}
+                                                        {chLabel && <span style={{ fontSize: '9px', padding: '1px 4px', borderRadius: '3px', background: 'var(--bg-tertiary)', color: 'var(--text-tertiary)', flexShrink: 0 }}>{chLabel}</span>}
+                                                    </div>
+                                                    <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                                        {isOwn && isActive && wsConnected && <span className="status-dot running" style={{ width: '5px', height: '5px', flexShrink: 0 }} />}
+                                                        {s.last_message_at
+                                                            ? new Date(s.last_message_at).toLocaleString(i18n.language === 'zh' ? 'zh-CN' : 'en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
+                                                            : new Date(s.created_at).toLocaleString(i18n.language === 'zh' ? 'zh-CN' : 'en-US', { month: 'short', day: 'numeric' })}
+                                                        {s.message_count > 0 && <span style={{ marginLeft: 'auto' }}>{s.message_count}</span>}
+                                                    </div>
+                                                    <button className="del-btn" onClick={(e) => { e.stopPropagation(); deleteSession(s.id); }}
+                                                        style={{ position: 'absolute', top: '4px', right: '4px', background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', opacity: 0, fontSize: '14px', color: 'var(--text-tertiary)', lineHeight: 1, transition: 'opacity 0.15s' }}
+                                                        onMouseEnter={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.color = 'var(--status-error)'; }}
+                                                        onMouseLeave={e => { e.currentTarget.style.opacity = '0.5'; e.currentTarget.style.color = 'var(--text-tertiary)'; }}
+                                                        title={t('chat.deleteSession', 'Delete session')}>×</button>
+                                                </div>
+                                            );
+                                        })
+                                    ) : (
+                                        /* All Users tab — user filter dropdown + flat list */
+                                        <>
+                                            {/* User filter dropdown */}
+                                            <div style={{ padding: '8px 10px', borderBottom: '1px solid var(--border-subtle)' }}>
+                                                <select
+                                                    value={allUserFilter}
+                                                    onChange={e => setAllUserFilter(e.target.value)}
+                                                    style={{ width: '100%', padding: '4px 6px', fontSize: '11px', background: 'var(--bg-secondary)', border: '1px solid var(--border-subtle)', borderRadius: '5px', color: 'var(--text-primary)', cursor: 'pointer' }}
+                                                >
+                                                    <option value="">All Users</option>
+                                                    {Array.from(new Set(allSessions.map((s: any) => s.username || s.user_id))).filter(Boolean).map((u: any) => (
+                                                        <option key={u} value={u}>{u}</option>
+                                                    ))}
+                                                </select>
+                                            </div>
+                                            {/* Loading skeleton */}
+                                            {allSessionsLoading ? (
+                                                <div style={{ padding: '8px 12px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                                    {[...Array(6)].map((_, i) => (
+                                                        <div key={i} style={{ padding: '6px 0', animation: 'pulse 1.5s ease-in-out infinite', animationDelay: `${i * 0.1}s` }}>
+                                                            <div style={{ height: '12px', width: `${70 + (i % 3) * 10}%`, background: 'var(--bg-tertiary)', borderRadius: '4px', marginBottom: '6px' }} />
+                                                            <div style={{ height: '10px', width: `${40 + (i % 4) * 8}%`, background: 'var(--bg-tertiary)', borderRadius: '3px', opacity: 0.6 }} />
+                                                        </div>
+                                                    ))}
+                                                </div>
+                                            ) : allSessions.length === 0 ? (
+                                                <div style={{ padding: '20px 12px', fontSize: '12px', color: 'var(--text-tertiary)', textAlign: 'center' }}>{t('agent.chat.noSessionsYet')}</div>
+                                            ) : null}
+                                            {/* Filtered session list */}
+                                            {!allSessionsLoading && allSessions
+                                                .filter((s: any) => !allUserFilter || (s.username || s.user_id) === allUserFilter)
+                                                .map((s: any) => {
+                                                    const isActive = activeSession?.id === s.id;
+                                                    return (
+                                                        <div key={s.id} onClick={() => selectSession(s)}
+                                                            className="session-item"
+                                                            style={{ padding: '6px 12px', cursor: 'pointer', borderLeft: isActive ? '2px solid var(--accent-primary)' : '2px solid transparent', background: isActive ? 'var(--bg-secondary)' : 'transparent', position: 'relative' }}
+                                                            onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-secondary)'; const btn = e.currentTarget.querySelector('.del-btn') as HTMLElement; if (btn) btn.style.opacity = '0.5'; }}
+                                                            onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; const btn = e.currentTarget.querySelector('.del-btn') as HTMLElement; if (btn) btn.style.opacity = '0'; }}>
+                                                            <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginBottom: '1px' }}>
+                                                                <div style={{ fontSize: '12px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-primary)', flex: 1 }}>{s.title}</div>
+                                                                {({
+                                                                    feishu: t('common.channels.feishu'),
+                                                                    discord: t('common.channels.discord'),
+                                                                    slack: t('common.channels.slack'),
+                                                                    dingtalk: t('common.channels.dingtalk'),
+                                                                    wecom: t('common.channels.wecom'),
+                                                                } as Record<string, string>)[s.source_channel] && (
+                                                                        <span style={{ fontSize: '9px', padding: '1px 4px', borderRadius: '3px', background: 'var(--bg-tertiary)', color: 'var(--text-tertiary)', flexShrink: 0 }}>
+                                                                            {({
+                                                                                feishu: t('common.channels.feishu'),
+                                                                                discord: t('common.channels.discord'),
+                                                                                slack: t('common.channels.slack'),
+                                                                                dingtalk: t('common.channels.dingtalk'),
+                                                                                wecom: t('common.channels.wecom'),
+                                                                            } as Record<string, string>)[s.source_channel]}
+                                                                        </span>
+                                                                    )}
+                                                            </div>
+                                                            <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', display: 'flex', gap: '4px' }}>
+                                                                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{s.username || ''}</span>
+                                                                <span style={{ flexShrink: 0 }}>{s.last_message_at ? new Date(s.last_message_at).toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : ''}{s.message_count > 0 ? ` · ${s.message_count}` : ''}</span>
+                                                            </div>
+                                                            <button className="del-btn" onClick={(e) => { e.stopPropagation(); deleteSession(s.id); }}
+                                                                style={{ position: 'absolute', top: '4px', right: '4px', background: 'none', border: 'none', cursor: 'pointer', padding: '2px 4px', opacity: 0, fontSize: '14px', color: 'var(--text-tertiary)', lineHeight: 1, transition: 'opacity 0.15s' }}
+                                                                onMouseEnter={e => { e.currentTarget.style.opacity = '1'; e.currentTarget.style.color = 'var(--status-error)'; }}
+                                                                onMouseLeave={e => { e.currentTarget.style.opacity = '0.5'; e.currentTarget.style.color = 'var(--text-tertiary)'; }}
+                                                                title={t('chat.deleteSession', 'Delete session')}>×</button>
+                                                        </div>
+                                                    );
+                                                })}
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+
+                            {/* ── Right: chat/message area ── */}
+                            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', minWidth: 0, overflow: 'hidden' }}>
+                                {!activeSession ? (
+                                    <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)', fontSize: '13px', flexDirection: 'column', gap: '8px' }}>
+                                        <div>{t('agent.chat.noSessionSelected')}</div>
+                                        <button className="btn btn-secondary" onClick={createNewSession} style={{ fontSize: '12px' }}>{t('agent.chat.startNewSession')}</button>
+                                    </div>
+                                ) : (activeSession.user_id && currentUser && activeSession.user_id !== String(currentUser.id)) || activeSession.source_channel === 'agent' || activeSession.participant_type === 'agent' ? (
+                                    /* ── Read-only history view (other user's session or agent-to-agent) ── */
+                                    <>
+                                        <div ref={historyContainerRef} onScroll={handleHistoryScroll} style={{ flex: 1, overflowY: 'auto', padding: '12px 16px' }}>
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '12px', padding: '4px 8px', background: 'var(--bg-secondary)', borderRadius: '4px', display: 'inline-block' }}>
+                                                {activeSession.source_channel === 'agent' ? `🤖 Agent Conversation · ${activeSession.username || 'Agents'}` : `Read-only · ${activeSession.username || 'User'}`}
+                                            </div>
+                                            {(() => {
+                                                // For A2A sessions, determine which participant is "this agent" (left side)
+                                                // Use agent.name matching against sender_name from messages
+                                                const isA2A = activeSession.source_channel === 'agent' || activeSession.participant_type === 'agent';
+                                                const thisAgentName = (agent as any)?.name;
+                                                // Find this agent's participant_id from loaded messages
+                                                const thisAgentPid = isA2A && thisAgentName
+                                                    ? historyMsgs.find((m: any) => m.sender_name === thisAgentName)?.participant_id
+                                                    : null;
+                                                return historyMsgs.map((m: any, i: number) => {
+                                                // Determine if this message is from "this agent" (left) or peer (right)
+                                                // Actually, "this agent" should be on the RIGHT (like 'me'), and peer on the LEFT
+                                                const isLeft = isA2A && thisAgentPid
+                                                    ? m.participant_id !== thisAgentPid
+                                                    : m.role === 'assistant';
+                                            if (m.role === 'tool_call') {
+                                                    const tName = m.toolName || (() => { try { return JSON.parse(m.content || '{}').name; } catch { return 'tool'; } })();
+                                                    const tArgs = m.toolArgs || (() => { try { return JSON.parse(m.content || '{}').args; } catch { return {}; } })();
+                                                    const tResult = m.toolResult ?? (() => { try { return JSON.parse(m.content || '{}').result; } catch { return ''; } })();
+                                                    return (
+                                                        <div key={i} style={{ display: 'flex', gap: '8px', marginBottom: '6px', paddingLeft: '36px', minWidth: 0 }}>
+                                                            <details style={{ flex: 1, minWidth: 0, borderRadius: '8px', background: 'var(--accent-subtle)', border: '1px solid var(--accent-subtle)', fontSize: '12px', overflow: 'hidden' }}>
+                                                                <summary style={{ padding: '6px 10px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', userSelect: 'none', listStyle: 'none', overflow: 'hidden' }}>
+                                                                    <span style={{ fontSize: '13px' }}>⚡</span>
+                                                                    <span style={{ fontWeight: 600, color: 'var(--accent-text)' }}>{tName}</span>
+                                                                    {tArgs && typeof tArgs === 'object' && Object.keys(tArgs).length > 0 && <span style={{ color: 'var(--text-tertiary)', fontSize: '11px', fontFamily: 'var(--font-mono)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{`(${Object.entries(tArgs).map(([k, v]) => `${k}: ${typeof v === 'string' ? v.slice(0, 30) : JSON.stringify(v)}`).join(', ')})`}</span>}
+                                                                </summary>
+                                                                {tResult && <div style={{ padding: '4px 10px 8px' }}><div style={{ color: 'var(--text-secondary)', fontSize: '11px', fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: '240px', overflow: 'auto', background: 'rgba(0,0,0,0.15)', borderRadius: '4px', padding: '4px 6px' }}>{tResult}</div></div>}
+                                                            </details>
+                                                        </div>
+                                                    );
+                                                }
+
+                                                {/* Assistant message with no content: show inline thinking or skip */}
+                                                if (m.role === 'assistant' && !m.content?.trim()) {
+                                                    if (m.thinking) {
+                                                        return (
+                                                            <div key={i} style={{ paddingLeft: '36px', marginBottom: '6px' }}>
+                                                                <details style={{
+                                                                    fontSize: '12px',
+                                                                    background: 'rgba(147, 130, 220, 0.08)', borderRadius: '6px',
+                                                                    border: '1px solid rgba(147, 130, 220, 0.15)',
+                                                                }}>
+                                                                    <summary style={{
+                                                                        padding: '6px 10px', cursor: 'pointer',
+                                                                        color: 'rgba(147, 130, 220, 0.9)', fontWeight: 500,
+                                                                        userSelect: 'none', display: 'flex', alignItems: 'center', gap: '4px',
+                                                                    }}>Thinking</summary>
+                                                                    <div style={{
+                                                                        padding: '4px 10px 8px',
+                                                                        fontSize: '12px', lineHeight: '1.6',
+                                                                        color: 'var(--text-secondary)',
+                                                                        whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                                                                        maxHeight: '300px', overflow: 'auto',
+                                                                    }}>{m.thinking}</div>
+                                                                </details>
+                                                            </div>
+                                                        );
+                                                    }
+                                                    return null;
+                                                }
+                                                return (
+                                                    <div key={i} style={{ display: 'flex', flexDirection: isLeft ? 'row' : 'row-reverse', gap: '8px', marginBottom: '8px' }}>
+                                                        <div style={{ width: '28px', height: '28px', borderRadius: '50%', background: isLeft ? 'var(--bg-elevated)' : 'rgba(16,185,129,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', flexShrink: 0, color: 'var(--text-secondary)', fontWeight: 600 }}>{m.sender_name ? m.sender_name[0] : (isLeft ? 'A' : 'U')}</div>
+                                                        <div style={{ maxWidth: '70%', padding: '8px 12px', borderRadius: '12px', background: isLeft ? 'var(--bg-secondary)' : 'rgba(16,185,129,0.1)', fontSize: '13px', lineHeight: '1.5', wordBreak: 'break-word' }}>
+                                                            {m.sender_name && <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginBottom: '2px', fontWeight: 600 }}>🤖 {m.sender_name}</div>}
+                                                            {(() => {
+                                                                const pm = parseChatMsg({ role: m.role as ChatMsg['role'], content: m.content || '' });
+                                                                const fe = pm.fileName?.split('.').pop()?.toLowerCase() ?? '';
+                                                                const fi = fe === 'pdf' ? '📄' : (fe === 'csv' || fe === 'xlsx' || fe === 'xls') ? '📊' : (fe === 'docx' || fe === 'doc') ? '📝' : '📎';
+                                                                return (
+                                                                    <>
+                                                                        {m.thinking && (
+                                                                            <details style={{
+                                                                                marginBottom: '8px', fontSize: '12px',
+                                                                                background: 'rgba(147, 130, 220, 0.08)', borderRadius: '6px',
+                                                                                border: '1px solid rgba(147, 130, 220, 0.15)',
+                                                                            }}>
+                                                                                <summary style={{
+                                                                                    padding: '6px 10px', cursor: 'pointer',
+                                                                                    color: 'rgba(147, 130, 220, 0.9)', fontWeight: 500,
+                                                                                    userSelect: 'none', display: 'flex', alignItems: 'center', gap: '4px',
+                                                                                }}>
+                                                                                    💭 Thinking
+                                                                                </summary>
+                                                                                <div style={{
+                                                                                    padding: '4px 10px 8px',
+                                                                                    fontSize: '12px', lineHeight: '1.6',
+                                                                                    color: 'var(--text-secondary)',
+                                                                                    whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                                                                                    maxHeight: '300px', overflow: 'auto',
+                                                                                }}>
+                                                                                    {m.thinking}
+                                                                                </div>
+                                                                            </details>
+                                                                        )}
+                                                                        {pm.fileName && (
+                                                                            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', background: 'var(--bg-elevated)', borderRadius: '6px', padding: '4px 8px', marginBottom: pm.content ? '4px' : '0', fontSize: '11px', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)' }}>
+                                                                                <span>{fi}</span>
+                                                                                <span style={{ fontWeight: 500, color: 'var(--text-primary)', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pm.fileName}</span>
+                                                                            </div>
+                                                                        )}
+                                                                        {pm.content ? (m.role === 'assistant' ? <MarkdownRenderer content={pm.content} /> : <div style={{ whiteSpace: 'pre-wrap' }}>{pm.content}</div>) : null}
+                                                                    </>
+                                                                );
+                                                            })()}
+                                                            {m.created_at && <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginTop: '4px', opacity: 0.6 }}>{(() => { const d = new Date(m.created_at); const now = new Date(); const diffMs = now.getTime() - d.getTime(); const isToday = d.toDateString() === now.toDateString(); if (isToday) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); if (diffMs < 7 * 86400000) return d.toLocaleDateString([], { weekday: 'short' }) + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); })()}</div>}
+                                                        </div>
+                                                    </div>
+                                                );
+                                            });
+                                            })()}
+                                        </div>
+                                        {showHistoryScrollBtn && (
+                                            <button onClick={scrollHistoryToBottom} style={{ position: 'absolute', bottom: '20px', right: '20px', width: '32px', height: '32px', borderRadius: '50%', background: 'var(--bg-elevated)', border: '1px solid var(--border-default)', color: 'var(--text-secondary)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px', boxShadow: '0 2px 8px rgba(0,0,0,0.3)', zIndex: 10 }} title="Scroll to bottom">↓</button>
+                                        )}
+                                    </>
+                                ) : (
+                                    /* ── Live WebSocket chat (own session) ── */
+                                    <>
+                                        <div ref={chatContainerRef} onScroll={handleChatScroll} style={{ flex: 1, overflowY: 'auto', padding: '12px 16px' }}>
+                                            {chatMessages.length === 0 && (
+                                                <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-tertiary)' }}>
+                                                    {activeSession && editingSessionId === activeSession.id ? (
+                                                        <input
+                                                            autoFocus
+                                                            value={editingTitle}
+                                                            onChange={e => setEditingTitle(e.target.value)}
+                                                            onKeyDown={e => {
+                                                                if (e.key === 'Enter') saveSessionTitle(activeSession.id, editingTitle);
+                                                                if (e.key === 'Escape') setEditingSessionId(null);
+                                                            }}
+                                                            onBlur={() => saveSessionTitle(activeSession.id, editingTitle)}
+                                                            style={{ fontSize: '13px', marginBottom: '4px', border: '1px solid var(--accent-primary)', borderRadius: '3px', padding: '1px 6px', outline: 'none', background: 'var(--bg-primary)', color: 'var(--text-primary)', width: '100%' }}
+                                                        />
+                                                    ) : (
+                                                        <div
+                                                            style={{ fontSize: '13px', marginBottom: '4px', cursor: activeSession ? 'text' : 'default' }}
+                                                            onDoubleClick={() => { if (activeSession) { setEditingSessionId(activeSession.id); setEditingTitle(activeSession.title); } }}
+                                                            onTouchStart={() => { if (activeSession) { longPressTimerRef.current = setTimeout(() => { setEditingSessionId(activeSession.id); setEditingTitle(activeSession.title); }, 500); } }}
+                                                            onTouchEnd={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                            onTouchMove={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                        >
+                                                            {activeSession?.title || t('agent.chat.startChat')}
+                                                        </div>
+                                                    )}
+                                                    <div style={{ fontSize: '12px' }}>{t('agent.chat.startConversation', { name: agent.name })}</div>
+                                                    <div style={{ fontSize: '11px', marginTop: '4px', opacity: 0.7 }}>{t('agent.chat.fileSupport')}</div>
+                                                </div>
+                                            )}
+                                            {chatMessages.map((msg, i) => {
+                                                if (msg.isSkillIndicator) {
+                                                    return (
+                                                        <div key={i} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '6px' }}>
+                                                            <div style={{
+                                                                display: 'inline-block',
+                                                                padding: '4px 12px',
+                                                                borderRadius: '12px',
+                                                                background: 'var(--bg-secondary, #2a2a2a)',
+                                                                color: 'var(--text-secondary, #888)',
+                                                                fontSize: '12px',
+                                                                margin: '4px 0',
+                                                            }}>
+                                                                {msg.content}
+                                                            </div>
+                                                            {msg.hiddenContent && (
+                                                                <button
+                                                                    onClick={() => setDrawerContent({ name: msg.content, content: msg.hiddenContent! })}
+                                                                    style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary, #666)', fontSize: '14px', padding: '2px 4px', borderRadius: '4px' }}
+                                                                    onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary, #fff)')}
+                                                                    onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-tertiary, #666)')}
+                                                                    title="View skill context"
+                                                                >👁</button>
+                                                            )}
+                                                        </div>
+                                                    );
+                                                }
+                                                if (msg.role === 'tool_call') {
+                                                    return (
+                                                        <div key={i} style={{ display: 'flex', gap: '8px', marginBottom: '6px', paddingLeft: '36px', minWidth: 0 }}>
+                                                            <details style={{ flex: 1, minWidth: 0, borderRadius: '8px', background: 'var(--accent-subtle)', border: '1px solid var(--accent-subtle)', fontSize: '12px', overflow: 'hidden' }}>
+                                                                <summary style={{ padding: '6px 10px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', userSelect: 'none', listStyle: 'none', overflow: 'hidden' }}>
+                                                                    <span style={{ fontSize: '13px' }}>{msg.toolStatus === 'running' ? '⏳' : '⚡'}</span>
+                                                                    <span style={{ fontWeight: 600, color: 'var(--accent-text)' }}>{msg.toolName}</span>
+                                                                    {msg.toolArgs && Object.keys(msg.toolArgs).length > 0 && <span style={{ color: 'var(--text-tertiary)', fontSize: '11px', fontFamily: 'var(--font-mono)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{`(${Object.entries(msg.toolArgs).map(([k, v]) => `${k}: ${typeof v === 'string' ? v.slice(0, 30) : JSON.stringify(v)}`).join(', ')})`}</span>}
+                                                                    {msg.toolStatus === 'running' && <span style={{ color: 'var(--text-tertiary)', fontSize: '11px', marginLeft: 'auto' }}>{t('common.loading')}</span>}
+                                                                </summary>
+                                                                {msg.toolResult && <div style={{ padding: '4px 10px 8px' }}><div style={{ color: 'var(--text-secondary)', fontSize: '11px', fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: '240px', overflow: 'auto', background: 'rgba(0,0,0,0.15)', borderRadius: '4px', padding: '4px 6px' }}>{msg.toolResult}</div></div>}
+                                                            </details>
+                                                        </div>
+                                                    );
+                                                }
+                                                {/* Assistant message with no text content: show inline thinking or skip */}
+                                                if (msg.role === 'assistant' && !msg.content?.trim()) {
+                                                    if (msg.thinking) {
+                                                        return (
+                                                            <div key={i} style={{ paddingLeft: '36px', marginBottom: '6px' }}>
+                                                                <details style={{
+                                                                    fontSize: '12px',
+                                                                    background: 'rgba(147, 130, 220, 0.08)', borderRadius: '6px',
+                                                                    border: '1px solid rgba(147, 130, 220, 0.15)',
+                                                                }}>
+                                                                    <summary style={{
+                                                                        padding: '6px 10px', cursor: 'pointer',
+                                                                        color: 'rgba(147, 130, 220, 0.9)', fontWeight: 500,
+                                                                        userSelect: 'none', display: 'flex', alignItems: 'center', gap: '4px',
+                                                                    }}>Thinking</summary>
+                                                                    <div style={{
+                                                                        padding: '4px 10px 8px',
+                                                                        fontSize: '12px', lineHeight: '1.6',
+                                                                        color: 'var(--text-secondary)',
+                                                                        whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                                                                        maxHeight: '300px', overflow: 'auto',
+                                                                    }}>{msg.thinking}</div>
+                                                                </details>
+                                                            </div>
+                                                        );
+                                                    }
+                                                    return null;
+                                                }
+                                                return (
+                                                    <div key={i} className="message-row" style={{ display: 'flex', flexDirection: msg.role === 'assistant' ? 'row' : 'row-reverse', gap: '8px', marginBottom: '8px' }}>
+                                                        <div style={{ width: '28px', height: '28px', borderRadius: '50%', background: msg.role === 'assistant' ? 'var(--bg-elevated)' : 'rgba(16,185,129,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', flexShrink: 0, color: 'var(--text-secondary)', fontWeight: 600 }}>{msg.role === 'user' ? 'U' : 'A'}</div>
+                                                        <div style={{ maxWidth: '70%', padding: '8px 12px', borderRadius: '12px', background: msg.role === 'assistant' ? 'var(--bg-secondary)' : 'rgba(16,185,129,0.1)', fontSize: '13px', lineHeight: '1.5', wordBreak: 'break-word' }}>
+                                                            {msg.fileName && (() => {
+                                                                const fe = msg.fileName!.split('.').pop()?.toLowerCase() ?? '';
+                                                                const isImage = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].includes(fe);
+                                                                if (isImage && msg.imageUrl) {
+                                                                    return (<div style={{ marginBottom: '4px' }}>
+                                                                        <img src={msg.imageUrl} alt={msg.fileName} style={{ maxWidth: '200px', maxHeight: '150px', borderRadius: '8px', border: '1px solid var(--border-subtle)' }} />
+                                                                    </div>);
+                                                                }
+                                                                const fi = fe === 'pdf' ? '📄' : (fe === 'csv' || fe === 'xlsx' || fe === 'xls') ? '📊' : (fe === 'docx' || fe === 'doc') ? '📝' : '📎';
+                                                                return (<div style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', background: 'rgba(0,0,0,0.08)', borderRadius: '6px', padding: '4px 8px', marginBottom: msg.content ? '4px' : '0', fontSize: '11px', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)' }}><span>{fi}</span><span style={{ fontWeight: 500, color: 'var(--text-primary)', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{msg.fileName}</span></div>);
+                                                            })()}
+                                                            {msg.thinking && (
+                                                                <details style={{
+                                                                    marginBottom: '8px', fontSize: '12px',
+                                                                    background: 'rgba(147, 130, 220, 0.08)', borderRadius: '6px',
+                                                                    border: '1px solid rgba(147, 130, 220, 0.15)',
+                                                                }}>
+                                                                    <summary style={{
+                                                                        padding: '6px 10px', cursor: 'pointer',
+                                                                        color: 'rgba(147, 130, 220, 0.9)', fontWeight: 500,
+                                                                        userSelect: 'none', display: 'flex', alignItems: 'center', gap: '4px',
+                                                                    }}>
+                                                                        💭 Thinking
+                                                                    </summary>
+                                                                    <div style={{
+                                                                        padding: '4px 10px 8px',
+                                                                        fontSize: '12px', lineHeight: '1.6',
+                                                                        color: 'var(--text-secondary)',
+                                                                        whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                                                                        maxHeight: '300px', overflow: 'auto',
+                                                                    }}>
+                                                                        {msg.thinking}
+                                                                    </div>
+                                                                </details>
+                                                            )}
+                                                            {msg.role === 'assistant' ? (
+                                                                (msg as any)._streaming && !msg.content ? (
+                                                                    <div className="thinking-indicator">
+                                                                        <div className="thinking-dots">
+                                                                            <span /><span /><span />
+                                                                        </div>
+                                                                        <span style={{ color: 'var(--text-tertiary)', fontSize: '13px' }}>{t('agent.chat.thinking', 'Thinking...')}</span>
+                                                                    </div>
+                                                                ) : <MarkdownRenderer content={msg.content} />
+                                                            ) : chatEditingId === msg.id ? (
+                                                                <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', width: '100%' }}>
+                                                                    <textarea
+                                                                        value={chatEditContent}
+                                                                        onChange={e => setChatEditContent(e.target.value)}
+                                                                        autoFocus
+                                                                        style={{ flex: 1, minHeight: '40px', resize: 'vertical', padding: '8px', borderRadius: '4px', border: '1px solid var(--border-color, #333)', background: 'var(--bg-secondary, #1e1e1e)', color: 'inherit' }}
+                                                                    />
+                                                                    <button onClick={() => {
+                                                                        wsRef.current?.send(JSON.stringify({
+                                                                            type: 'edit',
+                                                                            message_id: msg.id,
+                                                                            content: chatEditContent,
+                                                                        }));
+                                                                        setChatEditingId(null);
+                                                                    }} style={{ padding: '4px 12px', borderRadius: '4px', background: 'var(--primary, #4a9eff)', color: 'white', border: 'none', cursor: 'pointer' }}>Save</button>
+                                                                    <button onClick={() => setChatEditingId(null)} style={{ padding: '4px 12px', borderRadius: '4px', background: 'transparent', border: '1px solid var(--border-color, #333)', cursor: 'pointer', color: 'inherit' }}>Cancel</button>
+                                                                </div>
+                                                            ) : msg.content ? (
+                                                                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '6px' }}>
+                                                                    <div style={{ whiteSpace: 'pre-wrap', flex: 1 }}>{msg.content}</div>
+                                                                    {msg.role === 'user' && !msg.isSkillIndicator && msg.id && (
+                                                                        <button
+                                                                            onClick={() => {
+                                                                                setChatEditingId(msg.id || null);
+                                                                                setChatEditContent(msg.content);
+                                                                            }}
+                                                                            title="Edit"
+                                                                            style={{
+                                                                                opacity: 0,
+                                                                                transition: 'opacity 0.2s',
+                                                                                background: 'none',
+                                                                                border: 'none',
+                                                                                cursor: 'pointer',
+                                                                                padding: '4px',
+                                                                                fontSize: '14px',
+                                                                                flexShrink: 0,
+                                                                            }}
+                                                                            className="edit-btn"
+                                                                        >
+                                                                            ✏️
+                                                                        </button>
+                                                                    )}
+                                                                </div>
+                                                            ) : null}
+                                                            {msg.timestamp && <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginTop: '4px', opacity: 0.6, textAlign: msg.role === 'user' ? 'right' : 'left' }}>{(() => { const d = new Date(msg.timestamp); const now = new Date(); const diffMs = now.getTime() - d.getTime(); const isToday = d.toDateString() === now.toDateString(); if (isToday) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); if (diffMs < 7 * 86400000) return d.toLocaleDateString([], { weekday: 'short' }) + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); return d.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); })()}</div>}
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })}
+                                            {isWaiting && (
+                                                <div style={{ display: 'flex', gap: '8px', marginBottom: '8px', animation: 'fadeIn .2s ease' }}>
+                                                    <div style={{ width: '28px', height: '28px', borderRadius: '50%', background: 'var(--bg-elevated)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', flexShrink: 0, color: 'var(--text-secondary)', fontWeight: 600 }}>A</div>
+                                                    <div style={{ padding: '8px 12px', borderRadius: '12px', background: 'var(--bg-secondary)', fontSize: '13px' }}>
+                                                        <div className="thinking-indicator">
+                                                            <div className="thinking-dots">
+                                                                <span /><span /><span />
+                                                            </div>
+                                                            <span style={{ color: 'var(--text-tertiary)', fontSize: '13px' }}>{t('agent.chat.thinking', 'Thinking...')}</span>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            )}
+                                            <div ref={chatEndRef} />
+                                        </div>
+                                        {showScrollBtn && (
+                                            <button onClick={scrollToBottom} style={{ position: 'absolute', bottom: '70px', right: '20px', width: '32px', height: '32px', borderRadius: '50%', background: 'var(--bg-elevated)', border: '1px solid var(--border-default)', color: 'var(--text-secondary)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px', boxShadow: '0 2px 8px rgba(0,0,0,0.3)', zIndex: 10 }} title="Scroll to bottom">↓</button>
+                                        )}
+                                        {agentExpired ? (
+                                            <div style={{ padding: '7px 16px', borderTop: '1px solid rgba(245,158,11,0.3)', background: 'rgba(245,158,11,0.08)', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', color: 'rgb(180,100,0)' }}>
+                                                <span>u23f8</span>
+                                                <span>This Agent has <strong>expired</strong> and is off duty. Contact your admin to extend its service.</span>
+                                            </div>
+                                        ) : !wsConnected && (!activeSession?.user_id || !currentUser || activeSession.user_id === String(currentUser?.id)) ? (
+                                            <div style={{ padding: '3px 16px', display: 'flex', alignItems: 'center', gap: '6px', fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                                <span style={{ display: 'inline-block', width: '5px', height: '5px', borderRadius: '50%', background: 'var(--accent-primary)', opacity: 0.8, animation: 'pulse 1.2s ease-in-out infinite' }} />
+                                                Connecting...
+                                            </div>
+                                        ) : null}
+                                        {attachedFiles.length > 0 && (
+                                            <div style={{ padding: '6px 16px', background: 'var(--bg-elevated)', borderTop: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
+                                                {attachedFiles.map((file, idx) => (
+                                                    <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '11px', background: 'var(--bg-secondary)', padding: '4px 6px', borderRadius: '4px', border: '1px solid var(--border-subtle)', maxWidth: '200px' }}>
+                                                        {file.imageUrl ? (
+                                                            <img src={file.imageUrl} alt={file.name} style={{ width: '20px', height: '20px', borderRadius: '4px', objectFit: 'cover' }} />
+                                                        ) : (
+                                                            <span>📎</span>
+                                                        )}
+                                                        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.name}</span>
+                                                        <button onClick={() => setAttachedFiles(prev => prev.filter((_, i) => i !== idx))} style={{ background: 'none', border: 'none', color: 'var(--text-tertiary)', cursor: 'pointer', fontSize: '14px', padding: '0 2px' }} title="Remove file">✕</button>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        )}
+                                        <div style={{ display: 'flex', gap: '8px', padding: '6px 12px', borderTop: '1px solid var(--border-subtle)' }}>
+                                            <input type="file" multiple ref={fileInputRef} onChange={handleChatFile} style={{ display: 'none' }} />
+                                            <button className="btn btn-secondary" onClick={() => fileInputRef.current?.click()} disabled={!wsConnected || uploading || isWaiting || isStreaming || attachedFiles.length >= 10} style={{ padding: '6px 10px', fontSize: '14px', minWidth: 'auto', ...( (!wsConnected || uploading || isWaiting || isStreaming) ? { cursor: 'not-allowed', opacity: 0.4 } : {}) }}>{uploading ? '⏳' : '⦹'}</button>
+                                            {uploading && uploadProgress >= 0 && (
+                                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flex: '0 0 140px' }}>
+                                                    {uploadProgress <= 100 ? (
+                                                        /* Upload phase: show progress bar */
+                                                        <>
+                                                            <div style={{ flex: 1, height: '4px', borderRadius: '2px', background: 'var(--bg-tertiary)', overflow: 'hidden' }}>
+                                                                <div style={{ height: '100%', borderRadius: '2px', background: 'var(--accent-primary)', width: `${uploadProgress}%`, transition: 'width 0.15s ease' }} />
+                                                            </div>
+                                                            <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{uploadProgress}%</span>
+                                                        </>
+                                                    ) : (
+                                                        /* Processing phase (progress = 101): server is parsing the file */
+                                                        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                                                            <span style={{ display: 'inline-block', width: '5px', height: '5px', borderRadius: '50%', background: 'var(--accent-primary)', animation: 'pulse 1.2s ease-in-out infinite' }} />
+                                                            <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>Processing...</span>
+                                                        </div>
+                                                    )}
+                                                    <button onClick={() => { uploadAbortRef.current?.(); }} style={{ background: 'none', border: 'none', color: 'var(--text-tertiary)', cursor: 'pointer', fontSize: '12px', padding: '0 2px', lineHeight: 1 }} title="Cancel upload">✕</button>
+                                                </div>
+                                            )}
+                                            <SkillAutocomplete
+                                                value={chatInput}
+                                                onChange={setChatInput}
+                                                onSubmit={sendChatMsg}
+                                                skillMap={agent?.skill_map || {}}
+                                                placeholder={!wsConnected && (!activeSession?.user_id || !currentUser || activeSession.user_id === String(currentUser?.id)) ? 'Connecting...' : attachedFiles.length > 0 ? t('agent.chat.askAboutFile', { name: attachedFiles.length === 1 ? attachedFiles[0].name : `${attachedFiles.length} files` }) : t('chat.placeholder')}
+                                                className="chat-input"
+                                                disabled={!wsConnected || isWaiting || isStreaming}
+                                                inputRef={chatInputRef}
+                                                onPaste={handlePaste}
+                                            />
+                                            {(isStreaming || isWaiting) ? (
+                                                <button className="btn btn-stop-generation" onClick={() => {
+                                                    if (!id || !activeSession?.id) return;
+                                                    const activeRuntimeKey = buildSessionRuntimeKey(id, String(activeSession.id));
+                                                    const activeSocket = wsMapRef.current[activeRuntimeKey];
+                                                    if (activeSocket?.readyState === WebSocket.OPEN) {
+                                                        activeSocket.send(JSON.stringify({ type: 'abort' }));
+                                                        setIsStreaming(false);
+                                                        setIsWaiting(false);
+                                                        setSessionUiState(activeRuntimeKey, { isWaiting: false, isStreaming: false });
+                                                    }
+                                                }} style={{ padding: '6px 16px' }} title={t('chat.stop', 'Stop')}>
+                                                    <span className="stop-icon" />
+                                                </button>
+                                            ) : (
+                                                <button className="btn btn-primary" onClick={sendChatMsg} disabled={!wsConnected || (!chatInput.trim() && attachedFiles.length === 0)} style={{ padding: '6px 16px' }}>{t('chat.send')}</button>
+                                            )}
+                                        </div>
+                                    </>
+                                )}
+                            </div>
+                        </div>
+                    )
+                }
+
+                {
+                    activeTab === 'activityLog' && (() => {
+                        // Category definitions
+                        const userActionTypes = ['chat_reply', 'tool_call', 'task_created', 'task_updated', 'file_written', 'error'];
+                        const heartbeatTypes = ['heartbeat', 'plaza_post'];
+                        const scheduleTypes = ['schedule_run'];
+                        const messageTypes = ['feishu_msg_sent', 'agent_msg_sent', 'web_msg_sent'];
+
+                        let filteredLogs = activityLogs;
+                        if (logFilter === 'user') {
+                            filteredLogs = activityLogs.filter((l: any) => userActionTypes.includes(l.action_type));
+                        } else if (logFilter === 'backend') {
+                            filteredLogs = activityLogs.filter((l: any) => !userActionTypes.includes(l.action_type));
+                        } else if (logFilter === 'heartbeat') {
+                            filteredLogs = activityLogs.filter((l: any) => heartbeatTypes.includes(l.action_type));
+                        } else if (logFilter === 'schedule') {
+                            filteredLogs = activityLogs.filter((l: any) => scheduleTypes.includes(l.action_type));
+                        } else if (logFilter === 'messages') {
+                            filteredLogs = activityLogs.filter((l: any) => messageTypes.includes(l.action_type));
+                        }
+
+                        const filterBtn = (key: string, label: string, indent = false) => (
+                            <button
+                                key={key}
+                                onClick={() => setLogFilter(key)}
+                                style={{
+                                    padding: indent ? '4px 10px 4px 20px' : '6px 14px',
+                                    fontSize: indent ? '11px' : '12px',
+                                    fontWeight: logFilter === key ? 600 : 400,
+                                    color: logFilter === key ? 'var(--accent-primary)' : 'var(--text-secondary)',
+                                    background: logFilter === key ? 'rgba(99,102,241,0.1)' : 'transparent',
+                                    border: logFilter === key ? '1px solid var(--accent-primary)' : '1px solid var(--border-subtle)',
+                                    borderRadius: '6px',
+                                    cursor: 'pointer',
+                                    transition: 'all 0.15s',
+                                    whiteSpace: 'nowrap' as const,
+                                }}
+                            >
+                                {label}
+                            </button>
+                        );
+
+                        return (
+                            <div>
+                                <h3 style={{ marginBottom: '12px' }}>{t('agent.activityLog.title')}</h3>
+
+                                {/* Filter tabs */}
+                                <div style={{ display: 'flex', gap: '6px', marginBottom: '16px', flexWrap: 'wrap', alignItems: 'center' }}>
+                                    {filterBtn('user', '👤 ' + t('agent.activityLog.userActions', 'User Actions'))}
+                                    {(agent as any)?.agent_type !== 'openclaw' && (<>
+                                    {filterBtn('backend', '⚙️ ' + t('agent.activityLog.backendServices', 'Backend Services'))}
+                                    {(logFilter === 'backend' || logFilter === 'heartbeat' || logFilter === 'schedule' || logFilter === 'messages') && (
+                                        <>
+                                            <span style={{ color: 'var(--text-tertiary)', fontSize: '11px' }}>│</span>
+                                            {filterBtn('heartbeat', '💓 ' + t('agent.mind.heartbeatTitle'))}
+                                            {filterBtn('schedule', '⏰ ' + t('agent.activityLog.scheduleCron'), true)}
+                                            {filterBtn('messages', '📨 ' + t('agent.activityLog.messages'), true)}
+                                        </>
+                                    )}
+                                    </>)}
+                                </div>
+
+                                {filteredLogs.length > 0 ? (
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                                        {filteredLogs.map((log: any) => {
+                                            const icons: Record<string, string> = {
+                                                chat_reply: '💬', tool_call: '⚡', feishu_msg_sent: '📤',
+                                                agent_msg_sent: '🤖', web_msg_sent: '🌐', task_created: '📋',
+                                                task_updated: '✅', file_written: '📝', error: '❌',
+                                                schedule_run: '⏰', heartbeat: '💓', plaza_post: '🏛️',
+                                            };
+                                            const time = log.created_at ? new Date(log.created_at).toLocaleString('zh-CN', {
+                                                month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
+                                            }) : '';
+                                            const isExpanded = expandedLogId === log.id;
+                                            return (
+                                                <div key={log.id}
+                                                    onClick={() => setExpandedLogId(isExpanded ? null : log.id)}
+                                                    style={{
+                                                        padding: '10px 14px', borderRadius: '8px', cursor: 'pointer',
+                                                        background: isExpanded ? 'var(--bg-elevated)' : 'var(--bg-secondary)', fontSize: '13px',
+                                                        border: isExpanded ? '1px solid var(--accent-primary)' : '1px solid transparent',
+                                                        transition: 'all 0.15s ease',
+                                                    }}
+                                                >
+                                                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
+                                                        <span style={{ fontSize: '16px', flexShrink: 0, marginTop: '1px' }}>
+                                                            {icons[log.action_type] || '·'}
+                                                        </span>
+                                                        <div style={{ flex: 1, minWidth: 0 }}>
+                                                            <div style={{ fontWeight: 500, marginBottom: '2px' }}>{log.summary}</div>
+                                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                                                {time} · {log.action_type}
+                                                                {log.detail && !isExpanded && <span style={{ marginLeft: '8px', color: 'var(--accent-primary)' }}>▸ Details</span>}
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    {isExpanded && log.detail && (
+                                                        <div style={{ marginTop: '8px', padding: '10px', borderRadius: '6px', background: 'var(--bg-primary)', fontSize: '12px', fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all', lineHeight: '1.6', color: 'var(--text-secondary)', maxHeight: '300px', overflowY: 'auto' }}>
+                                                            {Object.entries(log.detail).map(([k, v]: [string, any]) => (
+                                                                <div key={k} style={{ marginBottom: '6px' }}>
+                                                                    <span style={{ color: 'var(--accent-primary)', fontWeight: 600 }}>{k}:</span>{' '}
+                                                                    <span>{typeof v === 'object' ? JSON.stringify(v, null, 2) : String(v)}</span>
+                                                                </div>
+                                                            ))}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                ) : (
+                                    <div className="card" style={{ textAlign: 'center', padding: '40px', color: 'var(--text-tertiary)' }}>
+                                        {t('agent.activityLog.noRecords')}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })()
+                }
+
+                {/* ── Feishu Channel Tab ── */}
+
+                {/* ── Approvals Tab ── */}
+                {
+                    activeTab === 'approvals' && (() => {
+                        const ApprovalsTab = () => {
+                            const isChinese = i18n.language?.startsWith('zh');
+                            const { data: approvals = [], refetch: refetchApprovals } = useQuery({
+                                queryKey: ['agent-approvals', id],
+                                queryFn: () => fetchAuth<any[]>(`/agents/${id}/approvals`),
+                                enabled: !!id,
+                                refetchInterval: 15000,
+                            });
+                            const resolveMut = useMutation({
+                                mutationFn: async ({ approvalId, action }: { approvalId: string; action: string }) => {
+                                    const token = localStorage.getItem('token');
+                                    return fetch(`/api/agents/${id}/approvals/${approvalId}/resolve`, {
+                                        method: 'POST',
+                                        headers: { 'Content-Type': 'application/json', ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+                                        body: JSON.stringify({ action }),
+                                    });
+                                },
+                                onSuccess: () => {
+                                    refetchApprovals();
+                                    queryClient.invalidateQueries({ queryKey: ['notifications-unread'] });
+                                },
+                            });
+                            const pending = (approvals as any[]).filter((a: any) => a.status === 'pending');
+                            const resolved = (approvals as any[]).filter((a: any) => a.status !== 'pending');
+                            const statusStyle = (s: string) => ({
+                                padding: '2px 8px', borderRadius: '4px', fontSize: '11px', fontWeight: 600,
+                                background: s === 'approved' ? 'rgba(0,180,120,0.12)' : s === 'rejected' ? 'rgba(255,80,80,0.12)' : 'rgba(255,180,0,0.12)',
+                                color: s === 'approved' ? 'var(--success)' : s === 'rejected' ? 'var(--error)' : 'var(--warning)',
+                            });
+                            return (
+                                <div style={{ padding: '20px 24px' }}>
+                                    {/* Pending */}
+                                    {pending.length > 0 && (
+                                        <>
+                                            <h4 style={{ margin: '0 0 12px', fontSize: '13px', color: 'var(--warning)' }}>
+                                                {isChinese ? `${pending.length} 个待审批` : `${pending.length} Pending`}
+                                            </h4>
+                                            {pending.map((a: any) => (
+                                                <div key={a.id} style={{
+                                                    padding: '14px 16px', marginBottom: '8px', borderRadius: '8px',
+                                                    background: 'var(--bg-secondary)', border: '1px solid var(--border-subtle)',
+                                                }}>
+                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '8px' }}>
+                                                        <span style={statusStyle(a.status)}>{a.status}</span>
+                                                        <span style={{ fontSize: '13px', fontWeight: 500 }}>{a.action_type}</span>
+                                                        <span style={{ flex: 1 }} />
+                                                        <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                                            {a.created_at ? new Date(a.created_at).toLocaleString() : ''}
+                                                        </span>
+                                                    </div>
+                                                    {a.details && (
+                                                        <div style={{ fontSize: '12px', color: 'var(--text-secondary)', marginBottom: '10px', lineHeight: '1.5', maxHeight: '80px', overflow: 'hidden' }}>
+                                                            {typeof a.details === 'string' ? a.details : JSON.stringify(a.details, null, 2)}
+                                                        </div>
+                                                    )}
+                                                    <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                                                        <button
+                                                            className="btn btn-primary"
+                                                            style={{ padding: '6px 16px', fontSize: '12px' }}
+                                                            onClick={() => resolveMut.mutate({ approvalId: a.id, action: 'approve' })}
+                                                            disabled={resolveMut.isPending}
+                                                        >
+                                                            {isChinese ? '批准' : 'Approve'}
+                                                        </button>
+                                                        <button
+                                                            className="btn btn-danger"
+                                                            style={{ padding: '6px 16px', fontSize: '12px' }}
+                                                            onClick={() => resolveMut.mutate({ approvalId: a.id, action: 'reject' })}
+                                                            disabled={resolveMut.isPending}
+                                                        >
+                                                            {isChinese ? '拒绝' : 'Reject'}
+                                                        </button>
+                                                    </div>
+                                                </div>
+                                            ))}
+                                            <div style={{ borderTop: '1px solid var(--border-subtle)', margin: '16px 0' }} />
+                                        </>
+                                    )}
+                                    {/* History */}
+                                    <h4 style={{ margin: '0 0 12px', fontSize: '13px', color: 'var(--text-secondary)' }}>
+                                        {isChinese ? '审批历史' : 'History'}
+                                    </h4>
+                                    {resolved.length === 0 && pending.length === 0 && (
+                                        <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-tertiary)', fontSize: '13px' }}>
+                                            {isChinese ? '暂无审批记录' : 'No approval records'}
+                                        </div>
+                                    )}
+                                    {resolved.map((a: any) => (
+                                        <div key={a.id} style={{
+                                            padding: '12px 16px', marginBottom: '6px', borderRadius: '8px',
+                                            background: 'var(--bg-secondary)', border: '1px solid var(--border-subtle)',
+                                            opacity: 0.7,
+                                        }}>
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                                <span style={statusStyle(a.status)}>{a.status}</span>
+                                                <span style={{ fontSize: '12px' }}>{a.action_type}</span>
+                                                <span style={{ flex: 1 }} />
+                                                <span style={{ fontSize: '10px', color: 'var(--text-tertiary)' }}>
+                                                    {a.resolved_at ? new Date(a.resolved_at).toLocaleString() : ''}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            );
+                        };
+                        return <ApprovalsTab />;
+                    })()}
+
+                {/* ── Settings Tab ── */}
+                {
+                    activeTab === 'settings' && (agent as any)?.agent_type === 'openclaw' && (
+                        <OpenClawSettings agent={agent} agentId={id!} />
+                    )
+                }
+                {
+                    activeTab === 'settings' && (agent as any)?.agent_type !== 'openclaw' && (() => {
+                        // Check if form has unsaved changes
+                        const hasChanges = (
+                            settingsForm.primary_model_id !== (agent?.primary_model_id || '') ||
+                            settingsForm.fallback_model_id !== (agent?.fallback_model_id || '') ||
+                            settingsForm.context_window_size !== (agent?.context_window_size ?? 100) ||
+                            settingsForm.max_tool_rounds !== ((agent as any)?.max_tool_rounds ?? 50) ||
+                            String(settingsForm.max_tokens_per_day) !== String(agent?.max_tokens_per_day || '') ||
+                            String(settingsForm.max_tokens_per_month) !== String(agent?.max_tokens_per_month || '') ||
+                            settingsForm.max_triggers !== ((agent as any)?.max_triggers ?? 20) ||
+                            settingsForm.min_poll_interval_min !== ((agent as any)?.min_poll_interval_min ?? 5) ||
+                            settingsForm.webhook_rate_limit !== ((agent as any)?.webhook_rate_limit ?? 5)
+                        );
+
+                        const handleSaveSettings = async () => {
+                            setSettingsSaving(true);
+                            setSettingsError('');
+                            try {
+                                const result: any = await agentApi.update(id!, {
+                                    primary_model_id: settingsForm.primary_model_id || null,
+                                    fallback_model_id: settingsForm.fallback_model_id || null,
+                                    context_window_size: settingsForm.context_window_size,
+                                    max_tool_rounds: settingsForm.max_tool_rounds,
+                                    max_tokens_per_day: settingsForm.max_tokens_per_day ? Number(settingsForm.max_tokens_per_day) : null,
+                                    max_tokens_per_month: settingsForm.max_tokens_per_month ? Number(settingsForm.max_tokens_per_month) : null,
+                                    max_triggers: settingsForm.max_triggers,
+                                    min_poll_interval_min: settingsForm.min_poll_interval_min,
+                                    webhook_rate_limit: settingsForm.webhook_rate_limit,
+                                } as any);
+                                queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                settingsInitRef.current = false;
+
+                                // Check if any values were clamped by company policy
+                                const clamped = result?._clamped_fields;
+                                if (clamped && clamped.length > 0) {
+                                    const isCh = i18n.language?.startsWith('zh');
+                                    const fieldNames: Record<string, string> = isCh
+                                        ? { min_poll_interval_min: 'Poll 最短间隔', webhook_rate_limit: 'Webhook 频率限制', heartbeat_interval_minutes: '心跳间隔' }
+                                        : { min_poll_interval_min: 'Min Poll Interval', webhook_rate_limit: 'Webhook Rate Limit', heartbeat_interval_minutes: 'Heartbeat Interval' };
+                                    const msgs = clamped.map((c: any) => {
+                                        const name = fieldNames[c.field] || c.field;
+                                        return isCh
+                                            ? `${name}: ${c.requested} -> ${c.applied} (公司策略限制)`
+                                            : `${name}: ${c.requested} -> ${c.applied} (company policy)`;
+                                    });
+                                    setSettingsError((isCh ? 'Some values were adjusted:\n' : 'Some values were adjusted:\n') + msgs.join('\n'));
+                                    setTimeout(() => setSettingsError(''), 5000);
+                                }
+
+                                setSettingsSaved(true);
+                                setTimeout(() => setSettingsSaved(false), 2000);
+                            } catch (e: any) {
+                                setSettingsError(e?.message || 'Failed to save');
+                            } finally {
+                                setSettingsSaving(false);
+                            }
+                        };
+
+                        return (
+                            <div>
+                                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px', position: 'sticky', top: 0, zIndex: 10, background: 'var(--bg-primary)', paddingTop: '4px', paddingBottom: '12px', borderBottom: '1px solid var(--border-subtle)' }}>
+                                    <h3 style={{ margin: 0 }}>{t('agent.settings.title')}</h3>
+                                    <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                                        {settingsSaved && <span style={{ fontSize: '12px', color: 'var(--success)' }}>{t('agent.settings.saved', 'Saved')}</span>}
+                                        {settingsError && <span style={{ fontSize: '12px', color: settingsError.includes('adjusted') ? 'var(--warning)' : 'var(--error)', whiteSpace: 'pre-line' }}>{settingsError}</span>}
+                                        <button
+                                            className="btn btn-primary"
+                                            disabled={!hasChanges || settingsSaving}
+                                            onClick={handleSaveSettings}
+                                            style={{
+                                                opacity: hasChanges ? 1 : 0.5,
+                                                cursor: hasChanges ? 'pointer' : 'default',
+                                                padding: '6px 20px',
+                                                fontSize: '13px',
+                                            }}
+                                        >
+                                            {settingsSaving ? t('agent.settings.saving', 'Saving...') : t('agent.settings.save', 'Save')}
+                                        </button>
+                                    </div>
+                                </div>
+
+                                {/* Model Selection — native agents only */}
+                                {(agent as any)?.agent_type !== 'openclaw' && (
+                                <div className="card" style={{ marginBottom: '12px' }}>
+                                    <h4 style={{ marginBottom: '12px' }}>{t('agent.settings.modelConfig')}</h4>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                                        <div>
+                                            <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>{t('agent.settings.primaryModel')}</label>
+                                            <select
+                                                className="input"
+                                                value={settingsForm.primary_model_id}
+                                                onChange={(e) => setSettingsForm(f => ({ ...f, primary_model_id: e.target.value }))}
+                                            >
+                                                <option value="">--</option>
+                                                {llmModels.map((m: any) => (
+                                                    <option key={m.id} value={m.id}>{m.label} ({m.provider}/{m.model})</option>
+                                                ))}
+                                            </select>
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('agent.settings.primaryModel')}</div>
+                                        </div>
+                                        <div>
+                                            <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>{t('agent.settings.fallbackModel')}</label>
+                                            <select
+                                                className="input"
+                                                value={settingsForm.fallback_model_id}
+                                                onChange={(e) => setSettingsForm(f => ({ ...f, fallback_model_id: e.target.value }))}
+                                            >
+                                                <option value="">--</option>
+                                                {llmModels.map((m: any) => (
+                                                    <option key={m.id} value={m.id}>{m.label} ({m.provider}/{m.model})</option>
+                                                ))}
+                                            </select>
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('agent.settings.fallbackModel')}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                                )}
+
+                                {/* Context Window — native agents only */}
+                                {(agent as any)?.agent_type !== 'openclaw' && (<>
+                                <div className="card" style={{ marginBottom: '12px' }}>
+                                    <h4 style={{ marginBottom: '12px' }}>{t('agent.settings.conversationContext')}</h4>
+                                    <div>
+                                        <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>{t('agent.settings.maxRounds')}</label>
+                                        <input
+                                            className="input"
+                                            type="number"
+                                            min={10}
+                                            max={500}
+                                            value={settingsForm.context_window_size}
+                                            onChange={(e) => setSettingsForm(f => ({ ...f, context_window_size: Math.max(10, Math.min(500, parseInt(e.target.value) || 100)) }))}
+                                            style={{ width: '120px' }}
+                                        />
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('agent.settings.roundsDesc')}</div>
+                                    </div>
+                                </div>
+
+                                {/* Max Tool Call Rounds */}
+                                <div className="card" style={{ marginBottom: '12px' }}>
+                                    <h4 style={{ marginBottom: '12px' }}>🔧 {t('agent.settings.maxToolRounds', 'Max Tool Call Rounds')}</h4>
+                                    <div>
+                                        <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>{t('agent.settings.maxToolRoundsLabel', 'Maximum rounds per message')}</label>
+                                        <input
+                                            className="input"
+                                            type="number"
+                                            min={5}
+                                            max={200}
+                                            value={settingsForm.max_tool_rounds}
+                                            onChange={(e) => setSettingsForm(f => ({ ...f, max_tool_rounds: Math.max(5, Math.min(200, parseInt(e.target.value) || 50)) }))}
+                                            style={{ width: '120px' }}
+                                        />
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('agent.settings.maxToolRoundsDesc', 'How many tool-calling rounds the agent can perform per message (search, write, etc). Default: 50')}</div>
+                                    </div>
+                                </div>
+                                </>)}
+
+                                {/* Token Limits */}
+                                <div className="card" style={{ marginBottom: '12px' }}>
+                                    <h4 style={{ marginBottom: '12px' }}>{t('agent.settings.tokenLimits')}</h4>
+                                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                                        <div>
+                                            <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>{t('agent.settings.dailyLimit')}</label>
+                                            <input
+                                                className="input"
+                                                type="number"
+                                                value={settingsForm.max_tokens_per_day}
+                                                onChange={(e) => setSettingsForm(f => ({ ...f, max_tokens_per_day: e.target.value }))}
+                                                placeholder={t("agent.settings.noLimit")}
+                                            />
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
+                                                {t('agent.settings.today')}: {formatTokens(agent?.tokens_used_today || 0)}
+                                            </div>
+                                        </div>
+                                        <div>
+                                            <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>{t('agent.settings.monthlyLimit')}</label>
+                                            <input
+                                                className="input"
+                                                type="number"
+                                                value={settingsForm.max_tokens_per_month}
+                                                onChange={(e) => setSettingsForm(f => ({ ...f, max_tokens_per_month: e.target.value }))}
+                                                placeholder={t("agent.settings.noLimit")}
+                                            />
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
+                                                {t('agent.settings.month')}: {formatTokens(agent?.tokens_used_month || 0)}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Trigger Limits — native agents only */}
+                                {(agent as any)?.agent_type !== 'openclaw' && (() => {
+                                    const isChinese = i18n.language?.startsWith('zh');
+                                    return (
+                                        <div className="card" style={{ marginBottom: '12px' }}>
+                                            <h4 style={{ marginBottom: '4px' }}>{isChinese ? '触发器限制' : 'Trigger Limits'}</h4>
+                                            <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                                                {isChinese
+                                                    ? '控制该 Agent 可以创建的触发器数量和行为限制'
+                                                    : 'Limit how many triggers this agent can create and their behavior'}
+                                            </p>
+                                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px' }}>
+                                                <div>
+                                                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
+                                                        {isChinese ? '最大触发器数' : 'Max Triggers'}
+                                                    </label>
+                                                    <input
+                                                        className="input"
+                                                        type="number"
+                                                        min={1}
+                                                        max={100}
+                                                        value={settingsForm.max_triggers}
+                                                        onChange={(e) => setSettingsForm(f => ({ ...f, max_triggers: Math.max(1, Math.min(100, parseInt(e.target.value) || 20)) }))}
+                                                        style={{ width: '100%' }}
+                                                    />
+                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
+                                                        {isChinese ? 'Agent 最多可同时拥有的触发器数量' : 'Max active triggers the agent can have'}
+                                                    </div>
+                                                </div>
+                                                <div>
+                                                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
+                                                        {isChinese ? 'Poll 最短间隔 (分钟)' : 'Min Poll Interval (min)'}
+                                                    </label>
+                                                    <input
+                                                        className="input"
+                                                        type="number"
+                                                        min={1}
+                                                        max={60}
+                                                        value={settingsForm.min_poll_interval_min}
+                                                        onChange={(e) => setSettingsForm(f => ({ ...f, min_poll_interval_min: Math.max(1, Math.min(60, parseInt(e.target.value) || 5)) }))}
+                                                        style={{ width: '100%' }}
+                                                    />
+                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
+                                                        {isChinese ? '定时轮询外部接口的最短间隔' : 'Minimum interval for polling external URLs'}
+                                                    </div>
+                                                </div>
+                                                <div>
+                                                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }}>
+                                                        {isChinese ? 'Webhook 频率限制 (次/分钟)' : 'Webhook Rate Limit (/min)'}
+                                                    </label>
+                                                    <input
+                                                        className="input"
+                                                        type="number"
+                                                        min={1}
+                                                        max={60}
+                                                        value={settingsForm.webhook_rate_limit}
+                                                        onChange={(e) => setSettingsForm(f => ({ ...f, webhook_rate_limit: Math.max(1, Math.min(60, parseInt(e.target.value) || 5)) }))}
+                                                        style={{ width: '100%' }}
+                                                    />
+                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
+                                                        {isChinese ? '外部系统每分钟最多可调用的 Webhook 次数' : 'Max webhook calls per minute from external services'}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    );
+                                })()}
+
+                                {/* Welcome Message */}
+                                {(() => {
+                                    const isChinese = i18n.language?.startsWith('zh');
+                                    const saveWm = async () => {
+                                        try {
+                                            await agentApi.update(id!, { welcome_message: wmDraft } as any);
+                                            queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                            setWmSaved(true);
+                                            setTimeout(() => setWmSaved(false), 2000);
+                                        } catch { }
+                                    };
+                                    return (
+                                        <div className="card" style={{ marginBottom: '12px' }}>
+                                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '4px' }}>
+                                                <h4 style={{ margin: 0 }}>{isChinese ? '欢迎语' : 'Welcome Message'}</h4>
+                                                {wmSaved && <span style={{ fontSize: '12px', color: 'var(--success)' }}>✓ {isChinese ? '已保存' : 'Saved'}</span>}
+                                            </div>
+                                            <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                                                {isChinese
+                                                    ? '当用户在网页端发起新对话时，Agent 会自动发送的欢迎语。支持 Markdown 语法。留空则不发送。'
+                                                    : 'Greeting message sent automatically when a user starts a new web conversation. Supports Markdown. Leave empty to disable.'}
+                                            </p>
+                                            <textarea
+                                                className="input"
+                                                rows={4}
+                                                value={wmDraft}
+                                                onChange={e => setWmDraft(e.target.value)}
+                                                onBlur={saveWm}
+                                                placeholder={isChinese ? '例如：你好！我是你的 AI 助手，有什么可以帮你的吗？' : "e.g. Hello! I'm your AI assistant. How can I help you?"}
+                                                style={{
+                                                    width: '100%', minHeight: '80px', resize: 'vertical',
+                                                    fontFamily: 'inherit', fontSize: '13px',
+                                                }}
+                                            />
+                                        </div>
+                                    );
+                                })()}
+
+                                {/* Autonomy Policy — native agents only */}
+                                {(agent as any)?.agent_type !== 'openclaw' && <div className="card" style={{ marginBottom: '12px' }}>
+                                    <h4 style={{ marginBottom: '4px' }}>{t('agent.settings.autonomy.title')}</h4>
+                                    <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '16px' }}>
+                                        {t('agent.settings.autonomy.description')}
+                                    </p>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+                                        {[
+                                            { key: 'read_files', label: t('agent.settings.autonomy.readFiles'), desc: t('agent.settings.autonomy.readFilesDesc') },
+                                            { key: 'write_workspace_files', label: t('agent.settings.autonomy.writeFiles'), desc: t('agent.settings.autonomy.writeFilesDesc') },
+                                            { key: 'delete_files', label: t('agent.settings.autonomy.deleteFiles'), desc: t('agent.settings.autonomy.deleteFilesDesc') },
+                                            { key: 'send_feishu_message', label: t('agent.settings.autonomy.sendFeishu'), desc: t('agent.settings.autonomy.sendFeishuDesc') },
+                                            { key: 'web_search', label: t('agent.settings.autonomy.webSearch'), desc: t('agent.settings.autonomy.webSearchDesc') },
+                                            { key: 'manage_tasks', label: t('agent.settings.autonomy.manageTasks'), desc: t('agent.settings.autonomy.manageTasksDesc') },
+                                        ].map((action) => {
+                                            const currentLevel = (agent?.autonomy_policy as any)?.[action.key] || 'L1';
+                                            return (
+                                                <div key={action.key} style={{
+                                                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                                                    padding: '10px 14px', background: 'var(--bg-elevated)', borderRadius: '8px',
+                                                    border: '1px solid var(--border-subtle)',
+                                                }}>
+                                                    <div style={{ flex: 1 }}>
+                                                        <div style={{ fontWeight: 500, fontSize: '13px' }}>{action.label}</div>
+                                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{action.desc}</div>
+                                                    </div>
+                                                    <select
+                                                        className="input"
+                                                        value={currentLevel}
+                                                        onChange={async (e) => {
+                                                            const newPolicy = { ...(agent?.autonomy_policy as any || {}), [action.key]: e.target.value };
+                                                            await agentApi.update(id!, { autonomy_policy: newPolicy } as any);
+                                                            queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                                        }}
+                                                        style={{
+                                                            width: '140px', fontSize: '12px',
+                                                            color: currentLevel === 'L1' ? 'var(--success)' : currentLevel === 'L2' ? 'var(--warning)' : 'var(--error)',
+                                                            fontWeight: 600,
+                                                        }}
+                                                    >
+                                                        <option value="L1">{t('agent.settings.autonomy.l1Auto')}</option>
+                                                        <option value="L2">{t('agent.settings.autonomy.l2Notify')}</option>
+                                                        <option value="L3">{t('agent.settings.autonomy.l3Approve')}</option>
+                                                    </select>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>}
+
+                                {/* Permission Management */}
+                                {(() => {
+                                    const scopeLabels: Record<string, string> = {
+                                        company: '🏢 ' + t('agent.settings.perm.companyWide', 'Company-wide'),
+                                        user: '👤 ' + t('agent.settings.perm.onlyMe', 'Only Me'),
+                                    };
+
+                                    const handleScopeChange = async (newScope: string) => {
+                                        try {
+                                            await fetchAuth(`/agents/${id}/permissions`, {
+                                                method: 'PUT',
+                                                headers: { 'Content-Type': 'application/json' },
+                                                body: JSON.stringify({ scope_type: newScope, scope_ids: [], access_level: permData?.access_level || 'use' }),
+                                            });
+                                            queryClient.invalidateQueries({ queryKey: ['agent-permissions', id] });
+                                            queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                        } catch (e) {
+                                            console.error('Failed to update permissions', e);
+                                        }
+                                    };
+
+                                    const handleAccessLevelChange = async (newLevel: string) => {
+                                        try {
+                                            await fetchAuth(`/agents/${id}/permissions`, {
+                                                method: 'PUT',
+                                                headers: { 'Content-Type': 'application/json' },
+                                                body: JSON.stringify({ scope_type: permData?.scope_type || 'company', scope_ids: permData?.scope_ids || [], access_level: newLevel }),
+                                            });
+                                            queryClient.invalidateQueries({ queryKey: ['agent-permissions', id] });
+                                            queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                        } catch (e) {
+                                            console.error('Failed to update access level', e);
+                                        }
+                                    };
+
+                                    const isOwner = permData?.is_owner ?? false;
+                                    const currentScope = permData?.scope_type || 'company';
+                                    const currentAccessLevel = permData?.access_level || 'use';
+
+                                    return (
+                                        <div className="card" style={{ marginBottom: '12px' }}>
+                                            <h4 style={{ marginBottom: '12px' }}>🔒 {t('agent.settings.perm.title', 'Access Permissions')}</h4>
+                                            <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '16px' }}>
+                                                {t('agent.settings.perm.description', 'Control who can see and interact with this agent. Only the creator or admin can change this.')}
+                                            </p>
+
+                                            {/* Scope Selection */}
+                                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
+                                                {(['company', 'user'] as const).map((scope) => (
+                                                    <label
+                                                        key={scope}
+                                                        style={{
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: '10px',
+                                                            padding: '12px 14px',
+                                                            borderRadius: '8px',
+                                                            cursor: isOwner ? 'pointer' : 'default',
+                                                            border: currentScope === scope
+                                                                ? '1px solid var(--accent-primary)'
+                                                                : '1px solid var(--border-subtle)',
+                                                            background: currentScope === scope
+                                                                ? 'rgba(99,102,241,0.06)'
+                                                                : 'transparent',
+                                                            opacity: isOwner ? 1 : 0.7,
+                                                            transition: 'all 0.15s',
+                                                        }}
+                                                    >
+                                                        <input
+                                                            type="radio"
+                                                            name="perm_scope"
+                                                            checked={currentScope === scope}
+                                                            disabled={!isOwner}
+                                                            onChange={() => handleScopeChange(scope)}
+                                                            style={{ accentColor: 'var(--accent-primary)' }}
+                                                        />
+                                                        <div>
+                                                            <div style={{ fontWeight: 500, fontSize: '13px' }}>{scopeLabels[scope]}</div>
+                                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>
+                                                                {scope === 'company' && t('agent.settings.perm.companyWideDesc', 'All users in the organization can use this agent')}
+                                                                {scope === 'user' && t('agent.settings.perm.onlyMeDesc', 'Only the creator can use this agent')}
+                                                            </div>
+                                                        </div>
+                                                    </label>
+                                                ))}
+                                            </div>
+
+                                            {/* Access Level for company scope */}
+                                            {currentScope === 'company' && isOwner && (
+                                                <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: '12px' }}>
+                                                    <label style={{ display: 'block', fontSize: '13px', fontWeight: 500, marginBottom: '8px' }}>
+                                                        {t('agent.settings.perm.defaultAccess', 'Default Access Level')}
+                                                    </label>
+                                                    <div style={{ display: 'flex', gap: '8px' }}>
+                                                        {[{ val: 'use', label: '👁️ ' + t('agent.settings.perm.useAccess', 'Use'), desc: t('agent.settings.perm.useAccessDesc', 'Task, Chat, Tools, Skills, Workspace') },
+                                                        { val: 'manage', label: '⚙️ ' + t('agent.settings.perm.manageAccess', 'Manage'), desc: t('agent.settings.perm.manageAccessDesc', 'Full access including Settings, Mind, Relationships') }].map(opt => (
+                                                            <label key={opt.val}
+                                                                style={{
+                                                                    flex: 1,
+                                                                    padding: '10px 12px',
+                                                                    borderRadius: '8px',
+                                                                    cursor: 'pointer',
+                                                                    border: currentAccessLevel === opt.val
+                                                                        ? '1px solid var(--accent-primary)'
+                                                                        : '1px solid var(--border-subtle)',
+                                                                    background: currentAccessLevel === opt.val
+                                                                        ? 'rgba(99,102,241,0.06)'
+                                                                        : 'transparent',
+                                                                    transition: 'all 0.15s',
+                                                                }}
+                                                            >
+                                                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                                                    <input type="radio" name="access_level" checked={currentAccessLevel === opt.val}
+                                                                        onChange={() => handleAccessLevelChange(opt.val)}
+                                                                        style={{ accentColor: 'var(--accent-primary)' }} />
+                                                                    <span style={{ fontWeight: 500, fontSize: '13px' }}>{opt.label}</span>
+                                                                </div>
+                                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px', marginLeft: '20px' }}>{opt.desc}</div>
+                                                            </label>
+                                                        ))}
+                                                    </div>
+                                                </div>
+                                            )}
+
+                                            {currentScope !== 'company' && permData?.scope_names?.length > 0 && (
+                                                <div style={{ marginTop: '12px', fontSize: '12px', color: 'var(--text-secondary)' }}>
+                                                    <span style={{ fontWeight: 500 }}>{t('agent.settings.perm.currentAccess', 'Current access')}:</span>{' '}
+                                                    {permData.scope_names.map((s: any) => s.name).join(', ')}
+                                                </div>
+                                            )}
+
+                                            {!isOwner && (
+                                                <div style={{ marginTop: '12px', fontSize: '11px', color: 'var(--text-tertiary)', fontStyle: 'italic' }}>
+                                                    {t('agent.settings.perm.readOnly', 'Only the creator or admin can change permissions')}
+                                                </div>
+                                            )}
+                                        </div>
+                                    );
+                                })()}
+
+                                {/* Timezone */}
+                                <div className="card" style={{ marginBottom: '12px' }}>
+                                    <h4 style={{ marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        {t('agent.settings.timezone.title', '🌐 Timezone')}
+                                    </h4>
+                                    <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '16px' }}>
+                                        {t('agent.settings.timezone.description', 'The timezone used for this agent\'s scheduling, active hours, and time awareness. Defaults to the company timezone if not set.')}
+                                    </p>
+                                    <div style={{
+                                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                                        padding: '10px 14px', background: 'var(--bg-elevated)', borderRadius: '8px',
+                                        border: '1px solid var(--border-subtle)',
+                                    }}>
+                                        <div>
+                                            <div style={{ fontWeight: 500, fontSize: '13px' }}>{t('agent.settings.timezone.current', 'Agent Timezone')}</div>
+                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                                {agent?.timezone
+                                                    ? t('agent.settings.timezone.override', 'Custom timezone for this agent')
+                                                    : t('agent.settings.timezone.inherited', 'Using company default timezone')}
+                                            </div>
+                                        </div>
+                                        <select
+                                            className="input"
+                                            disabled={!canManage}
+                                            value={agent?.timezone || ''}
+                                            onChange={async (e) => {
+                                                if (!canManage) return;
+                                                const val = e.target.value || null;
+                                                await agentApi.update(id!, { timezone: val } as any);
+                                                queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                            }}
+                                            style={{ width: '200px', fontSize: '12px', opacity: canManage ? 1 : 0.6 }}
+                                        >
+                                            <option value="">{t('agent.settings.timezone.default', '↩ Company default')}</option>
+                                            {['UTC', 'Asia/Shanghai', 'Asia/Tokyo', 'Asia/Seoul', 'Asia/Singapore', 'Asia/Kolkata', 'Asia/Dubai',
+                                                'Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Moscow',
+                                                'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles',
+                                                'America/Sao_Paulo', 'Australia/Sydney', 'Pacific/Auckland'].map(tz => (
+                                                    <option key={tz} value={tz}>{tz}</option>
+                                                ))}
+                                        </select>
+                                    </div>
+                                </div>
+
+                                {/* Heartbeat */}
+                                <div className="card" style={{ marginBottom: '12px' }}>
+                                    <h4 style={{ marginBottom: '4px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                        {t('agent.settings.heartbeat.title', 'Heartbeat')}
+                                    </h4>
+                                    <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '16px' }}>
+                                        {t('agent.settings.heartbeat.description', 'Periodic awareness check — agent proactively monitors the plaza and work environment.')}
+                                    </p>
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
+                                        {/* Enable toggle */}
+                                        <div style={{
+                                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                                            padding: '10px 14px', background: 'var(--bg-elevated)', borderRadius: '8px',
+                                            border: '1px solid var(--border-subtle)',
+                                        }}>
+                                            <div>
+                                                <div style={{ fontWeight: 500, fontSize: '13px' }}>{t('agent.settings.heartbeat.enabled', 'Enable Heartbeat')}</div>
+                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{t('agent.settings.heartbeat.enabledDesc', 'Agent will periodically check plaza and work status')}</div>
+                                            </div>
+                                            <label style={{ position: 'relative', display: 'inline-block', width: '44px', height: '24px', cursor: canManage ? 'pointer' : 'default' }}>
+                                                <input
+                                                    type="checkbox"
+                                                    checked={agent?.heartbeat_enabled ?? true}
+                                                    disabled={!canManage}
+                                                    onChange={async (e) => {
+                                                        if (!canManage) return;
+                                                        await agentApi.update(id!, { heartbeat_enabled: e.target.checked } as any);
+                                                        queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                                    }}
+                                                    style={{ opacity: 0, width: 0, height: 0 }}
+                                                />
+                                                <span style={{
+                                                    position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
+                                                    background: (agent?.heartbeat_enabled ?? true) ? 'var(--accent-primary)' : 'var(--bg-tertiary)',
+                                                    borderRadius: '12px', transition: 'background 0.2s',
+                                                    opacity: canManage ? 1 : 0.6
+                                                }}>
+                                                    <span style={{
+                                                        position: 'absolute', top: '3px',
+                                                        left: (agent?.heartbeat_enabled ?? true) ? '23px' : '3px',
+                                                        width: '18px', height: '18px', background: 'white',
+                                                        borderRadius: '50%', transition: 'left 0.2s',
+                                                    }} />
+                                                </span>
+                                            </label>
+                                        </div>
+
+                                        {/* Interval */}
+                                        <div style={{
+                                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                                            padding: '10px 14px', background: 'var(--bg-elevated)', borderRadius: '8px',
+                                            border: '1px solid var(--border-subtle)',
+                                        }}>
+                                            <div>
+                                                <div style={{ fontWeight: 500, fontSize: '13px' }}>{t('agent.settings.heartbeat.interval', 'Check Interval')}</div>
+                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{t('agent.settings.heartbeat.intervalDesc', 'How often the agent checks for updates')}</div>
+                                            </div>
+                                            <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                                <input
+                                                    type="number"
+                                                    className="input"
+                                                    disabled={!canManage}
+                                                    min={1}
+                                                    defaultValue={agent?.heartbeat_interval_minutes ?? 120}
+                                                    key={agent?.heartbeat_interval_minutes}
+                                                    onBlur={async (e) => {
+                                                        if (!canManage) return;
+                                                        const val = Math.max(1, Number(e.target.value) || 120);
+                                                        e.target.value = String(val);
+                                                        await agentApi.update(id!, { heartbeat_interval_minutes: val } as any);
+                                                        queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                                    }}
+                                                    style={{ width: '80px', fontSize: '12px', opacity: canManage ? 1 : 0.6 }}
+                                                />
+                                                <span style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>{t('common.minutes', 'min')}</span>
+                                            </div>
+                                        </div>
+
+                                        {/* Active Hours */}
+                                        <div style={{
+                                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                                            padding: '10px 14px', background: 'var(--bg-elevated)', borderRadius: '8px',
+                                            border: '1px solid var(--border-subtle)',
+                                        }}>
+                                            <div>
+                                                <div style={{ fontWeight: 500, fontSize: '13px' }}>{t('agent.settings.heartbeat.activeHours', 'Active Hours')}</div>
+                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{t('agent.settings.heartbeat.activeHoursDesc', 'Only trigger heartbeat during these hours (HH:MM-HH:MM)')}</div>
+                                            </div>
+                                            <input
+                                                className="input"
+                                                disabled={!canManage}
+                                                value={agent?.heartbeat_active_hours ?? '09:00-18:00'}
+                                                onChange={async (e) => {
+                                                    if (!canManage) return;
+                                                    await agentApi.update(id!, { heartbeat_active_hours: e.target.value } as any);
+                                                    queryClient.invalidateQueries({ queryKey: ['agent', id] });
+                                                }}
+                                                style={{ width: '140px', fontSize: '12px', textAlign: 'center', opacity: canManage ? 1 : 0.6 }}
+                                                placeholder="09:00-18:00"
+                                            />
+                                        </div>
+
+
+
+                                        {/* Last Heartbeat */}
+                                        {agent?.last_heartbeat_at && (
+                                            <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', paddingLeft: '4px' }}>
+                                                {t('agent.settings.heartbeat.lastRun', 'Last heartbeat')}: {new Date(agent.last_heartbeat_at).toLocaleString()}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Channel Config */}
+                                <div style={{ marginBottom: "12px" }}>
+                                    <ChannelConfig mode="edit" agentId={id!} />
+                                </div>
+
+                                {/* Danger Zone */}
+                                <div className="card" style={{ borderColor: 'var(--error)' }}>
+                                    <h4 style={{ color: 'var(--error)', marginBottom: '12px' }}>{t('agent.settings.danger.title')}</h4>
+                                    <p style={{ fontSize: '13px', color: 'var(--text-secondary)', marginBottom: '12px' }}>
+                                        {t('agent.settings.danger.deleteWarning')}
+                                    </p>
+                                    {
+                                        !showDeleteConfirm ? (
+                                            <button className="btn btn-danger" onClick={() => setShowDeleteConfirm(true)}>× {t('agent.settings.danger.deleteAgent')}</button>
+                                        ) : (
+                                            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                                                <span style={{ fontSize: '13px', color: 'var(--error)', fontWeight: 600 }}>{t('agent.settings.danger.deleteWarning')}</span>
+                                                <button className="btn btn-danger" onClick={async () => {
+                                                    try {
+                                                        await agentApi.delete(id!);
+                                                        queryClient.invalidateQueries({ queryKey: ['agents'] });
+                                                        navigate('/');
+                                                    } catch (err: any) {
+                                                        alert(err?.message || 'Failed to delete agent');
+                                                    }
+                                                }}>{t('agent.settings.danger.confirmDelete')}</button>
+                                                <button className="btn btn-secondary" onClick={() => setShowDeleteConfirm(false)}>{t('common.cancel')}</button>
+                                            </div>
+                                        )
+                                    }
+                                </div >
+                            </div >
+                        )
+                    })()
+                }
+            </div >
+
+            <PromptModal
+                open={!!promptModal}
+                title={promptModal?.title || ''}
+                placeholder={promptModal?.placeholder || ''}
+                onCancel={() => setPromptModal(null)}
+                onConfirm={async (value) => {
+                    const action = promptModal?.action;
+                    setPromptModal(null);
+                    if (action === 'newFolder') {
+                        await fileApi.write(id!, `${workspacePath}/${value}/.gitkeep`, '');
+                        queryClient.invalidateQueries({ queryKey: ['files', id, workspacePath] });
+                    } else if (action === 'newFile') {
+                        await fileApi.write(id!, `${workspacePath}/${value}`, '');
+                        queryClient.invalidateQueries({ queryKey: ['files', id, workspacePath] });
+                        setViewingFile(`${workspacePath}/${value}`);
+                        setFileEditing(true);
+                        setFileDraft('');
+                    } else if (action === 'newSkill') {
+                        const template = `---\nname: ${value}\ndescription: Describe what this skill does\n---\n\n# ${value}\n\n## Overview\nDescribe the purpose and when to use this skill.\n\n## Process\n1. Step one\n2. Step two\n\n## Output Format\nDescribe the expected output format.\n`;
+                        await fileApi.write(id!, `skills/${value}/SKILL.md`, template);
+                        queryClient.invalidateQueries({ queryKey: ['files', id, 'skills'] });
+                        setViewingFile(`skills/${value}/SKILL.md`);
+                        setFileEditing(true);
+                        setFileDraft(template);
+                    }
+                }}
+            />
+
+            <ConfirmModal
+                open={!!deleteConfirm}
+                title={t('common.delete')}
+                message={`${t('common.delete')}: ${deleteConfirm?.name}?`}
+                confirmLabel={t('common.delete')}
+                danger
+                onCancel={() => setDeleteConfirm(null)}
+                onConfirm={async () => {
+                    const path = deleteConfirm?.path;
+                    setDeleteConfirm(null);
+                    if (path) {
+                        try {
+                            await fileApi.delete(id!, path);
+                            setViewingFile(null);
+                            setFileEditing(false);
+                            queryClient.invalidateQueries({ queryKey: ['files', id, workspacePath] });
+                            showToast(t('common.delete'));
+                        } catch (err: any) {
+                            showToast(t('agent.upload.failed'), 'error');
+                        }
+                    }
+                }}
+            />
+
+            {
+                uploadToast && (
+                    <div style={{
+                        position: 'fixed', top: '20px', right: '20px', zIndex: 20000,
+                        padding: '12px 20px', borderRadius: '8px',
+                        background: uploadToast.type === 'success' ? 'rgba(34, 197, 94, 0.9)' : 'rgba(239, 68, 68, 0.9)',
+                        color: '#fff', fontSize: '14px', fontWeight: 500,
+                        boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
+                    }}>
+                        {''}{uploadToast.message}
+                    </div>
+                )
+            }
+
+            {/* ── Expiry Editor Modal (admin only) ── */}
+            {
+                showExpiryModal && (
+                    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)', zIndex: 9000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                        onClick={() => setShowExpiryModal(false)}>
+                        <div style={{ background: 'var(--bg-secondary)', border: '1px solid var(--border-subtle)', borderRadius: '12px', padding: '24px', width: '360px', maxWidth: '90vw' }}
+                            onClick={e => e.stopPropagation()}>
+                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px' }}>
+                                <h3 style={{ margin: 0, fontSize: '15px', fontWeight: 600 }}>⏰ {t('agent.settings.expiry.title')}</h3>
+                                <button onClick={() => setShowExpiryModal(false)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary)', fontSize: '18px', lineHeight: 1 }}>×</button>
+                            </div>
+                            <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '16px' }}>
+                                {(agent as any).is_expired
+                                    ? <span style={{ color: 'var(--error)', fontWeight: 600 }}>⏰ {t('agent.settings.expiry.expired')}</span>
+                                    : (agent as any).expires_at
+                                        ? <>{t('agent.settings.expiry.currentExpiry')} <strong>{new Date((agent as any).expires_at).toLocaleString(i18n.language === 'zh' ? 'zh-CN' : 'en-US')}</strong></>
+                                        : <span style={{ color: 'var(--success)' }}>{t('agent.settings.expiry.neverExpires')}</span>
+                                }
+                            </div>
+                            <div style={{ marginBottom: '16px' }}>
+                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '8px' }}>{t('agent.settings.expiry.quickRenew')}</div>
+                                <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+                                    {([
+                                        ['+ 24h', 24],
+                                        [`+ ${t('agent.settings.expiry.days', { count: 7 })}`, 168],
+                                        [`+ ${t('agent.settings.expiry.days', { count: 30 })}`, 720],
+                                        [`+ ${t('agent.settings.expiry.days', { count: 90 })}`, 2160],
+                                    ] as [string, number][]).map(([label, h]) => (
+                                        <button key={h} onClick={() => addHours(h)}
+                                            style={{ padding: '4px 10px', borderRadius: '6px', border: '1px solid var(--border-subtle)', background: 'var(--bg-primary)', cursor: 'pointer', fontSize: '12px', color: 'var(--text-primary)' }}>
+                                            {label}
+                                        </button>
+                                    ))}
+                                </div>
+                            </div>
+                            <div style={{ marginBottom: '20px' }}>
+                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '6px' }}>{t('agent.settings.expiry.customDeadline')}</div>
+                                <input type="datetime-local" value={expiryValue} onChange={e => setExpiryValue(e.target.value)}
+                                    style={{ width: '100%', padding: '8px 10px', borderRadius: '8px', border: '1px solid var(--border-subtle)', background: 'var(--bg-primary)', color: 'var(--text-primary)', fontSize: '13px', boxSizing: 'border-box' }} />
+                            </div>
+                            <div style={{ display: 'flex', gap: '8px', justifyContent: 'space-between', alignItems: 'center' }}>
+                                <button onClick={() => saveExpiry(true)} disabled={expirySaving}
+                                    style={{ padding: '7px 12px', borderRadius: '8px', border: '1px solid var(--border-subtle)', background: 'none', cursor: 'pointer', fontSize: '12px', color: 'var(--text-secondary)' }}>
+                                    🔓 {t('agent.settings.expiry.neverExpires')}
+                                </button>
+                                <div style={{ display: 'flex', gap: '8px' }}>
+                                    <button onClick={() => setShowExpiryModal(false)} disabled={expirySaving}
+                                        style={{ padding: '7px 14px', borderRadius: '8px', border: '1px solid var(--border-subtle)', background: 'none', cursor: 'pointer', fontSize: '13px', color: 'var(--text-secondary)' }}>
+                                        {t('common.cancel')}
+                                    </button>
+                                    <button onClick={() => saveExpiry(false)} disabled={expirySaving || !expiryValue}
+                                        className="btn btn-primary"
+                                        style={{ opacity: !expiryValue ? 0.5 : 1 }}>
+                                        {expirySaving ? t('agent.settings.expiry.saving') : t('common.save')}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )
+            }
+
+        {/* Skill content drawer */}
+        {drawerContent && (
+            <>
+                <div onClick={() => setDrawerContent(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 1000 }} />
+                <div style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: '40vw', minWidth: '320px', maxWidth: '600px', background: 'var(--bg-primary, #1a1a1a)', boxShadow: '-4px 0 20px rgba(0,0,0,0.15)', zIndex: 1001, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+                    <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-color, #333)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary, #fff)' }}>{drawerContent.name}</div>
+                        <button onClick={() => setDrawerContent(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: 'var(--text-tertiary, #666)', padding: '4px' }}>✕</button>
+                    </div>
+                    <div style={{ flex: 1, overflow: 'auto', padding: '20px' }}>
+                        <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: '12px', lineHeight: '1.6', color: 'var(--text-secondary, #aaa)', fontFamily: 'var(--font-mono, monospace)', margin: 0 }}>{drawerContent.content}</pre>
+                    </div>
+                </div>
+            </>
+        )}
+        </>
+    );
+}
+
+// Error boundary to catch unhandled React errors and prevent white screen
 class AgentDetailErrorBoundary extends Component<{ children: React.ReactNode }, { hasError: boolean; error: Error | null }> {
     constructor(props: { children: React.ReactNode }) {
         super(props);
         this.state = { hasError: false, error: null };
     }
-
     static getDerivedStateFromError(error: Error) {
         return { hasError: true, error };
     }
-
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
         console.error('AgentDetail crash caught by error boundary:', error, errorInfo);
     }
-
     render() {
         if (this.state.hasError) {
             return (
@@ -34,15 +4799,15 @@ class AgentDetailErrorBoundary extends Component<{ children: React.ReactNode },
                 </div>
             );
         }
-
         return this.props.children;
     }
 }
 
+// Wrap the AgentDetail component with error boundary
 export default function AgentDetailWithErrorBoundary() {
     return (
         <AgentDetailErrorBoundary>
-            <AgentDetailPage />
+            <AgentDetailInner />
         </AgentDetailErrorBoundary>
     );
 }
diff --git a/frontend/src/pages/Chat.tsx b/frontend/src/pages/Chat.tsx
index d3ceb0dd8..2c6d32db8 100644
--- a/frontend/src/pages/Chat.tsx
+++ b/frontend/src/pages/Chat.tsx
@@ -1,16 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import MarkdownRenderer from '../components/MarkdownRenderer';
-import AgentBayLivePanel, { LivePreviewState } from '../components/AgentBayLivePanel';
-import ModelSwitcher from '../components/ModelSwitcher';
-import { agentApi, enterpriseApi, tenantApi, uploadFileWithProgress } from '../services/api';
-import { IconPaperclip, IconSend } from '@tabler/icons-react';
-import { formatFileSize } from '../utils/formatFileSize';
+import SkillAutocomplete from '../components/SkillAutocomplete';
+import { agentApi, enterpriseApi } from '../services/api';
 import { useAuthStore } from '../stores';
-import { useDropZone } from '../hooks/useDropZone';
-import { useToast } from '../components/Toast/ToastProvider';
 
 /* ── Inline SVG Icons ── */
 const Icons = {
@@ -34,6 +29,16 @@ const Icons = {
             <path d="M5 5.5h6M5 8h4" />
         </svg>
     ),
+    clip: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M13.5 7l-5.8 5.8a3 3 0 01-4.2-4.2L9.3 2.8a2 2 0 012.8 2.8L6.3 11.4a1 1 0 01-1.4-1.4L10.7 4.2" />
+        </svg>
+    ),
+    loader: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+            <path d="M8 2v3M8 11v3M3.8 3.8l2.1 2.1M10.1 10.1l2.1 2.1M2 8h3M11 8h3M3.8 12.2l2.1-2.1M10.1 5.9l2.1-2.1" />
+        </svg>
+    ),
     tool: (
         <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M10.5 10.5L14 14M4.5 2a2.5 2.5 0 00-1.8 4.2l5.1 5.1A2.5 2.5 0 1012 7.2L6.8 2.2A2.5 2.5 0 004.5 2z" />
@@ -48,6 +53,7 @@ interface ToolCall {
 }
 
 interface Message {
+    id?: string;
     role: 'user' | 'assistant';
     content: string;
     fileName?: string;
@@ -55,248 +61,30 @@ interface Message {
     thinking?: string;
     imageUrl?: string;
     timestamp?: string;
-    _isToolGroup?: boolean;
-}
-
-// CSS keyframe for the pulse/breathing LED — injected once into <head>
-const PULSE_STYLE_ID = 'cw-tool-pulse-style';
-if (typeof document !== 'undefined' && !document.getElementById(PULSE_STYLE_ID)) {
-    const s = document.createElement('style');
-    s.id = PULSE_STYLE_ID;
-    s.textContent = `
-        @keyframes cw-pulse-led {
-            0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(107,114,128,0.45); }
-            50%       { opacity: 0.55; transform: scale(1.5); box-shadow: 0 0 0 4px rgba(107,114,128,0); }
-        }
-        .cw-running-led { animation: cw-pulse-led 1.4s ease-in-out infinite; }
-    `;
-    document.head.appendChild(s);
-}
-
-function ChatToolChain({ toolCalls }: { toolCalls: ToolCall[] }) {
-    const { t } = useTranslation();
-    const [expanded, setExpanded] = useState(false);
-    const count = toolCalls.length;
-
-    // Find the last tool without a result — that is the currently-executing one.
-    const activeIdx = (() => {
-        for (let i = toolCalls.length - 1; i >= 0; i--) {
-            if (!toolCalls[i].result) return i;
-        }
-        return -1; // -1 = all done
-    })();
-    const isRunning = activeIdx >= 0;
-    const activeTool = isRunning ? toolCalls[activeIdx] : null;
-
-    return (
-        <div style={{
-            borderRadius: '8px',
-            background: isRunning ? 'color-mix(in srgb, var(--bg-secondary) 72%, var(--bg-primary))' : 'var(--bg-primary)',
-            border: `1px solid ${isRunning ? 'var(--border-default)' : 'var(--border-subtle)'}`,
-            fontSize: '12px',
-            overflow: 'hidden',
-            marginBottom: '6px',
-            transition: 'border-color 0.3s ease',
-        }}>
-            {/* ── Header / toggle row ── */}
-            <button
-                onClick={() => setExpanded(v => !v)}
-                style={{
-                    background: 'none', border: 'none', cursor: 'pointer',
-                    width: '100%', display: 'flex', alignItems: 'center', gap: '6px',
-                    padding: '7px 10px',
-                    color: 'var(--text-secondary)',
-                }}
-            >
-                {/* Left label: title + running-tool indicator */}
-                <span style={{ flex: 1, textAlign: 'left', display: 'flex', alignItems: 'center', gap: '6px', minWidth: 0 }}>
-                    <span style={{ fontWeight: 500, flexShrink: 0, color: 'var(--text-primary)' }}>{t('agent.chat.toolCallChain')}</span>
-                    <span style={{ color: 'var(--text-tertiary)', flexShrink: 0 }}>·</span>
-                    {isRunning && activeTool ? (
-                        <>
-                            {/* Pulse LED: breathing dot while a tool runs */}
-                            <span
-                                className="cw-running-led"
-                                style={{
-                                    display: 'inline-block',
-                                    width: '6px', height: '6px',
-                                    borderRadius: '50%',
-                                    background: 'var(--text-tertiary)',
-                                    flexShrink: 0,
-                                }}
-                            />
-                            {/* Currently-running tool name */}
-                            <span style={{
-                                fontFamily: 'var(--font-mono)',
-                                fontSize: '11px',
-                                color: 'var(--text-secondary)',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                            }}>
-                                {activeTool.name}
-                            </span>
-                        </>
-                    ) : (
-                        /* Static green dot when all tools are done */
-                        <span style={{
-                            display: 'inline-block',
-                            width: '6px', height: '6px',
-                            borderRadius: '50%',
-                            background: '#22c55e',
-                            flexShrink: 0,
-                            opacity: 0.85,
-                        }} />
-                    )}
-                </span>
-
-                {/* Count badge */}
-                <span style={{
-                    background: 'var(--bg-secondary)', color: 'var(--text-secondary)',
-                    borderRadius: '10px', padding: '1px 7px',
-                    fontSize: '10px', fontWeight: 600, flexShrink: 0,
-                }}>
-                    {count}
-                </span>
-
-                {/* Expand chevron */}
-                <span style={{
-                    fontSize: '10px', color: 'var(--text-tertiary)',
-                    transition: 'transform 0.2s', display: 'inline-block',
-                    transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                    flexShrink: 0,
-                }}>▶</span>
-            </button>
-
-            {/* ── Collapsed: pills with individual run-state dots ── */}
-            {!expanded && count > 0 && (
-                <div style={{ padding: '0 10px 7px 10px', display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
-                    {toolCalls.map((tc, i) => {
-                        const running = !tc.result;
-                        return (
-                            <span key={i} style={{
-                                background: running ? 'var(--bg-secondary)' : 'var(--bg-primary)',
-                                border: '1px solid var(--border-subtle)',
-                                borderRadius: '4px', padding: '1px 6px',
-                                fontSize: '10px', color: 'var(--text-secondary)',
-                                fontFamily: 'var(--font-mono)',
-                                display: 'inline-flex', alignItems: 'center', gap: '4px',
-                            }}>
-                                {running && (
-                                    <span
-                                        className="cw-running-led"
-                                        style={{
-                                            display: 'inline-block',
-                                            width: '4px', height: '4px',
-                                            borderRadius: '50%',
-                                            background: 'var(--text-tertiary)',
-                                            flexShrink: 0,
-                                        }}
-                                    />
-                                )}
-                                {tc.name}
-                            </span>
-                        );
-                    })}
-                </div>
-            )}
-
-            {/* ── Expanded: each tool's full detail row ── */}
-            {expanded && (
-                <div style={{ borderTop: '1px solid var(--border-subtle)' }}>
-                    {toolCalls.map((tc, i) => {
-                        const running = !tc.result;
-                        return (
-                            <div key={i} style={{
-                                padding: '7px 10px',
-                                borderBottom: i < toolCalls.length - 1 ? '1px solid var(--border-subtle)' : 'none',
-                            }}>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginBottom: '4px' }}>
-                                    {/* Status dot: amber + pulse = running; green = done */}
-                                    <span
-                                        className={running ? 'cw-running-led' : undefined}
-                                        style={{
-                                            display: 'inline-block',
-                                            width: '5px', height: '5px',
-                                            borderRadius: '50%',
-                                            background: running ? '#f59e0b' : '#22c55e',
-                                            flexShrink: 0,
-                                        }}
-                                    />
-                                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-secondary)', fontWeight: 600 }}>
-                                        {tc.name}
-                                    </span>
-                                    {running && (
-                                        <span style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginLeft: 'auto' }}>
-                                            {t('common.loading')}
-                                        </span>
-                                    )}
-                                </div>
-                                {tc.args && Object.keys(tc.args).length > 0 && (
-                                    <div style={{
-                                        fontFamily: 'var(--font-mono)', fontSize: '10px',
-                                        color: 'var(--text-tertiary)', whiteSpace: 'pre-wrap',
-                                        wordBreak: 'break-all', maxHeight: '80px', overflowY: 'auto',
-                                        background: 'var(--bg-secondary)', borderRadius: '4px',
-                                        padding: '4px 6px', marginBottom: tc.result ? '4px' : 0,
-                                    }}>
-                                        {JSON.stringify(tc.args, null, 2)}
-                                    </div>
-                                )}
-                                {tc.result && (
-                                    <div style={{
-                                        fontSize: '10px', color: 'var(--text-secondary)',
-                                        whiteSpace: 'pre-wrap', wordBreak: 'break-all',
-                                        maxHeight: '80px', overflowY: 'auto',
-                                        borderTop: '1px solid var(--border-subtle)', paddingTop: '4px',
-                                    }}>
-                                        {tc.result.length > 500 ? tc.result.slice(0, 500) + '…' : tc.result}
-                                    </div>
-                                )}
-                            </div>
-                        );
-                    })}
-                </div>
-            )}
-        </div>
-    );
+    isSkillIndicator?: boolean;
+    hiddenContent?: string | null;
 }
 
 export default function Chat() {
-    const { t, i18n } = useTranslation();
-    const toast = useToast();
+    const { t } = useTranslation();
     const { id } = useParams<{ id: string }>();
     const token = useAuthStore((s) => s.token);
     const [messages, setMessages] = useState<Message[]>([]);
     const [input, setInput] = useState('');
     const [connected, setConnected] = useState(false);
-    const [uploadProgress, setUploadProgress] = useState<{
-        name: string;
-        percent: number;
-        previewUrl?: string;
-        sizeBytes: number;
-    } | null>(null);
+    const [uploading, setUploading] = useState(false);
     const [streaming, setStreaming] = useState(false);
     const [isWaiting, setIsWaiting] = useState(false);
+    const [editingId, setEditingId] = useState<string | null>(null);
+    const [editContent, setEditContent] = useState('');
     const [attachedFile, setAttachedFile] = useState<{ name: string; text: string; path?: string; imageUrl?: string } | null>(null);
-    const [liveState, setLiveState] = useState<LivePreviewState>({});
-    const [livePanelVisible, setLivePanelVisible] = useState(false);
-    const [wsSessionId, setWsSessionId] = useState<string>('');
+    const [drawerContent, setDrawerContent] = useState<{ name: string; content: string } | null>(null);
     const wsRef = useRef<WebSocket | null>(null);
     const messagesEndRef = useRef<HTMLDivElement>(null);
-    const messagesContainerRef = useRef<HTMLDivElement>(null);
-    const isNearBottomRef = useRef(true);
-    const userPinnedAwayFromBottomRef = useRef(false);
     const fileInputRef = useRef<HTMLInputElement>(null);
-    // Ref to the chat textarea for direct DOM height manipulation
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
     const pendingToolCalls = useRef<ToolCall[]>([]);
     const streamContent = useRef('');
     const thinkingContent = useRef('');
-    // Track history load + whether we've already fired the one-shot onboarding
-    // trigger so the agent greets the user at most once per mount.
-    const historyLoaded = useRef(false);
-    const onboardingKickoffSent = useRef(false);
 
     const { data: agent } = useQuery({
         queryKey: ['agent', id],
@@ -304,97 +92,35 @@ export default function Chat() {
         enabled: !!id,
     });
 
-    // Tenant default model — used to render the "默认" tag and as a visual
-    // fallback when an agent has no explicit primary model.
-    const { data: myTenant } = useQuery({
-        queryKey: ['tenant', 'me'],
-        queryFn: () => tenantApi.me(),
-        staleTime: 5 * 60 * 1000,
-        refetchOnMount: 'always',
-    });
-
-    // Chat-side selected model is a per-session override. It is sent with each
-    // message over WebSocket and should not require permission to edit the agent.
-    // Re-sync on session changes so new conversations start from the saved agent
-    // model rather than a stale prior override.
-    const [overrideModelId, setOverrideModelId] = useState<string | null>(null);
-    useEffect(() => {
-        if (agent?.primary_model_id && agent.primary_model_id !== overrideModelId) {
-            setOverrideModelId(agent.primary_model_id);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [agent?.primary_model_id, wsSessionId]);
-
-    const handleModelChange = useCallback(async (newModelId: string | null) => {
-        setOverrideModelId(newModelId);
-    }, []);
-
-    const { data: llmModels = [], isLoading: llmModelsLoading } = useQuery({
+    const { data: llmModels = [] } = useQuery({
         queryKey: ['llm-models'],
         queryFn: () => enterpriseApi.llmModels(),
-        enabled: !!agent,
-        refetchOnMount: 'always',
+        enabled: !!agent?.primary_model_id,
     });
 
-    const enabledLlmModels = (llmModels as any[]).filter((m: any) => m.enabled);
-    const effectiveChatModelId = overrideModelId
-        || agent?.primary_model_id
-        || myTenant?.default_model_id
-        || enabledLlmModels[0]?.id
-        || null;
-    const effectiveModelReady = !!effectiveChatModelId && enabledLlmModels.some((m: any) => m.id === effectiveChatModelId);
-    const supportsVision = !!effectiveChatModelId && llmModels.some(
-        (m: any) => m.id === effectiveChatModelId && m.supports_vision
+    const supportsVision = !!agent?.primary_model_id && llmModels.some(
+        (m: any) => m.id === agent.primary_model_id && m.supports_vision
     );
 
     const parseMessage = (msg: Message): Message => {
         if (msg.role !== 'user') return msg;
-
-        let result = { ...msg };
-
-        // ── Step 1: strip prefix markers to extract fileName ─────────────────
         // Standard web chat format: [file:name.pdf]\ncontent
-        const newFmt = result.content.match(/^\[file:([^\]]+)\]\n?/);
-        if (newFmt) {
-            result = { ...result, fileName: newFmt[1], content: result.content.slice(newFmt[0].length).trim() };
-        } else {
-            // Feishu/Slack channel format: [\u6587\u4ef6\u5df2\u4e0a\u4f20: workspace/uploads/name]
-            const chanFmt = result.content.match(/^\[\u6587\u4ef6\u5df2\u4e0a\u4f20: (?:workspace\/uploads\/)?([^\]\n]+)\]/);
-            if (chanFmt) {
-                const raw = chanFmt[1]; const fileName = raw.split('/').pop() || raw;
-                result = { ...result, fileName, content: result.content.slice(chanFmt[0].length).trim() };
-            } else {
-                // Old format: [File: name.pdf]\nFile location:...\nQuestion: user_msg
-                const oldFmt = result.content.match(/^\[File: ([^\]]+)\]/);
-                if (oldFmt) {
-                    const fileName = oldFmt[1];
-                    const qMatch = result.content.match(/\nQuestion: ([\s\S]+)$/);
-                    result = { ...result, fileName, content: qMatch ? qMatch[1].trim() : '' };
-                }
-            }
+        const newFmt = msg.content.match(/^\[file:([^\]]+)\]\n?/);
+        if (newFmt) return { ...msg, fileName: newFmt[1], content: msg.content.slice(newFmt[0].length).trim() };
+        // Feishu/Slack channel format: [\u6587\u4ef6\u5df2\u4e0a\u4f20: workspace/uploads/name]
+        const chanFmt = msg.content.match(/^\[\u6587\u4ef6\u5df2\u4e0a\u4f20: (?:workspace\/uploads\/)?([^\]\n]+)\]/);
+        if (chanFmt) {
+            const raw = chanFmt[1]; const fileName = raw.split('/').pop() || raw;
+            return { ...msg, fileName, content: msg.content.slice(chanFmt[0].length).trim() };
         }
-
-        // ── Step 2: strip [image_data:...] markers ───────────────────────────
-        // When a history message was saved with an inline base64 image marker
-        // (e.g. [image_data:data:image/jpeg;base64,xxx]), we must:
-        //   a) extract the data URL and use it as imageUrl for the thumbnail
-        //   b) remove the raw marker from the displayed content so base64 is
-        //      never rendered as text (also prevents layout/scroll breakage)
-        const imgDataPattern = /\[image_data:(data:image\/[^;]+;base64,[A-Za-z0-9+/=]+)\]/;
-        const imgMatch = result.content.match(imgDataPattern);
-        if (imgMatch) {
-            result = {
-                ...result,
-                // Prefer existing imageUrl (set by the live upload flow); fall back
-                // to the extracted data URL so the thumbnail shows in history.
-                imageUrl: result.imageUrl || imgMatch[1],
-                content: result.content
-                    .replace(/\[image_data:data:image\/[^;]+;base64,[A-Za-z0-9+/=]+\]\n?/g, '')
-                    .trim(),
-            };
+        // Old format: [File: name.pdf]\nFile location:...\nQuestion: user_msg
+        const oldFmt = msg.content.match(/^\[File: ([^\]]+)\]/);
+        if (oldFmt) {
+            const fileName = oldFmt[1];
+            const qMatch = msg.content.match(/\nQuestion: ([\s\S]+)$/);
+            return { ...msg, fileName, content: qMatch ? qMatch[1].trim() : '' };
         }
-
-        return result;
+        return msg;
     };
 
     // Load chat history on mount
@@ -406,65 +132,32 @@ export default function Chat() {
             .then(r => r.json())
             .then((history: any[]) => {
                 if (history.length > 0) {
-                    // Group consecutive tool_call entries into _isToolGroup messages
-                    const processed: Message[] = [];
+                    const processed: any[] = [];
                     for (const h of history) {
-                        if (h.role === 'tool_call') {
-                            const tc: ToolCall = {
-                                name: h.toolName || h.tool_name || '',
-                                args: h.toolArgs || h.tool_args || {},
-                                result: h.toolResult || h.tool_result || '',
-                            };
-                            const last = processed[processed.length - 1];
-                            if (last && last._isToolGroup) {
-                                // Merge into existing tool group
-                                last.toolCalls = [...(last.toolCalls || []), tc];
-                            } else if (last && last.role === 'assistant' && !(last.content && last.content.trim())) {
-                                // Previous is empty assistant — convert to tool group
-                                last._isToolGroup = true;
-                                last.toolCalls = [...(last.toolCalls || []), tc];
-                            } else {
-                                // Start new tool group
-                                processed.push({
-                                    role: 'assistant', content: '', toolCalls: [tc],
-                                    timestamp: h.created_at || undefined,
-                                    _isToolGroup: true,
-                                });
-                            }
-                        } else {
-                            const msg = parseMessage({ role: h.role, content: h.content, fileName: h.fileName, toolCalls: h.toolCalls, thinking: h.thinking, imageUrl: h.imageUrl });
-                            msg.timestamp = h.created_at || undefined;
-                            processed.push(msg);
+                        if (h.is_hidden) {
+                            // Reconstruct skill indicator from hidden message
+                            const firstLine = (h.content || '').split('\n')[0].replace(/^#\s*/, '').trim();
+                            processed.push({
+                                role: 'assistant' as const,
+                                content: firstLine || 'Skill loaded',
+                                isSkillIndicator: true,
+                                hiddenContent: h.content,
+                                id: h.id,
+                                timestamp: h.created_at || undefined,
+                            });
+                            continue;
                         }
+                        const msg = parseMessage({ role: h.role, content: h.content, fileName: h.fileName, toolCalls: h.toolCalls, thinking: h.thinking, imageUrl: h.imageUrl });
+                        msg.id = h.id;
+                        msg.timestamp = h.created_at || undefined;
+                        processed.push(msg);
                     }
                     setMessages(processed);
                 }
             })
-            .catch(() => { /* ignore */ })
-            .finally(() => { historyLoaded.current = true; });
+            .catch(() => { /* ignore */ });
     }, [id, token]);
 
-    // Per-(user, agent) onboarding kickoff: if this viewer has never been
-    // onboarded to this agent and the conversation is empty, fire a tagged
-    // trigger the backend treats as "agent greets first" — no visible user
-    // bubble, no DB write for the placeholder turn. One-shot per mount.
-    useEffect(() => {
-        if (onboardingKickoffSent.current) return;
-        if (!connected || !wsRef.current) return;
-        if (!agent || agent.onboarded_for_me !== false) return;
-        if (!historyLoaded.current) return;
-        if (llmModelsLoading || !effectiveModelReady || !effectiveChatModelId) return;
-        if (messages.length > 0) return;
-        onboardingKickoffSent.current = true;
-        setIsWaiting(true);
-        setStreaming(true);
-        wsRef.current.send(JSON.stringify({
-            content: '',
-            kind: 'onboarding_trigger',
-            model_id: effectiveChatModelId,
-        }));
-    }, [connected, agent, messages.length, llmModelsLoading, effectiveModelReady, effectiveChatModelId]);
-
     useEffect(() => {
         if (!id || !token) return;
 
@@ -473,8 +166,7 @@ export default function Chat() {
         const connect = () => {
             if (cancelled) return;
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-            const lang = (i18n.language || 'en').toLowerCase().startsWith('zh') ? 'zh' : 'en';
-            const wsUrl = `${protocol}//${window.location.host}/ws/chat/${id}?token=${token}&lang=${lang}`;
+            const wsUrl = `${protocol}//${window.location.host}/ws/chat/${id}?token=${token}`;
             const ws = new WebSocket(wsUrl);
 
             ws.onopen = () => {
@@ -503,34 +195,6 @@ export default function Chat() {
                     setStreaming(false);
                 }
 
-                // Capture session_id from the 'connected' message for Take Control
-                if (data.type === 'connected' && data.session_id) {
-                    setWsSessionId(data.session_id);
-                    return;
-                }
-
-                // ── AgentBay live preview events ──
-                if (data.type === 'agentbay_live') {
-                    console.log('[LivePreview] Received:', data.env, 'url:', data.screenshot_url?.substring(0, 60));
-                    setLiveState(prev => {
-                        const next = { ...prev };
-                        if ((data.env === 'desktop' || data.env === 'browser') && data.screenshot_url) {
-                            // Use URL-based approach: append cache-busting timestamp
-                            const imgUrl = data.screenshot_url + '&_t=' + Date.now();
-                            if (data.env === 'desktop') next.desktop = { screenshotUrl: imgUrl };
-                            else next.browser = { screenshotUrl: imgUrl };
-                        } else if (data.env === 'code' && data.output) {
-                            // Append code output
-                            const existing = prev.code?.output || '';
-                            next.code = { output: existing + (existing ? '\n---\n' : '') + data.output };
-                        }
-                        return next;
-                    });
-                    // Auto-expand the live panel on first data
-                    setLivePanelVisible(true);
-                    return;
-                }
-
                 if (data.type === 'thinking') {
                     // Accumulate thinking content
                     thinkingContent.current += data.content;
@@ -557,86 +221,8 @@ export default function Chat() {
                         return [...prev, { role: 'assistant', content: streamContent.current, timestamp: new Date().toISOString() }];
                     });
                 } else if (data.type === 'tool_call') {
-                    console.log('[ToolCall]', data.name, data.status);
-                    if (data.status === 'running') {
-                        // Tool execution started — show in-progress in tool group
-                        const tc: ToolCall = { name: data.name, args: data.args || {} };
-                        pendingToolCalls.current.push(tc);
-                        const now = new Date().toISOString();
-                        setMessages(prev => {
-                            let msgs = [...prev];
-                            // Remove trailing empty assistant messages (stream placeholders)
-                            while (msgs.length > 0) {
-                                const last = msgs[msgs.length - 1];
-                                if (last.role === 'assistant' && !last._isToolGroup && !(last.content && last.content.trim())) {
-                                    msgs.pop();
-                                } else break;
-                            }
-                            // Merge into existing tool group, but stop at user messages (new turn)
-                            for (let i = msgs.length - 1; i >= Math.max(0, msgs.length - 5); i--) {
-                                if (msgs[i].role === 'user') break;
-                                if (msgs[i]._isToolGroup) {
-                                    msgs[i] = { ...msgs[i], toolCalls: [...(msgs[i].toolCalls || []), tc], timestamp: now };
-                                    return msgs;
-                                }
-                            }
-                            return [...msgs, { role: 'assistant', content: '', toolCalls: [tc], timestamp: now, _isToolGroup: true }];
-                        });
-                    } else if (data.status === 'done') {
-                        // Tool execution finished — update result
-                        streamContent.current = '';
-                        thinkingContent.current = '';
-                        const newCall: ToolCall = { name: data.name, args: data.args, result: data.result || '' };
-                        // Update pending: replace running entry or add new
-                        const idx = pendingToolCalls.current.findIndex(tc => tc.name === data.name && !tc.result);
-                        if (idx >= 0) {
-                            pendingToolCalls.current[idx] = newCall;
-                        } else {
-                            pendingToolCalls.current.push(newCall);
-                        }
-                        const now = new Date().toISOString();
-                        setMessages(prev => {
-                            let msgs = [...prev];
-                            // Remove trailing empty assistant messages
-                            while (msgs.length > 0) {
-                                const last = msgs[msgs.length - 1];
-                                if (last.role === 'assistant' && !last._isToolGroup && !(last.content && last.content.trim())) {
-                                    msgs.pop();
-                                } else break;
-                            }
-                            // Find recent tool group, but stop at user messages (new turn)
-                            for (let i = msgs.length - 1; i >= Math.max(0, msgs.length - 5); i--) {
-                                if (msgs[i].role === 'user') break;
-                                if (msgs[i]._isToolGroup) {
-                                    // Update the matching tool call with result, or add new
-                                    const existing = (msgs[i].toolCalls || []).map(tc =>
-                                        tc.name === data.name && !tc.result ? newCall : tc
-                                    );
-                                    const hasIt = existing.some(tc => tc.name === data.name && tc.result);
-                                    msgs[i] = { ...msgs[i], toolCalls: hasIt ? existing : [...existing, newCall], timestamp: now };
-                                    return msgs;
-                                }
-                            }
-                            return [...msgs, { role: 'assistant', content: '', toolCalls: [newCall], timestamp: now, _isToolGroup: true }];
-                        });
-
-                        // ── AgentBay live preview (embedded in tool_call) ──
-                        if (data.live_preview) {
-                            const lp = data.live_preview;
-                            setLiveState(prev => {
-                                const next = { ...prev };
-                                if ((lp.env === 'desktop' || lp.env === 'browser') && lp.screenshot_url) {
-                                    const imgUrl = lp.screenshot_url + '&_t=' + Date.now();
-                                    if (lp.env === 'desktop') next.desktop = { screenshotUrl: imgUrl };
-                                    else next.browser = { screenshotUrl: imgUrl };
-                                } else if (lp.env === 'code' && lp.output) {
-                                    const existing = prev.code?.output || '';
-                                    next.code = { output: existing + (existing ? '\n---\n' : '') + lp.output };
-                                }
-                                return next;
-                            });
-                            setLivePanelVisible(true);
-                        }
+                    if (data.status === 'done') {
+                        pendingToolCalls.current.push({ name: data.name, args: data.args, result: data.result });
                     }
                 } else if (data.type === 'done') {
                     // Final response — replace streaming message with final + tool calls
@@ -650,12 +236,42 @@ export default function Chat() {
                         const updated = [...prev];
                         // Replace the last streaming assistant message
                         if (updated.length > 0 && updated[updated.length - 1].role === 'assistant') {
-                            updated[updated.length - 1] = { role: 'assistant', content: data.content, toolCalls, thinking };
+                            updated[updated.length - 1] = { id: data.message_id, role: 'assistant', content: data.content, toolCalls, thinking };
                         } else {
-                            updated.push({ role: 'assistant', content: data.content, toolCalls, thinking });
+                            updated.push({ id: data.message_id, role: 'assistant', content: data.content, toolCalls, thinking });
                         }
                         return updated;
                     });
+                } else if (data.type === 'user_saved') {
+                    // Update the last user message with its persisted ID
+                    setMessages(prev => {
+                        const updated = [...prev];
+                        for (let i = updated.length - 1; i >= 0; i--) {
+                            if (updated[i].role === 'user' && !updated[i].id) {
+                                updated[i] = { ...updated[i], id: data.message_id };
+                                break;
+                            }
+                        }
+                        return updated;
+                    });
+                } else if (data.type === 'skill_loaded') {
+                    setMessages(prev => [...prev, {
+                        role: 'assistant' as const,
+                        content: `${data.emoji || ''} ${data.name} loaded`.trim(),
+                        isSkillIndicator: true,
+                        hiddenContent: data.content || null,
+                    }]);
+                } else if (data.type === 'skill_error') {
+                    setMessages(prev => [...prev, {
+                        role: 'assistant' as const,
+                        content: `⚠️ ${data.message}`,
+                        isSkillIndicator: true,
+                    }]);
+                } else if (data.type === 'edit_ack') {
+                    setMessages(prev => {
+                        const idx = prev.findIndex(m => m.id === data.message_id);
+                        return idx >= 0 ? prev.slice(0, idx + 1) : prev;
+                    });
                 } else {
                     // Legacy format: {role, content}
                     setMessages(prev => [...prev, { role: data.role, content: data.content }]);
@@ -674,72 +290,38 @@ export default function Chat() {
         };
     }, [id, token]);
 
-    // Auto-focus input when connection is established
-    useEffect(() => {
-        if (connected) {
-            setTimeout(() => textareaRef.current?.focus(), 50);
-        }
-    }, [connected]);
-
-    const handleMessagesScroll = () => {
-        const el = messagesContainerRef.current;
-        if (!el) return;
-        const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-        isNearBottomRef.current = distFromBottom < 120;
-        userPinnedAwayFromBottomRef.current = distFromBottom > 220;
-    };
-
-    const handleMessagesWheelCapture = (event: React.WheelEvent<HTMLDivElement>) => {
-        const el = messagesContainerRef.current;
-        if (!el) return;
-        if (event.deltaY < 0 && el.scrollTop > 0) {
-            userPinnedAwayFromBottomRef.current = true;
-            isNearBottomRef.current = false;
-        }
-    };
-
     useEffect(() => {
-        if (userPinnedAwayFromBottomRef.current || !isNearBottomRef.current) return;
-        const el = messagesContainerRef.current;
-        if (!el) return;
-        requestAnimationFrame(() => {
-            if (userPinnedAwayFromBottomRef.current) return;
-            el.scrollTop = el.scrollHeight;
-        });
+        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, [messages]);
 
     const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
         if (!file) return;
 
-        const previewUrl = file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined;
-        setUploadProgress({ name: file.name, percent: 0, previewUrl, sizeBytes: file.size });
-
+        setUploading(true);
         try {
-            const { promise } = uploadFileWithProgress(
-                '/chat/upload',
-                file,
-                (pct) => {
-                    setUploadProgress((prev) =>
-                        prev ? { ...prev, percent: pct >= 101 ? 100 : pct } : null,
-                    );
-                },
-                id ? { agent_id: id } : undefined,
-            );
-            const data = await promise;
-            setAttachedFile({
-                name: data.filename,
-                text: data.extracted_text,
-                path: data.workspace_path,
-                imageUrl: data.image_data_url || undefined,
+            const formData = new FormData();
+            formData.append('file', file);
+            if (id) formData.append('agent_id', id);
+
+            const resp = await fetch('/api/chat/upload', {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${token}` },
+                body: formData,
             });
-        } catch (err: any) {
-            if (err?.message !== 'Upload cancelled') {
-                toast.error(t('agent.upload.failed'), { details: String(err?.message || '') });
+
+            if (!resp.ok) {
+                const err = await resp.json();
+                alert(err.detail || t('agent.upload.failed'));
+                return;
             }
+
+            const data = await resp.json();
+            setAttachedFile({ name: data.filename, text: data.extracted_text, path: data.workspace_path, imageUrl: data.image_data_url || undefined });
+        } catch (err) {
+            alert(t('agent.upload.failed') + ': ' + (err as Error).message);
         } finally {
-            if (previewUrl) URL.revokeObjectURL(previewUrl);
-            setUploadProgress(null);
+            setUploading(false);
             if (fileInputRef.current) fileInputRef.current.value = '';
         }
     };
@@ -752,8 +334,6 @@ export default function Chat() {
         pendingToolCalls.current = [];
         streamContent.current = '';
         thinkingContent.current = '';
-        userPinnedAwayFromBottomRef.current = false;
-        isNearBottomRef.current = true;
         setIsWaiting(true);
         setStreaming(true);
 
@@ -794,68 +374,21 @@ export default function Chat() {
             imageUrl: attachedFile?.imageUrl,
             timestamp: new Date().toISOString(),
         }]);
-        wsRef.current.send(JSON.stringify({ content: contentForLLM, display_content: userMsg, file_name: attachedFile?.name || '', model_id: effectiveChatModelId }));
+        wsRef.current.send(JSON.stringify({ content: contentForLLM, display_content: userMsg, file_name: attachedFile?.name || '' }));
         setInput('');
         setAttachedFile(null);
     };
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-        // Enter sends the message; Shift+Enter inserts a newline
-        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && !isWaiting && !streaming) {
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
             e.preventDefault();
             sendMessage();
         }
     };
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setInput(e.target.value);
-    };
-
-    const hasLiveData = !!(liveState.desktop || liveState.browser || liveState.code);
-
-    // ── Drag-and-drop file upload ──
-    const handleDroppedFiles = useCallback(async (files: File[]) => {
-        const file = files[0]; // Chat supports single file
-        if (!file) return;
-
-        const previewUrl = file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined;
-        setUploadProgress({ name: file.name, percent: 0, previewUrl, sizeBytes: file.size });
-
-        try {
-            const { promise } = uploadFileWithProgress(
-                '/chat/upload',
-                file,
-                (pct) => {
-                    setUploadProgress((prev) =>
-                        prev ? { ...prev, percent: pct >= 101 ? 100 : pct } : null,
-                    );
-                },
-                id ? { agent_id: id } : undefined,
-            );
-            const data = await promise;
-            setAttachedFile({
-                name: data.filename,
-                text: data.extracted_text,
-                path: data.workspace_path,
-                imageUrl: data.image_data_url || undefined,
-            });
-        } catch (err: any) {
-            if (err?.message !== 'Upload cancelled') {
-                toast.error(t('agent.upload.failed'), { details: String(err?.message || '') });
-            }
-        } finally {
-            if (previewUrl) URL.revokeObjectURL(previewUrl);
-            setUploadProgress(null);
-        }
-    }, [id, t]);
-
-    const { isDragging: isChatDragging, dropZoneProps: chatDropProps } = useDropZone({
-        onDrop: handleDroppedFiles,
-        disabled: !connected || !!uploadProgress || isWaiting || streaming,
-    });
-
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+        <div>
+            <style>{`.message-row:hover .edit-btn { opacity: 1 !important; }`}</style>
             <div className="page-header">
                 <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                     <div style={{ width: '36px', height: '36px', borderRadius: 'var(--radius-md)', background: 'var(--bg-tertiary)', border: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)' }}>
@@ -871,22 +404,8 @@ export default function Chat() {
                 </div>
             </div>
 
-            <div className={`chat-container ${hasLiveData ? 'chat-with-live-panel' : ''}`} {...chatDropProps} style={{ position: 'relative' }}>
-                {/* Drop overlay */}
-                {isChatDragging && (
-                    <div className="drop-zone-overlay">
-                        <div className="drop-zone-overlay__icon"><IconPaperclip size={28} stroke={1.8} /></div>
-                        <div className="drop-zone-overlay__text">{t('agent.upload.dropToAttach', 'Drop file to attach')}</div>
-                    </div>
-                )}
-                {/* Wrap chat area in a column so it coexists with the live panel in flex-row */}
-                <div className="chat-main">
-                <div
-                    ref={messagesContainerRef}
-                    className="chat-messages"
-                    onScroll={handleMessagesScroll}
-                    onWheelCapture={handleMessagesWheelCapture}
-                >
+            <div className="chat-container">
+                <div className="chat-messages">
                     {messages.length === 0 && (
                         <div style={{ textAlign: 'center', padding: '60px', color: 'var(--text-tertiary)' }}>
                             <div style={{ marginBottom: '12px', display: 'flex', justifyContent: 'center' }}>{Icons.chat}</div>
@@ -894,20 +413,24 @@ export default function Chat() {
                             <div style={{ fontSize: '12px', marginTop: '8px', opacity: 0.7 }}>{t('agent.chat.fileSupport')}</div>
                         </div>
                     )}
-                    {messages.filter(m => {
-                        // Skip empty assistant messages (stream placeholders)
-                        if (m.role === 'assistant' && !m._isToolGroup && !(m.content && m.content.trim()) && !m.toolCalls?.length && !m.thinking) return false;
-                        return true;
-                    }).map((msg, i) => (
-                        msg._isToolGroup ? (
-                            /* Tool call group — compact display without avatar bubble */
-                            <div key={i} style={{ marginLeft: '48px', marginBottom: '8px' }}>
-                                {msg.toolCalls && msg.toolCalls.length > 0 && (
-                                    <ChatToolChain toolCalls={msg.toolCalls} />
+                    {messages.map((msg, i) => (
+                        msg.isSkillIndicator ? (
+                            <div key={i} style={{ textAlign: 'center', color: 'var(--text-tertiary)', fontSize: '12px', padding: '4px 0', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }}>
+                                <span>{msg.content}</span>
+                                {msg.hiddenContent && (
+                                    <button
+                                        onClick={() => setDrawerContent({ name: msg.content, content: msg.hiddenContent! })}
+                                        style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary)', fontSize: '14px', padding: '2px 4px', borderRadius: '4px' }}
+                                        onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary)')}
+                                        onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-tertiary)')}
+                                        title="View skill context"
+                                    >
+                                        👁
+                                    </button>
                                 )}
                             </div>
-                        ) :
-                        <div key={i} className={`chat-message ${msg.role}`}>
+                        ) : (
+                        <div key={i} className={`chat-message ${msg.role} message-row`}>
                             <div className="chat-avatar" style={{ color: 'var(--text-tertiary)' }}>
                                 {msg.role === 'user' ? Icons.user : Icons.bot}
                             </div>
@@ -920,26 +443,75 @@ export default function Chat() {
                                             <img src={msg.imageUrl} alt={msg.fileName} style={{ maxWidth: '240px', maxHeight: '180px', borderRadius: '8px', border: '1px solid var(--border-subtle)' }} />
                                         </div>);
                                     }
-                                    return (<div style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', background: 'rgba(0,0,0,0.08)', borderRadius: '6px', padding: '4px 8px', marginBottom: msg.content ? '4px' : '0', fontSize: '11px', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)' }}><IconPaperclip size={13} stroke={1.8} /><span style={{ fontWeight: 500, color: 'var(--text-primary)', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{msg.fileName}</span></div>);
+                                    const fi = fe === 'pdf' ? '\uD83D\uDCC4' : (fe === 'csv' || fe === 'xlsx' || fe === 'xls') ? '\uD83D\uDCCA' : (fe === 'docx' || fe === 'doc') ? '\uD83D\uDCDD' : '\uD83D\uDCCE';
+                                    return (<div style={{ display: 'inline-flex', alignItems: 'center', gap: '5px', background: 'rgba(0,0,0,0.08)', borderRadius: '6px', padding: '4px 8px', marginBottom: msg.content ? '4px' : '0', fontSize: '11px', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)' }}><span>{fi}</span><span style={{ fontWeight: 500, color: 'var(--text-primary)', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{msg.fileName}</span></div>);
                                 })()}
                                 {msg.thinking && (
-                                    <details className="thinking-panel">
-                                        <summary className="thinking-summary">
-                                            <span className="thinking-status-dot" />
-                                            {streaming && i === messages.length - 1 && !msg.content
-                                                ? t('agent.chat.thinkingLabel', '思考中')
-                                                : t('agent.chat.thoughtLabel', '已思考')}
+                                    <details style={{
+                                        marginBottom: '8px', fontSize: '12px',
+                                        background: 'rgba(147, 130, 220, 0.08)', borderRadius: '6px',
+                                        border: '1px solid rgba(147, 130, 220, 0.15)',
+                                    }}>
+                                        <summary style={{
+                                            padding: '6px 10px', cursor: 'pointer',
+                                            color: 'rgba(147, 130, 220, 0.9)', fontWeight: 500,
+                                            userSelect: 'none', display: 'flex', alignItems: 'center', gap: '4px',
+                                        }}>
+                                            💭 Thinking
                                         </summary>
-                                        <div className="thinking-content">
+                                        <div style={{
+                                            padding: '4px 10px 8px',
+                                            fontSize: '12px', lineHeight: '1.6',
+                                            color: 'var(--text-secondary)',
+                                            whiteSpace: 'pre-wrap', wordBreak: 'break-word',
+                                            maxHeight: '300px', overflow: 'auto',
+                                        }}>
                                             {msg.thinking}
                                         </div>
                                     </details>
                                 )}
                                 {msg.toolCalls && msg.toolCalls.length > 0 && (
-                                    <ChatToolChain toolCalls={msg.toolCalls} />
+                                    <details style={{
+                                        marginBottom: '8px', fontSize: '12px',
+                                        background: 'var(--accent-subtle)', borderRadius: '6px',
+                                        padding: '0',
+                                    }}>
+                                        <summary style={{
+                                            padding: '6px 10px', cursor: 'pointer',
+                                            color: 'var(--accent-text)', fontWeight: 500,
+                                            userSelect: 'none',
+                                        }}>
+                                            {Icons.tool} {msg.toolCalls.length} tool call{msg.toolCalls.length > 1 ? 's' : ''}
+                                        </summary>
+                                        <div style={{ padding: '4px 10px 8px' }}>
+                                            {msg.toolCalls.map((tc, j) => (
+                                                <div key={j} style={{
+                                                    marginBottom: j < msg.toolCalls!.length - 1 ? '6px' : 0,
+                                                    borderBottom: j < msg.toolCalls!.length - 1 ? '1px solid var(--border-subtle)' : 'none',
+                                                    paddingBottom: j < msg.toolCalls!.length - 1 ? '6px' : 0,
+                                                }}>
+                                                    <div style={{ fontWeight: 600, color: 'var(--accent-text)', marginBottom: '2px' }}>
+                                                        {tc.name}
+                                                    </div>
+                                                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-tertiary)', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+                                                        {JSON.stringify(tc.args)}
+                                                    </div>
+                                                    {tc.result && (
+                                                        <div style={{
+                                                            marginTop: '4px', fontSize: '11px', color: 'var(--text-secondary)',
+                                                            fontFamily: 'var(--font-mono)', whiteSpace: 'pre-wrap', wordBreak: 'break-all',
+                                                            maxHeight: '120px', overflow: 'auto',
+                                                        }}>
+                                                            {tc.result}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </details>
                                 )}
                                 {msg.role === 'assistant' ? (
-                                    streaming && !msg.content && !msg.thinking && i === messages.length - 1 ? (
+                                    streaming && !msg.content && i === messages.length - 1 ? (
                                         <div className="thinking-indicator">
                                             <div className="thinking-dots">
                                                 <span /><span /><span />
@@ -949,8 +521,50 @@ export default function Chat() {
                                     ) : (
                                         <MarkdownRenderer content={msg.content} />
                                     )
+                                ) : editingId === msg.id ? (
+                                    <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', width: '100%' }}>
+                                        <textarea
+                                            value={editContent}
+                                            onChange={e => setEditContent(e.target.value)}
+                                            autoFocus
+                                            style={{ flex: 1, minHeight: '40px', resize: 'vertical', padding: '8px', borderRadius: '4px', border: '1px solid var(--border-color, #333)', background: 'var(--bg-secondary, #1e1e1e)', color: 'inherit' }}
+                                        />
+                                        <button onClick={() => {
+                                            wsRef.current?.send(JSON.stringify({
+                                                type: 'edit',
+                                                message_id: msg.id,
+                                                content: editContent,
+                                            }));
+                                            setEditingId(null);
+                                        }} style={{ padding: '4px 12px', borderRadius: '4px', background: 'var(--primary, #4a9eff)', color: 'white', border: 'none', cursor: 'pointer' }}>Save</button>
+                                        <button onClick={() => setEditingId(null)} style={{ padding: '4px 12px', borderRadius: '4px', background: 'transparent', border: '1px solid var(--border-color, #333)', cursor: 'pointer', color: 'inherit' }}>Cancel</button>
+                                    </div>
                                 ) : (
-                                    <MarkdownRenderer content={msg.content} />
+                                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: '6px' }}>
+                                        <div style={{ whiteSpace: 'pre-wrap', flex: 1 }}>{msg.content}</div>
+                                        {msg.role === 'user' && !msg.isSkillIndicator && msg.id && (
+                                            <button
+                                                onClick={() => {
+                                                    setEditingId(msg.id || null);
+                                                    setEditContent(msg.content);
+                                                }}
+                                                title="Edit"
+                                                style={{
+                                                    opacity: 0,
+                                                    transition: 'opacity 0.2s',
+                                                    background: 'none',
+                                                    border: 'none',
+                                                    cursor: 'pointer',
+                                                    padding: '4px',
+                                                    fontSize: '14px',
+                                                    flexShrink: 0,
+                                                }}
+                                                className="edit-btn"
+                                            >
+                                                ✏️
+                                            </button>
+                                        )}
+                                    </div>
                                 )}
                                 {msg.timestamp && (
                                     <div style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginTop: '4px', opacity: 0.7 }}>
@@ -959,6 +573,7 @@ export default function Chat() {
                                 )}
                             </div>
                         </div>
+                        )
                     ))}
                     {(isWaiting || (streaming && (messages.length === 0 || messages[messages.length - 1].role === 'user'))) && (
                         <div className="chat-message assistant">
@@ -978,133 +593,100 @@ export default function Chat() {
                     <div ref={messagesEndRef} />
                 </div>
 
+                {attachedFile && (
+                    <div style={{
+                        padding: '6px 12px',
+                        background: 'var(--bg-elevated)',
+                        borderTop: '1px solid var(--border-subtle)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        fontSize: '12px',
+                    }}>
+                        <span style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                            {attachedFile.imageUrl ? (
+                                <img src={attachedFile.imageUrl} alt={attachedFile.name} style={{ width: '32px', height: '32px', borderRadius: '4px', objectFit: 'cover' }} />
+                            ) : (
+                                <span style={{ display: 'flex' }}>{Icons.clip}</span>
+                            )}
+                            {attachedFile.name}
+                        </span>
+                        <button
+                            onClick={() => setAttachedFile(null)}
+                            style={{ background: 'none', border: 'none', color: 'var(--text-tertiary)', cursor: 'pointer', fontSize: '14px' }}
+                        >✕</button>
+                    </div>
+                )}
+
                 <div className="chat-input-area">
-                    <div className="chat-composer">
-                        {(uploadProgress || (attachedFile && !uploadProgress)) && (
-                            <div className="chat-composer-attachments">
-                                {uploadProgress && (
-                                    <div className="chat-file-pill">
-                                        <div
-                                            className="chat-file-pill__fill"
-                                            style={{ width: `${uploadProgress.percent}%` }}
-                                        />
-                                        <div className="chat-file-pill__row">
-                                            {uploadProgress.previewUrl ? (
-                                                <img className="chat-file-pill__thumb" src={uploadProgress.previewUrl} alt="" />
-                                            ) : (
-                                                <span className="chat-file-pill__icon">
-                                                    <IconPaperclip size={14} stroke={1.75} />
-                                                </span>
-                                            )}
-                                            <span className="chat-file-pill__name">{uploadProgress.name}</span>
-                                            <span className="chat-file-pill__size">{formatFileSize(uploadProgress.sizeBytes)}</span>
-                                            <span className="chat-file-pill__pct">{uploadProgress.percent}%</span>
-                                        </div>
-                                    </div>
-                                )}
-                                {attachedFile && !uploadProgress && (
-                                    <div className="chat-file-pill">
-                                        <div className="chat-file-pill__row">
-                                            {attachedFile.imageUrl ? (
-                                                <img className="chat-file-pill__thumb" src={attachedFile.imageUrl} alt="" />
-                                            ) : (
-                                                <span className="chat-file-pill__icon">
-                                                    <IconPaperclip size={14} stroke={1.75} />
-                                                </span>
-                                            )}
-                                            <span className="chat-file-pill__name">{attachedFile.name}</span>
-                                            <button
-                                                type="button"
-                                                className="chat-file-pill__remove"
-                                                onClick={() => setAttachedFile(null)}
-                                                title={t('common.close', 'Close')}
-                                            >
-                                                ×
-                                            </button>
-                                        </div>
-                                    </div>
-                                )}
+                    <input
+                        type="file"
+                        ref={fileInputRef}
+                        onChange={handleFileSelect}
+                        style={{ display: 'none' }}
+
+                    />
+                    <button
+                        className="btn btn-secondary"
+                        onClick={() => fileInputRef.current?.click()}
+                        disabled={!connected || uploading || isWaiting || streaming}
+                        style={{ padding: '8px 12px', fontSize: '16px', minWidth: 'auto' }}
+                        title={t('agent.workspace.uploadFile')}
+                    >
+                        {uploading ? Icons.loader : Icons.clip}
+                    </button>
+                    <SkillAutocomplete
+                        value={input}
+                        onChange={setInput}
+                        onSubmit={sendMessage}
+                        skillMap={agent?.skill_map || {}}
+                        placeholder={attachedFile ? t('agent.chat.askAboutFile', { name: attachedFile.name }) : t('chat.placeholder')}
+                        className="chat-input"
+                        disabled={!connected || isWaiting || streaming}
+                    />
+                    {(streaming || isWaiting) ? (
+                        <button className="btn btn-stop-generation" onClick={() => { if (wsRef.current?.readyState === WebSocket.OPEN) { wsRef.current.send(JSON.stringify({ type: 'abort' })); setStreaming(false); setIsWaiting(false); } }} title={t('chat.stop', 'Stop')}>
+                            <span className="stop-icon" />
+                        </button>
+                    ) : (
+                        <button className="btn btn-primary" onClick={sendMessage} disabled={!connected || (!input.trim() && !attachedFile)}>
+                            {t('chat.send')}
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            {drawerContent && (
+                <>
+                    <div
+                        onClick={() => setDrawerContent(null)}
+                        style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 1000 }}
+                    />
+                    <div style={{
+                        position: 'fixed', top: 0, right: 0, bottom: 0, width: '40vw', minWidth: '320px', maxWidth: '600px',
+                        background: 'var(--bg-primary)', boxShadow: '-4px 0 20px rgba(0,0,0,0.15)',
+                        zIndex: 1001, display: 'flex', flexDirection: 'column', overflow: 'hidden',
+                    }}>
+                        <div style={{
+                            padding: '16px 20px', borderBottom: '1px solid var(--border-color)',
+                            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                        }}>
+                            <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)' }}>
+                                {drawerContent.name}
                             </div>
-                        )}
-                        <div className="chat-composer-input-block">
-                            <textarea
-                                ref={textareaRef}
-                                className="chat-input"
-                                value={input}
-                                onChange={handleInputChange}
-                                onKeyDown={handleKeyDown}
-                                placeholder={t('chat.placeholder')}
-                                disabled={!connected}
-                                rows={1}
-                            />
-                        </div>
-                        <div className="chat-composer-toolbar">
-                            <input type="file" ref={fileInputRef} onChange={handleFileSelect} style={{ display: 'none' }} />
                             <button
-                                type="button"
-                                className="chat-composer-btn"
-                                onClick={() => fileInputRef.current?.click()}
-                                disabled={!connected || !!uploadProgress || isWaiting || streaming}
-                                title={t('agent.workspace.uploadFile')}
+                                onClick={() => setDrawerContent(null)}
+                                style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: 'var(--text-tertiary)', padding: '4px' }}
                             >
-                                <IconPaperclip size={16} stroke={1.75} />
+                                ✕
                             </button>
-                            <ModelSwitcher
-                                value={overrideModelId}
-                                onChange={handleModelChange}
-                                tenantDefaultId={myTenant?.default_model_id || null}
-                                disabled={!connected}
-                            />
-                            <div style={{ flex: 1 }} />
-                            {(streaming || isWaiting) ? (
-                                <button
-                                    type="button"
-                                    className="btn btn-stop-generation"
-                                    onClick={() => {
-                                        if (wsRef.current?.readyState === WebSocket.OPEN) {
-                                            wsRef.current.send(JSON.stringify({ type: 'abort' }));
-                                            setStreaming(false);
-                                            setIsWaiting(false);
-                                        }
-                                    }}
-                                    title={t('chat.stop', 'Stop')}
-                                >
-                                    <span className="stop-icon" />
-                                </button>
-                            ) : (
-                                <button
-                                    type="button"
-                                    className="btn btn-primary chat-composer-send"
-                                    onClick={sendMessage}
-                                    disabled={!connected || (!input.trim() && !attachedFile)}
-                                    title={t('chat.send')}
-                                >
-                                    <IconSend size={16} stroke={1.75} />
-                                </button>
-                            )}
+                        </div>
+                        <div style={{ flex: 1, overflow: 'auto', padding: '20px' }}>
+                            <MarkdownRenderer content={drawerContent.content} />
                         </div>
                     </div>
-                </div>
-                </div>
-
-                {/* AgentBay Live Preview Panel */}
-                {hasLiveData && (
-                    <AgentBayLivePanel
-                        liveState={liveState}
-                        visible={livePanelVisible}
-                        onToggle={() => setLivePanelVisible(v => !v)}
-                        agentId={id}
-                        sessionId={wsSessionId}
-                        onLiveUpdate={(env, screenshotDataUri) => {
-                            // Update live preview with the latest screenshot from Take Control
-                            setLiveState(prev => ({
-                                ...prev,
-                                [env]: { screenshotUrl: screenshotDataUri },
-                            }));
-                        }}
-                    />
-                )}
-            </div>
+                </>
+            )}
         </div>
     );
 }
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 3b80b6707..60fd7852d 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -277,8 +277,8 @@ function StatsBar({ agents, allTasks, tokenUsage }: { agents: Agent[]; allTasks:
     ];
 
     return (
-        <div style={{
-            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1px',
+        <div className="stats-grid" style={{
+            display: 'grid', gap: '1px',
             background: 'var(--border-subtle)', borderRadius: 'var(--radius-lg)',
             overflow: 'hidden', marginBottom: '24px',
             border: '1px solid var(--border-subtle)',
@@ -325,9 +325,9 @@ function AgentRow({ agent, tasks, recentActivity }: {
     return (
         <div
             onClick={() => navigate(`/agents/${agent.id}`)}
+            className="agent-row"
             style={{
                 display: 'grid',
-                gridTemplateColumns: '220px 1fr 150px 100px',
                 alignItems: 'center', gap: '16px',
                 padding: '12px 16px',
                 borderRadius: 'var(--radius-md)',
@@ -375,7 +375,7 @@ function AgentRow({ agent, tasks, recentActivity }: {
             </div>
 
             {/* Latest Activity / Tasks */}
-            <div style={{ minWidth: 0 }}>
+            <div className="agent-row-activity" style={{ minWidth: 0 }}>
                 {latestActivity ? (
                     <div style={{
                         fontSize: '12px', color: 'var(--text-secondary)',
@@ -413,7 +413,7 @@ function AgentRow({ agent, tasks, recentActivity }: {
             </div>
 
             {/* Token Usage */}
-            <div>
+            <div className="agent-row-meta">
                 <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '3px' }}>
                     {formatTokens(usedTokens)}
                     {maxTokens > 0 && <span style={{ opacity: 0.6 }}> / {formatTokens(maxTokens)}</span>}
@@ -441,7 +441,7 @@ function AgentRow({ agent, tasks, recentActivity }: {
             </div>
 
             {/* Last Active */}
-            <div style={{ textAlign: 'right', fontSize: '12px', color: 'var(--text-tertiary)' }}>
+            <div className="agent-row-meta" style={{ textAlign: 'right', fontSize: '12px', color: 'var(--text-tertiary)' }}>
                 {timeAgo(agent.last_active_at, t)}
             </div>
         </div>
@@ -467,9 +467,9 @@ function ActivityFeed({ activities, agents }: { activities: any[]; agents: Agent
             {activities.map((act, i) => {
                 const agent = agentMap.get(act.agent_id);
                 return (
-                    <div key={act.id || i} style={{
-                        display: 'flex', gap: '12px', padding: '7px 12px',
-                        fontSize: '13px', alignItems: 'flex-start',
+                    <div key={act.id || i} className="activity-feed-item" style={{
+                        display: 'flex', gap: '12px',
+                        alignItems: 'flex-start',
                     }}>
                         <span style={{
                             color: 'var(--text-tertiary)', whiteSpace: 'nowrap',
@@ -625,9 +625,7 @@ export default function Dashboard() {
                         marginBottom: '32px',
                     }}>
                         {/* Agent List Header */}
-                        <div style={{
-                            display: 'grid',
-                            gridTemplateColumns: '220px 1fr 150px 100px',
+                        <div className="agent-row-header" style={{
                             padding: '10px 16px',
                             fontSize: '11px', color: 'var(--text-tertiary)', fontWeight: 500,
                             textTransform: 'uppercase' as const, letterSpacing: '0.05em',
diff --git a/frontend/src/pages/EnterpriseSettings.tsx b/frontend/src/pages/EnterpriseSettings.tsx
index 8a2603bdb..69399d470 100644
--- a/frontend/src/pages/EnterpriseSettings.tsx
+++ b/frontend/src/pages/EnterpriseSettings.tsx
@@ -1,32 +1,15 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
+import { enterpriseApi } from '../services/api';
+import PromptModal from '../components/PromptModal';
+import FileBrowser from '../components/FileBrowser';
+import type { FileBrowserApi } from '../components/FileBrowser';
 import { saveAccentColor, getSavedAccentColor, resetAccentColor, PRESET_COLORS } from '../utils/theme';
 import UserManagement from './UserManagement';
 import InvitationCodes from './InvitationCodes';
-import { useDialog } from '../components/Dialog/DialogProvider';
-import { useToast } from '../components/Toast/ToastProvider';
-import { buildCompanyRegions, type CompanyRegion } from '../utils/companyRegions';
-import OrgTab from './enterprise-settings/tabs/OrgTab';
 import SkillsTab from './enterprise-settings/tabs/SkillsTab';
-import OkrTab from './enterprise-settings/tabs/OkrTab';
-import LlmTab from './enterprise-settings/tabs/LlmTab';
-import EnterpriseKBBrowser from './enterprise-settings/components/EnterpriseKBBrowser';
-import { A2AAsyncToggle, CompanyLogoEditor, CompanyNameEditor, CompanyTimezoneEditor } from './enterprise-settings/components/CompanyInfoEditors';
-import {
-    IconBrowser,
-    IconBulb,
-    IconChevronDown,
-    IconClock,
-    IconCheck,
-    IconFileText,
-    IconMessageCircle,
-    IconSearch,
-    IconSettings,
-    IconTerminal2,
-    IconTools,
-    IconUser,
-} from '@tabler/icons-react';
+
 // API helpers for enterprise endpoints
 async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
     const token = localStorage.getItem('token');
@@ -37,20 +20,217 @@ async function fetchJson<T>(url: string, options?: RequestInit): Promise<T> {
             ...(token ? { Authorization: `Bearer ${token}` } : {}),
         },
     });
-    if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        // Pydantic validation errors return detail as an array of objects,
-        // each with {loc, msg, type}. Extract readable messages from the array.
-        const detail = body.detail;
-        const msg = Array.isArray(detail)
-            ? detail.map((e: any) => e.msg || JSON.stringify(e)).join('; ')
-            : (typeof detail === 'string' ? detail : 'Error');
-        throw new Error(msg);
-    }
+    if (!res.ok) throw new Error((await res.json().catch(() => ({}))).detail || 'Error');
     if (res.status === 204) return undefined as T;
     return res.json();
 }
 
+interface LLMModel {
+    id: string; provider: string; model: string; label: string;
+    base_url?: string; api_key_masked?: string; max_tokens_per_day?: number; enabled: boolean; supports_vision?: boolean; max_output_tokens?: number; temperature?: number; created_at: string;
+}
+
+interface LLMProviderSpec {
+    provider: string;
+    display_name: string;
+    protocol: string;
+    default_base_url?: string | null;
+    supports_tool_choice: boolean;
+    default_max_tokens: number;
+}
+
+const FALLBACK_LLM_PROVIDERS: LLMProviderSpec[] = [
+    { provider: 'anthropic', display_name: 'Anthropic', protocol: 'anthropic', default_base_url: 'https://api.anthropic.com', supports_tool_choice: false, default_max_tokens: 8192 },
+    { provider: 'openai', display_name: 'OpenAI', protocol: 'openai_compatible', default_base_url: 'https://api.openai.com/v1', supports_tool_choice: true, default_max_tokens: 16384 },
+    { provider: 'azure', display_name: 'Azure OpenAI', protocol: 'openai_compatible', default_base_url: '', supports_tool_choice: true, default_max_tokens: 16384 },
+    { provider: 'deepseek', display_name: 'DeepSeek', protocol: 'openai_compatible', default_base_url: 'https://api.deepseek.com/v1', supports_tool_choice: true, default_max_tokens: 8192 },
+    { provider: 'minimax', display_name: 'MiniMax', protocol: 'openai_compatible', default_base_url: 'https://api.minimaxi.com/v1', supports_tool_choice: true, default_max_tokens: 16384 },
+    { provider: 'qwen', display_name: 'Qwen (DashScope)', protocol: 'openai_compatible', default_base_url: 'https://dashscope.aliyuncs.com/compatible-mode/v1', supports_tool_choice: true, default_max_tokens: 8192 },
+    { provider: 'zhipu', display_name: 'Zhipu', protocol: 'openai_compatible', default_base_url: 'https://open.bigmodel.cn/api/paas/v4', supports_tool_choice: true, default_max_tokens: 8192 },
+    { provider: 'baidu', display_name: 'Baidu (Qianfan)', protocol: 'openai_compatible', default_base_url: 'https://qianfan.baidubce.com/v2', supports_tool_choice: false, default_max_tokens: 4096 },
+    { provider: 'gemini', display_name: 'Gemini', protocol: 'gemini', default_base_url: 'https://generativelanguage.googleapis.com/v1beta', supports_tool_choice: true, default_max_tokens: 8192 },
+    { provider: 'openrouter', display_name: 'OpenRouter', protocol: 'openai_compatible', default_base_url: 'https://openrouter.ai/api/v1', supports_tool_choice: true, default_max_tokens: 4096 },
+    { provider: 'kimi', display_name: 'Kimi (Moonshot)', protocol: 'openai_compatible', default_base_url: 'https://api.moonshot.cn/v1', supports_tool_choice: true, default_max_tokens: 8192 },
+    { provider: 'vllm', display_name: 'vLLM', protocol: 'openai_compatible', default_base_url: 'http://localhost:8000/v1', supports_tool_choice: true, default_max_tokens: 4096 },
+    { provider: 'ollama', display_name: 'Ollama', protocol: 'openai_compatible', default_base_url: 'http://localhost:11434/v1', supports_tool_choice: true, default_max_tokens: 4096 },
+    { provider: 'sglang', display_name: 'SGLang', protocol: 'openai_compatible', default_base_url: 'http://localhost:30000/v1', supports_tool_choice: true, default_max_tokens: 4096 },
+    { provider: 'custom', display_name: 'Custom', protocol: 'openai_compatible', default_base_url: '', supports_tool_choice: true, default_max_tokens: 4096 },
+];
+
+
+
+// ─── Department Tree ───────────────────────────────
+function DeptTree({ departments, parentId, selectedDept, onSelect, level }: {
+    departments: any[]; parentId: string | null; selectedDept: string | null;
+    onSelect: (id: string | null) => void; level: number;
+}) {
+    const children = departments.filter((d: any) =>
+        parentId === null ? !d.parent_id : d.parent_id === parentId
+    );
+    if (children.length === 0) return null;
+    return (
+        <>
+            {children.map((d: any) => (
+                <div key={d.id}>
+                    <div
+                        style={{
+                            padding: '5px 8px', paddingLeft: `${8 + level * 16}px`, borderRadius: '4px',
+                            cursor: 'pointer', fontSize: '13px', marginBottom: '1px',
+                            background: selectedDept === d.id ? 'rgba(224,238,238,0.12)' : 'transparent',
+                        }}
+                        onClick={() => onSelect(d.id)}
+                    >
+                        <span style={{ color: 'var(--text-tertiary)', marginRight: '4px', fontSize: '11px' }}>
+                            {departments.some((c: any) => c.parent_id === d.id) ? '▸' : '·'}
+                        </span>
+                        {d.name}
+                        {d.member_count > 0 && <span style={{ fontSize: '10px', color: 'var(--text-tertiary)', marginLeft: '4px' }}>({d.member_count})</span>}
+                    </div>
+                    <DeptTree departments={departments} parentId={d.id} selectedDept={selectedDept} onSelect={onSelect} level={level + 1} />
+                </div>
+            ))}
+        </>
+    );
+}
+
+// ─── Org Structure Tab ─────────────────────────────
+function OrgTab() {
+    const { t } = useTranslation();
+    const qc = useQueryClient();
+    const [syncForm, setSyncForm] = useState({ app_id: '', app_secret: '' });
+    const [syncing, setSyncing] = useState(false);
+    const [syncResult, setSyncResult] = useState<any>(null);
+    const [memberSearch, setMemberSearch] = useState('');
+    const [selectedDept, setSelectedDept] = useState<string | null>(null);
+
+    const { data: config } = useQuery({
+        queryKey: ['system-settings', 'feishu_org_sync'],
+        queryFn: () => fetchJson<any>('/enterprise/system-settings/feishu_org_sync'),
+    });
+
+    useEffect(() => {
+        if (config?.value?.app_id) {
+            setSyncForm({ app_id: config.value.app_id, app_secret: '' });
+        }
+    }, [config]);
+
+    const currentTenantId = localStorage.getItem('current_tenant_id') || '';
+    const { data: departments = [] } = useQuery({
+        queryKey: ['org-departments', currentTenantId],
+        queryFn: () => fetchJson<any[]>(`/enterprise/org/departments${currentTenantId ? `?tenant_id=${currentTenantId}` : ''}`),
+    });
+    const { data: members = [] } = useQuery({
+        queryKey: ['org-members', selectedDept, memberSearch, currentTenantId],
+        queryFn: () => {
+            const params = new URLSearchParams();
+            if (selectedDept) params.set('department_id', selectedDept);
+            if (memberSearch) params.set('search', memberSearch);
+            if (currentTenantId) params.set('tenant_id', currentTenantId);
+            return fetchJson<any[]>(`/enterprise/org/members?${params}`);
+        },
+    });
+
+    const saveConfig = async () => {
+        await fetchJson('/enterprise/system-settings/feishu_org_sync', {
+            method: 'PUT',
+            body: JSON.stringify({ value: { app_id: syncForm.app_id, app_secret: syncForm.app_secret } }),
+        });
+        qc.invalidateQueries({ queryKey: ['system-settings', 'feishu_org_sync'] });
+    };
+
+    const triggerSync = async () => {
+        setSyncing(true);
+        setSyncResult(null);
+        try {
+            if (syncForm.app_secret) await saveConfig();
+            const result = await fetchJson<any>('/enterprise/org/sync', { method: 'POST' });
+            setSyncResult(result);
+            qc.invalidateQueries({ queryKey: ['org-departments'] });
+            qc.invalidateQueries({ queryKey: ['org-members'] });
+        } catch (e: any) {
+            setSyncResult({ error: e.message });
+        }
+        setSyncing(false);
+    };
+
+    return (
+        <div>
+            {/* Sync Config */}
+            <div className="card" style={{ marginBottom: '16px' }}>
+                <h4 style={{ marginBottom: '12px' }}>{t('enterprise.org.feishuSync')}</h4>
+                <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                    {t('enterprise.org.feishuSync')}
+                </p>
+                <div style={{ display: 'flex', gap: '12px', marginBottom: '12px' }}>
+                    <div style={{ flex: 1 }}>
+                        <label style={{ fontSize: '12px', fontWeight: 500, display: 'block', marginBottom: '4px' }}>App ID</label>
+                        <input className="input" value={syncForm.app_id} onChange={e => setSyncForm({ ...syncForm, app_id: e.target.value })} placeholder="cli_xxxxxxxx" />
+                    </div>
+                    <div style={{ flex: 1 }}>
+                        <label style={{ fontSize: '12px', fontWeight: 500, display: 'block', marginBottom: '4px' }}>App Secret</label>
+                        <input className="input" type="password" value={syncForm.app_secret} onChange={e => setSyncForm({ ...syncForm, app_secret: e.target.value })} placeholder={config?.value?.app_id ? '' : ''} />
+                    </div>
+                </div>
+                <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                    <button className="btn btn-primary" onClick={triggerSync} disabled={syncing || !syncForm.app_id}>
+                        {syncing ? t('enterprise.org.syncing') : t('enterprise.org.syncNow')}
+                    </button>
+                    {config?.value?.last_synced_at && (
+                        <span style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>
+                            Last sync: {new Date(config.value.last_synced_at).toLocaleString()}
+                        </span>
+                    )}
+                </div>
+                {syncResult && (
+                    <div style={{ marginTop: '12px', padding: '8px 12px', borderRadius: '6px', fontSize: '12px', background: syncResult.error ? 'rgba(255,0,0,0.1)' : 'rgba(0,200,0,0.1)' }}>
+                        {syncResult.error ? `${syncResult.error}` : t('enterprise.org.syncComplete', { departments: syncResult.departments, members: syncResult.members })}
+                    </div>
+                )}
+            </div>
+
+            {/* Department & Members Browser */}
+            <div className="card">
+                <h4 style={{ marginBottom: '12px' }}>{t('enterprise.org.orgBrowser')}</h4>
+                <div style={{ display: 'flex', gap: '16px' }}>
+                    <div style={{ width: '260px', borderRight: '1px solid var(--border-subtle)', paddingRight: '16px', maxHeight: '500px', overflowY: 'auto' }}>
+                        <div style={{ fontSize: '12px', fontWeight: 600, marginBottom: '8px', color: 'var(--text-secondary)' }}>{t('enterprise.org.allDepartments')}</div>
+                        <div
+                            style={{ padding: '6px 8px', borderRadius: '4px', cursor: 'pointer', fontSize: '13px', marginBottom: '2px', background: !selectedDept ? 'rgba(224,238,238,0.1)' : 'transparent' }}
+                            onClick={() => setSelectedDept(null)}
+                        >
+                            {t('common.all')}
+                        </div>
+                        <DeptTree departments={departments} parentId={null} selectedDept={selectedDept} onSelect={setSelectedDept} level={0} />
+                        {departments.length === 0 && <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', padding: '8px' }}>{t('common.noData')}</div>}
+                    </div>
+
+                    <div style={{ flex: 1 }}>
+                        <input className="input" placeholder={t("enterprise.org.searchMembers")} value={memberSearch} onChange={e => setMemberSearch(e.target.value)} style={{ marginBottom: '12px', fontSize: '13px' }} />
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', maxHeight: '400px', overflowY: 'auto' }}>
+                            {members.map((m: any) => (
+                                <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: '10px', padding: '8px', borderRadius: '6px', border: '1px solid var(--border-subtle)' }}>
+                                    <div style={{ width: '32px', height: '32px', borderRadius: '50%', background: 'rgba(224,238,238,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '14px', fontWeight: 600 }}>
+                                        {m.name?.[0] || '?'}
+                                    </div>
+                                    <div>
+                                        <div style={{ fontWeight: 500, fontSize: '13px' }}>{m.name}</div>
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                            {m.title || '-'} · {m.department_path || '-'}
+                                            {m.email && ` · ${m.email}`}
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                            {members.length === 0 && <div style={{ textAlign: 'center', padding: '24px', color: 'var(--text-tertiary)', fontSize: '13px' }}>{t('enterprise.org.noMembers')}</div>}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+
 // ─── Theme Color Picker ────────────────────────────
 function ThemeColorPicker() {
     const { t } = useTranslation();
@@ -76,10 +256,8 @@ function ThemeColorPicker() {
     };
 
     return (
-        <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
-            <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '10px' }}>
-                {t('enterprise.config.themeColor')}
-            </div>
+        <div className="card" style={{ marginTop: '16px', marginBottom: '16px' }}>
+            <h4 style={{ marginBottom: '12px' }}>{t('enterprise.config.themeColor')}</h4>
             <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', marginBottom: '12px' }}>
                 {PRESET_COLORS.map(c => (
                     <div
@@ -121,24 +299,225 @@ function ThemeColorPicker() {
 
 
 
-export default function EnterpriseSettings() {
+// ─── Main Component ────────────────────────────────
+// ─── Enterprise KB Browser ─────────────────────────
+function EnterpriseKBBrowser({ onRefresh }: { onRefresh: () => void; refreshKey: number }) {
+    const kbAdapter: FileBrowserApi = {
+        list: (path) => enterpriseApi.kbFiles(path),
+        read: (path) => enterpriseApi.kbRead(path),
+        write: (path, content) => enterpriseApi.kbWrite(path, content),
+        delete: (path) => enterpriseApi.kbDelete(path),
+        upload: (file, path) => enterpriseApi.kbUpload(file, path),
+    };
+    return <FileBrowser api={kbAdapter} features={{ upload: true, newFolder: true, edit: true, delete: true, directoryNavigation: true }} onRefresh={onRefresh} />;
+}
+
+function CompanyNameEditor() {
     const { t } = useTranslation();
-    const dialog = useDialog();
-    const toast = useToast();
     const qc = useQueryClient();
-    type TabKey = 'llm' | 'org' | 'info' | 'approvals' | 'audit' | 'tools' | 'skills' | 'quotas' | 'users' | 'invites' | 'okr';
-    const VALID_TABS: TabKey[] = ['info', 'llm', 'tools', 'skills', 'okr', 'invites', 'quotas', 'users', 'org', 'approvals', 'audit'];
-    const getTabFromHash = (): TabKey => {
-        const hash = window.location.hash.replace('#', '') as TabKey;
-        return VALID_TABS.includes(hash) ? hash : 'info';
+    const tenantId = localStorage.getItem('current_tenant_id') || '';
+    const [name, setName] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    useEffect(() => {
+        if (!tenantId) return;
+        fetchJson<any>(`/tenants/${tenantId}`)
+            .then(d => { if (d?.name) setName(d.name); })
+            .catch(() => { });
+    }, [tenantId]);
+
+    const handleSave = async () => {
+        if (!tenantId || !name.trim()) return;
+        setSaving(true);
+        try {
+            await fetchJson(`/tenants/${tenantId}`, {
+                method: 'PUT', body: JSON.stringify({ name: name.trim() }),
+            });
+            qc.invalidateQueries({ queryKey: ['tenants'] });
+            setSaved(true);
+            setTimeout(() => setSaved(false), 2000);
+        } catch (e) { }
+        setSaving(false);
     };
-    const [activeTab, setActiveTab] = useState<TabKey>(getTabFromHash);
-    // Sync hash ↔ activeTab: hashchange navigation (back/forward) updates state
+
+    return (
+        <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
+            <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+                <input
+                    className="form-input"
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                    placeholder={t('enterprise.companyName.placeholder', 'Enter company name')}
+                    style={{ flex: 1, fontSize: '14px' }}
+                    onKeyDown={e => e.key === 'Enter' && handleSave()}
+                />
+                <button className="btn btn-primary" onClick={handleSave} disabled={saving || !name.trim()}>
+                    {saving ? t('common.loading') : t('common.save', 'Save')}
+                </button>
+                {saved && <span style={{ color: 'var(--success)', fontSize: '12px' }}>✅</span>}
+            </div>
+        </div>
+    );
+}
+
+
+// ─── Company Timezone Editor ───────────────────────
+const COMMON_TIMEZONES = [
+    'UTC',
+    'Asia/Shanghai',
+    'Asia/Tokyo',
+    'Asia/Seoul',
+    'Asia/Singapore',
+    'Asia/Kolkata',
+    'Asia/Dubai',
+    'Europe/London',
+    'Europe/Paris',
+    'Europe/Berlin',
+    'Europe/Moscow',
+    'America/New_York',
+    'America/Chicago',
+    'America/Denver',
+    'America/Los_Angeles',
+    'America/Sao_Paulo',
+    'Australia/Sydney',
+    'Pacific/Auckland',
+];
+
+function CompanyTimezoneEditor() {
+    const { t } = useTranslation();
+    const tenantId = localStorage.getItem('current_tenant_id') || '';
+    const [timezone, setTimezone] = useState('UTC');
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
     useEffect(() => {
-        const handler = () => setActiveTab(getTabFromHash());
-        window.addEventListener('hashchange', handler);
-        return () => window.removeEventListener('hashchange', handler);
-    }, []);
+        if (!tenantId) return;
+        fetchJson<any>(`/tenants/${tenantId}`)
+            .then(d => { if (d?.timezone) setTimezone(d.timezone); })
+            .catch(() => { });
+    }, [tenantId]);
+
+    const handleSave = async (tz: string) => {
+        if (!tenantId) return;
+        setTimezone(tz);
+        setSaving(true);
+        try {
+            await fetchJson(`/tenants/${tenantId}`, {
+                method: 'PUT', body: JSON.stringify({ timezone: tz }),
+            });
+            setSaved(true);
+            setTimeout(() => setSaved(false), 2000);
+        } catch (e) { }
+        setSaving(false);
+    };
+
+    return (
+        <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
+            <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+                <div style={{ flex: 1 }}>
+                    <div style={{ fontWeight: 500, fontSize: '13px', marginBottom: '4px' }}>🌐 {t('enterprise.timezone.title', 'Company Timezone')}</div>
+                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                        {t('enterprise.timezone.description', 'Default timezone for all agents. Agents can override individually.')}
+                    </div>
+                </div>
+                <select
+                    className="form-input"
+                    value={timezone}
+                    onChange={e => handleSave(e.target.value)}
+                    style={{ width: '220px', fontSize: '13px' }}
+                    disabled={saving}
+                >
+                    {COMMON_TIMEZONES.map(tz => (
+                        <option key={tz} value={tz}>{tz}</option>
+                    ))}
+                </select>
+                {saved && <span style={{ color: 'var(--success)', fontSize: '12px' }}>✅</span>}
+            </div>
+        </div>
+    );
+}
+
+
+// ── Broadcast Section ──────────────────────────
+function BroadcastSection() {
+    const { t } = useTranslation();
+    const [title, setTitle] = useState('');
+    const [body, setBody] = useState('');
+    const [sending, setSending] = useState(false);
+    const [result, setResult] = useState<{ users: number; agents: number } | null>(null);
+
+    const handleSend = async () => {
+        if (!title.trim()) return;
+        setSending(true);
+        setResult(null);
+        try {
+            const token = localStorage.getItem('token');
+            const res = await fetch('/api/notifications/broadcast', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                body: JSON.stringify({ title: title.trim(), body: body.trim() }),
+            });
+            if (!res.ok) {
+                const err = await res.json().catch(() => ({}));
+                alert(err.detail || 'Failed to send broadcast');
+                setSending(false);
+                return;
+            }
+            const data = await res.json();
+            setResult({ users: data.users_notified, agents: data.agents_notified });
+            setTitle('');
+            setBody('');
+        } catch (e: any) {
+            alert(e.message || 'Failed');
+        }
+        setSending(false);
+    };
+
+    return (
+        <div style={{ marginTop: '24px', marginBottom: '24px' }}>
+            <h3 style={{ marginBottom: '4px' }}>{t('enterprise.broadcast.title', 'Broadcast Notification')}</h3>
+            <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                {t('enterprise.broadcast.description', 'Send a notification to all users and agents in this company.')}
+            </p>
+            <div className="card" style={{ padding: '16px' }}>
+                <input
+                    className="form-input"
+                    placeholder={t('enterprise.broadcast.titlePlaceholder', 'Notification title')}
+                    value={title}
+                    onChange={e => setTitle(e.target.value)}
+                    maxLength={200}
+                    style={{ marginBottom: '8px', fontSize: '13px' }}
+                />
+                <textarea
+                    className="form-input"
+                    placeholder={t('enterprise.broadcast.bodyPlaceholder', 'Optional details...')}
+                    value={body}
+                    onChange={e => setBody(e.target.value)}
+                    maxLength={1000}
+                    rows={3}
+                    style={{ resize: 'vertical', fontSize: '13px', marginBottom: '12px' }}
+                />
+                <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                    <button className="btn btn-primary" onClick={handleSend} disabled={sending || !title.trim()}>
+                        {sending ? t('common.loading') : t('enterprise.broadcast.send', 'Send Broadcast')}
+                    </button>
+                    {result && (
+                        <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
+                            {t('enterprise.broadcast.sent', `Sent to ${result.users} users and ${result.agents} agents`, { users: result.users, agents: result.agents })}
+                        </span>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+
+export default function EnterpriseSettings() {
+    const { t } = useTranslation();
+    const qc = useQueryClient();
+    const [activeTab, setActiveTab] = useState<'llm' | 'org' | 'info' | 'approvals' | 'audit' | 'tools' | 'skills' | 'quotas' | 'users' | 'invites'>('info');
 
     // Track selected tenant as state so page refreshes on company switch
     const [selectedTenantId, setSelectedTenantId] = useState(localStorage.getItem('current_tenant_id') || '');
@@ -155,32 +534,36 @@ export default function EnterpriseSettings() {
     // Tenant quota defaults
     const [quotaForm, setQuotaForm] = useState({
         default_message_limit: 50, default_message_period: 'permanent',
-        default_max_agents: 2, default_agent_ttl_hours: 0,
-        default_max_llm_calls_per_day: 1000, min_heartbeat_interval_minutes: 120,
+        default_max_agents: 2, default_agent_ttl_hours: 48,
+        default_max_llm_calls_per_day: 100, min_heartbeat_interval_minutes: 120,
         default_max_triggers: 20, min_poll_interval_floor: 5, max_webhook_rate_ceiling: 5,
     });
     const [quotaSaving, setQuotaSaving] = useState(false);
     const [quotaSaved, setQuotaSaved] = useState(false);
+    const [utilityModelId, setUtilityModelId] = useState<string>('');
+    const tenantQuotaPath = `/enterprise/tenant-quotas${selectedTenantId ? `?tenant_id=${encodeURIComponent(selectedTenantId)}` : ''}`;
     useEffect(() => {
-        if (activeTab === 'quotas') {
-            fetchJson<any>('/enterprise/tenant-quotas').then(d => {
-                if (d && Object.keys(d).length) setQuotaForm(f => ({ ...f, ...d }));
+        if (activeTab === 'quotas' || activeTab === 'llm') {
+            fetchJson<any>(tenantQuotaPath).then(d => {
+                if (d && Object.keys(d).length) {
+                    setQuotaForm(f => ({ ...f, ...d }));
+                    setUtilityModelId(d.utility_model_id || '');
+                }
             }).catch(() => { });
         }
-    }, [activeTab]);
+    }, [activeTab, tenantQuotaPath]);
     const saveQuotas = async () => {
         setQuotaSaving(true);
         try {
-            await fetchJson('/enterprise/tenant-quotas', { method: 'PATCH', body: JSON.stringify(quotaForm) });
+            await fetchJson(tenantQuotaPath, { method: 'PATCH', body: JSON.stringify(quotaForm) });
             setQuotaSaved(true); setTimeout(() => setQuotaSaved(false), 2000);
-        } catch (e: any) { toast.error('保存失败', { details: String(e?.message || e) }); }
+        } catch (e) { alert('Failed to save'); }
         setQuotaSaving(false);
     };
     const [companyIntro, setCompanyIntro] = useState('');
     const [companyIntroSaving, setCompanyIntroSaving] = useState(false);
     const [companyIntroSaved, setCompanyIntroSaved] = useState(false);
 
-
     // Company intro key: always per-tenant scoped
     const companyIntroKey = selectedTenantId ? `company_intro_${selectedTenantId}` : 'company_intro';
 
@@ -212,161 +595,23 @@ export default function EnterpriseSettings() {
     };
     const [auditFilter, setAuditFilter] = useState<'all' | 'background' | 'actions'>('all');
     const [infoRefresh, setInfoRefresh] = useState(0);
+    const [kbPromptModal, setKbPromptModal] = useState(false);
     const [kbToast, setKbToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
+    const showKbToast = (message: string, type: 'success' | 'error' = 'success') => {
+        setKbToast({ message, type });
+        setTimeout(() => setKbToast(null), 3000);
+    };
 
     const [allTools, setAllTools] = useState<any[]>([]);
     const [showAddMCP, setShowAddMCP] = useState(false);
-    const [mcpForm, setMcpForm] = useState({ server_url: '', server_name: '', api_key: '' });
+    const [mcpForm, setMcpForm] = useState({ server_url: '', server_name: '' });
     const [mcpRawInput, setMcpRawInput] = useState('');
     const [mcpTestResult, setMcpTestResult] = useState<any>(null);
     const [mcpTesting, setMcpTesting] = useState(false);
-    // Edit Server modal state — null when closed, otherwise the server to edit
-    const [editingMcpServer, setEditingMcpServer] = useState<{
-        server_name: string;
-        server_url: string;
-        api_key: string;
-    } | null>(null);
-    const [mcpServerSaving, setMcpServerSaving] = useState(false);
     const [editingToolId, setEditingToolId] = useState<string | null>(null);
     const [editingConfig, setEditingConfig] = useState<Record<string, any>>({});
-    const [showAdvancedToolConfig, setShowAdvancedToolConfig] = useState(false);
-
-    const [configCategory, setConfigCategory] = useState<string | null>(null);
-
-    // Category-level config schemas: tools sharing the same key have config on category header
-    const GLOBAL_CATEGORY_CONFIG_SCHEMAS: Record<string, { title: string; fields: any[] }> = {
-        agentbay: {
-            title: 'AgentBay Settings',
-            fields: [
-                { key: 'api_key', label: 'API Key (from AgentBay)', type: 'password', placeholder: 'Enter your AgentBay API key' },
-                { key: 'os_type', label: 'Cloud Computer OS', type: 'select', default: 'windows', options: [{ value: 'linux', label: 'Linux' }, { value: 'windows', label: 'Windows' }] },
-            ],
-        },
-    };
-    const GLOBAL_CATEGORY_CONFIG_PRIMARY_TOOL: Record<string, string> = {
-        agentbay: 'agentbay_browser_navigate',
-    };
-
-    const applyConfigDefaults = (fields: any[] = [], config: Record<string, any> = {}) => {
-        const next = { ...config };
-        for (const field of fields) {
-            if (field.default !== undefined && (next[field.key] === undefined || next[field.key] === null || next[field.key] === '')) {
-                next[field.key] = field.default;
-            }
-        }
-        return next;
-    };
-
-    // Labels for tool categories (mirrors AgentDetail getCategoryLabels)
-    const categoryLabels: Record<string, string> = {
-        file: t('agent.toolCategories.file'),
-        task: t('agent.toolCategories.task'),
-        communication: t('agent.toolCategories.communication'),
-        search: t('agent.toolCategories.search'),
-        aware: t('agent.toolCategories.aware', 'Aware & Triggers'),
-        social: t('agent.toolCategories.social', 'Social'),
-        code: t('agent.toolCategories.code', 'Code & Execution'),
-        discovery: t('agent.toolCategories.discovery', 'Discovery'),
-        email: t('agent.toolCategories.email', 'Email'),
-        feishu: t('agent.toolCategories.feishu', 'Feishu / Lark'),
-        custom: t('agent.toolCategories.custom'),
-        general: t('agent.toolCategories.general'),
-        agentbay: t('agent.toolCategories.agentbay', 'AgentBay'),
-    };
-    const categoryDescriptions: Record<string, string> = {
-        agentbay: 'Browser and cloud computer automation',
-        file: 'Read, write, convert, and manage workspace files',
-        communication: 'Messages and cross-channel collaboration',
-        search: 'Web and knowledge search tools',
-        code: 'Code execution and development utilities',
-        aware: 'Triggers, reminders, and awareness workflows',
-        email: 'Email reading and sending tools',
-        feishu: 'Feishu / Lark messaging and collaboration',
-        okr: 'Objectives, key results, and progress reporting',
-        social: 'Social publishing and community workflows',
-        discovery: 'Tool and capability discovery',
-        custom: 'Company-added or MCP tools',
-        general: 'General purpose tools',
-    };
-    const renderCategoryIcon = (category: string, size = 15) => {
-        const style = { color: 'var(--text-tertiary)' };
-        switch (category) {
-            case 'agentbay': return <IconBrowser size={size} stroke={1.8} style={style} />;
-            case 'file': return <IconFileText size={size} stroke={1.8} style={style} />;
-            case 'communication':
-            case 'feishu':
-            case 'email':
-            case 'social':
-                return <IconMessageCircle size={size} stroke={1.8} style={style} />;
-            case 'search':
-            case 'discovery':
-                return <IconSearch size={size} stroke={1.8} style={style} />;
-            case 'code': return <IconTerminal2 size={size} stroke={1.8} style={style} />;
-            case 'aware': return <IconClock size={size} stroke={1.8} style={style} />;
-            case 'custom': return <IconSettings size={size} stroke={1.8} style={style} />;
-            default: return <IconTools size={size} stroke={1.8} style={style} />;
-        }
-    };
-    const mcpToolGroupKey = (tool: any) => {
-        const serverName = String(tool.mcp_server_name || '').trim();
-        return tool.type === 'mcp' && serverName
-            ? `mcp:${serverName.toLowerCase()}`
-            : (tool.category || 'general');
-    };
-    const getToolGroupMeta = (groupKey: string, toolsInGroup: any[]) => {
-        const first = toolsInGroup.find((tool: any) => tool.type === 'mcp' && tool.mcp_server_name) || toolsInGroup[0];
-        if (groupKey.startsWith('mcp:') && first?.mcp_server_name) {
-            return {
-                label: first.mcp_server_name,
-                description: t('agent.tools.mcpGroupDescription', 'Tools from {{name}}', { name: first.mcp_server_name }),
-                iconCategory: 'custom',
-                configCategory: first.category || 'custom',
-            };
-        }
-        return {
-            label: categoryLabels[groupKey] || groupKey,
-            description: categoryDescriptions[groupKey] || 'Tools in this category',
-            iconCategory: groupKey,
-            configCategory: groupKey,
-        };
-    };
-    const switchTrack = (enabled: boolean, mixed = false) => ({
-        position: 'absolute' as const,
-        inset: 0,
-        background: enabled ? 'var(--accent-primary)' : mixed ? 'var(--border-default)' : 'var(--bg-tertiary)',
-        borderRadius: '11px',
-        transition: 'background 0.2s',
-    });
-    const switchKnob = (enabled: boolean) => ({
-        position: 'absolute' as const,
-        left: enabled ? '20px' : '2px',
-        top: '2px',
-        width: '18px',
-        height: '18px',
-        background: '#fff',
-        borderRadius: '50%',
-        transition: 'left 0.2s',
-        boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
-    });
     const [toolsView, setToolsView] = useState<'global' | 'agent-installed'>('global');
     const [agentInstalledTools, setAgentInstalledTools] = useState<any[]>([]);
-    const [toolSearch, setToolSearch] = useState('');
-    const [toolStatusFilter, setToolStatusFilter] = useState<'all' | 'enabled' | 'disabled' | 'default' | 'configured'>('all');
-    const [expandedToolCategories, setExpandedToolCategories] = useState<Set<string>>(() => new Set());
-    const [expandedAgentInstalledGroups, setExpandedAgentInstalledGroups] = useState<Set<string>>(() => new Set());
-    const hasMeaningfulConfigValue = (value: any): boolean => {
-        if (value == null) return false;
-        if (typeof value === 'string') return value.trim().length > 0;
-        if (typeof value === 'number') return Number.isFinite(value);
-        if (typeof value === 'boolean') return value;
-        if (Array.isArray(value)) return value.some(hasMeaningfulConfigValue);
-        if (typeof value === 'object') return Object.values(value).some(hasMeaningfulConfigValue);
-        return false;
-    };
-    const hasMeaningfulConfig = (config?: Record<string, any> | null): boolean => {
-        if (!config) return false;
-        return Object.values(config).some(hasMeaningfulConfigValue);
-    };
     const loadAllTools = async () => {
         const tid = selectedTenantId;
         const data = await fetchJson<any[]>(`/tools${tid ? `?tenant_id=${tid}` : ''}`);
@@ -377,10 +622,7 @@ export default function EnterpriseSettings() {
             const tid = selectedTenantId;
             const data = await fetchJson<any[]>(`/tools/agent-installed${tid ? `?tenant_id=${tid}` : ''}`);
             setAgentInstalledTools(data);
-        } catch (error) {
-            console.warn('[EnterpriseTools] Failed to load agent-installed tools', error);
-            setAgentInstalledTools([]);
-        }
+        } catch { }
     };
     useEffect(() => { if (activeTab === 'tools') { loadAllTools(); loadAgentInstalledTools(); } }, [activeTab, selectedTenantId]);
 
@@ -423,18 +665,61 @@ export default function EnterpriseSettings() {
     };
 
 
-    const { data: currentTenant } = useQuery({
-        queryKey: ['tenant', selectedTenantId],
-        queryFn: () => fetchJson<any>(`/tenants/${selectedTenantId}`),
-        enabled: !!selectedTenantId,
-    });
-
     // ─── Stats (scoped to selected tenant)
     const { data: stats } = useQuery({
         queryKey: ['enterprise-stats', selectedTenantId],
         queryFn: () => fetchJson<any>(`/enterprise/stats${selectedTenantId ? `?tenant_id=${selectedTenantId}` : ''}`),
     });
 
+    // ─── LLM Models
+    const { data: models = [] } = useQuery({
+        queryKey: ['llm-models', selectedTenantId],
+        queryFn: () => fetchJson<LLMModel[]>(`/enterprise/llm-models${selectedTenantId ? `?tenant_id=${selectedTenantId}` : ''}`),
+        enabled: activeTab === 'llm',
+    });
+    const [showAddModel, setShowAddModel] = useState(false);
+    const [editingModelId, setEditingModelId] = useState<string | null>(null);
+    const [modelForm, setModelForm] = useState({ provider: 'anthropic', model: '', api_key: '', base_url: '', label: '', supports_vision: false, max_output_tokens: '' as string, temperature: '' as string });
+    const { data: providerSpecs = [] } = useQuery({
+        queryKey: ['llm-provider-specs'],
+        queryFn: () => fetchJson<LLMProviderSpec[]>('/enterprise/llm-providers'),
+        enabled: activeTab === 'llm',
+    });
+    const providerOptions = providerSpecs.length > 0 ? providerSpecs : FALLBACK_LLM_PROVIDERS;
+    const addModel = useMutation({
+        mutationFn: (data: any) => fetchJson(`/enterprise/llm-models${selectedTenantId ? `?tenant_id=${selectedTenantId}` : ''}`, { method: 'POST', body: JSON.stringify(data) }),
+        onSuccess: () => { qc.invalidateQueries({ queryKey: ['llm-models', selectedTenantId] }); setShowAddModel(false); setEditingModelId(null); },
+    });
+    const updateModel = useMutation({
+        mutationFn: ({ id, data }: { id: string; data: any }) => fetchJson(`/enterprise/llm-models/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
+        onSuccess: () => { qc.invalidateQueries({ queryKey: ['llm-models', selectedTenantId] }); setShowAddModel(false); setEditingModelId(null); },
+    });
+    const deleteModel = useMutation({
+        mutationFn: async ({ id, force = false }: { id: string; force?: boolean }) => {
+            const url = force ? `/enterprise/llm-models/${id}?force=true` : `/enterprise/llm-models/${id}`;
+            const res = await fetch(`/api${url}`, {
+                method: 'DELETE',
+                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+            });
+            if (res.status === 409) {
+                const data = await res.json();
+                const agents = data.detail?.agents || [];
+                const msg = `This model is used by ${agents.length} agent(s):\n\n${agents.join(', ')}\n\nDelete anyway? (their model config will be cleared)`;
+                if (confirm(msg)) {
+                    // Retry with force
+                    const r2 = await fetch(`/api/enterprise/llm-models/${id}?force=true`, {
+                        method: 'DELETE',
+                        headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
+                    });
+                    if (!r2.ok && r2.status !== 204) throw new Error('Delete failed');
+                }
+                return;
+            }
+            if (!res.ok && res.status !== 204) throw new Error('Delete failed');
+        },
+        onSuccess: () => qc.invalidateQueries({ queryKey: ['llm-models', selectedTenantId] }),
+    });
+
     // ─── Approvals
     const { data: approvals = [] } = useQuery({
         queryKey: ['approvals', selectedTenantId],
@@ -477,28 +762,300 @@ export default function EnterpriseSettings() {
                 </div>
 
                 <div className="tabs">
-                    {(['info', 'llm', 'tools', 'skills', 'okr', 'invites', 'quotas', 'users', 'org', 'approvals', 'audit'] as const).map(tab => (
-                        <div
-                            key={tab}
-                            className={`tab ${activeTab === tab ? 'active' : ''}`}
-                            onClick={() => {
-                                // Update URL hash so each tab has a bookmarkable address
-                                window.location.hash = tab;
-                                setActiveTab(tab);
-                            }}
-                        >
-                            {tab === 'quotas' ? t('enterprise.tabs.quotas', 'Quotas') : tab === 'users' ? t('enterprise.tabs.users', 'Users') : tab === 'invites' ? t('enterprise.tabs.invites', 'Invitations') : tab === 'okr' ? t('nav.okr', 'OKR') : t(`enterprise.tabs.${tab}`)}
+                    {(['info', 'llm', 'tools', 'skills', 'invites', 'quotas', 'users', 'org', 'approvals', 'audit'] as const).map(tab => (
+                        <div key={tab} className={`tab ${activeTab === tab ? 'active' : ''}`} onClick={() => setActiveTab(tab)}>
+                            {tab === 'quotas' ? t('enterprise.tabs.quotas', 'Quotas') : tab === 'users' ? t('enterprise.tabs.users', 'Users') : tab === 'invites' ? t('enterprise.tabs.invites', 'Invitations') : t(`enterprise.tabs.${tab}`)}
                         </div>
                     ))}
                 </div>
 
-                {activeTab === 'okr' && <OkrTab tenantId={selectedTenantId} t={t} />}
-
                 {/* ── LLM Model Pool ── */}
-                {activeTab === 'llm' && <LlmTab selectedTenantId={selectedTenantId} />}
+                {activeTab === 'llm' && (
+                    <div>
+                        {/* Utility Model Selection */}
+                        <div style={{ marginBottom: '20px', padding: '16px', background: 'var(--bg-secondary)', borderRadius: '8px' }}>
+                            <div style={{ fontSize: '13px', fontWeight: 600, marginBottom: '8px', color: 'var(--text-primary)' }}>
+                                {t('enterprise.llm.utilityModel')}
+                            </div>
+                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '10px' }}>
+                                {t('enterprise.llm.utilityModelDesc')}
+                            </div>
+                            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                                <select
+                                    value={utilityModelId}
+                                    onChange={async (e) => {
+                                        const val = e.target.value;
+                                        setUtilityModelId(val);
+                                        try {
+                                            await fetchJson(tenantQuotaPath, {
+                                                method: 'PATCH',
+                                                body: JSON.stringify({ utility_model_id: val || '' }),
+                                            });
+                                        } catch (err) {
+                                            console.error('Failed to update utility model:', err);
+                                        }
+                                    }}
+                                    style={{
+                                        padding: '6px 10px', borderRadius: '6px', border: '1px solid var(--border-color)',
+                                        background: 'var(--bg-primary)', color: 'var(--text-primary)', fontSize: '12px',
+                                        minWidth: '200px',
+                                    }}
+                                >
+                                    <option value="">{t('enterprise.llm.noUtilityModel')}</option>
+                                    {(models || []).filter((m: any) => m.is_enabled !== false).map((m: any) => (
+                                        <option key={m.id} value={m.id}>{m.label || `${m.provider}/${m.model}`}</option>
+                                    ))}
+                                </select>
+                            </div>
+                        </div>
+                        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
+                            <button className="btn btn-primary" onClick={() => {
+                                setEditingModelId(null);
+                                const defaultSpec = providerOptions[0];
+                                setModelForm({
+                                    provider: defaultSpec?.provider || 'anthropic',
+                                    model: '', api_key: '',
+                                    base_url: defaultSpec?.default_base_url || '',
+                                    label: '', supports_vision: false,
+                                    max_output_tokens: defaultSpec ? String(defaultSpec.default_max_tokens) : '4096',
+                                    temperature: '',
+                                });
+                                setShowAddModel(true);
+                            }}>+ {t('enterprise.llm.addModel')}</button>
+                        </div>
+
+                        {/* Add Model form — only shown at top when adding new */}
+                        {showAddModel && !editingModelId && (
+                            <div className="card" style={{ marginBottom: '16px' }}>
+                                <h3 style={{ marginBottom: '16px' }}>{t('enterprise.llm.addModel')}</h3>
+                                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                                    <div className="form-group">
+                                        <label className="form-label">{t('enterprise.llm.provider')}</label>
+                                        <select className="form-input" value={modelForm.provider} onChange={e => {
+                                            const newProvider = e.target.value;
+                                            const spec = providerOptions.find(p => p.provider === newProvider);
+                                            const updates: any = { provider: newProvider };
+                                            if (spec?.default_base_url) {
+                                                updates.base_url = spec.default_base_url;
+                                            } else {
+                                                updates.base_url = '';
+                                            }
+                                            if (spec) {
+                                                updates.max_output_tokens = String(spec.default_max_tokens);
+                                            }
+                                            setModelForm(f => ({ ...f, ...updates }));
+                                        }}>
+                                            {providerOptions.map((p) => (
+                                                <option key={p.provider} value={p.provider}>{p.display_name}</option>
+                                            ))}
+                                        </select>
+                                    </div>
+                                    <div className="form-group">
+                                        <label className="form-label">{t('enterprise.llm.model')}</label>
+                                        <input className="form-input" placeholder={t('enterprise.llm.modelPlaceholder')} value={modelForm.model} onChange={e => setModelForm({ ...modelForm, model: e.target.value })} />
+                                    </div>
+                                    <div className="form-group">
+                                        <label className="form-label">{t('enterprise.llm.label')}</label>
+                                        <input className="form-input" placeholder={t('enterprise.llm.labelPlaceholder')} value={modelForm.label} onChange={e => setModelForm({ ...modelForm, label: e.target.value })} />
+                                    </div>
+                                    <div className="form-group">
+                                        <label className="form-label">{t('enterprise.llm.baseUrl')}</label>
+                                        <input className="form-input" placeholder={t('enterprise.llm.baseUrlPlaceholder')} value={modelForm.base_url} onChange={e => setModelForm({ ...modelForm, base_url: e.target.value })} />
+                                    </div>
+                                    <div className="form-group" style={{ gridColumn: 'span 2' }}>
+                                        <label className="form-label">{t('enterprise.llm.apiKey')}</label>
+                                        <input className="form-input" type="password" placeholder={t('enterprise.llm.apiKeyPlaceholder')} value={modelForm.api_key} onChange={e => setModelForm({ ...modelForm, api_key: e.target.value })} />
+                                    </div>
+                                    <div className="form-group" style={{ gridColumn: 'span 2' }}>
+                                        <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '13px' }}>
+                                            <input type="checkbox" checked={modelForm.supports_vision} onChange={e => setModelForm({ ...modelForm, supports_vision: e.target.checked })} />
+                                            {t('enterprise.llm.supportsVision')}
+                                            <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', fontWeight: 400 }}>{t('enterprise.llm.supportsVisionDesc')}</span>
+                                        </label>
+                                    </div>
+                                    <div className="form-group">
+                                        <label className="form-label">{t('enterprise.llm.maxOutputTokens', 'Max Output Tokens')}</label>
+                                        <input className="form-input" type="number" placeholder={t('enterprise.llm.maxOutputTokensPlaceholder', 'e.g. 4096')} value={modelForm.max_output_tokens} onChange={e => setModelForm({ ...modelForm, max_output_tokens: e.target.value })} />
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('enterprise.llm.maxOutputTokensDesc', 'Limits generation length')}</div>
+                                    </div>
+                                    <div className="form-group">
+                                        <label className="form-label">{t('enterprise.llm.temperature', 'Temperature')}</label>
+                                        <input className="form-input" type="number" step="0.1" min="0" max="2" placeholder={t('enterprise.llm.temperaturePlaceholder', 'e.g. 0.7 or 1.0 (Leave empty for default)')} value={modelForm.temperature} onChange={e => setModelForm({ ...modelForm, temperature: e.target.value })} />
+                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('enterprise.llm.temperatureDesc', 'Leave empty to use the provider default. o1/o3 reasoning models usually require 1.0')}</div>
+                                    </div>
+                                </div>
+                                <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end', alignItems: 'center' }}>
+                                    <button className="btn btn-secondary" onClick={() => { setShowAddModel(false); setEditingModelId(null); }}>{t('common.cancel')}</button>
+                                    <button className="btn btn-secondary" style={{ display: 'flex', alignItems: 'center', gap: '6px' }} disabled={!modelForm.model || !modelForm.api_key} onClick={async () => {
+                                        const btn = document.activeElement as HTMLButtonElement;
+                                        const origText = btn?.textContent || '';
+                                        if (btn) btn.textContent = t('enterprise.llm.testing');
+                                        try {
+                                            const token = localStorage.getItem('token');
+                                            const testData: any = { provider: modelForm.provider, model: modelForm.model, base_url: modelForm.base_url || undefined };
+                                            if (modelForm.api_key) testData.api_key = modelForm.api_key;
+                                            const res = await fetch('/api/enterprise/llm-test', {
+                                                method: 'POST',
+                                                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                                                body: JSON.stringify(testData),
+                                            });
+                                            const result = await res.json();
+                                            if (result.success) {
+                                                if (btn) { btn.textContent = t('enterprise.llm.testSuccess', { latency: result.latency_ms }); btn.style.color = 'var(--success)'; }
+                                                setTimeout(() => { if (btn) { btn.textContent = origText; btn.style.color = ''; } }, 3000);
+                                            } else {
+                                                alert(t('enterprise.llm.testFailed', { error: result.error || 'Unknown error', latency: result.latency_ms }));
+                                                if (btn) btn.textContent = origText;
+                                            }
+                                        } catch (e: any) {
+                                            alert(t('enterprise.llm.testError', { message: e.message }));
+                                            if (btn) btn.textContent = origText;
+                                        }
+                                    }}>{t('enterprise.llm.test')}</button>
+                                    <button className="btn btn-primary" onClick={() => {
+                                        const data = { 
+                                            ...modelForm, 
+                                            max_output_tokens: modelForm.max_output_tokens ? Number(modelForm.max_output_tokens) : null,
+                                            temperature: modelForm.temperature !== '' ? Number(modelForm.temperature) : null
+                                        };
+                                        addModel.mutate(data);
+                                    }} disabled={!modelForm.model || !modelForm.api_key}>
+                                        {t('common.save')}
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                            {models.map((m) => (
+                                <div key={m.id}>
+                                    {editingModelId === m.id ? (
+                                        /* Inline edit form */
+                                        <div className="card" style={{ border: '1px solid var(--accent-primary)' }}>
+                                            <h3 style={{ marginBottom: '16px' }}>Edit Model</h3>
+                                            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
+                                                <div className="form-group">
+                                                    <label className="form-label">{t('enterprise.llm.provider')}</label>
+                                                    <select className="form-input" value={modelForm.provider} onChange={e => {
+                                                        const newProvider = e.target.value;
+                                                        setModelForm(f => ({ ...f, provider: newProvider }));
+                                                    }}>
+                                                        {providerOptions.map((p) => (
+                                                            <option key={p.provider} value={p.provider}>{p.display_name}</option>
+                                                        ))}
+                                                        {!providerOptions.some((p) => p.provider === modelForm.provider) && (
+                                                            <option value={modelForm.provider}>{modelForm.provider}</option>
+                                                        )}
+                                                    </select>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label className="form-label">{t('enterprise.llm.model')}</label>
+                                                    <input className="form-input" placeholder={t('enterprise.llm.modelPlaceholder')} value={modelForm.model} onChange={e => setModelForm({ ...modelForm, model: e.target.value })} />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label className="form-label">{t('enterprise.llm.label')}</label>
+                                                    <input className="form-input" placeholder={t('enterprise.llm.labelPlaceholder')} value={modelForm.label} onChange={e => setModelForm({ ...modelForm, label: e.target.value })} />
+                                                </div>
+                                                <div className="form-group">
+                                                    <label className="form-label">{t('enterprise.llm.baseUrl')}</label>
+                                                    <input className="form-input" placeholder={t('enterprise.llm.baseUrlPlaceholder')} value={modelForm.base_url} onChange={e => setModelForm({ ...modelForm, base_url: e.target.value })} />
+                                                </div>
+                                                <div className="form-group" style={{ gridColumn: 'span 2' }}>
+                                                    <label className="form-label">{t('enterprise.llm.apiKey')}</label>
+                                                    <input className="form-input" type="password" placeholder="•••••••• (Leave blank to keep unchanged)" value={modelForm.api_key} onChange={e => setModelForm({ ...modelForm, api_key: e.target.value })} />
+                                                </div>
+                                                <div className="form-group" style={{ gridColumn: 'span 2' }}>
+                                                    <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', fontSize: '13px' }}>
+                                                        <input type="checkbox" checked={modelForm.supports_vision} onChange={e => setModelForm({ ...modelForm, supports_vision: e.target.checked })} />
+                                                        {t('enterprise.llm.supportsVision')}
+                                                        <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', fontWeight: 400 }}>{t('enterprise.llm.supportsVisionDesc')}</span>
+                                                    </label>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label className="form-label">{t('enterprise.llm.maxOutputTokens', 'Max Output Tokens')}</label>
+                                                    <input className="form-input" type="number" placeholder={t('enterprise.llm.maxOutputTokensPlaceholder', 'e.g. 4096')} value={modelForm.max_output_tokens} onChange={e => setModelForm({ ...modelForm, max_output_tokens: e.target.value })} />
+                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('enterprise.llm.maxOutputTokensDesc', 'Limits generation length')}</div>
+                                                </div>
+                                                <div className="form-group">
+                                                    <label className="form-label">{t('enterprise.llm.temperature', 'Temperature')}</label>
+                                                    <input className="form-input" type="number" step="0.1" min="0" max="2" placeholder={t('enterprise.llm.temperaturePlaceholder', 'e.g. 0.7 or 1.0 (Leave empty for default)')} value={modelForm.temperature} onChange={e => setModelForm({ ...modelForm, temperature: e.target.value })} />
+                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('enterprise.llm.temperatureDesc', 'Leave empty to use the provider default. o1/o3 reasoning models usually require 1.0')}</div>
+                                                </div>
+                                            </div>
+                                            <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end', alignItems: 'center' }}>
+                                                <button className="btn btn-secondary" onClick={() => { setShowAddModel(false); setEditingModelId(null); }}>{t('common.cancel')}</button>
+                                                <button className="btn btn-secondary" style={{ display: 'flex', alignItems: 'center', gap: '6px' }} disabled={!modelForm.model} onClick={async () => {
+                                                    const btn = document.activeElement as HTMLButtonElement;
+                                                    const origText = btn?.textContent || '';
+                                                    if (btn) btn.textContent = t('enterprise.llm.testing');
+                                                    try {
+                                                        const token = localStorage.getItem('token');
+                                                        const testData: any = { provider: modelForm.provider, model: modelForm.model, base_url: modelForm.base_url || undefined };
+                                                        if (modelForm.api_key) testData.api_key = modelForm.api_key;
+                                                        testData.model_id = editingModelId;
+                                                        const res = await fetch('/api/enterprise/llm-test', {
+                                                            method: 'POST',
+                                                            headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                                                            body: JSON.stringify(testData),
+                                                        });
+                                                        const result = await res.json();
+                                                        if (result.success) {
+                                                            if (btn) { btn.textContent = t('enterprise.llm.testSuccess', { latency: result.latency_ms }); btn.style.color = 'var(--success)'; }
+                                                            setTimeout(() => { if (btn) { btn.textContent = origText; btn.style.color = ''; } }, 3000);
+                                                        } else {
+                                                            alert(t('enterprise.llm.testFailed', { error: result.error || 'Unknown error', latency: result.latency_ms }));
+                                                            if (btn) btn.textContent = origText;
+                                                        }
+                                                    } catch (e: any) {
+                                                        alert(t('enterprise.llm.testError', { message: e.message }));
+                                                        if (btn) btn.textContent = origText;
+                                                    }
+                                                }}>{t('enterprise.llm.test')}</button>
+                                                <button className="btn btn-primary" onClick={() => {
+                                                    const data = { 
+                                                        ...modelForm, 
+                                                        max_output_tokens: modelForm.max_output_tokens ? Number(modelForm.max_output_tokens) : null,
+                                                        temperature: modelForm.temperature !== '' ? Number(modelForm.temperature) : null
+                                                    };
+                                                    updateModel.mutate({ id: editingModelId!, data });
+                                                }} disabled={!modelForm.model}>
+                                                    {t('common.save')}
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ) : (
+                                        /* Normal model row */
+                                        <div className="card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                                            <div>
+                                                <div style={{ fontWeight: 500 }}>{m.label}</div>
+                                                <div style={{ fontSize: '12px', color: 'var(--text-tertiary)' }}>
+                                                    {m.provider}/{m.model}
+                                                    {m.base_url && <span> · {m.base_url}</span>}
+                                                </div>
+                                            </div>
+                                            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                                                <span className={`badge ${m.enabled ? 'badge-success' : 'badge-warning'}`}>
+                                                    {m.enabled ? t('enterprise.llm.enabled') : t('enterprise.llm.disabled')}
+                                                </span>
+                                                {m.supports_vision && <span className="badge" style={{ background: 'rgba(99,102,241,0.15)', color: 'rgb(99,102,241)', fontSize: '10px' }}>👁 Vision</span>}
+                                                <button className="btn btn-ghost" onClick={() => {
+                                                    setEditingModelId(m.id);
+                                                    setModelForm({ provider: m.provider, model: m.model, label: m.label, base_url: m.base_url || '', api_key: m.api_key_masked || '', supports_vision: m.supports_vision || false, max_output_tokens: m.max_output_tokens ? String(m.max_output_tokens) : '', temperature: m.temperature !== null && m.temperature !== undefined ? String(m.temperature) : '' });
+                                                    setShowAddModel(true);
+                                                }} style={{ fontSize: '12px' }}>✏️ {t('enterprise.tools.edit')}</button>
+                                                <button className="btn btn-ghost" onClick={() => deleteModel.mutate({ id: m.id })} style={{ color: 'var(--error)' }}>{t('common.delete')}</button>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            ))}
+                            {models.length === 0 && <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-tertiary)' }}>{t('common.noData')}</div>}
+                        </div>
+                    </div>
+                )}
 
                 {/* ── Org Structure ── */}
-                {activeTab === 'org' && <OrgTab tenant={currentTenant} />}
+                {activeTab === 'org' && <OrgTab />}
 
                 {/* ── Approvals ── */}
                 {activeTab === 'approvals' && (
@@ -564,10 +1121,9 @@ export default function EnterpriseSettings() {
                                         </span>
                                         <span style={{
                                             padding: '1px 8px', borderRadius: '4px', fontSize: '11px', fontWeight: 500,
-                                            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                                             background: isBg ? 'rgba(99,102,241,0.12)' : 'rgba(34,197,94,0.12)',
                                             color: isBg ? 'var(--accent-color)' : 'rgb(34,197,94)',
-                                        }}>{isBg ? <IconSettings size={12} stroke={1.8} /> : <IconUser size={12} stroke={1.8} />}</span>
+                                        }}>{isBg ? '⚙️' : '👤'}</span>
                                         <span style={{ flex: 1, fontWeight: 500 }}>{log.action}</span>
                                         <span style={{ color: 'var(--text-tertiary)', fontSize: '11px' }}>{log.agent_id?.slice(0, 8) || '-'}</span>
                                     </div>
@@ -588,16 +1144,20 @@ export default function EnterpriseSettings() {
                 {/* ── Company Management ── */}
                 {activeTab === 'info' && (
                     <div>
-                        <CompanyLogoEditor key={`logo-${selectedTenantId}`} />
+
+                        {/* ── 0. Company Name ── */}
+                        <h3 style={{ marginBottom: '8px' }}>{t('enterprise.companyName.title', 'Company Name')}</h3>
                         <CompanyNameEditor key={`name-${selectedTenantId}`} />
+
+                        {/* ── 0.5. Company Timezone ── */}
                         <CompanyTimezoneEditor key={`tz-${selectedTenantId}`} />
+
+                        {/* ── 1. Company Intro ── */}
+                        <h3 style={{ marginBottom: '8px' }}>{t('enterprise.companyIntro.title', 'Company Intro')}</h3>
+                        <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                            {t('enterprise.companyIntro.description', 'Describe your company\'s mission, products, and culture. This information is included in every agent conversation as context.')}
+                        </p>
                         <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
-                            <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px' }}>
-                                {t('enterprise.companyIntro.title', 'Company Intro')}
-                            </div>
-                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
-                                {t('enterprise.companyIntro.description', 'Describe your company\'s mission, products, and culture. This information is included in every agent conversation as context.')}
-                            </div>
                             <textarea
                                 className="form-input"
                                 value={companyIntro}
@@ -613,23 +1173,29 @@ export default function EnterpriseSettings() {
                                 <button className="btn btn-primary" onClick={saveCompanyIntro} disabled={companyIntroSaving}>
                                     {companyIntroSaving ? t('common.loading') : t('common.save', 'Save')}
                                 </button>
-                                {companyIntroSaved && <span style={{ color: 'var(--success)', fontSize: '12px', display: 'inline-flex', alignItems: 'center', gap: '4px' }}><IconCheck size={13} stroke={2} /> {t('enterprise.config.saved', 'Saved')}</span>}
-                                <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
-                                    <IconBulb size={13} stroke={1.8} /> {t('enterprise.companyIntro.hint', 'This content appears in every agent\'s system prompt')}
+                                {companyIntroSaved && <span style={{ color: 'var(--success)', fontSize: '12px' }}>✅ {t('enterprise.config.saved', 'Saved')}</span>}
+                                <span style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginLeft: 'auto' }}>
+                                    💡 {t('enterprise.companyIntro.hint', 'This content appears in every agent\'s system prompt')}
                                 </span>
                             </div>
                         </div>
+
+                        {/* ── 2. Company Knowledge Base ── */}
+                        <h3 style={{ marginBottom: '8px' }}>{t('enterprise.kb.title')}</h3>
+                        <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
+                            {t('enterprise.kb.description', 'Shared files accessible to all agents via enterprise_info/ directory.')}
+                        </p>
                         <div className="card" style={{ marginBottom: '24px', padding: '16px' }}>
-                            <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px' }}>
-                                {t('enterprise.kb.title')}
-                            </div>
-                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
-                                {t('enterprise.kb.description', 'Shared files accessible to all agents via enterprise_info/ directory.')}
-                            </div>
                             <EnterpriseKBBrowser onRefresh={() => setInfoRefresh((v: number) => v + 1)} refreshKey={infoRefresh} />
                         </div>
+
+
+
+                        {/* ── Theme Color ── */}
                         <ThemeColorPicker />
-                        <A2AAsyncToggle key={`a2a-${selectedTenantId}`} />
+
+                        {/* ── Broadcast ── */}
+                        <BroadcastSection />
 
                         {/* ── Danger Zone: Delete Company ── */}
                         <div style={{ marginTop: '32px', padding: '16px', border: '1px solid var(--status-error, #e53e3e)', borderRadius: '8px' }}>
@@ -640,15 +1206,8 @@ export default function EnterpriseSettings() {
                             <button
                                 className="btn"
                                 onClick={async () => {
-                                    const ok = await dialog.confirm(
-                                        t('enterprise.deleteCompanyConfirm', 'Are you sure you want to delete this company and ALL its data? This cannot be undone.'),
-                                        {
-                                            title: t('enterprise.deleteCompanyTitle', 'Delete company'),
-                                            danger: true,
-                                            confirmLabel: t('enterprise.deleteCompanyConfirmButton', 'Permanently delete'),
-                                        },
-                                    );
-                                    if (!ok) return;
+                                    const name = document.querySelector<HTMLInputElement>('.company-name-input')?.value || selectedTenantId;
+                                    if (!confirm(t('enterprise.deleteCompanyConfirm', 'Are you sure you want to delete this company and ALL its data? This cannot be undone.'))) return;
                                     try {
                                         const res = await fetchJson<any>(`/tenants/${selectedTenantId}`, { method: 'DELETE' });
                                         // Switch to fallback tenant
@@ -658,7 +1217,7 @@ export default function EnterpriseSettings() {
                                         window.dispatchEvent(new StorageEvent('storage', { key: 'current_tenant_id', newValue: fallbackId }));
                                         qc.invalidateQueries({ queryKey: ['tenants'] });
                                     } catch (e: any) {
-                                        await dialog.alert(t('enterprise.deleteCompanyFailed', 'Failed to delete company'), { type: 'error', details: String(e?.message || e) });
+                                        alert(e.message || 'Delete failed');
                                     }
                                 }}
                                 style={{
@@ -713,27 +1272,8 @@ export default function EnterpriseSettings() {
                                 </div>
                                 <div className="form-group">
                                     <label className="form-label">{t('enterprise.quotas.agentTTL')}</label>
-                                    <select
-                                        className="form-input"
-                                        value={quotaForm.default_agent_ttl_hours > 0 ? 'custom' : 'permanent'}
-                                        onChange={e => setQuotaForm({
-                                            ...quotaForm,
-                                            default_agent_ttl_hours: e.target.value === 'permanent' ? 0 : 48,
-                                        })}
-                                    >
-                                        <option value="permanent">{t('enterprise.quotas.permanent')}</option>
-                                        <option value="custom">{t('enterprise.quotas.customHours', 'Custom hours')}</option>
-                                    </select>
-                                    {quotaForm.default_agent_ttl_hours > 0 && (
-                                        <input
-                                            className="form-input"
-                                            type="number"
-                                            min={1}
-                                            value={quotaForm.default_agent_ttl_hours}
-                                            onChange={e => setQuotaForm({ ...quotaForm, default_agent_ttl_hours: Number(e.target.value) })}
-                                            style={{ marginTop: '8px' }}
-                                        />
-                                    )}
+                                    <input className="form-input" type="number" min={1} value={quotaForm.default_agent_ttl_hours}
+                                        onChange={e => setQuotaForm({ ...quotaForm, default_agent_ttl_hours: Number(e.target.value) })} />
                                     <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>{t('enterprise.quotas.agentAutoExpiry')}</div>
                                 </div>
                                 <div className="form-group">
@@ -787,7 +1327,7 @@ export default function EnterpriseSettings() {
                                 <button className="btn btn-primary" onClick={saveQuotas} disabled={quotaSaving}>
                                     {quotaSaving ? t('common.loading') : t('common.save', 'Save')}
                                 </button>
-                                {quotaSaved && <span style={{ color: 'var(--success)', fontSize: '12px', display: 'inline-flex', alignItems: 'center', gap: '4px' }}><IconCheck size={13} stroke={2} /> Saved</span>}
+                                {quotaSaved && <span style={{ color: 'var(--success)', fontSize: '12px' }}>✅ Saved</span>}
                             </div>
                         </div>
                     </div>
@@ -803,19 +1343,13 @@ export default function EnterpriseSettings() {
                 {activeTab === 'tools' && (
                     <div>
                         {/* Sub-tab pills */}
-                        <div className="tool-source-tabs enterprise-tool-source-tabs" role="tablist" aria-label={t('enterprise.tools.sourceTabs', 'Tool sources')}>
+                        <div style={{ display: 'flex', gap: '8px', marginBottom: '16px', borderBottom: '1px solid var(--border-subtle)', paddingBottom: '8px' }}>
                             {([['global', t('enterprise.tools.globalTools')], ['agent-installed', t('enterprise.tools.agentInstalled')]] as const).map(([key, label]) => (
-                                <button
-                                    key={key}
-                                    type="button"
-                                    role="tab"
-                                    aria-selected={toolsView === key}
-                                    className={toolsView === key ? 'active' : ''}
-                                    onClick={() => { setToolsView(key as any); if (key === 'agent-installed') loadAgentInstalledTools(); }}
-                                >
-                                    <span>{label}</span>
-                                    <span className="tool-source-tab-count">{key === 'global' ? allTools.length : agentInstalledTools.length}</span>
-                                </button>
+                                <button key={key} onClick={() => { setToolsView(key as any); if (key === 'agent-installed') loadAgentInstalledTools(); }} style={{
+                                    padding: '4px 14px', borderRadius: '12px', fontSize: '12px', fontWeight: 500, cursor: 'pointer', border: 'none',
+                                    background: toolsView === key ? 'var(--accent-primary)' : 'var(--bg-tertiary)',
+                                    color: toolsView === key ? '#fff' : 'var(--text-secondary)', transition: 'all 0.15s',
+                                }}>{label}</button>
                             ))}
                         </div>
 
@@ -826,104 +1360,38 @@ export default function EnterpriseSettings() {
                                 {agentInstalledTools.length === 0 ? (
                                     <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-tertiary)' }}>{t('enterprise.tools.noAgentInstalledTools')}</div>
                                 ) : (
-                                    (() => {
-                                        const grouped = agentInstalledTools.reduce((acc: Record<string, any[]>, row: any) => {
-                                            const groupKey = mcpToolGroupKey(row);
-                                            (acc[groupKey] = acc[groupKey] || []).push(row);
-                                            return acc;
-                                        }, {});
-                                        const toggleAgentInstalledGroup = (groupKey: string) => {
-                                            setExpandedAgentInstalledGroups(prev => {
-                                                const next = new Set(prev);
-                                                if (next.has(groupKey)) next.delete(groupKey);
-                                                else next.add(groupKey);
-                                                return next;
-                                            });
-                                        };
-                                        return (
-                                            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-                                                {Object.entries(grouped)
-                                                    .sort(([a, aRows], [b, bRows]) => {
-                                                        const aMeta = getToolGroupMeta(a, aRows as any[]);
-                                                        const bMeta = getToolGroupMeta(b, bRows as any[]);
-                                                        return aMeta.label.localeCompare(bMeta.label);
-                                                    })
-                                                    .map(([groupKey, rows]) => {
-                                                        const groupRows = rows as any[];
-                                                        const meta = getToolGroupMeta(groupKey, groupRows);
-                                                        const expanded = expandedAgentInstalledGroups.has(groupKey);
-                                                        return (
-                                                            <div key={groupKey} style={{ border: '1px solid var(--border-subtle)', borderRadius: '8px', overflow: 'hidden', background: 'var(--bg-primary)' }}>
-                                                                <div
-                                                                    role="button"
-                                                                    tabIndex={0}
-                                                                    onClick={() => toggleAgentInstalledGroup(groupKey)}
-                                                                    onKeyDown={(e) => {
-                                                                        if (e.key === 'Enter' || e.key === ' ') {
-                                                                            e.preventDefault();
-                                                                            toggleAgentInstalledGroup(groupKey);
-                                                                        }
-                                                                    }}
-                                                                    style={{ background: 'var(--bg-secondary)', padding: '12px 14px', display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', userSelect: 'none' }}
-                                                                >
-                                                                    <IconChevronDown size={14} stroke={1.8} style={{ color: 'var(--text-tertiary)', transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)', transition: 'transform 0.15s ease', flexShrink: 0 }} />
-                                                                    <span style={{ width: '26px', height: '26px', borderRadius: '7px', border: '1px solid var(--border-subtle)', background: 'var(--bg-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{renderCategoryIcon(meta.iconCategory, 15)}</span>
-                                                                    <div style={{ minWidth: 0 }}>
-                                                                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
-                                                                            <span style={{ fontSize: '13px', fontWeight: 650, color: 'var(--text-primary)' }}>{meta.label}</span>
-                                                                            <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
-                                                                                {groupRows.length} {groupRows.length === 1 ? 'tool' : 'tools'}
-                                                                            </span>
-                                                                        </div>
-                                                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>{meta.description}</div>
-                                                                    </div>
-                                                                </div>
-                                                                {expanded && groupRows.map((row: any, idx: number) => (
-                                                                    <div key={row.agent_tool_id} style={{
-                                                                        display: 'grid',
-                                                                        gridTemplateColumns: 'minmax(0, 1fr) auto',
-                                                                        gap: '12px',
-                                                                        alignItems: 'center',
-                                                                        padding: '10px 14px',
-                                                                        borderTop: idx === 0 ? '1px solid var(--border-subtle)' : 'none',
-                                                                        borderBottom: idx < groupRows.length - 1 ? '1px solid var(--border-subtle)' : 'none',
-                                                                    }}>
-                                                                        <div style={{ minWidth: 0 }}>
-                                                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0, flexWrap: 'wrap' }}>
-                                                                                <span style={{ fontWeight: 500, fontSize: '13px', color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{row.tool_display_name}</span>
-                                                                                {row.type === 'mcp' && <span style={{ fontSize: '10px', background: 'var(--bg-tertiary)', color: 'var(--text-secondary)', borderRadius: '4px', padding: '1px 5px' }}>MCP</span>}
-                                                                                {row.configured && <span style={{ fontSize: '10px', background: 'rgba(99,102,241,0.15)', color: 'var(--accent-color)', borderRadius: '4px', padding: '1px 5px' }}>{t('enterprise.tools.configured', 'Configured')}</span>}
-                                                                            </div>
-                                                                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                                                                {row.installed_by_agent_name || 'Unknown Agent'}
-                                                                                {row.installed_at && <span> · {new Date(row.installed_at).toLocaleString()}</span>}
-                                                                            </div>
-                                                                        </div>
-                                                                        <button className="btn btn-ghost" style={{ color: 'var(--error)', fontSize: '12px' }} onClick={async () => {
-                                                                            const ok = await dialog.confirm(t('enterprise.tools.removeFromAgent', { name: row.tool_display_name }), { title: '移除工具', danger: true, confirmLabel: '移除' });
-                                                                            if (!ok) return;
-                                                                            try {
-                                                                                await fetchJson(`/tools/agent-tool/${row.agent_tool_id}`, { method: 'DELETE' });
-                                                                            } catch {
-                                                                                // Already deleted (e.g. removed via Global Tools) — just refresh
-                                                                            }
-                                                                            loadAgentInstalledTools();
-                                                                        }}>{t('enterprise.tools.delete')}</button>
-                                                                    </div>
-                                                                ))}
-                                                            </div>
-                                                        );
-                                                    })}
+                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                                        {agentInstalledTools.map((row: any) => (
+                                            <div key={row.agent_tool_id} className="card" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px' }}>
+                                                <div style={{ flex: 1, minWidth: 0 }}>
+                                                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                                        <span style={{ fontWeight: 500, fontSize: '13px' }}>🔌 {row.tool_display_name}</span>
+                                                        {row.mcp_server_name && <span style={{ fontSize: '10px', background: 'var(--primary)', color: '#fff', borderRadius: '4px', padding: '1px 5px' }}>MCP</span>}
+                                                    </div>
+                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>
+                                                        🤖 {row.installed_by_agent_name || 'Unknown Agent'}
+                                                        {row.installed_at && <span> · {new Date(row.installed_at).toLocaleString()}</span>}
+                                                    </div>
+                                                </div>
+                                                <button className="btn btn-ghost" style={{ color: 'var(--error)', fontSize: '12px' }} onClick={async () => {
+                                                    if (!confirm(t('enterprise.tools.removeFromAgent', { name: row.tool_display_name }))) return;
+                                                    try {
+                                                        await fetchJson(`/tools/agent-tool/${row.agent_tool_id}`, { method: 'DELETE' });
+                                                    } catch {
+                                                        // Already deleted (e.g. removed via Global Tools) — just refresh
+                                                    }
+                                                    loadAgentInstalledTools();
+                                                }}>🗑️ {t('enterprise.tools.delete')}</button>
                                             </div>
-                                        );
-                                    })()
+                                        ))}
+                                    </div>
                                 )}
                             </div>
                         )}
 
                         {toolsView === 'global' && <>
                             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-                                <div />
+                                <h3>{t('enterprise.tools.title')}</h3>
                                 <button className="btn btn-primary" onClick={() => setShowAddMCP(true)}>+ {t('enterprise.tools.addMcpServer')}</button>
                             </div>
 
@@ -945,7 +1413,7 @@ export default function EnterpriseSettings() {
                                                         const name = names[0];
                                                         const cfg = servers[name];
                                                         const url = cfg.url || cfg.uri || '';
-                                                        setMcpForm(p => ({ ...p, server_name: name, server_url: url }));
+                                                        setMcpForm({ server_name: name, server_url: url });
                                                     }
                                                 } catch {
                                                     // Not JSON — treat as plain URL
@@ -965,40 +1433,16 @@ export default function EnterpriseSettings() {
                                                 <input className="form-input" value={mcpForm.server_name} onChange={e => setMcpForm(p => ({ ...p, server_name: e.target.value }))} placeholder="My MCP Server" />
                                             </div>
                                         )}
-
-                                        {/* Optional standalone API Key — sent as Authorization: Bearer */}
-                                        <div>
-                                            <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px' }}>
-                                                API Key <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>(optional)</span>
-                                            </label>
-                                            <input
-                                                type="password"
-                                                className="form-input"
-                                                value={mcpForm.api_key}
-                                                onChange={e => setMcpForm(p => ({ ...p, api_key: e.target.value }))}
-                                                placeholder="Leave blank if the key is already embedded in the URL"
-                                                autoComplete="new-password"
-                                            />
-                                        </div>
-
-                                        {/* Auth explanation for non-obvious behavior */}
-                                        <div style={{ padding: '10px 12px', background: 'rgba(99,102,241,0.06)', border: '1px solid rgba(99,102,241,0.18)', borderRadius: '6px', fontSize: '11px', color: 'var(--text-secondary)', lineHeight: '1.65' }}>
-                                            <div style={{ fontWeight: 600, marginBottom: '4px', color: 'var(--text-primary)' }}>How authentication works</div>
-                                            <div>- If your MCP server embeds the key in the URL (e.g. Tavily uses <code style={{ background: 'rgba(0,0,0,0.06)', padding: '0 3px', borderRadius: '3px' }}>?tavilyApiKey=xxx</code>), leave the field above blank.</div>
-                                            <div>- For servers that use <strong>Bearer token</strong> auth, enter the key here. It is sent as <code style={{ background: 'rgba(0,0,0,0.06)', padding: '0 3px', borderRadius: '3px' }}>Authorization: Bearer ...</code> on every request.</div>
-                                            <div>- If both are provided, the API Key field takes priority. All keys are stored encrypted.</div>
-                                        </div>
-
                                         <div style={{ display: 'flex', gap: '8px' }}>
                                             <button className="btn btn-secondary" disabled={mcpTesting || !mcpForm.server_url} onClick={async () => {
                                                 setMcpTesting(true); setMcpTestResult(null);
                                                 try {
-                                                    const r = await fetchJson<any>('/tools/test-mcp', { method: 'POST', body: JSON.stringify({ server_url: mcpForm.server_url, api_key: mcpForm.api_key || undefined }) });
+                                                    const r = await fetchJson<any>('/tools/test-mcp', { method: 'POST', body: JSON.stringify({ server_url: mcpForm.server_url }) });
                                                     setMcpTestResult(r);
                                                 } catch (e: any) { setMcpTestResult({ ok: false, error: e.message }); }
                                                 setMcpTesting(false);
                                             }}>{mcpTesting ? t('enterprise.tools.testing') : t('enterprise.tools.testConnection')}</button>
-                                            <button className="btn btn-secondary" onClick={() => { setShowAddMCP(false); setMcpTestResult(null); setMcpForm({ server_url: '', server_name: '', api_key: '' }); setMcpRawInput(''); }}>{t('common.cancel')}</button>
+                                            <button className="btn btn-secondary" onClick={() => { setShowAddMCP(false); setMcpTestResult(null); setMcpForm({ server_url: '', server_name: '' }); setMcpRawInput(''); }}>{t('common.cancel')}</button>
                                         </div>
                                         {mcpTestResult && (
                                             <div className="card" style={{ padding: '12px', background: mcpTestResult.ok ? 'rgba(0,200,100,0.1)' : 'rgba(255,0,0,0.1)' }}>
@@ -1011,78 +1455,27 @@ export default function EnterpriseSettings() {
                                                                     <span style={{ fontWeight: 500, fontSize: '13px' }}>{tool.name}</span>
                                                                     <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>{tool.description?.slice(0, 80)}</div>
                                                                 </div>
-                                                                <button className="btn btn-secondary" style={{ padding: '4px 10px', fontSize: '11px' }} onClick={async () => {
-                                                                    try {
-                                                                        const serverName = mcpForm.server_name || mcpForm.server_url;
-                                                                        await fetchJson('/tools', {
-                                                                            method: 'POST', body: JSON.stringify({
-                                                                                name: `mcp_${tool.name}`,
-                                                                                display_name: tool.name,
-                                                                                description: tool.description || '',
-                                                                                type: 'mcp',
-                                                                                category: 'custom',
-                                                                                icon: '·',
-                                                                                mcp_server_url: mcpForm.server_url,
-                                                                                mcp_server_name: serverName,
-                                                                                mcp_tool_name: tool.name,
-                                                                                parameters_schema: tool.inputSchema || {},
-                                                                                is_default: false,
-                                                                                tenant_id: selectedTenantId || undefined,
-                                                                            })
-                                                                        });
-                                                                        // Store API key on all tools from this server after creation
-                                                                        if (mcpForm.api_key) {
-                                                                            await fetchJson('/tools/mcp-server', { method: 'PUT', body: JSON.stringify({ server_name: serverName, server_url: mcpForm.server_url, api_key: mcpForm.api_key, tenant_id: selectedTenantId || undefined }) }).catch(() => {});
-                                                                        }
-                                                                        await loadAllTools();
-                                                                    } catch (e: any) {
-                                                                        await dialog.alert(t('enterprise.tools.importFailed') || '导入失败', { type: 'error', details: String(e?.message || e) });
-                                                                    }
-                                                                }}>{t('enterprise.tools.import') || 'Import'}</button>
+                                                                <button className="btn btn-primary" style={{ padding: '4px 10px', fontSize: '11px' }} onClick={async () => {
+                                                                    await fetchJson('/tools', {
+                                                                        method: 'POST', body: JSON.stringify({
+                                                                            name: `mcp_${tool.name}`,
+                                                                            display_name: tool.name,
+                                                                            description: tool.description || '',
+                                                                            type: 'mcp',
+                                                                            category: 'custom',
+                                                                            icon: '·',
+                                                                            mcp_server_url: mcpForm.server_url,
+                                                                            mcp_server_name: mcpForm.server_name || mcpForm.server_url,
+                                                                            mcp_tool_name: tool.name,
+                                                                            parameters_schema: tool.inputSchema || {},
+                                                                            is_default: false,
+                                                                        })
+                                                                    });
+                                                                    loadAllTools();
+                                                                    setShowAddMCP(false); setMcpTestResult(null); setMcpForm({ server_url: '', server_name: '' }); setMcpRawInput('');
+                                                                }}>{t('enterprise.tools.importAll')}</button>
                                                             </div>
                                                         ))}
-                                                        <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
-                                                            <button className="btn btn-primary" style={{ padding: '6px 14px', fontSize: '12px' }} onClick={async () => {
-                                                                const tools = mcpTestResult.tools || [];
-                                                                let successCount = 0;
-                                                                const errors: string[] = [];
-                                                                const serverName = mcpForm.server_name || mcpForm.server_url;
-                                                                for (const tool of tools) {
-                                                                    try {
-                                                                        await fetchJson('/tools', {
-                                                                            method: 'POST', body: JSON.stringify({
-                                                                                name: `mcp_${tool.name}`,
-                                                                                display_name: tool.name,
-                                                                                description: tool.description || '',
-                                                                                type: 'mcp',
-                                                                                category: 'custom',
-                                                                                icon: '·',
-                                                                                mcp_server_url: mcpForm.server_url,
-                                                                                mcp_server_name: serverName,
-                                                                                mcp_tool_name: tool.name,
-                                                                                parameters_schema: tool.inputSchema || {},
-                                                                                is_default: false,
-                                                                                tenant_id: selectedTenantId || undefined,
-                                                                            })
-                                                                        });
-                                                                        successCount++;
-                                                                    } catch (e: any) {
-                                                                        errors.push(`${tool.name}: ${e.message}`);
-                                                                    }
-                                                                }
-                                                                // Store API key on all tools from this server in one request
-                                                                if (mcpForm.api_key && successCount > 0) {
-                                                                    await fetchJson('/tools/mcp-server', { method: 'PUT', body: JSON.stringify({ server_name: serverName, server_url: mcpForm.server_url, api_key: mcpForm.api_key, tenant_id: selectedTenantId || undefined }) }).catch(() => {});
-                                                                }
-                                                                await loadAllTools();
-                                                                setShowAddMCP(false); setMcpTestResult(null); setMcpForm({ server_url: '', server_name: '', api_key: '' }); setMcpRawInput('');
-                                                                if (errors.length > 0) {
-                                                                    await dialog.alert(`已导入 ${successCount}/${tools.length} 个工具`, { type: 'warning', title: '部分导入失败', details: errors.join('\n') });
-                                                                } else if (successCount > 0) {
-                                                                    toast.success(`已导入 ${successCount} 个工具`);
-                                                                }
-                                                            }}>{t('enterprise.tools.importAll')}</button>
-                                                        </div>
                                                     </div>
                                                 ) : (
                                                     <div style={{ color: 'var(--danger)' }}>{t('enterprise.tools.connectionFailed')}: {mcpTestResult.error}</div>
@@ -1093,501 +1486,132 @@ export default function EnterpriseSettings() {
                                 </div>
                             )}
 
-                            {/* ─── Category-grouped tool list ─── */}
-                            {(() => {
-                                const normalizedSearch = toolSearch.trim().toLowerCase();
-                                const matchesSearch = (tool: any) => {
-                                    if (!normalizedSearch) return true;
-                                    const category = tool.category || 'general';
-                                    const haystack = [
-                                        tool.name,
-                                        tool.display_name,
-                                        tool.description,
-                                        tool.mcp_server_name,
-                                        category,
-                                        categoryLabels[category],
-                                    ].filter(Boolean).join(' ').toLowerCase();
-                                    return haystack.includes(normalizedSearch);
-                                };
-                                const matchesStatus = (tool: any) => {
-                                    if (toolStatusFilter === 'enabled') return !!tool.enabled;
-                                    if (toolStatusFilter === 'disabled') return !tool.enabled;
-                                    if (toolStatusFilter === 'default') return !!tool.is_default;
-                                    if (toolStatusFilter === 'configured') return hasMeaningfulConfig(tool.config);
-                                    return true;
-                                };
-                                const filteredTools = allTools.filter(tool => matchesSearch(tool) && matchesStatus(tool));
-                                const groupTools = (toolList: any[]) => toolList.reduce((acc: Record<string, any[]>, tool: any) => {
-                                    const cat = mcpToolGroupKey(tool);
-                                    (acc[cat] = acc[cat] || []).push(tool);
-                                    return acc;
-                                }, {} as Record<string, any[]>);
-                                const grouped = groupTools(filteredTools);
-                                const allGrouped = groupTools(allTools);
-                                const hasFilters = !!normalizedSearch || toolStatusFilter !== 'all';
-
-                                const toggleCategoryExpanded = (category: string) => {
-                                    setExpandedToolCategories(prev => {
-                                        const next = new Set(prev);
-                                        if (next.has(category)) next.delete(category);
-                                        else next.add(category);
-                                        return next;
-                                    });
-                                };
-
-                                const bulkToggle = async (tools: any[], enabled: boolean) => {
-                                    try {
-                                        const payload = tools.map(t => ({ tool_id: t.id, enabled }));
-                                        await fetchJson('/tools/bulk', { method: 'PUT', body: JSON.stringify(payload) });
-                                        loadAllTools();
-                                    } catch (err: any) {
-                                        toast.error('批量更新失败', { details: String(err?.message || err) });
-                                    }
-                                };
-
-                                const renderToolRow = (tool: any, category: string, idx: number, total: number) => {
-                                    const hasCategoryConfig = !!GLOBAL_CATEGORY_CONFIG_SCHEMAS[category];
-                                    const hasOwnConfig = tool.config_schema?.fields?.length > 0 && !hasCategoryConfig;
-                                    const isConfigured = hasMeaningfulConfig(tool.config);
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                                {allTools.map((tool: any) => {
+                                    const hasConfig = tool.config_schema?.fields?.length > 0;
+                                    const isEditing = editingToolId === tool.id;
                                     return (
-                                        <div key={tool.id} style={{
-                                            display: 'grid',
-                                            gridTemplateColumns: 'minmax(0, 1fr) auto',
-                                            alignItems: 'center',
-                                            gap: '12px',
-                                            padding: '10px 14px',
-                                            borderTop: idx === 0 ? '1px solid var(--border-subtle)' : 'none',
-                                            borderBottom: idx < total - 1 ? '1px solid var(--border-subtle)' : 'none',
-                                            background: 'var(--bg-primary)',
-                                        }}>
-                                            <div style={{ minWidth: 0 }}>
-                                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', minWidth: 0, flexWrap: 'wrap' }}>
-                                                    <span style={{ fontWeight: 500, fontSize: '13px', color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tool.display_name}</span>
-                                                    <span style={{ fontSize: '10px', background: tool.type === 'mcp' ? 'var(--primary)' : 'var(--bg-tertiary)', color: tool.type === 'mcp' ? '#fff' : 'var(--text-secondary)', borderRadius: '4px', padding: '1px 5px', flexShrink: 0 }}>
-                                                        {tool.type === 'mcp' ? 'MCP' : 'Built-in'}
-                                                    </span>
-                                                    {tool.is_default && <span style={{ fontSize: '10px', background: 'rgba(0,200,100,0.15)', color: 'var(--success)', borderRadius: '4px', padding: '1px 5px', flexShrink: 0 }}>Default</span>}
-                                                    {isConfigured && <span style={{ fontSize: '10px', background: 'rgba(99,102,241,0.15)', color: 'var(--accent-color)', borderRadius: '4px', padding: '1px 5px', flexShrink: 0 }}>{t('enterprise.tools.configured', 'Configured')}</span>}
-                                                </div>
-                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                                    {tool.description}
-                                                    {tool.mcp_server_name && <span> · {tool.mcp_server_name}</span>}
-                                                </div>
-                                            </div>
-                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 }}>
-                                                {tool.type === 'mcp' && tool.mcp_server_name && (
-                                                    <button
-                                                        style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-subtle)', borderRadius: '6px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', color: 'var(--text-secondary)' }}
-                                                        onClick={() => setEditingMcpServer({
-                                                            server_name: tool.mcp_server_name,
-                                                            server_url: tool.mcp_server_url || '',
-                                                            api_key: '',
-                                                        })}
-                                                    >
-                                                        Edit Server
-                                                    </button>
-                                                )}
-                                                {hasOwnConfig && (
-                                                    <button
-                                                        style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-subtle)', borderRadius: '6px', padding: '3px 8px', fontSize: '11px', cursor: 'pointer', color: 'var(--text-secondary)' }}
-                                                        title={t('enterprise.tools.configureSettings', 'Configure settings')}
-                                                        onClick={async () => {
-                                                            setEditingToolId(tool.id);
-                                                            setShowAdvancedToolConfig(false);
-                                                            let cfg = applyConfigDefaults(tool.config_schema?.fields || [], tool.config || {});
-                                                            if (tool.name === 'jina_search' || tool.name === 'jina_read') {
-                                                                try {
-                                                                    const token = localStorage.getItem('token');
-                                                                    const res = await fetch('/api/enterprise/system-settings/jina_api_key', { headers: { Authorization: `Bearer ${token}` } });
-                                                                    const d = await res.json();
-                                                                    if (d.value?.api_key) cfg.api_key = d.value.api_key;
-                                                                } catch { }
-                                                            }
-                                                            setEditingConfig(cfg);
-                                                        }}
-                                                    >
-                                                        {t('enterprise.tools.configure')}
-                                                    </button>
-                                                )}
-                                                {tool.type !== 'builtin' && (
-                                                    <button className="btn btn-danger" style={{ padding: '4px 8px', fontSize: '11px' }} onClick={async () => {
-                                                        const ok = await dialog.confirm(`确定删除 ${tool.display_name}？`, { title: '删除工具', danger: true, confirmLabel: '删除' });
-                                                        if (!ok) return;
-                                                        await fetchJson(`/tools/${tool.id}`, { method: 'DELETE' });
-                                                        loadAllTools();
-                                                        loadAgentInstalledTools();
-                                                    }}>{t('common.delete')}</button>
-                                                )}
-                                                <label style={{ position: 'relative', display: 'inline-block', width: '40px', height: '22px', cursor: 'pointer', flexShrink: 0 }}>
-                                                    <input type="checkbox" checked={tool.enabled} onChange={async (e) => {
-                                                        await fetchJson(`/tools/${tool.id}`, { method: 'PUT', body: JSON.stringify({ enabled: e.target.checked }) });
-                                                        loadAllTools();
-                                                    }} style={{ opacity: 0, width: 0, height: 0 }} />
-                                                    <span style={switchTrack(tool.enabled)}>
-                                                        <span style={switchKnob(tool.enabled)} />
-                                                    </span>
-                                                </label>
-                                            </div>
-                                        </div>
-                                    );
-                                };
-
-                                if (allTools.length === 0) {
-                                    return <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-tertiary)' }}>{t('enterprise.tools.emptyState')}</div>;
-                                }
-                                if (filteredTools.length === 0) {
-                                    return (
-                                        <>
-                                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', marginBottom: '16px' }}>
-                                                <div style={{ position: 'relative', flex: '1 1 260px', minWidth: '220px' }}>
-                                                    <IconSearch size={15} style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-tertiary)' }} />
-                                                    <input value={toolSearch} onChange={(e) => setToolSearch(e.target.value)} placeholder={t('agent.tools.searchTools', 'Search tools...')} style={{ width: '100%', boxSizing: 'border-box', border: '1px solid var(--border-subtle)', borderRadius: '8px', background: 'var(--bg-primary)', color: 'var(--text-primary)', padding: '8px 10px 8px 32px', fontSize: '13px', outline: 'none' }} />
-                                                </div>
-                                            </div>
-                                            <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-tertiary)' }}>{hasFilters ? t('agent.tools.noMatchingTools', 'No matching tools') : t('enterprise.tools.emptyState')}</div>
-                                        </>
-                                    );
-                                }
-
-                                return (
-                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-                                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
-                                            <div style={{ position: 'relative', flex: '1 1 260px', minWidth: '220px' }}>
-                                                <IconSearch size={15} style={{ position: 'absolute', left: '10px', top: '50%', transform: 'translateY(-50%)', color: 'var(--text-tertiary)' }} />
-                                                <input value={toolSearch} onChange={(e) => setToolSearch(e.target.value)} placeholder={t('agent.tools.searchTools', 'Search tools...')} style={{ width: '100%', boxSizing: 'border-box', border: '1px solid var(--border-subtle)', borderRadius: '8px', background: 'var(--bg-primary)', color: 'var(--text-primary)', padding: '8px 10px 8px 32px', fontSize: '13px', outline: 'none' }} />
-                                            </div>
-                                            {(['all', 'enabled', 'disabled', 'default', 'configured'] as const).map(filter => (
-                                                <button key={filter} type="button" onClick={() => setToolStatusFilter(filter)} style={{ border: '1px solid var(--border-subtle)', borderRadius: '999px', background: toolStatusFilter === filter ? 'var(--text-primary)' : 'var(--bg-primary)', color: toolStatusFilter === filter ? 'var(--bg-primary)' : 'var(--text-secondary)', padding: '6px 10px', fontSize: '11px', cursor: 'pointer' }}>
-                                                    {filter === 'all' ? t('common.all', 'All')
-                                                        : filter === 'enabled' ? t('common.enabled', 'Enabled')
-                                                            : filter === 'disabled' ? t('common.disabled', 'Disabled')
-                                                                : filter === 'default' ? 'Default'
-                                                                    : t('agent.tools.configured', 'Configured')}
-                                                </button>
-                                            ))}
-                                            <button type="button" onClick={() => {
-                                                const categories = Object.keys(allGrouped);
-                                                setExpandedToolCategories(prev => prev.size >= categories.length ? new Set() : new Set(categories));
-                                            }} style={{ border: '1px solid var(--border-subtle)', borderRadius: '8px', background: 'var(--bg-primary)', color: 'var(--text-secondary)', padding: '6px 10px', fontSize: '11px', cursor: 'pointer' }}>
-                                                {expandedToolCategories.size >= Object.keys(allGrouped).length ? t('agent.tools.collapseAll', 'Collapse all') : t('agent.tools.expandAll', 'Expand all')}
-                                            </button>
-                                        </div>
-
-                                        {Object.entries(grouped)
-                                            .sort(([a, aTools], [b, bTools]) => {
-                                                const aMeta = getToolGroupMeta(a, allGrouped[a] || aTools as any[]);
-                                                const bMeta = getToolGroupMeta(b, allGrouped[b] || bTools as any[]);
-                                                return aMeta.label.localeCompare(bMeta.label);
-                                            })
-                                            .map(([category, catTools]) => {
-                                            const allCatTools = allGrouped[category] || catTools;
-                                            const meta = getToolGroupMeta(category, allCatTools);
-                                            const hasCategoryConfig = !!GLOBAL_CATEGORY_CONFIG_SCHEMAS[meta.configCategory];
-                                            const label = meta.label;
-                                            const enabledCount = allCatTools.filter((tool: any) => tool.enabled).length;
-                                            const defaultCount = allCatTools.filter((tool: any) => tool.is_default).length;
-                                            const configuredCount = allCatTools.filter((tool: any) => hasMeaningfulConfig(tool.config)).length;
-                                            const allEnabled = allCatTools.length > 0 && enabledCount === allCatTools.length;
-                                            const mixed = enabledCount > 0 && enabledCount < allCatTools.length;
-                                            const expanded = expandedToolCategories.has(category) || !!toolSearch.trim();
-                                            const visibleCount = (catTools as any[]).length;
-
-                                            return (
-                                                <div key={category} style={{ border: '1px solid var(--border-subtle)', borderRadius: '8px', overflow: 'hidden', background: 'var(--bg-primary)' }}>
-                                                    <div role="button" tabIndex={0} onClick={() => toggleCategoryExpanded(category)} onKeyDown={(e) => {
-                                                        if (e.key === 'Enter' || e.key === ' ') {
-                                                            e.preventDefault();
-                                                            toggleCategoryExpanded(category);
-                                                        }
-                                                    }} style={{ width: '100%', background: 'var(--bg-secondary)', padding: '13px 16px', display: 'grid', gridTemplateColumns: '1fr auto', gap: '14px', alignItems: 'center', cursor: 'pointer', textAlign: 'left', boxSizing: 'border-box' }}>
-                                                        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0 }}>
-                                                            <IconChevronDown size={16} style={{ transform: expanded ? 'rotate(0deg)' : 'rotate(-90deg)', transition: 'transform 120ms ease', color: 'var(--text-tertiary)', flexShrink: 0 }} />
-                                                            <span style={{ width: '28px', height: '28px', borderRadius: '7px', border: '1px solid var(--border-subtle)', background: 'var(--bg-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{renderCategoryIcon(meta.iconCategory, 16)}</span>
-                                                            <div style={{ minWidth: 0 }}>
-                                                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
-                                                                    <span style={{ fontSize: '13px', fontWeight: 650, color: 'var(--text-primary)' }}>{label}</span>
-                                                                    <span style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
-                                                                        {allCatTools.length} tools · {enabledCount} enabled
-                                                                        {defaultCount > 0 ? ` · ${defaultCount} default` : ''}
-                                                                        {visibleCount !== allCatTools.length ? ` · ${visibleCount} shown` : ''}
-                                                                    </span>
-                                                                    {configuredCount > 0 && <span style={{ fontSize: '10px', background: 'rgba(99,102,241,0.15)', color: 'var(--accent-color)', borderRadius: '4px', padding: '1px 5px' }}>{configuredCount} configured</span>}
-                                                                </div>
-                                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{meta.description}</div>
-                                                            </div>
+                                        <div key={tool.id} className="card" style={{ padding: '0', overflow: 'hidden' }}>
+                                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px' }}>
+                                                <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flex: 1 }}>
+                                                    <span style={{ fontSize: '20px' }}>{tool.icon}</span>
+                                                    <div>
+                                                        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                                                            <span style={{ fontWeight: 500, fontSize: '13px' }}>{tool.display_name}</span>
+                                                            <span style={{ fontSize: '10px', background: tool.type === 'mcp' ? 'var(--primary)' : 'var(--bg-tertiary)', color: tool.type === 'mcp' ? '#fff' : 'var(--text-secondary)', borderRadius: '4px', padding: '1px 5px' }}>
+                                                                {tool.type === 'mcp' ? 'MCP' : 'Built-in'}
+                                                            </span>
+                                                            {tool.is_default && <span style={{ fontSize: '10px', background: 'rgba(0,200,100,0.15)', color: 'var(--success)', borderRadius: '4px', padding: '1px 5px' }}>Default</span>}
                                                         </div>
-                                                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }} onClick={(e) => e.stopPropagation()}>
-                                                            {hasCategoryConfig && (
-                                                                <button onClick={() => {
-                                                                    setConfigCategory(meta.configCategory);
-                                                                    setEditingConfig({});
-                                                                    const firstToolWithConfig = (allCatTools as any[]).find((tl: any) => tl.category === meta.configCategory && hasMeaningfulConfig(tl.config));
-                                                                    if (firstToolWithConfig?.config) setEditingConfig({ ...firstToolWithConfig.config });
-                                                                }} style={{ background: 'var(--bg-primary)', border: '1px solid var(--border-subtle)', borderRadius: '6px', padding: '4px 8px', fontSize: '11px', cursor: 'pointer', color: 'var(--text-secondary)' }} title={`Configure ${label}`}>
-                                                                    {t('enterprise.tools.configure', 'Configure')}
-                                                                </button>
-                                                            )}
-                                                            <label style={{ position: 'relative', display: 'inline-block', width: '40px', height: '22px', cursor: 'pointer', flexShrink: 0 }} title={`Enable/Disable all ${label} tools`}>
-                                                                <input type="checkbox" checked={allEnabled} onChange={(e) => void bulkToggle(allCatTools, e.target.checked)} style={{ opacity: 0, width: 0, height: 0 }} />
-                                                                <span style={switchTrack(allEnabled, mixed)}>
-                                                                    <span style={switchKnob(allEnabled)} />
-                                                                </span>
-                                                            </label>
+                                                        <div style={{ fontSize: '11px', color: 'var(--text-tertiary)' }}>
+                                                            {tool.description?.slice(0, 60)}
+                                                            {tool.mcp_server_name && <span> · {tool.mcp_server_name}</span>}
                                                         </div>
                                                     </div>
-                                                    {expanded && (
-                                                        <div>
-                                                            {(catTools as any[]).map((tool: any, idx: number) => renderToolRow(tool, category, idx, (catTools as any[]).length))}
-                                                        </div>
+                                                </div>
+                                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                                    {hasConfig && (
+                                                        <button className="btn btn-secondary" style={{ padding: '4px 8px', fontSize: '11px' }} onClick={async () => {
+                                                            if (isEditing) {
+                                                                setEditingToolId(null);
+                                                            } else {
+                                                                setEditingToolId(tool.id);
+                                                                const cfg = { ...tool.config };
+                                                                // Pre-load jina api_key from system_settings
+                                                                if (tool.name === 'jina_search' || tool.name === 'jina_read') {
+                                                                    try {
+                                                                        const token = localStorage.getItem('token');
+                                                                        const res = await fetch('/api/enterprise/system-settings/jina_api_key', { headers: { Authorization: `Bearer ${token}` } });
+                                                                        const d = await res.json();
+                                                                        if (d.value?.api_key) cfg.api_key = d.value.api_key;
+                                                                    } catch { }
+                                                                }
+                                                                setEditingConfig(cfg);
+                                                            }
+                                                        }}>{isEditing ? t('enterprise.tools.collapse') : t('enterprise.tools.configure')}</button>
                                                     )}
+                                                    {tool.type !== 'builtin' && (
+                                                        <button className="btn btn-danger" style={{ padding: '4px 8px', fontSize: '11px' }} onClick={async () => {
+                                                            if (!confirm(`${t('common.delete')} ${tool.display_name}?`)) return;
+                                                            await fetchJson(`/tools/${tool.id}`, { method: 'DELETE' });
+                                                            loadAllTools();
+                                                            loadAgentInstalledTools(); // cross-refresh in case it was also in agent-installed
+                                                        }}>{t('common.delete')}</button>
+                                                    )}
+                                                    <label style={{ position: 'relative', display: 'inline-block', width: '40px', height: '22px', cursor: 'pointer' }}>
+                                                        <input type="checkbox" checked={tool.enabled} onChange={async (e) => {
+                                                            await fetchJson(`/tools/${tool.id}`, { method: 'PUT', body: JSON.stringify({ enabled: e.target.checked }) });
+                                                            loadAllTools();
+                                                        }} style={{ opacity: 0, width: 0, height: 0 }} />
+                                                        <span style={{ position: 'absolute', inset: 0, background: tool.enabled ? '#22c55e' : 'var(--bg-tertiary)', borderRadius: '11px', transition: 'background 0.2s' }}>
+                                                            <span style={{ position: 'absolute', left: tool.enabled ? '20px' : '2px', top: '2px', width: '18px', height: '18px', background: '#fff', borderRadius: '50%', transition: 'left 0.2s' }} />
+                                                        </span>
+                                                    </label>
                                                 </div>
-                                            );
-                                        })}
-                                    </div>
-                                );
-                            })()}
-
-                            {/* ─── Edit MCP Server Modal ─── */}
-                            {editingMcpServer && (
-                                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.55)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-                                    onClick={e => { if (e.target === e.currentTarget) setEditingMcpServer(null); }}>
-                                    <div className="card" style={{ width: '480px', maxWidth: '95vw', padding: '24px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
-                                        <h3 style={{ margin: 0, fontSize: '15px' }}>Edit MCP Server</h3>
-                                        <div style={{ fontSize: '12px', color: 'var(--text-secondary)', background: 'var(--bg-tertiary)', padding: '6px 10px', borderRadius: '6px' }}>
-                                            <strong>{editingMcpServer.server_name}</strong>
-                                            <span style={{ marginLeft: '8px', color: 'var(--text-tertiary)' }}>Updates all tools from this server at once</span>
-                                        </div>
-
-                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                                            <div>
-                                                <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px' }}>Server URL</label>
-                                                <input
-                                                    type="password"
-                                                    className="form-input"
-                                                    value={editingMcpServer.server_url}
-                                                    onChange={e => setEditingMcpServer(s => s ? { ...s, server_url: e.target.value } : null)}
-                                                    placeholder="https://mcp.example.com/sse"
-                                                    autoComplete="off"
-                                                />
-                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '3px' }}>Stored encrypted. For URL-embedded keys (e.g. Tavily), include the key directly here.</div>
-                                            </div>
-                                            <div>
-                                                <label style={{ display: 'block', fontSize: '12px', marginBottom: '4px' }}>
-                                                    API Key <span style={{ color: 'var(--text-tertiary)', fontWeight: 400 }}>(optional)</span>
-                                                </label>
-                                                <input
-                                                    type="password"
-                                                    className="form-input"
-                                                    value={editingMcpServer.api_key}
-                                                    onChange={e => setEditingMcpServer(s => s ? { ...s, api_key: e.target.value } : null)}
-                                                    placeholder="Leave blank to keep existing key"
-                                                    autoComplete="new-password"
-                                                />
-                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '3px' }}>Sent as <code style={{ background: 'rgba(0,0,0,0.06)', padding: '0 3px', borderRadius: '3px' }}>Authorization: Bearer ...</code> Takes priority over URL-embedded keys.</div>
-                                            </div>
-
-                                            {/* Auth explanation */}
-                                            <div style={{ padding: '10px 12px', background: 'rgba(99,102,241,0.06)', border: '1px solid rgba(99,102,241,0.18)', borderRadius: '6px', fontSize: '11px', color: 'var(--text-secondary)', lineHeight: '1.65' }}>
-                                                <div style={{ fontWeight: 600, marginBottom: '4px', color: 'var(--text-primary)' }}>How authentication works</div>
-                                                <div>- <strong>URL-embedded key</strong> (e.g. Tavily <code style={{ background: 'rgba(0,0,0,0.06)', padding: '0 3px', borderRadius: '3px' }}>?tavilyApiKey=xxx</code>): include in Server URL above, leave API Key blank.</div>
-                                                <div>- <strong>Bearer token</strong> auth: enter in the API Key field. It is injected as an HTTP header on every request — the URL stays clean.</div>
-                                                <div>- If both are present, the API Key field takes priority over any URL-embedded value.</div>
                                             </div>
-                                        </div>
-
-                                        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
-                                            <button className="btn btn-secondary" onClick={() => setEditingMcpServer(null)} disabled={mcpServerSaving}>Cancel</button>
-                                            <button className="btn btn-primary" disabled={mcpServerSaving || !editingMcpServer.server_url} onClick={async () => {
-                                                setMcpServerSaving(true);
-                                                try {
-                                                    await fetchJson('/tools/mcp-server', {
-                                                        method: 'PUT',
-                                                        body: JSON.stringify({
-                                                            server_name: editingMcpServer.server_name,
-                                                            server_url: editingMcpServer.server_url,
-                                                            // Only send api_key if the user typed something; null = keep existing
-                                                            api_key: editingMcpServer.api_key || undefined,
-                                                            tenant_id: selectedTenantId || undefined,
-                                                        })
-                                                    });
-                                                    await loadAllTools();
-                                                    setEditingMcpServer(null);
-                                                } catch (e: any) {
-                                                    toast.error('更新服务器失败', { details: String(e?.message || e) });
-                                                }
-                                                setMcpServerSaving(false);
-                                            }}>{mcpServerSaving ? 'Saving...' : 'Save Changes'}</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            )}
 
-                            {/* Per-Tool Config Modal */}
-                            {editingToolId && (() => {
-                                const tool = allTools.find(t => t.id === editingToolId);
-                                if (!tool) return null;
-                                const visibleFields = (tool.config_schema.fields || []).filter((field: any) => {
-                                    if (field.depends_on) {
-                                        return Object.entries(field.depends_on).every(([k, vals]: [string, any]) =>
-                                            vals.includes(editingConfig[k])
-                                        );
-                                    }
-                                    return true;
-                                });
-                                const primaryFields = visibleFields.filter((field: any) => !field.advanced);
-                                const advancedFields = visibleFields.filter((field: any) => field.advanced);
-                                const renderField = (field: any) => (
-                                    <div key={field.key}>
-                                        <label style={{ display: 'block', fontSize: '12px', fontWeight: 500, marginBottom: '4px' }}>{field.label}</label>
-                                        {field.type === 'checkbox' ? (
-                                            <label style={{ position: 'relative', display: 'inline-block', width: '40px', height: '22px', cursor: 'pointer' }}>
-                                                <input
-                                                    type="checkbox"
-                                                    checked={editingConfig[field.key] ?? field.default ?? false}
-                                                    onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.checked }))}
-                                                    style={{ opacity: 0, width: 0, height: 0 }}
-                                                />
-                                                <span style={{
-                                                    position: 'absolute', inset: 0,
-                                                    background: (editingConfig[field.key] ?? field.default) ? 'var(--accent-primary)' : 'var(--bg-tertiary)',
-                                                    borderRadius: '11px', transition: 'background 0.2s',
-                                                }}>
-                                                    <span style={{
-                                                        position: 'absolute', left: (editingConfig[field.key] ?? field.default) ? '20px' : '2px', top: '2px',
-                                                        width: '18px', height: '18px', background: '#fff',
-                                                        borderRadius: '50%', transition: 'left 0.2s',
-                                                    }} />
-                                                </span>
-                                            </label>
-                                        ) : field.type === 'select' ? (
-                                            <select className="form-input" value={editingConfig[field.key] ?? field.default ?? ''} onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))}>
-                                                {(field.options || []).map((opt: any) => (
-                                                    <option key={opt.value} value={opt.value}>{opt.label}</option>
-                                                ))}
-                                            </select>
-                                        ) : field.type === 'number' ? (
-                                            <input type="number" className="form-input" value={editingConfig[field.key] ?? field.default ?? ''} min={field.min} max={field.max}
-                                                onChange={e => setEditingConfig(p => ({ ...p, [field.key]: Number(e.target.value) }))} />
-                                        ) : field.type === 'textarea' ? (
-                                            <textarea
-                                                className="form-input"
-                                                value={editingConfig[field.key] ?? field.default ?? ''}
-                                                placeholder={field.placeholder || ''}
-                                                rows={Math.max(3, Math.min(10, String(editingConfig[field.key] ?? field.default ?? field.placeholder ?? '').split('\n').length))}
-                                                style={{ minHeight: '88px', fontFamily: 'var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)', resize: 'vertical' }}
-                                                onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))}
-                                            />
-                                        ) : field.type === 'password' ? (
-                                            <input type="password" autoComplete="new-password" className="form-input" value={editingConfig[field.key] ?? ''} placeholder={field.placeholder || ''}
-                                                onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))} />
-                                        ) : (
-                                            <input type="text" className="form-input" value={editingConfig[field.key] ?? field.default ?? ''} placeholder={field.placeholder || ''}
-                                                onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))} />
-                                        )}
-                                    </div>
-                                );
-                                return (
-                                    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.55)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-                                        onClick={() => setEditingToolId(null)}>
-                                        <div onClick={e => e.stopPropagation()} style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', width: '480px', maxWidth: '95vw', maxHeight: '80vh', overflow: 'auto', boxShadow: '0 20px 60px rgba(0,0,0,0.4)' }}>
-                                            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-                                                <div>
-                                                    <h3 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '8px' }}><IconSettings size={20} stroke={1.8} /> {tool.display_name}</h3>
-                                                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>Global configuration used by all agents</div>
-                                                </div>
-                                                <button onClick={() => setEditingToolId(null)} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)' }}>✕</button>
-                                            </div>
-                                            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                                                {primaryFields.map(renderField)}
-                                                {advancedFields.length > 0 && (
-                                                    <div style={{ borderTop: '1px solid var(--border-subtle)', paddingTop: '10px', marginTop: '2px' }}>
-                                                        <button
-                                                            type="button"
-                                                            className="btn btn-ghost"
-                                                            onClick={() => setShowAdvancedToolConfig(v => !v)}
-                                                            style={{ padding: 0, minWidth: 'auto', fontSize: '12px', color: 'var(--text-secondary)' }}
-                                                        >
-                                                            {showAdvancedToolConfig ? 'Hide advanced settings' : 'Advanced settings'}
-                                                        </button>
-                                                        {showAdvancedToolConfig && (
-                                                            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '12px' }}>
-                                                                {advancedFields.map(renderField)}
-                                                            </div>
-                                                        )}
-                                                    </div>
-                                                )}
-                                                <div style={{ display: 'flex', gap: '8px', marginTop: '12px', justifyContent: 'flex-end', borderTop: '1px solid var(--border-subtle)', paddingTop: '16px' }}>
-                                                    <button className="btn btn-secondary" onClick={() => setEditingToolId(null)}>{t('common.cancel')}</button>
-                                                    <button className="btn btn-primary" onClick={async () => {
-                                                        if (tool.name === 'jina_search' || tool.name === 'jina_read') {
-                                                            if (editingConfig.api_key) {
-                                                                const token = localStorage.getItem('token');
-                                                                await fetch('/api/enterprise/system-settings/jina_api_key', {
-                                                                    method: 'PUT',
-                                                                    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-                                                                    body: JSON.stringify({ value: { api_key: editingConfig.api_key } }),
-                                                                });
+                                            {/* Config editing form */}
+                                            {isEditing && hasConfig && (
+                                                <div style={{ borderTop: '1px solid var(--border-color)', padding: '16px', background: 'var(--bg-secondary)' }}>
+                                                    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                                                        {(tool.config_schema.fields || []).map((field: any) => {
+                                                            // Check depends_on
+                                                            if (field.depends_on) {
+                                                                const visible = Object.entries(field.depends_on).every(([k, vals]: [string, any]) =>
+                                                                    vals.includes(editingConfig[k])
+                                                                );
+                                                                if (!visible) return null;
                                                             }
-                                                        } else {
-                                                            await fetchJson(`/tools/${tool.id}`, { method: 'PUT', body: JSON.stringify({ config: editingConfig, tenant_id: selectedTenantId || undefined }) });
-                                                        }
-                                                        setEditingToolId(null);
-                                                        loadAllTools();
-                                                    }}>{t('enterprise.tools.saveConfig')}</button>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })()}
-
-                            {/* Category-level config modal */}
-                            {configCategory && GLOBAL_CATEGORY_CONFIG_SCHEMAS[configCategory] && (
-                                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.55)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-                                    onClick={() => setConfigCategory(null)}>
-                                    <div onClick={e => e.stopPropagation()} style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', width: '480px', maxWidth: '95vw', maxHeight: '80vh', overflow: 'auto', boxShadow: '0 20px 60px rgba(0,0,0,0.4)' }}>
-                                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
-                                            <div>
-                                                <h3 style={{ margin: 0 }}>{GLOBAL_CATEGORY_CONFIG_SCHEMAS[configCategory].title}</h3>
-                                                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '2px' }}>Global configuration shared by all tools in this category</div>
-                                            </div>
-                                            <button onClick={() => setConfigCategory(null)} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)' }}>x</button>
-                                        </div>
-                                        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                                            {GLOBAL_CATEGORY_CONFIG_SCHEMAS[configCategory].fields.map((field: any) => (
-                                                <div key={field.key}>
-                                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 500, marginBottom: '4px' }}>{field.label}</label>
-                                                    {field.type === 'password' ? (
-                                                        <input type="password" autoComplete="new-password" className="form-input" value={editingConfig[field.key] ?? ''} placeholder={field.placeholder || ''}
-                                                            onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))} />
-                                                    ) : field.type === 'select' ? (
-                                                        <select className="form-input" value={editingConfig[field.key] ?? field.default ?? ''} onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))}>
-                                                            {(field.options || []).map((o: any) => <option key={o.value} value={o.value}>{o.label}</option>)}
-                                                        </select>
-                                                    ) : (
-                                                        <input type="text" className="form-input" value={editingConfig[field.key] ?? ''} placeholder={field.placeholder || ''}
-                                                            onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))} />
-                                                    )}
+                                                            return (
+                                                                <div key={field.key}>
+                                                                    <label style={{ display: 'block', fontSize: '12px', fontWeight: 500, marginBottom: '4px' }}>{field.label}</label>
+                                                                    {field.type === 'select' ? (
+                                                                        <select className="form-input" value={editingConfig[field.key] ?? field.default ?? ''} onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))}>
+                                                                            {(field.options || []).map((opt: any) => (
+                                                                                <option key={opt.value} value={opt.value}>{opt.label}</option>
+                                                                            ))}
+                                                                        </select>
+                                                                    ) : field.type === 'number' ? (
+                                                                        <input type="number" className="form-input" value={editingConfig[field.key] ?? field.default ?? ''} min={field.min} max={field.max}
+                                                                            onChange={e => setEditingConfig(p => ({ ...p, [field.key]: Number(e.target.value) }))} />
+                                                                    ) : field.type === 'password' ? (
+                                                                        <input type="password" className="form-input" value={editingConfig[field.key] ?? ''} placeholder={field.placeholder || ''}
+                                                                            onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))} />
+                                                                    ) : (
+                                                                        <input type="text" className="form-input" value={editingConfig[field.key] ?? field.default ?? ''} placeholder={field.placeholder || ''}
+                                                                            onChange={e => setEditingConfig(p => ({ ...p, [field.key]: e.target.value }))} />
+                                                                    )}
+                                                                </div>
+                                                            );
+                                                        })}
+                                                        <div style={{ display: 'flex', gap: '8px', marginTop: '4px' }}>
+                                                            <button className="btn btn-primary" onClick={async () => {
+                                                                if (tool.name === 'jina_search' || tool.name === 'jina_read') {
+                                                                    // Save api_key to system_settings (shared by both jina tools)
+                                                                    if (editingConfig.api_key) {
+                                                                        const token = localStorage.getItem('token');
+                                                                        await fetch('/api/enterprise/system-settings/jina_api_key', {
+                                                                            method: 'PUT',
+                                                                            headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+                                                                            body: JSON.stringify({ value: { api_key: editingConfig.api_key } }),
+                                                                        });
+                                                                    }
+                                                                } else {
+                                                                    await fetchJson(`/tools/${tool.id}`, { method: 'PUT', body: JSON.stringify({ config: editingConfig }) });
+                                                                }
+                                                                setEditingToolId(null);
+                                                                loadAllTools();
+                                                            }}>{t('enterprise.tools.saveConfig')}</button>
+                                                            <button className="btn btn-secondary" onClick={() => setEditingToolId(null)}>{t('common.cancel')}</button>
+                                                        </div>
+                                                    </div>
                                                 </div>
-                                            ))}
-                                            <div style={{ display: 'flex', gap: '8px', marginTop: '8px', justifyContent: 'flex-end' }}>
-                                                <button className="btn btn-secondary" onClick={() => setConfigCategory(null)}>{t('common.cancel')}</button>
-                                                <button className="btn btn-primary" onClick={async () => {
-                                                    // Save config to the category's runtime representative tool.
-                                                    const catTools = allTools.filter((tl: any) => (tl.category || 'general') === configCategory);
-                                                    const primaryToolName = GLOBAL_CATEGORY_CONFIG_PRIMARY_TOOL[configCategory];
-                                                    const representativeTool = catTools.find((tl: any) => tl.name === primaryToolName) || catTools[0];
-                                                    if (representativeTool) {
-                                                        await fetchJson(`/tools/${representativeTool.id}`, { method: 'PUT', body: JSON.stringify({ config: editingConfig, tenant_id: selectedTenantId || undefined }) });
-                                                    }
-                                                    setConfigCategory(null);
-                                                    loadAllTools();
-                                                }}>{t('common.save', 'Save')}</button>
-                                            </div>
+                                            )}
                                         </div>
-                                    </div>
-                                </div>
-                            )}
+                                    );
+                                })}
+                                {allTools.length === 0 && <div style={{ textAlign: 'center', padding: '40px', color: 'var(--text-tertiary)' }}>{t('enterprise.tools.emptyState')}</div>}
+                            </div>
                         </>}
                     </div>
                 )}
diff --git a/frontend/src/pages/Layout.tsx b/frontend/src/pages/Layout.tsx
index abb8cbb2b..a73bff9de 100644
--- a/frontend/src/pages/Layout.tsx
+++ b/frontend/src/pages/Layout.tsx
@@ -1,66 +1,74 @@
-import { useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import { Outlet, NavLink, useNavigate, useMatch, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useAuthStore } from '../stores';
-import { agentApi, tenantApi, authApi, onboardingApi } from '../services/api';
-import { useToast } from '../components/Toast/ToastProvider';
+import { agentApi } from '../services/api';
 
-import {
-    IconHome,
-    IconPlus,
-    IconSettings,
-    IconUser,
-    IconSun,
-    IconMoon,
-    IconLogout,
-    IconWorld,
-    IconChevronsLeft,
-    IconChevronsRight,
-    IconBell,
-    IconBuildingMonument,
-    IconSearch,
-    IconX,
-    IconPin,
-    IconPinnedOff,
-    IconArrowUpRight,
-    IconBuilding,
-    IconChevronUp,
-    IconChevronRight,
-    IconCheck,
-    IconChevronDown,
-} from '@tabler/icons-react';
-import { useAppStore } from '../stores';
-import TalentMarketModal from '../components/TalentMarketModal';
-
-/* ────── Tabler Icons ────── */
+/* ────── SVG Icons ────── */
 const SidebarIcons = {
-    home: <IconHome size={16} stroke={1.5} />,
-    plus: <IconPlus size={16} stroke={1.5} />,
-    settings: <IconSettings size={16} stroke={1.5} />,
-    user: <IconUser size={16} stroke={1.5} />,
-    sun: <IconSun size={16} stroke={1.5} />,
-    moon: <IconMoon size={16} stroke={1.5} />,
-    logout: <IconLogout size={16} stroke={1.5} />,
-    globe: <IconWorld size={16} stroke={1.5} />,
-    collapse: <IconChevronsLeft size={16} stroke={1.5} />,
-    expand: <IconChevronsRight size={16} stroke={1.5} />,
-    bell: <IconBell size={16} stroke={1.5} />,
+    home: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M2.5 6.5L8 2l5.5 4.5V13a1 1 0 01-1 1h-3V10H6.5v4h-3a1 1 0 01-1-1V6.5z" />
+        </svg>
+    ),
+    plus: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+            <path d="M8 3v10M3 8h10" />
+        </svg>
+    ),
+    settings: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="8" cy="8" r="2" />
+            <path d="M13.5 8a5.5 5.5 0 00-.3-1.8l1.3-1-1.2-2-1.5.6a5.5 5.5 0 00-1.6-.9L9.8 1.5H7.6l-.4 1.4a5.5 5.5 0 00-1.6.9L4 3.2 2.8 5.2l1.3 1A5.5 5.5 0 003.8 8c0 .6.1 1.2.3 1.8l-1.3 1 1.2 2 1.5-.6c.5.4 1 .7 1.6.9l.4 1.4h2.2l.4-1.4c.6-.2 1.1-.5 1.6-.9l1.5.6 1.2-2-1.3-1c.2-.6.3-1.2.3-1.8z" />
+        </svg>
+    ),
+    user: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="8" cy="5.5" r="2.5" />
+            <path d="M3 14v-1a4 4 0 018 0v1" />
+        </svg>
+    ),
+    sun: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+            <circle cx="8" cy="8" r="3" />
+            <path d="M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1" />
+        </svg>
+    ),
+    moon: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M13.5 8.5a5.5 5.5 0 01-8-4.5 5.5 5.5 0 003 10c2 0 3.8-1 4.8-2.7a4 4 0 01.2-2.8z" />
+        </svg>
+    ),
+    logout: (
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M6 14H3a1 1 0 01-1-1V3a1 1 0 011-1h3M11 11l3-3-3-3M14 8H6" />
+        </svg>
+    ),
+    globe: (
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="8" cy="8" r="6" />
+            <path d="M2 8h12M8 2a10 10 0 013 6 10 10 0 01-3 6 10 10 0 01-3-6 10 10 0 013-6z" />
+        </svg>
+    ),
+    collapse: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M15 18l-6-6 6-6" />
+        </svg>
+    ),
+    expand: (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M9 18l6-6-6-6" />
+        </svg>
+    ),
+    bell: (
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M4 6a4 4 0 018 0c0 2 1 3.5 1.5 4.5H2.5C3 9.5 4 8 4 6z" />
+            <path d="M6.5 12.5a1.5 1.5 0 003 0" />
+        </svg>
+    ),
 };
 
-/** UI locales: native endonym per row. */
-const APP_UI_LANGUAGES: { code: string; nativeLabel: string }[] = [
-    { code: 'zh', nativeLabel: '中文' },
-    { code: 'en', nativeLabel: 'English' },
-];
-
-function resolveUiLangCode(lang: string | undefined): string {
-    if (!lang) return 'en';
-    if (lang.startsWith('zh')) return 'zh';
-    return 'en';
-}
-
 const fetchJson = async <T,>(url: string): Promise<T> => {
     const token = localStorage.getItem('token');
     const res = await fetch(`/api${url}`, { headers: token ? { Authorization: `Bearer ${token}` } : {} });
@@ -81,25 +89,15 @@ const getAgentBadgeStatus = (agent: any): string | null => {
     return null;
 };
 
-const getWorkspaceAvatarTone = (name: string): number => {
-    let hash = 0;
-    for (const char of name) {
-        hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
-    }
-    return (hash % 6) + 1;
-};
-
 /* ────── Account Settings Modal ────── */
 function AccountSettingsModal({ user, onClose, isChinese }: { user: any; onClose: () => void; isChinese: boolean }) {
     const { setUser } = useAuthStore();
     const [username, setUsername] = useState(user?.username || '');
-    const [email, setEmail] = useState(user?.email || '');
     const [displayName, setDisplayName] = useState(user?.display_name || '');
     const [oldPassword, setOldPassword] = useState('');
     const [newPassword, setNewPassword] = useState('');
     const [confirmPassword, setConfirmPassword] = useState('');
     const [saving, setSaving] = useState(false);
-    const [resendingEmail, setResendingEmail] = useState(false);
     const [msg, setMsg] = useState('');
     const [msgType, setMsgType] = useState<'success' | 'error'>('success');
 
@@ -113,7 +111,6 @@ function AccountSettingsModal({ user, onClose, isChinese }: { user: any; onClose
             const token = localStorage.getItem('token');
             const body: any = {};
             if (username !== user?.username) body.username = username;
-            if (email !== user?.email) body.email = email;
             if (displayName !== user?.display_name) body.display_name = displayName;
             if (Object.keys(body).length === 0) { showMsg(isChinese ? '没有变更' : 'No changes', 'error'); setSaving(false); return; }
             const res = await fetch('/api/auth/me', {
@@ -129,21 +126,6 @@ function AccountSettingsModal({ user, onClose, isChinese }: { user: any; onClose
         setSaving(false);
     };
 
-    const handleResendVerification = async () => {
-        setResendingEmail(true);
-        try {
-            const token = localStorage.getItem('token');
-            const res = await fetch('/api/auth/resend-verification', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-                body: JSON.stringify({ email: user?.email }),
-            });
-            if (!res.ok) { const err = await res.json().catch(() => ({ detail: 'Failed' })); throw new Error(err.detail); }
-            showMsg(isChinese ? '验证邮件已发送，请查收' : 'Verification email sent. Please check your inbox.');
-        } catch (e: any) { showMsg(e.message || 'Failed', 'error'); }
-        setResendingEmail(false);
-    };
-
     const handleChangePassword = async () => {
         if (!oldPassword || !newPassword) { showMsg(isChinese ? '请填写所有密码字段' : 'Fill all password fields', 'error'); return; }
         if (newPassword.length < 6) { showMsg(isChinese ? '新密码至少 6 个字符' : 'Min 6 characters', 'error'); return; }
@@ -178,37 +160,6 @@ function AccountSettingsModal({ user, onClose, isChinese }: { user: any; onClose
                 <h4 style={{ margin: '0 0 12px', fontSize: '13px', color: 'var(--text-secondary)' }}>{isChinese ? '个人信息' : 'Profile'}</h4>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '20px' }}>
                     <div><label style={labelStyle}>{isChinese ? '用户名' : 'Username'}</label><input className="form-input" value={username} onChange={e => setUsername(e.target.value)} style={inputStyle} /></div>
-                    <div>
-                        <label style={labelStyle}>{isChinese ? '邮箱' : 'Email'}</label>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                            <input className="form-input" type="email" value={email} onChange={e => setEmail(e.target.value)} style={inputStyle} disabled />
-                            {user?.email_verified ? (
-                                <span style={{ color: '#16a34a', fontSize: '12px', whiteSpace: 'nowrap' }}>✓ {isChinese ? '已验证' : 'Verified'}</span>
-                            ) : (
-                                <button
-                                    onClick={handleResendVerification}
-                                    disabled={resendingEmail}
-                                    style={{
-                                        fontSize: '11px',
-                                        padding: '4px 8px',
-                                        borderRadius: '4px',
-                                        border: '1px solid var(--border-subtle)',
-                                        background: 'var(--bg-secondary)',
-                                        color: 'var(--text-secondary)',
-                                        cursor: resendingEmail ? 'not-allowed' : 'pointer',
-                                        whiteSpace: 'nowrap',
-                                    }}
-                                >
-                                    {resendingEmail ? '...' : (isChinese ? '发送验证' : 'Verify')}
-                                </button>
-                            )}
-                        </div>
-                        {!user?.email_verified && (
-                            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
-                                {isChinese ? '邮箱未验证，请点击按钮发送验证邮件' : 'Email not verified. Click button to send verification email.'}
-                            </div>
-                        )}
-                    </div>
                     <div><label style={labelStyle}>{isChinese ? '显示名称' : 'Display Name'}</label><input className="form-input" value={displayName} onChange={e => setDisplayName(e.target.value)} style={inputStyle} /></div>
                     <div style={{ display: 'flex', justifyContent: 'flex-end' }}><button className="btn btn-primary" onClick={handleSaveProfile} disabled={saving} style={{ padding: '6px 16px', fontSize: '12px' }}>{saving ? '...' : (isChinese ? '保存' : 'Save')}</button></div>
                 </div>
@@ -241,223 +192,16 @@ function VersionDisplay() {
     );
 }
 
-type CompanyTourStep = {
-    selector: string;
-    title: string;
-    body: string;
-    pad?: number;
-    radius?: number;
-};
-
-type TourRect = {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-    radius: number;
-};
-
-type TourCardPlacement = 'right' | 'left' | 'below' | 'above';
-
-const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), Math.max(min, max));
-
-function CompanyTourOverlay({ assistantId, isChinese, onDone }: { assistantId: string; isChinese: boolean; onDone: () => void }) {
-    const [step, setStep] = useState(0);
-    const [spotRect, setSpotRect] = useState<TourRect | null>(null);
-    const [cardPos, setCardPos] = useState<{ left: number; top: number; placement: TourCardPlacement }>({ left: 24, top: 24, placement: 'right' });
-    const steps: CompanyTourStep[] = useMemo(() => [
-        {
-            selector: '[data-tour-target="company-switcher"]',
-            title: isChinese ? '公司切换' : 'Company switcher',
-            body: isChinese ? '左上角是当前公司。你加入或创建更多公司后，可以在这里切换。' : 'The top-left area is your current company. Switch here when you join or create more companies.',
-            pad: 8,
-            radius: 14,
-        },
-        {
-            selector: '[data-tour-target="main-nav"]',
-            title: isChinese ? '三个主要功能' : 'Three main rooms',
-            body: isChinese ? 'Plaza 是公司广场，Dashboard 看公司概况，OKR 用来设定和追踪目标。' : 'Plaza is the company square, Dashboard shows company activity, and OKR tracks goals.',
-            pad: 8,
-            radius: 14,
-        },
-        {
-            selector: '[data-tour-target="agent-list"]',
-            title: isChinese ? '员工列表' : 'Employee list',
-            body: isChinese ? '这里是公司员工和你可见的 agent。你的私人助理也会在这里。' : 'This is the employee and agent list you can access. Your private assistant appears here too.',
-            pad: 8,
-            radius: 14,
-        },
-        {
-            selector: '[data-tour-target="hire-agent"]',
-            title: isChinese ? '新增员工' : 'Hire new employees',
-            body: isChinese ? '点击加号可以从 Talent Market 增加新的 agent 员工。' : 'Use the plus button to add new agent employees from the Talent Market.',
-            pad: 7,
-            radius: 10,
-        },
-    ], [isChinese]);
-    const current = steps[step];
-    const progress = `${step + 1} / ${steps.length}`;
-    const updateTourPosition = useCallback(() => {
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const viewportPad = 12;
-        const element = document.querySelector<HTMLElement>(current.selector);
-        const measuredRect = element?.getBoundingClientRect();
-        const fallbackWidth = Math.min(280, viewportWidth - viewportPad * 2);
-        const fallback = {
-            left: viewportPad,
-            top: Math.max(72, viewportHeight * 0.18),
-            width: fallbackWidth,
-            height: 52,
-        };
-        const sourceRect = measuredRect && measuredRect.width > 0 && measuredRect.height > 0 ? measuredRect : fallback;
-        const pad = current.pad ?? 8;
-        const nextSpot: TourRect = {
-            left: clamp(sourceRect.left - pad, viewportPad / 2, viewportWidth - viewportPad),
-            top: clamp(sourceRect.top - pad, viewportPad / 2, viewportHeight - viewportPad),
-            width: Math.min(sourceRect.width + pad * 2, viewportWidth - viewportPad),
-            height: Math.min(sourceRect.height + pad * 2, viewportHeight - viewportPad),
-            radius: current.radius ?? 14,
-        };
-        if (nextSpot.left + nextSpot.width > viewportWidth - viewportPad / 2) {
-            nextSpot.left = Math.max(viewportPad / 2, viewportWidth - viewportPad / 2 - nextSpot.width);
-        }
-        if (nextSpot.top + nextSpot.height > viewportHeight - viewportPad / 2) {
-            nextSpot.top = Math.max(viewportPad / 2, viewportHeight - viewportPad / 2 - nextSpot.height);
-        }
-
-        const cardWidth = Math.min(320, viewportWidth - viewportPad * 2);
-        const cardHeight = 220;
-        const gap = 20;
-        let placement: TourCardPlacement = 'right';
-        let cardLeft = nextSpot.left + nextSpot.width + gap;
-        let cardTop = nextSpot.top + Math.min(24, Math.max(0, nextSpot.height / 2 - 18));
-
-        if (cardLeft + cardWidth > viewportWidth - viewportPad) {
-            placement = 'left';
-            cardLeft = nextSpot.left - cardWidth - gap;
-        }
-        if (cardLeft < viewportPad) {
-            placement = 'below';
-            cardLeft = clamp(nextSpot.left, viewportPad, viewportWidth - cardWidth - viewportPad);
-            cardTop = nextSpot.top + nextSpot.height + gap;
-        }
-        if (cardTop + cardHeight > viewportHeight - 92) {
-            if (nextSpot.top - cardHeight - gap > viewportPad) {
-                placement = 'above';
-                cardTop = nextSpot.top - cardHeight - gap;
-                cardLeft = clamp(nextSpot.left, viewportPad, viewportWidth - cardWidth - viewportPad);
-            } else {
-                cardTop = clamp(cardTop, viewportPad, viewportHeight - cardHeight - 92);
-            }
-        }
-
-        setSpotRect(nextSpot);
-        setCardPos({
-            left: Math.round(clamp(cardLeft, viewportPad, viewportWidth - cardWidth - viewportPad)),
-            top: Math.round(clamp(cardTop, viewportPad, viewportHeight - cardHeight - viewportPad)),
-            placement,
-        });
-    }, [current]);
-
-    useLayoutEffect(() => {
-        updateTourPosition();
-        const raf = window.requestAnimationFrame(updateTourPosition);
-        window.addEventListener('resize', updateTourPosition);
-        window.addEventListener('scroll', updateTourPosition, true);
-        return () => {
-            window.cancelAnimationFrame(raf);
-            window.removeEventListener('resize', updateTourPosition);
-            window.removeEventListener('scroll', updateTourPosition, true);
-        };
-    }, [updateTourPosition]);
-
-    const next = () => {
-        if (step >= steps.length - 1) onDone();
-        else setStep(s => s + 1);
-    };
-    const previous = () => setStep(s => Math.max(0, s - 1));
-    return (
-        <div className="company-tour-overlay">
-            {spotRect && (
-                <div
-                    className="tour-spot"
-                    style={{
-                        left: spotRect.left,
-                        top: spotRect.top,
-                        width: spotRect.width,
-                        height: spotRect.height,
-                        borderRadius: spotRect.radius,
-                    }}
-                />
-            )}
-            <div
-                className={`company-tour-card company-tour-card--${cardPos.placement}`}
-                style={{ left: cardPos.left, top: cardPos.top }}
-            >
-                <div className="company-tour-step">{step + 1}</div>
-                <h3>{current.title}</h3>
-                <p>{current.body}</p>
-            </div>
-            <div className="company-tour-controls">
-                <button type="button" onClick={onDone}>{isChinese ? '跳过导览' : 'Skip tour'}</button>
-                <button type="button" onClick={previous} disabled={step === 0}>{isChinese ? '上一步' : 'Back'}</button>
-                <div className="company-tour-dots">
-                    {steps.map((_, i) => <span key={i} className={i === step ? 'active' : ''} />)}
-                </div>
-                <span>{progress}</span>
-                <button type="button" className="company-tour-next" onClick={next}>
-                    {step >= steps.length - 1 ? (isChinese ? '完成' : 'Finish') : (isChinese ? '下一个' : 'Next')} →
-                </button>
-            </div>
-            {assistantId && <div className="company-tour-hint">{isChinese ? '导览结束后，会进入你的私人助理对话页。' : 'After the tour, you will land in your private assistant chat.'}</div>}
-        </div>
-    );
-}
-
 export default function Layout() {
     const { t, i18n } = useTranslation();
-    const toast = useToast();
     const navigate = useNavigate();
-    const location = useLocation();
-    const { user, logout, setAuth } = useAuthStore();
+    const { user, logout } = useAuthStore();
     const queryClient = useQueryClient();
     const isChinese = i18n.language?.startsWith('zh');
-    // Detect chat page: needs fixed-height main-content for inner scroll to work
-    const isChatPage = !!useMatch('/agents/:id/chat');
-    const isAgentSettingsPage = !!useMatch('/agents/:id/settings');
-    const activeAgentNestedMatch = useMatch('/agents/:id/*');
-    const activeAgentRootMatch = useMatch('/agents/:id');
-    const activeAgentId = activeAgentNestedMatch?.params.id || activeAgentRootMatch?.params.id;
-    const canAccessPlatformSettings = user?.role === 'platform_admin' || !!(user as any)?.is_platform_admin;
-    const canAccessCompanySettings = user?.role === 'platform_admin' || user?.role === 'org_admin' || !!(user as any)?.is_platform_admin;
-    const routeParams = new URLSearchParams(location.search);
-    const showCompanyTour = routeParams.get('tour') === 'company';
-    const tourAssistantId = routeParams.get('assistantId') || '';
-
     const [showAccountSettings, setShowAccountSettings] = useState(false);
-    const [showAccountMenu, setShowAccountMenu] = useState(false);
-    const [showLanguageSubmenu, setShowLanguageSubmenu] = useState(false);
-    const [langSubmenuPos, setLangSubmenuPos] = useState({ top: 0, left: 0 });
-    const accountMenuRef = useRef<HTMLDivElement>(null);
-    const accountDropdownRef = useRef<HTMLDivElement>(null);
-    const langSubmenuPortalRef = useRef<HTMLDivElement>(null);
-    const langHoverCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const [showNotifications, setShowNotifications] = useState(false);
-    const [showTalentMarket, setShowTalentMarket] = useState(false);
     const [notifCategory, setNotifCategory] = useState<string>('all');
     const [selectedNotification, setSelectedNotification] = useState<any | null>(null);
-    const [showTenantMenu, setShowTenantMenu] = useState(false);
-    const [showTenantSetupModal, setShowTenantSetupModal] = useState(false);
-    const [tenantSearch, setTenantSearch] = useState('');
-    const [joinInviteCode, setJoinInviteCode] = useState('');
-    const [createCompanyName, setCreateCompanyName] = useState('');
-    const [tenantFormLoading, setTenantFormLoading] = useState(false);
-    const [tenantFormError, setTenantFormError] = useState('');
-    const [allowSelfCreate, setAllowSelfCreate] = useState(true);
-    const tenantSwitcherRef = useRef<HTMLDivElement>(null);
-    const tenantMenuPortalRef = useRef<HTMLDivElement>(null);
-    const [tenantMenuPos, setTenantMenuPos] = useState({ top: 0, left: 0, maxHeight: 520 });
 
     // Notification polling
     const { data: unreadCount = 0 } = useQuery({
@@ -469,7 +213,7 @@ export default function Layout() {
         refetchInterval: 30000,
         enabled: !!user,
     });
-    const { data: notifications = [] } = useQuery({
+    const { data: notifications = [], refetch: refetchNotifications } = useQuery({
         queryKey: ['notifications', notifCategory],
         queryFn: () => fetchJson<any[]>(`/notifications?limit=50${notifCategory !== 'all' ? `&category=${notifCategory}` : ''}`),
         enabled: !!user && showNotifications,
@@ -487,119 +231,9 @@ export default function Layout() {
         queryClient.invalidateQueries({ queryKey: ['notifications'] });
     };
 
-    // Tenant switching
-    const { data: myTenants = [] } = useQuery({
-        queryKey: ['my-tenants'],
-        queryFn: async () => {
-            const token = localStorage.getItem('token');
-            const res = await fetch('/api/auth/my-tenants', { headers: token ? { Authorization: `Bearer ${token}` } : {} });
-            if (!res.ok) return [];
-            return res.json();
-        },
-        enabled: !!user,
-    });
-
-    const handleSwitchTenant = async (tenantId: string) => {
-        const token = localStorage.getItem('token');
-        const res = await fetch('/api/auth/switch-tenant', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-            body: JSON.stringify({ tenant_id: tenantId }),
-        });
-        if (!res.ok) {
-            const err = await res.json().catch(() => ({ detail: 'Failed to switch tenant' }));
-            toast.error('切换公司失败', { details: String(err.detail || `HTTP ${res.status}`) });
-            return;
-        }
-        const data = await res.json();
-        if (data.redirect_url) {
-            localStorage.setItem('token', data.access_token);
-            const targetUrl = new URL(data.redirect_url, window.location.origin);
-            if (targetUrl.hostname === window.location.hostname) {
-                targetUrl.protocol = window.location.protocol;
-                targetUrl.port = window.location.port;
-            }
-            targetUrl.pathname = '/';
-            targetUrl.hash = '';
-            window.location.href = targetUrl.toString();
-        } else if (data.access_token) {
-            localStorage.setItem('token', data.access_token);
-            window.location.href = '/';
-        }
-    };
-
-    // Open the tenant switcher modal — also fetch self-create config
-    const openTenantModal = () => {
-        setShowTenantMenu(true);
-        setTenantSearch('');
-    };
-
-    const openTenantSetupModal = () => {
-        setShowTenantMenu(false);
-        setShowTenantSetupModal(true);
-        setJoinInviteCode('');
-        setCreateCompanyName('');
-        setTenantFormError('');
-        tenantApi.registrationConfig().then((d: any) => {
-            setAllowSelfCreate(d.allow_self_create_company);
-        }).catch(() => {});
-    };
-
-    // Join company via invite code (inside modal)
-    const handleModalJoin = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setTenantFormError('');
-        setTenantFormLoading(true);
-        try {
-            const result = await tenantApi.join(joinInviteCode);
-            if (result.access_token) {
-                // Multi-tenant: backend created a new User record, switch context
-                localStorage.setItem('token', result.access_token);
-            } else {
-                // Registration flow: same user updated, refresh store
-                const me = await authApi.me();
-                const token = localStorage.getItem('token');
-                if (token) setAuth(me, token);
-            }
-            setShowTenantMenu(false);
-            setShowTenantSetupModal(false);
-            window.location.href = '/onboarding?mode=join';
-        } catch (err: any) {
-            setTenantFormError(err.message || 'Failed to join company');
-        } finally {
-            setTenantFormLoading(false);
-        }
-    };
-
-    // Create company (inside modal)
-    const handleModalCreate = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setTenantFormError('');
-        setTenantFormLoading(true);
-        try {
-            const result = await tenantApi.selfCreate({ name: createCompanyName });
-            if (result.access_token) {
-                // Multi-tenant: backend created a new User record, switch context
-                localStorage.setItem('token', result.access_token);
-            } else {
-                // Registration flow: same user updated, refresh store
-                const me = await authApi.me();
-                const token = localStorage.getItem('token');
-                if (token) setAuth(me, token);
-            }
-            setShowTenantMenu(false);
-            setShowTenantSetupModal(false);
-            window.location.href = '/onboarding?mode=create';
-        } catch (err: any) {
-            setTenantFormError(err.message || 'Failed to create company');
-        } finally {
-            setTenantFormLoading(false);
-        }
-    };
-
     // Theme
     const [theme, setTheme] = useState<'dark' | 'light'>(() => {
-        return (localStorage.getItem('theme') as 'dark' | 'light') || 'light';
+        return (localStorage.getItem('theme') as 'dark' | 'light') || 'dark';
     });
 
     useEffect(() => {
@@ -610,13 +244,20 @@ export default function Layout() {
     const toggleTheme = () => setTheme(prev => prev === 'dark' ? 'light' : 'dark');
 
     // Sidebar collapse state
-    const isSidebarCollapsed = useAppStore(s => s.sidebarCollapsed);
-    const toggleSidebar = useAppStore(s => s.toggleSidebar);
+    const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(() => {
+        return localStorage.getItem('sidebar_collapsed') === 'true';
+    });
+
+    const toggleSidebar = () => {
+        setIsSidebarCollapsed(prev => {
+            const newState = !prev;
+            localStorage.setItem('sidebar_collapsed', String(newState));
+            return newState;
+        });
+    };
 
     // Sidebar agent search & pin
     const [sidebarSearch, setSidebarSearch] = useState('');
-    const [agentDrawerOpen, setAgentDrawerOpen] = useState(false);
-    const agentDrawerCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const [pinnedAgents, setPinnedAgents] = useState<Set<string>>(() => {
         try {
             const stored = localStorage.getItem('pinned_agents');
@@ -633,23 +274,23 @@ export default function Layout() {
         });
     };
 
+    // Mobile sidebar
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+    useEffect(() => {
+        const mq = window.matchMedia('(max-width: 768px)');
+        const handler = (e: MediaQueryListEvent | MediaQueryList) => {
+            if (!e.matches) setIsMobileMenuOpen(false);
+        };
+        handler(mq);
+        mq.addEventListener('change', handler);
+        return () => mq.removeEventListener('change', handler);
+    }, []);
+
+    const closeMobileMenu = () => setIsMobileMenuOpen(false);
+
     // Use user's own tenant_id directly (no switching)
     const currentTenant = user?.tenant_id || '';
-    const currentTenantName = useMemo(() => {
-        const tenant = (myTenants as any[]).find((item: any) => item.tenant_id === currentTenant);
-        return tenant?.tenant_name || (isChinese ? '当前公司' : 'Current Company');
-    }, [currentTenant, isChinese, myTenants]);
-    const currentTenantLogoUrl = useMemo(() => {
-        const tenant = (myTenants as any[]).find((item: any) => item.tenant_id === currentTenant);
-        return tenant?.logo_url || '';
-    }, [currentTenant, myTenants]);
-    const currentTenantInitial = (Array.from(currentTenantName.trim())[0] as string | undefined)?.toUpperCase() || 'C';
-    const currentTenantAvatarTone = useMemo(() => getWorkspaceAvatarTone(currentTenantName), [currentTenantName]);
-    const filteredTenants = useMemo(() => {
-        const query = tenantSearch.trim().toLowerCase();
-        if (!query) return myTenants as any[];
-        return (myTenants as any[]).filter((tenant: any) => (tenant.tenant_name || '').toLowerCase().includes(query));
-    }, [myTenants, tenantSearch]);
 
     // Keep tenant in localStorage for other components that read it
     useEffect(() => {
@@ -664,448 +305,188 @@ export default function Layout() {
         refetchInterval: 30000,
     });
 
-    const openAgentDrawer = useCallback(() => {
-        if (!isSidebarCollapsed) return;
-        if (agentDrawerCloseTimerRef.current) {
-            clearTimeout(agentDrawerCloseTimerRef.current);
-            agentDrawerCloseTimerRef.current = null;
-        }
-        setAgentDrawerOpen(true);
-    }, [isSidebarCollapsed]);
-
-    const scheduleCloseAgentDrawer = useCallback(() => {
-        if (agentDrawerCloseTimerRef.current) clearTimeout(agentDrawerCloseTimerRef.current);
-        agentDrawerCloseTimerRef.current = setTimeout(() => {
-            setAgentDrawerOpen(false);
-            agentDrawerCloseTimerRef.current = null;
-        }, 160);
-    }, []);
-
     const handleLogout = () => {
         logout();
         navigate('/login');
     };
 
-    const selectUiLanguage = (code: string) => {
-        i18n.changeLanguage(code);
-        setShowLanguageSubmenu(false);
-        setShowAccountMenu(false);
+    const toggleLang = () => {
+        i18n.changeLanguage(i18n.language === 'zh' ? 'en' : 'zh');
     };
 
-    const openLangSubmenu = useCallback(() => {
-        if (langHoverCloseTimerRef.current) {
-            clearTimeout(langHoverCloseTimerRef.current);
-            langHoverCloseTimerRef.current = null;
-        }
-        setShowLanguageSubmenu(true);
-    }, []);
-
-    const scheduleCloseLangSubmenu = useCallback(() => {
-        if (langHoverCloseTimerRef.current) clearTimeout(langHoverCloseTimerRef.current);
-        langHoverCloseTimerRef.current = setTimeout(() => {
-            setShowLanguageSubmenu(false);
-            langHoverCloseTimerRef.current = null;
-        }, 200);
-    }, []);
-
-    useEffect(() => {
-        if (!showAccountMenu) {
-            if (langHoverCloseTimerRef.current) {
-                clearTimeout(langHoverCloseTimerRef.current);
-                langHoverCloseTimerRef.current = null;
-            }
-            setShowLanguageSubmenu(false);
-        }
-    }, [showAccountMenu]);
-
-    useEffect(() => () => {
-        if (langHoverCloseTimerRef.current) clearTimeout(langHoverCloseTimerRef.current);
-        if (agentDrawerCloseTimerRef.current) clearTimeout(agentDrawerCloseTimerRef.current);
-    }, []);
-
-    useEffect(() => {
-        if (!isSidebarCollapsed) setAgentDrawerOpen(false);
-    }, [isSidebarCollapsed]);
-
-    const updateLangSubmenuPosition = useCallback(() => {
-        const el = accountDropdownRef.current;
-        if (!el) return;
-        const r = el.getBoundingClientRect();
-        setLangSubmenuPos({ top: r.top, left: r.right + 2 });
-    }, []);
-
-    const updateTenantMenuPosition = useCallback(() => {
-        const el = tenantSwitcherRef.current;
-        if (!el) return;
-        const rect = el.getBoundingClientRect();
-        const viewportPadding = 12;
-        const menuWidth = 304;
-        const preferredLeft = isSidebarCollapsed ? rect.right + 8 : rect.left;
-        const left = Math.min(
-            Math.max(viewportPadding, preferredLeft),
-            Math.max(viewportPadding, window.innerWidth - menuWidth - viewportPadding),
-        );
-        const top = Math.max(viewportPadding, rect.bottom + 8);
-        const maxHeight = Math.max(220, window.innerHeight - top - viewportPadding);
-        setTenantMenuPos({ top, left, maxHeight });
-    }, [isSidebarCollapsed]);
-
-    useLayoutEffect(() => {
-        if (!showLanguageSubmenu) return;
-        updateLangSubmenuPosition();
-        window.addEventListener('resize', updateLangSubmenuPosition);
-        window.addEventListener('scroll', updateLangSubmenuPosition, true);
-        return () => {
-            window.removeEventListener('resize', updateLangSubmenuPosition);
-            window.removeEventListener('scroll', updateLangSubmenuPosition, true);
-        };
-    }, [showLanguageSubmenu, updateLangSubmenuPosition]);
-
-    useLayoutEffect(() => {
-        if (!showTenantMenu) return;
-        updateTenantMenuPosition();
-        window.addEventListener('resize', updateTenantMenuPosition);
-        window.addEventListener('scroll', updateTenantMenuPosition, true);
-        return () => {
-            window.removeEventListener('resize', updateTenantMenuPosition);
-            window.removeEventListener('scroll', updateTenantMenuPosition, true);
-        };
-    }, [showTenantMenu, updateTenantMenuPosition]);
-
-    useEffect(() => {
-        const handleClickOutside = (e: MouseEvent) => {
-            const t = e.target as Node;
-            if (accountMenuRef.current?.contains(t)) return;
-            if (langSubmenuPortalRef.current?.contains(t)) return;
-            if (tenantSwitcherRef.current?.contains(t)) return;
-            if (tenantMenuPortalRef.current?.contains(t)) return;
-            setShowAccountMenu(false);
-            setShowTenantMenu(false);
-        };
-        if (showAccountMenu || showTenantMenu) document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [showAccountMenu, showTenantMenu]);
-
-    const langSubmenuContent = showAccountMenu && showLanguageSubmenu && (
-        <div
-            ref={langSubmenuPortalRef}
-            className="account-lang-submenu account-lang-submenu-portal"
-            role="menu"
-            style={{ top: langSubmenuPos.top, left: langSubmenuPos.left }}
-            onMouseEnter={openLangSubmenu}
-            onMouseLeave={scheduleCloseLangSubmenu}
-        >
-            {APP_UI_LANGUAGES.map(({ code, nativeLabel }) => {
-                const active = resolveUiLangCode(i18n.language) === code;
-                return (
-                    <button
-                        key={code}
-                        type="button"
-                        role="menuitem"
-                        className={`account-lang-submenu-item${active ? ' is-active' : ''}`}
-                        onClick={() => selectUiLanguage(code)}
-                    >
-                        <span>{nativeLabel}</span>
-                        {active && <IconCheck size={14} stroke={2} />}
-                    </button>
-                );
-            })}
-        </div>
-    );
-
-    const tenantMenuContent = showTenantMenu && typeof document !== 'undefined' && createPortal(
-        <div
-            ref={tenantMenuPortalRef}
-            className="tenant-switcher-popover"
-            role="menu"
-            style={{ top: tenantMenuPos.top, left: tenantMenuPos.left, maxHeight: tenantMenuPos.maxHeight }}
-        >
-            <div className="tenant-switcher-label">{isChinese ? '切换公司' : 'Switch company'}</div>
-            {(myTenants as any[]).length > 8 && (
-                <div className="tenant-switcher-search">
-                    <IconSearch size={14} stroke={1.7} />
-                    <input
-                        value={tenantSearch}
-                        onChange={e => setTenantSearch(e.target.value)}
-                        placeholder={isChinese ? '搜索公司' : 'Search companies'}
-                    />
-                    {tenantSearch && (
-                        <button type="button" onClick={() => setTenantSearch('')} aria-label={isChinese ? '清空搜索' : 'Clear search'}>
-                            <IconX size={14} stroke={1.7} />
-                        </button>
-                    )}
-                </div>
-            )}
-            <div className="tenant-switcher-list">
-                {filteredTenants.map((tenant: any) => (
-                    <button
-                        key={tenant.tenant_id}
-                        type="button"
-                        className={`tenant-switcher-item${tenant.tenant_id === currentTenant ? ' active' : ''}`}
-                        onClick={() => {
-                            if (tenant.tenant_id === currentTenant) {
-                                setShowTenantMenu(false);
-                                return;
-                            }
-                            handleSwitchTenant(tenant.tenant_id);
-                        }}
-                    >
-                        <span className="tenant-switcher-icon">
-                            <IconBuilding size={16} stroke={1.6} />
-                        </span>
-                        <span className="tenant-switcher-name">{tenant.tenant_name}</span>
-                        {tenant.tenant_id === currentTenant && <IconCheck size={16} stroke={2} />}
-                    </button>
-                ))}
-                {filteredTenants.length === 0 && (
-                    <div className="tenant-switcher-empty">{isChinese ? '没有匹配的公司' : 'No matching companies'}</div>
-                )}
-            </div>
-
-            <div className="tenant-switcher-divider" />
-
+    return (
+        <div className="app-layout">
+            {/* Mobile hamburger */}
             <button
-                type="button"
-                className="tenant-switcher-action"
-                onClick={openTenantSetupModal}
+                className="mobile-menu-btn"
+                onClick={() => setIsMobileMenuOpen(v => !v)}
+                aria-label="Menu"
             >
-                <IconPlus size={17} stroke={1.6} />
-                <span>{isChinese ? '创建或加入新公司' : 'Create or join company'}</span>
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                    <path d="M3 5h14M3 10h14M3 15h14" />
+                </svg>
             </button>
-            {canAccessCompanySettings && (
-                <button
-                    type="button"
-                    className="tenant-switcher-action"
-                    onClick={() => {
-                        setShowTenantMenu(false);
-                        navigate('/enterprise');
-                    }}
-                >
-                    <IconSettings size={16} stroke={1.6} />
-                    <span>{isChinese ? '公司信息设置' : 'Company settings'}</span>
-                </button>
-            )}
-        </div>,
-        document.body,
-    );
-
-    const q = sidebarSearch.trim().toLowerCase();
-    const sortedAgents = [...agents].filter((a: any) => {
-        if (!q) return true;
-        return (a.name || '').toLowerCase().includes(q) || (a.role_description || '').toLowerCase().includes(q);
-    }).sort((a: any, b: any) => {
-        const ap = pinnedAgents.has(a.id) ? 1 : 0;
-        const bp = pinnedAgents.has(b.id) ? 1 : 0;
-        if (ap !== bp) return bp - ap;
-        const aTime = a.created_at ? new Date(a.created_at).getTime() : 0;
-        const bTime = b.created_at ? new Date(b.created_at).getTime() : 0;
-        return bTime - aTime;
-    });
 
-    const agentSearchBox = (force = false) => (force || agents.length >= 5) && (
-        <div className="sidebar-agent-search">
-            <IconSearch size={14} stroke={2} className="sidebar-agent-search-icon" />
-            <input
-                type="text"
-                value={sidebarSearch}
-                onChange={e => setSidebarSearch(e.target.value)}
-                placeholder={isChinese ? '搜索...' : 'Search...'}
+            {/* Mobile backdrop */}
+            <div
+                className={`sidebar-backdrop${isMobileMenuOpen ? ' visible' : ''}`}
+                onClick={() => setIsMobileMenuOpen(false)}
             />
-            {sidebarSearch && (
-                <button onClick={() => setSidebarSearch('')} aria-label={isChinese ? '清空搜索' : 'Clear search'}>
-                    <IconX size={14} stroke={2} />
-                </button>
-            )}
-        </div>
-    );
 
-    const renderAgent = (agent: any, options?: { drawer?: boolean }) => {
-        const badge = getAgentBadgeStatus(agent);
-        const avatarChar = ((Array.from(agent.name || '?')[0] as string) || '?').toUpperCase();
-        const unreadCount = Number(agent.unread_count || 0);
-        const showPin = !isSidebarCollapsed || options?.drawer;
-        return (
-            <div key={agent.id} className={`sidebar-agent-item${agent.creator_id === user?.id ? ' owned' : ''}${options?.drawer ? ' drawer-agent' : ''}`}>
-                <NavLink
-                    to={`/agents/${agent.id}/chat`}
-                    className={({ isActive }) => `sidebar-item ${isActive || activeAgentId === agent.id ? 'active' : ''}`}
-                    title={agent.name}
-                    onClick={() => setAgentDrawerOpen(false)}
-                >
-                    <span className="sidebar-item-icon" style={{ position: 'relative' }}>
-                        <span className={`agent-avatar${agent.agent_type === 'openclaw' ? ' openclaw' : ''}`}>{avatarChar}</span>
-                        {agent.agent_type === 'openclaw' && (
-                            <span className="agent-avatar-link" style={{ display: 'flex' }}>
-                                <IconArrowUpRight size={10} stroke={2.5} />
-                            </span>
-                        )}
-                        {badge && <span className={`agent-avatar-badge ${badge}`} />}
-                        {unreadCount > 0 && (
-                            <span className="sidebar-agent-unread">
-                                {unreadCount > 99 ? '99+' : unreadCount}
-                            </span>
-                        )}
-                    </span>
-                    <span className="sidebar-item-text">{agent.name}</span>
-                </NavLink>
-                {showPin && (
-                    <button
-                        onClick={e => { e.preventDefault(); e.stopPropagation(); togglePin(agent.id); }}
-                        className={`sidebar-pin-btn ${pinnedAgents.has(agent.id) ? 'pinned' : ''}`}
-                        title={pinnedAgents.has(agent.id) ? (isChinese ? '取消置顶' : 'Unpin') : (isChinese ? '置顶' : 'Pin to top')}
-                    >
-                        {pinnedAgents.has(agent.id) ? (
-                            <>
-                                <IconPin size={14} stroke={1.5} className="pin-default" />
-                                <IconPinnedOff size={14} stroke={1.5} className="pin-hover" />
-                            </>
-                        ) : (
-                            <IconPin size={14} stroke={1.5} className="pin-on" />
-                        )}
-                    </button>
-                )}
-            </div>
-        );
-    };
-
-    const agentListContent = (drawer = false) => (
-        <>
-            {sortedAgents.map(agent => renderAgent(agent, { drawer }))}
-            {agents.length === 0 && (
-                <div className="sidebar-section">
-                    <div className="sidebar-section-title">{t('nav.myAgents')}</div>
-                </div>
-            )}
-            {agents.length > 0 && sortedAgents.length === 0 && q && (
-                <div className="sidebar-agent-empty">
-                    {isChinese ? '无匹配结果' : 'No matches'}
-                </div>
-            )}
-        </>
-    );
-
-    const agentDrawer = isSidebarCollapsed && agentDrawerOpen && typeof document !== 'undefined' && createPortal(
-        <div
-            className="sidebar-agent-drawer"
-            onMouseEnter={openAgentDrawer}
-            onMouseLeave={scheduleCloseAgentDrawer}
-        >
-            <div className="sidebar-agent-drawer-header">
-                <span>{isChinese ? '智能体' : 'Agents'}</span>
-                <button
-                    type="button"
-                    onClick={() => {
-                        setShowTalentMarket(true);
-                        setAgentDrawerOpen(false);
-                    }}
-                    title={t('nav.hire', t('nav.newAgent'))}
-                >
-                    <IconPlus size={16} stroke={1.7} />
-                </button>
-            </div>
-            {agentSearchBox(true)}
-            <div className="sidebar-agent-drawer-list">
-                {agentListContent(true)}
-            </div>
-        </div>,
-        document.body,
-    );
-
-    return (
-        <div className={`app-layout ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
-            <nav className={`sidebar ${isSidebarCollapsed ? 'collapsed' : ''}`}>
+            <nav className={`sidebar ${isSidebarCollapsed ? 'collapsed' : ''}${isMobileMenuOpen ? ' mobile-open' : ''}`}>
                 <div className="sidebar-top">
-                    <div className="sidebar-workspace-row" ref={tenantSwitcherRef} data-tour-target="company-switcher">
-                        <button
-                            type="button"
-                            className={`workspace-switcher-trigger${showTenantMenu ? ' open' : ''}`}
-                            onClick={() => {
-                                if (showTenantMenu) {
-                                    setShowTenantMenu(false);
-                                    return;
-                                }
-                                openTenantModal();
-                            }}
-                            title={isChinese ? '切换企业' : 'Switch Organization'}
-                        >
-                            <span className={`workspace-switcher-avatar tone-${currentTenantAvatarTone}`}>
-                                {currentTenantLogoUrl ? <img src={currentTenantLogoUrl} alt="" /> : currentTenantInitial}
-                            </span>
-                            <span className="workspace-switcher-name">{currentTenantName}</span>
-                            <IconChevronDown className="workspace-switcher-chevron" size={15} stroke={1.7} />
-                        </button>
-                        <button className="btn btn-ghost sidebar-collapse-btn" onClick={toggleSidebar} style={{
-                            padding: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            marginLeft: 'auto', color: 'var(--text-tertiary)',
-                        }} title={isSidebarCollapsed ? t('common.expandSidebar') : t('common.collapseSidebar')}>
-                            {isSidebarCollapsed ? SidebarIcons.expand : SidebarIcons.collapse}
-                        </button>
-
+                    <div className="sidebar-logo">
+                        <img src={theme === 'dark' ? (import.meta.env.VITE_APP_LOGO_DARK || '/logo-white.png') : (import.meta.env.VITE_APP_LOGO_LIGHT || '/logo-black.png')} alt="" style={{ width: 22, height: 22 }} />
+                        <span className="sidebar-logo-text">{import.meta.env.VITE_APP_NAME || 'Clawith'}</span>
                     </div>
 
 
 
-                    <div className="sidebar-section" data-tour-target="main-nav">
-                        <NavLink to="/plaza" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`}>
-                            <span className="sidebar-item-icon" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                                <IconBuildingMonument size={14} stroke={1.5} />
-                            </span>
+                    <div className="sidebar-section">
+                        <NavLink to="/plaza" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`} onClick={closeMobileMenu}>
+                            <span className="sidebar-item-icon" style={{ display: 'flex', fontSize: '14px' }}>🏛️</span>
                             <span className="sidebar-item-text">{t('nav.plaza', 'Plaza')}</span>
                         </NavLink>
-                        <NavLink to="/dashboard" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`}>
+                        <NavLink to="/dashboard" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`} onClick={closeMobileMenu}>
                             <span className="sidebar-item-icon" style={{ display: 'flex' }}>{SidebarIcons.home}</span>
                             <span className="sidebar-item-text">{t('nav.dashboard')}</span>
                         </NavLink>
-                        <NavLink to="/okr" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`}>
-                            <span className="sidebar-item-icon" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                                {/* OKR target icon */}
-                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-                                    <circle cx="12" cy="12" r="10"/>
-                                    <circle cx="12" cy="12" r="6"/>
-                                    <circle cx="12" cy="12" r="2"/>
-                                </svg>
-                            </span>
-                            <span className="sidebar-item-text">{t('nav.okr', 'OKR')}</span>
-                        </NavLink>
                     </div>
                 </div>
-                
-                <div className="sidebar-divider" />
 
-                <div
-                    className="sidebar-scrollable"
-                    data-tour-target="agent-list"
-                    onMouseEnter={openAgentDrawer}
-                    onMouseLeave={scheduleCloseAgentDrawer}
-                >
-                    {!isSidebarCollapsed && (
-                        <div className="sidebar-agent-header">
-                            <span>{isChinese ? '智能体' : 'Agents'}</span>
-                            <button
-                                type="button"
-                                data-tour-target="hire-agent"
-                                onClick={() => setShowTalentMarket(true)}
-                                title={t('nav.hire', t('nav.newAgent'))}
-                            >
-                                <IconPlus size={15} stroke={1.7} />
-                            </button>
+                <div className="sidebar-scrollable">
+                    {/* Sidebar search */}
+                    {!isSidebarCollapsed && agents.length >= 5 && (
+                        <div style={{ padding: '4px 12px 4px', position: 'relative' }}>
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--text-tertiary)" strokeWidth="2" strokeLinecap="round" style={{ position: 'absolute', left: '20px', top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
+                                <circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />
+                            </svg>
+                            <input
+                                type="text"
+                                value={sidebarSearch}
+                                onChange={e => setSidebarSearch(e.target.value)}
+                                placeholder={isChinese ? '搜索...' : 'Search...'}
+                                style={{
+                                    width: '100%', padding: '5px 24px 5px 28px', border: '1px solid var(--border-subtle)',
+                                    borderRadius: '6px', background: 'var(--bg-secondary)', color: 'var(--text-primary)',
+                                    fontSize: '12px', outline: 'none', boxSizing: 'border-box',
+                                }}
+                                onFocus={e => e.target.style.borderColor = 'var(--primary)'}
+                                onBlur={e => e.target.style.borderColor = 'var(--border-subtle)'}
+                            />
+                            {sidebarSearch && (
+                                <button onClick={() => setSidebarSearch('')} style={{ position: 'absolute', right: '18px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: 'var(--text-tertiary)', cursor: 'pointer', fontSize: '12px', padding: '2px', lineHeight: 1 }}>&#x2715;</button>
+                            )}
                         </div>
                     )}
-                    {!isSidebarCollapsed && agentSearchBox()}
-                    {agentListContent()}
+                    {/* Agent list */}
+                    {(() => {
+                        const q = sidebarSearch.trim().toLowerCase();
+                        const filterAgent = (a: any) => !q || (a.name || '').toLowerCase().includes(q) || (a.role_description || '').toLowerCase().includes(q);
+                        const sortedAgents = [...agents].filter(filterAgent).sort((a: any, b: any) => {
+                            const ap = pinnedAgents.has(a.id) ? 1 : 0;
+                            const bp = pinnedAgents.has(b.id) ? 1 : 0;
+                            if (ap !== bp) return bp - ap;
+                            // Sort by created_at descending (newest first)
+                            const aTime = a.created_at ? new Date(a.created_at).getTime() : 0;
+                            const bTime = b.created_at ? new Date(b.created_at).getTime() : 0;
+                            return bTime - aTime;
+                        });
+                        const renderAgent = (agent: any) => {
+                            const badge = getAgentBadgeStatus(agent);
+                            const avatarChar = ((Array.from(agent.name || '?')[0] as string) || '?').toUpperCase();
+                            return (
+                            <div key={agent.id} style={{ position: 'relative' }} className={`sidebar-agent-item${agent.creator_id === user?.id ? ' owned' : ''}`}>
+                                <NavLink
+                                    to={`/agents/${agent.id}`}
+                                    className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`}
+                                    title={agent.name}
+                                    style={{ paddingRight: '28px' }}
+                                    onClick={closeMobileMenu}
+                                >
+                                    <span className="sidebar-item-icon" style={{ position: 'relative' }}>
+                                        <span className={`agent-avatar${agent.agent_type === 'openclaw' ? ' openclaw' : ''}`}>{avatarChar}</span>
+                                        {agent.agent_type === 'openclaw' && (
+                                            <span className="agent-avatar-link">
+                                                <svg width="6" height="6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+                                                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+                                                </svg>
+                                            </span>
+                                        )}
+                                        {badge && <span className={`agent-avatar-badge ${badge}`} />}
+                                    </span>
+                                    <span className="sidebar-item-text">{agent.name}</span>
+                                </NavLink>
+                                {!isSidebarCollapsed && (
+                                    <button
+                                        onClick={e => { e.preventDefault(); e.stopPropagation(); togglePin(agent.id); }}
+                                        className={`sidebar-pin-btn ${pinnedAgents.has(agent.id) ? 'pinned' : ''}`}
+                                        title={pinnedAgents.has(agent.id) ? (isChinese ? '取消置顶' : 'Unpin') : (isChinese ? '置顶' : 'Pin to top')}
+                                    >
+                                        <svg width="10" height="10" viewBox="0 0 24 24" fill={pinnedAgents.has(agent.id) ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                                            <path d="M12 17v5" /><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16h14v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V5a1 1 0 0 1 1-1h1V2H7v2h1a1 1 0 0 1 1 1z" />
+                                        </svg>
+                                    </button>
+                                )}
+                            </div>
+                        );};
+                        return (
+                            <>
+                                {sortedAgents.map(renderAgent)}
+                                {agents.length === 0 && (
+                                    <div className="sidebar-section">
+                                        <div className="sidebar-section-title">{t('nav.myAgents')}</div>
+                                    </div>
+                                )}
+                                {agents.length > 0 && sortedAgents.length === 0 && q && (
+                                    <div style={{ padding: '12px 16px', fontSize: '12px', color: 'var(--text-tertiary)', textAlign: 'center' }}>
+                                        {isChinese ? '无匹配结果' : 'No matches'}
+                                    </div>
+                                )}
+                            </>
+                        );
+                    })()}
                 </div>
 
                 <div className="sidebar-bottom">
+                    <div className="sidebar-section" style={{ borderBottom: '1px solid var(--border-subtle)', paddingBottom: '8px', marginBottom: 0 }}>
+                        {user && (
+                            <NavLink to="/agents/new" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`} title={t('nav.newAgent')} onClick={closeMobileMenu}>
+                                <span className="sidebar-item-icon" style={{ display: 'flex' }}>{SidebarIcons.plus}</span>
+                                <span className="sidebar-item-text">{t('nav.newAgent')}</span>
+                            </NavLink>
+                        )}
+                        {user && ['platform_admin', 'org_admin'].includes(user.role) && (
+                            <NavLink to="/enterprise" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`} title={t('nav.enterprise')} onClick={closeMobileMenu}>
+                                <span className="sidebar-item-icon" style={{ display: 'flex' }}>{SidebarIcons.settings}</span>
+                                <span className="sidebar-item-text">{t('nav.enterprise')}</span>
+                            </NavLink>
+                        )}
+                        {user && user.role === 'platform_admin' && (
+                            <NavLink to="/admin/platform-settings" className={({ isActive }) => `sidebar-item ${isActive ? 'active' : ''}`} title={t('nav.platformSettings', 'Platform Settings')} onClick={closeMobileMenu}>
+                                <span className="sidebar-item-icon" style={{ display: 'flex' }}>
+                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                                        <circle cx="8" cy="8" r="2.5" /><path d="M13.5 8a5.5 5.5 0 01-.3 1.8l1.3.8-.8 1.4-1.3-.8a5.5 5.5 0 01-1.5 1l.1 1.5H9.2l.1-1.5a5.5 5.5 0 01-1.5-1l-1.3.8-.8-1.4 1.3-.8A5.5 5.5 0 016.7 8a5.5 5.5 0 01.3-1.8l-1.3-.8.8-1.4 1.3.8a5.5 5.5 0 011.5-1L9.2 2.3h1.6l-.1 1.5a5.5 5.5 0 011.5 1l1.3-.8.8 1.4-1.3.8a5.5 5.5 0 01.5 1.8z" />
+                                    </svg>
+                                </span>
+                                <span className="sidebar-item-text">{t('nav.platformSettings', 'Platform Settings')}</span>
+                            </NavLink>
+                        )}
+                    </div>
+
                     <div className="sidebar-footer">
                         <div className="sidebar-footer-controls" style={{
-                            display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '8px',
+                            display: 'flex', alignItems: 'center', gap: '4px', marginBottom: '12px',
                         }}>
-                            <button className="btn btn-ghost" onClick={toggleTheme} style={{
-                                padding: '4px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            }} title={theme === 'dark' ? t('common.lightMode') : t('common.darkMode')}>
-                                {theme === 'dark' ? SidebarIcons.sun : SidebarIcons.moon}
+                            <button className="btn btn-ghost" onClick={toggleSidebar} style={{
+                                padding: '4px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center'
+                            }} title={isSidebarCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}>
+                                {isSidebarCollapsed ? SidebarIcons.expand : SidebarIcons.collapse}
                             </button>
-                            <button className="btn btn-ghost" onClick={() => setShowNotifications(v => !v)} style={{
+                            <div style={{ flex: 1 }} />
+                            {/* Notification bell */}
+                            <button className="btn btn-ghost" onClick={() => { setShowNotifications(v => !v); if (!showNotifications) refetchNotifications(); }} style={{
                                 padding: '4px 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative',
                             }} title={isChinese ? '通知' : 'Notifications'}>
                                 {SidebarIcons.bell}
@@ -1121,56 +502,31 @@ export default function Layout() {
                                     }}>{(unreadCount as number) > 99 ? '99+' : unreadCount}</span>
                                 )}
                             </button>
+                            <button className="btn btn-ghost" onClick={toggleTheme} style={{
+                                fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px',
+                                padding: '4px 8px',
+                            }}>
+                                {theme === 'dark' ? SidebarIcons.sun : SidebarIcons.moon}
+                            </button>
+                            <button className="btn btn-ghost" onClick={toggleLang} style={{
+                                fontSize: '12px', display: 'flex', alignItems: 'center', gap: '4px',
+                                padding: '4px 8px',
+                            }} title={i18n.language === 'zh' ? 'English' : '中文'}>
+                                {SidebarIcons.globe}
+                            </button>
                         </div>
-                        <div ref={accountMenuRef} style={{ position: 'relative' }}>
-                            {showAccountMenu && (
-                                <div className="account-menus-container">
-                                <div className="account-dropdown" ref={accountDropdownRef}>
-                                    <div
-                                        className="account-dropdown-language-hover-wrap"
-                                        onMouseEnter={openLangSubmenu}
-                                        onMouseLeave={scheduleCloseLangSubmenu}
-                                    >
-                                        <button
-                                            type="button"
-                                            className="account-dropdown-item language-menu-trigger"
-                                            aria-haspopup="menu"
-                                            aria-expanded={showLanguageSubmenu}
-                                        >
-                                            <IconWorld size={15} stroke={1.5} />
-                                            <span className="language-menu-label">
-                                                {t('layout.language', {
-                                                    lng: resolveUiLangCode(i18n.language),
-                                                    defaultValue: 'Language',
-                                                })}
-                                            </span>
-                                            <span className="language-menu-chevron" aria-hidden>
-                                                <IconChevronRight size={16} stroke={1.75} />
-                                            </span>
-                                        </button>
-                                    </div>
-                                    <button className="account-dropdown-item" onClick={() => { setShowAccountSettings(true); setShowAccountMenu(false); }}>
-                                        <IconUser size={15} stroke={1.5} />
-                                        <span>{isChinese ? '账户设置' : 'Account Settings'}</span>
-                                    </button>
-                                    {canAccessPlatformSettings && (
-                                        <button className="account-dropdown-item" onClick={() => { navigate('/admin/platform-settings'); setShowAccountMenu(false); }}>
-                                            <IconSettings size={15} stroke={1.5} />
-                                            <span>{t('nav.platformSettings', 'Platform Settings')}</span>
-                                        </button>
-                                    )}
-                                    <div style={{ height: '1px', background: 'var(--border-subtle)', margin: '4px 0' }} />
-                                    <button className="account-dropdown-item account-dropdown-danger" onClick={() => { handleLogout(); setShowAccountMenu(false); }}>
-                                        <IconLogout size={15} stroke={1.5} />
-                                        <span>{t('layout.logout', 'Logout')}</span>
-                                    </button>
-                                </div>
-                                </div>
-                            )}
-                            {typeof document !== 'undefined' && langSubmenuContent && createPortal(langSubmenuContent, document.body)}
+                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                             <div
-                                className="sidebar-account-row"
-                                onClick={() => setShowAccountMenu(v => !v)}
+                                style={{
+                                    display: 'flex', alignItems: 'center', gap: '8px',
+                                    flex: 1, minWidth: 0, cursor: 'pointer',
+                                    padding: '4px 6px', borderRadius: '6px',
+                                    transition: 'background 0.15s',
+                                }}
+                                onClick={() => { closeMobileMenu(); setShowAccountSettings(true); }}
+                                onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-tertiary)')}
+                                onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                                title={isChinese ? '账户设置' : 'Account Settings'}
                             >
                                 <div style={{
                                     width: '28px', height: '28px', borderRadius: 'var(--radius-md)',
@@ -1190,160 +546,103 @@ export default function Layout() {
                                                 user?.role === 'agent_admin' ? t('roles.agentAdmin') : t('roles.member')}
                                     </div>
                                 </div>
-                                <IconChevronUp size={14} stroke={1.5} style={{
-                                    color: 'var(--text-tertiary)', flexShrink: 0,
-                                    transform: showAccountMenu ? 'rotate(0deg)' : 'rotate(180deg)',
-                                    transition: 'transform 0.2s ease',
-                                }} />
                             </div>
+                            <button className="btn btn-ghost" onClick={handleLogout} style={{
+                                padding: '4px 6px', color: 'var(--text-tertiary)',
+                                display: 'flex', alignItems: 'center', flexShrink: 0,
+                            }} title={t('layout.logout', 'Logout')}>
+                                {SidebarIcons.logout}
+                            </button>
                         </div>
+                        {/* Version */}
                         <VersionDisplay />
                     </div>
                 </div>
             </nav>
-            {agentDrawer}
-            {tenantMenuContent}
 
-            {showTenantSetupModal && (
-                <div className="tenant-setup-modal-backdrop" onClick={() => setShowTenantSetupModal(false)}>
-                    <div className="tenant-setup-modal" onClick={e => e.stopPropagation()}>
-                        <div className="tenant-setup-modal-header">
-                            <div>
-                                <h3>{isChinese ? '创建或加入新公司' : 'Create or Join Company'}</h3>
-                                <p>{isChinese ? '加入已有公司，或创建一个新的工作空间。' : 'Join an existing company or start a new workspace.'}</p>
-                            </div>
-                            <button type="button" onClick={() => setShowTenantSetupModal(false)} aria-label={isChinese ? '关闭' : 'Close'}>
-                                <IconX size={18} stroke={1.8} />
-                            </button>
-                        </div>
-
-                        {tenantFormError && <div className="tenant-setup-error">{tenantFormError}</div>}
-
-                        <form onSubmit={handleModalJoin} className="tenant-setup-section">
-                            <div className="tenant-setup-section-title">{isChinese ? '通过邀请码加入' : 'Join via invitation code'}</div>
-                            <div className="tenant-setup-row">
-                                <input
-                                    className="form-input"
-                                    value={joinInviteCode}
-                                    onChange={e => setJoinInviteCode(e.target.value)}
-                                    placeholder={isChinese ? '输入邀请码' : 'Enter invitation code'}
-                                />
-                                <button className="btn btn-primary" type="submit" disabled={tenantFormLoading || !joinInviteCode.trim()}>
-                                    {tenantFormLoading ? '...' : (isChinese ? '加入' : 'Join')}
-                                </button>
-                            </div>
-                        </form>
-
-                        {allowSelfCreate && (
-                            <>
-                                <div className="tenant-setup-divider"><span>{isChinese ? '或者' : 'OR'}</span></div>
-                                <form onSubmit={handleModalCreate} className="tenant-setup-section">
-                                    <div className="tenant-setup-section-title">{isChinese ? '创建新公司' : 'Create a new company'}</div>
-                                    <div className="tenant-setup-row">
-                                        <input
-                                            className="form-input"
-                                            value={createCompanyName}
-                                            onChange={e => setCreateCompanyName(e.target.value)}
-                                            placeholder={isChinese ? '公司名称' : 'Company name'}
-                                        />
-                                        <button className="btn btn-primary" type="submit" disabled={tenantFormLoading || !createCompanyName.trim()}>
-                                            {tenantFormLoading ? '...' : (isChinese ? '创建' : 'Create')}
-                                        </button>
-                                    </div>
-                                </form>
-                            </>
-                        )}
-                    </div>
-                </div>
-            )}
-
-            {/* Notification Modal */}
+            {/* Notification Panel */}
             {showNotifications && (
-                <>
-                    <div style={{ position: 'fixed', inset: 0, zIndex: 9998, background: 'rgba(0,0,0,0.5)' }} onClick={() => setShowNotifications(false)} />
-                    <div style={{
-                        position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
-                        width: 'calc(100vw - 80px)', maxWidth: '800px',
-                        height: '80vh', maxHeight: '800px',
-                        background: 'var(--bg-primary)', border: '1px solid var(--border-subtle)',
-                        borderRadius: '12px', boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-                        zIndex: 9999, display: 'flex', flexDirection: 'column', overflow: 'hidden',
-                    }}>
-                        <div style={{ borderBottom: '1px solid var(--border-subtle)', flexShrink: 0 }}>
-                            <div style={{ padding: '16px 24px 0', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                                <h3 style={{ margin: 0, fontSize: '16px', fontWeight: 600, flex: 1 }}>{isChinese ? '通知' : 'Notifications'}</h3>
-                                {(unreadCount as number) > 0 && (
-                                    <button className="btn btn-ghost" onClick={markAllRead} style={{ fontSize: '12px', padding: '4px 10px' }}>
-                                        {isChinese ? '全部已读' : 'Mark all read'}
-                                    </button>
-                                )}
-                                <button className="btn btn-ghost" onClick={() => setShowNotifications(false)} style={{ padding: '4px 8px', fontSize: '18px', lineHeight: 1 }}>×</button>
-                            </div>
-                            <div style={{ display: 'flex', gap: '0', padding: '0 24px', marginTop: '12px' }}>
-                                {[
-                                    { key: 'all', zh: '全部', en: 'All' },
-                                    { key: 'tool', zh: '工具执行', en: 'Tool' },
-                                    { key: 'approval', zh: '审批', en: 'Approval' },
-                                    { key: 'social', zh: '社交', en: 'Social' },
-                                ].map(tab => (
-                                    <button
-                                        key={tab.key}
-                                        onClick={() => { setNotifCategory(tab.key); }}
-                                        style={{
-                                            background: 'none', border: 'none', cursor: 'pointer',
-                                            padding: '8px 14px', fontSize: '13px', fontWeight: 500,
-                                            color: notifCategory === tab.key ? 'var(--text-primary)' : 'var(--text-tertiary)',
-                                            borderBottom: notifCategory === tab.key ? '2px solid var(--accent-primary)' : '2px solid transparent',
-                                            marginBottom: '-1px', transition: 'all 0.15s',
-                                        }}
-                                    >
-                                        {isChinese ? tab.zh : tab.en}
-                                    </button>
-                                ))}
-                            </div>
-                        </div>
-                        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
-                            {(notifications as any[]).length === 0 && (
-                                <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-tertiary)', fontSize: '13px' }}>
-                                    {isChinese ? '暂无通知' : 'No notifications'}
-                                </div>
+                <div style={{
+                    position: 'fixed', top: 0, bottom: 0, left: isSidebarCollapsed ? '60px' : '220px',
+                    width: '360px', background: 'var(--bg-primary)', borderRight: '1px solid var(--border-subtle)',
+                    zIndex: 9999, display: 'flex', flexDirection: 'column',
+                    boxShadow: '4px 0 24px rgba(0,0,0,0.15)', transition: 'left 0.2s',
+                }}>
+                    <div style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+                        <div style={{ padding: '16px 20px 0', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                            <h3 style={{ margin: 0, fontSize: '14px', fontWeight: 600, flex: 1 }}>{isChinese ? '通知' : 'Notifications'}</h3>
+                            {(unreadCount as number) > 0 && (
+                                <button className="btn btn-ghost" onClick={markAllRead} style={{ fontSize: '11px', padding: '4px 8px' }}>
+                                    {isChinese ? '全部已读' : 'Mark all read'}
+                                </button>
                             )}
-                            {(notifications as any[]).map((n: any) => (
-                                <div
-                                    key={n.id}
-                                    onClick={() => {
-                                        if (!n.is_read) markOneRead(n.id);
-                                        if (n.type === 'broadcast' || !n.link) {
-                                            setSelectedNotification(n);
-                                        } else if (n.link) {
-                                            navigate(n.link); setShowNotifications(false);
-                                        }
-                                    }}
+                            <button className="btn btn-ghost" onClick={() => setShowNotifications(false)} style={{ padding: '4px 8px', fontSize: '16px', lineHeight: 1 }}>×</button>
+                        </div>
+                        <div style={{ display: 'flex', gap: '0', padding: '0 20px', marginTop: '12px' }}>
+                            {[
+                                { key: 'all', zh: '全部', en: 'All' },
+                                { key: 'tool', zh: '工具执行', en: 'Tool' },
+                                { key: 'approval', zh: '审批', en: 'Approval' },
+                                { key: 'social', zh: '社交', en: 'Social' },
+                            ].map(tab => (
+                                <button
+                                    key={tab.key}
+                                    onClick={() => { setNotifCategory(tab.key); }}
                                     style={{
-                                        padding: '14px 24px', cursor: 'pointer',
-                                        borderBottom: '1px solid var(--border-subtle)',
-                                        background: n.is_read ? 'transparent' : 'var(--bg-secondary)',
-                                        transition: 'background 0.15s',
+                                        background: 'none', border: 'none', cursor: 'pointer',
+                                        padding: '6px 12px', fontSize: '12px', fontWeight: 500,
+                                        color: notifCategory === tab.key ? 'var(--text-primary)' : 'var(--text-tertiary)',
+                                        borderBottom: notifCategory === tab.key ? '2px solid var(--accent-primary)' : '2px solid transparent',
+                                        marginBottom: '-1px', transition: 'all 0.15s',
                                     }}
-                                    onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-tertiary)')}
-                                    onMouseLeave={e => (e.currentTarget.style.background = n.is_read ? 'transparent' : 'var(--bg-secondary)')}
                                 >
-                                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
-                                        {!n.is_read && <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: 'var(--accent-primary)', flexShrink: 0 }} />}
-                                        <span style={{ fontSize: '13px', fontWeight: 500, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                            {n.title}
-                                        </span>
-                                    </div>
-                                    {n.body && <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', lineHeight: '1.4', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n.body}</div>}
-                                    <div style={{ fontSize: '11px', color: 'var(--text-quaternary)', marginTop: '4px' }}>
-                                        {n.created_at ? new Date(n.created_at).toLocaleString() : ''}
-                                    </div>
-                                </div>
+                                    {isChinese ? tab.zh : tab.en}
+                                </button>
                             ))}
                         </div>
                     </div>
-                </>
+                    <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
+                        {(notifications as any[]).length === 0 && (
+                            <div style={{ textAlign: 'center', padding: '40px 20px', color: 'var(--text-tertiary)', fontSize: '13px' }}>
+                                {isChinese ? '暂无通知' : 'No notifications'}
+                            </div>
+                        )}
+                        {(notifications as any[]).map((n: any) => (
+                            <div
+                                key={n.id}
+                                onClick={() => {
+                                    if (!n.is_read) markOneRead(n.id);
+                                    if (n.type === 'broadcast' || !n.link) {
+                                        setSelectedNotification(n);
+                                    } else if (n.link) {
+                                        navigate(n.link); setShowNotifications(false);
+                                    }
+                                }}
+                                style={{
+                                    padding: '12px 20px', cursor: 'pointer',
+                                    borderBottom: '1px solid var(--border-subtle)',
+                                    background: n.is_read ? 'transparent' : 'var(--bg-secondary)',
+                                    transition: 'background 0.15s',
+                                }}
+                                onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-tertiary)')}
+                                onMouseLeave={e => (e.currentTarget.style.background = n.is_read ? 'transparent' : 'var(--bg-secondary)')}
+                            >
+                                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
+                                    {!n.is_read && <span style={{ width: '6px', height: '6px', borderRadius: '50%', background: 'var(--accent-primary)', flexShrink: 0 }} />}
+                                    <span style={{ fontSize: '12px', fontWeight: 500, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                        {n.title}
+                                    </span>
+                                </div>
+                                {n.body && <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', lineHeight: '1.4', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{n.body}</div>}
+                                <div style={{ fontSize: '10px', color: 'var(--text-quaternary)', marginTop: '4px' }}>
+                                    {n.created_at ? new Date(n.created_at).toLocaleString() : ''}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
             )}
+            {showNotifications && <div style={{ position: 'fixed', inset: 0, zIndex: 9998 }} onClick={() => setShowNotifications(false)} />}
             
             {/* Notification Detail Modal */}
             {selectedNotification && (
@@ -1364,8 +663,13 @@ export default function Layout() {
                 </div>
             )}
 
-            <main className={`main-content${isChatPage ? ' chat-page' : ''}${isAgentSettingsPage ? ' agent-settings-page' : ''}`}>
-                <Outlet context={{ openTalentMarket: () => setShowTalentMarket(true) }} />
+            <main className="main-content">
+                {/* Mobile top bar */}
+                <div className="mobile-top-bar">
+                    <img src={theme === 'dark' ? (import.meta.env.VITE_APP_LOGO_DARK || '/logo-white.png') : (import.meta.env.VITE_APP_LOGO_LIGHT || '/logo-black.png')} alt="" />
+                    <span>{import.meta.env.VITE_APP_NAME || 'Clawith'}</span>
+                </div>
+                <Outlet />
             </main>
 
             {showAccountSettings && (
@@ -1375,21 +679,6 @@ export default function Layout() {
                     isChinese={!!isChinese}
                 />
             )}
-
-            <TalentMarketModal
-                open={showTalentMarket}
-                onClose={() => setShowTalentMarket(false)}
-            />
-            {showCompanyTour && (
-                <CompanyTourOverlay
-                    assistantId={tourAssistantId}
-                    isChinese={!!isChinese}
-                    onDone={async () => {
-                        try { await onboardingApi.complete(); } catch { }
-                        navigate(tourAssistantId ? `/agents/${tourAssistantId}/chat?onboarding=1` : '/plaza', { replace: true });
-                    }}
-                />
-            )}
         </div>
     );
 }
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 6c32b46a8..ab5438d2c 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuthStore } from '../stores';
 import { authApi, tenantApi, fetchJson } from '../services/api';
 import type { TokenResponse } from '../types';
+import { syncAuthAfterInvitationJoin } from '../utils/invitationJoinAuth';
 import {
     IconAlertTriangle,
     IconArrowRight,
@@ -282,14 +283,14 @@ export default function Login() {
                 //   and returns a new access_token scoped to that tenant.
                 if (invitationCode) {
                     try {
-                        const joinRes = await tenantApi.join(invitationCode);
-                        if (joinRes?.access_token) {
-                            // Store the new tenant-scoped token first so that
-                            // the subsequent /auth/me call uses the correct context.
-                            localStorage.setItem('token', joinRes.access_token);
-                            const meRes = await authApi.me();
-                            setAuth(meRes, joinRes.access_token);
-                        }
+                        await syncAuthAfterInvitationJoin({
+                            invitationCode,
+                            currentToken: tokenRes.access_token,
+                            joinCompany: tenantApi.join,
+                            loadCurrentUser: authApi.me,
+                            persistToken: (token) => localStorage.setItem('token', token),
+                            applyAuth: setAuth,
+                        });
                         navigate('/onboarding?mode=join');
                         return;
                     } catch (joinErr: any) {
diff --git a/frontend/src/pages/Plaza.tsx b/frontend/src/pages/Plaza.tsx
index c0af354bf..9d731da4f 100644
--- a/frontend/src/pages/Plaza.tsx
+++ b/frontend/src/pages/Plaza.tsx
@@ -229,8 +229,8 @@ function StatsBar({ stats }: { stats: PlazaStats }) {
             border: '1px solid var(--border-subtle)',
         }}>
             {items.map((s, i) => (
-                <div key={i} style={{
-                    background: 'var(--bg-secondary)', padding: '16px 20px',
+                <div key={i} className="plaza-stats-grid-item" style={{
+                    background: 'var(--bg-secondary)',
                     display: 'flex', flexDirection: 'column', gap: '2px',
                 }}>
                     <div style={{
@@ -625,7 +625,7 @@ export default function Plaza() {
             {stats && <StatsBar stats={stats} />}
 
             {/* ─── Two-Column Layout ─── */}
-            <div style={{ display: 'flex', gap: '24px', alignItems: 'flex-start' }}>
+            <div className="plaza-layout" style={{ display: 'flex', gap: '24px', alignItems: 'flex-start' }}>
                 {/* ─── Main Feed ─── */}
                 <div style={{ flex: 1, minWidth: 0 }}>
                     {/* Composer */}
@@ -645,9 +645,9 @@ export default function Plaza() {
                                 multiline
                             />
                         </div>
-                        <div style={{
+                        <div className="post-composer-footer" style={{
                             display: 'flex', justifyContent: 'space-between',
-                            alignItems: 'center', marginTop: '10px', paddingLeft: '42px',
+                            alignItems: 'center', marginTop: '10px',
                         }}>
                             <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-tertiary)' }}>
                                 {newPost.length}/500 · {t('plaza.hashtagTip', 'Use #hashtags and @mentions')}
@@ -734,18 +734,18 @@ export default function Plaza() {
                                     </div>
 
                                     {/* Content */}
-                                    <div style={{
+                                    <div className="post-content" style={{
                                         fontSize: 'var(--text-sm)', lineHeight: 1.65,
                                         color: 'var(--text-primary)',
                                         marginBottom: '10px', whiteSpace: 'pre-wrap',
-                                        wordBreak: 'break-word', paddingLeft: '40px',
+                                        wordBreak: 'break-word',
                                     }}>
                                         {renderContent(post.content)}
                                     </div>
 
                                     {/* Actions */}
-                                    <div style={{
-                                        display: 'flex', gap: '2px', paddingLeft: '40px',
+                                    <div className="post-actions" style={{
+                                        display: 'flex', gap: '2px',
                                         justifyContent: 'space-between', alignItems: 'center',
                                     }}>
                                         <div style={{ display: 'flex', gap: '2px' }}>
@@ -774,8 +774,8 @@ export default function Plaza() {
 
                                     {/* Comments */}
                                     {expandedPost === post.id && (
-                                        <div style={{
-                                            marginTop: '10px', paddingTop: '10px', paddingLeft: '40px',
+                                        <div className="post-comments" style={{
+                                            marginTop: '10px', paddingTop: '10px',
                                             borderTop: '1px solid var(--border-subtle)',
                                         }}>
                                             {postDetails?.comments?.map(c => (
@@ -845,10 +845,10 @@ export default function Plaza() {
                 </div>
 
                 {/* ─── Sidebar ─── */}
-                <div style={{
-                    width: '260px', flexShrink: 0,
+                <div className="plaza-sidebar" style={{
+                    flexShrink: 0,
                     display: 'flex', flexDirection: 'column', gap: '12px',
-                    position: 'sticky', top: 'calc(20px + var(--notification-bar-height))',
+                    top: '20px',
                 }}>
                     {/* Online Agents */}
                     {runningAgents.length > 0 && (
diff --git a/frontend/src/pages/agent-detail/AgentDetailPage.tsx b/frontend/src/pages/agent-detail/AgentDetailPage.tsx
index 0548515ae..4dbf2f5e2 100644
--- a/frontend/src/pages/agent-detail/AgentDetailPage.tsx
+++ b/frontend/src/pages/agent-detail/AgentDetailPage.tsx
@@ -9,6 +9,7 @@ import { useToast } from '../../components/Toast/ToastProvider';
 import type { FileBrowserApi } from '../../components/FileBrowser';
 import FileBrowser from '../../components/FileBrowser';
 import MarkdownRenderer from '../../components/MarkdownRenderer';
+import SkillAutocomplete from '../../components/SkillAutocomplete';
 import PromptModal from '../../components/PromptModal';
 import type { LivePreviewState } from '../../components/AgentBayLivePanel';
 import AgentSidePanel, { SidePanelTab } from '../../components/AgentSidePanel';
@@ -2166,10 +2167,40 @@ export default function AgentDetailPage() {
     const reconnectDisabledRef = useRef<Record<SessionRuntimeKey, boolean>>({});
     const sessionUiStateRef = useRef<Record<SessionRuntimeKey, { isWaiting: boolean; isStreaming: boolean }>>({});
     const activeSessionIdRef = useRef<string | null>(null);
+    const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
+    const [editingTitle, setEditingTitle] = useState('');
+    const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const sessionClickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const editingSessionIdRef = useRef<string | null>(null);
     const currentAgentIdRef = useRef<string | undefined>(id);
     const sessionMsgAbortRef = useRef<AbortController | null>(null);
     const sessionLoadSeqRef = useRef(0);
 
+    useEffect(() => { editingSessionIdRef.current = editingSessionId; }, [editingSessionId]);
+
+    const saveSessionTitle = async (sessionId: string, newTitle: string) => {
+        const trimmed = newTitle.trim();
+        if (!trimmed || !id) return;
+        setEditingSessionId(null);
+        try {
+            const tkn = localStorage.getItem('token');
+            const res = await fetch(`/api/agents/${id}/sessions/${sessionId}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${tkn}` },
+                body: JSON.stringify({ title: trimmed }),
+            });
+            if (res.ok) {
+                setSessions(prev => prev.map((s: any) => s.id === sessionId ? { ...s, title: trimmed } : s));
+                setAllSessions(prev => prev.map((s: any) => s.id === sessionId ? { ...s, title: trimmed } : s));
+                if (activeSession?.id === sessionId) {
+                    setActiveSession((prev: any) => prev ? { ...prev, title: trimmed } : prev);
+                }
+            }
+        } catch (e) {
+            console.error('Failed to rename session:', e);
+        }
+    };
+
     const buildSessionRuntimeKey = (agentId: string, sessionId: string) => `${agentId}:${sessionId}`;
 
     const clearReconnectTimer = (key: SessionRuntimeKey) => {
@@ -2399,7 +2430,22 @@ export default function AgentDetailPage() {
             }));
 
             if (writable) {
-                setChatMessages(preParsed);
+                const processed: ChatMsg[] = [];
+                for (const m of msgs) {
+                    if (m.is_hidden) {
+                        const firstLine = (m.content || '').split('\n').find((line: string) => { const trimmed = line.trim(); return trimmed && trimmed !== '---'; })?.replace(/^#\s*/, '').trim() || 'Skill loaded';
+                        processed.push({ role: 'assistant', content: firstLine || 'Skill loaded', isSkillIndicator: true, hiddenContent: m.content, id: m.id, timestamp: m.created_at });
+                        continue;
+                    }
+                    processed.push(parseChatMsg({
+                        role: m.role, content: m.content || '',
+                        ...(m.toolName && { toolName: m.toolName, toolArgs: m.toolArgs, toolStatus: m.toolStatus, toolResult: m.toolResult, toolThinking: m.toolThinking }),
+                        ...(m.thinking && { thinking: m.thinking }),
+                        ...(m.created_at && { timestamp: m.created_at }),
+                        ...(m.id && { id: m.id }),
+                    }));
+                }
+                setChatMessages(processed);
             } else {
                 setHistoryMsgs(preParsed);
             }
@@ -2502,8 +2548,9 @@ export default function AgentDetailPage() {
         } catch (e: any) { toast.error('保存失败', { details: String(e?.message || e) }); }
         setExpirySaving(false);
     };
-    interface ChatMsg { role: 'user' | 'assistant' | 'tool_call'; content: string; fileName?: string; toolName?: string; toolCallId?: string; toolArgs?: any; toolStatus?: 'running' | 'done'; toolResult?: string; toolThinking?: string; thinking?: string; imageUrl?: string; timestamp?: string; }
+    interface ChatMsg { role: 'user' | 'assistant' | 'tool_call'; content: string; id?: string; fileName?: string; toolName?: string; toolCallId?: string; toolArgs?: any; toolStatus?: 'running' | 'done'; toolResult?: string; toolThinking?: string; thinking?: string; imageUrl?: string; timestamp?: string; isSkillIndicator?: boolean; hiddenContent?: string | null; }
     const [chatMessages, setChatMessages] = useState<ChatMsg[]>([]);
+    const [drawerContent, setDrawerContent] = useState<{ name: string; content: string } | null>(null);
     const getToolTargetKey = (args: any): string => {
         if (!args) return '';
         const parsed = typeof args === 'string'
@@ -2574,6 +2621,8 @@ export default function AgentDetailPage() {
     const [wsConnected, setWsConnected] = useState(false);
     const [isWaiting, setIsWaiting] = useState(false);
     const [isStreaming, setIsStreaming] = useState(false);
+    const [chatEditingId, setChatEditingId] = useState<string | null>(null);
+    const [chatEditContent, setChatEditContent] = useState('');
     const [chatUploadDrafts, setChatUploadDrafts] = useState<{ id: string; name: string; percent: number; previewUrl?: string; sizeBytes: number }[]>([]);
     const chatUploadAbortRef = useRef<Map<string, () => void>>(new Map());
     type AttachedFileRef = { name: string; text: string; path?: string; imageUrl?: string; source?: 'upload' | 'workspace_auto' };
@@ -3133,8 +3182,8 @@ export default function AgentDetailPage() {
                 setChatMessages(prev => {
                     const last = prev[prev.length - 1];
                     const thinking = (last && last.role === 'assistant' && (last as any)._streaming) ? last.thinking : undefined;
-                    if (last && last.role === 'assistant' && (last as any)._streaming) return [...prev.slice(0, -1), parseChatMsg({ role: 'assistant', content: d.content, thinking, timestamp: new Date().toISOString() })];
-                    return [...prev, parseChatMsg({ role: d.role, content: d.content, timestamp: new Date().toISOString() })];
+                    if (last && last.role === 'assistant' && (last as any)._streaming) return [...prev.slice(0, -1), parseChatMsg({ role: 'assistant', content: d.content, id: d.message_id || undefined, thinking, timestamp: new Date().toISOString() })];
+                    return [...prev, parseChatMsg({ role: d.role, content: d.content, id: d.message_id || undefined, timestamp: new Date().toISOString() })];
                 });
                 const currentSessionId = activeSessionIdRef.current ? String(activeSessionIdRef.current) : '';
                 if (currentSessionId) clearUnreadForSession(currentSessionId);
@@ -3169,6 +3218,45 @@ export default function AgentDetailPage() {
                 }
                 fetchMySessions(true, agentId);
                 queryClient.invalidateQueries({ queryKey: ['agents'] });
+            } else if (d.type === 'skill_loaded') {
+                setChatMessages(prev => [...prev, {
+                    role: 'assistant',
+                    content: `${d.emoji || ''} ${d.name} loaded`.trim(),
+                    isSkillIndicator: true,
+                    hiddenContent: d.content || null,
+                }]);
+            } else if (d.type === 'skill_error') {
+                setChatMessages(prev => [...prev, {
+                    role: 'assistant',
+                    content: `⚠️ ${d.message}`,
+                    isSkillIndicator: true,
+                }]);
+            } else if (d.type === 'user_saved') {
+                setChatMessages(prev => {
+                    const updated = [...prev];
+                    for (let i = updated.length - 1; i >= 0; i--) {
+                        if (updated[i].role === 'user' && !updated[i].id) {
+                            updated[i] = { ...updated[i], id: d.message_id };
+                            break;
+                        }
+                    }
+                    return updated;
+                });
+            } else if (d.type === 'edit_ack') {
+                setChatMessages(prev => {
+                    const idx = prev.findIndex(m => m.id === d.message_id);
+                    return idx >= 0 ? prev.slice(0, idx + 1) : prev;
+                });
+            } else if (d.type === 'session_title_updated') {
+                const newTitle = d.title;
+                const sessId = d.session_id;
+                if (editingSessionIdRef.current !== sessId) {
+                    setSessions(prev => prev.map((s: any) => s.id === sessId ? { ...s, title: newTitle } : s));
+                    setAllSessions(prev => prev.map((s: any) => s.id === sessId ? { ...s, title: newTitle } : s));
+                    if (activeSessionIdRef.current === sessId) {
+                        setActiveSession((prev: any) => prev ? { ...prev, title: newTitle } : prev);
+                    }
+                }
             } else if (d.type === 'info') {
                 // Subtle transient banner for system events (e.g. fallback model switch)
                 setChatInfoMsg(d.content || '');
@@ -3427,7 +3515,7 @@ export default function AgentDetailPage() {
         })() : null;
 
         return (
-            <div key={i} className={`chat-msg-row${isLeft ? '' : ' chat-msg-row--user'}`}>
+            <div key={i} className={`chat-msg-row message-row${isLeft ? '' : ' chat-msg-row--user'}`}>
                 <div
                     className={`chat-msg-avatar${isLeft ? '' : ' chat-msg-avatar--user'}`}
                     style={hideAvatar ? { visibility: 'hidden' } : undefined}
@@ -3468,14 +3556,60 @@ export default function AgentDetailPage() {
                                         <span style={{ color: 'var(--text-tertiary)', fontSize: '13px' }}>{t('agent.chat.thinking', 'Thinking...')}</span>
                                     </div>
                                 ) : <MarkdownRenderer content={displayContent} />
-                            ) : <MarkdownRenderer content={displayContent} />}
+                            ) : chatEditingId === msg.id ? (
+                                <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end', width: '100%' }}>
+                                    <textarea
+                                        value={chatEditContent}
+                                        onChange={e => setChatEditContent(e.target.value)}
+                                        autoFocus
+                                        style={{ flex: 1, minHeight: '40px', resize: 'vertical', padding: '8px', borderRadius: '4px', border: '1px solid var(--border-color, #333)', background: 'var(--bg-secondary, #1e1e1e)', color: 'inherit' }}
+                                    />
+                                    <button onClick={() => {
+                                        wsRef.current?.send(JSON.stringify({
+                                            type: 'edit',
+                                            message_id: msg.id,
+                                            content: chatEditContent,
+                                        }));
+                                        setChatEditingId(null);
+                                    }} style={{ padding: '4px 12px', borderRadius: '4px', background: 'var(--primary, #4a9eff)', color: 'white', border: 'none', cursor: 'pointer' }}>Save</button>
+                                    <button onClick={() => setChatEditingId(null)} style={{ padding: '4px 12px', borderRadius: '4px', background: 'transparent', border: '1px solid var(--border-color, #333)', cursor: 'pointer', color: 'inherit' }}>Cancel</button>
+                                </div>
+                            ) : (
+                                <div style={{ display: 'flex', alignItems: 'flex-start', gap: '6px' }}>
+                                    <div style={{ flex: 1 }}>
+                                        <MarkdownRenderer content={displayContent} />
+                                    </div>
+                                    {msg.role === 'user' && !msg.isSkillIndicator && msg.id && (
+                                        <button
+                                            onClick={() => {
+                                                setChatEditingId(msg.id || null);
+                                                setChatEditContent(displayContent);
+                                            }}
+                                            title="Edit"
+                                            style={{
+                                                opacity: 0,
+                                                transition: 'opacity 0.2s',
+                                                background: 'none',
+                                                border: 'none',
+                                                cursor: 'pointer',
+                                                padding: '4px',
+                                                fontSize: '14px',
+                                                flexShrink: 0,
+                                            }}
+                                            className="edit-btn"
+                                        >
+                                            ✏️
+                                        </button>
+                                    )}
+                                </div>
+                            )}
                         </div>
                     </div>
                     {timestampHtml}
                 </div>
             </div>
         );
-    }), [t]);
+    }), [t, chatEditingId, chatEditContent]);
 
     const handleChatScroll = () => {
         const el = chatContainerRef.current;
@@ -3839,7 +3973,7 @@ export default function AgentDetailPage() {
     const { data: schedules = [] } = useQuery({
         queryKey: ['schedules', id],
         queryFn: () => scheduleApi.list(id!),
-        enabled: !!id && activeTab === 'tasks',
+        enabled: !!id && activeTab === 'aware',
     });
 
     // Schedule form state
@@ -3921,7 +4055,7 @@ export default function AgentDetailPage() {
         if (activeTab !== 'chat') return;
         queryClient.refetchQueries({ queryKey: ['llm-models'] });
         queryClient.refetchQueries({ queryKey: ['tenant', 'me'] });
-    }, [activeTab, location.key, queryClient]);
+    }, [activeTab, queryClient]);
 
     const enabledLlmModels = useMemo(
         () => (llmModels as any[]).filter((m: any) => m.enabled),
@@ -4586,6 +4720,7 @@ export default function AgentDetailPage() {
 
     return (
         <>
+            <style>{`.message-row:hover .edit-btn { opacity: 1 !important; }`}</style>
             <div className={`agent-detail-page ${activeTab === 'chat' ? 'agent-detail-page--chat' : 'agent-detail-page--settings'}`}>
                 {/* Header */}
                 {activeTab === 'chat' && (
@@ -5587,7 +5722,7 @@ export default function AgentDetailPage() {
                             }}
                         >
                             {/* ── Left: session sidebar ── */}
-                            <div className={`session-sidebar ${sessionListCollapsed ? 'collapsed' : ''}`} style={{ width: sessionListCollapsed ? '0px' : '220px', transition: 'width 0.2s ease', flexShrink: 0, minHeight: 0, borderRight: sessionListCollapsed ? 'none' : '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+                            <div className={`session-sidebar agent-chat-sidebar ${sessionListCollapsed ? 'collapsed' : ''}`} style={{ width: sessionListCollapsed ? '0px' : '220px', transition: 'width 0.2s ease', flexShrink: 0, minHeight: 0, borderRight: sessionListCollapsed ? 'none' : '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
                                 {/* ── Header: scope dropdown + collapse ── */}
                                 <div style={{ flexShrink: 0 }}>
                                     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '4px', padding: '10px 8px 8px 12px', minHeight: '40px', boxSizing: 'border-box' }}>
@@ -5675,14 +5810,37 @@ export default function AgentDetailPage() {
                                                     };
                                                     const chLabel = channelLabel[s.source_channel];
                                                     return (
-                                                        <div key={s.id} onClick={() => { setChatScope('mine'); selectSession(s, 'mine'); }}
+                                                        <div key={s.id} onClick={() => { if (sessionClickTimerRef.current) clearTimeout(sessionClickTimerRef.current); sessionClickTimerRef.current = setTimeout(() => { setChatScope('mine'); selectSession(s, 'mine'); }, 250); }}
                                                             className="session-item"
                                                             style={{ padding: '8px 12px', cursor: 'pointer', borderLeft: isActive ? '2px solid var(--accent-primary)' : '2px solid transparent', background: isActive ? 'var(--bg-secondary)' : 'transparent', marginBottom: '1px', display: 'flex', alignItems: 'center', gap: '4px' }}
                                                             onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-secondary)'; }}
                                                             onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'transparent'; }}>
                                                             <div style={{ flex: 1, minWidth: 0 }}>
                                                                 <div style={{ display: 'flex', alignItems: 'center', gap: '5px', marginBottom: '2px' }}>
-                                                                    <div style={{ fontSize: '12px', fontWeight: isActive ? 600 : 400, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, minWidth: 0 }}>{s.title}</div>
+                                                                    {editingSessionId === s.id ? (
+                                                                        <input
+                                                                            autoFocus
+                                                                            value={editingTitle}
+                                                                            onChange={e => setEditingTitle(e.target.value)}
+                                                                            onKeyDown={e => {
+                                                                                if (e.key === 'Enter') saveSessionTitle(s.id, editingTitle);
+                                                                                if (e.key === 'Escape') setEditingSessionId(null);
+                                                                            }}
+                                                                            onBlur={() => saveSessionTitle(s.id, editingTitle)}
+                                                                            onClick={e => e.stopPropagation()}
+                                                                            style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-primary)', width: '100%', border: '1px solid var(--accent-primary)', borderRadius: '3px', padding: '1px 4px', outline: 'none', background: 'var(--bg-primary)' }}
+                                                                        />
+                                                                    ) : (
+                                                                        <div
+                                                                            style={{ fontSize: '12px', fontWeight: isActive ? 600 : 400, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, minWidth: 0 }}
+                                                                            onDoubleClick={(e) => { e.stopPropagation(); if (sessionClickTimerRef.current) clearTimeout(sessionClickTimerRef.current); setEditingSessionId(s.id); setEditingTitle(s.title); }}
+                                                                            onTouchStart={() => { longPressTimerRef.current = setTimeout(() => { setEditingSessionId(s.id); setEditingTitle(s.title); }, 500); }}
+                                                                            onTouchEnd={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                                            onTouchMove={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                                        >
+                                                                            {s.title}
+                                                                        </div>
+                                                                    )}
                                                                     {s.is_primary && (
                                                                         <span style={{
                                                                             fontSize: '9px',
@@ -5939,7 +6097,30 @@ export default function AgentDetailPage() {
                                         >
                                             {chatMessages.length === 0 && !showNoModelState && (
                                                 <div className="chat-empty-state">
-                                                    <div className="chat-empty-state__title">{activeSession?.title || t('agent.chat.startChat')}</div>
+                                                    {activeSession && editingSessionId === activeSession.id ? (
+                                                        <input
+                                                            autoFocus
+                                                            value={editingTitle}
+                                                            onChange={e => setEditingTitle(e.target.value)}
+                                                            onKeyDown={e => {
+                                                                if (e.key === 'Enter') saveSessionTitle(activeSession.id, editingTitle);
+                                                                if (e.key === 'Escape') setEditingSessionId(null);
+                                                            }}
+                                                            onBlur={() => saveSessionTitle(activeSession.id, editingTitle)}
+                                                            style={{ fontSize: '13px', marginBottom: '4px', border: '1px solid var(--accent-primary)', borderRadius: '3px', padding: '1px 6px', outline: 'none', background: 'var(--bg-primary)', color: 'var(--text-primary)', width: '100%' }}
+                                                        />
+                                                    ) : (
+                                                        <div
+                                                            className="chat-empty-state__title"
+                                                            style={{ cursor: activeSession ? 'text' : 'default' }}
+                                                            onDoubleClick={() => { if (activeSession) { setEditingSessionId(activeSession.id); setEditingTitle(activeSession.title); } }}
+                                                            onTouchStart={() => { if (activeSession) { longPressTimerRef.current = setTimeout(() => { setEditingSessionId(activeSession.id); setEditingTitle(activeSession.title); }, 500); } }}
+                                                            onTouchEnd={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                            onTouchMove={() => { if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current); }}
+                                                        >
+                                                            {activeSession?.title || t('agent.chat.startChat')}
+                                                        </div>
+                                                    )}
                                                     <div className="chat-empty-state__subtitle">{t('agent.chat.startConversation', { name: agent.name })}</div>
                                                     <div className="chat-empty-state__hint">{t('agent.chat.fileSupport')}</div>
                                                 </div>
@@ -6088,6 +6269,32 @@ export default function AgentDetailPage() {
                                                         );
                                                     }
                                                     const { msg, i } = entry;
+                                                    if (msg.isSkillIndicator) {
+                                                        return (
+                                                            <div key={i} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '6px' }}>
+                                                                <div style={{
+                                                                    display: 'inline-block',
+                                                                    padding: '4px 12px',
+                                                                    borderRadius: '12px',
+                                                                    background: 'var(--bg-secondary, #2a2a2a)',
+                                                                    color: 'var(--text-secondary, #888)',
+                                                                    fontSize: '12px',
+                                                                    margin: '4px 0',
+                                                                }}>
+                                                                    {msg.content}
+                                                                </div>
+                                                                {msg.hiddenContent && (
+                                                                    <button
+                                                                        onClick={() => setDrawerContent({ name: msg.content, content: msg.hiddenContent! })}
+                                                                        style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary, #666)', fontSize: '14px', padding: '2px 4px', borderRadius: '4px' }}
+                                                                        onMouseEnter={e => (e.currentTarget.style.color = 'var(--text-primary, #fff)')}
+                                                                        onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-tertiary, #666)')}
+                                                                        title="View skill context"
+                                                                    >👁</button>
+                                                                )}
+                                                            </div>
+                                                        );
+                                                    }
                                                     // All remaining messages have real content; render as chat bubbles
                                                     if (msg.role === 'assistant' && msg.thinking) {
                                                         const contentText = msg.content?.trim() || '';
@@ -6154,13 +6361,6 @@ export default function AgentDetailPage() {
                                             </div>
                                         )}
                                         {/* Transient info banner — e.g. fallback model switch */}
-                                        {chatInfoMsg && (
-                                            <div style={{ padding: '6px 14px', borderTop: '1px solid rgba(99,102,241,0.25)', background: 'rgba(99,102,241,0.07)', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', color: 'var(--text-secondary)', animation: 'fadeIn 0.2s ease' }}>
-                                                <span style={{ opacity: 0.7 }}>ℹ️</span>
-                                                <span style={{ flex: 1 }}>{chatInfoMsg}</span>
-                                                <button onClick={() => setChatInfoMsg(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary)', fontSize: '14px', lineHeight: 1, padding: '0 2px' }}>✕</button>
-                                            </div>
-                                        )}
                                         {agentExpired ? (
                                             <div style={{ padding: '7px 16px', borderTop: '1px solid rgba(245,158,11,0.3)', background: 'rgba(245,158,11,0.08)', display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px', color: 'rgb(180,100,0)' }}>
                                                 <span>⏸</span>
@@ -6239,28 +6439,16 @@ export default function AgentDetailPage() {
                                                 </div>
                                             )}
                                             <div className="chat-composer-input-block">
-                                                <textarea
-                                                    ref={chatInputRef}
-                                                    className="chat-input"
-                                                    disabled={showNoModelState}
+                                                <SkillAutocomplete
                                                     value={chatInput}
-                                                    onChange={e => {
-                                                        setChatInput(e.target.value);
-                                                        // Auto-grow: reset height then expand to scrollHeight
-                                                        const el = e.target;
-                                                        el.style.height = 'auto';
-                                                        el.style.height = el.scrollHeight + 'px';
-                                                    }}
-                                                    onKeyDown={e => {
-                                                        // Enter sends the message; Shift+Enter inserts a newline
-                                                        if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing && !isWaiting && !isStreaming) {
-                                                            e.preventDefault();
-                                                            sendChatMsg();
-                                                        }
-                                                    }}
-                                                    onPaste={handlePaste}
+                                                    onChange={setChatInput}
+                                                    onSubmit={sendChatMsg}
+                                                    skillMap={agent?.skill_map || {}}
                                                     placeholder={showNoModelState ? t('agent.chat.noModelPlaceholder', 'Configure a company model to start chatting') : (!wsConnected && !!currentUser && sessionUserIdStr(activeSession) === viewerUserIdStr() ? 'Connecting...' : t('chat.placeholder'))}
-                                                    rows={1}
+                                                    className="chat-input"
+                                                    disabled={showNoModelState || isWaiting || isStreaming}
+                                                    inputRef={chatInputRef}
+                                                    onPaste={handlePaste}
                                                 />
                                             </div>
                                             <div className="chat-composer-toolbar">
@@ -6666,6 +6854,21 @@ export default function AgentDetailPage() {
                 )
             }
 
+        {drawerContent && (
+            <>
+                <div onClick={() => setDrawerContent(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.3)', zIndex: 1000 }} />
+                <div style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: '40vw', minWidth: '320px', maxWidth: '600px', background: 'var(--bg-primary, #1a1a1a)', boxShadow: '-4px 0 20px rgba(0,0,0,0.15)', zIndex: 1001, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+                    <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-color, #333)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-primary, #fff)' }}>{drawerContent.name}</div>
+                        <button onClick={() => setDrawerContent(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '18px', color: 'var(--text-tertiary, #666)', padding: '4px' }}>✕</button>
+                    </div>
+                    <div style={{ flex: 1, overflow: 'auto', padding: '20px' }}>
+                        <MarkdownRenderer content={drawerContent.content} />
+                    </div>
+                </div>
+            </>
+        )}
+
         </>
     );
 }
diff --git a/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx b/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx
index 56d9115c9..708543baf 100644
--- a/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx
+++ b/frontend/src/pages/agent-detail/tabs/SkillsTab.tsx
@@ -1,4 +1,4 @@
-import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import { useState, type Dispatch, type ReactNode, type SetStateAction } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { IconDownload, IconFolder, IconTools } from '@tabler/icons-react';
 import { useTranslation } from 'react-i18next';
@@ -69,6 +69,14 @@ export default function SkillsTab(props: Props) {
     const dialog = useDialog();
     const toast = useToast();
     const queryClient = useQueryClient();
+    const [showZipModal, setShowZipModal] = useState(false);
+    const [zipFile, setZipFile] = useState<File | null>(null);
+    const [zipPreview, setZipPreview] = useState<{ root_folder: string; files: string[]; total: number } | null>(null);
+    const [zipRootName, setZipRootName] = useState('');
+    const [zipUploading, setZipUploading] = useState(false);
+    const [skillsBrowserPath, setSkillsBrowserPath] = useState('skills');
+    const [browserRefreshToken, setBrowserRefreshToken] = useState(0);
+    const refreshSkillBrowser = () => setBrowserRefreshToken((v) => v + 1);
     const adapter: FileBrowserApi = {
         list: (path) => fileApi.list(agentId, path),
         read: (path) => fileApi.read(agentId, path),
@@ -118,6 +126,18 @@ export default function SkillsTab(props: Props) {
                         >
                             Import from Presets
                         </button>
+                        <button
+                            className="btn btn-outline"
+                            style={{ display: 'flex', alignItems: 'center', gap: '6px', whiteSpace: 'nowrap' }}
+                            onClick={() => {
+                                setShowZipModal(true);
+                                setZipFile(null);
+                                setZipPreview(null);
+                                setZipRootName('');
+                            }}
+                        >
+                            Import Skill Package
+                        </button>
                     </div>
                 </div>
                 <div style={{ marginTop: '8px', padding: '10px 14px', background: 'var(--bg-secondary)', borderRadius: '8px', fontSize: '12px', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
@@ -126,7 +146,7 @@ export default function SkillsTab(props: Props) {
                 </div>
             </div>
 
-            <FileBrowser api={adapter} rootPath="skills" features={{ newFile: true, edit: true, delete: canManage, newFolder: true, upload: true, directoryNavigation: true }} title={t('agent.skills.skillFiles')} />
+            <FileBrowser api={adapter} rootPath="skills" features={{ newFile: true, edit: true, delete: canManage, newFolder: true, upload: true, directoryNavigation: true }} title={t('agent.skills.skillFiles')} onPathChange={setSkillsBrowserPath} refreshToken={browserRefreshToken} />
 
             {showAgentClawhub && (
                 <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setShowAgentClawhub(false)}>
@@ -182,6 +202,7 @@ export default function SkillsTab(props: Props) {
                                                 const response = await skillApi.agentImport.fromClawhub(agentId, result.slug);
                                                 toast.success(`已安装 "${result.displayName || result.slug}"（${response.files_written} 个文件）`);
                                                 queryClient.invalidateQueries({ queryKey: ['files', agentId, 'skills'] });
+                                                refreshSkillBrowser();
                                             } catch (err: any) {
                                                 await dialog.alert('安装失败', { type: 'error', details: String(err?.message || err) });
                                             } finally {
@@ -226,6 +247,7 @@ export default function SkillsTab(props: Props) {
                                         const response = await skillApi.agentImport.fromUrl(agentId, agentUrlInput.trim());
                                         toast.success(`已导入 ${response.files_written} 个文件`);
                                         queryClient.invalidateQueries({ queryKey: ['files', agentId, 'skills'] });
+                                                refreshSkillBrowser();
                                         setShowAgentUrlImport(false);
                                     } catch (err: any) {
                                         await dialog.alert('导入失败', { type: 'error', details: String(err?.message || err) });
@@ -294,6 +316,7 @@ export default function SkillsTab(props: Props) {
                                                     const response = await fileApi.importSkill(agentId, skill.id);
                                                     toast.success(`已导入 "${skill.name}"（${response.files_written} 个文件）`);
                                                     queryClient.invalidateQueries({ queryKey: ['files', agentId, 'skills'] });
+                                                refreshSkillBrowser();
                                                     setShowImportSkillModal(false);
                                                 } catch (err: any) {
                                                     await dialog.alert('导入失败', { type: 'error', details: String(err?.message || err) });
@@ -310,6 +333,122 @@ export default function SkillsTab(props: Props) {
                         </div>
                     </div>
                 </div>
+
+            )}
+
+            {showZipModal && (
+                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.5)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => setShowZipModal(false)}>
+                    <div onClick={(e) => e.stopPropagation()} style={{ background: 'var(--bg-primary)', borderRadius: '12px', padding: '24px', maxWidth: '600px', width: '90%', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}>
+                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                            <h3>Import Skill Package</h3>
+                            <button onClick={() => setShowZipModal(false)} style={{ background: 'none', border: 'none', fontSize: '18px', cursor: 'pointer', color: 'var(--text-secondary)', padding: '4px 8px' }}>x</button>
+                        </div>
+
+                        {!zipPreview ? (
+                            <div>
+                                <p style={{ color: 'var(--text-secondary)', marginBottom: '16px', fontSize: '13px' }}>
+                                    Select a .zip file containing skill definitions (.md files with YAML frontmatter).
+                                </p>
+                                <input
+                                    type="file"
+                                    accept=".zip"
+                                    onChange={async (e) => {
+                                        const f = e.target.files?.[0];
+                                        if (!f) return;
+                                        setZipFile(f);
+                                        const formData = new FormData();
+                                        formData.append('file', f);
+                                        try {
+                                            const token = localStorage.getItem('token');
+                                            const res = await fetch(`/api/agents/${agentId}/files/preview-zip`, {
+                                                method: 'POST',
+                                                headers: { Authorization: `Bearer ${token}` },
+                                                body: formData,
+                                            });
+                                            if (!res.ok) throw new Error(await res.text());
+                                            const data = await res.json();
+                                            setZipPreview(data);
+                                            setZipRootName(data.root_folder || '');
+                                        } catch (err: any) {
+                                            await dialog.alert('Failed to preview zip', { type: 'error', details: String(err?.message || err) });
+                                        }
+                                    }}
+                                />
+                            </div>
+                        ) : (
+                            <div>
+                                <p style={{ marginBottom: '8px', fontSize: '13px' }}>
+                                    <strong>{zipPreview.total}</strong> files found in zip
+                                </p>
+
+                                <div style={{ marginBottom: '16px' }}>
+                                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
+                                        Extract as folder:
+                                    </label>
+                                    <input
+                                        className="input"
+                                        type="text"
+                                        value={zipRootName}
+                                        onChange={e => setZipRootName(e.target.value)}
+                                        placeholder="(empty = extract contents directly)"
+                                        style={{ width: '100%', fontSize: '13px', boxSizing: 'border-box' }}
+                                    />
+                                    <p style={{ fontSize: '12px', color: 'var(--text-secondary)', marginTop: '4px' }}>
+                                        Will extract to: {skillsBrowserPath}/{zipRootName ? zipRootName + '/' : ''}...
+                                    </p>
+                                </div>
+
+                                <div style={{ maxHeight: '200px', overflowY: 'auto', fontSize: '12px', background: 'var(--bg-secondary)', padding: '8px', borderRadius: '4px', marginBottom: '16px' }}>
+                                    {zipPreview.files.slice(0, 20).map((f, i) => (
+                                        <div key={i} style={{ padding: '2px 0', color: 'var(--text-secondary)' }}>{f}</div>
+                                    ))}
+                                    {zipPreview.total > 20 && (
+                                        <div style={{ padding: '2px 0', color: 'var(--text-secondary)', fontStyle: 'italic' }}>
+                                            ...and {zipPreview.total - 20} more files
+                                        </div>
+                                    )}
+                                </div>
+
+                                <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
+                                    <button className="btn btn-secondary" onClick={() => setShowZipModal(false)}>Cancel</button>
+                                    <button
+                                        className="btn btn-primary"
+                                        disabled={zipUploading}
+                                        onClick={async () => {
+                                            if (!zipFile) return;
+                                            setZipUploading(true);
+                                            try {
+                                                const token = localStorage.getItem('token');
+                                                const formData = new FormData();
+                                                const subPath = skillsBrowserPath.startsWith('skills/') ? skillsBrowserPath.slice(7) : '';
+                                                formData.append('file', zipFile);
+                                                formData.append('target_path', subPath);
+                                                formData.append('root_name', zipRootName);
+                                                const res = await fetch(`/api/agents/${agentId}/files/extract-zip`, {
+                                                    method: 'POST',
+                                                    headers: { Authorization: `Bearer ${token}` },
+                                                    body: formData,
+                                                });
+                                                if (!res.ok) throw new Error(await res.text());
+                                                const data = await res.json();
+                                                toast.success(`Extracted ${data.extracted} files successfully`);
+                                                setShowZipModal(false);
+                                                queryClient.invalidateQueries({ queryKey: ['files', agentId, 'skills'] });
+                                                refreshSkillBrowser();
+                                            } catch (err: any) {
+                                                await dialog.alert('Failed to extract zip', { type: 'error', details: String(err?.message || err) });
+                                            } finally {
+                                                setZipUploading(false);
+                                            }
+                                        }}
+                                    >
+                                        {zipUploading ? 'Extracting...' : 'Extract'}
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
             )}
         </div>
     );
diff --git a/frontend/src/pages/enterprise-settings/tabs/LlmTab.tsx b/frontend/src/pages/enterprise-settings/tabs/LlmTab.tsx
index 4466f8caa..274cd00ad 100644
--- a/frontend/src/pages/enterprise-settings/tabs/LlmTab.tsx
+++ b/frontend/src/pages/enterprise-settings/tabs/LlmTab.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { IconEdit } from '@tabler/icons-react';
@@ -62,6 +62,7 @@ export default function LlmTab({ selectedTenantId }: LlmTabProps) {
     const currentUser = useAuthStore((s) => s.user);
     const [showAddModel, setShowAddModel] = useState(false);
     const [editingModelId, setEditingModelId] = useState<string | null>(null);
+    const [utilityModelId, setUtilityModelId] = useState<string>('');
     const [modelForm, setModelForm] = useState({
         provider: 'anthropic',
         model: '',
@@ -92,6 +93,13 @@ export default function LlmTab({ selectedTenantId }: LlmTabProps) {
     });
     const providerOptions = providerSpecs.length > 0 ? providerSpecs : FALLBACK_LLM_PROVIDERS;
 
+
+    useEffect(() => {
+        fetchJson<any>(`/enterprise/tenant-quotas${selectedTenantId ? `?tenant_id=${selectedTenantId}` : ''}`)
+            .then((d) => setUtilityModelId(d?.utility_model_id || ''))
+            .catch(() => {});
+    }, [selectedTenantId]);
+
     const addModel = useMutation({
         mutationFn: (data: any) => fetchJson(`/enterprise/llm-models${selectedTenantId ? `?tenant_id=${selectedTenantId}` : ''}`, { method: 'POST', body: JSON.stringify(data) }),
         onSuccess: () => {
@@ -232,6 +240,41 @@ export default function LlmTab({ selectedTenantId }: LlmTabProps) {
 
     return (
         <div>
+            <div style={{ marginBottom: '20px', padding: '16px', background: 'var(--bg-secondary)', borderRadius: '8px' }}>
+                <div style={{ fontSize: '13px', fontWeight: 600, marginBottom: '8px', color: 'var(--text-primary)' }}>
+                    {t('enterprise.llm.utilityModel')}
+                </div>
+                <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '10px' }}>
+                    {t('enterprise.llm.utilityModelDesc')}
+                </div>
+                <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                    <select
+                        value={utilityModelId}
+                        onChange={async (e) => {
+                            const val = e.target.value;
+                            setUtilityModelId(val);
+                            try {
+                                await fetchJson(`/enterprise/tenant-quotas${selectedTenantId ? `?tenant_id=${selectedTenantId}` : ''}`, {
+                                    method: 'PATCH',
+                                    body: JSON.stringify({ utility_model_id: val || '' }),
+                                });
+                            } catch (err) {
+                                console.error('Failed to update utility model:', err);
+                            }
+                        }}
+                        style={{
+                            padding: '6px 10px', borderRadius: '6px', border: '1px solid var(--border-color)',
+                            background: 'var(--bg-primary)', color: 'var(--text-primary)', fontSize: '12px',
+                            minWidth: '200px',
+                        }}
+                    >
+                        <option value="">{t('enterprise.llm.noUtilityModel')}</option>
+                        {(models || []).filter((m: any) => m.is_enabled !== false && m.enabled !== false).map((m: any) => (
+                            <option key={m.id} value={m.id}>{m.label || `${m.provider}/${m.model}`}</option>
+                        ))}
+                    </select>
+                </div>
+            </div>
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
                 <button className="btn btn-primary" onClick={openCreateForm}>+ {t('enterprise.llm.addModel')}</button>
             </div>
diff --git a/frontend/src/pages/enterprise-settings/tabs/SkillsTab.tsx b/frontend/src/pages/enterprise-settings/tabs/SkillsTab.tsx
index 88a4cd9de..bf9966966 100644
--- a/frontend/src/pages/enterprise-settings/tabs/SkillsTab.tsx
+++ b/frontend/src/pages/enterprise-settings/tabs/SkillsTab.tsx
@@ -3,6 +3,10 @@ import { useTranslation } from 'react-i18next';
 import PromptModal from '../../../components/PromptModal';
 import FileBrowser from '../../../components/FileBrowser';
 import type { FileBrowserApi } from '../../../components/FileBrowser';
+import SkillFolderUploadModal from '../../../components/skills/SkillFolderUploadModal';
+import SkillsActionBar, { type SkillsActionBarAction } from '../../../components/skills/SkillsActionBar';
+import { createEnterpriseSkillUploadAdapter } from '../../../components/skills/skillUploadSurfaceAdapters';
+import { getEnterpriseSkillActionIds, type SkillActionId } from '../../../components/skills/skillsActionItems';
 import { skillApi } from '../../../services/api';
 
 // ─── Skills Tab ────────────────────────────────────
@@ -11,6 +15,7 @@ export default function SkillsTab() {
     const [refreshKey, setRefreshKey] = useState(0);
     const [showClawhubModal, setShowClawhubModal] = useState(false);
     const [showUrlModal, setShowUrlModal] = useState(false);
+    const [showSkillFolderUploadModal, setShowSkillFolderUploadModal] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const [searchResults, setSearchResults] = useState<any[]>([]);
     const [searching, setSearching] = useState(false);
@@ -40,6 +45,12 @@ export default function SkillsTab() {
         delete: (path: string) => skillApi.browse.delete(path),
     }), []);
 
+    const uploadAdapter = useMemo(() => createEnterpriseSkillUploadAdapter({
+        preview: (file, targetFolder) => skillApi.folderUpload.preview(file, targetFolder),
+        apply: (input) => skillApi.folderUpload.apply(input),
+        refresh: () => setRefreshKey(k => k + 1),
+    }), []);
+
     const handleSearch = async () => {
         if (!searchQuery.trim()) return;
         setSearching(true);
@@ -98,6 +109,57 @@ export default function SkillsTab() {
         setUrlImporting(false);
     };
 
+    const handleSettingsClick = async () => {
+        setShowSettings(s => !s);
+        if (!tokenStatus) {
+            try {
+                const status = await skillApi.settings.getToken();
+                setTokenStatus(status);
+            } catch {
+                // ignore
+            }
+        }
+    };
+
+    const actionConfig: Record<SkillActionId, SkillsActionBarAction | undefined> = {
+        settings: {
+            id: 'settings',
+            label: t('common.settings', 'Settings'),
+            title: t('common.settings', 'Settings'),
+            onClick: handleSettingsClick,
+        },
+        'upload-folder': {
+            id: 'upload-folder',
+            label: t('enterprise.tools.uploadFolderModal.openButton'),
+            onClick: () => setShowSkillFolderUploadModal(true),
+        },
+        'import-url': {
+            id: 'import-url',
+            label: t('enterprise.tools.importFromUrl'),
+            onClick: () => {
+                setShowUrlModal(true);
+                setUrlInput('');
+                setUrlPreview(null);
+            },
+        },
+        'browse-clawhub': {
+            id: 'browse-clawhub',
+            label: t('enterprise.tools.browseClawhub'),
+            variant: 'primary',
+            onClick: () => {
+                setShowClawhubModal(true);
+                setSearchQuery('');
+                setSearchResults([]);
+                setHasSearched(false);
+            },
+        },
+        'import-presets': undefined,
+    };
+
+    const enterpriseActions = getEnterpriseSkillActionIds()
+        .map((id) => actionConfig[id])
+        .filter((action): action is SkillsActionBarAction => Boolean(action));
+
     const tierBadge = (tier: number) => {
         const styles: Record<number, { bg: string; color: string; label: string }> = {
             1: { bg: 'rgba(52,199,89,0.12)', color: 'var(--success, #34c759)', label: 'Tier 1 · Pure Prompt' },
@@ -114,49 +176,11 @@ export default function SkillsTab() {
 
     return (
         <div>
-            <div style={{ marginBottom: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-                <div>
-                    <h3>{t('enterprise.tabs.skills', 'Skill Registry')}</h3>
-                    <p style={{ fontSize: '13px', color: 'var(--text-tertiary)', marginTop: '4px' }}>
-                        {t('enterprise.tools.manageGlobalSkills')}
-                    </p>
-                </div>
-                <div style={{ display: 'flex', gap: '8px', flexShrink: 0 }}>
-                    <button
-                        className="btn btn-secondary"
-                        style={{ fontSize: '13px', padding: '6px 10px', minWidth: 'auto' }}
-                        onClick={async () => {
-                            setShowSettings(s => !s);
-                            if (!tokenStatus) {
-                                try {
-                                    const status = await skillApi.settings.getToken();
-                                    setTokenStatus(status);
-                                } catch { /* ignore */ }
-                            }
-                        }}
-                        title="Settings"
-                    >
-                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                            <circle cx="12" cy="12" r="3" />
-                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-                        </svg>
-                    </button>
-                    <button
-                        className="btn btn-secondary"
-                        style={{ fontSize: '13px' }}
-                        onClick={() => { setShowUrlModal(true); setUrlInput(''); setUrlPreview(null); }}
-                    >
-                        {t('enterprise.tools.importFromUrl')}
-                    </button>
-                    <button
-                        className="btn btn-primary"
-                        style={{ fontSize: '13px' }}
-                        onClick={() => { setShowClawhubModal(true); setSearchQuery(''); setSearchResults([]); setHasSearched(false); }}
-                    >
-                        {t('enterprise.tools.browseClawhub')}
-                    </button>
-                </div>
-            </div>
+            <SkillsActionBar
+                title={t('enterprise.tabs.skills', 'Skill Registry')}
+                description={t('enterprise.tools.manageGlobalSkills')}
+                actions={enterpriseActions}
+            />
 
             {/* GitHub Token Settings Panel */}
             {showSettings && (
@@ -328,6 +352,15 @@ export default function SkillsTab() {
                 onRefresh={() => setRefreshKey(k => k + 1)}
             />
 
+            <SkillFolderUploadModal
+                open={showSkillFolderUploadModal}
+                onClose={() => setShowSkillFolderUploadModal(false)}
+                i18nPrefix="enterprise.tools.uploadFolderModal"
+                previewRequest={uploadAdapter.previewRequest}
+                applyRequest={uploadAdapter.applyRequest}
+                onApplied={uploadAdapter.onApplied}
+            />
+
             {/* Toast */}
             {toast && (
                 <div style={{
@@ -482,783 +515,3 @@ export default function SkillsTab() {
         </div>
     );
 }
-
-
-
-
-// ─── Company Identity Editor ───────────────────────
-function CompanyLogoCropModal({ imageUrl, imageName, onCancel, onSave }: {
-    imageUrl: string;
-    imageName: string;
-    onCancel: () => void;
-    onSave: (blob: Blob) => void;
-}) {
-    const { t } = useTranslation();
-    const imgRef = useRef<HTMLImageElement>(null);
-    const [naturalSize, setNaturalSize] = useState({ width: 1, height: 1 });
-    const [zoom, setZoom] = useState(1);
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
-    const [dragStart, setDragStart] = useState<{ x: number; y: number; ox: number; oy: number } | null>(null);
-    const cropSize = 240;
-
-    const clampOffset = (next: { x: number; y: number }, nextZoom = zoom) => {
-        const baseScale = Math.max(cropSize / naturalSize.width, cropSize / naturalSize.height);
-        const displayW = naturalSize.width * baseScale * nextZoom;
-        const displayH = naturalSize.height * baseScale * nextZoom;
-        const maxX = Math.max(0, (displayW - cropSize) / 2);
-        const maxY = Math.max(0, (displayH - cropSize) / 2);
-        return {
-            x: Math.min(maxX, Math.max(-maxX, next.x)),
-            y: Math.min(maxY, Math.max(-maxY, next.y)),
-        };
-    };
-
-    const handleSave = () => {
-        const img = imgRef.current;
-        if (!img) return;
-        const outputSize = 512;
-        const ratio = outputSize / cropSize;
-        const baseScale = Math.max(cropSize / naturalSize.width, cropSize / naturalSize.height);
-        const displayW = naturalSize.width * baseScale * zoom;
-        const displayH = naturalSize.height * baseScale * zoom;
-        const dx = ((cropSize - displayW) / 2 + offset.x) * ratio;
-        const dy = ((cropSize - displayH) / 2 + offset.y) * ratio;
-        const canvas = document.createElement('canvas');
-        canvas.width = outputSize;
-        canvas.height = outputSize;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) return;
-        ctx.fillStyle = '#fff';
-        ctx.fillRect(0, 0, outputSize, outputSize);
-        ctx.drawImage(img, dx, dy, displayW * ratio, displayH * ratio);
-        canvas.toBlob((blob) => {
-            if (blob) onSave(blob);
-        }, 'image/png');
-    };
-
-    return (
-        <div className="tenant-logo-crop-backdrop" onClick={onCancel}>
-            <div className="tenant-logo-crop-modal" onClick={e => e.stopPropagation()}>
-                <div className="tenant-logo-crop-header">
-                    <div>
-                        <h3>{t('enterprise.logo.cropTitle', 'Crop company logo')}</h3>
-                        <p>{imageName}</p>
-                    </div>
-                    <button type="button" onClick={onCancel}>×</button>
-                </div>
-                <div
-                    className="tenant-logo-crop-stage"
-                    onPointerDown={e => {
-                        (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-                        setDragStart({ x: e.clientX, y: e.clientY, ox: offset.x, oy: offset.y });
-                    }}
-                    onPointerMove={e => {
-                        if (!dragStart) return;
-                        setOffset(clampOffset({
-                            x: dragStart.ox + e.clientX - dragStart.x,
-                            y: dragStart.oy + e.clientY - dragStart.y,
-                        }));
-                    }}
-                    onPointerUp={() => setDragStart(null)}
-                    onPointerCancel={() => setDragStart(null)}
-                >
-                    <img
-                        ref={imgRef}
-                        src={imageUrl}
-                        alt=""
-                        draggable={false}
-                        onLoad={e => {
-                            const img = e.currentTarget;
-                            setNaturalSize({ width: img.naturalWidth || 1, height: img.naturalHeight || 1 });
-                            setOffset({ x: 0, y: 0 });
-                            setZoom(1);
-                        }}
-                        style={{
-                            width: `${naturalSize.width * Math.max(cropSize / naturalSize.width, cropSize / naturalSize.height)}px`,
-                            height: `${naturalSize.height * Math.max(cropSize / naturalSize.width, cropSize / naturalSize.height)}px`,
-                            transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
-                        }}
-                    />
-                </div>
-                <div className="tenant-logo-crop-controls">
-                    <span>{t('enterprise.logo.zoom', 'Zoom')}</span>
-                    <input
-                        type="range"
-                        min="1"
-                        max="3"
-                        step="0.01"
-                        value={zoom}
-                        onChange={e => {
-                            const nextZoom = Number(e.target.value);
-                            setZoom(nextZoom);
-                            setOffset(prev => clampOffset(prev, nextZoom));
-                        }}
-                    />
-                </div>
-                <div className="tenant-logo-crop-actions">
-                    <button className="btn btn-secondary" type="button" onClick={onCancel}>{t('common.cancel', 'Cancel')}</button>
-                    <button className="btn btn-primary" type="button" onClick={handleSave}>{t('common.save', 'Save')}</button>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function CompanyLogoEditor() {
-    const { t } = useTranslation();
-    const qc = useQueryClient();
-    const tenantId = localStorage.getItem('current_tenant_id') || '';
-    const [name, setName] = useState('');
-    const [logoUrl, setLogoUrl] = useState('');
-    const [logoError, setLogoError] = useState('');
-    const [logoSaving, setLogoSaving] = useState(false);
-    const [cropSource, setCropSource] = useState<{ url: string; name: string } | null>(null);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-
-    useEffect(() => {
-        if (!tenantId) return;
-        fetchJson<any>(`/tenants/${tenantId}`)
-            .then(d => {
-                if (d?.name) setName(d.name);
-                setLogoUrl(d?.logo_url || '');
-            })
-            .catch(() => { });
-    }, [tenantId]);
-
-    const handleLogoFile = (file: File | undefined) => {
-        setLogoError('');
-        if (!file) return;
-        if (file.size > 1024 * 1024) {
-            setLogoError(t('enterprise.logo.tooLarge', 'Logo image must be 1 MB or smaller.'));
-            return;
-        }
-        if (!file.type.startsWith('image/')) {
-            setLogoError(t('enterprise.logo.invalidType', 'Please choose an image file.'));
-            return;
-        }
-        setCropSource({ url: URL.createObjectURL(file), name: file.name });
-    };
-
-    const uploadCroppedLogo = async (blob: Blob) => {
-        if (!tenantId) return;
-        setLogoError('');
-        if (blob.size > 1024 * 1024) {
-            setLogoError(t('enterprise.logo.croppedTooLarge', 'Cropped logo is still larger than 1 MB.'));
-            return;
-        }
-        setLogoSaving(true);
-        try {
-            const form = new FormData();
-            form.append('file', blob, 'company-logo.png');
-            const res = await fetch(`/api/tenants/${tenantId}/logo`, {
-                method: 'POST',
-                headers: { Authorization: `Bearer ${localStorage.getItem('token') || ''}` },
-                body: form,
-            });
-            if (!res.ok) {
-                throw new Error(t('enterprise.logo.uploadFailed', 'Failed to upload logo.'));
-            }
-            const tenant = await res.json();
-            setLogoUrl(tenant.logo_url || '');
-            setCropSource(null);
-            qc.invalidateQueries({ queryKey: ['tenant', tenantId] });
-            qc.invalidateQueries({ queryKey: ['my-tenants'] });
-        } catch (e: any) {
-            setLogoError(e.message || t('enterprise.logo.uploadFailed', 'Failed to upload logo.'));
-        } finally {
-            setLogoSaving(false);
-        }
-    };
-
-    const resetLogo = async () => {
-        if (!tenantId || !logoUrl) return;
-        setLogoError('');
-        setLogoSaving(true);
-        try {
-            const res = await fetch(`/api/tenants/${tenantId}/logo`, {
-                method: 'DELETE',
-                headers: { Authorization: `Bearer ${localStorage.getItem('token') || ''}` },
-            });
-            if (!res.ok) {
-                throw new Error(t('enterprise.logo.resetFailed', 'Failed to reset logo.'));
-            }
-            setLogoUrl('');
-            qc.invalidateQueries({ queryKey: ['tenant', tenantId] });
-            qc.invalidateQueries({ queryKey: ['my-tenants'] });
-        } catch (e: any) {
-            setLogoError(e.message || t('enterprise.logo.resetFailed', 'Failed to reset logo.'));
-        } finally {
-            setLogoSaving(false);
-        }
-    };
-
-    return (
-        <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
-            <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px' }}>
-                {t('enterprise.logo.title', 'Company Logo')}
-            </div>
-            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '14px' }}>
-                {t('enterprise.logo.description', 'Used in the sidebar workspace switcher and company selection menus.')}
-            </div>
-            <div className="company-identity-logo-row">
-                <div className="company-identity-logo-preview">
-                    {logoUrl ? <img src={logoUrl} alt="" /> : <span>{(Array.from(name.trim())[0] as string | undefined)?.toUpperCase() || 'C'}</span>}
-                </div>
-                <div>
-                    <input
-                        ref={fileInputRef}
-                        type="file"
-                        accept="image/png,image/jpeg,image/webp"
-                        style={{ display: 'none' }}
-                        onChange={e => {
-                            handleLogoFile(e.target.files?.[0]);
-                            e.currentTarget.value = '';
-                        }}
-                    />
-                    <button className="btn btn-secondary" type="button" onClick={() => fileInputRef.current?.click()} disabled={logoSaving}>
-                        {logoSaving ? t('common.loading') : t('enterprise.logo.upload', 'Upload logo')}
-                    </button>
-                    {logoUrl && (
-                        <button
-                            className="btn btn-ghost"
-                            type="button"
-                            onClick={resetLogo}
-                            disabled={logoSaving}
-                            style={{ marginLeft: '8px' }}
-                        >
-                            {t('enterprise.logo.reset', 'Reset to default')}
-                        </button>
-                    )}
-                    <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginTop: '6px' }}>
-                        {t('enterprise.logo.hint', 'PNG, JPG, or WebP. Max 1 MB. You will crop it to a square before saving.')}
-                    </div>
-                    {logoError && <div style={{ fontSize: '12px', color: 'var(--error)', marginTop: '6px' }}>{logoError}</div>}
-                </div>
-            </div>
-            {cropSource && (
-                <CompanyLogoCropModal
-                    imageUrl={cropSource.url}
-                    imageName={cropSource.name}
-                    onCancel={() => setCropSource(null)}
-                    onSave={uploadCroppedLogo}
-                />
-            )}
-        </div>
-    );
-}
-
-function CompanyNameEditor() {
-    const { t } = useTranslation();
-    const qc = useQueryClient();
-    const tenantId = localStorage.getItem('current_tenant_id') || '';
-    const [name, setName] = useState('');
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-
-    useEffect(() => {
-        if (!tenantId) return;
-        fetchJson<any>(`/tenants/${tenantId}`)
-            .then(d => { if (d?.name) setName(d.name); })
-            .catch(() => { });
-    }, [tenantId]);
-
-    const handleSave = async () => {
-        if (!tenantId || !name.trim()) return;
-        setSaving(true);
-        try {
-            await fetchJson(`/tenants/${tenantId}`, {
-                method: 'PUT', body: JSON.stringify({ name: name.trim() }),
-            });
-            qc.invalidateQueries({ queryKey: ['tenants'] });
-            qc.invalidateQueries({ queryKey: ['tenant', tenantId] });
-            qc.invalidateQueries({ queryKey: ['my-tenants'] });
-            setSaved(true);
-            setTimeout(() => setSaved(false), 2000);
-        } catch (e) { }
-        setSaving(false);
-    };
-
-    return (
-        <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
-            <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '10px' }}>
-                {t('enterprise.companyName.title', 'Company Name')}
-            </div>
-            <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-                <input
-                    className="form-input"
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                    placeholder={t('enterprise.companyName.placeholder', 'Enter company name')}
-                    style={{ flex: 1, fontSize: '14px' }}
-                    onKeyDown={e => e.key === 'Enter' && handleSave()}
-                />
-                <button className="btn btn-primary" onClick={handleSave} disabled={saving || !name.trim()}>
-                    {saving ? t('common.loading') : t('common.save', 'Save')}
-                </button>
-                {saved && <IconCheck size={15} stroke={2} style={{ color: 'var(--success)' }} />}
-            </div>
-        </div>
-    );
-}
-
-
-function CompanyTimezoneEditor() {
-    const { t, i18n } = useTranslation();
-    const user = useAuthStore((s) => s.user);
-    const tenantId = user?.tenant_id || localStorage.getItem('current_tenant_id') || '';
-    const regionPickerRef = useRef<HTMLDivElement>(null);
-    const [timezone, setTimezone] = useState('UTC');
-    const [countryRegion, setCountryRegion] = useState('001');
-    const [regionInput, setRegionInput] = useState('');
-    const [regionOpen, setRegionOpen] = useState(false);
-    const [highlightedRegion, setHighlightedRegion] = useState(0);
-    const [saving, setSaving] = useState(false);
-    const [saved, setSaved] = useState(false);
-    const [error, setError] = useState('');
-    const zh = i18n.language?.startsWith('zh');
-    const companyRegions = useMemo(() => buildCompanyRegions(zh ? 'zh-Hans' : 'en'), [zh]);
-    const regionLabel = (r: CompanyRegion) => zh ? r.zh : r.en;
-    const selectedRegion = companyRegions.find(r => r.code === countryRegion) || companyRegions[0];
-    const filteredRegions = useMemo(() => {
-        const query = regionInput.trim().toLowerCase();
-        if (!query || (!regionOpen && regionInput === regionLabel(selectedRegion))) return companyRegions;
-        return companyRegions.filter(r => {
-            const localName = regionLabel(r).toLowerCase();
-            const altName = (zh ? r.en : r.zh).toLowerCase();
-            return localName.includes(query)
-                || altName.includes(query)
-                || r.code.toLowerCase().includes(query)
-                || r.timezone.toLowerCase().includes(query);
-        });
-    }, [companyRegions, regionInput, regionOpen, selectedRegion, zh]);
-
-    useEffect(() => {
-        setRegionInput(regionLabel(selectedRegion));
-    }, [countryRegion, zh]);
-
-    useEffect(() => {
-        if (!regionOpen) return;
-        const handlePointerDown = (e: MouseEvent) => {
-            if (!regionPickerRef.current?.contains(e.target as Node)) {
-                setRegionOpen(false);
-                setRegionInput(regionLabel(selectedRegion));
-                setHighlightedRegion(0);
-            }
-        };
-        document.addEventListener('mousedown', handlePointerDown);
-        return () => document.removeEventListener('mousedown', handlePointerDown);
-    }, [regionOpen, selectedRegion, zh]);
-
-    useEffect(() => {
-        setHighlightedRegion(0);
-    }, [regionInput]);
-
-    useEffect(() => {
-        if (!tenantId) return;
-        fetchJson<any>(`/tenants/${tenantId}`)
-            .then(d => {
-                if (d?.timezone) setTimezone(d.timezone);
-                if (d?.country_region) setCountryRegion(d.country_region);
-            })
-            .catch((e: any) => setError(e.message || 'Failed to load timezone'));
-    }, [tenantId]);
-
-    const handleSave = async (regionCode: string) => {
-        if (!tenantId) return;
-        const region = companyRegions.find(r => r.code === regionCode) || companyRegions[0];
-        setCountryRegion(region.code);
-        setTimezone(region.timezone);
-        setSaving(true);
-        setError('');
-        try {
-            await fetchJson(`/tenants/${tenantId}`, {
-                method: 'PUT',
-                body: JSON.stringify({
-                    country_region: region.code,
-                    timezone: region.timezone,
-                }),
-            });
-            setSaved(true);
-            setTimeout(() => setSaved(false), 2000);
-        } catch (e: any) {
-            setError(e.message || 'Failed to save timezone');
-        }
-        setSaving(false);
-    };
-
-    const selectRegion = (region: CompanyRegion) => {
-        setRegionInput(regionLabel(region));
-        setRegionOpen(false);
-        setHighlightedRegion(0);
-        if (region.code !== countryRegion) {
-            handleSave(region.code);
-        }
-    };
-
-    return (
-        <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
-            <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px' }}>
-                {zh ? '公司所在国家或地区' : 'Company Country or Region'}
-            </div>
-            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
-                {zh
-                    ? `用于自动设置公司默认时区和 OKR 休息日规则。当前时区：${timezone}`
-                    : `Used to set the company timezone and OKR non-workday rules. Current timezone: ${timezone}`}
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '10px', width: '100%' }}>
-                <div ref={regionPickerRef} style={{ position: 'relative', width: 'min(420px, 100%)' }}>
-                    <input
-                        className="form-input"
-                        value={regionInput}
-                        onChange={e => {
-                            setRegionInput(e.target.value);
-                            setRegionOpen(true);
-                        }}
-                        onFocus={() => {
-                            setRegionOpen(true);
-                            setRegionInput('');
-                        }}
-                        onKeyDown={e => {
-                            if (e.key === 'ArrowDown') {
-                                e.preventDefault();
-                                setRegionOpen(true);
-                                setHighlightedRegion(i => Math.min(i + 1, Math.max(filteredRegions.length - 1, 0)));
-                            } else if (e.key === 'ArrowUp') {
-                                e.preventDefault();
-                                setHighlightedRegion(i => Math.max(i - 1, 0));
-                            } else if (e.key === 'Enter') {
-                                e.preventDefault();
-                                const region = filteredRegions[highlightedRegion];
-                                if (region) selectRegion(region);
-                            } else if (e.key === 'Escape') {
-                                setRegionOpen(false);
-                                setRegionInput(regionLabel(selectedRegion));
-                            }
-                        }}
-                        placeholder={zh ? '搜索国家或地区、代码或时区' : 'Search country, code, or timezone'}
-                        style={{
-                            width: '100%',
-                            fontSize: '13px',
-                            paddingRight: '42px',
-                            cursor: saving || !tenantId ? 'not-allowed' : 'text',
-                        }}
-                        disabled={saving || !tenantId}
-                        role="combobox"
-                        aria-expanded={regionOpen}
-                        aria-controls="company-region-listbox"
-                        aria-autocomplete="list"
-                    />
-                    <button
-                        type="button"
-                        onClick={() => {
-                            if (saving || !tenantId) return;
-                            setRegionOpen(v => !v);
-                            if (!regionOpen) setRegionInput('');
-                        }}
-                        disabled={saving || !tenantId}
-                        aria-label={regionOpen ? (zh ? '收起地区列表' : 'Collapse region list') : (zh ? '展开地区列表' : 'Expand region list')}
-                        style={{
-                            position: 'absolute',
-                            right: '7px',
-                            top: '50%',
-                            transform: `translateY(-50%) rotate(${regionOpen ? 180 : 0}deg)`,
-                            border: 'none',
-                            background: 'transparent',
-                            color: 'var(--text-secondary)',
-                            cursor: saving || !tenantId ? 'not-allowed' : 'pointer',
-                            width: '30px',
-                            height: '30px',
-                            padding: 0,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            transition: 'transform 120ms ease',
-                        }}
-                    >
-                        <span
-                            aria-hidden="true"
-                            style={{
-                                width: '8px',
-                                height: '8px',
-                                borderRight: '1.6px solid currentColor',
-                                borderBottom: '1.6px solid currentColor',
-                                transform: 'rotate(45deg) translateY(-2px)',
-                                borderRadius: '1px',
-                            }}
-                        />
-                    </button>
-                    {regionOpen && (
-                        <div
-                            id="company-region-listbox"
-                            role="listbox"
-                            style={{
-                                position: 'absolute',
-                                top: 'calc(100% + 6px)',
-                                left: 0,
-                                right: 0,
-                                zIndex: 30,
-                                background: 'var(--bg-primary)',
-                                border: '1px solid var(--border-subtle)',
-                                borderRadius: '8px',
-                                boxShadow: '0 12px 28px rgba(15, 23, 42, 0.14)',
-                                maxHeight: '260px',
-                                overflowY: 'auto',
-                                padding: '6px',
-                            }}
-                        >
-                            {filteredRegions.length > 0 ? filteredRegions.map((region, index) => {
-                                const active = region.code === countryRegion;
-                                const highlighted = index === highlightedRegion;
-                                return (
-                                    <button
-                                        key={region.code}
-                                        type="button"
-                                        role="option"
-                                        aria-selected={active}
-                                        onMouseEnter={() => setHighlightedRegion(index)}
-                                        onMouseDown={e => e.preventDefault()}
-                                        onClick={() => selectRegion(region)}
-                                        style={{
-                                            width: '100%',
-                                            border: 'none',
-                                            background: highlighted ? 'var(--bg-elevated)' : 'transparent',
-                                            color: 'var(--text-primary)',
-                                            borderRadius: '6px',
-                                            padding: '9px 10px',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            gap: '12px',
-                                            textAlign: 'left',
-                                            cursor: 'pointer',
-                                        }}
-                                    >
-                                        <span style={{ minWidth: 0 }}>
-                                            <span style={{ display: 'block', fontSize: '13px', fontWeight: active ? 600 : 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                                {regionLabel(region)}
-                                            </span>
-                                            <span style={{ display: 'block', marginTop: '2px', color: 'var(--text-tertiary)', fontSize: '11px' }}>
-                                                {region.code} · {region.timezone}
-                                            </span>
-                                        </span>
-                                        {active && <span style={{ color: 'var(--text-primary)', fontSize: '14px', flexShrink: 0 }}>✓</span>}
-                                    </button>
-                                );
-                            }) : (
-                                <div style={{ padding: '12px 10px', color: 'var(--text-tertiary)', fontSize: '12px' }}>
-                                    {zh ? '没有匹配的国家或地区' : 'No matching country or region'}
-                                </div>
-                            )}
-                        </div>
-                    )}
-                </div>
-                {(saved || error || !tenantId) && (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', minHeight: '16px', flexWrap: 'wrap' }}>
-                        {saved && <span style={{ color: 'var(--success)', fontSize: '12px' }}>已保存</span>}
-                        {error && (
-                            <div style={{ fontSize: '11px', color: 'var(--error)' }}>
-                                {error}
-                            </div>
-                        )}
-                        {!tenantId && (
-                            <div style={{ fontSize: '11px', color: 'var(--error)' }}>
-                                {t('enterprise.timezone.noTenant', 'No company selected. Please refresh the page or contact support.')}
-                            </div>
-                        )}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
-
-
-function A2AAsyncToggle() {
-    const { t, i18n } = useTranslation();
-    const user = useAuthStore((s) => s.user);
-    const tenantId = user?.tenant_id || localStorage.getItem('current_tenant_id') || '';
-    const [enabled, setEnabled] = useState(false);
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState('');
-    const zh = i18n.language?.startsWith('zh');
-
-    useEffect(() => {
-        if (!tenantId) return;
-        fetchJson<any>(`/tenants/${tenantId}`)
-            .then(d => setEnabled(!!d?.a2a_async_enabled))
-            .catch((e: any) => setError(e.message || 'Failed to load A2A setting'));
-    }, [tenantId]);
-
-    const handleToggle = async () => {
-        if (!tenantId || saving) return;
-        const next = !enabled;
-        setEnabled(next);
-        setSaving(true);
-        setError('');
-        try {
-            await fetchJson(`/tenants/${tenantId}`, {
-                method: 'PUT',
-                body: JSON.stringify({ a2a_async_enabled: next }),
-            });
-        } catch (e: any) {
-            setEnabled(!next);
-            setError(e.message || 'Failed to save A2A setting');
-        } finally {
-            setSaving(false);
-        }
-    };
-
-    return (
-        <div className="card" style={{ padding: '16px', marginBottom: '24px' }}>
-            <div style={{ fontSize: '13px', fontWeight: 500, marginBottom: '4px' }}>
-                {zh ? 'Agent 异步协作（Beta）' : 'Agent Async Collaboration (Beta)'}
-            </div>
-            <div style={{ fontSize: '11px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
-                {zh
-                    ? '开启后，数字员工之间可使用 notify / task_delegate 等异步协作模式。关闭后，Agent 间消息统一走同步 consult。'
-                    : 'When enabled, agents can use async notify and task_delegate modes. When disabled, agent-to-agent messaging falls back to synchronous consult.'}
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: '12px' }}>
-                <div style={{ width: '100%' }}>
-                    {error && (
-                        <div style={{ fontSize: '11px', color: 'var(--error)' }}>
-                            {error}
-                        </div>
-                    )}
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                    <label style={{ position: 'relative', display: 'inline-block', width: '40px', height: '22px', flexShrink: 0, opacity: saving ? 0.6 : 1 }}>
-                        <input
-                            type="checkbox"
-                            checked={enabled}
-                            onChange={handleToggle}
-                            disabled={saving || !tenantId}
-                            style={{ opacity: 0, width: 0, height: 0 }}
-                        />
-                        <span style={{
-                            position: 'absolute', inset: 0,
-                            borderRadius: '999px',
-                            cursor: saving ? 'not-allowed' : 'pointer',
-                            background: enabled ? 'var(--accent-primary)' : 'var(--border-subtle)',
-                            transition: '0.2s',
-                        }}>
-                            <span style={{
-                                position: 'absolute',
-                                top: '2px',
-                                left: enabled ? '20px' : '2px',
-                                width: '18px',
-                                height: '18px',
-                                borderRadius: '50%',
-                                background: '#fff',
-                                transition: '0.2s',
-                                boxShadow: '0 1px 2px rgba(0,0,0,0.12)',
-                            }} />
-                        </span>
-                    </label>
-                    <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
-                        {enabled ? (zh ? '已开启' : 'Enabled') : (zh ? '已关闭' : 'Disabled')}
-                    </span>
-                </div>
-            </div>
-            <div style={{ marginTop: '6px', fontSize: '11px', color: 'var(--text-tertiary)', maxWidth: '640px' }}>
-                {zh
-                    ? '说明：OKR 日报收集本身会优先使用更稳的同步方式，不依赖这里的异步开关。'
-                    : 'Note: OKR daily collection itself uses the more reliable synchronous path and does not depend on this toggle.'}
-            </div>
-        </div>
-    );
-}
-
-
-// ── Broadcast Section ──────────────────────────
-function BroadcastSection() {
-    const { t } = useTranslation();
-    const toast = useToast();
-    const [title, setTitle] = useState('');
-    const [body, setBody] = useState('');
-    const [sendEmail, setSendEmail] = useState(false);
-    const [sending, setSending] = useState(false);
-    const [result, setResult] = useState<{ users: number; agents: number; emails: number } | null>(null);
-
-    const handleSend = async () => {
-        if (!title.trim()) return;
-        setSending(true);
-        setResult(null);
-        try {
-            const token = localStorage.getItem('token');
-            const res = await fetch('/api/notifications/broadcast', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-                body: JSON.stringify({ title: title.trim(), body: body.trim(), send_email: sendEmail }),
-            });
-            if (!res.ok) {
-                const err = await res.json().catch(() => ({}));
-                toast.error('广播发送失败', { details: String(err.detail || `HTTP ${res.status}`) });
-                setSending(false);
-                return;
-            }
-            const data = await res.json();
-            setResult({
-                users: data.users_notified,
-                agents: data.agents_notified,
-                emails: data.emails_sent || 0,
-            });
-            setTitle('');
-            setBody('');
-            setSendEmail(false);
-        } catch (e: any) {
-            toast.error('广播发送失败', { details: String(e?.message || e) });
-        }
-        setSending(false);
-    };
-
-    return (
-        <div style={{ marginTop: '24px', marginBottom: '24px' }}>
-            <h3 style={{ marginBottom: '4px' }}>{t('enterprise.broadcast.title', 'Broadcast Notification')}</h3>
-            <p style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginBottom: '12px' }}>
-                {t('enterprise.broadcast.description', 'Send a notification to all users and agents in this company.')}
-            </p>
-            <div className="card" style={{ padding: '16px' }}>
-                <input
-                    className="form-input"
-                    placeholder={t('enterprise.broadcast.titlePlaceholder', 'Notification title')}
-                    value={title}
-                    onChange={e => setTitle(e.target.value)}
-                    maxLength={200}
-                    style={{ marginBottom: '8px', fontSize: '13px' }}
-                />
-                <textarea
-                    className="form-input"
-                    placeholder={t('enterprise.broadcast.bodyPlaceholder', 'Optional details...')}
-                    value={body}
-                    onChange={e => setBody(e.target.value)}
-                    maxLength={1000}
-                    rows={3}
-                    style={{ resize: 'vertical', fontSize: '13px', marginBottom: '12px' }}
-                />
-                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px', fontSize: '13px' }}>
-                    <input
-                        type="checkbox"
-                        checked={sendEmail}
-                        onChange={e => setSendEmail(e.target.checked)}
-                    />
-                    <span>{t('enterprise.broadcast.sendEmail', 'Also send email to users with a configured address')}</span>
-                </label>
-                <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-                    <button className="btn btn-primary" onClick={handleSend} disabled={sending || !title.trim()}>
-                        {sending ? t('common.loading') : t('enterprise.broadcast.send', 'Send Broadcast')}
-                    </button>
-                    {result && (
-                        <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
-                            {t(
-                                'enterprise.broadcast.sentWithEmail',
-                                `Sent to ${result.users} users, ${result.agents} agents, and ${result.emails} email recipients`,
-                                { users: result.users, agents: result.agents, emails: result.emails },
-                            )}
-                        </span>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index ffde3efd7..c14172686 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -99,6 +99,73 @@ async function uploadFile(url: string, file: File, extraFields?: Record<string,
     return res.json();
 }
 
+async function postFormData<T>(url: string, formData: FormData): Promise<T> {
+    const token = localStorage.getItem('token');
+    const res = await fetch(`${API_BASE}${url}`, {
+        method: 'POST',
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        body: formData,
+    });
+    if (!res.ok) {
+        const bodyText = await res.text();
+        let detail = 'Request failed';
+        try {
+            const parsed = bodyText ? JSON.parse(bodyText) : {};
+            detail = parsed.detail || bodyText || detail;
+        } catch {
+            detail = bodyText || detail;
+        }
+        throw new Error(detail);
+    }
+    if (res.status === 204) return undefined as T;
+    return res.json();
+}
+
+export type SkillFolderUploadPreview = {
+    target_folder: string;
+    mode: 'create' | 'update';
+    digest: string;
+    target_state_digest: string;
+    total_files: number;
+    added_count: number;
+    changed_count: number;
+    deleted_count: number;
+    added_paths: string[];
+    changed_paths: string[];
+    deleted_paths: string[];
+};
+
+export type SkillFolderUploadApplyInput = {
+    file: File;
+    targetFolder: string;
+    expectedDigest: string;
+    expectedTargetStateDigest: string;
+    replaceConfirmed?: boolean;
+};
+
+export type SkillFolderUploadApplyResult = {
+    status: 'ok';
+    mode: 'create' | 'update';
+    target_folder: string;
+    files_written: number;
+    deleted_count: number;
+};
+
+function createSkillFolderFormData(file: File, targetFolder: string): FormData {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('target_folder', targetFolder);
+    return formData;
+}
+
+function createSkillFolderApplyFormData(input: SkillFolderUploadApplyInput): FormData {
+    const formData = createSkillFolderFormData(input.file, input.targetFolder);
+    formData.append('expected_digest', input.expectedDigest);
+    formData.append('expected_target_state_digest', input.expectedTargetStateDigest);
+    formData.append('replace_confirmed', String(Boolean(input.replaceConfirmed)));
+    return formData;
+}
+
 // Upload with progress tracking via XMLHttpRequest.
 // Returns { promise, abort } — call abort() to cancel the upload.
 // Progress callback: 0-100 = upload phase, 101 = processing phase (server is parsing the file).
@@ -361,6 +428,26 @@ export const fileApi = {
             body: JSON.stringify({ skill_id: skillId }),
         }),
 
+    previewZip: (agentId: string, file: File) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        return postFormData<{ root_folder: string; files: string[]; total: number }>(`/agents/${agentId}/files/preview-zip`, formData);
+    },
+
+    extractZip: (agentId: string, file: File, targetPath: string = '', rootName: string = '') => {
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('target_path', targetPath);
+        formData.append('root_name', rootName);
+        return postFormData<{ extracted: number }>(`/agents/${agentId}/files/extract-zip`, formData);
+    },
+
+    previewSkillFolder: (agentId: string, file: File, targetFolder: string) =>
+        postFormData<SkillFolderUploadPreview>(`/agents/${agentId}/files/preview-skill-folder`, createSkillFolderFormData(file, targetFolder)),
+
+    applySkillFolder: (agentId: string, input: SkillFolderUploadApplyInput) =>
+        postFormData<SkillFolderUploadApplyResult>(`/agents/${agentId}/files/apply-skill-folder`, createSkillFolderApplyFormData(input)),
+
     downloadUrl: (agentId: string, path: string, options?: { inline?: boolean }) => {
         const token = localStorage.getItem('token');
         const params = new URLSearchParams({ path, token: token || '' });
@@ -518,6 +605,12 @@ export const skillApi = {
         request<any>('/skills/import-from-url', { method: 'POST', body: JSON.stringify({ url }) }),
     previewUrl: (url: string) =>
         request<any>('/skills/import-from-url/preview', { method: 'POST', body: JSON.stringify({ url }) }),
+    folderUpload: {
+        preview: (file: File, targetFolder: string) =>
+            postFormData<SkillFolderUploadPreview>('/skills/upload-folder/preview', createSkillFolderFormData(file, targetFolder)),
+        apply: (input: SkillFolderUploadApplyInput) =>
+            postFormData<SkillFolderUploadApplyResult>('/skills/upload-folder/apply', createSkillFolderApplyFormData(input)),
+    },
     // Tenant-level settings
     settings: {
         getToken: () => request<{ configured: boolean; source: string; masked: string; clawhub_configured: boolean; clawhub_masked: string }>('/skills/settings/token'),
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 8d0e8c4e2..3918f3adf 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -49,11 +49,14 @@ export interface Agent {
     access_mode?: 'company' | 'private' | 'custom';
     company_access_level?: 'use' | 'manage';
     unread_count?: number;
-    // True when the viewing user has already been onboarded to this agent.
-    // Defaults to true on list endpoints that don't compute per-viewer state.
     onboarded_for_me?: boolean;
     created_at: string;
     last_active_at?: string;
+    skill_map?: Record<string, {
+        name: string;
+        emoji?: string;
+        description?: string;
+    }>;
 }
 
 export interface Task {
diff --git a/frontend/src/utils/invitationJoinAuth.ts b/frontend/src/utils/invitationJoinAuth.ts
new file mode 100644
index 000000000..508fddd14
--- /dev/null
+++ b/frontend/src/utils/invitationJoinAuth.ts
@@ -0,0 +1,44 @@
+type JoinResult = {
+    access_token?: string | null;
+};
+
+type UserLike = {
+    tenant_id?: string | null;
+};
+
+type SyncInvitationJoinAuthParams<TUser extends UserLike> = {
+    invitationCode: string | null;
+    currentToken: string | null;
+    joinCompany: (invitationCode: string) => Promise<JoinResult>;
+    loadCurrentUser: () => Promise<TUser>;
+    persistToken: (token: string) => void;
+    applyAuth: (user: TUser, token: string) => void;
+};
+
+export async function syncAuthAfterInvitationJoin<TUser extends UserLike>({
+    invitationCode,
+    currentToken,
+    joinCompany,
+    loadCurrentUser,
+    persistToken,
+    applyAuth,
+}: SyncInvitationJoinAuthParams<TUser>): Promise<boolean> {
+    if (!invitationCode) {
+        return false;
+    }
+
+    const joinRes = await joinCompany(invitationCode);
+    const nextToken = joinRes.access_token || currentToken;
+
+    if (joinRes.access_token) {
+        persistToken(joinRes.access_token);
+    }
+
+    if (!nextToken) {
+        return false;
+    }
+
+    const user = await loadCurrentUser();
+    applyAuth(user, nextToken);
+    return true;
+}
diff --git a/frontend/src/utils/skillFolderZip.ts b/frontend/src/utils/skillFolderZip.ts
new file mode 100644
index 000000000..ed4e4119e
--- /dev/null
+++ b/frontend/src/utils/skillFolderZip.ts
@@ -0,0 +1,183 @@
+const CRC32_TABLE = (() => {
+    const table = new Uint32Array(256);
+
+    for (let i = 0; i < 256; i += 1) {
+        let value = i;
+        for (let bit = 0; bit < 8; bit += 1) {
+            value = (value & 1) === 1 ? 0xEDB88320 ^ (value >>> 1) : value >>> 1;
+        }
+        table[i] = value >>> 0;
+    }
+
+    return table;
+})();
+
+const textEncoder = new TextEncoder();
+
+export type SkillFolderFile = { path: string; file: File };
+
+type SkillZipEntry = {
+    name: string;
+    nameBytes: Uint8Array;
+    bytes: Uint8Array;
+    crc: number;
+    dosDate: number;
+    dosTime: number;
+};
+
+const ZIP_UTF8_FLAG = 0x0800;
+
+export function crc32(bytes: Uint8Array): number {
+    let value = 0xFFFFFFFF;
+
+    for (const byte of bytes) {
+        value = CRC32_TABLE[(value ^ byte) & 0xFF] ^ (value >>> 8);
+    }
+
+    return (value ^ 0xFFFFFFFF) >>> 0;
+}
+
+function normalizeArchivePath(path: string): string {
+    const normalized = path
+        .replace(/\\+/g, '/')
+        .replace(/^\/+/, '')
+        .split('/')
+        .filter((segment) => segment && segment !== '.' && segment !== '..')
+        .join('/');
+
+    if (!normalized) {
+        throw new Error('Skill folder ZIP entries require a non-empty relative path');
+    }
+
+    return normalized;
+}
+
+function sanitizeRootName(name: string): string {
+    const normalized = name
+        .trim()
+        .replace(/\.[^.]+$/, '')
+        .replace(/[^a-zA-Z0-9_-]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+
+    return normalized || 'skill-upload';
+}
+
+function toDosDateTime(timestamp: number): { dosDate: number; dosTime: number } {
+    const date = new Date(timestamp || Date.now());
+    const year = Math.min(Math.max(date.getFullYear(), 1980), 2107);
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = Math.floor(date.getSeconds() / 2);
+
+    return {
+        dosDate: ((year - 1980) << 9) | (month << 5) | day,
+        dosTime: (hours << 11) | (minutes << 5) | seconds,
+    };
+}
+
+function createHeader(length: number): DataView {
+    return new DataView(new ArrayBuffer(length));
+}
+
+async function createZipEntry(rootFolder: string, item: SkillFolderFile): Promise<SkillZipEntry> {
+    const name = `${rootFolder}/${normalizeArchivePath(item.path)}`;
+    const bytes = new Uint8Array(await item.file.arrayBuffer());
+    const { dosDate, dosTime } = toDosDateTime(item.file.lastModified || Date.now());
+
+    return {
+        name,
+        nameBytes: textEncoder.encode(name),
+        bytes,
+        crc: crc32(bytes),
+        dosDate,
+        dosTime,
+    };
+}
+
+export async function buildSkillFolderZip(files: SkillFolderFile[], rootFolder: string): Promise<File> {
+    const normalizedRoot = sanitizeRootName(rootFolder);
+    if (!files.length) {
+        throw new Error('Cannot build a skill folder ZIP without files');
+    }
+
+    const entries = await Promise.all(files.map((item) => createZipEntry(normalizedRoot, item)));
+    const parts: Uint8Array[] = [];
+    const centralDirectory: Uint8Array[] = [];
+    let offset = 0;
+
+    for (const entry of entries) {
+        const localHeader = createHeader(30);
+        localHeader.setUint32(0, 0x04034B50, true);
+        localHeader.setUint16(4, 20, true);
+        localHeader.setUint16(6, ZIP_UTF8_FLAG, true);
+        localHeader.setUint16(8, 0, true);
+        localHeader.setUint16(10, entry.dosTime, true);
+        localHeader.setUint16(12, entry.dosDate, true);
+        localHeader.setUint32(14, entry.crc, true);
+        localHeader.setUint32(18, entry.bytes.length, true);
+        localHeader.setUint32(22, entry.bytes.length, true);
+        localHeader.setUint16(26, entry.nameBytes.length, true);
+        localHeader.setUint16(28, 0, true);
+
+        const localHeaderBytes = new Uint8Array(localHeader.buffer);
+        parts.push(localHeaderBytes, entry.nameBytes, entry.bytes);
+
+        const centralHeader = createHeader(46);
+        centralHeader.setUint32(0, 0x02014B50, true);
+        centralHeader.setUint16(4, 20, true);
+        centralHeader.setUint16(6, 20, true);
+        centralHeader.setUint16(8, ZIP_UTF8_FLAG, true);
+        centralHeader.setUint16(10, 0, true);
+        centralHeader.setUint16(12, entry.dosTime, true);
+        centralHeader.setUint16(14, entry.dosDate, true);
+        centralHeader.setUint32(16, entry.crc, true);
+        centralHeader.setUint32(20, entry.bytes.length, true);
+        centralHeader.setUint32(24, entry.bytes.length, true);
+        centralHeader.setUint16(28, entry.nameBytes.length, true);
+        centralHeader.setUint16(30, 0, true);
+        centralHeader.setUint16(32, 0, true);
+        centralHeader.setUint16(34, 0, true);
+        centralHeader.setUint16(36, 0, true);
+        centralHeader.setUint32(38, 0, true);
+        centralHeader.setUint32(42, offset, true);
+
+        centralDirectory.push(new Uint8Array(centralHeader.buffer), entry.nameBytes);
+        offset += localHeaderBytes.length + entry.nameBytes.length + entry.bytes.length;
+    }
+
+    const centralDirectorySize = centralDirectory.reduce((total, chunk) => total + chunk.length, 0);
+    const endOfCentralDirectory = createHeader(22);
+    endOfCentralDirectory.setUint32(0, 0x06054B50, true);
+    endOfCentralDirectory.setUint16(4, 0, true);
+    endOfCentralDirectory.setUint16(6, 0, true);
+    endOfCentralDirectory.setUint16(8, entries.length, true);
+    endOfCentralDirectory.setUint16(10, entries.length, true);
+    endOfCentralDirectory.setUint32(12, centralDirectorySize, true);
+    endOfCentralDirectory.setUint32(16, offset, true);
+    endOfCentralDirectory.setUint16(20, 0, true);
+
+    for (const chunk of centralDirectory) {
+        parts.push(chunk);
+    }
+    parts.push(new Uint8Array(endOfCentralDirectory.buffer));
+
+    return new File(parts as BlobPart[], `${normalizedRoot}.zip`, {
+        type: 'application/zip',
+        lastModified: Date.now(),
+    });
+}
+
+export function deriveSkillRootName(files: File[]): string {
+    const rootCandidates = files
+        .map((file) => file.webkitRelativePath.split('/')[0]?.trim())
+        .filter((candidate): candidate is string => Boolean(candidate));
+
+    if (rootCandidates.length === files.length && new Set(rootCandidates).size === 1) {
+        return sanitizeRootName(rootCandidates[0]);
+    }
+
+    const fallback = files[0]?.webkitRelativePath || files[0]?.name || 'skill-upload';
+    return sanitizeRootName(fallback.split('/')[0] || fallback);
+}
diff --git a/frontend/tests/enterpriseSkillsRouteWiring.test.mjs b/frontend/tests/enterpriseSkillsRouteWiring.test.mjs
new file mode 100644
index 000000000..2dd7d9584
--- /dev/null
+++ b/frontend/tests/enterpriseSkillsRouteWiring.test.mjs
@@ -0,0 +1,21 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+
+const enterpriseSettingsPath = new URL('../src/pages/EnterpriseSettings.tsx', import.meta.url);
+
+test('EnterpriseSettings routes skills tab through canonical tab file', async () => {
+  const source = await readFile(enterpriseSettingsPath, 'utf8');
+
+  assert.match(
+    source,
+    /import\s+SkillsTab\s+from\s+['"]\.\/enterprise-settings\/tabs\/SkillsTab['"];?/,
+    'EnterpriseSettings.tsx should import SkillsTab from the canonical tab module',
+  );
+
+  assert.doesNotMatch(
+    source,
+    /function\s+SkillsTab\s*\(/,
+    'EnterpriseSettings.tsx should not define an inline SkillsTab implementation',
+  );
+});
diff --git a/frontend/tests/finalizeInvitationJoin.test.mjs b/frontend/tests/finalizeInvitationJoin.test.mjs
new file mode 100644
index 000000000..8dc526185
--- /dev/null
+++ b/frontend/tests/finalizeInvitationJoin.test.mjs
@@ -0,0 +1,86 @@
+import assert from 'node:assert/strict';
+import { mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { build } from 'esbuild';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const outdir = path.resolve(__dirname, '../.tmp-tests');
+const outfile = path.join(outdir, 'finalizeInvitationJoin.mjs');
+
+await mkdir(outdir, { recursive: true });
+await build({
+  entryPoints: [path.resolve(__dirname, '../src/utils/invitationJoinAuth.ts')],
+  bundle: true,
+  platform: 'node',
+  format: 'esm',
+  outfile,
+  logLevel: 'silent',
+});
+
+const { syncAuthAfterInvitationJoin } = await import(pathToFileURL(outfile).href);
+
+test('refreshes auth with the existing token when joining an invited company returns no new access token', async () => {
+  const calls = [];
+  const expectedUser = { id: 'user-1', tenant_id: 'tenant-1' };
+
+  const joined = await syncAuthAfterInvitationJoin({
+    invitationCode: 'INVITE123',
+    currentToken: 'existing-token',
+    joinCompany: async (code) => {
+      calls.push(['join', code]);
+      return { role: 'member', tenant: { id: 'tenant-1' } };
+    },
+    loadCurrentUser: async () => {
+      calls.push(['me']);
+      return expectedUser;
+    },
+    persistToken: (token) => {
+      calls.push(['persist', token]);
+    },
+    applyAuth: (user, token) => {
+      calls.push(['setAuth', user, token]);
+    },
+  });
+
+  assert.equal(joined, true);
+  assert.deepEqual(calls, [
+    ['join', 'INVITE123'],
+    ['me'],
+    ['setAuth', expectedUser, 'existing-token'],
+  ]);
+});
+
+test('persists and uses the tenant-scoped token when join returns a new access token', async () => {
+  const calls = [];
+  const expectedUser = { id: 'user-1', tenant_id: 'tenant-2' };
+
+  const joined = await syncAuthAfterInvitationJoin({
+    invitationCode: 'INVITE456',
+    currentToken: 'old-token',
+    joinCompany: async () => {
+      calls.push(['join']);
+      return { access_token: 'new-token', role: 'member', tenant: { id: 'tenant-2' } };
+    },
+    loadCurrentUser: async () => {
+      calls.push(['me']);
+      return expectedUser;
+    },
+    persistToken: (token) => {
+      calls.push(['persist', token]);
+    },
+    applyAuth: (user, token) => {
+      calls.push(['setAuth', user, token]);
+    },
+  });
+
+  assert.equal(joined, true);
+  assert.deepEqual(calls, [
+    ['join'],
+    ['persist', 'new-token'],
+    ['me'],
+    ['setAuth', expectedUser, 'new-token'],
+  ]);
+});
diff --git a/frontend/tests/skillUploadSurfaceAdapters.test.mjs b/frontend/tests/skillUploadSurfaceAdapters.test.mjs
new file mode 100644
index 000000000..7de22165f
--- /dev/null
+++ b/frontend/tests/skillUploadSurfaceAdapters.test.mjs
@@ -0,0 +1,110 @@
+import assert from 'node:assert/strict';
+import { mkdir } from 'node:fs/promises';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { build } from 'esbuild';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const outdir = path.resolve(__dirname, '../.tmp-tests');
+const outfile = path.join(outdir, 'skillUploadSurfaceAdapters.mjs');
+
+await mkdir(outdir, { recursive: true });
+await build({
+  entryPoints: [path.resolve(__dirname, '../src/components/skills/skillUploadSurfaceAdapters.ts')],
+  bundle: true,
+  platform: 'node',
+  format: 'esm',
+  outfile,
+  logLevel: 'silent',
+});
+
+const {
+  createEnterpriseSkillUploadAdapter,
+  createAgentSkillUploadAdapter,
+} = await import(pathToFileURL(outfile).href);
+
+test('enterprise upload surface adapter delegates preview, apply, and refresh', async () => {
+  const previewResult = { kind: 'preview-result' };
+  const applyResult = { kind: 'apply-result' };
+  const calls = [];
+  const file = new File(['zip'], 'skills.zip', { type: 'application/zip' });
+  const applyInput = {
+    file,
+    targetFolder: 'enterprise-skills',
+    expectedDigest: 'digest-1',
+    expectedTargetStateDigest: 'target-digest-1',
+    replaceConfirmed: true,
+  };
+
+  const adapter = createEnterpriseSkillUploadAdapter({
+    preview: async (...args) => {
+      calls.push(['preview', ...args]);
+      return previewResult;
+    },
+    apply: async (input) => {
+      calls.push(['apply', input]);
+      return applyResult;
+    },
+    refresh: async () => {
+      calls.push(['refresh']);
+    },
+  });
+
+  const previewed = await adapter.previewRequest(file, 'enterprise-skills');
+  const applied = await adapter.applyRequest(applyInput);
+  await adapter.onApplied(applyResult);
+
+  assert.equal(previewed, previewResult);
+  assert.equal(applied, applyResult);
+  assert.deepEqual(calls, [
+    ['preview', file, 'enterprise-skills'],
+    ['apply', applyInput],
+    ['refresh'],
+  ]);
+});
+
+test('agent upload surface adapter delegates preview, apply, and waits for refresh', async () => {
+  const previewResult = { kind: 'preview-result' };
+  const applyResult = { kind: 'apply-result' };
+  const calls = [];
+  const file = new File(['zip'], 'skills.zip', { type: 'application/zip' });
+  const applyInput = {
+    file,
+    targetFolder: 'agent-skills',
+    expectedDigest: 'digest-2',
+    expectedTargetStateDigest: 'target-digest-2',
+    replaceConfirmed: true,
+  };
+  let refreshResolved = false;
+
+  const adapter = createAgentSkillUploadAdapter({
+    preview: async (...args) => {
+      calls.push(['preview', ...args]);
+      return previewResult;
+    },
+    apply: async (input) => {
+      calls.push(['apply', input]);
+      return applyResult;
+    },
+    refresh: async () => {
+      await Promise.resolve();
+      refreshResolved = true;
+      calls.push(['refresh']);
+    },
+  });
+
+  const previewed = await adapter.previewRequest(file, 'agent-skills');
+  const applied = await adapter.applyRequest(applyInput);
+  await adapter.onApplied(applyResult);
+
+  assert.equal(previewed, previewResult);
+  assert.equal(applied, applyResult);
+  assert.equal(refreshResolved, true);
+  assert.deepEqual(calls, [
+    ['preview', file, 'agent-skills'],
+    ['apply', applyInput],
+    ['refresh'],
+  ]);
+});
diff --git a/frontend/tests/skillsActionItems.test.mjs b/frontend/tests/skillsActionItems.test.mjs
new file mode 100644
index 000000000..066d6b4ce
--- /dev/null
+++ b/frontend/tests/skillsActionItems.test.mjs
@@ -0,0 +1,73 @@
+import assert from 'node:assert/strict';
+import { mkdir, readFile } from 'node:fs/promises';
+import path from 'node:path';
+import test from 'node:test';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { build } from 'esbuild';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const outdir = path.resolve(__dirname, '../.tmp-tests');
+const outfile = path.join(outdir, 'skillsActionItems.mjs');
+const enterpriseSkillsTabPath = path.resolve(__dirname, '../src/pages/enterprise-settings/tabs/SkillsTab.tsx');
+const agentDetailPath = path.resolve(__dirname, '../src/pages/AgentDetail.tsx');
+
+await mkdir(outdir, { recursive: true });
+await build({
+  entryPoints: [path.resolve(__dirname, '../src/components/skills/skillsActionItems.ts')],
+  bundle: true,
+  platform: 'node',
+  format: 'esm',
+  outfile,
+  logLevel: 'silent',
+});
+
+const { getEnterpriseSkillActionIds, getAgentSkillActionIds } = await import(pathToFileURL(outfile).href);
+const enterpriseSkillsTabSource = await readFile(enterpriseSkillsTabPath, 'utf8');
+const normalizedEnterpriseSkillsTabSource = enterpriseSkillsTabSource.replace(/\s+/g, ' ');
+const agentDetailSource = await readFile(agentDetailPath, 'utf8');
+const normalizedAgentDetailSource = agentDetailSource.replace(/\s+/g, ' ');
+
+test('getEnterpriseSkillActionIds returns the locked enterprise action order', () => {
+  assert.deepEqual(getEnterpriseSkillActionIds(), [
+    'settings',
+    'upload-folder',
+    'import-url',
+    'browse-clawhub',
+  ]);
+});
+
+test('enterprise actions keep settings, folder upload, URL import, then ClawHub in sequence', () => {
+  const actions = getEnterpriseSkillActionIds();
+
+  assert.ok(actions.indexOf('settings') < actions.indexOf('upload-folder'));
+  assert.ok(actions.indexOf('upload-folder') < actions.indexOf('import-url'));
+  assert.ok(actions.indexOf('import-url') < actions.indexOf('browse-clawhub'));
+});
+
+test('enterprise skills tab is wired to the shared action and upload seams', () => {
+  assert.ok(normalizedEnterpriseSkillsTabSource.includes("import SkillsActionBar, { type SkillsActionBarAction } from '../../../components/skills/SkillsActionBar';"));
+  assert.ok(normalizedEnterpriseSkillsTabSource.includes("import { createEnterpriseSkillUploadAdapter } from '../../../components/skills/skillUploadSurfaceAdapters';"));
+  assert.ok(normalizedEnterpriseSkillsTabSource.includes("getEnterpriseSkillActionIds() .map((id) => actionConfig[id])") || normalizedEnterpriseSkillsTabSource.includes("getEnterpriseSkillActionIds().map((id) => actionConfig[id])"));
+  assert.ok(normalizedEnterpriseSkillsTabSource.includes('previewRequest={uploadAdapter.previewRequest}'));
+  assert.ok(normalizedEnterpriseSkillsTabSource.includes('applyRequest={uploadAdapter.applyRequest}'));
+  assert.ok(normalizedEnterpriseSkillsTabSource.includes('onApplied={uploadAdapter.onApplied}'));
+});
+
+test('getAgentSkillActionIds returns the locked agent action order', () => {
+  assert.deepEqual(getAgentSkillActionIds(), [
+    'browse-clawhub',
+    'import-presets',
+    'upload-folder',
+  ]);
+});
+
+test('agent detail skills surface is wired to the shared action and upload seams', () => {
+  assert.ok(normalizedAgentDetailSource.includes("import SkillsActionBar, { type SkillsActionBarAction } from '../components/skills/SkillsActionBar';"));
+  assert.ok(normalizedAgentDetailSource.includes("import { createAgentSkillUploadAdapter } from '../components/skills/skillUploadSurfaceAdapters';"));
+  assert.ok(normalizedAgentDetailSource.includes("import { getAgentSkillActionIds, type SkillActionId } from '../components/skills/skillsActionItems';"));
+  assert.ok(normalizedAgentDetailSource.includes("getAgentSkillActionIds() .map((id) => actionConfig[id])") || normalizedAgentDetailSource.includes("getAgentSkillActionIds().map((id) => actionConfig[id])"));
+  assert.ok(normalizedAgentDetailSource.includes('previewRequest={uploadAdapter.previewRequest}'));
+  assert.ok(normalizedAgentDetailSource.includes('applyRequest={uploadAdapter.applyRequest}'));
+  assert.ok(normalizedAgentDetailSource.includes('onApplied={uploadAdapter.onApplied}'));
+});
diff --git a/frontend/tests/skillsUploadFolderRegression.test.mjs b/frontend/tests/skillsUploadFolderRegression.test.mjs
new file mode 100644
index 000000000..f2d940832
--- /dev/null
+++ b/frontend/tests/skillsUploadFolderRegression.test.mjs
@@ -0,0 +1,24 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import test from 'node:test';
+
+const enterpriseSkillsTabPath = new URL('../src/pages/enterprise-settings/tabs/SkillsTab.tsx', import.meta.url);
+const skillFolderUploadModalPath = new URL('../src/components/skills/SkillFolderUploadModal.tsx', import.meta.url);
+
+test('enterprise skills tab keeps the upload-folder button and modal wiring', async () => {
+  const source = await readFile(enterpriseSkillsTabPath, 'utf8');
+
+  assert.match(source, /uploadFolderModal\.openButton/);
+  assert.match(source, /SkillFolderUploadModal/);
+  assert.match(source, /showSkillFolderUploadModal/);
+  assert.match(source, /i18nPrefix="enterprise\.tools\.uploadFolderModal"/);
+});
+
+test('skill folder upload modal renders directory-selection attributes on the file input', async () => {
+  const source = await readFile(skillFolderUploadModalPath, 'utf8');
+
+  assert.match(source, /<input[\s\S]*type="file"/);
+  assert.match(source, /webkitdirectory/);
+  assert.match(source, /directory/);
+  assert.doesNotMatch(source, /setAttribute\('webkitdirectory'/);
+});
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 09a260651..d78c4364e 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'path'
 import fs from 'fs'
@@ -16,29 +16,51 @@ for (const candidate of ['./VERSION', '../VERSION']) {
 const now = new Date()
 const buildTimestamp = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}.${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}`
 const version = `${majorVersion}+${buildTimestamp}`
+const defaultAppName = 'Clawith'
+const defaultAppDescription = 'Clawith — 企业数字员工平台'
 
-export default defineConfig({
-    plugins: [react()],
-    define: {
-        __APP_VERSION__: JSON.stringify(version),
-    },
-    resolve: {
-        alias: {
-            '@': path.resolve(__dirname, './src'),
+// These branding values are resolved when Vite builds index.html.
+// Set VITE_APP_NAME / VITE_APP_DESCRIPTION before `npm run build` or Docker image build time.
+// Updating runtime container env later will not rewrite the already-built frontend assets.
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, __dirname, '')
+    const appName = env.VITE_APP_NAME || defaultAppName
+    const appDescription = env.VITE_APP_DESCRIPTION || defaultAppDescription
+
+    return {
+        plugins: [
+            react(),
+            {
+                name: 'brand-html-defaults',
+                transformIndexHtml(html) {
+                    return html
+                        .replaceAll('__APP_NAME__', appName)
+                        .replaceAll('__APP_DESCRIPTION__', appDescription)
+                },
+            },
+        ],
+        define: {
+            __APP_VERSION__: JSON.stringify(version),
         },
-    },
-    server: {
-        port: 3008,
-        host: '0.0.0.0',
-        proxy: {
-            '/api': {
-                target: 'http://localhost:8000',
-                changeOrigin: true,
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src'),
             },
-            '/ws': {
-                target: 'ws://localhost:8000',
-                ws: true,
+        },
+        server: {
+            port: 3008,
+            host: '0.0.0.0',
+            proxy: {
+                '/api': {
+                    target: 'http://localhost:8008',
+                    changeOrigin: true,
+                },
+                '/ws': {
+                    target: 'ws://localhost:8008',
+                    ws: true,
+                },
             },
         },
-    },
+    }
 })
diff --git a/helm/clawith/templates/secrets.yaml b/helm/clawith/templates/secrets.yaml
index e69de29bb..189f02fb1 100644
--- a/helm/clawith/templates/secrets.yaml
+++ b/helm/clawith/templates/secrets.yaml
@@ -0,0 +1,12 @@
+{{- if .Values.secrets.create }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ include "clawith.secretName" . }}
+  labels:
+    {{- include "clawith.labels" . | nindent 4 }}
+type: Opaque
+stringData:
+  secret-key: {{ default (randAlphaNum 64) .Values.secrets.secretKey | quote }}
+  jwt-secret-key: {{ default (randAlphaNum 64) .Values.secrets.jwtSecretKey | quote }}
+{{- end }}
diff --git a/helm/clawith/values.yaml b/helm/clawith/values.yaml
index e3f5b85a4..9a6f6272d 100644
--- a/helm/clawith/values.yaml
+++ b/helm/clawith/values.yaml
@@ -200,6 +200,9 @@ secrets:
   create: true
   # Name of existing secret (if create is false)
   existingSecret: ""
+  # Optional explicit values; if empty and create=true, Helm generates random secrets.
+  secretKey: ""
+  jwtSecretKey: ""
 
 # Storage Class configuration (optional)
 # Set createStorageClass to true if you want to create a custom storage class
diff --git a/restart.sh b/restart.sh
index 0af073cd8..eaf4e1c77 100755
--- a/restart.sh
+++ b/restart.sh
@@ -58,6 +58,9 @@ load_env() {
     _db_hostpart=$(echo "$DATABASE_URL" | sed 's|.*://[^@]*@||' | sed 's|/.*||' | sed 's|?.*||')
     PG_HOST="${_db_hostpart%%:*}"
     PG_PORT="${_db_hostpart##*:}"
+    if [ "$PG_PORT" = "$PG_HOST" ]; then
+        PG_PORT=5432
+    fi
     PG_PORT=${PG_PORT:-5432}
     export PG_HOST PG_PORT
 
@@ -227,7 +230,7 @@ start_backend() {
 
     # Auto-run schema migrations via alembic
     echo -e "${YELLOW}🔄 Running schema migrations...${NC}"
-    .venv/bin/alembic upgrade head 2>/dev/null || true
+    .venv/bin/alembic upgrade head
 
     # Auto-run data migrations (idempotent)
     echo -e "${YELLOW}🔄 Running data migrations...${NC}"
diff --git a/scripts/deploy/deploy_from_github_actions.sh b/scripts/deploy/deploy_from_github_actions.sh
new file mode 100755
index 000000000..ae8d633e1
--- /dev/null
+++ b/scripts/deploy/deploy_from_github_actions.sh
@@ -0,0 +1,127 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+usage() {
+  echo "Usage: $0 <commit-sha> [repo-root]" >&2
+}
+
+backup_persistent_paths() {
+  local backup_dir="$1"
+  shift
+
+  local path
+  for path in "$@"; do
+    if [[ -e "$path" ]]; then
+      mkdir -p "$backup_dir/$(dirname "$path")"
+      cp -a "$path" "$backup_dir/$path"
+    fi
+  done
+}
+
+restore_persistent_paths() {
+  local backup_dir="$1"
+  shift
+
+  local path
+  for path in "$@"; do
+    if [[ -e "$backup_dir/$path" ]]; then
+      rm -rf "$path"
+      mkdir -p "$(dirname "$path")"
+      cp -a "$backup_dir/$path" "$path"
+    fi
+  done
+}
+
+print_diagnostics() {
+  local scope="${1:-backend}"
+  docker compose ps >&2 || true
+  if [[ "$scope" == "all" ]]; then
+    docker compose logs --tail=200 >&2 || true
+  else
+    docker compose logs --tail=200 backend >&2 || true
+  fi
+}
+
+fail_with_diagnostics() {
+  local message="$1"
+  local scope="${2:-backend}"
+  echo "$message" >&2
+  print_diagnostics "$scope"
+  exit 1
+}
+
+if [[ $# -lt 1 || $# -gt 2 ]]; then
+  usage
+  exit 1
+fi
+
+commit_sha="$1"
+repo_root="${2:-/opt/clawith}"
+max_attempts=36
+sleep_seconds=5
+persistent_paths=(
+  .env
+  backend/agent_data
+  backend/data
+  data
+  ss-nodes.json
+)
+
+if [[ ! -d "$repo_root/.git" && ! -f "$repo_root/.git" ]]; then
+  echo "Repository root does not look like a git checkout: $repo_root" >&2
+  exit 1
+fi
+
+cd "$repo_root"
+
+echo "Deploying commit $commit_sha in $repo_root"
+
+git fetch origin main
+git checkout -f main
+
+backup_dir="$(mktemp -d)"
+trap 'rm -rf "$backup_dir"' EXIT
+backup_persistent_paths "$backup_dir" "${persistent_paths[@]}"
+
+git reset --hard "$commit_sha"
+git clean -ffd
+git clean -ffdX
+
+restore_persistent_paths "$backup_dir" "${persistent_paths[@]}"
+
+FRONTEND_PORT="${FRONTEND_PORT:-3009}"
+export FRONTEND_PORT
+
+if ! docker compose up -d --build; then
+  fail_with_diagnostics "Deployment failed: docker compose up -d --build exited non-zero" all
+fi
+
+backend_container_id=""
+last_state="unknown"
+
+for attempt in $(seq 1 "$max_attempts"); do
+  backend_container_id="$(docker compose ps -q backend)"
+
+  if [[ -n "$backend_container_id" ]]; then
+    last_state="$(docker inspect --format '{{if .State.Health}}{{.State.Health.Status}}{{else}}no-healthcheck{{end}}' "$backend_container_id" 2>/dev/null || echo unknown)"
+    echo "Attempt $attempt/$max_attempts: backend health=$last_state"
+
+    if [[ "$last_state" == "healthy" ]]; then
+      if ! docker compose exec -T backend curl -fsS http://localhost:8000/api/health; then
+        fail_with_diagnostics "Deployment failed: backend health endpoint check failed for commit $commit_sha"
+      fi
+      if ! curl -fsS "http://127.0.0.1:${FRONTEND_PORT}/" >/dev/null; then
+        fail_with_diagnostics "Deployment failed: frontend was not reachable on host port ${FRONTEND_PORT}" all
+      fi
+      echo
+      echo "Deployment health check passed for commit $commit_sha"
+      exit 0
+    fi
+  else
+    echo "Attempt $attempt/$max_attempts: backend container not created yet"
+  fi
+
+  sleep "$sleep_seconds"
+done
+
+fail_with_diagnostics "Deployment failed: backend did not become ready after $max_attempts attempts (last state: $last_state)"