Feat/sandbox (#2072)

* feat: add mcp and skills

* feat: add filter

* feat: modify frontend

* feat(box): add sandbox_exec tool loop for local-agent calculations

* feat(box): add host workspace mounting and sandbox_exec guidance

* feat(box): add BoxProfile with resource limits and improved output truncation

  - Implement head+tail output truncation (60/40 split) so LLM sees both
    beginning and final results; add streaming byte-limited reads in backend
    to prevent unbounded memory usage (_MAX_RAW_OUTPUT_BYTES = 1MB)
  - Define BoxProfile model with locked fields and max_timeout_sec clamping
  - Add four built-in profiles: default, offline_readonly, network_basic,
    network_extended with differentiated resource and security constraints
  - Add resource limit fields to BoxSpec (cpus, memory_mb, pids_limit,
    read_only_rootfs) and pass corresponding container CLI flags
    (--cpus, --memory, --pids-limit, --read-only, --tmpfs)
  - Profile loaded from config (box.profile), applied in service layer
    before BoxSpec validation; locked fields cannot be overridden by
    tool-call parameters

* feat(box): add obs

* refactor(box): unify box service lifecycle and local runtime
  management

* refactor(box): remove legacy in-process runtime code and clean up smells

After the architecture settled on always using an independent Box Runtime
service, several pieces of compatibility code and design shortcuts were
left behind. This commit cleans them up:

- Remove `LocalBoxRuntimeClient` and `create_box_runtime_client` from
  production code (moved to test-only helper).
- Remove unused `_clip_bytes` method from backend.
- Remove `__langbot_session_placeholder__` hack by making `BoxSpec.cmd`
  default to empty and validating non-empty only in `runtime.execute()`.
- Extract `get_box_config()` helper to eliminate 5× duplicated config
  access boilerplate.
- Remove `session_id`/`host_path`/`host_path_mode` from the LLM-facing
  tool schema to enforce request-scoped session isolation.
- Fix dual shutdown path: `NativeToolLoader.shutdown()` no longer calls
  `box_service.shutdown()` (handled by `Application.dispose()`).
- Simplify `_assert_session_compatible` with a loop.
- Inline client creation in `BoxRuntimeConnector`.
- Remove redundant `BOX__RUNTIME_URL` env var from docker-compose
  (auto-detected by code).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: add test

* fix: fix box intergration test

* feat(box/mcp): integrate MCP stdio with Box sandbox — auto-isolation, dep install, security

  ## Summary

  When Podman/Docker is available, all stdio-mode MCP servers now automatically
  run inside Box containers with dependency installation, path rewriting, and
  lifecycle management. When no container runtime exists, LangBot starts normally
  and stdio MCP falls back to host-direct execution.

  ## What changed

  ### MCP stdio → Box integration (mcp.py)
  - Add `MCPServerBoxConfig` pydantic model for structured box configuration
    with validation and defaults (network, host_path_mode, timeouts, resources)
  - Auto-infer `host_path` from command/args with venv detection: recognizes
    `.venv/bin/python` patterns and walks up to the project root
  - Rewrite host paths to container `/workspace` paths transparently
  - Replace venv python commands with container-native `python`
  - Auto-detect `pyproject.toml`/`setup.py`/`requirements.txt` and run
    `pip install` inside the container before starting the MCP server
  - Copy project to `/tmp` before install to handle read-only mounts
  - Add retry with exponential backoff (3 retries, 2s/4s/8s delays)
  - Add Box managed process health monitoring (poll every 5s)
  - Fix session leak: `_cleanup_box_stdio_session()` now runs in `finally`
    block of `_lifecycle_loop`, covering all exit paths
  - Fix retry logic: `_ready_event` is only set after all retries exhaust
    or on success, not on first failure
  - Enhance `get_runtime_info_dict()` with `box_session_id` and `box_enabled`

  ### Box security (security.py — new)
  - `validate_sandbox_security()` blocks dangerous host paths:
    `/etc`, `/proc`, `/sys`, `/dev`, `/root`, `/boot`, `/run`,
    docker.sock, podman socket
  - Called at the start of `CLISandboxBackend.start_session()`

  ### Box models (models.py)
  - Add `BoxHostMountMode.NONE` — skips volume mount entirely
  - Adjust `validate_host_mount_consistency` to allow arbitrary workdir
    when `host_path_mode=NONE`

  ### Box backend (backend.py)
  - Add `validate_sandbox_security()` call in `start_session()`
  - Add `langbot.box.config_hash` label on containers for drift detection
  - Handle `BoxHostMountMode.NONE` — skip `-v` mount arg
  - Add `cleanup_orphaned_containers()` to base class (no-op default) and
    CLI implementation (single batched `rm -f` command)

  ### Box runtime (runtime.py)
  - Call `cleanup_orphaned_containers()` during `initialize()` to remove
    lingering containers from previous runs

  ### Box service (service.py)
  - Graceful degradation: `initialize()` catches runtime errors and sets
    `available=False` instead of crashing LangBot startup
  - Add `available` property and guard on `execute_sandbox_tool()`
  - Add `skip_host_mount_validation` parameter to `build_spec()` and
    `create_session()` — MCP paths are admin-configured and trusted,
    bypassing `allowed_host_mount_roots` restrictions meant for
    LLM-generated sandbox_exec commands

  ### Default behavior
  - stdio MCP servers automatically use Box when `box_service.available`
    is True (Podman/Docker detected); no explicit `box` config needed
  - When no container runtime exists, falls back to host-direct stdio
  - MCP Box defaults: `network=on` (for pip install), `read_only_rootfs=false`
    (for site-packages), `host_path_mode=ro`, `startup_timeout=120s`

  ### Tests
  - `test_box_security.py`: blocked paths, safe paths, subpath rejection
  - `test_mcp_box_integration.py`: config model, path rewriting, venv
    unwrap, host_path inference, payload building, runtime info, box
    availability check
  - `test_box_service.py`: `BoxHostMountMode.NONE` validation tests

* feat(box/mcp): instance-based orphan cleanup, error classification, session API, and integration tests

  ## Changes

  ### Precise orphan container cleanup
  - Runtime generates a unique instance_id on startup
  - Every container gets a `langbot.box.instance_id` label
  - `cleanup_orphaned_containers()` only removes containers from
    previous instances, preserving containers owned by the current one
  - Containers from older versions (no label) are also cleaned up
  - `cleanup_orphaned_containers` added to `BaseSandboxBackend` as
    a no-op default method, removing hasattr duck-typing

  ### Fine-grained MCP error classification
  - New `MCPSessionErrorPhase` enum with 7 phases: session_create,
    dep_install, process_start, relay_connect, mcp_init, runtime,
    tool_call
  - Each phase in `_init_box_stdio_server()` sets the error phase
    before re-raising, enabling precise failure diagnosis
  - `retry_count` tracked across retry attempts
  - `get_runtime_info_dict()` exposes `error_phase` and `retry_count`

  ### GET /v1/sessions/{id} API
  - `BoxRuntime.get_session()` returns session details including
    managed process info when present
  - `handle_get_session` HTTP handler + route in server.py
  - `BoxRuntimeClient.get_session()` abstract method + remote impl

  ### stdio defaults to Box when runtime is available
  - `_uses_box_stdio()` checks `box_service.available` instead of
    requiring explicit `box` key in server_config
  - `BoxService.initialize()` catches runtime errors gracefully,
    sets `available=False` instead of crashing LangBot startup
  - When no container runtime exists, stdio MCP falls back to
    host-direct execution

  ### Code quality (from /simplify review)
  - Extracted `_VENV_DIRS` / `_VENV_BIN_DIRS` module-level constants
  - Removed dead `_box_network_mode()` method and unused `bc` variable
  - Fixed broken import `from ....box.models` → `from ...box.models`
  - Cached `_resolve_host_path()` result — computed once, passed through
  - Config hash now includes `host_path` field
  - Batched orphan cleanup into single `rm -f` command

  ### Session leak fix
  - `_cleanup_box_stdio_session()` now runs in `_lifecycle_loop`'s
    finally block, covering all exit paths (normal shutdown, error,
    retry, final failure)

  ### Integration tests
  - 6 end-to-end tests covering managed process lifecycle, WebSocket
    stdio bidirectional IO, session cleanup verification, single
    session query, process exit detection, and orphan cleanup safety

* refactor: use rpc

* fix: import

* refactor(box): clean up sandbox subsystem code quality and efficiency

  - Fix O(n²) stderr trimming in runtime.py with running length tracker
  - Remove dead code: RESERVED_CONTAINER_PATHS, _subprocess_wait_task,
    unused config_hash computation, unused imports
  - Deduplicate connection callback in BoxRuntimeConnector, parse URL once
  - Use enum comparison instead of stringly-typed spec.network.value check
  - Replace manual _result_to_dict/_session_to_dict with model_dump()
  - Cache NativeToolLoader tool definition and sandbox system guidance
  - Extract _is_path_under() helper to eliminate duplicated path checks
  - Import SANDBOX_EXEC_TOOL_NAME from native.py instead of redefining
  - Add JSON startswith guard in logging_utils to skip futile json.loads
  - Fix ruff lint errors (F401 unused imports, F841 unused variables)

* fix: ruff

* refactor(sandbox): keep box logic out of pipeline and localagent

  - Move sandbox system-prompt guidance from LocalAgentRunner into
    BoxService.get_system_guidance() so all box domain knowledge stays
    in the box module.
  - Remove standalone logging_utils.py; merge format_result_log() into
    MessageHandler base class alongside cut_str().
  - Strip sandbox-specific JSON parsing from log formatting; tool
    results now use generic truncation.
  - Revert TYPE_CHECKING changes in stage.py and runner.py that were
    unrelated to this feature.
  - Skip two test files affected by a pre-existing circular import
    (runner ↔ app) until the import cycle is resolved in a separate PR.

* fix: ruff

* refactor(box): move box runtime to langbot-plugin-sdk

  Extract self-contained box runtime modules (actions, backend, client,
  errors, models, runtime, security, server) to langbot-plugin-sdk and
  update all imports to use `langbot_plugin.box.*`. Keep only service
  and
  connector in LangBot core as they depend on the Application context.

  - Update docker-compose to use `langbot_plugin.box.server` entry
  point
  - Update pyproject.toml to use local SDK via `tool.uv.sources`
  - Remove migrated source files and their unit/integration tests
  - Update remaining test imports to match new module paths

* fix: ruff

* feat: enhance sandbox api

* refactor(box): derive paths from shared host root

* fix(box): tighten sandbox exposure and restore box integration coverage

* refactor(types): remove quoted annotations under postponed evaluation

* feat(box): unify native agent tools around exec/read/write/edit

* chore(sandbox): move MCP loader changes to follow-up branch

* feat(box): add session workspace quota enforcement and SDK quota metadata

* feat(skills): add Agent Skills management system (#1917)

* feat(skills): add Agent Skills management system

Implement comprehensive skills management feature inspired by agentskills spec:

Backend:
- Add Skill and SkillPipelineBinding database entities
- Add database migration (dbm018) for skills tables
- Implement SkillManager for skill loading, matching, and resolution
- Implement SkillService for CRUD operations
- Add skills API endpoints for skill and pipeline binding management
- Integrate skill index injection into pipeline preprocessor
- Add skill activation detection in LocalAgentRunner

Frontend:
- Add Skills page with listing, search, and type filter
- Add SkillDetailDialog for create/edit with preview
- Add SkillCard and SkillForm components
- Add skills API methods to BackendClient
- Add skills entry to sidebar navigation
- Add i18n translations (en-US, zh-Hans)

Features:
- Support skill and workflow types
- Sub-skill composition via {{INVOKE_SKILL: name}} syntax
- Progressive disclosure (index in prompt, full instructions on activation)
- Pipeline-specific skill bindings with priority

* fix: resolve cherry-pick conflicts for agentskills onto sandbox

- Remove non-existent external_kb service import
- Add skill_mgr mock to localagent sandbox_exec tests
- Keep database version at 24 (sandbox branch's latest)

* feat(skills): upgrade to package-backed skills with sandbox execution

  Evolve the skills system from pure prompt-based to package-backed with
  sandbox tool execution support:

  - Add source_type/package_root/entry_file/skill_tools fields to Skill entity
  - SkillManager loads SKILL.md from local package directories
  - SkillToolLoader as 4th dispatch layer in ToolManager (query-scoped)
  - LocalAgent injects skill tools into use_funcs on skill activation
  - BoxService.execute_skill_tool() runs scripts in sandbox (ro mount, env params)
  - Skill tool names auto-namespaced as skill__{skill}__{tool}
  - API validation for package_root allowlist and entry path traversal
  - Frontend source_type toggle, package_root input, skill_tools editor
  - Migration renumbered to 025 with ALTER TABLE fallback for existing DBs
  - Fix unclosed limitation section in i18n files
  - Fix skills API methods misplaced outside BackendClient class

* fix: test info

* feat(skills): switch skills to package-backed storage and add import tooling
  - skills 从 inline/package 双轨收敛成 package-first
  - instructions 改为写入并读取 SKILL.md
  - 新增本地目录扫描和 GitHub 安装 skill
  - 前端把 skills 整合进 plugins 页，新增 SkillsComponent 和 GitHub 导入弹窗
  - skill form 去掉 source_type / type 筛选，改成目录扫描驱动
  - Box skill tool 挂载模式从 ro 改成 rw
  - 测试和中英文文案同步更新

* feat: simplify langbot skill create and import

* refactor(skills): clean up legacy skill API and harden activation flow

* refactor(skills): remove skill dependency expansion and add skill_get

* fix: lint

* fix: delete

* fix(skills): align tool manager loader initialization

* refactor: remove sandbox execute skill

* fix(skills): hide activation markers and isolate skill activation flow

* refactor(skills): switch skill model to filesystem-backed packages

* refactor(skills): switch skill model to filesystem-backed packages

* refactor(skills): unify runtime skill access around filesystem paths

* refactor(skills): unify runtime skill access around filesystem paths

* feat(skills): align rw package design and fix skill activation, visibility, and lint issues

* refactor(skills): replace rich authoring API with import/reload flow and update
  Box design doc

* feat(box): add sandbox_exec tool loop for local-agent calculations

* feat(box): add host workspace mounting and sandbox_exec guidance

* feat(box): add BoxProfile with resource limits and improved output truncation

  - Implement head+tail output truncation (60/40 split) so LLM sees both
    beginning and final results; add streaming byte-limited reads in backend
    to prevent unbounded memory usage (_MAX_RAW_OUTPUT_BYTES = 1MB)
  - Define BoxProfile model with locked fields and max_timeout_sec clamping
  - Add four built-in profiles: default, offline_readonly, network_basic,
    network_extended with differentiated resource and security constraints
  - Add resource limit fields to BoxSpec (cpus, memory_mb, pids_limit,
    read_only_rootfs) and pass corresponding container CLI flags
    (--cpus, --memory, --pids-limit, --read-only, --tmpfs)
  - Profile loaded from config (box.profile), applied in service layer
    before BoxSpec validation; locked fields cannot be overridden by
    tool-call parameters

* feat(box): add obs

* refactor(box): unify box service lifecycle and local runtime
  management

* refactor(box): remove legacy in-process runtime code and clean up smells

After the architecture settled on always using an independent Box Runtime
service, several pieces of compatibility code and design shortcuts were
left behind. This commit cleans them up:

- Remove `LocalBoxRuntimeClient` and `create_box_runtime_client` from
  production code (moved to test-only helper).
- Remove unused `_clip_bytes` method from backend.
- Remove `__langbot_session_placeholder__` hack by making `BoxSpec.cmd`
  default to empty and validating non-empty only in `runtime.execute()`.
- Extract `get_box_config()` helper to eliminate 5× duplicated config
  access boilerplate.
- Remove `session_id`/`host_path`/`host_path_mode` from the LLM-facing
  tool schema to enforce request-scoped session isolation.
- Fix dual shutdown path: `NativeToolLoader.shutdown()` no longer calls
  `box_service.shutdown()` (handled by `Application.dispose()`).
- Simplify `_assert_session_compatible` with a loop.
- Inline client creation in `BoxRuntimeConnector`.
- Remove redundant `BOX__RUNTIME_URL` env var from docker-compose
  (auto-detected by code).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat(box/mcp): integrate MCP stdio with Box sandbox — auto-isolation, dep install, security

  ## Summary

  When Podman/Docker is available, all stdio-mode MCP servers now automatically
  run inside Box containers with dependency installation, path rewriting, and
  lifecycle management. When no container runtime exists, LangBot starts normally
  and stdio MCP falls back to host-direct execution.

  ## What changed

  ### MCP stdio → Box integration (mcp.py)
  - Add `MCPServerBoxConfig` pydantic model for structured box configuration
    with validation and defaults (network, host_path_mode, timeouts, resources)
  - Auto-infer `host_path` from command/args with venv detection: recognizes
    `.venv/bin/python` patterns and walks up to the project root
  - Rewrite host paths to container `/workspace` paths transparently
  - Replace venv python commands with container-native `python`
  - Auto-detect `pyproject.toml`/`setup.py`/`requirements.txt` and run
    `pip install` inside the container before starting the MCP server
  - Copy project to `/tmp` before install to handle read-only mounts
  - Add retry with exponential backoff (3 retries, 2s/4s/8s delays)
  - Add Box managed process health monitoring (poll every 5s)
  - Fix session leak: `_cleanup_box_stdio_session()` now runs in `finally`
    block of `_lifecycle_loop`, covering all exit paths
  - Fix retry logic: `_ready_event` is only set after all retries exhaust
    or on success, not on first failure
  - Enhance `get_runtime_info_dict()` with `box_session_id` and `box_enabled`

  ### Box security (security.py — new)
  - `validate_sandbox_security()` blocks dangerous host paths:
    `/etc`, `/proc`, `/sys`, `/dev`, `/root`, `/boot`, `/run`,
    docker.sock, podman socket
  - Called at the start of `CLISandboxBackend.start_session()`

  ### Box models (models.py)
  - Add `BoxHostMountMode.NONE` — skips volume mount entirely
  - Adjust `validate_host_mount_consistency` to allow arbitrary workdir
    when `host_path_mode=NONE`

  ### Box backend (backend.py)
  - Add `validate_sandbox_security()` call in `start_session()`
  - Add `langbot.box.config_hash` label on containers for drift detection
  - Handle `BoxHostMountMode.NONE` — skip `-v` mount arg
  - Add `cleanup_orphaned_containers()` to base class (no-op default) and
    CLI implementation (single batched `rm -f` command)

  ### Box runtime (runtime.py)
  - Call `cleanup_orphaned_containers()` during `initialize()` to remove
    lingering containers from previous runs

  ### Box service (service.py)
  - Graceful degradation: `initialize()` catches runtime errors and sets
    `available=False` instead of crashing LangBot startup
  - Add `available` property and guard on `execute_sandbox_tool()`
  - Add `skip_host_mount_validation` parameter to `build_spec()` and
    `create_session()` — MCP paths are admin-configured and trusted,
    bypassing `allowed_host_mount_roots` restrictions meant for
    LLM-generated sandbox_exec commands

  ### Default behavior
  - stdio MCP servers automatically use Box when `box_service.available`
    is True (Podman/Docker detected); no explicit `box` config needed
  - When no container runtime exists, falls back to host-direct stdio
  - MCP Box defaults: `network=on` (for pip install), `read_only_rootfs=false`
    (for site-packages), `host_path_mode=ro`, `startup_timeout=120s`

  ### Tests
  - `test_box_security.py`: blocked paths, safe paths, subpath rejection
  - `test_mcp_box_integration.py`: config model, path rewriting, venv
    unwrap, host_path inference, payload building, runtime info, box
    availability check
  - `test_box_service.py`: `BoxHostMountMode.NONE` validation tests

* feat(box/mcp): instance-based orphan cleanup, error classification, session API, and integration tests

  ## Changes

  ### Precise orphan container cleanup
  - Runtime generates a unique instance_id on startup
  - Every container gets a `langbot.box.instance_id` label
  - `cleanup_orphaned_containers()` only removes containers from
    previous instances, preserving containers owned by the current one
  - Containers from older versions (no label) are also cleaned up
  - `cleanup_orphaned_containers` added to `BaseSandboxBackend` as
    a no-op default method, removing hasattr duck-typing

  ### Fine-grained MCP error classification
  - New `MCPSessionErrorPhase` enum with 7 phases: session_create,
    dep_install, process_start, relay_connect, mcp_init, runtime,
    tool_call
  - Each phase in `_init_box_stdio_server()` sets the error phase
    before re-raising, enabling precise failure diagnosis
  - `retry_count` tracked across retry attempts
  - `get_runtime_info_dict()` exposes `error_phase` and `retry_count`

  ### GET /v1/sessions/{id} API
  - `BoxRuntime.get_session()` returns session details including
    managed process info when present
  - `handle_get_session` HTTP handler + route in server.py
  - `BoxRuntimeClient.get_session()` abstract method + remote impl

  ### stdio defaults to Box when runtime is available
  - `_uses_box_stdio()` checks `box_service.available` instead of
    requiring explicit `box` key in server_config
  - `BoxService.initialize()` catches runtime errors gracefully,
    sets `available=False` instead of crashing LangBot startup
  - When no container runtime exists, stdio MCP falls back to
    host-direct execution

  ### Code quality (from /simplify review)
  - Extracted `_VENV_DIRS` / `_VENV_BIN_DIRS` module-level constants
  - Removed dead `_box_network_mode()` method and unused `bc` variable
  - Fixed broken import `from ....box.models` → `from ...box.models`
  - Cached `_resolve_host_path()` result — computed once, passed through
  - Config hash now includes `host_path` field
  - Batched orphan cleanup into single `rm -f` command

  ### Session leak fix
  - `_cleanup_box_stdio_session()` now runs in `_lifecycle_loop`'s
    finally block, covering all exit paths (normal shutdown, error,
    retry, final failure)

  ### Integration tests
  - 6 end-to-end tests covering managed process lifecycle, WebSocket
    stdio bidirectional IO, session cleanup verification, single
    session query, process exit detection, and orphan cleanup safety

* refactor: use rpc

* fix: import

* refactor(box): clean up sandbox subsystem code quality and efficiency

  - Fix O(n²) stderr trimming in runtime.py with running length tracker
  - Remove dead code: RESERVED_CONTAINER_PATHS, _subprocess_wait_task,
    unused config_hash computation, unused imports
  - Deduplicate connection callback in BoxRuntimeConnector, parse URL once
  - Use enum comparison instead of stringly-typed spec.network.value check
  - Replace manual _result_to_dict/_session_to_dict with model_dump()
  - Cache NativeToolLoader tool definition and sandbox system guidance
  - Extract _is_path_under() helper to eliminate duplicated path checks
  - Import SANDBOX_EXEC_TOOL_NAME from native.py instead of redefining
  - Add JSON startswith guard in logging_utils to skip futile json.loads
  - Fix ruff lint errors (F401 unused imports, F841 unused variables)

* fix: ruff

* refactor(sandbox): keep box logic out of pipeline and localagent

  - Move sandbox system-prompt guidance from LocalAgentRunner into
    BoxService.get_system_guidance() so all box domain knowledge stays
    in the box module.
  - Remove standalone logging_utils.py; merge format_result_log() into
    MessageHandler base class alongside cut_str().
  - Strip sandbox-specific JSON parsing from log formatting; tool
    results now use generic truncation.
  - Revert TYPE_CHECKING changes in stage.py and runner.py that were
    unrelated to this feature.
  - Skip two test files affected by a pre-existing circular import
    (runner ↔ app) until the import cycle is resolved in a separate PR.

* refactor(box): move box runtime to langbot-plugin-sdk

  Extract self-contained box runtime modules (actions, backend, client,
  errors, models, runtime, security, server) to langbot-plugin-sdk and
  update all imports to use `langbot_plugin.box.*`. Keep only service
  and
  connector in LangBot core as they depend on the Application context.

  - Update docker-compose to use `langbot_plugin.box.server` entry
  point
  - Update pyproject.toml to use local SDK via `tool.uv.sources`
  - Remove migrated source files and their unit/integration tests
  - Update remaining test imports to match new module paths

* fix: ruff

* fix(box): tighten sandbox exposure and restore box integration coverage

* refactor(types): remove quoted annotations under postponed evaluation

* chore(sandbox): move MCP loader changes to follow-up branch

* refactor(plugins): simplify GitHub install flow to default master archive

* revert(api): restore plugin GitHub import flow in plugins controller

* Improve data-root handling and skill install previews

* Add managed skill authoring tools for local agents

* Refactor the skills UI around sidebar detail pages

* Document why managed skill authoring tools bypass box

* fix: lint

* feat(web): refactor plugin/skill install flows and fix skills page

- Fix sidebar skill icon
- Add skills route and error page component
- Refactor plugin GitHub install from dialog modal to inline card
- Add skill install dropdown menu (create/upload/github) in sidebar
- Wire sidebar → skills page communication via pendingSkillInstallAction context
- Add i18n keys for error page and skill install actions

* fix(web): persist sidebar collapsible section open state on navigation

Sections opened via sub-item navigation now retain their expanded state
when the user switches to a different section, instead of collapsing
because the isActive fallback becomes false.

---------

Co-authored-by: youhuanghe <1051233107@qq.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Junyan Qin <rockchinq@gmail.com>

* feat(sandbox): add MCP box integration on top of sandbox base (#2083)

* refactor(mcp): extract box stdio runtime helper

* refactor(box): introduce reusable workspace session helper

* refactor(box): run Box Runtime as subprocess inside LangBot container

  Remove the separate langbot_box_runtime Docker service. Box Runtime
  now always launches as a local stdio subprocess, regardless of whether
  LangBot runs in Docker or not. The WebSocket transport path is kept
  only for explicit runtime_url configuration (remote deployment).

  This simplifies deployment by eliminating cross-container path mapping
  and network hops. Box Runtime is a pure scheduling process (talks to
  Docker socket / nsjail), it does not execute user code or touch the
  filesystem, so container isolation is unnecessary — unlike Plugin
  Runtime.

* fix(web): prevent first-emission snapshot from swallowing unsaved changes in pipeline editor

When switching runner (e.g. local-agent → n8n), the newly mounted stage's
first emit would re-capture the saved snapshot, erasing the dirty state
caused by the runner change. The save button would incorrectly go dim.

- Skip snapshot re-capture in handleDynamicFormEmit when form is already dirty
- Add mount-time emit to N8nAuthFormComponent (matching DynamicFormComponent)
- Use stable onSubmitRef to prevent useEffect subscription churn
- Add previousInitialValues guard to prevent initialValues echo loops

* style(web): align plugin list header button heights

* docs(review): update Box architecture review documents

Replace old review docs with 5 focused documents:
- box-architecture.md: deep architecture analysis (LangBot + SDK)
- box-issues.md: 22 issues rated P0/P1/P2
- box-test-coverage.md: test coverage analysis
- box-tob-analysis.md: toB commercialization analysis
- box-vs-plugin-runtime.md: Box vs Plugin runtime comparison

* feat(web): improve login error layout and add Terms of Service link

- Improve backend connection error display with bordered container,
  inline icon, and better visual hierarchy
- Extract actual error message from axios response object
- Add Terms of Service link (https://langbot.app/terms) to login footer
- Add termsOfService i18n key for all 7 locales

* refactor(web): replace all hardcoded SVG icons with lucide-react

Unify icon usage across the entire frontend by replacing 67 hardcoded
SVG icons with lucide-react components across ~25 files. This improves
consistency, maintainability, and reduces bundle duplication.

Key replacements:
- Sidebar nav: Zap, LayoutDashboard, Bot, Workflow, BookMarked, etc.
- MCP forms: Loader2, XCircle, Trash2
- Monitoring: Sparkles, MessageSquare, CheckCircle2, RefreshCw, etc.
- Cards: Clock, Star, Workflow, Hexagon, Puzzle, Github, etc.
- Misc: Paperclip, AudioLines, CloudUpload, Layers, Heart, Smile

Zero hardcoded <svg> tags remain in .tsx files.

* fix(web): stop polling plugin tasks when no active installs

The PluginInstallTaskProvider was unconditionally polling
getAsyncTasks every 3s on all /home/* routes. Now it only
syncs once on mount and starts periodic polling only when
there are active (non-terminal) install tasks.

* fix(deps): update langbot-plugin version and add new dependencies

* refactor: use Space API for release checks and stop idle polling

- version.py: switch release list API from GitHub to space.langbot.app,
  remove unused in-place update logic (update_all, compare_version_str),
  translate all comments/logs to English
- PluginInstallTaskContext: only poll when active install tasks exist

* feat(box): add --standalone-box flag and 3-way transport decision for Box runtime

Align Box runtime connection logic with Plugin runtime's pattern:
- Docker: WebSocket to langbot_box container (ws://langbot_box:5411)
- --standalone-box: WebSocket to external Box process (ws://localhost:5411)
- Windows: subprocess + WebSocket (workaround for async stdio limitation)
- Unix/macOS: subprocess + stdio pipe (unchanged)

BoxRuntimeConnector now inherits ManagedRuntimeConnector for subprocess
lifecycle reuse. Add langbot_box service to docker-compose.yaml.

* refactor(box): use single port with path-based routing for Box WS

Update connector to use ws://host:5410/rpc/ws instead of ws://host:5411.
Update review docs to reflect the single-port architecture.

* feat(web): show Box runtime status in plugin debug info popover

Add Box status section to the debug info popover on the plugin list page,
displaying connection status, backend info, profile, active sessions,
and recent error count. Fetched from GET /api/v1/box/status in parallel
with plugin debug info. Includes i18n for all 8 supported languages.

* fix(web): remove ephemeral sandbox count from Box status display

The active_sessions count reflects transient sandbox containers that
expire after 5 minutes of inactivity, making it misleading in the UI.
Keep only connection status, backend, profile, and error count.

* feat(box): configurable sandbox scope and unified skill containers

Replace the per-message session_id with a template-based system
configurable per pipeline via 'Sandbox Scope' in the local-agent panel.
Default scope is per-chat ({launcher_type}_{launcher_id}).

Unify skill exec into the same container as default exec — skills are
mounted at /workspace/.skills/{name}/ via extra_mounts instead of
getting separate containers. All pipeline-bound skills are injected
at container creation time.

- Add box-session-id-template to pipeline metadata (select, 4 options, 8 languages)
- Add resolve_box_session_id() and build_skill_extra_mounts() to BoxService
- Rewrite native.py skill exec path to use execute_tool with shared session
- Update tests for new session_id format
- Add design doc: docs/review/box-session-scope.md

* feat(web): show active sandbox details in Box status popover

Display sandbox count and a detailed list of active sessions including
session ID, image, backend, resources (CPU/memory), network mode, and
last used time. Fetched from GET /api/v1/box/sessions in parallel.
Includes i18n for all 8 supported languages.

* feat(box): add startup and availability logging for sandbox tools

Log Box runtime initialization result (success with profile info, or
failure warning). Log native tool availability status at ToolManager
startup so it's immediately clear whether exec/read/write/edit tools
are registered for the LLM.

* feat(box): support custom sandbox container image via config.yaml

Add 'image' field to box config section. When set, it overrides the
profile default image (python:3.11-slim) for all sandbox containers.
Priority: caller-specified > config.yaml image > profile default.

* feat(box): add heartbeat and reconnection for Box runtime connector

Add 20-second heartbeat ping loop to detect silent Box runtime
disconnections. On disconnect, set available=false and attempt
reconnection after 3 seconds via the disconnect callback chain.

- BoxRuntimeConnector: heartbeat loop, disconnect callback parameter,
  disconnect detection in connection callback and WS failure handler
- BoxService: wire disconnect callback to toggle available state and
  re-initialize the connector on reconnection

* feat(web): move runtime status to dashboard, clean up plugin debug popover

Add SystemStatusCards component to the monitoring dashboard showing
Plugin Runtime and Box Runtime connection status with details (backend,
profile, sandbox count). Remove all Box/session status from the plugin
page debug popover — it now only shows debug URL and key.

Includes i18n for all 8 supported languages.

* refactor(web): compact system status into a single card alongside metrics

Replace the separate two-card row with a single compact 'System Status'
card placed as the 5th column in the metrics grid. Shows green/red dots
for Plugin Runtime and Box Runtime. Click to expand a popover with
connection details (backend, profile, sandbox count).

* feat: show connector error details for Plugin and Box runtime status

Record Box connector error in BoxService and expose it as
'connector_error' in GET /api/v1/box/status when unavailable.
Display error messages in the dashboard System Status popover
for both Plugin Runtime (plugin_connector_error) and Box Runtime
(connector_error) when they are disconnected.

* fix(web): auto-refresh system status and show disconnect errors in real time

Poll Plugin Runtime and Box Runtime status every 30 seconds so the
dashboard reflects disconnections without a manual page refresh.
Also re-fetch when the popover is opened for immediate feedback.

* fix(box): handle RPC failure in get_status/get_sessions gracefully

When the Box runtime disconnects, there is a race between the heartbeat
flipping _available=false and the frontend polling get_status(). If the
poll arrives first, client.get_status() throws a ConnectionClosedError
which propagated as a 500, causing the frontend to show a grey dot
(null status) instead of a red dot with error details.

Now get_status() catches RPC errors and returns available=false with
the exception message as connector_error. get_sessions() returns an
empty list when unavailable or on RPC failure.

* fix(box): add persistent reconnection loop with exponential backoff

The previous disconnect handler only retried once and then gave up.
Now spawns a background task that retries with exponential backoff
(3s, 6s, 12s, ... up to 60s) until the Box runtime is reachable again.
Uses a _reconnecting guard to prevent duplicate loops. Calls
connector.dispose() before each retry to clean up stale tasks.

* fix(box): detect disconnect when handler.run() returns normally

The generic Handler.run() catches ConnectionClosedError and breaks out
of its loop (normal return) instead of raising, because it has no
disconnect_callback. The old code only triggered reconnection in the
except branch, so a clean WebSocket close was never detected.

Now treat handler.run() returning normally (after successful handshake)
as a disconnect event, triggering the reconnection callback.

* fix(web): refresh system status card when clicking Refresh Data button

Pass a refreshKey prop through OverviewCards to SystemStatusCard that
increments on each Refresh Data click, triggering a re-fetch of Plugin
and Box runtime status alongside the monitoring data refresh.

* fix(web): fix system status card stuck in loading state

fetchStatus(showLoading=false) never called setLoading(false), so the
initial loading=true was never cleared. Simplify to always setLoading
in the finally block — the spinner only shows on the very first load
since subsequent fetches complete near-instantly.

* feat(web): show active sandbox details in dashboard Box status popover

Fetch box sessions alongside status and display each active sandbox
in the popover with session ID, image, resources (CPU/memory), and
last used time.

* feat(box): add global sandbox scope option

Add a 'Global (shared by all)' option to the sandbox scope selector.
Uses a constant '{global}' template variable that always resolves to
'global', so all users and chats share one sandbox container.

* refactor(web): replace popover with dialog for system status details

Replace the dropdown popover with a proper Dialog for runtime status
details. Add a small info button on the System Status card that opens
the dialog. Session details now show in a spacious 2-column grid layout
with full image name, backend, CPU/memory, network, mount path, and
created/last-used timestamps.

* fix(web): widen system status dialog and fix scroll border issue

Use max-w-2xl (matching other dialogs) instead of max-w-lg. Move
overflow-y-auto to an inner container with overflow-hidden on
DialogContent to prevent padding bleed at scroll edges.

* feat(web): add tooltips for truncated fields in system status dialog

Wrap session_id, image, and mount path fields with Tooltip components
so hovering over truncated text shows the full value.

* feat: add download button

* feat: successfully install

* feat: delete old filter

* feat: youhua frontend

* fix: align box runtime launch args

* feat: translate

* feat: refactor market

* feat: youhua qianduan

* chore: rename extension zh translation

* feat(extensions): unify extensions endpoint and refresh extensions page UX

- Rename /home/plugins route to /home/extensions and update all sidebar links.
- Add unified GET /api/v1/extensions returning plugins, MCP servers and skills,
  sorted by name; replace the three separate frontend fetches with this single call.
- Migrate the extensions page to shadcn primitives (Tabs/Card/Alert/Badge/Skeleton/
  Switch/Label) and clean up hardcoded color tokens on the extension card.
- Add a localStorage-persisted "Group by type" switch that, when enabled in the
  All Types tab, renders extensions grouped by type with a compact section header.
- Show a spinner while loading and rename the empty-state copy from
  "No plugins installed" to "No extensions installed".
- Rename the "格式 / Formats" filter label to "类型 / Types" across all 8 locales.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(extensions): fallback lucide icon when extension icon is missing

Render a tinted lucide icon (Puzzle / Server / Sparkles) on the extension
card when the icon URL is empty or the image fails to load. Picked icons
distinct from EventListener (AudioWaveform) and KnowledgeEngine (Book) to
avoid visual collision with plugin component badges.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(sidebar): unify installed-extensions list with plugins, MCP and skills

- Render plugins, MCP servers and skills together under the "Installed
  Extensions" sidebar entry, alphabetically sorted to match the list page.
- Resolve per-item routes by extension type (plugin -> /home/extensions,
  mcp -> /home/mcp, skill -> /home/skills) and gate the plugin-only hover
  context menu on extensionType === 'plugin'.
- Lift the "group by type" toggle into SidebarDataContext (still persisted
  in localStorage) so the sidebar groups items with section headers
  whenever the list page has the toggle enabled.
- Show lucide fallback icons (Server / Sparkles / Puzzle) tinted in the
  LangBot blue for MCP, skill, and missing-icon plugin items, overriding
  the SidebarMenuSubButton svg color rule.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(extensions): mobile-friendly layout for extensions and add-extension pages

- Stack the extensions page header vertically on small screens, let the
  filter Tabs scroll horizontally if they overflow, hide the debug
  button label below sm and let the install/debug controls wrap.
- Constrain the debug popover and its inputs to the viewport width so
  they no longer overflow on phone-sized screens.
- Drop the card grid from a fixed 30rem column to a min(100%, 22rem)
  column at base / 28rem at sm, and reduce the gap, so cards render
  cleanly at 360px+ widths in both flat and grouped views.
- Make the add-extension header actions wrap on lg- viewports and the
  install dialog responsive instead of a hard 500px box.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat: change ui

* feat: delete version for mcp and skills

* fix: constrain home page content width

* fix: preserve monitoring card borders under sticky filters

* fix(box): restore sandbox config and shared mcp runtime

* fix(box): harden sandbox session isolation

* fix(skill): remove auto activation setting

* feat(skill): align skill system with Claude Code's Tool Call design

- Replace text marker activation with `activate` tool (Tool Call mechanism)
- Replace 7 authoring tools with 2: `activate` + `register_skill`
- Add builtin skills loading from templates/skills/
- Add create-skill as first builtin skill
- Remove SKILL_ACTIVATION_MARKER and text detection methods
- Tool Result returns SKILL.md content (protects KV Cache)

This aligns with Claude Code's progressive disclosure pattern:
- Metadata (name+description) always visible in tool description
- SKILL.md body loaded on activate via Tool Call
- Bundled resources accessible through virtual path mapping

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* feat(tools): add glob and grep native sandbox tools

Add file discovery and content search capabilities to the sandbox:
- glob: Find files by pattern (supports ** recursive matching)
- grep: Search file contents with regex patterns

Both tools respect skill package paths and include safety limits
(max 100 files for glob, max 200 matches for grep).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(skill): add skill file browsing capability

- Add API endpoints for listing/reading/writing skill files
- Add FileTree component in SkillForm for directory browsing
- Users can now view scripts/, references/, assets/ directories
- Files can be selected and edited in the instructions textarea
- Add translations for new file browsing features

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(skill): copy builtin skills to data/skills on startup

- Builtin skills (templates/skills/) are now copied to data/skills/
- Users can view and manage builtin skills in the UI
- Rename SkillAuthoringToolLoader to SkillToolLoader

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(skill): improve file browsing and fix path handling

- Fix nested directory display in skill file tree (preserve root entries)
- Fix file content display when clicking files in skill browser
- Add skill manager and tool manager as proper package modules
- Separate fileContent state to allow editing non-SKILL.md files

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(toolmgr): correct skill_tool_loader attribute name

Rename skill_authoring_tool_loader to skill_tool_loader in execute_func_call
and shutdown methods to match the attribute defined in initialize().

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

* fix(native): update tool descriptions to use register_skill

Replace references to removed import_skill_from_directory with
register_skill in exec/write/edit tool descriptions.

* feat(toolmgr): enhance tool initialization with backend availability checks

* refactor: remove unused imports and clean up code in various files

* feat: polish extension detail pages

* feat: persist sidebar list expansion

* fix: refine extension ui and backend errors

* fix: align add extension marketplace ui

* feat: manage skills through box runtime

* feat: support github skill installation

* fix: import github skill directories

* feat: install market extensions from card click

* feat(web): improve skill import flow

* feat: polish extension import flow

* fix(mcp): stabilize shared box managed processes

* fix(web): improve backend retry and sidebar scrolling

* docs(review): refresh box architecture review for feat/sandbox

Sync the docs/review/ suite to the current state of the feat/sandbox branch
(both LangBot and langbot-plugin-sdk), ~30 commits ahead of the prior review.

- box-architecture.md: rewrite for the new box.{backend,runtime,local,e2b}
  config schema, add E2B backend, 6 native tools (incl. glob/grep), Skill
  Tool Call activation, shared multi-process MCP container, SkillManager,
  BoxSkillStore (SDK), 25 actions, 9 error types, heartbeat/reconnect
- box-issues.md: move resolved items (reconnect, heartbeat, Windows, nsjail
  image conflict, frontend monitoring card) into a Resolved section; add
  new P0 (INIT/backend ordering), P1 (extra_mounts immutability after
  container creation), P2 (skill_store test gap, integration tests not in CI)
- box-session-scope.md: add §0 Implementation Status — Phase 1 shipped,
  MCP unification landed earlier than originally scoped
- box-test-coverage.md: realign file inventory (4,400 -> 6,500 LOC),
  add 7 new test files including SDK backend_selection/e2b/skill_store
- box-tob-analysis.md: connection recovery now满足基本要求; add E2B and
  backend self-heal to capabilities; tick off Phase 1 reconnect/heartbeat
- box-vs-plugin-runtime.md: heartbeat/reconnect/Windows support now aligned
  with Plugin Runtime; revise remaining gaps (WS auth, shared base class)

* refactor(box): use unified env-override mechanism for box.local config

The box module hand-rolled its own LANGBOT_BOX_LOCAL_* env parsing in two
places (connector._get_box_config and service._local_config), duplicating
logic that LoadConfigStage._apply_env_overrides_to_config already provides
generically via the SECTION__SUBSECTION__KEY convention.

- Drop the bespoke LANGBOT_BOX_LOCAL_* parsing; read box.local straight
  from instance_config (the unified BOX__LOCAL__* overrides are already
  applied before BoxService initializes)
- Harden _load_allowed_mount_roots to accept a comma-separated string,
  since the generic mechanism stores a freshly-created key as a raw
  string when config.yaml has no box.local.allowed_mount_roots entry
- docker-compose: rename the langbot container env vars to
  BOX__LOCAL__* (the canonical convention); remove them entirely from
  the langbot_box container — the Box runtime never reads box.local from
  env/config.yaml, it is configured via the INIT RPC action

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test: repair stale skill/sandbox tests for feat/sandbox

The skill subsystem moved to Tool-Call activation and a Box-managed
skill store; several tests still asserted removed APIs and a sys.modules
stub leaked across the suite. Full unit suite now green (was 23 failing).

- test_skill_tools: drop TestSkillManagerActivation (text-marker API
  removed); rewrite TestSkillActivationHelper around the current
  skill.activation.register_activated_skill; replace the CRUD
  TestSkillAuthoringToolLoader with TestSkillToolLoader covering the
  current activate/register_skill tools and sandbox-availability gating
- test_tool_manager_native: ToolManager attr is skill_tool_loader (not
  skill_authoring_tool_loader); native loader now exposes 6 tools
  (exec/read/write/edit/glob/grep) and requires initialize() with a
  backend-available get_status()
- test_localagent_sandbox_exec: remove obsolete activation-marker
  leakage tests and their helper providers
- test_model_service / pipeline conftest: give the mocks skill_mgr=None
  so PreProcessor's local-agent skill-binding guard short-circuits
- test_n8nsvapi: stop permanently overwriting sys.modules
  ('langbot.pkg.provider.runner' etc.); save and restore around the
  import so other modules get the real LocalAgentRunner base class

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* ci(tests): run unit tests on every push to feat/** branches

- Add feat/** to push branches so long-lived feature branches are
  tested on every push (they accumulate large changes before a PR)
- Drop the push path filter entirely: every push to master/develop/
  feat/** now runs the full unit suite (the old 'pkg/**' filter never
  matched the real source path 'src/langbot/pkg/**', so backend-only
  pushes silently skipped tests)
- Fix the same broken path glob on the pull_request trigger
  ('pkg/**' -> 'src/langbot/pkg/**')

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(skill): harden mount/reload paths and HTTP errors against stale skill cache

The Box backends behave inconsistently when extra_mounts reference a
missing host directory (nsjail aborts the entire sandbox start, Docker
silently creates a root-owned empty dir on the host, E2B silently skips
the upload). The cache in skill_mgr.skills is only refreshed on
in-process mutations, so out-of-band changes — container rebuilds,
manual rm in the box volume, anything the LangBot API didn't drive —
leave a stale skill that later produces one of those bad mount paths.

- box/service.py: build_skill_extra_mounts now filters skills whose
  package_root is not isdir on the LangBot-visible filesystem and logs
  a warning, instead of passing the bad mount through to the backend
- skill/manager.py: reload_skills (Box path) drops skills whose
  package_root is missing on the LangBot-side filesystem before they
  reach the in-memory cache, with a summary warning
- api/http/controller/groups/skills.py: file/CRUD handlers now also
  catch BoxError (RuntimeError subclass, previously slipping past
  ``except ValueError`` and surfacing as 500); list/get handlers gain
  a try/except so a transient Box RPC failure becomes a clean 400
  instead of a stack trace

Tests added for build_skill_extra_mounts (skip missing, skip empty,
no skill manager) and SkillManager.reload_skills (drop missing on Box
path). Full unit suite: 279 passed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(box): add box.enabled toggle and gate consumers on availability

Make the Box sandbox runtime optional. When ``box.enabled`` is false in
config (or when an enabled Box fails to connect), every dependent feature
degrades to the same disabled-state UX rather than crashing or silently
falling back to less safe code paths.

Backend:

- config.yaml: new top-level ``box.enabled: true`` flag (default true)
- BoxService:
  - Read box.enabled on construction
  - initialize() short-circuits when disabled — no remote WS connect, no
    stdio subprocess fork
  - _on_runtime_disconnect is a no-op when disabled (no reconnect loop
    on a deliberately-off service)
  - get_status() now exposes ``enabled`` so the frontend can tell
    "disabled in config" from "configured but failed"
- MCP stdio loader (mcp_stdio.uses_box_stdio): requires box_service to
  be available, not just installed
- MCP _init_stdio_python_server: when ap.box_service exists but is
  unavailable, refuse the stdio server with an actionable error instead
  of silently falling through to host-stdio (which bypasses the sandbox
  the operator asked for). Setups without ap.box_service installed at
  all keep the legacy host-stdio fallback for pre-Box dev mode
- SkillService._require_box_for_write: refuses create/update/install/
  write_skill_file when ap.box_service is installed but unavailable.
  Distinguishes disabled vs failed in the error message so the UI can
  surface the right hint. Legacy setups (no ap.box_service) keep the
  local fallback path — that distinction is what keeps the existing
  local-skills tests valid

Tests:
- Box disabled-state behavior (4 cases)
- Skill write refusal in disabled & failed states (7 cases)
- MCP stdio runtime info policy updated to match new refuse-when-down
  behavior

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(web): surface Box disabled/unavailable state across consumers

When Box is disabled in config (``box.enabled = false``) or fails to
connect, every dependent UI surface now degrades visibly:

- ``useBoxStatus`` hook: shared, polled 30s, exposes ``available``,
  ``disabled`` (config-off) and a single ``hint`` key so callers don't
  have to re-derive the three states
- ``BoxUnavailableNotice`` reusable Alert banner driven by that hint
- Dashboard SystemStatusCards: three-state dot + label
  (connected / disabled-gray / disconnected-red); disabled state shows
  the ``boxDisabled`` hint, failed state continues to show the connector
  error. Plugin block kept untouched
- Skills page (create view) and SkillDetailContent (edit view):
  Save button disabled and banner inserted above the form when Box is
  unavailable — matches the backend gate added in the previous commit
- PipelineExtension skill section: ``enable_all_skills`` switch, Add
  Skill button and Remove buttons all gate on Box availability;
  banner inline under the section header
- PipelineFormComponent: banner above the ``local-agent`` stage card
  when Box is unavailable, since that stage carries the sandbox-bound
  ``box-session-id-template`` field
- Box status payload type (``ApiRespBoxStatus.enabled``) and 8 locale
  files updated with ``boxDisabled`` / ``boxUnavailable`` /
  ``boxRequiredHint`` strings

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* docs(box): document the box.enabled toggle and gate behavior matrix

- docker-compose: move ``langbot_box`` under compose profiles
  (``box`` and ``all``) so ``docker compose up`` no longer requires
  the sandbox container. Inline comment explains how to pair the
  profile choice with ``box.enabled`` so the langbot service does not
  thrash trying to reach a runtime that was never started
- docs/review/box-architecture.md:
  - Annotate ``box.enabled`` in the config.yaml example, listing the
    exact side effects (no remote/stdio connect; tools/skills/MCP
    stdio off; reads still work)
  - Replace the bare compose snippet with the actual profile-driven
    invocation and the BOX__ENABLED pairing
  - New "关闭/连接失败时的行为矩阵" section: a single table mapping
    every consumer (native tools, activate/register_skill, stdio MCP,
    skill list/CRUD, pipeline AI config, extensions page, dashboard)
    to its disabled-state behavior, plus the legacy ``ap.box_service``
    distinguisher note

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* refactor(pipeline-form): swap Box banner for field-level disable_if + tooltip

The previous commit hard-coded a BoxUnavailableNotice banner above the
``local-agent`` stage card. That works, but it shouts at the user about
every field in that stage when in reality only one field —
``box-session-id-template`` — depends on the sandbox.

Use the dynamic-form schema's existing variable-injection mechanism
(``__system.*`` references via ``systemContext``) and add a sibling to
``show_if``: ``disable_if`` + ``disabled_tooltip``. The field stays
visible, becomes inert, and an info icon next to its label exposes the
reason on hover. The rest of the AI tab is left untouched.

- entities/form/dynamic.ts: extend IDynamicFormItemSchema with
  ``disable_if: IShowIfCondition`` and ``disabled_tooltip: I18nObject``
- DynamicFormComponent: evaluate disable_if with the same resolver as
  show_if; OR the result into isFieldDisabled; render an Info tooltip
  trigger next to the label when the condition matches
- ai.yaml metadata: attach disable_if (__system.box_available eq false)
  and a localized disabled_tooltip to box-session-id-template
- PipelineFormComponent: drop the BoxUnavailableNotice import and the
  per-stage banner; pass ``systemContext={ box_available: boxAvailable }``
  only for the local-agent stage so other stages aren't paying the
  re-render cost

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(mcp): friendly UI message when stdio MCP refused by Box state

Previously the MCP detail dialog dumped the raw RuntimeError text from
``_init_stdio_python_server`` — English-only, prefixed with "Failed
after 4 attempts", and exposing internal config names. The retry
wrapper also kept retrying a refusal that is deterministically going
to fail again, polluting logs.

Replace the raw text with a structured signal:

- New ``MCPSessionErrorPhase.BOX_UNAVAILABLE`` enum value. The stdio
  refusal path sets it before raising and uses a short opaque
  discriminator (``box_disabled_in_config`` / ``box_unavailable``) as
  the message body — never user-facing
- ``_lifecycle_loop_with_retry`` short-circuits on
  ``BOX_UNAVAILABLE``: surfaces the error immediately, no retries,
  no "Failed after N attempts" prefix. Silences the warning storm
  seen during smoke-testing
- ``MCPServerRuntimeInfo`` (TS type) now declares ``error_phase``,
  ``retry_count``, ``box_session_id``, ``box_enabled`` to match what
  the backend already returns in get_runtime_info_dict()
- Both MCP detail forms (``mcp/components/mcp-form/MCPForm.tsx`` and
  ``plugins/mcp-server/mcp-form/MCPFormDialog.tsx``) detect
  ``error_phase === 'box_unavailable'`` and render a two-line
  localized notice: state line ("Box disabled / unreachable") plus
  remediation line ("enable Box or switch to http/sse")
- 8 locale files (en/zh-Hans/zh-Hant/ja/ru/vi/th/es) get
  ``mcp.boxDisabledStdioRefused``, ``mcp.boxUnavailableStdioRefused``,
  ``mcp.boxStdioRefusedSuggestion``

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(mcp-web): block stdio MCP creation at the form when Box is unavailable

When Box is disabled in config (``box.enabled = false``) or unreachable,
saving a new MCP server in stdio mode produced one that could never
start — the user would only learn that from the runtime error on the
detail page. Stop the user before they save instead.

Both MCP forms (the page-level ``MCPForm.tsx`` and the older dialog
``MCPFormDialog.tsx``) now:

- Disable the ``stdio`` option in the mode select when Box is
  unavailable, with a small "(requires Box)" suffix so the reason is
  obvious. Existing stdio configs still display their current value
- Show ``BoxUnavailableNotice`` inline under the mode select when the
  currently-selected mode is stdio and Box is unavailable, so editing
  a stale stdio config makes the cause visible
- Disable the Save / Submit button while stdio is selected under that
  condition. ``MCPForm`` exposes a new ``onSaveBlockedChange`` prop
  so the parent ``MCPDetailContent`` can disable both its Submit and
  Save buttons. ``MCPFormDialog`` disables its Save button locally
- Refuse the submit handler too (Enter-key path) with a toast carrying
  the same i18n message

i18n: ``mcp.boxRequired`` (short tag in the disabled option) and
``mcp.stdioBlockedByBoxToast`` added to all 8 locales.

Backend runtime gate (``_init_stdio_python_server`` refusal +
``BOX_UNAVAILABLE`` error_phase + retry short-circuit) stays in place
as the last line of defence for API bypass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(web): prevent plugin config form overflow

* refactor(skill): remove all local-filesystem fallbacks; Box is the sole source

Skills now flow exclusively through the Box runtime. Every read and write
method funnels through ``_box_service()``; when Box is unavailable
(disabled in config, connection failed, or simply not installed) the
operation either returns an empty surface (``list_skills`` → []) or
raises with a clear ``Box runtime ... not initialised / disabled /
unavailable: ...`` message via the new ``_require_box(action)`` helper.

Why: the legacy local-fallback path scanned ``data/skills/``, but Box
manages its own ``box.local.skills_root`` (default ``data/box/skills/``).
The two diverging directories caused stale / phantom skill lists when
Box flapped, and the local-fallback writes silently bypassed all the
sandboxing the operator had configured.

SkillService (``api/http/service/skill.py``):
- New ``_require_box(action)`` returns the box service or raises a
  structured ValueError. ``_require_box_for_write`` kept as alias
- ``list_skills`` → returns [] when Box is down so the UI can render
  the disabled banner cleanly
- ``get_skill`` / ``get_skill_by_name`` → return None
- All read-file / write-file / scan-dir / create / update / delete /
  install / preview methods → ``_require_box`` then box delegate.
  Local fallback bodies (shutil.copytree, tempfile.mkdtemp, preview
  pipelines) removed entirely

SkillManager (``pkg/skill/manager.py``):
- ``reload_skills`` returns early with empty cache when Box is down.
  data/skills/ discovery loop removed
- ``refresh_skill_from_disk`` now just reports cache presence; the
  on-disk re-parse is gone since Box is the only writer

Tests:
- Drop 11 obsolete test_skill_service.py tests that exercised the
  removed local-fallback paths (create/install/file/delete/update)
- Add list-empty + read-refused tests; flip the legacy-allow test to
  legacy-refuses-too
- Rewrite refresh_skill_from_disk test to match the new behaviour

Several helper methods (_managed_skill_path, _resolve_skill_path,
_preview_skill_candidates, _install_preview_candidates, etc.) are now
unreachable; a follow-up commit will prune them so this diff stays
reviewable.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* chore(skill): prune dead local-filesystem helpers left over from Box migration

Follow-up to the Box-only refactor. The previous commit removed the
local-fallback BRANCHES from every public method; this one removes the
HELPERS those branches called, which are now unreachable.

SkillService (service/skill.py): 787 → 449 lines
  Removed: scan_directory (sync), _read_skill_package, _write_skill_md,
  _resolve_create_field, _managed_skill_path,
  _managed_install_root_for_package, _normalize_package_root,
  _resolve_skill_path, _find_skill_entry, _discover_skill_directories,
  _safe_extract_zip, _extract_uploaded_skill_to_temp,
  _download_github_skill_to_temp, _resolve_github_source_root,
  _build_preview_target_dir, _preview_skill_candidates,
  _select_preview_candidates, _install_preview_candidates,
  _preview_source_root, _resolve_installed_skills, plus the
  module-level _FRONTMATTER_FIELDS and _build_skill_md.
  Kept (still needed by the surviving GitHub-import path):
  _download_github_asset, _download_github_skill_directory_as_zip,
  _find_github_skill_archive_entry, _copy_github_skill_directory_to_zip,
  _is_github_skill_md_url, _parse_github_skill_md_url,
  _resolve_github_skill_md_package_name, _validate_github_asset_url,
  _uploaded_skill_target_stem, _validate_skill_name.
  Imports dropped: shutil, tempfile, yaml, ....utils.paths.

SkillManager (skill/manager.py): 187 → 88 lines
  Removed: get_managed_skills_root, _discover_skill_directories,
  _find_skill_entry, _load_skill_file, _normalize_package_root.
  Imports dropped: datetime, parse_frontmatter, paths.

Tests:
  - test_skill_service.py: drop the 3 sync scan_directory tests +
    skill_service fixture + _create_skill_file helper
  - test_skill_tools.py: drop test_load_skill_file_success; rename
    TestSkillManagerPackageLoading → TestSkillManagerCache

Full unit suite: 277 passed, 1 skipped. ``ruff check`` clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(skill): re-inject skill index into local-agent system prompt

The contributor's original PR (#1917) appended an ``Available Skills``
index to the system prompt before the LLM saw the user message, so the
LLM could decide whether to activate a skill. ``7145447b`` removed the
text-marker activation flow and, together with it, the entire system
prompt injection — but the Tool Call replacement only put the available
skills inside the ``activate`` tool's description. In practice the LLM
ignores tool descriptions for selection and goes straight to native
tools, so user-visible skill activation silently broke.

Restore the injection, adapted for the Tool Call era:

- SkillManager regains ``get_skill_index(bound_skills)`` and
  ``build_skill_aware_prompt_addition(bound_skills)``. The addendum
  carries only ``name (display_name): description`` for each
  pipeline-visible skill plus one instruction line pointing at the
  ``activate`` tool. No SKILL.md contents — KV cache stays clean
- PreProcessor appends the addendum to the first system message (or
  inserts a new one) of ``query.prompt.messages`` for the local-agent
  runner. Handles plain-string and ContentElement[] bodies. Skips
  cleanly when no skills are visible
- 3 new test_preproc cases: injection happens, bound-skills subset
  honoured, empty addendum touches nothing. 280 passed

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* fix(box): downgrade get_status.available when backend probed unavailable

Until now ``BoxService.get_status`` returned ``available: true`` whenever
the runtime connector was healthy, even if the runtime itself reported
``backend: { available: false }`` (operator selected nsjail without the
binary, Docker daemon crashed mid-session, E2B credentials wrong, ...).
The dashboard / ``useBoxStatus`` hook / skill_service gate consumed the
top-level flag and showed "connected" while every actual call to native
exec or skill management would fail.

The native-tool loader already polled ``status.backend.available``
independently and hid its tools correctly, but every other consumer
(dashboard banner, the disabled-state hint, the LLM-facing message)
disagreed with it.

Combine the two in the payload: ``available = self._available AND
status.backend.available``. When ``backend.available`` is false we now
also surface a ``connector_error`` that names the backend
("Configured sandbox backend \"nsjail\" is unavailable") so the dialog
shows the actionable reason instead of an empty error pane. The
detailed ``backend`` object is preserved unchanged for the dialog.

Internal ``box_service.available`` (used by ``skill_service`` writes,
``mcp_stdio.uses_box_stdio``, the reconnect callback) is intentionally
NOT changed — it still tracks connector health only, so a backend blip
does not trigger spurious reconnect loops.

Tests:
- ``test_get_status_downgrades_available_when_backend_dead`` — exercise
  the new branch (connector OK, backend.available=false → top-level
  available=false, connector_error mentions the backend name)
- ``test_get_status_keeps_available_true_when_backend_ok`` — guard
  against regressing the happy path

Live-verified with ``box.backend: nsjail`` on macOS (no nsjail binary):
``GET /api/v1/box/status`` now returns ``available: false`` with the
named connector_error, instead of the previous misleading
``available: true``.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* feat(web): surface the specific Box failure reason in unavailable banner

When Box is configured but the runtime reports its backend is dead
(e.g. ``box.backend = nsjail`` but the binary is missing, or Docker
daemon crashed), the backend now returns a structured
``connector_error`` like ``Configured sandbox backend "nsjail" is
unavailable``. The previous notice only said "Box sandbox is
unavailable" + a generic "enable Box" hint, hiding the actionable
detail.

- ``useBoxStatus``: derive ``reason`` from ``status.connector_error``.
  Only exposed for the failed-state (``hint === 'boxUnavailable'``),
  since the disabled-by-config message already carries its reason
- ``BoxUnavailableNotice``: insert the reason as a small monospaced
  line between the state message and the action hint. The disabled
  variant is unchanged (operator chose the state)
- Wire ``reason`` through every existing call site (Skills page +
  detail, PipelineExtension, both MCP forms). Old unused ``context``
  prop dropped

Net layout (3 lines, still compact):

  ⚠ Box sandbox is unavailable — sandbox tools, skill add/edit, ...
    Configured sandbox backend "nsjail" is unavailable
    This feature requires the Box runtime. Enable it in config ...

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

* test: reconcile master's unit tests with feat/sandbox refactors

The merge from master brought in new unit tests that target pre-refactor
APIs on feat/sandbox. Reconcile each:

- factories/app.py: FakeApp now exposes a Mock skill_mgr (with empty .skills
  dict + inert prompt-addition builder) and a Mock pipeline_service so the
  PreProcessor skill-index injection branch can run end-to-end in tests.

- pipeline/conftest.py: eagerly import langbot.pkg.pipeline.pipelinemgr so
  pipeline.stage is fully initialised before any individual stage test
  (preproc, longtext, ...) tries to lazy-load it. Without this preload,
  running test_preproc.py in isolation hit a circular-import error via the
  stage -> app -> pipelinemgr -> stage chain.

- provider/test_tool_manager.py: ToolManager now probes four loaders
  (native -> plugin -> mcp -> skill). Inject inert native + skill mocks in
  the execute_func_call fixture and assert all four shutdowns fire.

- utils/test_paths.py: drop the three cwd-dependent _check_if_source_install
  cases. The refactor walks Path(__file__).resolve().parents looking for
  pyproject.toml + main.py, so cwd no longer factors in and there's no
  file read to mock-fail. The positive case and caching test still apply.

- utils/test_version.py: delete entirely. is_newer and compare_version_str
  were removed when VersionManager was refactored to use the Space API for
  release checks (1b4107a9); the tests targeted a surface that no longer
  exists.

* refactor(box): launch box runtime via the lbp CLI subcommand

Mirror the plugin runtime: box is now started through the same CLI entry
point (langbot_plugin.cli) instead of the box module directly.

- docker-compose.yaml: langbot_box command runs `langbot_plugin.cli ... box`
  (WebSocket is the default transport, no flag needed — matches `rt`).
- box/connector.py: both subprocess launch sites (_start_local_stdio and
  the Windows _start_subprocess_then_ws path) invoke
  `langbot_plugin.cli.__init__ box`, using `-s` for the stdio transport.
- docs/review: update stale `-m langbot_plugin.box[.server]` references.

Pairs with the SDK change that removes box's direct-launch entry points
(python -m langbot_plugin.box / .box.server) and the legacy --mode flag.

* chore: bump langbot-plugin beta 1

* fix(ci): resolve langbot-plugin from PyPI and clear lint failures

CI on feat/sandbox failed across Unit Tests, Lint and Build Dev Image.
Root causes and fixes:

- pyproject.toml had a [tool.uv.sources] editable override pinning
  langbot-plugin to ../langbot-plugin-sdk. That path only exists in a
  paired local checkout, so `uv sync` failed on every CI runner
  ("Distribution not found"). Remove the override and regenerate uv.lock
  so langbot-plugin==0.4.0b1 resolves from PyPI, matching master.

- tests/integration/api/test_pipelines.py: the pipeline extensions
  endpoint now calls ap.skill_service.list_skills(); add the missing
  skill_service mock to the fake_pipeline_app fixture (the test came
  from master, the endpoint change from feat/sandbox).

- Apply ruff format to three src files and prettier to three web files
  that had committed formatting drift, failing `ruff format --check`
  and `pnpm lint`.

* chore: bump beta version

* docs: remove BOX_BACKEND override reference

* fix(pipelines): stop attributing dashboard debug WS to bound web_page_bot

The dashboard pipeline-debug WebSocket
(/api/v1/pipelines/<uuid>/ws/connect) and the embed widget WebSocket
(/api/v1/embed/<bot_uuid>/ws/connect) already live on separate paths,
but the debug handler ran `_find_owner_bot(pipeline_uuid)` and, when
the same pipeline happened to be bound to a web_page_bot, passed that
bot as `owner_bot` into `handle_websocket_message`. The adapter then
used the page bot's listeners + adapter for the request, so debug
sessions were logged as "page bot" activity in the dashboard.

Debug sessions must always run under the built-in websocket_proxy_bot.
Remove `_find_owner_bot`, drop the `owner_bot` parameter from the
debug-path `_handle_receive`, and call `handle_websocket_message`
without it so the adapter takes its default proxy-bot branch. The
embed handler still resolves and passes its `runtime_bot` for the
page-bot path, so attribution there is unchanged.

* fix(plugin): install marketplace MCP from canonical mode + extra_args

_install_mcp_from_marketplace read the dropped `mcp_data.config` field
and reconstructed mode/extra_args by guessing from the URL — which lost
stdio's command/args/env/box entirely, so stdio MCP installs from the
marketplace always failed.

Use the Space record's canonical `mode` and `extra_args` directly (the
same shape stored in mcp_servers), and gate the install on `mode`
instead of the removed `config`. After a successful install, best-effort
POST to the marketplace install endpoint to bump install_count.

* feat(web): show recommendation lists in plugin market; mixed-type icons

The marketplace recommendation lists (curated rows from Space) were never
mounted in the plugin market page. Wire them in:
- fetch recommendation lists on mount and render them above the extension
  grid, only when no search/filter is active.

Recommendation lists now mix plugins, MCPs and skills, so resolve each
card's icon by type (plugin / mcp / skill marketplace icon URL) instead of
always using the plugin icon endpoint.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): auto-open install dialog from one-click deep link

Accept a deep link from LangBot Space's one-click install:
/home/add-extension?install=1&extension_type=<plugin|mcp|skill>&author=&name=&version=
On mount, populate the install info, open the confirm dialog directly, and
strip the params from the URL. Reuses the existing marketplace install flow.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat: push marketplace URL to runtime; fix market client base race

- On connecting to the plugin runtime, push the configured space.url via the
  new SET_RUNTIME_CONFIG action so the runtime downloads plugins from the same
  Space, instead of relying on its own CLOUD_SERVICE_URL env/default. Wrapped
  in try/except so an older SDK without the action degrades gracefully.
- web: the plugin market fetched recommendation lists (and listings) via the
  sync cloud client before its baseURL was resolved from system info, so it
  hit the default space.langbot.app. Await getCloudServiceClient() before the
  initial fetches and for the recommendation list.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): don't show MCP "connection failed" while still connecting

The MCP status UI rendered "连接失败" for any non-connected state, so during a
normal connection attempt the subtitle showed "连接失败" while the status pill
below it showed "连接中..." — contradictory.

Only treat an explicit ERROR (or box-unavailable) status as failed; a
CONNECTING or initial/unresolved status now shows "连接中". Applied to the MCP
detail form (subtitle + StatusDisplay) and the MCP server card.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): type-aware install dialog + refresh sidebar after install

The marketplace install confirm dialog was hardcoded to "安装插件 / 确定要安装
插件 X 吗" for every type. Make it type-aware (plugin / MCP / skill) and show
more info: type chip, author/name id, and version when present.

Also refresh all sidebar extension lists (plugins, MCP servers, skills) when
an install task completes, so the newly-installed extension appears
immediately regardless of type (previously only refreshPlugins ran).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): richer install dialog (icon + name + description), drop redundant type row

The install dialog already states the type in its title, so the "类型" row was
redundant. Replace the info box with the extension's icon (avatar), display
name, author/name id + version, and description — built from the PluginV4 for
in-app installs and from the icon endpoint by type for the one-click deep link.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): TDZ crash in add-extension (installIconURL before installInfo)

installIconURL was computed above the useState declaration of installInfo,
causing "Cannot access 'installInfo' before initialization" (500) on the
add-extension page. Move the computation below the state declarations.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): redesign install-progress dialog for MCP/skill

The progress dialog showed plugin-only stages (download + dependency install)
for every type. MCP/skill have no such steps, so show a single
"installing → done/failed" row for them (MCP: adding & connecting the server;
skill: installing the package) while keeping the detailed download/deps
stages for plugins.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(web): add missing market.componentName i18n keys

The marketplace component filter (and component badges) used
market.componentName.{Tool,Command,EventListener,KnowledgeEngine,Parser,Page}
but those keys only existed under plugins.componentName, so the market UI
showed raw keys. Add a componentName block to the market namespace (zh-Hans +
en-US; other locales fall back to zh-Hans).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(web): sidebar extensions refresh button + full-name tooltip

- Add a refresh button to the installed-extensions category header in the
  sidebar; it re-fetches plugins + MCP servers + skills and spins while
  loading.
- The sidebar item tooltip now shows the extension's full name (with the
  description below when present), so truncated MCP/extension names are
  readable on hover.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(plugin-market): rename component filter to "插件组件" with hint tooltip + persist filters

- Rename the in-app plugin market component filter label to "插件组件" /
  "Plugin Component"
- Add an Info icon tooltip explaining what plugin components are (Tool /
  Command / EventListener, etc.)
- Persist filter selections (type / component / tags / sort) in localStorage
  so they survive reloads; restored on mount (URL type param still wins)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(plugin-market): restore missing "页面"(Page) component filter option

The market component-filter list on this branch was a diverged rewrite that
dropped the Page component kind master had added. The i18n key
(market.componentName.Page) already existed; re-add the Page entry to the
componentOptions list so plugins providing Page components can be filtered.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs(i18n): reword plugin component filter hint

Drop the redundant "插件组件是" lead-in and mention that components extend
LangBot's capabilities; mirror the wording in en-US.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(i18n): backfill missing market/addExtension keys in 6 locales

check-i18n surfaced that market.componentName.*, market.filterByComponentHint
and the addExtension.install* keys existed only in en-US/zh-Hans. Backfill
them for es-ES, ja-JP, ru-RU, th-TH, vi-VN and zh-Hant (reusing each locale's
existing component-name translations) and align the filterByComponent label
with the new "Plugin Component" wording. check-i18n now passes for all locales.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* i18n(plugins): relabel "group by type" as "group by format"

The installed-extensions grouping is by extension format (plugin / MCP / skill),
so rename the toggle label accordingly across all 8 locales (key unchanged).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(plugin-market): cursor-pointer on tag filter trigger

The TagsFilter Select trigger used the default cursor; add cursor-pointer so the
tag filter is clearly clickable.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* feat(sidebar): show edition badge (Community / Cloud) in logo area

Add a small badge next to the LangBot name in the sidebar header that reflects
systemInfo.edition: a neutral "Community" badge for the community edition and a
blue "Cloud" badge for the cloud edition. Adds sidebar.editionCommunity /
sidebar.editionCloud across all 8 locales.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* i18n(sidebar): unify zh-Hans cloud edition label to 云端版

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(sidebar): edition badge - drop hover, use "Cloud" in all locales

The edition badge is not interactive, so remove the hover background on the
cloud badge. Also use the literal "Cloud" label uniformly across all locales
instead of localized variants (云端版/クラウド版/...).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix(box): cap tool-call loop and run workspace-quota walk off the event loop

Two robustness fixes that bite under normal sandbox usage (not just attack),
hardening the self-hosted community edition before release:

- localagent: cap the tool-call loop at MAX_TOOL_CALL_ROUNDS (128). A looping
  or adversarial model could otherwise emit tool calls indefinitely (each
  potentially a sandbox exec), producing a non-terminating request and runaway
  cost. The cap is generous enough not to interrupt legitimate multi-step
  agentic workflows.
- box.service: make _enforce_workspace_quota async and run the recursive
  workspace scan via asyncio.to_thread. It ran on every quota-enforced exec and
  a large workspace would block the whole asyncio runtime (all bots/pipelines).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* docs(review): refresh box docs; trim issue list to SaaS blockers only

Community self-hosted edition is release-ready, so the box review docs are
updated to current state (date 2026-06-02 + status note) and box-issues.md is
rewritten to keep only the SaaS / multi-tenant / network-exposed release
blockers (S1-S8): unauthenticated control plane, no per-pipeline exec
authorization, unbounded sessions + no reaper, no kernel-level quota, mount
validation gaps (/ + extra_mounts), missing container hardening, lock-around-
cold-start, and the lower-severity follow-ups. Resolved items (tool-call loop
cap, async quota scan, host_path mount allowlist, _is_path_under dedup) moved to
a short "resolved before community release" record; community-only and
pure-cleanup items dropped.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* chore(deps): pin langbot-plugin to 0.4.0

Track the stable SDK release (0.4.0b1 -> 0.4.0); regenerate uv.lock.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: WangCham <651122857@qq.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: fdc310 <82008029+fdc310@users.noreply.github.com>
Co-authored-by: Junyan Qin <rockchinq@gmail.com>

web/src/app/home/bots/components/bot-card/BotCard.tsx

@@ -4,6 +4,7 @@ import { httpClient } from '@/app/infra/http/HttpClient';
 import { Switch } from '@/components/ui/switch';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
+import { MessageSquare, Workflow } from 'lucide-react';
 
 export default function BotCard({
   botCardVO,
@@ -42,28 +43,14 @@ export default function BotCard({
           </div>
 
           <div className={`${styles.basicInfoAdapterContainer}`}>
-            <svg
-              className={`${styles.basicInfoAdapterIcon}`}
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M2 8.99374C2 5.68349 4.67654 3 8.00066 3H15.9993C19.3134 3 22 5.69478 22 8.99374V21H8.00066C4.68659 21 2 18.3052 2 15.0063V8.99374ZM20 19V8.99374C20 6.79539 18.2049 5 15.9993 5H8.00066C5.78458 5 4 6.78458 4 8.99374V15.0063C4 17.2046 5.79512 19 8.00066 19H20ZM14 11H16V13H14V11ZM8 11H10V13H8V11Z"></path>
-            </svg>
+            <MessageSquare className={`${styles.basicInfoAdapterIcon}`} />
             <span className={`${styles.basicInfoAdapterLabel}`}>
               {botCardVO.adapterLabel}
             </span>
           </div>
 
           <div className={`${styles.basicInfoPipelineContainer}`}>
-            <svg
-              className={`${styles.basicInfoPipelineIcon}`}
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M6 21.5C4.067 21.5 2.5 19.933 2.5 18C2.5 16.067 4.067 14.5 6 14.5C7.5852 14.5 8.92427 15.5539 9.35481 16.9992L15 16.9994V15L17 14.9994V9.24339L14.757 6.99938H9V9.00003H3V3.00003H9V4.99939H14.757L18 1.75739L22.2426 6.00003L19 9.24139V14.9994L21 15V21H15V18.9994L9.35499 19.0003C8.92464 20.4459 7.58543 21.5 6 21.5ZM6 16.5C5.17157 16.5 4.5 17.1716 4.5 18C4.5 18.8285 5.17157 19.5 6 19.5C6.82843 19.5 7.5 18.8285 7.5 18C7.5 17.1716 6.82843 16.5 6 16.5ZM19 17H17V19H19V17ZM18 4.58581L16.5858 6.00003L18 7.41424L19.4142 6.00003L18 4.58581ZM7 5.00003H5V7.00003H7V5.00003Z"></path>
-            </svg>
+            <Workflow className={`${styles.basicInfoPipelineIcon}`} />
             <span className={`${styles.basicInfoPipelineLabel}`}>
               {botCardVO.usePipelineName}
             </span>

web/src/app/home/components/BoxUnavailableNotice.tsx

@@ -0,0 +1,53 @@
+import { useTranslation } from 'react-i18next';
+import { Info, ShieldAlert } from 'lucide-react';
+
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+/**
+ * Banner shown when a feature depends on the Box sandbox runtime but it is
+ * currently disabled in config or otherwise unavailable. Pass the ``hint``
+ * key returned by ``useBoxStatus`` (``'boxDisabled' | 'boxUnavailable'``).
+ *
+ * Renders nothing when there is no hint — safe to drop at the top of any
+ * page that may or may not need to surface the notice.
+ */
+export interface BoxUnavailableNoticeProps {
+  hint: 'boxDisabled' | 'boxUnavailable' | null;
+  /** Specific failure reason from the backend (``connector_error``). Shown
+   *  on a dedicated line so the user sees WHY (e.g. ``Configured sandbox
+   *  backend "nsjail" is unavailable``) instead of just the generic
+   *  "unavailable" wording. Ignored when ``hint === 'boxDisabled'``
+   *  because the disabled-by-config message already carries the reason. */
+  reason?: string | null;
+  className?: string;
+}
+
+export function BoxUnavailableNotice({
+  hint,
+  reason,
+  className,
+}: BoxUnavailableNoticeProps) {
+  const { t } = useTranslation();
+  if (!hint) return null;
+
+  const variant = hint === 'boxDisabled' ? 'default' : 'destructive';
+  const Icon = hint === 'boxDisabled' ? Info : ShieldAlert;
+  const showReason = hint === 'boxUnavailable' && reason;
+
+  return (
+    <Alert variant={variant} className={className}>
+      <Icon className="h-4 w-4" />
+      <AlertDescription className="space-y-1">
+        <div>{t(`monitoring.${hint}`)}</div>
+        {showReason && (
+          <div className="text-xs font-mono opacity-80 break-all">{reason}</div>
+        )}
+        <div className="text-xs opacity-80">
+          {t('monitoring.boxRequiredHint')}
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}
+
+export default BoxUnavailableNotice;

web/src/app/home/components/account-settings-dialog/AccountSettingsDialog.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/components/ui/item';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { systemInfo } from '@/app/infra/http';
-import { Loader2, ExternalLink, KeyRound } from 'lucide-react';
+import { Loader2, ExternalLink, KeyRound, Layers } from 'lucide-react';
 import PasswordChangeDialog from '../password-change-dialog/PasswordChangeDialog';
 
 interface AccountSettingsDialogProps {
@@ -136,34 +136,7 @@ export default function AccountSettingsDialog({
               {/* Space Account Item */}
               <Item size="sm" variant="muted" className="rounded-lg">
                 <ItemMedia variant="icon">
-                  <svg
-                    className="h-4 w-4"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 2L2 7L12 12L22 7L12 2Z"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                    <path
-                      d="M2 17L12 22L22 17"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                    <path
-                      d="M2 12L12 17L22 12"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
+                  <Layers className="h-4 w-4" />
                 </ItemMedia>
                 <ItemContent>
                   <ItemTitle>{t('account.spaceStatus')}</ItemTitle>

web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx

@@ -20,8 +20,14 @@ import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
-import { Copy, Check, Globe, QrCode } from 'lucide-react';
+import { Copy, Check, Globe, Info, QrCode } from 'lucide-react';
 import { copyToClipboard } from '@/app/utils/clipboard';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { systemInfo } from '@/app/infra/http';
 
 /**
@@ -123,13 +129,13 @@ function WebhookUrlField({
   };
 
   return (
-    <FormItem>
-      <FormLabel>{label}</FormLabel>
-      <div className="flex items-center gap-2">
+    <FormItem className="min-w-0">
+      <FormLabel className="break-words">{label}</FormLabel>
+      <div className="flex min-w-0 items-center gap-2">
         <Input
           value={url}
           readOnly
-          className="flex-1 bg-muted"
+          className="min-w-0 flex-1 bg-muted"
           onClick={(e) => (e.target as HTMLInputElement).select()}
         />
         <Button
@@ -146,11 +152,11 @@ function WebhookUrlField({
         </Button>
       </div>
       {extraUrl && (
-        <div className="flex items-center gap-2 mt-2">
+        <div className="mt-2 flex min-w-0 items-center gap-2">
           <Input
             value={extraUrl}
             readOnly
-            className="flex-1 bg-muted"
+            className="min-w-0 flex-1 bg-muted"
             onClick={(e) => (e.target as HTMLInputElement).select()}
           />
           <Button
@@ -168,12 +174,14 @@ function WebhookUrlField({
         </div>
       )}
       {description && (
-        <p className="text-sm text-muted-foreground">{description}</p>
+        <p className="text-sm break-words text-muted-foreground">
+          {description}
+        </p>
       )}
       {systemInfo.edition === 'community' && (
-        <div className="flex items-start gap-2.5 rounded-md border border-border/60 bg-muted/40 px-3 py-2.5 mt-1 max-w-2xl">
+        <div className="mt-1 flex max-w-full min-w-0 items-start gap-2.5 rounded-md border border-border/60 bg-muted/40 px-3 py-2.5">
           <Globe className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
-          <p className="text-sm text-muted-foreground leading-relaxed">
+          <p className="text-sm leading-relaxed break-words text-muted-foreground">
             {t('bots.webhookSaasHint')}{' '}
             <a
               href="https://space.langbot.app/cloud?utm_source=local_webui&utm_medium=webhook_alert&utm_campaign=saas_conversion"
@@ -462,7 +470,7 @@ export default function DynamicFormComponent({
 
   return (
     <Form {...form}>
-      <div className="space-y-4">
+      <div className="min-w-0 max-w-full space-y-4 overflow-x-hidden">
         {/* QR code login dialog */}
         <QrCodeLoginDialog
           open={qrDialogOpen}
@@ -507,8 +515,53 @@ export default function DynamicFormComponent({
             }
           }
 
-          // All fields are disabled when editing (creation_settings are immutable)
-          const isFieldDisabled = !!isEditing;
+          // ``disable_if`` mirrors ``show_if``'s evaluator but instead of
+          // hiding the field, leaves it visible and inert. Use it when the
+          // operator needs to see that the field exists yet cannot edit it
+          // under the current runtime state (e.g. sandbox-bound fields when
+          // Box is disabled).
+          let isDisabledByCondition = false;
+          if (config.disable_if) {
+            const dependValue = resolveShowIfValue(
+              config.disable_if.field,
+              watchedValues as Record<string, unknown>,
+              externalDependentValues,
+              systemContext,
+            );
+            const cond = config.disable_if;
+            if (cond.operator === 'eq' && dependValue === cond.value) {
+              isDisabledByCondition = true;
+            } else if (cond.operator === 'neq' && dependValue !== cond.value) {
+              isDisabledByCondition = true;
+            } else if (
+              cond.operator === 'in' &&
+              Array.isArray(cond.value) &&
+              cond.value.includes(dependValue)
+            ) {
+              isDisabledByCondition = true;
+            }
+          }
+
+          // All fields are disabled when editing (creation_settings are
+          // immutable) or when ``disable_if`` matches.
+          const isFieldDisabled = !!isEditing || isDisabledByCondition;
+          const disabledTooltip =
+            isDisabledByCondition && config.disabled_tooltip
+              ? extractI18nObject(config.disabled_tooltip)
+              : '';
+          const renderDisabledTooltipIcon = () =>
+            disabledTooltip ? (
+              <TooltipProvider delayDuration={100}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Info className="h-3.5 w-3.5 text-muted-foreground cursor-help shrink-0" />
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-xs">
+                    {disabledTooltip}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            ) : null;
 
           // Webhook URL fields are display-only; render outside of form binding
           if (config.type === 'webhook-url') {
@@ -631,19 +684,20 @@ export default function DynamicFormComponent({
                 control={form.control}
                 name={config.name as keyof FormValues}
                 render={({ field }) => (
-                  <FormItem>
+                  <FormItem className="min-w-0">
                     <div
                       className={cn(
-                        'flex flex-row items-center justify-between rounded-lg border p-4 max-w-2xl',
+                        'flex w-full min-w-0 max-w-full flex-row items-center justify-between rounded-lg border p-4',
                         isFieldDisabled && 'pointer-events-none opacity-60',
                       )}
                     >
-                      <div className="space-y-0.5">
-                        <FormLabel className="text-base">
+                      <div className="min-w-0 space-y-0.5">
+                        <FormLabel className="flex min-w-0 items-center gap-1.5 text-base">
                           {extractI18nObject(config.label)}
+                          {renderDisabledTooltipIcon()}
                         </FormLabel>
                         {config.description && (
-                          <p className="text-sm text-muted-foreground">
+                          <p className="text-sm break-words text-muted-foreground">
                             {extractI18nObject(config.description)}
                           </p>
                         )}
@@ -669,16 +723,22 @@ export default function DynamicFormComponent({
               control={form.control}
               name={config.name as keyof FormValues}
               render={({ field }) => (
-                <FormItem>
-                  <FormLabel>
-                    {extractI18nObject(config.label)}{' '}
-                    {config.required && <span className="text-red-500">*</span>}
+                <FormItem className="min-w-0">
+                  <FormLabel className="flex min-w-0 items-center gap-1.5">
+                    <span className="min-w-0 break-words">
+                      {extractI18nObject(config.label)}{' '}
+                      {config.required && (
+                        <span className="text-red-500">*</span>
+                      )}
+                    </span>
+                    {renderDisabledTooltipIcon()}
                   </FormLabel>
                   <FormControl>
                     <div
-                      className={
-                        isFieldDisabled ? 'pointer-events-none opacity-60' : ''
-                      }
+                      className={cn(
+                        'min-w-0 max-w-full overflow-x-hidden',
+                        isFieldDisabled && 'pointer-events-none opacity-60',
+                      )}
                     >
                       <DynamicFormItemComponent
                         config={config}
@@ -688,7 +748,7 @@ export default function DynamicFormComponent({
                     </div>
                   </FormControl>
                   {config.description && (
-                    <p className="text-sm text-muted-foreground">
+                    <p className="text-sm break-words text-muted-foreground">
                       {extractI18nObject(config.description)}
                     </p>
                   )}

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -69,7 +69,6 @@ export default function DynamicFormItemComponent({
   onFileUploaded,
 }: {
   config: IDynamicFormItemSchema;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   field: ControllerRenderProps<any, any>;
   onFileUploaded?: (fileKey: string) => void;
 }) {
@@ -251,7 +250,7 @@ export default function DynamicFormItemComponent({
       return (
         <Input
           type="number"
-          className="max-w-xs"
+          className="w-full max-w-xs"
           {...field}
           onChange={(e) => field.onChange(Number(e.target.value))}
         />
@@ -260,8 +259,8 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.STRING:
       if (config.options && config.options.length > 0) {
         return (
-          <div className="flex items-center gap-1.5 max-w-md">
-            <Input className="flex-1" {...field} />
+          <div className="flex w-full max-w-md min-w-0 items-center gap-1.5">
+            <Input className="min-w-0 flex-1" {...field} />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
@@ -292,21 +291,26 @@ export default function DynamicFormItemComponent({
           </div>
         );
       }
-      return <Input className="max-w-md" {...field} />;
+      return <Input className="w-full max-w-md" {...field} />;
 
     case DynamicFormItemType.TEXT:
-      return <Textarea {...field} className="min-h-[120px] max-w-2xl" />;
+      return (
+        <Textarea
+          {...field}
+          className="min-h-[120px] w-full max-w-full resize-y overflow-x-hidden break-all"
+        />
+      );
 
     case DynamicFormItemType.BOOLEAN:
       return <Switch checked={field.value} onCheckedChange={field.onChange} />;
 
     case DynamicFormItemType.STRING_ARRAY:
       return (
-        <div className="space-y-2 max-w-md">
+        <div className="w-full max-w-md min-w-0 space-y-2">
           {field.value.map((item: string, index: number) => (
-            <div key={index} className="flex gap-1.5 items-center">
+            <div key={index} className="flex min-w-0 items-center gap-1.5">
               <Input
-                className="flex-1"
+                className="min-w-0 flex-1"
                 value={item}
                 onChange={(e) => {
                   const newValue = [...field.value];
@@ -347,7 +351,7 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.SELECT:
       return (
         <Select value={field.value} onValueChange={field.onChange}>
-          <SelectTrigger className="max-w-md bg-[#ffffff] dark:bg-[#2a2a2e]">
+          <SelectTrigger className="w-full max-w-md bg-[#ffffff] dark:bg-[#2a2a2e]">
             <SelectValue placeholder={t('common.select')} />
           </SelectTrigger>
           <SelectContent>
@@ -409,10 +413,10 @@ export default function DynamicFormItemComponent({
       ];
 
       return (
-        <div className="max-w-md flex items-center gap-1.5">
-          <div className="flex-1">
+        <div className="flex w-full max-w-md min-w-0 items-center gap-1.5">
+          <div className="min-w-0 flex-1">
             <Select value={field.value} onValueChange={field.onChange}>
-              <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+              <SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]">
                 <SelectValue placeholder={t('models.selectModel')} />
               </SelectTrigger>
               <SelectContent>
@@ -577,9 +581,9 @@ export default function DynamicFormItemComponent({
       );
 
       return (
-        <div className="max-w-md">
+        <div className="w-full max-w-md min-w-0">
           <Select value={field.value} onValueChange={field.onChange}>
-            <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+            <SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]">
               <SelectValue placeholder={t('knowledge.selectEmbeddingModel')} />
             </SelectTrigger>
             <SelectContent>
@@ -612,12 +616,12 @@ export default function DynamicFormItemComponent({
       );
 
       return (
-        <div className="max-w-md">
+        <div className="w-full max-w-md min-w-0">
           <Select
             value={field.value || '__none__'}
             onValueChange={(v) => field.onChange(v === '__none__' ? '' : v)}
           >
-            <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+            <SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]">
               <SelectValue placeholder={t('models.rerank')} />
             </SelectTrigger>
             <SelectContent>
@@ -713,7 +717,7 @@ export default function DynamicFormItemComponent({
         placeholder: string,
       ) => (
         <Select value={value} onValueChange={onChange}>
-          <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+          <SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]">
             <SelectValue placeholder={placeholder} />
           </SelectTrigger>
           <SelectContent>
@@ -879,14 +883,14 @@ export default function DynamicFormItemComponent({
       };
 
       return (
-        <div className="space-y-3">
+        <div className="w-full min-w-0 space-y-3">
           {/* Primary model selector */}
           <div>
             <p className="text-xs text-muted-foreground mb-1">
               {t('models.fallback.primary')}
             </p>
-            <div className="flex items-center gap-1.5">
-              <div className="flex-1">
+            <div className="flex min-w-0 items-center gap-1.5">
+              <div className="min-w-0 flex-1">
                 {renderModelSelect(
                   modelValue.primary,
                   (val) => updateValue({ primary: val }),
@@ -918,16 +922,16 @@ export default function DynamicFormItemComponent({
 
           {/* Fallback models */}
           {modelValue.fallbacks.length > 0 && (
-            <div className="space-y-2">
+            <div className="min-w-0 space-y-2">
               <p className="text-xs text-muted-foreground">
                 {t('models.fallback.fallbackList')}
               </p>
               {modelValue.fallbacks.map((fbUuid: string, index: number) => (
-                <div key={index} className="flex items-center gap-2">
+                <div key={index} className="flex min-w-0 items-center gap-2">
                   <span className="text-xs text-muted-foreground w-4 shrink-0">
                     {index + 1}.
                   </span>
-                  <div className="flex-1">
+                  <div className="min-w-0 flex-1">
                     {renderModelSelect(
                       fbUuid,
                       (val) => updateFallbackModel(index, val),
@@ -1003,20 +1007,22 @@ export default function DynamicFormItemComponent({
 
       return (
         <Select value={field.value} onValueChange={field.onChange}>
-          <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+          <SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]">
             {field.value && field.value !== '__none__' ? (
               (() => {
                 const selectedKb = knowledgeBases.find(
                   (kb) => kb.uuid === field.value,
                 );
                 return (
-                  <div className="flex items-center gap-2">
+                  <div className="flex min-w-0 items-center gap-2">
                     {selectedKb?.emoji && (
                       <span className="text-sm shrink-0">
                         {selectedKb.emoji}
                       </span>
                     )}
-                    <span>{selectedKb?.name ?? field.value}</span>
+                    <span className="truncate">
+                      {selectedKb?.name ?? field.value}
+                    </span>
                   </div>
                 );
               })()
@@ -1066,9 +1072,9 @@ export default function DynamicFormItemComponent({
 
       return (
         <>
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             {field.value && field.value.length > 0 ? (
-              <div className="space-y-2">
+              <div className="min-w-0 space-y-2">
                 {field.value.map((kbId: string) => {
                   const currentKb = knowledgeBases.find(
                     (base) => base.uuid === kbId,
@@ -1078,17 +1084,17 @@ export default function DynamicFormItemComponent({
                   return (
                     <div
                       key={kbId}
-                      className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent"
+                      className="flex min-w-0 items-center justify-between rounded-lg border p-3 hover:bg-accent"
                     >
-                      <div className="flex items-center gap-2 flex-1">
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
                         <div className="flex-1 min-w-0">
-                          <div className="font-medium flex items-center gap-2">
+                          <div className="flex min-w-0 items-center gap-2 font-medium">
                             {currentKb.emoji && (
                               <span className="text-sm shrink-0">
                                 {currentKb.emoji}
                               </span>
                             )}
-                            {currentKb.name}
+                            <span className="truncate">{currentKb.name}</span>
                             {currentKb.knowledge_engine?.name && (
                               <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300">
                                 {extractI18nObject(
@@ -1098,7 +1104,7 @@ export default function DynamicFormItemComponent({
                             )}
                           </div>
                           {currentKb.description && (
-                            <div className="text-sm text-muted-foreground">
+                            <div className="text-sm break-words text-muted-foreground">
                               {currentKb.description}
                             </div>
                           )}
@@ -1221,7 +1227,7 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.BOT_SELECTOR:
       return (
         <Select value={field.value} onValueChange={field.onChange}>
-          <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+          <SelectTrigger className="min-w-0 bg-[#ffffff] dark:bg-[#2a2a2e]">
             <SelectValue placeholder={t('bots.selectBot')} />
           </SelectTrigger>
           <SelectContent>
@@ -1239,9 +1245,9 @@ export default function DynamicFormItemComponent({
     case DynamicFormItemType.TOOLS_SELECTOR:
       return (
         <>
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             {field.value && field.value.length > 0 ? (
-              <div className="space-y-2">
+              <div className="min-w-0 space-y-2">
                 {field.value.map((toolName: string) => {
                   const currentTool = tools.find(
                     (tool) => tool.name === toolName,
@@ -1250,12 +1256,12 @@ export default function DynamicFormItemComponent({
                   return (
                     <div
                       key={toolName}
-                      className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent"
+                      className="flex min-w-0 items-center justify-between rounded-lg border p-3 hover:bg-accent"
                     >
-                      <div className="flex items-center gap-2 flex-1">
+                      <div className="flex min-w-0 flex-1 items-center gap-2">
                         <Wrench className="h-4 w-4 shrink-0 text-muted-foreground" />
                         <div className="flex-1 min-w-0">
-                          <div className="font-medium">{toolName}</div>
+                          <div className="truncate font-medium">{toolName}</div>
                           {currentTool?.human_desc && (
                             <div className="text-sm text-muted-foreground truncate">
                               {currentTool.human_desc}
@@ -1379,13 +1385,16 @@ export default function DynamicFormItemComponent({
         ? field.value
         : [{ role: 'system', content: '' }];
       return (
-        <div className="space-y-2">
+        <div className="min-w-0 space-y-2">
           {promptItems.map(
             (item: { role: string; content: string }, index: number) => (
-              <div key={index} className="flex gap-2 items-center">
+              <div
+                key={index}
+                className="flex min-w-0 flex-col gap-2 sm:flex-row sm:items-center"
+              >
                 {/* 角色选择 */}
                 {index === 0 ? (
-                  <div className="w-[120px] px-3 py-2 border rounded bg-gray-50 dark:bg-[#2a292e] text-gray-500 dark:text-white dark:border-gray-600">
+                  <div className="w-full shrink-0 rounded border bg-gray-50 px-3 py-2 text-gray-500 sm:w-[120px] dark:border-gray-600 dark:bg-[#2a292e] dark:text-white">
                     system
                   </div>
                 ) : (
@@ -1410,7 +1419,7 @@ export default function DynamicFormItemComponent({
                 )}
                 {/* 内容输入 */}
                 <Textarea
-                  className="w-[300px]"
+                  className="min-h-20 w-full min-w-0 flex-1 resize-y overflow-x-hidden break-all sm:w-[300px]"
                   value={item.content}
                   onChange={(e) => {
                     const newValue = [...(field.value ?? promptItems)];
@@ -1428,20 +1437,12 @@ export default function DynamicFormItemComponent({
                     className="p-2 hover:bg-gray-100 rounded"
                     onClick={() => {
                       const newValue = (field.value ?? promptItems).filter(
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         (_: any, i: number) => i !== index,
                       );
                       field.onChange(newValue);
                     }}
                   >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      className="w-5 h-5 text-red-500"
-                    >
-                      <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
-                    </svg>
+                    <Trash2 className="w-5 h-5 text-red-500" />
                   </button>
                 )}
               </div>
@@ -1492,14 +1493,7 @@ export default function DynamicFormItemComponent({
                   }}
                   title={t('common.delete')}
                 >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                    className="w-4 h-4 text-destructive"
-                  >
-                    <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
-                  </svg>
+                  <Trash2 className="w-4 h-4 text-destructive" />
                 </Button>
               </CardContent>
             </Card>
@@ -1531,14 +1525,7 @@ export default function DynamicFormItemComponent({
                   document.getElementById(`file-input-${config.name}`)?.click()
                 }
               >
-                <svg
-                  className="w-4 h-4 mr-2"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
-                </svg>
+                <Plus className="w-4 h-4 mr-2" />
                 {uploading
                   ? t('plugins.fileUpload.uploading')
                   : t('plugins.fileUpload.chooseFile')}
@@ -1584,14 +1571,7 @@ export default function DynamicFormItemComponent({
                     }}
                     title={t('common.delete')}
                   >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      className="w-4 h-4 text-destructive"
-                    >
-                      <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
-                    </svg>
+                    <Trash2 className="w-4 h-4 text-destructive" />
                   </Button>
                 </CardContent>
               </Card>
@@ -1626,14 +1606,7 @@ export default function DynamicFormItemComponent({
                   ?.click()
               }
             >
-              <svg
-                className="w-4 h-4 mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
-                <path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path>
-              </svg>
+              <Plus className="w-4 h-4 mr-2" />
               {uploading
                 ? t('plugins.fileUpload.uploading')
                 : t('plugins.fileUpload.addFile')}

web/src/app/home/components/dynamic-form/N8nAuthFormComponent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -102,9 +102,30 @@ export default function N8nAuthFormComponent({
     }, {} as FormValues),
   });
 
+  const isInitialMount = useRef(true);
+  const previousInitialValues = useRef(initialValues);
+
+  // Stable ref for onSubmit to avoid re-triggering the effect when the
+  // parent passes a new closure on every render (matches DynamicFormComponent pattern).
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+
   // 当 initialValues 变化时更新表单值
   useEffect(() => {
-    if (initialValues) {
+    // Skip the first mount — defaultValues already handles it
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      previousInitialValues.current = initialValues;
+      return;
+    }
+
+    // Deep compare to avoid reacting to parent re-renders that pass
+    // the same values back (e.g. after our own onSubmit emission).
+    const hasRealChange =
+      JSON.stringify(previousInitialValues.current) !==
+      JSON.stringify(initialValues);
+
+    if (initialValues && hasRealChange) {
       // 合并默认值和初始值
       const mergedValues = itemConfigList.reduce(
         (acc, item) => {
@@ -120,11 +141,28 @@ export default function N8nAuthFormComponent({
 
       // 更新认证类型
       setAuthType((mergedValues['auth-type'] as string) || 'none');
+      previousInitialValues.current = initialValues;
     }
   }, [initialValues, form, itemConfigList]);
 
   // 监听表单值变化
   useEffect(() => {
+    // Emit initial form values on mount so the parent form's
+    // initializedStagesRef registers this stage (matches DynamicFormComponent).
+    const formValues = form.getValues();
+    const initialFinalValues = itemConfigList.reduce(
+      (acc, item) => {
+        acc[item.name] = formValues[item.name] ?? item.default;
+        return acc;
+      },
+      {} as Record<string, string>,
+    );
+    onSubmitRef.current?.(initialFinalValues);
+    previousInitialValues.current = initialFinalValues as Record<
+      string,
+      string
+    >;
+
     const subscription = form.watch((value, { name }) => {
       // 如果认证类型变化，更新状态
       if (name === 'auth-type') {
@@ -141,10 +179,11 @@ export default function N8nAuthFormComponent({
         {} as Record<string, string>,
       );
 
-      onSubmit?.(finalValues);
+      onSubmitRef.current?.(finalValues);
+      previousInitialValues.current = finalValues as Record<string, string>;
     });
     return () => subscription.unsubscribe();
-  }, [form, onSubmit, itemConfigList]);
+  }, [form, itemConfigList]);
 
   // 根据认证类型过滤表单项
   const filteredConfigList = itemConfigList.filter((config) => {

web/src/app/home/components/home-sidebar/SidebarDataContext.tsx

@@ -26,11 +26,10 @@ export interface SidebarEntityItem {
   installInfo?: Record<string, unknown>;
   hasUpdate?: boolean;
   debug?: boolean;
+  // Set when this item appears in the unified extensions list
+  extensionType?: 'plugin' | 'mcp' | 'skill';
 }
 
-// Install action types that can be triggered from sidebar
-export type PluginInstallAction = 'local' | 'github' | null;
-
 // Plugin page registered by a plugin
 export interface PluginPageItem {
   id: string; // "author/name/pageId"
@@ -50,19 +49,21 @@ export interface SidebarDataContextValue {
   knowledgeBases: SidebarEntityItem[];
   plugins: SidebarEntityItem[];
   mcpServers: SidebarEntityItem[];
+  skills: SidebarEntityItem[];
   pluginPages: PluginPageItem[];
   refreshBots: () => Promise<void>;
   refreshPipelines: () => Promise<void>;
   refreshKnowledgeBases: () => Promise<void>;
   refreshPlugins: () => Promise<void>;
   refreshMCPServers: () => Promise<void>;
+  refreshSkills: () => Promise<void>;
   refreshAll: () => Promise<void>;
   // Breadcrumb: entity name shown when viewing a detail page
   detailEntityName: string | null;
   setDetailEntityName: (name: string | null) => void;
-  // Pending plugin install action triggered from sidebar
-  pendingPluginInstallAction: PluginInstallAction;
-  setPendingPluginInstallAction: (action: PluginInstallAction) => void;
+  // Whether the extensions list is grouped by type (shared between page and sidebar)
+  extensionsGroupByType: boolean;
+  setExtensionsGroupByType: (enabled: boolean) => void;
 }
 
 const SidebarDataContext = createContext<SidebarDataContextValue | null>(null);
@@ -77,10 +78,22 @@ export function SidebarDataProvider({
   const [knowledgeBases, setKnowledgeBases] = useState<SidebarEntityItem[]>([]);
   const [plugins, setPlugins] = useState<SidebarEntityItem[]>([]);
   const [mcpServers, setMCPServers] = useState<SidebarEntityItem[]>([]);
+  const [skills, setSkills] = useState<SidebarEntityItem[]>([]);
   const [pluginPages, setPluginPages] = useState<PluginPageItem[]>([]);
   const [detailEntityName, setDetailEntityName] = useState<string | null>(null);
-  const [pendingPluginInstallAction, setPendingPluginInstallAction] =
-    useState<PluginInstallAction>(null);
+  const [extensionsGroupByType, setExtensionsGroupByTypeState] =
+    useState<boolean>(() => {
+      if (typeof window === 'undefined') return false;
+      return localStorage.getItem('extensions_group_by_type') === 'true';
+    });
+  const setExtensionsGroupByType = useCallback((enabled: boolean) => {
+    setExtensionsGroupByTypeState(enabled);
+    try {
+      localStorage.setItem('extensions_group_by_type', String(enabled));
+    } catch {
+      // ignore
+    }
+  }, []);
 
   const refreshBots = useCallback(async () => {
     try {
@@ -224,8 +237,8 @@ export function SidebarDataProvider({
       const resp = await httpClient.getMCPServers();
       setMCPServers(
         resp.servers.map((server) => ({
-          id: server.name,
-          name: server.name,
+          id: server.name, // Keep __ for API calls
+          name: server.name.replace(/__/g, '/'), // Display with / for readability
           enabled: server.enable,
           runtimeStatus: server.runtime_info?.status,
         })),
@@ -235,6 +248,22 @@ export function SidebarDataProvider({
     }
   }, []);
 
+  const refreshSkills = useCallback(async () => {
+    try {
+      const resp = await httpClient.getSkills();
+      setSkills(
+        resp.skills.map((skill) => ({
+          id: skill.name,
+          name: skill.display_name || skill.name,
+          description: skill.description,
+          updatedAt: skill.updated_at,
+        })),
+      );
+    } catch (error) {
+      console.error('Failed to fetch skills for sidebar:', error);
+    }
+  }, []);
+
   const refreshAll = useCallback(async () => {
     await Promise.all([
       refreshBots(),
@@ -242,6 +271,7 @@ export function SidebarDataProvider({
       refreshKnowledgeBases(),
       refreshPlugins(),
       refreshMCPServers(),
+      refreshSkills(),
     ]);
   }, [
     refreshBots,
@@ -249,6 +279,7 @@ export function SidebarDataProvider({
     refreshKnowledgeBases,
     refreshPlugins,
     refreshMCPServers,
+    refreshSkills,
   ]);
 
   // Fetch all entity lists on mount
@@ -264,17 +295,19 @@ export function SidebarDataProvider({
         knowledgeBases,
         plugins,
         mcpServers,
+        skills,
         pluginPages,
         refreshBots,
         refreshPipelines,
         refreshKnowledgeBases,
         refreshPlugins,
         refreshMCPServers,
+        refreshSkills,
         refreshAll,
         detailEntityName,
         setDetailEntityName,
-        pendingPluginInstallAction,
-        setPendingPluginInstallAction,
+        extensionsGroupByType,
+        setExtensionsGroupByType,
       }}
     >
       {children}

web/src/app/home/components/home-sidebar/sidbarConfigList.tsx

@@ -1,5 +1,14 @@
 import { SidebarChildVO } from '@/app/home/components/home-sidebar/HomeSidebarChild';
 import i18n from '@/i18n';
+import {
+  Zap,
+  LayoutDashboard,
+  Bot,
+  Workflow,
+  BookMarked,
+  Puzzle,
+  PlusCircle,
+} from 'lucide-react';
 
 const t = (key: string) => {
   return i18n.t(key);
@@ -10,16 +19,7 @@ export const sidebarConfigList = [
   new SidebarChildVO({
     id: 'wizard',
     name: t('sidebar.quickStart'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M13 9H21L11 24V15H4L13 0V9ZM11 11V7.22063L7.53238 13H13V17.3944L17.263 11H11Z"></path>
-      </svg>
-    ),
+    icon: <Zap className="text-blue-500" />,
     route: '/wizard',
     description: t('wizard.sidebarDescription'),
     helpLink: {
@@ -33,16 +33,7 @@ export const sidebarConfigList = [
   new SidebarChildVO({
     id: 'monitoring',
     name: t('monitoring.title'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM4 5V19H20V5H4ZM6 7H18V9H6V7ZM6 11H18V13H6V11ZM6 15H12V17H6V15Z"></path>
-      </svg>
-    ),
+    icon: <LayoutDashboard className="text-blue-500" />,
     route: '/home/monitoring',
     description: t('monitoring.description'),
     helpLink: {
@@ -54,16 +45,7 @@ export const sidebarConfigList = [
   new SidebarChildVO({
     id: 'bots',
     name: t('bots.title'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M13.5 2C13.5 2.44425 13.3069 2.84339 13 3.11805V5H18C19.6569 5 21 6.34315 21 8V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V8C3 6.34315 4.34315 5 6 5H11V3.11805C10.6931 2.84339 10.5 2.44425 10.5 2C10.5 1.17157 11.1716 0.5 12 0.5C12.8284 0.5 13.5 1.17157 13.5 2ZM6 7C5.44772 7 5 7.44772 5 8V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V8C19 7.44772 18.5523 7 18 7H13H11H6ZM2 10H0V16H2V10ZM22 10H24V16H22V10ZM9 14.5C9.82843 14.5 10.5 13.8284 10.5 13C10.5 12.1716 9.82843 11.5 9 11.5C8.17157 11.5 7.5 12.1716 7.5 13C7.5 13.8284 8.17157 14.5 9 14.5ZM15 14.5C15.8284 14.5 16.5 13.8284 16.5 13C16.5 12.1716 15.8284 11.5 15 11.5C14.1716 11.5 13.5 12.1716 13.5 13C13.5 13.8284 14.1716 14.5 15 14.5Z"></path>
-      </svg>
-    ),
+    icon: <Bot className="text-blue-500" />,
     route: '/home/bots',
     description: t('bots.description'),
     helpLink: {
@@ -76,16 +58,7 @@ export const sidebarConfigList = [
   new SidebarChildVO({
     id: 'pipelines',
     name: t('pipelines.title'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M6 21.5C4.067 21.5 2.5 19.933 2.5 18C2.5 16.067 4.067 14.5 6 14.5C7.5852 14.5 8.92427 15.5539 9.35481 16.9992L15 16.9994V15L17 14.9994V9.24339L14.757 6.99938H9V9.00003H3V3.00003H9V4.99939H14.757L18 1.75739L22.2426 6.00003L19 9.24139V14.9994L21 15V21H15V18.9994L9.35499 19.0003C8.92464 20.4459 7.58543 21.5 6 21.5ZM6 16.5C5.17157 16.5 4.5 17.1716 4.5 18C4.5 18.8285 5.17157 19.5 6 19.5C6.82843 19.5 7.5 18.8285 7.5 18C7.5 17.1716 6.82843 16.5 6 16.5ZM19 17H17V19H19V17ZM18 4.58581L16.5858 6.00003L18 7.41424L19.4142 6.00003L18 4.58581ZM7 5.00003H5V7.00003H7V5.00003Z"></path>
-      </svg>
-    ),
+    icon: <Workflow className="text-blue-500" />,
     route: '/home/pipelines',
     description: t('pipelines.description'),
     helpLink: {
@@ -98,16 +71,7 @@ export const sidebarConfigList = [
   new SidebarChildVO({
     id: 'knowledge',
     name: t('knowledge.title'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M3 18.5V5C3 3.34315 4.34315 2 6 2H20C20.5523 2 21 2.44772 21 3V21C21 21.5523 20.5523 22 20 22H6.5C4.567 22 3 20.433 3 18.5ZM19 20V17H6.5C5.67157 17 5 17.6716 5 18.5C5 19.3284 5.67157 20 6.5 20H19ZM10 4H6C5.44772 4 5 4.44772 5 5V15.3368C5.45463 15.1208 5.9632 15 6.5 15H19V4H17V12L13.5 10L10 12V4Z"></path>
-      </svg>
-    ),
+    icon: <BookMarked className="text-blue-500" />,
     route: '/home/knowledge',
     description: t('knowledge.description'),
     helpLink: {
@@ -117,22 +81,12 @@ export const sidebarConfigList = [
     },
     section: 'home',
   }),
-
   // ── Extensions section ──
   new SidebarChildVO({
     id: 'plugins',
     name: t('sidebar.installedPlugins'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H18C18.5523 5 19 5.44772 19 6V9C21.2091 9 23 10.7909 23 13C23 15.2091 21.2091 17 19 17V20C19 20.5523 18.5523 21 18 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H17V15.8293C17 15.5047 17.1576 15.2003 17.4226 15.0128C17.6877 14.8254 18.0272 14.7783 18.3332 14.8865C18.5405 14.9597 18.7645 15 19 15C20.1046 15 21 14.1046 21 13C21 11.8954 20.1046 11 19 11C18.7645 11 18.5405 11.0403 18.3332 11.1135C18.0272 11.2217 17.6877 11.1746 17.4226 10.9872C17.1576 10.7997 17 10.4953 17 10.1707V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z"></path>
-      </svg>
-    ),
-    route: '/home/plugins',
+    icon: <Puzzle className="text-blue-500" />,
+    route: '/home/extensions',
     description: t('plugins.description'),
     helpLink: {
       en_US: 'https://link.langbot.app/en/docs/plugins',
@@ -142,19 +96,10 @@ export const sidebarConfigList = [
     section: 'extensions',
   }),
   new SidebarChildVO({
-    id: 'market',
-    name: t('sidebar.pluginMarket'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M21 13.242V20H22V22H2V20H3V13.242C1.79401 12.435 1 11.0602 1 9.5C1 8.67286 1.25027 7.90335 1.67755 7.2612L4.5547 2.36088C4.80513 1.93859 5.26028 1.67578 5.76 1.67578H18.24C18.7397 1.67578 19.1949 1.93859 19.4453 2.36088L22.3225 7.2612C22.7497 7.90335 23 8.67286 23 9.5C23 11.0602 22.206 12.435 21 13.242ZM19 13.972C18.4511 14.0706 17.8794 14.0706 17.3305 13.972C16.1644 13.7566 15.1377 13.0712 14.5 12.1C13.8623 13.0712 12.8356 13.7566 11.6695 13.972C11.1206 14.0706 10.5489 14.0706 10 13.972C9.45108 14.0706 8.87938 14.0706 8.33053 13.972C7.16437 13.7566 6.13771 13.0712 5.5 12.1C4.86229 13.0712 3.83563 13.7566 2.66947 13.972C2.44883 14.0124 2.22434 14.0352 2 14.0404V20H5V15H10V20H19V13.972Z"></path>
-      </svg>
-    ),
-    route: '/home/market',
+    id: 'add-extension',
+    name: t('sidebar.addExtension'),
+    icon: <PlusCircle className="text-blue-500" />,
+    route: '/home/add-extension',
     description: t('plugins.description'),
     helpLink: {
       en_US: 'https://link.langbot.app/en/docs/plugins',
@@ -163,25 +108,4 @@ export const sidebarConfigList = [
     },
     section: 'extensions',
   }),
-  new SidebarChildVO({
-    id: 'mcp',
-    name: t('sidebar.mcpServers'),
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-        className="text-blue-500"
-      >
-        <path d="M4.5 7.65311V16.3469L12 20.689L19.5 16.3469V7.65311L12 3.311L4.5 7.65311ZM12 1L21.5 6.5V17.5L12 23L2.5 17.5V6.5L12 1ZM6.49896 9.97065L11 12.5765V17.625H13V12.5765L17.501 9.97066L16.499 8.2398L12 10.8445L7.50104 8.2398L6.49896 9.97065Z"></path>
-      </svg>
-    ),
-    route: '/home/mcp',
-    description: t('mcp.title'),
-    helpLink: {
-      en_US: '',
-      zh_Hans: '',
-    },
-    section: 'extensions',
-  }),
 ];

web/src/app/home/knowledge/components/kb-card/KBCard.tsx

@@ -1,6 +1,7 @@
 import { KnowledgeBaseVO } from '@/app/home/knowledge/components/kb-card/KBCardVO';
 import { useTranslation } from 'react-i18next';
 import styles from './KBCard.module.css';
+import { Clock } from 'lucide-react';
 
 export default function KBCard({ kbCardVO }: { kbCardVO: KnowledgeBaseVO }) {
   const { t } = useTranslation();
@@ -27,14 +28,7 @@ export default function KBCard({ kbCardVO }: { kbCardVO: KnowledgeBaseVO }) {
         </div>
 
         <div className={`${styles.basicInfoLastUpdatedTimeContainer}`}>
-          <svg
-            className={`${styles.basicInfoUpdateTimeIcon}`}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-          >
-            <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path>
-          </svg>
+          <Clock className={`${styles.basicInfoUpdateTimeIcon}`} />
           <div className={`${styles.basicInfoUpdateTimeText}`}>
             {t('knowledge.updateTime')}
             {kbCardVO.lastUpdatedTimeAgo}

web/src/app/home/knowledge/components/kb-docs/FileUploadZone.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { CloudUpload } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import {
   Select,
@@ -221,7 +222,7 @@ export default function FileUploadZone({
                   {t('knowledge.documentsTab.noParserAvailable')}
                 </p>
                 <Link
-                  to="/home/market?category=Parser"
+                  to="/home/add-extension"
                   className="text-sm text-primary hover:underline mt-1 inline-block"
                 >
                   {t('knowledge.documentsTab.installParserHint')}
@@ -297,19 +298,7 @@ export default function FileUploadZone({
             <label htmlFor="file-upload" className="cursor-pointer block">
               <div className="space-y-2">
                 <div className="mx-auto w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
-                  <svg
-                    className="w-5 h-5 text-gray-400"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                    />
-                  </svg>
+                  <CloudUpload className="w-5 h-5 text-gray-400" />
                 </div>
 
                 <div>

web/src/app/home/knowledge/components/kb-form/KBForm.tsx

@@ -324,7 +324,7 @@ export default function KBForm({
           {t('knowledge.noEnginesAvailable')}
         </p>
         <Link
-          to="/home/market?category=KnowledgeEngine"
+          to="/home/add-extension"
           className="text-sm text-primary hover:underline"
         >
           {t('knowledge.installEngineHint')}

web/src/app/home/layout.tsx

@@ -45,9 +45,10 @@ import {
 
 // Routes that belong to the "Extensions" section
 const EXTENSIONS_ROUTES = [
-  '/home/plugins',
-  '/home/market',
+  '/home/extensions',
+  '/home/add-extension',
   '/home/mcp',
+  '/home/skills',
   '/home/plugin-pages',
 ];
 
@@ -57,12 +58,17 @@ function isExtensionsRoute(pathname: string): boolean {
   );
 }
 
+const HOME_CONTENT_MAX_WIDTH = 'max-w-[1360px]';
+const BACKEND_UNAVAILABLE_RETURN_TO_STORAGE_KEY =
+  'langbot_backend_unavailable_return_to';
+
 export default function HomeLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   const navigate = useNavigate();
+  const location = useLocation();
 
   // Initialize user info if not already initialized
   useEffect(() => {
@@ -73,19 +79,35 @@ export default function HomeLayout({
 
   // Auto-redirect to wizard on first visit (wizard not yet completed on this instance)
   useEffect(() => {
+    let cancelled = false;
+
     const checkWizard = async () => {
       try {
         // Always re-fetch to ensure we have the latest wizard_status from backend
-        await initializeSystemInfo();
-        if (systemInfo.wizard_status === 'none') {
-          navigate('/wizard');
+        await initializeSystemInfo({ throwOnError: true });
+        if (!cancelled && systemInfo.wizard_status === 'none') {
+          navigate('/wizard', { replace: true });
         }
       } catch {
-        // If fetching system info fails, don't redirect
+        if (!cancelled) {
+          const returnTo = `${location.pathname}${location.search}${location.hash}`;
+          sessionStorage.setItem(
+            BACKEND_UNAVAILABLE_RETURN_TO_STORAGE_KEY,
+            returnTo,
+          );
+          navigate('/backend-unavailable', {
+            replace: true,
+            state: { from: returnTo },
+          });
+        }
       }
     };
     checkWizard();
-  }, [navigate]);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [location.hash, location.pathname, location.search, navigate]);
 
   return (
     <SidebarDataProvider>
@@ -123,7 +145,7 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
   const sectionLabel = isExtensions
     ? t('sidebar.extensions')
     : t('sidebar.home');
-  const sectionLink = isExtensions ? '/home/plugins' : '/home/monitoring';
+  const sectionLink = isExtensions ? '/home/extensions' : '/home/monitoring';
 
   return (
     <SidebarProvider>
@@ -133,7 +155,7 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
 
       <SidebarInset>
         <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2 px-4">
+          <div className="flex w-full items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
             <Separator
               orientation="vertical"
@@ -177,9 +199,13 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
           </div>
         </header>
 
-        <div className="flex-1 overflow-hidden p-4 pt-0 min-w-0">
-          {mainContent}
-        </div>
+        <main className="flex-1 overflow-hidden min-w-0 px-4 pb-4 pt-0">
+          <div
+            className={`mx-auto h-full w-full min-w-0 ${HOME_CONTENT_MAX_WIDTH}`}
+          >
+            {mainContent}
+          </div>
+        </main>
 
         <SurveyWidget />
       </SidebarInset>

web/src/app/home/market/page.tsx

@@ -1,202 +0,0 @@
-import MarketPage from '@/app/home/plugins/components/plugin-market/PluginMarketComponent';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import { Download } from 'lucide-react';
-import React, { useState, useCallback, useEffect } from 'react';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import { systemInfo } from '@/app/infra/http/HttpClient';
-import { toast } from 'sonner';
-import { useTranslation } from 'react-i18next';
-import { PluginV4 } from '@/app/infra/entities/plugin';
-import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
-import { usePluginInstallTasks } from '@/app/home/plugins/components/plugin-install-task';
-
-enum PluginInstallStatus {
-  ASK_CONFIRM = 'ask_confirm',
-  INSTALLING = 'installing',
-  ERROR = 'error',
-}
-
-export default function MarketplacePage() {
-  const { t } = useTranslation();
-
-  if (!systemInfo?.enable_marketplace) {
-    return (
-      <div className="flex flex-col items-center justify-center h-[60vh] text-center">
-        <p className="text-muted-foreground">{t('plugins.marketplace')}</p>
-      </div>
-    );
-  }
-
-  return <MarketplaceContent />;
-}
-
-function MarketplaceContent() {
-  const { t } = useTranslation();
-  const { refreshPlugins } = useSidebarData();
-  const {
-    addTask,
-    setSelectedTaskId,
-    registerOnTaskComplete,
-    unregisterOnTaskComplete,
-  } = usePluginInstallTasks();
-  const [modalOpen, setModalOpen] = useState(false);
-  const [installInfo, setInstallInfo] = useState<Record<string, string>>({});
-  const [pluginInstallStatus, setPluginInstallStatus] =
-    useState<PluginInstallStatus>(PluginInstallStatus.ASK_CONFIRM);
-  const [installError, setInstallError] = useState<string | null>(null);
-
-  async function checkExtensionsLimit(): Promise<boolean> {
-    const maxExtensions = systemInfo.limitation?.max_extensions ?? -1;
-    if (maxExtensions < 0) return true;
-    try {
-      const [pluginsResp, mcpResp] = await Promise.all([
-        httpClient.getPlugins(),
-        httpClient.getMCPServers(),
-      ]);
-      const total =
-        (pluginsResp.plugins?.length ?? 0) + (mcpResp.servers?.length ?? 0);
-      if (total >= maxExtensions) {
-        toast.error(
-          t('limitation.maxExtensionsReached', { max: maxExtensions }),
-        );
-        return false;
-      }
-    } catch {
-      // If we can't check, let backend handle it
-    }
-    return true;
-  }
-
-  // Register task completion callback for toast and plugin list refresh
-  useEffect(() => {
-    const onComplete = (_taskId: number, success: boolean, error?: string) => {
-      if (success) {
-        toast.success(t('plugins.installSuccess'));
-        refreshPlugins();
-      } else {
-        toast.error(error || t('plugins.installFailed'));
-      }
-    };
-    registerOnTaskComplete(onComplete);
-    return () => {
-      unregisterOnTaskComplete(onComplete);
-    };
-  }, [registerOnTaskComplete, unregisterOnTaskComplete, refreshPlugins, t]);
-
-  const handleInstallPlugin = useCallback(
-    async (plugin: PluginV4) => {
-      if (!(await checkExtensionsLimit())) return;
-      setInstallInfo({
-        plugin_author: plugin.author,
-        plugin_name: plugin.name,
-        plugin_version: plugin.latest_version,
-      });
-      setPluginInstallStatus(PluginInstallStatus.ASK_CONFIRM);
-      setInstallError(null);
-      setModalOpen(true);
-    },
-    [t],
-  );
-
-  function handleModalConfirm() {
-    setPluginInstallStatus(PluginInstallStatus.INSTALLING);
-    const pluginDisplayName = `${installInfo.plugin_author}/${installInfo.plugin_name}`;
-    httpClient
-      .installPluginFromMarketplace(
-        installInfo.plugin_author,
-        installInfo.plugin_name,
-        installInfo.plugin_version,
-      )
-      .then((resp) => {
-        const taskId = resp.task_id;
-        const taskKey = `marketplace-${taskId}`;
-        addTask({
-          taskId,
-          pluginName: pluginDisplayName,
-          source: 'marketplace',
-        });
-        setSelectedTaskId(taskKey);
-        setModalOpen(false);
-      })
-      .catch((err) => {
-        setInstallError(err.msg);
-        setPluginInstallStatus(PluginInstallStatus.ERROR);
-      });
-  }
-
-  return (
-    <>
-      <div className="h-full overflow-y-auto">
-        <MarketPage installPlugin={handleInstallPlugin} />
-      </div>
-
-      <Dialog
-        open={modalOpen}
-        onOpenChange={(open) => {
-          setModalOpen(open);
-          if (!open) {
-            setInstallError(null);
-          }
-        }}
-      >
-        <DialogContent className="w-[500px] max-h-[80vh] p-6 bg-white dark:bg-[#1a1a1e] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-4">
-              <Download className="size-6" />
-              <span>{t('plugins.installPlugin')}</span>
-            </DialogTitle>
-          </DialogHeader>
-
-          {pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
-            <div className="mt-4">
-              <p className="mb-2">
-                {t('plugins.askConfirm', {
-                  name: installInfo.plugin_name,
-                  version: installInfo.plugin_version,
-                })}
-              </p>
-            </div>
-          )}
-
-          {pluginInstallStatus === PluginInstallStatus.INSTALLING && (
-            <div className="mt-4">
-              <p className="mb-2">{t('plugins.installing')}</p>
-            </div>
-          )}
-
-          {pluginInstallStatus === PluginInstallStatus.ERROR && (
-            <div className="mt-4">
-              <p className="mb-2">{t('plugins.installFailed')}</p>
-              <p className="mb-2 text-red-500">{installError}</p>
-            </div>
-          )}
-
-          <DialogFooter>
-            {pluginInstallStatus === PluginInstallStatus.ASK_CONFIRM && (
-              <>
-                <Button variant="outline" onClick={() => setModalOpen(false)}>
-                  {t('common.cancel')}
-                </Button>
-                <Button onClick={handleModalConfirm}>
-                  {t('common.confirm')}
-                </Button>
-              </>
-            )}
-            {pluginInstallStatus === PluginInstallStatus.ERROR && (
-              <Button variant="default" onClick={() => setModalOpen(false)}>
-                {t('common.close')}
-              </Button>
-            )}
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

web/src/app/home/mcp/MCPDetailContent.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
 import {
   Card,
   CardContent,
@@ -23,31 +24,43 @@ import type { MCPFormHandle } from '@/app/home/mcp/components/mcp-form/MCPForm';
 import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
 import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
 import { useTranslation } from 'react-i18next';
-import { Trash2 } from 'lucide-react';
+import { Server, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 
+type MCPRuntimeState = 'connected' | 'connecting' | 'error';
+type MCPConnectionState =
+  | 'connected'
+  | 'connecting'
+  | 'error'
+  | 'disabled'
+  | 'disconnected';
+
 export default function MCPDetailContent({ id }: { id: string }) {
   const isCreateMode = id === 'new';
   const navigate = useNavigate();
   const { t } = useTranslation();
   const { refreshMCPServers, mcpServers, setDetailEntityName } =
     useSidebarData();
+  const server = mcpServers.find((s) => s.id === id);
+  const displayName = (server?.name ?? id).replace(/__/g, '/');
 
   // Set breadcrumb entity name
   useEffect(() => {
     if (isCreateMode) {
       setDetailEntityName(t('mcp.createServer'));
     } else {
-      const server = mcpServers.find((s) => s.id === id);
-      setDetailEntityName(server?.name ?? id);
+      setDetailEntityName(displayName);
     }
     return () => setDetailEntityName(null);
-  }, [id, isCreateMode, mcpServers, setDetailEntityName, t]);
+  }, [displayName, isCreateMode, setDetailEntityName, t]);
 
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   // Track whether the form has unsaved changes
   const [formDirty, setFormDirty] = useState(false);
+  // True when the form picked stdio mode but Box is disabled/unreachable —
+  // saving would create a server that can never start, so block it.
+  const [saveBlockedByBox, setSaveBlockedByBox] = useState(false);
 
   // Ref to MCPForm for triggering test from header
   const formRef = useRef<MCPFormHandle>(null);
@@ -56,13 +69,55 @@ export default function MCPDetailContent({ id }: { id: string }) {
   // Enable state managed here so the header switch works
   const [serverEnabled, setServerEnabled] = useState(true);
   const [enableLoaded, setEnableLoaded] = useState(false);
+  const [detailRuntimeStatus, setDetailRuntimeStatus] =
+    useState<MCPRuntimeState | null>(null);
+
+  const runtimeStatus = detailRuntimeStatus ?? server?.runtimeStatus;
+
+  const currentConnectionState: MCPConnectionState =
+    (enableLoaded ? serverEnabled : server?.enabled) === false
+      ? 'disabled'
+      : runtimeStatus === 'connected' ||
+          runtimeStatus === 'connecting' ||
+          runtimeStatus === 'error'
+        ? runtimeStatus
+        : 'disconnected';
+
+  const connectionStatusLabel: Record<MCPConnectionState, string> = {
+    connected: t('mcp.statusConnected'),
+    connecting: t('mcp.connecting'),
+    error: t('mcp.statusError'),
+    disabled: t('mcp.statusDisabled'),
+    disconnected: t('mcp.statusDisconnected'),
+  };
+
+  const connectionStatusClassName: Record<MCPConnectionState, string> = {
+    connected:
+      'border-green-200 bg-green-50 text-green-700 dark:border-green-900/70 dark:bg-green-950/40 dark:text-green-300',
+    connecting:
+      'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-300',
+    error:
+      'border-red-200 bg-red-50 text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300',
+    disabled: 'border-muted-foreground/20 bg-muted text-muted-foreground',
+    disconnected: 'border-muted-foreground/20 bg-muted text-muted-foreground',
+  };
+
+  const connectionDotClassName: Record<MCPConnectionState, string> = {
+    connected: 'bg-green-500',
+    connecting: 'bg-amber-500',
+    error: 'bg-red-500',
+    disabled: 'bg-muted-foreground/50',
+    disconnected: 'bg-muted-foreground/50',
+  };
 
   // Fetch server enable state
   useEffect(() => {
     if (!isCreateMode) {
+      setDetailRuntimeStatus(null);
       httpClient.getMCPServer(id).then((res) => {
         const server = res.server ?? res;
         setServerEnabled(server.enable ?? true);
+        setDetailRuntimeStatus(server.runtime_info?.status ?? null);
         setEnableLoaded(true);
       });
     }
@@ -142,10 +197,24 @@ export default function MCPDetailContent({ id }: { id: string }) {
   if (isCreateMode) {
     return (
       <div className="flex h-full flex-col">
-        {/* Header */}
-        <div className="flex items-center justify-between pb-4 shrink-0">
-          <h1 className="text-xl font-semibold">{t('mcp.createServer')}</h1>
-          <div className="flex items-center gap-2">
+        <div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="flex min-w-0 items-center gap-3">
+            <h1 className="truncate text-xl font-semibold">
+              {t('mcp.createServer')}
+            </h1>
+            <Badge variant="outline" className="shrink-0 text-[0.7rem]">
+              <Server className="size-3.5" />
+              {t('mcp.title')}
+            </Badge>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => navigate('/home/add-extension')}
+            >
+              {t('common.cancel')}
+            </Button>
             <Button
               type="button"
               variant="outline"
@@ -157,6 +226,7 @@ export default function MCPDetailContent({ id }: { id: string }) {
             <Button
               type="submit"
               form="mcp-form"
+              disabled={saveBlockedByBox}
               onClick={async (e) => {
                 if (!(await checkExtensionsLimit())) {
                   e.preventDefault();
@@ -168,47 +238,99 @@ export default function MCPDetailContent({ id }: { id: string }) {
           </div>
         </div>
 
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto min-h-0">
-          <div className="mx-auto max-w-3xl pb-8">
-            <MCPForm
-              ref={formRef}
-              initServerName={undefined}
-              onFormSubmit={handleFormSubmit}
-              onNewServerCreated={handleNewServerCreated}
-              onTestingChange={setMcpTesting}
-            />
-          </div>
+        <div className="min-h-0 flex-1">
+          <MCPForm
+            ref={formRef}
+            initServerName={undefined}
+            layout="split"
+            onFormSubmit={handleFormSubmit}
+            onNewServerCreated={handleNewServerCreated}
+            onTestingChange={setMcpTesting}
+            onSaveBlockedChange={setSaveBlockedByBox}
+          />
         </div>
       </div>
     );
   }
 
+  const enableControl = enableLoaded && (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('common.enable')}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between">
+          <Label
+            htmlFor="mcp-enable-switch"
+            className="cursor-pointer text-sm font-medium"
+          >
+            {t('common.enable')}
+          </Label>
+          <Switch
+            id="mcp-enable-switch"
+            checked={serverEnabled}
+            onCheckedChange={handleEnableToggle}
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  const editActions = (
+    <Card className="border-destructive/50">
+      <CardHeader>
+        <CardTitle className="text-destructive">
+          {t('mcp.dangerZone')}
+        </CardTitle>
+        <CardDescription>{t('mcp.dangerZoneDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-medium">{t('mcp.deleteMCPAction')}</p>
+            <p className="text-sm text-muted-foreground">
+              {t('mcp.deleteMCPHint')}
+            </p>
+          </div>
+          <Button
+            type="button"
+            variant="destructive"
+            size="sm"
+            onClick={() => setShowDeleteConfirm(true)}
+            className="shrink-0"
+          >
+            <Trash2 className="mr-1.5 size-4" />
+            {t('common.delete')}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
   // ==================== Edit Mode ====================
   return (
     <>
       <div className="flex h-full flex-col">
-        {/* Header: title + enable switch + save button */}
-        <div className="flex items-center justify-between pb-4 shrink-0">
-          <div className="flex items-center gap-4">
-            <h1 className="text-xl font-semibold">{t('mcp.editServer')}</h1>
-            {enableLoaded && (
-              <div className="flex items-center gap-2">
-                <Switch
-                  id="mcp-enable-switch"
-                  checked={serverEnabled}
-                  onCheckedChange={handleEnableToggle}
+        <div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0 space-y-1">
+            <div className="flex min-w-0 items-center gap-3">
+              <h1 className="truncate text-xl font-semibold">{displayName}</h1>
+              <Badge variant="outline" className="shrink-0 text-[0.7rem]">
+                <Server className="size-3.5" />
+                {t('mcp.title')}
+              </Badge>
+              <Badge
+                variant="outline"
+                className={`shrink-0 gap-1.5 text-[0.7rem] ${connectionStatusClassName[currentConnectionState]}`}
+              >
+                <span
+                  className={`size-1.5 rounded-full ${connectionDotClassName[currentConnectionState]}`}
                 />
-                <Label
-                  htmlFor="mcp-enable-switch"
-                  className="text-sm text-muted-foreground cursor-pointer"
-                >
-                  {t('common.enable')}
-                </Label>
-              </div>
-            )}
+                {connectionStatusLabel[currentConnectionState]}
+              </Badge>
+            </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap gap-2">
             <Button
               type="button"
               variant="outline"
@@ -217,57 +339,32 @@ export default function MCPDetailContent({ id }: { id: string }) {
             >
               {t('common.test')}
             </Button>
-            <Button type="submit" form="mcp-form" disabled={!formDirty}>
+            <Button
+              type="submit"
+              form="mcp-form"
+              disabled={!formDirty || saveBlockedByBox}
+            >
               {t('common.save')}
             </Button>
           </div>
         </div>
 
-        {/* Content */}
-        <div className="flex-1 overflow-y-auto min-h-0">
-          <div className="mx-auto max-w-3xl space-y-6 pb-8">
-            <MCPForm
-              ref={formRef}
-              initServerName={id}
-              onFormSubmit={handleFormSubmit}
-              onNewServerCreated={handleNewServerCreated}
-              onDirtyChange={setFormDirty}
-              onTestingChange={setMcpTesting}
-            />
-
-            {/* Card: Danger Zone */}
-            <Card className="border-destructive/50">
-              <CardHeader>
-                <CardTitle className="text-destructive">
-                  {t('mcp.dangerZone')}
-                </CardTitle>
-                <CardDescription>
-                  {t('mcp.dangerZoneDescription')}
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center justify-between">
-                  <div className="space-y-1">
-                    <p className="text-sm font-medium">
-                      {t('mcp.deleteMCPAction')}
-                    </p>
-                    <p className="text-sm text-muted-foreground">
-                      {t('mcp.deleteMCPHint')}
-                    </p>
-                  </div>
-                  <Button
-                    type="button"
-                    variant="destructive"
-                    size="sm"
-                    onClick={() => setShowDeleteConfirm(true)}
-                  >
-                    <Trash2 className="size-4 mr-1.5" />
-                    {t('common.delete')}
-                  </Button>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+        <div className="min-h-0 flex-1">
+          <MCPForm
+            ref={formRef}
+            initServerName={id}
+            layout="split"
+            sideHeader={enableControl}
+            sideFooter={editActions}
+            onFormSubmit={handleFormSubmit}
+            onNewServerCreated={handleNewServerCreated}
+            onDirtyChange={setFormDirty}
+            onTestingChange={setMcpTesting}
+            onSaveBlockedChange={setSaveBlockedByBox}
+            onRuntimeInfoChange={(runtimeInfo) =>
+              setDetailRuntimeStatus(runtimeInfo?.status ?? null)
+            }
+          />
         </div>
       </div>
 

web/src/app/home/monitoring/components/FeedbackCard.tsx

@@ -6,6 +6,8 @@ import {
   TrendingUp,
   TrendingDown,
   Minus,
+  Heart,
+  Smile,
 } from 'lucide-react';
 
 interface FeedbackCardProps {
@@ -133,11 +135,7 @@ export function FeedbackStatsCards({ stats, loading }: FeedbackStatsProps) {
     {
       title: t('monitoring.feedback.totalFeedback'),
       value: stats?.totalFeedback ?? 0,
-      icon: (
-        <svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
-        </svg>
-      ),
+      icon: <Heart className="w-6 h-6" />,
       variant: 'default' as const,
     },
     {
@@ -155,11 +153,7 @@ export function FeedbackStatsCards({ stats, loading }: FeedbackStatsProps) {
     {
       title: t('monitoring.feedback.satisfactionRate'),
       value: stats ? `${stats.satisfactionRate}%` : '0%',
-      icon: (
-        <svg className="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
-        </svg>
-      ),
+      icon: <Smile className="w-6 h-6" />,
       variant: (stats && stats.satisfactionRate >= 80
         ? 'success'
         : stats && stats.satisfactionRate >= 50

web/src/app/home/monitoring/components/FeedbackList.tsx

@@ -6,6 +6,7 @@ import {
   ChevronRight,
   ChevronDown,
   ExternalLink,
+  Heart,
 } from 'lucide-react';
 import { FeedbackRecord } from '../types/monitoring';
 import { Button } from '@/components/ui/button';
@@ -40,19 +41,7 @@ export function FeedbackList({
   if (!feedback || feedback.length === 0) {
     return (
       <div className="text-center text-gray-500 dark:text-gray-400 py-16">
-        <svg
-          className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={1.5}
-            d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-          />
-        </svg>
+        <Heart className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
         <p className="text-base font-medium mb-2">
           {t('monitoring.feedback.noFeedback')}
         </p>

web/src/app/home/monitoring/components/MessageContentRenderer.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Paperclip, AudioLines } from 'lucide-react';
 import {
   MessageChainComponent,
   Image as ImageComponent,
@@ -104,13 +105,7 @@ export function MessageContentRenderer({
             key={index}
             className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-muted text-muted-foreground text-sm"
           >
-            <svg
-              className="w-3.5 h-3.5 mr-1"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" />
-            </svg>
+            <Paperclip className="w-3.5 h-3.5 mr-1" />
             {file.name || 'File'}
           </span>
         );
@@ -123,13 +118,7 @@ export function MessageContentRenderer({
             key={index}
             className="inline-flex items-center px-1.5 py-0.5 mx-0.5 rounded bg-muted text-muted-foreground text-sm"
           >
-            <svg
-              className="w-3.5 h-3.5 mr-1"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-            >
-              <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
-            </svg>
+            <AudioLines className="w-3.5 h-3.5 mr-1" />
             Voice{voice.length ? ` ${voice.length}s` : ''}
           </span>
         );

web/src/app/home/monitoring/components/MessageDetailsCard.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Info, Clock, AlertCircle, Braces } from 'lucide-react';
 import { MessageDetails } from '../types/monitoring';
 
 interface MessageDetailsCardProps {
@@ -25,14 +26,7 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
       {details.message && (
         <div className="bg-muted rounded-lg p-3">
           <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center">
-            <svg
-              className="w-4 h-4 mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z"></path>
-            </svg>
+            <Info className="w-4 h-4 mr-2" />
             {t('monitoring.messageList.viewDetails')}
           </h4>
 
@@ -92,14 +86,7 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
       {details.llmCalls && details.llmCalls.length > 0 && (
         <div className="bg-muted rounded-lg p-3">
           <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center">
-            <svg
-              className="w-4 h-4 mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20ZM13 12V7H11V14H17V12H13Z"></path>
-            </svg>
+            <Clock className="w-4 h-4 mr-2" />
             {t('monitoring.llmCalls.title')} ({details.llmCalls.length})
           </h4>
 
@@ -183,14 +170,7 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
       {details.errors && details.errors.length > 0 && (
         <div className="bg-muted rounded-lg p-3">
           <h4 className="text-sm font-semibold text-red-700 dark:text-red-400 mb-3 flex items-center">
-            <svg
-              className="w-4 h-4 mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path>
-            </svg>
+            <AlertCircle className="w-4 h-4 mr-2" />
             {t('monitoring.errors.title')} ({details.errors.length})
           </h4>
           <div className="space-y-2">
@@ -227,14 +207,7 @@ export function MessageDetailsCard({ details }: MessageDetailsCardProps) {
         details.message?.runnerName !== 'local-agent' && (
           <div className="bg-muted rounded-lg p-3">
             <h4 className="text-sm font-semibold text-foreground mb-3 flex items-center">
-              <svg
-                className="w-4 h-4 mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
-                <path d="M4 18V14.3C4 13.4716 3.32843 12.8 2.5 12.8H2V11.2H2.5C3.32843 11.2 4 10.5284 4 9.7V6C4 4.34315 5.34315 3 7 3H8V5H7C6.44772 5 6 5.44772 6 6V9.7C6 10.7065 5.41099 11.5849 4.55132 12C5.41099 12.4151 6 13.2935 6 14.3V18C6 18.5523 6.44772 19 7 19H8V21H7C5.34315 21 4 19.6569 4 18ZM20 14.3V18C20 19.6569 18.6569 21 17 21H16V19H17C17.5523 19 18 18.5523 18 18V14.3C18 13.2935 18.589 12.4151 19.4487 12C18.589 11.5849 18 10.7065 18 9.7V6C18 5.44772 17.5523 5 17 5H16V3H17C18.6569 3 20 4.34315 20 6V9.7C20 10.5284 20.6716 11.2 21.5 11.2H22V12.8H21.5C20.6716 12.8 20 13.4716 20 14.3Z"></path>
-              </svg>
+              <Braces className="w-4 h-4 mr-2" />
               {t('monitoring.queryVariables.title')}
             </h4>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">

web/src/app/home/monitoring/components/overview-cards/MetricCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TrendingUp, TrendingDown } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 
 interface MetricCardProps {
@@ -61,21 +62,11 @@ export default function MetricCard({
                   : 'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'
               }`}
             >
-              <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                {trend.direction === 'up' ? (
-                  <path
-                    fillRule="evenodd"
-                    d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z"
-                    clipRule="evenodd"
-                  />
-                ) : (
-                  <path
-                    fillRule="evenodd"
-                    d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z"
-                    clipRule="evenodd"
-                  />
-                )}
-              </svg>
+              {trend.direction === 'up' ? (
+                <TrendingUp className="w-3 h-3" />
+              ) : (
+                <TrendingDown className="w-3 h-3" />
+              )}
               {Math.abs(trend.value)}%
             </span>
             <span className="text-xs text-muted-foreground">

web/src/app/home/monitoring/components/overview-cards/OverviewCards.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { MessageSquare, Sparkles, Check, Users } from 'lucide-react';
 import MetricCard from './MetricCard';
+import SystemStatusCard from './SystemStatusCards';
 import TrafficChart from './TrafficChart';
 import {
   OverviewMetrics,
@@ -13,6 +15,7 @@ interface OverviewCardsProps {
   messages?: MonitoringMessage[];
   llmCalls?: LLMCall[];
   loading?: boolean;
+  refreshKey?: number;
 }
 
 export default function OverviewCards({
@@ -20,6 +23,7 @@ export default function OverviewCards({
   messages = [],
   llmCalls = [],
   loading,
+  refreshKey,
 }: OverviewCardsProps) {
   const { t } = useTranslation();
 
@@ -27,15 +31,7 @@ export default function OverviewCards({
     {
       title: t('monitoring.totalMessages'),
       value: metrics?.totalMessages || 0,
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM4 18.3851L5.76282 17H20V5H4V18.3851Z"></path>
-        </svg>
-      ),
+      icon: <MessageSquare />,
       trend: metrics?.trends
         ? {
             value: metrics.trends.messages,
@@ -48,15 +44,7 @@ export default function OverviewCards({
     {
       title: t('monitoring.modelCallsCount'),
       value: metrics?.modelCalls || 0,
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899Z"></path>
-        </svg>
-      ),
+      icon: <Sparkles />,
       trend: metrics?.trends
         ? {
             value: metrics.trends.llmCalls,
@@ -69,15 +57,7 @@ export default function OverviewCards({
     {
       title: t('monitoring.successRate'),
       value: metrics ? `${metrics.successRate}%` : '0%',
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M10 15.172L19.192 5.979L20.607 7.393L10 18L3.636 11.636L5.05 10.222L10 15.172Z"></path>
-        </svg>
-      ),
+      icon: <Check />,
       trend: metrics?.trends
         ? {
             value: metrics.trends.successRate,
@@ -90,15 +70,7 @@ export default function OverviewCards({
     {
       title: t('monitoring.activeSessions'),
       value: metrics?.activeSessions || 0,
-      icon: (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-        >
-          <path d="M2 22C2 17.5817 5.58172 14 10 14C14.4183 14 18 17.5817 18 22H16C16 18.6863 13.3137 16 10 16C6.68629 16 4 18.6863 4 22H2ZM10 13C6.685 13 4 10.315 4 7C4 3.685 6.685 1 10 1C13.315 1 16 3.685 16 7C16 10.315 13.315 13 10 13ZM10 11C12.21 11 14 9.21 14 7C14 4.79 12.21 3 10 3C7.79 3 6 4.79 6 7C6 9.21 7.79 11 10 11ZM18.2837 14.7028C21.0644 15.9561 23 18.7519 23 22H21C21 19.3742 19.4041 17.1096 17.1582 16.2466L18.2837 14.7028ZM17.5962 3.41321C19.5944 4.23703 21 6.20361 21 8.5C21 11.3702 18.8042 13.7252 16 13.9776V11.9646C17.6967 11.7222 19 10.264 19 8.5C19 7.11935 18.2016 5.92603 17.041 5.35635L17.5962 3.41321Z"></path>
-        </svg>
-      ),
+      icon: <Users />,
       trend: metrics?.trends
         ? {
             value: metrics.trends.sessions,
@@ -112,8 +84,8 @@ export default function OverviewCards({
 
   return (
     <div className="space-y-6">
-      {/* Metric Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
+      {/* Metric Cards + System Status */}
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-6">
         {cards.map((card, index) => (
           <MetricCard
             key={index}
@@ -124,6 +96,7 @@ export default function OverviewCards({
             loading={loading}
           />
         ))}
+        <SystemStatusCard refreshKey={refreshKey} />
       </div>
 
       {/* Traffic Chart */}

web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx

@@ -0,0 +1,399 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Plug,
+  Box,
+  CircleCheck,
+  CircleX,
+  Loader2,
+  Info,
+  Container,
+  Clock,
+  Cpu,
+  HardDrive,
+  Network,
+  Image,
+  FolderOpen,
+} from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  ApiRespPluginSystemStatus,
+  ApiRespBoxStatus,
+  BoxSessionInfo,
+} from '@/app/infra/entities/api';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+type StatusState = 'ok' | 'disabled' | 'failed' | null;
+
+function StatusDot({ state }: { state: StatusState }) {
+  if (state === null)
+    return <span className="w-2 h-2 rounded-full bg-muted-foreground/40" />;
+  if (state === 'ok')
+    return <span className="w-2 h-2 rounded-full bg-green-500" />;
+  if (state === 'disabled')
+    return <span className="w-2 h-2 rounded-full bg-muted-foreground/60" />;
+  return <span className="w-2 h-2 rounded-full bg-red-500" />;
+}
+
+interface SystemStatusCardProps {
+  refreshKey?: number;
+}
+
+export default function SystemStatusCard({
+  refreshKey,
+}: SystemStatusCardProps) {
+  const { t } = useTranslation();
+  const [pluginStatus, setPluginStatus] =
+    useState<ApiRespPluginSystemStatus | null>(null);
+  const [boxStatus, setBoxStatus] = useState<ApiRespBoxStatus | null>(null);
+  const [boxSessions, setBoxSessions] = useState<BoxSessionInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const [plugin, box, sessions] = await Promise.all([
+        httpClient.getPluginSystemStatus().catch(() => null),
+        httpClient.getBoxStatus().catch(() => null),
+        httpClient.getBoxSessions().catch(() => [] as BoxSessionInfo[]),
+      ]);
+      setPluginStatus(plugin);
+      setBoxStatus(box);
+      setBoxSessions(sessions);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+    const interval = setInterval(fetchStatus, 30_000);
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchStatus, refreshKey]);
+
+  const pluginOk = pluginStatus
+    ? pluginStatus.is_enable && pluginStatus.is_connected
+    : null;
+  const pluginState: StatusState = pluginStatus
+    ? pluginStatus.is_enable && pluginStatus.is_connected
+      ? 'ok'
+      : !pluginStatus.is_enable
+        ? 'disabled'
+        : 'failed'
+    : null;
+  const boxOk = boxStatus ? boxStatus.available : null;
+  // Box has three observable states: connected (ok), disabled by config
+  // (enabled = false → distinct gray dot + "disabled" hint), and configured
+  // but failed (red dot + connector_error). The dashboard must distinguish
+  // them so operators can tell intentional-off from misconfigured.
+  const boxState: StatusState = boxStatus
+    ? boxStatus.available
+      ? 'ok'
+      : boxStatus.enabled === false
+        ? 'disabled'
+        : 'failed'
+    : null;
+
+  const handleOpenDialog = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    fetchStatus();
+    setDialogOpen(true);
+  };
+
+  if (loading) {
+    return (
+      <Card className="transition-all duration-300">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
+            {t('monitoring.systemStatus')}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-2">
+            <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <Card className="transition-all duration-300 group">
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
+            {t('monitoring.systemStatus')}
+          </CardTitle>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            onClick={handleOpenDialog}
+          >
+            <Info className="w-4 h-4" />
+          </Button>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="flex items-center gap-2">
+            <StatusDot state={pluginState} />
+            <Plug className="w-3.5 h-3.5 text-muted-foreground" />
+            <span className="text-sm">{t('monitoring.pluginRuntime')}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <StatusDot state={boxState} />
+            <Box className="w-3.5 h-3.5 text-muted-foreground" />
+            <span className="text-sm">{t('monitoring.boxRuntime')}</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>{t('monitoring.systemStatus')}</DialogTitle>
+          </DialogHeader>
+
+          <TooltipProvider>
+            <div className="space-y-5 overflow-y-auto flex-1 pr-1">
+              {/* Plugin Runtime */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Plug className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-sm font-semibold">
+                    {t('monitoring.pluginRuntime')}
+                  </span>
+                </div>
+                <div className="ml-6 text-sm space-y-1">
+                  <div className="flex items-center gap-1.5">
+                    {pluginOk ? (
+                      <CircleCheck className="w-4 h-4 text-green-600" />
+                    ) : (
+                      <CircleX className="w-4 h-4 text-red-500" />
+                    )}
+                    <span
+                      className={
+                        pluginOk
+                          ? 'text-green-600 font-medium'
+                          : 'text-red-500 font-medium'
+                      }
+                    >
+                      {pluginOk
+                        ? t('monitoring.connected')
+                        : pluginStatus && !pluginStatus.is_enable
+                          ? t('monitoring.disabled')
+                          : t('monitoring.disconnected')}
+                    </span>
+                  </div>
+                  {pluginStatus && !pluginStatus.is_enable && (
+                    <p className="text-muted-foreground text-xs">
+                      {t('monitoring.pluginDisabled')}
+                    </p>
+                  )}
+                  {pluginStatus &&
+                    !pluginOk &&
+                    pluginStatus.is_enable &&
+                    pluginStatus.plugin_connector_error &&
+                    pluginStatus.plugin_connector_error !== 'ok' && (
+                      <p className="text-red-400 text-xs break-all">
+                        {pluginStatus.plugin_connector_error}
+                      </p>
+                    )}
+                </div>
+              </div>
+
+              <div className="border-t" />
+
+              {/* Box Runtime */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <Box className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-sm font-semibold">
+                    {t('monitoring.boxRuntime')}
+                  </span>
+                </div>
+                <div className="ml-6 text-sm space-y-1">
+                  <div className="flex items-center gap-1.5">
+                    {boxState === 'ok' ? (
+                      <CircleCheck className="w-4 h-4 text-green-600" />
+                    ) : (
+                      <CircleX
+                        className={
+                          boxState === 'disabled'
+                            ? 'w-4 h-4 text-muted-foreground'
+                            : 'w-4 h-4 text-red-500'
+                        }
+                      />
+                    )}
+                    <span
+                      className={
+                        boxState === 'ok'
+                          ? 'text-green-600 font-medium'
+                          : boxState === 'disabled'
+                            ? 'text-muted-foreground font-medium'
+                            : 'text-red-500 font-medium'
+                      }
+                    >
+                      {boxState === 'ok'
+                        ? t('monitoring.connected')
+                        : boxState === 'disabled'
+                          ? t('monitoring.disabled')
+                          : t('monitoring.disconnected')}
+                    </span>
+                  </div>
+                  {boxState === 'disabled' && (
+                    <p className="text-muted-foreground text-xs">
+                      {t('monitoring.boxDisabled')}
+                    </p>
+                  )}
+                  {boxState === 'failed' && boxStatus?.connector_error && (
+                    <p className="text-red-400 text-xs break-all">
+                      {boxStatus.connector_error}
+                    </p>
+                  )}
+                  {boxStatus && (
+                    <div className="text-muted-foreground text-xs space-y-0.5">
+                      {boxStatus.backend && (
+                        <p>
+                          {t('monitoring.boxBackend')}:{' '}
+                          <span className="text-foreground font-mono">
+                            {boxStatus.backend.name}
+                          </span>
+                        </p>
+                      )}
+                      <p>
+                        {t('monitoring.boxProfile')}:{' '}
+                        <span className="text-foreground font-mono">
+                          {boxStatus.profile}
+                        </span>
+                      </p>
+                      {boxOk && boxStatus.active_sessions !== undefined && (
+                        <p>
+                          {t('monitoring.boxSandboxes')}:{' '}
+                          <span className="text-foreground font-mono">
+                            {boxStatus.active_sessions}
+                          </span>
+                        </p>
+                      )}
+                    </div>
+                  )}
+
+                  {/* Active Sandboxes */}
+                  {boxSessions.length > 0 && (
+                    <div className="mt-3 space-y-2">
+                      {boxSessions.map((session) => (
+                        <div
+                          key={session.session_id}
+                          className="rounded-lg border p-3 space-y-2"
+                        >
+                          <div className="flex items-center gap-1.5 min-w-0">
+                            <Container className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <span className="font-mono font-semibold text-foreground truncate text-sm">
+                                  {session.session_id}
+                                </span>
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                {session.session_id}
+                              </TooltipContent>
+                            </Tooltip>
+                          </div>
+                          <div className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
+                            <div className="flex items-center gap-1.5 text-muted-foreground min-w-0">
+                              <Image className="w-3 h-3 flex-shrink-0" />
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <span className="text-foreground font-mono truncate">
+                                    {session.image}
+                                  </span>
+                                </TooltipTrigger>
+                                <TooltipContent>{session.image}</TooltipContent>
+                              </Tooltip>
+                            </div>
+                            <div className="flex items-center gap-1.5 text-muted-foreground">
+                              <HardDrive className="w-3 h-3 flex-shrink-0" />
+                              <span className="text-foreground">
+                                {session.backend_name}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-1.5 text-muted-foreground">
+                              <Cpu className="w-3 h-3 flex-shrink-0" />
+                              <span className="text-foreground">
+                                {session.cpus} CPU / {session.memory_mb} MB
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-1.5 text-muted-foreground">
+                              <Network className="w-3 h-3 flex-shrink-0" />
+                              <span className="text-foreground">
+                                {session.network}
+                              </span>
+                            </div>
+                            {session.host_path && (
+                              <div className="flex items-center gap-1.5 text-muted-foreground col-span-2 min-w-0">
+                                <FolderOpen className="w-3 h-3 flex-shrink-0" />
+                                <Tooltip>
+                                  <TooltipTrigger asChild>
+                                    <span className="text-foreground font-mono truncate">
+                                      {session.host_path} : {session.mount_path}{' '}
+                                      <span className="text-muted-foreground">
+                                        ({session.host_path_mode})
+                                      </span>
+                                    </span>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    {session.host_path} : {session.mount_path} (
+                                    {session.host_path_mode})
+                                  </TooltipContent>
+                                </Tooltip>
+                              </div>
+                            )}
+                            <div className="flex items-center gap-1.5 text-muted-foreground">
+                              <Clock className="w-3 h-3 flex-shrink-0" />
+                              <span>
+                                {t('monitoring.boxSessionCreated')}:{' '}
+                                <span className="text-foreground">
+                                  {new Date(
+                                    session.created_at,
+                                  ).toLocaleString()}
+                                </span>
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-1.5 text-muted-foreground">
+                              <Clock className="w-3 h-3 flex-shrink-0" />
+                              <span>
+                                {t('monitoring.boxSessionLastUsed')}:{' '}
+                                <span className="text-foreground">
+                                  {new Date(
+                                    session.last_used_at,
+                                  ).toLocaleString()}
+                                </span>
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </TooltipProvider>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/app/home/monitoring/components/overview-cards/TrafficChart.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { BarChart3 } from 'lucide-react';
 import {
   AreaChart,
   Area,
@@ -146,14 +147,7 @@ export default function TrafficChart({
           {t('monitoring.trafficChart.title')}
         </h3>
         <div className="h-[300px] flex flex-col items-center justify-center text-muted-foreground gap-2">
-          <svg
-            className="h-[3rem] w-[3rem]"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-          >
-            <path d="M2 13H8V21H2V13ZM16 8H22V21H16V8ZM9 3H15V21H9V3ZM4 15V19H6V15H4ZM11 5V19H13V5H11ZM18 10V19H20V10H18Z"></path>
-          </svg>
+          <BarChart3 className="h-[3rem] w-[3rem]" />
           <div className="text-sm">{t('monitoring.trafficChart.noData')}</div>
         </div>
       </div>

web/src/app/home/monitoring/page.tsx

@@ -2,7 +2,15 @@ import React, { Suspense, useState, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
-import { ChevronRight, ChevronDown, ExternalLink } from 'lucide-react';
+import {
+  ChevronRight,
+  ChevronDown,
+  ExternalLink,
+  RefreshCw,
+  MessageSquare,
+  Sparkles,
+  CheckCircle2,
+} from 'lucide-react';
 import OverviewCards from './components/overview-cards/OverviewCards';
 import MonitoringFilters from './components/filters/MonitoringFilters';
 import { ExportDropdown } from './components/ExportDropdown';
@@ -259,8 +267,8 @@ function MonitoringPageContent() {
   return (
     <div className="w-full h-full overflow-y-auto overflow-x-hidden">
       {/* Filters and Refresh Button - Sticky */}
-      <div className="sticky top-[-1.5rem] z-10 -ml-[2rem] -mr-[1.5rem] -mt-[1.5rem] pt-[1.5rem] pb-4 bg-background">
-        <div className="ml-[2rem] mr-[1.5rem] px-[0.8rem]">
+      <div className="sticky top-0 z-10 -mt-1 pb-5 pt-1 bg-background">
+        <div>
           <div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-card rounded-xl border">
             <MonitoringFilters
               selectedBots={filterState.selectedBots}
@@ -278,14 +286,7 @@ function MonitoringPageContent() {
                 onClick={handleRefresh}
                 className="shadow-sm flex-shrink-0"
               >
-                <svg
-                  className="w-4 h-4 mr-2"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                >
-                  <path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path>
-                </svg>
+                <RefreshCw className="w-4 h-4 mr-2" />
                 {t('monitoring.refreshData')}
               </Button>
             </div>
@@ -294,7 +295,7 @@ function MonitoringPageContent() {
       </div>
 
       {/* Content Area */}
-      <div className="flex flex-col gap-6 px-[0.8rem] pb-4">
+      <div className="relative z-0 flex flex-col gap-6 pb-4 pt-3">
         {/* Overview Section */}
         <OverviewCards
           metrics={data?.overview || null}
@@ -452,14 +453,7 @@ function MonitoringPageContent() {
                 {!loading &&
                   (!data || !data.messages || data.messages.length === 0) && (
                     <div className="flex flex-col items-center justify-center text-muted-foreground py-16 gap-2">
-                      <svg
-                        className="h-[3rem] w-[3rem]"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                      >
-                        <path d="M6.45455 19L2 22.5V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V18C22 18.5523 21.5523 19 21 19H6.45455ZM4 18.3851L5.76282 17H20V5H4V18.3851Z"></path>
-                      </svg>
+                      <MessageSquare className="h-[3rem] w-[3rem]" />
                       <div className="text-sm">
                         {t('monitoring.messageList.noMessages')}
                       </div>
@@ -665,14 +659,7 @@ function MonitoringPageContent() {
                     !data.modelCalls ||
                     data.modelCalls.length === 0) && (
                     <div className="flex flex-col items-center justify-center text-muted-foreground py-16 gap-2">
-                      <svg
-                        className="h-[3rem] w-[3rem]"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                      >
-                        <path d="M10.6144 17.7956C10.277 18.5682 9.20776 18.5682 8.8704 17.7956L7.99275 15.7854C7.21171 13.9966 5.80589 12.5726 4.0523 11.7942L1.63658 10.7219C.868536 10.381.868537 9.26368 1.63658 8.92276L3.97685 7.88394C5.77553 7.08552 7.20657 5.60881 7.97427 3.75892L8.8633 1.61673C9.19319.821767 10.2916.821765 10.6215 1.61673L11.5105 3.75894C12.2782 5.60881 13.7092 7.08552 15.5079 7.88394L17.8482 8.92276C18.6162 9.26368 18.6162 10.381 17.8482 10.7219L15.4325 11.7942C13.6789 12.5726 12.2731 13.9966 11.492 15.7854L10.6144 17.7956ZM19.4014 22.6899 19.6482 22.1242C20.0882 21.1156 20.8807 20.3125 21.8695 19.8732L22.6299 19.5353C23.0412 19.3526 23.0412 18.7549 22.6299 18.5722L21.9121 18.2532C20.8978 17.8026 20.0911 16.9698 19.6586 15.9269L19.4052 15.3156C19.2285 14.8896 18.6395 14.8896 18.4628 15.3156L18.2094 15.9269C17.777 16.9698 16.9703 17.8026 15.956 18.2532L15.2381 18.5722C14.8269 18.7549 14.8269 19.3526 15.2381 19.5353L15.9985 19.8732C16.9874 20.3125 17.7798 21.1156 18.2198 22.1242L18.4667 22.6899C18.6473 23.104 19.2207 23.104 19.4014 22.6899Z"></path>
-                      </svg>
+                      <Sparkles className="h-[3rem] w-[3rem]" />
                       <div className="text-sm">
                         {t('monitoring.modelCalls.noData')}
                       </div>
@@ -867,14 +854,7 @@ function MonitoringPageContent() {
                 {!loading &&
                   (!data || !data.errors || data.errors.length === 0) && (
                     <div className="flex flex-col items-center justify-center text-muted-foreground py-16 gap-2">
-                      <svg
-                        className="h-[3rem] w-[3rem] text-green-500 dark:text-green-600"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="currentColor"
-                      >
-                        <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z"></path>
-                      </svg>
+                      <CheckCircle2 className="h-[3rem] w-[3rem] text-green-500 dark:text-green-600" />
                       <div className="text-sm text-green-600 dark:text-green-400">
                         {t('monitoring.errors.noErrors')}
                       </div>

web/src/app/home/pipelines/components/debug-dialog/ImagePreviewDialog.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { X } from 'lucide-react';
 
 interface ImagePreviewDialogProps {
   open: boolean;
@@ -28,19 +29,7 @@ export default function ImagePreviewDialog({
           onClick={onClose}
           className="self-end w-9 h-9 rounded-full bg-white hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-100 shadow-lg transition-all hover:scale-105 flex items-center justify-center"
         >
-          <svg
-            className="w-4 h-4"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M6 18L18 6M6 6l12 12"
-            />
-          </svg>
+          <X className="w-4 h-4" />
         </button>
 
         {/* 图片 */}

web/src/app/home/pipelines/components/monitoring-tab/PipelineMonitoringTab.tsx

@@ -2,7 +2,15 @@ import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Button } from '@/components/ui/button';
-import { ChevronRight, ChevronDown, ExternalLink } from 'lucide-react';
+import {
+  ChevronRight,
+  ChevronDown,
+  ExternalLink,
+  RefreshCw,
+  MessageCircle,
+  CheckCircle2,
+  Monitor,
+} from 'lucide-react';
 import { useMonitoringData } from '@/app/home/monitoring/hooks/useMonitoringData';
 import { MessageContentRenderer } from '@/app/home/monitoring/components/MessageContentRenderer';
 import { LoadingSpinner } from '@/components/ui/loading-spinner';
@@ -205,14 +213,7 @@ export default function PipelineMonitoringTab({
               onClick={onNavigateToMonitoring}
               className="bg-white dark:bg-[#2a2a2e] hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-600"
             >
-              <svg
-                className="w-4 h-4 mr-2"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-              >
-                <path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19V6.413L11.2071 14.2071L9.79289 12.7929L17.585 5H13V3H21Z"></path>
-              </svg>
+              <ExternalLink className="w-4 h-4 mr-2" />
               {t('pipelines.monitoring.detailedLogs')}
             </Button>
           )}
@@ -222,14 +223,7 @@ export default function PipelineMonitoringTab({
             onClick={refetch}
             className="bg-white dark:bg-[#2a2a2e] hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-300 dark:border-gray-600"
           >
-            <svg
-              className="w-4 h-4 mr-2"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"></path>
-            </svg>
+            <RefreshCw className="w-4 h-4 mr-2" />
             {t('monitoring.refreshData')}
           </Button>
         </div>
@@ -431,19 +425,7 @@ export default function PipelineMonitoringTab({
             {!loading &&
               (!data || !data.messages || data.messages.length === 0) && (
                 <div className="text-center text-gray-500 dark:text-gray-400 py-16">
-                  <svg
-                    className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-                    />
-                  </svg>
+                  <MessageCircle className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
                   <p className="text-base font-medium">
                     {t('monitoring.messageList.noMessages')}
                   </p>
@@ -543,19 +525,7 @@ export default function PipelineMonitoringTab({
             {!loading &&
               (!data || !data.errors || data.errors.length === 0) && (
                 <div className="text-center text-gray-500 dark:text-gray-400 py-16">
-                  <svg
-                    className="w-16 h-16 mx-auto mb-4 text-green-300 dark:text-green-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
+                  <CheckCircle2 className="w-16 h-16 mx-auto mb-4 text-green-300 dark:text-green-600" />
                   <p className="text-base font-medium text-green-600 dark:text-green-400">
                     {t('monitoring.errors.noErrors')}
                   </p>
@@ -638,19 +608,7 @@ export default function PipelineMonitoringTab({
             {!loading &&
               (!data || !data.llmCalls || data.llmCalls.length === 0) && (
                 <div className="text-center text-gray-500 dark:text-gray-400 py-16">
-                  <svg
-                    className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-                    />
-                  </svg>
+                  <Monitor className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" />
                   <p className="text-base font-medium">
                     {t('monitoring.llmCalls.noData')}
                   </p>

web/src/app/home/pipelines/components/pipeline-card/PipelineCard.tsx

@@ -1,6 +1,7 @@
 import styles from './pipelineCard.module.css';
 import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
 import { useTranslation } from 'react-i18next';
+import { Clock, Star } from 'lucide-react';
 
 export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
   const { t } = useTranslation();
@@ -21,14 +22,7 @@ export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
         </div>
 
         <div className={`${styles.basicInfoLastUpdatedTimeContainer}`}>
-          <svg
-            className={`${styles.basicInfoUpdateTimeIcon}`}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-          >
-            <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 12H17V14H11V7H13V12Z"></path>
-          </svg>
+          <Clock className={`${styles.basicInfoUpdateTimeIcon}`} />
           <div className={`${styles.basicInfoUpdateTimeText}`}>
             {t('pipelines.updateTime')}
             {cardVO.lastUpdatedTimeAgo}
@@ -39,14 +33,7 @@ export default function PipelineCard({ cardVO }: { cardVO: PipelineCardVO }) {
       {cardVO.isDefault && (
         <div className={styles.operationContainer}>
           <div className={styles.operationDefaultBadge}>
-            <svg
-              className={styles.operationDefaultBadgeIcon}
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"></path>
-            </svg>
+            <Star className={styles.operationDefaultBadgeIcon} />
             <div className={styles.operationDefaultBadgeText}>
               {t('pipelines.defaultBadge')}
             </div>

web/src/app/home/pipelines/components/pipeline-extensions/PipelineExtension.tsx

@@ -12,13 +12,15 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog';
 import { Checkbox } from '@/components/ui/checkbox';
-import { Plus, X, Server, Wrench } from 'lucide-react';
+import { Plus, X, Server, Wrench, Sparkles } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { Plugin } from '@/app/infra/entities/plugin';
-import { MCPServer } from '@/app/infra/entities/api';
+import { MCPServer, Skill } from '@/app/infra/entities/api';
 import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
+import { BoxUnavailableNotice } from '@/app/home/components/BoxUnavailableNotice';
+import { useBoxStatus } from '@/app/infra/hooks/useBoxStatus';
 
 export default function PipelineExtension({
   pipelineId,
@@ -26,19 +28,31 @@ export default function PipelineExtension({
   pipelineId: string;
 }) {
   const { t } = useTranslation();
+  const {
+    available: boxAvailable,
+    hint: boxHint,
+    reason: boxReason,
+  } = useBoxStatus();
   const [loading, setLoading] = useState(true);
   const [enableAllPlugins, setEnableAllPlugins] = useState(true);
   const [enableAllMCPServers, setEnableAllMCPServers] = useState(true);
+  const [enableAllSkills, setEnableAllSkills] = useState(true);
   const [selectedPlugins, setSelectedPlugins] = useState<Plugin[]>([]);
   const [allPlugins, setAllPlugins] = useState<Plugin[]>([]);
   const [selectedMCPServers, setSelectedMCPServers] = useState<MCPServer[]>([]);
   const [allMCPServers, setAllMCPServers] = useState<MCPServer[]>([]);
+  const [selectedSkills, setSelectedSkills] = useState<Skill[]>([]);
+  const [allSkills, setAllSkills] = useState<Skill[]>([]);
   const [pluginDialogOpen, setPluginDialogOpen] = useState(false);
   const [mcpDialogOpen, setMcpDialogOpen] = useState(false);
+  const [skillDialogOpen, setSkillDialogOpen] = useState(false);
   const [tempSelectedPluginIds, setTempSelectedPluginIds] = useState<string[]>(
     [],
   );
   const [tempSelectedMCPIds, setTempSelectedMCPIds] = useState<string[]>([]);
+  const [tempSelectedSkillIds, setTempSelectedSkillIds] = useState<string[]>(
+    [],
+  );
 
   useEffect(() => {
     loadExtensions();
@@ -57,6 +71,7 @@ export default function PipelineExtension({
 
       setEnableAllPlugins(data.enable_all_plugins ?? true);
       setEnableAllMCPServers(data.enable_all_mcp_servers ?? true);
+      setEnableAllSkills(data.enable_all_skills ?? true);
 
       const boundPluginIds = new Set(
         data.bound_plugins.map((p) => `${p.author}/${p.name}`),
@@ -77,6 +92,15 @@ export default function PipelineExtension({
 
       setSelectedMCPServers(selectedMCP);
       setAllMCPServers(data.available_mcp_servers);
+
+      // Load Skills
+      const boundSkillNames = new Set(data.bound_skills || []);
+      const selectedSkill = (data.available_skills || []).filter((skill) =>
+        boundSkillNames.has(skill.name),
+      );
+
+      setSelectedSkills(selectedSkill);
+      setAllSkills(data.available_skills || []);
     } catch (error) {
       console.error('Failed to load extensions:', error);
       toast.error(t('pipelines.extensions.loadError'));
@@ -88,8 +112,10 @@ export default function PipelineExtension({
   const saveToBackend = async (
     plugins: Plugin[],
     mcpServers: MCPServer[],
+    skills: Skill[],
     newEnableAllPlugins?: boolean,
     newEnableAllMCPServers?: boolean,
+    newEnableAllSkills?: boolean,
   ) => {
     try {
       const boundPluginsArray = plugins.map((plugin) => {
@@ -101,6 +127,7 @@ export default function PipelineExtension({
       });
 
       const boundMCPServerIds = mcpServers.map((server) => server.uuid || '');
+      const boundSkillIds = skills.map((skill) => skill.name);
 
       await backendClient.updatePipelineExtensions(
         pipelineId,
@@ -108,6 +135,8 @@ export default function PipelineExtension({
         boundMCPServerIds,
         newEnableAllPlugins ?? enableAllPlugins,
         newEnableAllMCPServers ?? enableAllMCPServers,
+        boundSkillIds,
+        newEnableAllSkills ?? enableAllSkills,
       );
       toast.success(t('pipelines.extensions.saveSuccess'));
     } catch (error) {
@@ -123,13 +152,19 @@ export default function PipelineExtension({
       (p) => getPluginId(p) !== pluginId,
     );
     setSelectedPlugins(newPlugins);
-    await saveToBackend(newPlugins, selectedMCPServers);
+    await saveToBackend(newPlugins, selectedMCPServers, selectedSkills);
   };
 
   const handleRemoveMCPServer = async (serverUuid: string) => {
     const newServers = selectedMCPServers.filter((s) => s.uuid !== serverUuid);
     setSelectedMCPServers(newServers);
-    await saveToBackend(selectedPlugins, newServers);
+    await saveToBackend(selectedPlugins, newServers, selectedSkills);
+  };
+
+  const handleRemoveSkill = async (skillName: string) => {
+    const newSkills = selectedSkills.filter((s) => s.name !== skillName);
+    setSelectedSkills(newSkills);
+    await saveToBackend(selectedPlugins, selectedMCPServers, newSkills);
   };
 
   const handleOpenPluginDialog = () => {
@@ -142,6 +177,11 @@ export default function PipelineExtension({
     setMcpDialogOpen(true);
   };
 
+  const handleOpenSkillDialog = () => {
+    setTempSelectedSkillIds(selectedSkills.map((s) => s.name));
+    setSkillDialogOpen(true);
+  };
+
   const handleTogglePlugin = (pluginId: string) => {
     setTempSelectedPluginIds((prev) =>
       prev.includes(pluginId)
@@ -158,33 +198,45 @@ export default function PipelineExtension({
     );
   };
 
+  const handleToggleSkill = (skillName: string) => {
+    setTempSelectedSkillIds((prev) =>
+      prev.includes(skillName)
+        ? prev.filter((id) => id !== skillName)
+        : [...prev, skillName],
+    );
+  };
+
   const handleToggleAllPlugins = () => {
     if (tempSelectedPluginIds.length === allPlugins.length) {
-      // Deselect all
       setTempSelectedPluginIds([]);
     } else {
-      // Select all
       setTempSelectedPluginIds(allPlugins.map((p) => getPluginId(p)));
     }
   };
 
   const handleToggleAllMCPServers = () => {
     if (tempSelectedMCPIds.length === allMCPServers.length) {
-      // Deselect all
       setTempSelectedMCPIds([]);
     } else {
-      // Select all
       setTempSelectedMCPIds(allMCPServers.map((s) => s.uuid || ''));
     }
   };
 
+  const handleToggleAllSkills = () => {
+    if (tempSelectedSkillIds.length === allSkills.length) {
+      setTempSelectedSkillIds([]);
+    } else {
+      setTempSelectedSkillIds(allSkills.map((s) => s.name));
+    }
+  };
+
   const handleConfirmPluginSelection = async () => {
     const newSelected = allPlugins.filter((p) =>
       tempSelectedPluginIds.includes(getPluginId(p)),
     );
     setSelectedPlugins(newSelected);
     setPluginDialogOpen(false);
-    await saveToBackend(newSelected, selectedMCPServers);
+    await saveToBackend(newSelected, selectedMCPServers, selectedSkills);
   };
 
   const handleConfirmMCPSelection = async () => {
@@ -193,7 +245,16 @@ export default function PipelineExtension({
     );
     setSelectedMCPServers(newSelected);
     setMcpDialogOpen(false);
-    await saveToBackend(selectedPlugins, newSelected);
+    await saveToBackend(selectedPlugins, newSelected, selectedSkills);
+  };
+
+  const handleConfirmSkillSelection = async () => {
+    const newSelected = allSkills.filter((s) =>
+      tempSelectedSkillIds.includes(s.name),
+    );
+    setSelectedSkills(newSelected);
+    setSkillDialogOpen(false);
+    await saveToBackend(selectedPlugins, selectedMCPServers, newSelected);
   };
 
   const handleToggleEnableAllPlugins = async (checked: boolean) => {
@@ -201,8 +262,10 @@ export default function PipelineExtension({
     await saveToBackend(
       selectedPlugins,
       selectedMCPServers,
+      selectedSkills,
       checked,
       undefined,
+      undefined,
     );
   };
 
@@ -211,6 +274,20 @@ export default function PipelineExtension({
     await saveToBackend(
       selectedPlugins,
       selectedMCPServers,
+      selectedSkills,
+      undefined,
+      checked,
+      undefined,
+    );
+  };
+
+  const handleToggleEnableAllSkills = async (checked: boolean) => {
+    setEnableAllSkills(checked);
+    await saveToBackend(
+      selectedPlugins,
+      selectedMCPServers,
+      selectedSkills,
+      undefined,
       undefined,
       checked,
     );
@@ -432,6 +509,88 @@ export default function PipelineExtension({
         </Button>
       </div>
 
+      {/* Skills Section */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-foreground">
+            {t('pipelines.extensions.skillsTitle')}
+          </h3>
+          <div className="flex items-center gap-2">
+            <Label
+              htmlFor="enable-all-skills"
+              className="text-sm font-normal cursor-pointer"
+            >
+              {t('pipelines.extensions.enableAllSkills')}
+            </Label>
+            <Switch
+              id="enable-all-skills"
+              checked={enableAllSkills}
+              onCheckedChange={handleToggleEnableAllSkills}
+              disabled={!boxAvailable}
+            />
+          </div>
+        </div>
+        {!boxAvailable && (
+          <BoxUnavailableNotice hint={boxHint} reason={boxReason} />
+        )}
+        <div className="space-y-2">
+          {enableAllSkills ? (
+            <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/30">
+              <p className="text-sm text-muted-foreground">
+                {t('pipelines.extensions.allSkillsEnabled')}
+              </p>
+            </div>
+          ) : selectedSkills.length === 0 ? (
+            <div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-border">
+              <p className="text-sm text-muted-foreground">
+                {t('pipelines.extensions.noSkillsSelected')}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {selectedSkills.map((skill) => (
+                <div
+                  key={skill.name}
+                  className="flex items-center justify-between rounded-lg border p-3 hover:bg-accent"
+                >
+                  <div className="flex-1 flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
+                      <Sparkles className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium">
+                        {skill.display_name || skill.name}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {skill.description}
+                      </div>
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveSkill(skill.name)}
+                    disabled={!boxAvailable}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <Button
+          onClick={handleOpenSkillDialog}
+          variant="outline"
+          className="w-full"
+          disabled={enableAllSkills || !boxAvailable}
+        >
+          <Plus className="mr-2 h-4 w-4" />
+          {t('pipelines.extensions.addSkill')}
+        </Button>
+      </div>
+
       {/* Plugin Selection Dialog */}
       <Dialog open={pluginDialogOpen} onOpenChange={setPluginDialogOpen}>
         <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
@@ -620,6 +779,73 @@ export default function PipelineExtension({
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Skill Selection Dialog */}
+      <Dialog open={skillDialogOpen} onOpenChange={setSkillDialogOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
+          <DialogHeader>
+            <DialogTitle>{t('pipelines.extensions.selectSkills')}</DialogTitle>
+          </DialogHeader>
+          {allSkills.length > 0 && (
+            <div
+              className="flex items-center gap-3 px-1 py-2 border-b cursor-pointer"
+              onClick={handleToggleAllSkills}
+            >
+              <Checkbox
+                checked={
+                  tempSelectedSkillIds.length === allSkills.length &&
+                  allSkills.length > 0
+                }
+                onCheckedChange={handleToggleAllSkills}
+              />
+              <span className="text-sm font-medium">
+                {t('pipelines.extensions.selectAll')}
+              </span>
+            </div>
+          )}
+          <div className="flex-1 overflow-y-auto space-y-2 pr-2">
+            {allSkills.length === 0 ? (
+              <div className="flex h-full items-center justify-center">
+                <p className="text-sm text-muted-foreground">
+                  {t('pipelines.extensions.noSkillsAvailable')}
+                </p>
+              </div>
+            ) : (
+              allSkills.map((skill) => {
+                const isSelected = tempSelectedSkillIds.includes(skill.name);
+                return (
+                  <div
+                    key={skill.name}
+                    className="flex items-center gap-3 rounded-lg border p-3 hover:bg-accent cursor-pointer"
+                    onClick={() => handleToggleSkill(skill.name)}
+                  >
+                    <Checkbox checked={isSelected} />
+                    <div className="w-10 h-10 rounded-lg border bg-muted flex items-center justify-center flex-shrink-0">
+                      <Sparkles className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium">
+                        {skill.display_name || skill.name}
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        {skill.description}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSkillDialogOpen(false)}>
+              {t('common.cancel')}
+            </Button>
+            <Button onClick={handleConfirmSkillSelection}>
+              {t('common.confirm')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -7,6 +7,7 @@ import {
 } from '@/app/infra/entities/pipeline';
 import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
 import N8nAuthFormComponent from '@/app/home/components/dynamic-form/N8nAuthFormComponent';
+import { useBoxStatus } from '@/app/infra/hooks/useBoxStatus';
 import { Button } from '@/components/ui/button';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -75,6 +76,7 @@ export default function PipelineFormComponent({
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const [showCopyConfirm, setShowCopyConfirm] = useState(false);
   const [isDefaultPipeline, setIsDefaultPipeline] = useState<boolean>(false);
+  const { available: boxAvailable } = useBoxStatus();
 
   const formSchema = isEditMode
     ? z.object({
@@ -185,6 +187,10 @@ export default function PipelineFormComponent({
     if (!isEditMode || !savedSnapshotRef.current) return false;
     return JSON.stringify(watchedValues) !== savedSnapshotRef.current;
   }, [isEditMode, watchedValues]);
+  // Keep a ref so that non-reactive callbacks (handleDynamicFormEmit) can
+  // read the latest dirty state without stale closures.
+  const hasUnsavedChangesRef = useRef(hasUnsavedChanges);
+  hasUnsavedChangesRef.current = hasUnsavedChanges;
 
   // Notify parent when dirty state changes
   useEffect(() => {
@@ -304,6 +310,9 @@ export default function PipelineFormComponent({
   // Called from DynamicFormComponent/N8nAuthFormComponent onSubmit callbacks.
   // On the first emission for a stage (mount-time default filling), the
   // snapshot is synchronously re-captured so that hasUnsavedChanges stays false.
+  // However, if the form is already dirty (the user has made real changes),
+  // we must NOT re-capture the snapshot — otherwise we would silently absorb
+  // those real changes and flip hasUnsavedChanges back to false.
   function handleDynamicFormEmit(
     formName: keyof FormValues,
     stageName: string,
@@ -322,9 +331,14 @@ export default function PipelineFormComponent({
 
     if (isFirstEmission) {
       initializedStagesRef.current.add(stageKey);
-      // Synchronously re-capture snapshot so that the useMemo comparison
-      // in the same render cycle still returns false.
-      savedSnapshotRef.current = JSON.stringify(form.getValues());
+      // Only re-capture the snapshot when the form has no other pending
+      // changes.  If the user already modified something (e.g. switched
+      // runner), the snapshot must remain at the last-saved state so that
+      // hasUnsavedChanges stays true.
+      const currentSnapshot = JSON.stringify(form.getValues());
+      if (savedSnapshotRef.current === '' || !hasUnsavedChangesRef.current) {
+        savedSnapshotRef.current = currentSnapshot;
+      }
     }
   }
 
@@ -401,6 +415,16 @@ export default function PipelineFormComponent({
       }
     }
 
+    // Box availability is exposed through ``systemContext.__system.box_available``
+    // so individual yaml-driven fields (e.g. ``box-session-id-template``) can
+    // opt-in via ``disable_if`` + ``disabled_tooltip`` rather than every page
+    // hard-coding a banner. Field-level gating keeps unrelated fields
+    // untouched.
+    const stageSystemContext =
+      stage.name === 'local-agent'
+        ? { box_available: boxAvailable }
+        : undefined;
+
     return (
       <Card key={stage.name}>
         <CardHeader>
@@ -421,6 +445,7 @@ export default function PipelineFormComponent({
             onSubmit={(values) => {
               handleDynamicFormEmit(formName, stage.name, values);
             }}
+            systemContext={stageSystemContext}
           />
         </CardContent>
       </Card>

web/src/app/home/plugins/PluginDetailContent.tsx

@@ -1,10 +1,34 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import PluginForm from '@/app/home/plugins/components/plugin-installed/plugin-form/PluginForm';
 import PluginReadme from '@/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme';
+import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
 import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
 import { useTranslation } from 'react-i18next';
 import { Badge } from '@/components/ui/badge';
-import { Bug } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { Plugin } from '@/app/infra/entities/plugin';
+import { extractI18nObject } from '@/i18n/I18nProvider';
+import { useAsyncTask, AsyncTaskStatus } from '@/hooks/useAsyncTask';
+import { Bug, Puzzle, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
 
 /**
  * Plugin detail page content.
@@ -12,7 +36,11 @@ import { Bug } from 'lucide-react';
  */
 export default function PluginDetailContent({ id }: { id: string }) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const { plugins, setDetailEntityName, refreshPlugins } = useSidebarData();
+  const [pluginInfo, setPluginInfo] = useState<Plugin | null>(null);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deleteData, setDeleteData] = useState(false);
 
   // Parse "author/name" composite key
   const slashIndex = id.indexOf('/');
@@ -20,6 +48,23 @@ export default function PluginDetailContent({ id }: { id: string }) {
   const pluginName = slashIndex >= 0 ? id.substring(slashIndex + 1) : id;
 
   const plugin = plugins.find((p) => p.id === id);
+  const title =
+    pluginInfo?.manifest.manifest.metadata.label &&
+    extractI18nObject(pluginInfo.manifest.manifest.metadata.label)
+      ? extractI18nObject(pluginInfo.manifest.manifest.metadata.label)
+      : plugin?.name || `${pluginAuthor}/${pluginName}`;
+  const description = pluginInfo?.manifest.manifest.metadata.description
+    ? extractI18nObject(pluginInfo.manifest.manifest.metadata.description)
+    : plugin?.description;
+
+  const asyncTask = useAsyncTask({
+    onSuccess: () => {
+      toast.success(t('plugins.deleteSuccess'));
+      setShowDeleteConfirm(false);
+      void refreshPlugins();
+      navigate('/home/extensions');
+    },
+  });
 
   // Set breadcrumb entity name
   useEffect(() => {
@@ -27,6 +72,18 @@ export default function PluginDetailContent({ id }: { id: string }) {
     return () => setDetailEntityName(null);
   }, [plugin, pluginAuthor, pluginName, setDetailEntityName]);
 
+  useEffect(() => {
+    let cancelled = false;
+    httpClient.getPlugin(pluginAuthor, pluginName).then((res) => {
+      if (!cancelled) {
+        setPluginInfo(res.plugin);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pluginAuthor, pluginName]);
+
   function handleFormSubmit(timeout?: number) {
     if (timeout) {
       setTimeout(() => {
@@ -37,60 +94,199 @@ export default function PluginDetailContent({ id }: { id: string }) {
     }
   }
 
+  function executeDelete() {
+    httpClient
+      .removePlugin(pluginAuthor, pluginName, deleteData)
+      .then((res) => {
+        asyncTask.startTask(res.task_id);
+      })
+      .catch((error) => {
+        toast.error(t('plugins.deleteError') + error.message);
+      });
+  }
+
+  const sourceBadge = plugin?.debug ? (
+    <Badge
+      variant="outline"
+      className="shrink-0 border-orange-400 text-[0.7rem] text-orange-400"
+    >
+      <Bug className="size-3.5" />
+      {t('plugins.debugging')}
+    </Badge>
+  ) : plugin?.installSource === 'github' ? (
+    <Badge
+      variant="outline"
+      className="shrink-0 border-blue-400 text-[0.7rem] text-blue-400"
+    >
+      {t('plugins.fromGithub')}
+    </Badge>
+  ) : plugin?.installSource === 'local' ? (
+    <Badge
+      variant="outline"
+      className="shrink-0 border-green-400 text-[0.7rem] text-green-400"
+    >
+      {t('plugins.fromLocal')}
+    </Badge>
+  ) : plugin?.installSource === 'marketplace' ? (
+    <Badge
+      variant="outline"
+      className="shrink-0 border-purple-400 text-[0.7rem] text-purple-400"
+    >
+      {t('plugins.fromMarketplace')}
+    </Badge>
+  ) : null;
+
+  const componentBadges = pluginInfo && (
+    <PluginComponentList
+      components={pluginInfo.components.reduce<Record<string, number>>(
+        (acc, component) => {
+          const kind = component.manifest.manifest.kind;
+          acc[kind] = (acc[kind] ?? 0) + 1;
+          return acc;
+        },
+        {},
+      )}
+      showComponentName
+      showTitle={false}
+      useBadge
+      t={t}
+    />
+  );
+
+  const dangerZone = (
+    <Card className="border-destructive/50">
+      <CardHeader>
+        <CardTitle className="text-destructive">
+          {t('plugins.dangerZone')}
+        </CardTitle>
+        <CardDescription>{t('plugins.dangerZoneDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-medium">{t('plugins.deletePlugin')}</p>
+            <p className="text-sm text-muted-foreground">
+              {t('plugins.confirmDeletePlugin', {
+                author: pluginAuthor,
+                name: pluginName,
+              })}
+            </p>
+          </div>
+          <Button
+            type="button"
+            variant="destructive"
+            size="sm"
+            onClick={() => setShowDeleteConfirm(true)}
+            className="shrink-0"
+          >
+            <Trash2 className="mr-1.5 size-4" />
+            {t('common.delete')}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
   return (
-    <div className="flex h-full flex-col">
-      <div className="flex items-center gap-3 pb-4 shrink-0">
-        <h1 className="text-xl font-semibold">
-          {pluginAuthor}/{pluginName}
-        </h1>
-        {plugin?.debug ? (
-          <Badge
-            variant="outline"
-            className="text-[0.7rem] border-orange-400 text-orange-400"
-          >
-            <Bug className="size-3.5" />
-            {t('plugins.debugging')}
-          </Badge>
-        ) : plugin?.installSource === 'github' ? (
-          <Badge
-            variant="outline"
-            className="text-[0.7rem] border-blue-400 text-blue-400"
-          >
-            {t('plugins.fromGithub')}
-          </Badge>
-        ) : plugin?.installSource === 'local' ? (
-          <Badge
-            variant="outline"
-            className="text-[0.7rem] border-green-400 text-green-400"
-          >
-            {t('plugins.fromLocal')}
-          </Badge>
-        ) : plugin?.installSource === 'marketplace' ? (
-          <Badge
-            variant="outline"
-            className="text-[0.7rem] border-purple-400 text-purple-400"
-          >
-            {t('plugins.fromMarketplace')}
-          </Badge>
-        ) : null}
+    <>
+      <div className="flex h-full flex-col">
+        <div className="flex shrink-0 flex-col gap-2 pb-4">
+          <div className="flex min-w-0 flex-wrap items-center gap-3">
+            <h1 className="truncate text-xl font-semibold">{title}</h1>
+            <Badge variant="outline" className="shrink-0 text-[0.7rem]">
+              <Puzzle className="size-3.5" />
+              {t('market.typePlugin')}
+            </Badge>
+            {sourceBadge}
+            {componentBadges}
+          </div>
+          {description && (
+            <p className="line-clamp-2 text-sm text-muted-foreground">
+              {description}
+            </p>
+          )}
+        </div>
+
+        <div className="flex min-h-0 max-w-full flex-1 flex-col gap-6 overflow-y-auto md:flex-row md:overflow-hidden">
+          <div className="min-w-0 max-w-full space-y-4 pb-6 md:min-h-0 md:w-[380px] md:flex-shrink-0 md:overflow-y-auto md:overflow-x-hidden xl:w-[420px]">
+            <PluginForm
+              pluginAuthor={pluginAuthor}
+              pluginName={pluginName}
+              onFormSubmit={handleFormSubmit}
+            />
+            {dangerZone}
+          </div>
+          <div className="hidden w-px shrink-0 bg-border md:block" />
+          <div className="min-w-0 flex-1 pb-6 md:min-h-0 md:overflow-y-auto md:overflow-x-hidden">
+            <PluginReadme pluginAuthor={pluginAuthor} pluginName={pluginName} />
+          </div>
+        </div>
       </div>
 
-      <div className="flex flex-1 flex-col md:flex-row overflow-hidden min-h-0 gap-6 max-w-full">
-        {/* Left side - Config */}
-        <div className="md:w-[380px] md:flex-shrink-0 overflow-y-auto overflow-x-hidden">
-          <PluginForm
-            pluginAuthor={pluginAuthor}
-            pluginName={pluginName}
-            onFormSubmit={handleFormSubmit}
-          />
-        </div>
-        {/* Divider */}
-        <div className="hidden md:block w-px bg-border shrink-0" />
-        {/* Right side - Readme */}
-        <div className="flex-1 overflow-y-auto overflow-x-hidden min-w-0">
-          <PluginReadme pluginAuthor={pluginAuthor} pluginName={pluginName} />
-        </div>
-      </div>
-    </div>
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('plugins.deleteConfirm')}</DialogTitle>
+            <DialogDescription>
+              {asyncTask.status === AsyncTaskStatus.RUNNING
+                ? t('plugins.deleting')
+                : t('plugins.confirmDeletePlugin', {
+                    author: pluginAuthor,
+                    name: pluginName,
+                  })}
+            </DialogDescription>
+          </DialogHeader>
+          {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="delete-plugin-data"
+                checked={deleteData}
+                onCheckedChange={(checked) => setDeleteData(checked === true)}
+              />
+              <label
+                htmlFor="delete-plugin-data"
+                className="cursor-pointer text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              >
+                {t('plugins.deleteDataCheckbox')}
+              </label>
+            </div>
+          )}
+          {asyncTask.status === AsyncTaskStatus.ERROR && (
+            <div className="text-sm text-destructive">{asyncTask.error}</div>
+          )}
+          <DialogFooter>
+            {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
+              <Button
+                variant="outline"
+                onClick={() => setShowDeleteConfirm(false)}
+              >
+                {t('common.cancel')}
+              </Button>
+            )}
+            {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
+              <Button variant="destructive" onClick={executeDelete}>
+                {t('common.confirmDelete')}
+              </Button>
+            )}
+            {asyncTask.status === AsyncTaskStatus.RUNNING && (
+              <Button variant="destructive" disabled>
+                {t('plugins.deleting')}
+              </Button>
+            )}
+            {asyncTask.status === AsyncTaskStatus.ERROR && (
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setShowDeleteConfirm(false);
+                  asyncTask.reset();
+                }}
+              >
+                {t('plugins.close')}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }

web/src/app/home/plugins/components/PluginLocalPreviewPanel.tsx

@@ -0,0 +1,203 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { Archive, CheckCircle2, Loader2, Package } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { extractI18nObject } from '@/i18n/I18nProvider';
+import { usePluginInstallTasks } from '@/app/home/plugins/components/plugin-install-task';
+import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
+
+type PluginLocalPreview = Awaited<
+  ReturnType<typeof httpClient.previewPluginInstallFromLocal>
+>;
+
+interface PluginLocalPreviewPanelProps {
+  file: File;
+  onInstallStarted?: () => void;
+  onCancel?: () => void;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
+}
+
+export default function PluginLocalPreviewPanel({
+  file,
+  onInstallStarted,
+  onCancel,
+}: PluginLocalPreviewPanelProps) {
+  const { t } = useTranslation();
+  const { addTask, setSelectedTaskId } = usePluginInstallTasks();
+  const [preview, setPreview] = useState<PluginLocalPreview | null>(null);
+  const [previewing, setPreviewing] = useState(false);
+  const [installing, setInstalling] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const loadPreview = useCallback(async () => {
+    setPreviewing(true);
+    setPreview(null);
+    setErrorMessage(null);
+    try {
+      const result = await httpClient.previewPluginInstallFromLocal(file);
+      setPreview(result);
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : typeof error === 'object' && error && 'msg' in error
+            ? String((error as { msg?: string }).msg || '')
+            : String(error);
+      setErrorMessage(message || t('plugins.localPreview.failed'));
+    } finally {
+      setPreviewing(false);
+    }
+  }, [file, t]);
+
+  useEffect(() => {
+    void loadPreview();
+  }, [loadPreview]);
+
+  async function handleInstall() {
+    setInstalling(true);
+    setErrorMessage(null);
+    try {
+      const resp = await httpClient.installPluginFromLocal(file);
+      const taskId = resp.task_id;
+      const taskKey = `local-${taskId}`;
+      const pluginName =
+        preview?.metadata.label && extractI18nObject(preview.metadata.label)
+          ? extractI18nObject(preview.metadata.label)
+          : preview?.metadata.name || file.name;
+
+      addTask({
+        taskId,
+        pluginName,
+        source: 'local',
+        extensionType: 'plugin',
+        fileSize: file.size,
+      });
+      setSelectedTaskId(taskKey);
+      toast.success(t('plugins.installSuccess'));
+      onInstallStarted?.();
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : typeof error === 'object' && error && 'msg' in error
+            ? String((error as { msg?: string }).msg || '')
+            : String(error);
+      setErrorMessage(message || t('plugins.installFailed'));
+    } finally {
+      setInstalling(false);
+    }
+  }
+
+  const metadata = preview?.metadata;
+  const label = metadata?.label ? extractI18nObject(metadata.label) : '';
+  const description = metadata?.description
+    ? extractI18nObject(metadata.description)
+    : '';
+  const componentCounts = preview?.component_counts || {};
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start gap-3 rounded-md bg-muted/40 px-3 py-3">
+        <div className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">
+          {previewing ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            <Archive className="size-4" />
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium">
+            {previewing
+              ? t('plugins.localPreview.unpacking')
+              : t('plugins.localPreview.unpackComplete')}
+          </div>
+          <div className="mt-1 break-all text-xs text-muted-foreground">
+            {file.name} · {formatFileSize(file.size)}
+          </div>
+        </div>
+      </div>
+
+      {preview && (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <Package className="size-4" />
+            {t('plugins.localPreview.pluginInfo')}
+          </div>
+          <div className="space-y-2 text-sm">
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-muted-foreground">
+                {t('plugins.localPreview.name')}
+              </span>
+              <span className="truncate font-medium">
+                {label || metadata?.name || '-'}
+              </span>
+            </div>
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-muted-foreground">
+                {t('plugins.localPreview.author')}
+              </span>
+              <span className="truncate">{metadata?.author || '-'}</span>
+            </div>
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-muted-foreground">
+                {t('plugins.localPreview.version')}
+              </span>
+              <span>{metadata?.version || '-'}</span>
+            </div>
+          </div>
+          {description && (
+            <p className="text-sm leading-6 text-muted-foreground">
+              {description}
+            </p>
+          )}
+          <div className="flex flex-wrap items-center gap-2 text-sm">
+            <PluginComponentList
+              components={componentCounts}
+              showComponentName
+              showTitle
+              useBadge
+              t={t}
+            />
+          </div>
+        </div>
+      )}
+
+      {preview && (
+        <div className="flex items-center gap-2 text-sm text-green-700 dark:text-green-300">
+          <CheckCircle2 className="size-4" />
+          {t('plugins.localPreview.ready')}
+        </div>
+      )}
+
+      {errorMessage && (
+        <div className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          {errorMessage}
+        </div>
+      )}
+
+      <div className="flex justify-end gap-2">
+        {onCancel && (
+          <Button variant="outline" onClick={onCancel} disabled={installing}>
+            {t('common.cancel')}
+          </Button>
+        )}
+        <Button
+          type="button"
+          onClick={handleInstall}
+          disabled={!preview || previewing || installing}
+        >
+          {installing ? t('plugins.installing') : t('plugins.confirmInstall')}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/app/home/plugins/components/plugin-install-task/PluginInstallProgressDialog.tsx

@@ -10,8 +10,8 @@ import { Button } from '@/components/ui/button';
 import {
   Download,
   Package,
-  Settings,
-  Rocket,
+  Server,
+  BookOpen,
   CheckCircle2,
   XCircle,
   Loader2,
@@ -39,16 +39,6 @@ const STAGES: {
     icon: Package,
     i18nKey: 'plugins.installProgress.installingDeps',
   },
-  {
-    key: InstallStage.INITIALIZING,
-    icon: Settings,
-    i18nKey: 'plugins.installProgress.initializing',
-  },
-  {
-    key: InstallStage.LAUNCHING,
-    icon: Rocket,
-    i18nKey: 'plugins.installProgress.launching',
-  },
 ];
 
 function getStageIndex(stage: InstallStage): number {
@@ -183,6 +173,15 @@ function TaskProgressContent({ task }: { task: PluginInstallTask }) {
   const isDone = task.stage === InstallStage.DONE;
   const isError = task.stage === InstallStage.ERROR;
 
+  // MCP / Skill don't have the plugin's download + dependency-install stages;
+  // show a single "installing → done/failed" row instead of plugin steps.
+  const isPlugin = task.extensionType === 'plugin';
+  const simpleIcon = task.extensionType === 'mcp' ? Server : BookOpen;
+  const simpleInstallingLabel =
+    task.extensionType === 'mcp'
+      ? t('addExtension.installStage.mcpInstalling')
+      : t('addExtension.installStage.skillInstalling');
+
   /** Build detail node for a stage */
   const getStageDetail = (
     stageKey: InstallStage,
@@ -319,42 +318,60 @@ function TaskProgressContent({ task }: { task: PluginInstallTask }) {
 
       {/* Stage display */}
       <div className="space-y-1.5">
-        {isDone
-          ? /* When done: show all stages with completed style */
-            STAGES.map((stageConfig) => (
-              <StageRow
-                key={stageConfig.key}
-                icon={stageConfig.icon}
-                label={t(stageConfig.i18nKey)}
-                isActive={false}
-                isCompleted={true}
-                isError={false}
-                detail={getStageDetail(stageConfig.key, true)}
-              />
-            ))
-          : isError
-            ? /* Error: show the failed stage */
-              currentStageIndex >= 0 && (
-                <StageRow
-                  icon={STAGES[currentStageIndex].icon}
-                  label={t(STAGES[currentStageIndex].i18nKey)}
-                  isActive={true}
-                  isCompleted={false}
-                  isError={true}
-                  detail={task.error}
-                />
-              )
-            : /* In progress: only show the current active stage */
-              currentStageIndex >= 0 && (
-                <StageRow
-                  icon={STAGES[currentStageIndex].icon}
-                  label={t(STAGES[currentStageIndex].i18nKey)}
-                  isActive={true}
-                  isCompleted={false}
-                  isError={false}
-                  detail={getStageDetail(STAGES[currentStageIndex].key, false)}
-                />
-              )}
+        {!isPlugin ? (
+          /* MCP / Skill: single installing → done/failed row */
+          <StageRow
+            icon={simpleIcon}
+            label={
+              isDone
+                ? t('addExtension.installStage.installed')
+                : isError
+                  ? t('plugins.installProgress.failed')
+                  : simpleInstallingLabel
+            }
+            isActive={!isDone}
+            isCompleted={isDone}
+            isError={isError}
+            detail={isError ? task.error : undefined}
+          />
+        ) : isDone ? (
+          /* When done: show all stages with completed style */
+          STAGES.map((stageConfig) => (
+            <StageRow
+              key={stageConfig.key}
+              icon={stageConfig.icon}
+              label={t(stageConfig.i18nKey)}
+              isActive={false}
+              isCompleted={true}
+              isError={false}
+              detail={getStageDetail(stageConfig.key, true)}
+            />
+          ))
+        ) : isError ? (
+          /* Error: show the failed stage */
+          currentStageIndex >= 0 && (
+            <StageRow
+              icon={STAGES[currentStageIndex].icon}
+              label={t(STAGES[currentStageIndex].i18nKey)}
+              isActive={true}
+              isCompleted={false}
+              isError={true}
+              detail={task.error}
+            />
+          )
+        ) : (
+          /* In progress: only show the current active stage */
+          currentStageIndex >= 0 && (
+            <StageRow
+              icon={STAGES[currentStageIndex].icon}
+              label={t(STAGES[currentStageIndex].i18nKey)}
+              isActive={true}
+              isCompleted={false}
+              isError={false}
+              detail={getStageDetail(STAGES[currentStageIndex].key, false)}
+            />
+          )
+        )}
       </div>
 
       {/* Done banner */}

web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskContext.tsx

@@ -28,6 +28,7 @@ export interface PluginInstallTask {
   source: 'github' | 'marketplace' | 'local';
   stage: InstallStage;
   overallProgress: number; // 0-100
+  extensionType: 'plugin' | 'mcp' | 'skill'; // type of extension being installed
   fileSize?: number; // bytes, if known
   // Download progress
   downloadCurrent?: number; // bytes downloaded so far
@@ -57,6 +58,7 @@ interface PluginInstallTaskContextValue {
     taskId: number;
     pluginName: string;
     source: 'github' | 'marketplace' | 'local';
+    extensionType: 'plugin' | 'mcp' | 'skill';
     fileSize?: number;
   }) => void;
   removeTask: (id: string) => void;
@@ -91,8 +93,8 @@ function mapActionToStage(action: string): InstallStage {
   if (lower.includes('dependencies') || lower.includes('requirements'))
     return InstallStage.INSTALLING_DEPS;
   if (lower.includes('initializ') || lower.includes('setting'))
-    return InstallStage.INITIALIZING;
-  if (lower.includes('launch')) return InstallStage.LAUNCHING;
+    return InstallStage.INSTALLING_DEPS;
+  if (lower.includes('launch')) return InstallStage.INSTALLING_DEPS;
   if (lower.includes('installed') || lower.includes('complete'))
     return InstallStage.DONE;
   return InstallStage.DOWNLOADING;
@@ -106,7 +108,7 @@ function stageToProgress(stage: InstallStage): number {
     case InstallStage.DOWNLOADING:
       return 10;
     case InstallStage.INSTALLING_DEPS:
-      return 40;
+      return 70;
     case InstallStage.INITIALIZING:
       return 70;
     case InstallStage.LAUNCHING:
@@ -135,7 +137,11 @@ function extractSourceFromName(
  * Check if a backend task name is a plugin install task.
  */
 function isPluginInstallTask(name: string): boolean {
-  return name.startsWith('plugin-install-');
+  return (
+    name.startsWith('plugin-install-') ||
+    name.startsWith('mcp-install-') ||
+    name.startsWith('skill-install-')
+  );
 }
 
 /**
@@ -169,13 +175,21 @@ function asyncTaskToPluginInstallTask(task: AsyncTask): PluginInstallTask {
     overallProgress = Math.min(95, stageToProgress(stage));
   }
 
-  const pluginName = str(md.plugin_name) || task.label || `${source} plugin`;
+  const pluginName = str(md.plugin_name) || task.label || `${source} extension`;
+
+  let extensionType: 'plugin' | 'mcp' | 'skill' = 'plugin';
+  if (task.name.startsWith('mcp-install-')) {
+    extensionType = 'mcp';
+  } else if (task.name.startsWith('skill-install-')) {
+    extensionType = 'skill';
+  }
 
   return {
     id: `${source}-${task.id}`,
     taskId: task.id,
     pluginName,
     source,
+    extensionType,
     stage,
     overallProgress,
     downloadCurrent: num(md.download_current),
@@ -212,8 +226,9 @@ export function PluginInstallTaskProvider({
 
   // Cleanup all intervals on unmount
   useEffect(() => {
+    const intervals = intervalRefs.current;
     return () => {
-      intervalRefs.current.forEach((interval) => {
+      intervals.forEach((interval) => {
         clearInterval(interval);
       });
       if (syncIntervalRef.current) clearInterval(syncIntervalRef.current);
@@ -395,6 +410,7 @@ export function PluginInstallTaskProvider({
                 converted.startedAt = existing.startedAt;
                 converted.pluginName = existing.pluginName;
                 converted.fileSize = existing.fileSize;
+                converted.extensionType = existing.extensionType;
                 updatedTasks[idx] = converted;
               }
             }
@@ -408,20 +424,39 @@ export function PluginInstallTaskProvider({
     }
   }, [pollTask]);
 
-  // Initial sync on mount + periodic sync every 3s
+  // Initial sync on mount to recover any orphaned tasks
+  const syncOnMountRef = useRef(syncTasksFromBackend);
+  syncOnMountRef.current = syncTasksFromBackend;
   useEffect(() => {
-    syncTasksFromBackend();
-    syncIntervalRef.current = setInterval(syncTasksFromBackend, 3000);
+    syncOnMountRef.current();
+  }, []);
+
+  // Only poll periodically when there are active (non-terminal) tasks
+  useEffect(() => {
+    const hasActiveTasks = tasks.some(
+      (t) => t.stage !== InstallStage.DONE && t.stage !== InstallStage.ERROR,
+    );
+
+    if (hasActiveTasks) {
+      syncIntervalRef.current = setInterval(syncTasksFromBackend, 3000);
+    } else {
+      if (syncIntervalRef.current) {
+        clearInterval(syncIntervalRef.current);
+        syncIntervalRef.current = null;
+      }
+    }
+
     return () => {
       if (syncIntervalRef.current) clearInterval(syncIntervalRef.current);
     };
-  }, [syncTasksFromBackend]);
+  }, [tasks, syncTasksFromBackend]);
 
   const addTask = useCallback(
     (params: {
       taskId: number;
       pluginName: string;
       source: 'github' | 'marketplace' | 'local';
+      extensionType: 'plugin' | 'mcp' | 'skill';
       fileSize?: number;
     }) => {
       const taskKey = `${params.source}-${params.taskId}`;
@@ -434,6 +469,7 @@ export function PluginInstallTaskProvider({
         taskId: params.taskId,
         pluginName: params.pluginName,
         source: params.source,
+        extensionType: params.extensionType,
         stage: InstallStage.DOWNLOADING,
         overallProgress: 5,
         fileSize: params.fileSize,

web/src/app/home/plugins/components/plugin-install-task/PluginInstallTaskQueue.tsx

@@ -4,13 +4,14 @@ import { Progress } from '@/components/ui/progress';
 import {
   Download,
   Package,
-  Settings,
-  Rocket,
   CheckCircle2,
   XCircle,
   Loader2,
   X,
   ListTodo,
+  Wrench,
+  AudioWaveform,
+  Book,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
@@ -29,12 +30,16 @@ import { cn } from '@/lib/utils';
 const STAGE_ICONS: Record<string, React.ElementType> = {
   [InstallStage.DOWNLOADING]: Download,
   [InstallStage.INSTALLING_DEPS]: Package,
-  [InstallStage.INITIALIZING]: Settings,
-  [InstallStage.LAUNCHING]: Rocket,
   [InstallStage.DONE]: CheckCircle2,
   [InstallStage.ERROR]: XCircle,
 };
 
+const EXTENSION_TYPE_ICONS: Record<string, React.ElementType> = {
+  plugin: Wrench,
+  mcp: AudioWaveform,
+  skill: Book,
+};
+
 function TaskQueueItem({
   task,
   onClick,
@@ -49,6 +54,40 @@ function TaskQueueItem({
   const isError = task.stage === InstallStage.ERROR;
   const isRunning = !isDone && !isError;
   const StageIcon = STAGE_ICONS[task.stage] || Download;
+  const TypeIcon = EXTENSION_TYPE_ICONS[task.extensionType] || Wrench;
+
+  const getTypeBadgeClass = () => {
+    switch (task.extensionType) {
+      case 'mcp':
+        return 'border-sky-500 text-sky-600 dark:border-sky-400 dark:text-sky-300';
+      case 'skill':
+        return 'border-emerald-500 text-emerald-600 dark:border-emerald-400 dark:text-emerald-300';
+      default:
+        return 'border-violet-500 text-violet-600 dark:border-violet-400 dark:text-violet-300';
+    }
+  };
+
+  const getTypeLabel = () => {
+    switch (task.extensionType) {
+      case 'mcp':
+        return 'MCP';
+      case 'skill':
+        return t('common.skill');
+      default:
+        return t('market.typePlugin');
+    }
+  };
+
+  const getInstallCompleteMessage = () => {
+    switch (task.extensionType) {
+      case 'mcp':
+        return t('plugins.installProgress.installCompleteMCP');
+      case 'skill':
+        return t('plugins.installProgress.installCompleteSkill');
+      default:
+        return t('plugins.installProgress.installCompletePlugin');
+    }
+  };
 
   const stageLabel = (() => {
     switch (task.stage) {
@@ -56,12 +95,10 @@ function TaskQueueItem({
         return t('plugins.installProgress.downloading');
       case InstallStage.INSTALLING_DEPS:
         return t('plugins.installProgress.installingDeps');
-      case InstallStage.INITIALIZING:
-        return t('plugins.installProgress.initializing');
-      case InstallStage.LAUNCHING:
-        return t('plugins.installProgress.launching');
       case InstallStage.DONE:
-        return t('plugins.installProgress.completed');
+        return isDone
+          ? getInstallCompleteMessage()
+          : t('plugins.installProgress.completed');
       case InstallStage.ERROR:
         return t('plugins.installProgress.failed');
       default:
@@ -93,7 +130,19 @@ function TaskQueueItem({
       </div>
 
       <div className="flex-1 min-w-0">
-        <div className="text-sm font-medium truncate">{task.pluginName}</div>
+        <div className="flex items-center gap-2">
+          <div className="text-sm font-medium truncate">{task.pluginName}</div>
+          <Badge
+            variant="outline"
+            className={cn(
+              'text-[0.6rem] px-1 py-0 flex-shrink-0',
+              getTypeBadgeClass(),
+            )}
+          >
+            <TypeIcon className="w-3 h-3 mr-0.5" />
+            {getTypeLabel()}
+          </Badge>
+        </div>
         <div className="flex items-center gap-2">
           <span className="text-xs text-muted-foreground">{stageLabel}</span>
           {isRunning && (
@@ -139,7 +188,7 @@ export default function PluginInstallTaskQueue() {
   return (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline" className="relative px-4 py-5 cursor-pointer">
+        <Button variant="outline" className="relative px-4 py-4 cursor-pointer">
           <ListTodo className="w-4 h-4 mr-2" />
           {t('plugins.installProgress.taskQueue')}
           {runningCount > 0 && (

web/src/app/home/plugins/components/plugin-installed/ExtensionCardComponent.tsx

@@ -0,0 +1,327 @@
+import { ExtensionCardVO, ExtensionType } from './ExtensionCardVO';
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { useTranslation } from 'react-i18next';
+import {
+  BugIcon,
+  ExternalLink,
+  Ellipsis,
+  Trash,
+  ArrowUp,
+  Server,
+  Sparkles,
+  Puzzle,
+} from 'lucide-react';
+import { getCloudServiceClientSync, systemInfo } from '@/app/infra/http';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+type ExtensionCardComponentProps = {
+  cardVO: ExtensionCardVO;
+  onCardClick: () => void;
+  onDeleteClick: (cardVO: ExtensionCardVO) => void;
+  onUpgradeClick?: (cardVO: ExtensionCardVO) => void;
+};
+
+export default function ExtensionCardComponent({
+  cardVO,
+  onCardClick,
+  onDeleteClick,
+  onUpgradeClick,
+}: ExtensionCardComponentProps) {
+  const { t } = useTranslation();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [iconFailed, setIconFailed] = useState(false);
+
+  const FallbackIcon =
+    cardVO.type === 'mcp'
+      ? Server
+      : cardVO.type === 'skill'
+        ? Sparkles
+        : Puzzle;
+  const iconSrc =
+    cardVO.iconURL || httpClient.getPluginIconURL(cardVO.author, cardVO.name);
+  const showFallback = iconFailed || !iconSrc;
+
+  const getTypeLabel = (type: ExtensionType) => {
+    switch (type) {
+      case 'mcp':
+        return 'MCP';
+      case 'skill':
+        return t('common.skill');
+      default:
+        return t('market.typePlugin');
+    }
+  };
+
+  const getTypeIcon = (type: ExtensionType) => {
+    switch (type) {
+      case 'mcp':
+        return Server;
+      case 'skill':
+        return Sparkles;
+      default:
+        return Puzzle;
+    }
+  };
+
+  const renderTypeBadge = (type: ExtensionType) => {
+    const TypeIcon = getTypeIcon(type);
+    return (
+      <Badge
+        variant="outline"
+        className="flex-shrink-0 gap-1.5 border-blue-200 bg-blue-50/60 text-[0.7rem] text-blue-700 dark:border-blue-500/40 dark:bg-blue-500/10 dark:text-blue-300"
+      >
+        <TypeIcon className="size-3.5" />
+        {getTypeLabel(type)}
+      </Badge>
+    );
+  };
+
+  const renderPluginContent = () => (
+    <>
+      <div className="text-[0.7rem] text-muted-foreground truncate w-full">
+        {cardVO.author} / {cardVO.name}
+      </div>
+      <div className="flex flex-row items-center justify-start gap-[0.4rem] flex-wrap max-w-full">
+        <div className="text-[1.2rem] text-foreground truncate max-w-[10rem]">
+          {cardVO.label}
+        </div>
+        <Badge variant="outline" className="text-[0.7rem] flex-shrink-0">
+          v{cardVO.version}
+        </Badge>
+        {renderTypeBadge(cardVO.type)}
+        {cardVO.debug && (
+          <Badge
+            variant="outline"
+            className="text-[0.7rem] border-orange-400 text-orange-400 flex-shrink-0"
+          >
+            <BugIcon className="w-4 h-4" />
+            {t('plugins.debugging')}
+          </Badge>
+        )}
+        {!cardVO.debug && (
+          <>
+            {cardVO.install_source === 'github' && (
+              <Badge
+                variant="outline"
+                className="text-[0.7rem] border-blue-400 text-blue-400 flex-shrink-0"
+              >
+                {t('plugins.fromGithub')}
+              </Badge>
+            )}
+            {cardVO.install_source === 'local' && (
+              <Badge
+                variant="outline"
+                className="text-[0.7rem] border-green-400 text-green-400 flex-shrink-0"
+              >
+                {t('plugins.fromLocal')}
+              </Badge>
+            )}
+            {cardVO.install_source === 'marketplace' && (
+              <Badge
+                variant="outline"
+                className="text-[0.7rem] border-purple-400 text-purple-400 flex-shrink-0"
+              >
+                {t('plugins.fromMarketplace')}
+              </Badge>
+            )}
+          </>
+        )}
+      </div>
+      <div className="text-[0.8rem] text-muted-foreground line-clamp-2 w-full">
+        {cardVO.description}
+      </div>
+    </>
+  );
+
+  const renderMCPContent = () => (
+    <>
+      <div className="text-[0.7rem] text-muted-foreground truncate w-full">
+        MCP Server
+      </div>
+      <div className="flex flex-row items-center justify-start gap-[0.4rem] flex-wrap max-w-full">
+        <div className="text-[1.2rem] text-foreground truncate max-w-[10rem]">
+          {cardVO.label}
+        </div>
+        {renderTypeBadge('mcp')}
+        {cardVO.mode && (
+          <Badge
+            variant="outline"
+            className="text-[0.7rem] border-gray-400 text-gray-600 dark:text-gray-300 flex-shrink-0"
+          >
+            {cardVO.mode.toUpperCase()}
+          </Badge>
+        )}
+        <Badge
+          variant="outline"
+          className={`text-[0.7rem] flex-shrink-0 ${
+            cardVO.enabled
+              ? 'border-green-400 text-green-600 dark:text-green-400'
+              : 'border-gray-400 text-gray-600 dark:text-gray-300'
+          }`}
+        >
+          {cardVO.enabled ? t('mcp.statusConnected') : t('mcp.statusDisabled')}
+        </Badge>
+      </div>
+      <div className="text-[0.8rem] text-muted-foreground line-clamp-2 w-full">
+        {cardVO.description ||
+          (cardVO.tools !== undefined && cardVO.tools > 0
+            ? t('mcp.toolCount', { count: cardVO.tools })
+            : t('mcp.noToolsFound'))}
+      </div>
+    </>
+  );
+
+  const renderSkillContent = () => (
+    <>
+      <div className="text-[0.7rem] text-muted-foreground truncate w-full">
+        Skill
+      </div>
+      <div className="flex flex-row items-center justify-start gap-[0.4rem] flex-wrap max-w-full">
+        <div className="text-[1.2rem] text-foreground truncate max-w-[10rem]">
+          {cardVO.label}
+        </div>
+        {renderTypeBadge('skill')}
+      </div>
+      <div className="text-[0.8rem] text-muted-foreground line-clamp-2 w-full">
+        {cardVO.description}
+      </div>
+    </>
+  );
+
+  return (
+    <>
+      <Card
+        className="w-full h-[10rem] py-5 px-5 cursor-pointer relative gap-0 shadow-xs transition-shadow duration-200 hover:shadow-md"
+        onClick={() => onCardClick()}
+      >
+        <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
+          {showFallback ? (
+            <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center">
+              <FallbackIcon className="w-12 h-12 text-blue-500" />
+            </div>
+          ) : (
+            <img
+              src={iconSrc}
+              alt="extension icon"
+              className="w-16 h-16 rounded-[8%] flex-shrink-0"
+              onError={() => setIconFailed(true)}
+            />
+          )}
+
+          <div className="flex-1 min-w-0 h-full flex flex-col items-start justify-between gap-[0.6rem]">
+            <div className="flex flex-col items-start justify-start w-full min-w-0 flex-1 overflow-hidden">
+              {cardVO.type === 'plugin' && renderPluginContent()}
+              {cardVO.type === 'mcp' && renderMCPContent()}
+              {cardVO.type === 'skill' && renderSkillContent()}
+            </div>
+          </div>
+
+          <div
+            className="flex flex-col items-center justify-between h-full relative z-20 flex-shrink-0"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex items-center justify-center"></div>
+
+            <div className="flex items-center justify-center">
+              <DropdownMenu
+                open={dropdownOpen}
+                onOpenChange={(open) => {
+                  setDropdownOpen(open);
+                }}
+              >
+                <DropdownMenuTrigger asChild>
+                  <div className="relative">
+                    <Button variant="ghost" size="icon">
+                      <Ellipsis className="w-4 h-4" />
+                    </Button>
+                    {cardVO.hasUpdate && (
+                      <div className="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 bg-destructive rounded-full border-2 border-card"></div>
+                    )}
+                  </div>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  {cardVO.type === 'plugin' &&
+                    cardVO.install_source === 'marketplace' && (
+                      <DropdownMenuItem
+                        className="flex flex-row items-center justify-start gap-[0.4rem] cursor-pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (onUpgradeClick) {
+                            onUpgradeClick(cardVO);
+                          }
+                          setDropdownOpen(false);
+                        }}
+                      >
+                        <ArrowUp className="w-4 h-4" />
+                        <span>{t('plugins.update')}</span>
+                        {cardVO.hasUpdate && (
+                          <Badge className="ml-auto bg-red-500 hover:bg-red-500 text-white text-[0.6rem] px-1.5 py-0 h-4">
+                            {t('plugins.new')}
+                          </Badge>
+                        )}
+                      </DropdownMenuItem>
+                    )}
+                  {cardVO.type === 'plugin' &&
+                    (cardVO.install_source === 'github' ||
+                      cardVO.install_source === 'marketplace') && (
+                      <DropdownMenuItem
+                        className="flex flex-row items-center justify-start gap-[0.4rem] cursor-pointer"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (cardVO.install_source === 'github') {
+                            window.open(
+                              cardVO.install_info?.github_url as string,
+                              '_blank',
+                            );
+                          } else if (cardVO.install_source === 'marketplace') {
+                            window.open(
+                              getCloudServiceClientSync().getPluginMarketplaceURL(
+                                systemInfo.cloud_service_url,
+                                cardVO.author,
+                                cardVO.name,
+                              ),
+                              '_blank',
+                            );
+                          }
+                          setDropdownOpen(false);
+                        }}
+                      >
+                        <ExternalLink className="w-4 h-4" />
+                        <span>{t('plugins.viewSource')}</span>
+                      </DropdownMenuItem>
+                    )}
+                  <DropdownMenuItem
+                    className="flex flex-row items-center justify-start gap-[0.4rem] cursor-pointer text-red-600 focus:text-red-600"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      onDeleteClick(cardVO);
+                      setDropdownOpen(false);
+                    }}
+                  >
+                    <Trash className="w-4 h-4" />
+                    <span>
+                      {cardVO.type === 'mcp'
+                        ? t('mcp.deleteServer')
+                        : cardVO.type === 'skill'
+                          ? t('skills.delete')
+                          : t('plugins.delete')}
+                    </span>
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </>
+  );
+}

web/src/app/home/plugins/components/plugin-installed/ExtensionCardVO.ts

@@ -0,0 +1,61 @@
+export type ExtensionType = 'plugin' | 'mcp' | 'skill';
+
+export interface IExtensionCardVO {
+  id: string;
+  author: string;
+  label: string;
+  name: string;
+  description: string;
+  version: string;
+  enabled: boolean;
+  type: ExtensionType;
+  iconURL?: string;
+  install_source?: string;
+  install_info?: Record<string, unknown>;
+  status?: string;
+  debug?: boolean;
+  hasUpdate?: boolean;
+  runtimeStatus?: 'connecting' | 'connected' | 'error' | 'disabled';
+  tools?: number;
+  mode?: 'stdio' | 'sse' | 'http';
+}
+
+export class ExtensionCardVO implements IExtensionCardVO {
+  id: string;
+  author: string;
+  label: string;
+  name: string;
+  description: string;
+  version: string;
+  enabled: boolean;
+  type: ExtensionType;
+  iconURL?: string;
+  install_source?: string;
+  install_info?: Record<string, unknown>;
+  status?: string;
+  debug?: boolean;
+  hasUpdate?: boolean;
+  runtimeStatus?: 'connecting' | 'connected' | 'error' | 'disabled';
+  tools?: number;
+  mode?: 'stdio' | 'sse' | 'http';
+
+  constructor(prop: IExtensionCardVO) {
+    this.id = prop.id;
+    this.author = prop.author;
+    this.label = prop.label;
+    this.name = prop.name;
+    this.description = prop.description;
+    this.version = prop.version;
+    this.enabled = prop.enabled;
+    this.type = prop.type;
+    this.iconURL = prop.iconURL;
+    this.install_source = prop.install_source;
+    this.install_info = prop.install_info;
+    this.status = prop.status;
+    this.debug = prop.debug;
+    this.hasUpdate = prop.hasUpdate;
+    this.runtimeStatus = prop.runtimeStatus;
+    this.tools = prop.tools;
+    this.mode = prop.mode;
+  }
+}

web/src/app/home/plugins/components/plugin-installed/PluginCardVO.ts

@@ -14,6 +14,7 @@ export interface IPluginCardVO {
   components: PluginComponent[];
   debug: boolean;
   hasUpdate?: boolean;
+  type?: 'plugin' | 'mcp' | 'skill';
 }
 
 export class PluginCardVO implements IPluginCardVO {
@@ -30,6 +31,7 @@ export class PluginCardVO implements IPluginCardVO {
   status: string;
   components: PluginComponent[];
   hasUpdate?: boolean;
+  type?: 'plugin' | 'mcp' | 'skill';
 
   constructor(prop: IPluginCardVO) {
     this.author = prop.author;
@@ -45,5 +47,6 @@ export class PluginCardVO implements IPluginCardVO {
     this.install_source = prop.install_source;
     this.install_info = prop.install_info;
     this.hasUpdate = prop.hasUpdate;
+    this.type = prop.type;
   }
 }

web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { PluginCardVO } from '@/app/home/plugins/components/plugin-installed/PluginCardVO';
-import PluginCardComponent from '@/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent';
+import { ExtensionCardVO, ExtensionType } from './ExtensionCardVO';
+import ExtensionCardComponent from './ExtensionCardComponent';
 import styles from '@/app/home/plugins/plugins.module.css';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { getCloudServiceClientSync } from '@/app/infra/http';
@@ -21,223 +21,331 @@ import { extractI18nObject } from '@/i18n/I18nProvider';
 import { toast } from 'sonner';
 import { useAsyncTask, AsyncTaskStatus } from '@/hooks/useAsyncTask';
 import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import { Loader2, Puzzle } from 'lucide-react';
+import { Wrench, AudioWaveform, Book } from 'lucide-react';
 
 export interface PluginInstalledComponentRef {
   refreshPluginList: () => void;
 }
 
-enum PluginOperationType {
+enum ExtensionOperationType {
   DELETE = 'DELETE',
   UPDATE = 'UPDATE',
 }
 
-const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
-  (props, ref) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { refreshPlugins } = useSidebarData();
-    const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
-    const [showOperationModal, setShowOperationModal] = useState(false);
-    const [operationType, setOperationType] = useState<PluginOperationType>(
-      PluginOperationType.DELETE,
-    );
-    const [targetPlugin, setTargetPlugin] = useState<PluginCardVO | null>(null);
-    const [deleteData, setDeleteData] = useState<boolean>(false);
+export type FilterType = 'all' | ExtensionType;
 
-    const asyncTask = useAsyncTask({
-      onSuccess: () => {
-        const successMessage =
-          operationType === PluginOperationType.DELETE
-            ? t('plugins.deleteSuccess')
-            : t('plugins.updateSuccess');
-        toast.success(successMessage);
-        setShowOperationModal(false);
-        getPluginList();
-        refreshPlugins();
-      },
-      onError: () => {
-        // Error is already handled in the hook state
-      },
-    });
+export const FilterOptions = [
+  {
+    value: 'all' as FilterType,
+    labelKey: 'market.filters.allFormats',
+    icon: null,
+  },
+  {
+    value: 'plugin' as FilterType,
+    labelKey: 'market.typePlugin',
+    icon: Wrench,
+  },
+  {
+    value: 'mcp' as FilterType,
+    labelKey: 'market.typeMCP',
+    icon: AudioWaveform,
+  },
+  { value: 'skill' as FilterType, labelKey: 'market.typeSkill', icon: Book },
+];
 
-    useEffect(() => {
-      initData();
-    }, []);
+interface PluginInstalledComponentProps {
+  filterType: FilterType;
+  groupByType: boolean;
+}
 
-    function initData() {
-      getPluginList();
-    }
+const PluginInstalledComponent = forwardRef<
+  PluginInstalledComponentRef,
+  PluginInstalledComponentProps
+>(({ filterType, groupByType }, ref) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { refreshPlugins, refreshMCPServers, refreshSkills } = useSidebarData();
+  const [extensionList, setExtensionList] = useState<ExtensionCardVO[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [showOperationModal, setShowOperationModal] = useState(false);
+  const [operationType, setOperationType] = useState<ExtensionOperationType>(
+    ExtensionOperationType.DELETE,
+  );
+  const [targetExtension, setTargetExtension] =
+    useState<ExtensionCardVO | null>(null);
+  const [deleteData, setDeleteData] = useState<boolean>(false);
 
-    async function getPluginList() {
-      try {
-        // 获取已安装插件列表
-        const installedPluginsResp = await httpClient.getPlugins();
-        const installedPlugins = installedPluginsResp.plugins;
+  const asyncTask = useAsyncTask({
+    onSuccess: () => {
+      const successMessage =
+        operationType === ExtensionOperationType.DELETE
+          ? t('plugins.deleteSuccess')
+          : t('plugins.updateSuccess');
+      toast.success(successMessage);
+      setShowOperationModal(false);
+      getExtensionList();
+      refreshPlugins();
+      refreshMCPServers();
+      refreshSkills();
+    },
+    onError: () => {},
+  });
 
-        // 获取市场插件列表
-        const client = getCloudServiceClientSync();
-        const marketplaceResp = await client.getMarketplacePlugins(1, 100);
-        const marketplacePlugins = marketplaceResp.plugins;
+  useEffect(() => {
+    initData();
+  }, []);
 
-        // 创建市场插件映射，便于快速查找
-        const marketplacePluginMap = new Map();
-        marketplacePlugins.forEach((plugin) => {
-          const key = `${plugin.author}/${plugin.name}`;
-          marketplacePluginMap.set(key, plugin);
-        });
+  function initData() {
+    getExtensionList();
+  }
 
-        // 转换并比较版本号
-        const pluginCards = installedPlugins.map((plugin) => {
-          const cardVO = new PluginCardVO({
-            author: plugin.manifest.manifest.metadata.author ?? '',
-            label: extractI18nObject(plugin.manifest.manifest.metadata.label),
-            description: extractI18nObject(
-              plugin.manifest.manifest.metadata.description ?? {
-                en_US: '',
-                zh_Hans: '',
-              },
-            ),
-            debug: plugin.debug,
-            enabled: plugin.enabled,
-            name: plugin.manifest.manifest.metadata.name,
-            version: plugin.manifest.manifest.metadata.version ?? '',
-            status: plugin.status,
-            components: plugin.components,
-            priority: plugin.priority,
-            install_source: plugin.install_source,
-            install_info: plugin.install_info,
-          });
+  async function getExtensionList() {
+    setLoading(true);
+    try {
+      const client = getCloudServiceClientSync();
 
-          // 检查是否来自市场且有更新
-          if (cardVO.install_source === 'marketplace') {
-            const marketplaceKey = `${cardVO.author}/${cardVO.name}`;
-            const marketplacePlugin = marketplacePluginMap.get(marketplaceKey);
-            if (marketplacePlugin && marketplacePlugin.latest_version) {
-              cardVO.hasUpdate = isNewerVersion(
+      const [extensionsResp, marketplaceResp] = await Promise.all([
+        httpClient.getExtensions().catch(() => ({ extensions: [] })),
+        client.getMarketplacePlugins(1, 100).catch(() => ({ plugins: [] })),
+      ]);
+
+      const marketplacePluginMap = new Map<string, any>();
+      marketplaceResp.plugins.forEach((plugin: any) => {
+        const key = `${plugin.author}/${plugin.name}`;
+        marketplacePluginMap.set(key, plugin);
+      });
+
+      const extensions: ExtensionCardVO[] = [];
+
+      for (const item of extensionsResp.extensions) {
+        if (item.type === 'plugin') {
+          const plugin = item.plugin;
+          const meta = plugin.manifest.manifest.metadata;
+          const author = meta.author ?? '';
+          const name = meta.name;
+          const marketplaceKey = `${author}/${name}`;
+          const marketplacePlugin = marketplacePluginMap.get(marketplaceKey);
+
+          let hasUpdate = false;
+          if (plugin.install_source === 'marketplace' && marketplacePlugin) {
+            if (marketplacePlugin.latest_version) {
+              hasUpdate = isNewerVersion(
                 marketplacePlugin.latest_version,
-                cardVO.version,
+                meta.version ?? '',
               );
             }
           }
 
-          return cardVO;
-        });
-
-        setPluginList(pluginCards);
-      } catch (error) {
-        console.error('获取插件列表失败:', error);
-        // 失败时仍显示已安装插件，不影响用户体验
-        const installedPluginsResp = await httpClient.getPlugins();
-        setPluginList(
-          installedPluginsResp.plugins.map((plugin) => {
-            return new PluginCardVO({
-              author: plugin.manifest.manifest.metadata.author ?? '',
-              label: extractI18nObject(plugin.manifest.manifest.metadata.label),
+          extensions.push(
+            new ExtensionCardVO({
+              id: marketplaceKey,
+              author,
+              label: extractI18nObject(meta.label) || name,
+              name,
               description: extractI18nObject(
-                plugin.manifest.manifest.metadata.description ?? {
-                  en_US: '',
-                  zh_Hans: '',
-                },
+                meta.description ?? { en_US: '', zh_Hans: '' },
               ),
-              debug: plugin.debug,
+              version: meta.version ?? '',
               enabled: plugin.enabled,
-              name: plugin.manifest.manifest.metadata.name,
-              version: plugin.manifest.manifest.metadata.version ?? '',
-              status: plugin.status,
-              components: plugin.components,
-              priority: plugin.priority,
+              type: marketplacePlugin?.type || 'plugin',
+              iconURL: httpClient.getPluginIconURL(author, name),
               install_source: plugin.install_source,
               install_info: plugin.install_info,
-            });
-          }),
-        );
+              status: plugin.status,
+              debug: plugin.debug,
+              hasUpdate,
+            }),
+          );
+        } else if (item.type === 'mcp') {
+          const server = item.server;
+          extensions.push(
+            new ExtensionCardVO({
+              id: server.name,
+              author: '',
+              label: server.name.replace(/__/g, '/'),
+              name: server.name,
+              description: '',
+              version: '',
+              enabled: server.enable,
+              type: 'mcp',
+              iconURL: httpClient.getPluginIconURL('mcp', server.name),
+              status: server.runtime_info?.status,
+              runtimeStatus: server.runtime_info?.status,
+              tools: server.runtime_info?.tool_count || 0,
+              mode: server.mode,
+            }),
+          );
+        } else if (item.type === 'skill') {
+          const skill = item.skill;
+          extensions.push(
+            new ExtensionCardVO({
+              id: skill.name,
+              author: '',
+              label: skill.display_name || skill.name,
+              name: skill.name,
+              description: skill.description || '',
+              version: '',
+              enabled: true,
+              type: 'skill',
+              iconURL: httpClient.getPluginIconURL('skill', skill.name),
+            }),
+          );
+        }
       }
+
+      setExtensionList(extensions);
+    } catch (error) {
+      console.error('Failed to fetch extension list:', error);
+      setExtensionList([]);
+    } finally {
+      setLoading(false);
     }
+  }
 
-    useImperativeHandle(ref, () => ({
-      refreshPluginList: getPluginList,
-    }));
+  useImperativeHandle(ref, () => ({
+    refreshPluginList: getExtensionList,
+  }));
 
-    function handlePluginClick(plugin: PluginCardVO) {
-      const pluginId = `${plugin.author}/${plugin.name}`;
-      navigate(`/home/plugins?id=${encodeURIComponent(pluginId)}`);
+  function handleExtensionClick(extension: ExtensionCardVO) {
+    if (extension.type === 'mcp') {
+      navigate(`/home/mcp?id=${encodeURIComponent(extension.id)}`);
+    } else if (extension.type === 'skill') {
+      navigate(`/home/skills?id=${encodeURIComponent(extension.id)}`);
+    } else {
+      const extensionId = `${extension.author}/${extension.name}`;
+      navigate(`/home/extensions?id=${encodeURIComponent(extensionId)}`);
     }
+  }
 
-    function handlePluginDelete(plugin: PluginCardVO) {
-      setTargetPlugin(plugin);
-      setOperationType(PluginOperationType.DELETE);
-      setShowOperationModal(true);
-      setDeleteData(false);
-      asyncTask.reset();
-    }
+  function handleExtensionDelete(extension: ExtensionCardVO) {
+    setTargetExtension(extension);
+    setOperationType(ExtensionOperationType.DELETE);
+    setShowOperationModal(true);
+    setDeleteData(false);
+    asyncTask.reset();
+  }
 
-    function handlePluginUpdate(plugin: PluginCardVO) {
-      setTargetPlugin(plugin);
-      setOperationType(PluginOperationType.UPDATE);
-      setShowOperationModal(true);
-      asyncTask.reset();
-    }
+  function handleExtensionUpdate(extension: ExtensionCardVO) {
+    setTargetExtension(extension);
+    setOperationType(ExtensionOperationType.UPDATE);
+    setShowOperationModal(true);
+    asyncTask.reset();
+  }
 
-    function executeOperation() {
-      if (!targetPlugin) return;
+  function executeOperation() {
+    if (!targetExtension) return;
 
-      const apiCall =
-        operationType === PluginOperationType.DELETE
-          ? httpClient.removePlugin(
-              targetPlugin.author,
-              targetPlugin.name,
-              deleteData,
-            )
-          : httpClient.upgradePlugin(targetPlugin.author, targetPlugin.name);
-
-      apiCall
-        .then((res) => {
-          asyncTask.startTask(res.task_id);
+    if (targetExtension.type === 'mcp') {
+      httpClient
+        .deleteMCPServer(targetExtension.name)
+        .then(() => {
+          toast.success(t('mcp.deleteSuccess'));
+          setShowOperationModal(false);
+          getExtensionList();
+          refreshMCPServers();
         })
         .catch((error) => {
-          const errorMessage =
-            operationType === PluginOperationType.DELETE
-              ? t('plugins.deleteError') + error.message
-              : t('plugins.updateError') + error.message;
-          toast.error(errorMessage);
+          toast.error(t('mcp.deleteError') + error.message);
         });
+      return;
     }
 
-    return (
-      <>
-        <Dialog
-          open={showOperationModal}
-          onOpenChange={(open) => {
-            if (!open) {
-              setShowOperationModal(false);
-              setTargetPlugin(null);
-              asyncTask.reset();
-            }
-          }}
-        >
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>
-                {operationType === PluginOperationType.DELETE
-                  ? t('plugins.deleteConfirm')
-                  : t('plugins.updateConfirm')}
-              </DialogTitle>
-            </DialogHeader>
-            <DialogDescription>
-              {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
-                <div className="flex flex-col gap-4">
-                  <div>
-                    {operationType === PluginOperationType.DELETE
-                      ? t('plugins.confirmDeletePlugin', {
-                          author: targetPlugin?.author ?? '',
-                          name: targetPlugin?.name ?? '',
-                        })
-                      : t('plugins.confirmUpdatePlugin', {
-                          author: targetPlugin?.author ?? '',
-                          name: targetPlugin?.name ?? '',
-                        })}
-                  </div>
-                  {operationType === PluginOperationType.DELETE && (
+    if (targetExtension.type === 'skill') {
+      httpClient
+        .deleteSkill(targetExtension.name)
+        .then(() => {
+          toast.success(t('skills.deleteSuccess'));
+          setShowOperationModal(false);
+          getExtensionList();
+          refreshSkills();
+        })
+        .catch((error) => {
+          toast.error(t('skills.deleteError') + error.message);
+        });
+      return;
+    }
+
+    const apiCall =
+      operationType === ExtensionOperationType.DELETE
+        ? httpClient.removePlugin(
+            targetExtension.author,
+            targetExtension.name,
+            deleteData,
+          )
+        : httpClient.upgradePlugin(
+            targetExtension.author,
+            targetExtension.name,
+          );
+
+    apiCall
+      .then((res) => {
+        asyncTask.startTask(res.task_id);
+      })
+      .catch((error) => {
+        const errorMessage =
+          operationType === ExtensionOperationType.DELETE
+            ? t('plugins.deleteError') + error.message
+            : t('plugins.updateError') + error.message;
+        toast.error(errorMessage);
+      });
+  }
+
+  const filteredExtensions = extensionList.filter((ext) => {
+    if (filterType === 'all') return true;
+    return ext.type === filterType;
+  });
+
+  const showGrouped = groupByType && filterType === 'all';
+  const groupOrder: ExtensionType[] = ['plugin', 'mcp', 'skill'];
+  const groupedExtensions = groupOrder
+    .map((type) => ({
+      type,
+      labelKey: FilterOptions.find((o) => o.value === type)!.labelKey,
+      items: filteredExtensions.filter((ext) => ext.type === type),
+    }))
+    .filter((g) => g.items.length > 0);
+
+  const getDeleteConfirmMessage = () => {
+    if (!targetExtension) return '';
+    if (targetExtension.type === 'mcp') {
+      return t('mcp.confirmDeleteServer');
+    }
+    if (targetExtension.type === 'skill') {
+      return t('skills.deleteConfirmation');
+    }
+    return t('plugins.confirmDeletePlugin', {
+      author: targetExtension.author,
+      name: targetExtension.name,
+    });
+  };
+
+  return (
+    <>
+      <Dialog
+        open={showOperationModal}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowOperationModal(false);
+            setTargetExtension(null);
+            asyncTask.reset();
+          }
+        }}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {operationType === ExtensionOperationType.DELETE
+                ? t('plugins.deleteConfirm')
+                : t('plugins.updateConfirm')}
+            </DialogTitle>
+          </DialogHeader>
+          <DialogDescription>
+            {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
+              <div className="flex flex-col gap-4">
+                <div>{getDeleteConfirmMessage()}</div>
+                {operationType === ExtensionOperationType.DELETE &&
+                  targetExtension?.type === 'plugin' && (
                     <div className="flex items-center space-x-2">
                       <Checkbox
                         id="delete-data"
@@ -254,113 +362,147 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
                       </label>
                     </div>
                   )}
-                </div>
-              )}
-              {asyncTask.status === AsyncTaskStatus.RUNNING && (
-                <div>
-                  {operationType === PluginOperationType.DELETE
-                    ? t('plugins.deleting')
-                    : t('plugins.updating')}
-                </div>
-              )}
-              {asyncTask.status === AsyncTaskStatus.ERROR && (
-                <div>
-                  {operationType === PluginOperationType.DELETE
-                    ? t('plugins.deleteError')
-                    : t('plugins.updateError')}
-                  <div className="text-red-500">{asyncTask.error}</div>
-                </div>
-              )}
-            </DialogDescription>
-            <DialogFooter>
-              {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setShowOperationModal(false);
-                    setTargetPlugin(null);
-                    asyncTask.reset();
-                  }}
-                >
-                  {t('plugins.cancel')}
-                </Button>
-              )}
-              {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
-                <Button
-                  variant={
-                    operationType === PluginOperationType.DELETE
-                      ? 'destructive'
-                      : 'default'
-                  }
-                  onClick={() => {
-                    executeOperation();
-                  }}
-                >
-                  {operationType === PluginOperationType.DELETE
-                    ? t('plugins.confirmDelete')
-                    : t('plugins.confirmUpdate')}
-                </Button>
-              )}
-              {asyncTask.status === AsyncTaskStatus.RUNNING && (
-                <Button
-                  variant={
-                    operationType === PluginOperationType.DELETE
-                      ? 'destructive'
-                      : 'default'
-                  }
-                  disabled
-                >
-                  {operationType === PluginOperationType.DELETE
-                    ? t('plugins.deleting')
-                    : t('plugins.updating')}
-                </Button>
-              )}
-              {asyncTask.status === AsyncTaskStatus.ERROR && (
-                <Button
-                  variant="default"
-                  onClick={() => {
-                    setShowOperationModal(false);
-                    asyncTask.reset();
-                  }}
-                >
-                  {t('plugins.close')}
-                </Button>
-              )}
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+              </div>
+            )}
+            {asyncTask.status === AsyncTaskStatus.RUNNING && (
+              <div>
+                {operationType === ExtensionOperationType.DELETE
+                  ? t('plugins.deleting')
+                  : t('plugins.updating')}
+              </div>
+            )}
+            {asyncTask.status === AsyncTaskStatus.ERROR && (
+              <div>
+                {operationType === ExtensionOperationType.DELETE
+                  ? t('plugins.deleteError')
+                  : t('plugins.updateError')}
+                <div className="text-red-500">{asyncTask.error}</div>
+              </div>
+            )}
+          </DialogDescription>
+          <DialogFooter>
+            {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setShowOperationModal(false);
+                  setTargetExtension(null);
+                  asyncTask.reset();
+                }}
+              >
+                {t('plugins.cancel')}
+              </Button>
+            )}
+            {asyncTask.status === AsyncTaskStatus.WAIT_INPUT && (
+              <Button
+                variant={
+                  operationType === ExtensionOperationType.DELETE
+                    ? 'destructive'
+                    : 'default'
+                }
+                onClick={() => {
+                  executeOperation();
+                }}
+              >
+                {operationType === ExtensionOperationType.DELETE
+                  ? t('plugins.confirmDelete')
+                  : t('plugins.confirmUpdate')}
+              </Button>
+            )}
+            {asyncTask.status === AsyncTaskStatus.RUNNING && (
+              <Button
+                variant={
+                  operationType === ExtensionOperationType.DELETE
+                    ? 'destructive'
+                    : 'default'
+                }
+                disabled
+              >
+                {operationType === ExtensionOperationType.DELETE
+                  ? t('plugins.deleting')
+                  : t('plugins.updating')}
+              </Button>
+            )}
+            {asyncTask.status === AsyncTaskStatus.ERROR && (
+              <Button
+                variant="default"
+                onClick={() => {
+                  setShowOperationModal(false);
+                  asyncTask.reset();
+                }}
+              >
+                {t('plugins.close')}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
 
-        {pluginList.length === 0 ? (
-          <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
-            <svg
-              className="h-[3rem] w-[3rem]"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M7 5C7 2.79086 8.79086 1 11 1C13.2091 1 15 2.79086 15 5H20C20.5523 5 21 5.44772 21 6V10.1707C21 10.4953 20.8424 10.7997 20.5774 10.9872C20.3123 11.1746 19.9728 11.2217 19.6668 11.1135C19.4595 11.0403 19.2355 11 19 11C17.8954 11 17 11.8954 17 13C17 14.1046 17.8954 15 19 15C19.2355 15 19.4595 14.9597 19.6668 14.8865C19.9728 14.7783 20.3123 14.8254 20.5774 15.0128C20.8424 15.2003 21 15.5047 21 15.8293V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V6C3 5.44772 3.44772 5 4 5H7ZM11 3C9.89543 3 9 3.89543 9 5C9 5.23554 9.0403 5.45952 9.11355 5.66675C9.22172 5.97282 9.17461 6.31235 8.98718 6.57739C8.79974 6.84243 8.49532 7 8.17071 7H5V19H19V17C16.7909 17 15 15.2091 15 13C15 10.7909 16.7909 9 19 9V7H13.8293C13.5047 7 13.2003 6.84243 13.0128 6.57739C12.8254 6.31235 12.7783 5.97282 12.8865 5.66675C12.9597 5.45952 13 5.23555 13 5C13 3.89543 12.1046 3 11 3Z"></path>
-            </svg>
-            <div className="text-lg mb-2">{t('plugins.noPluginInstalled')}</div>
+      {loading ? (
+        <div className="flex flex-col items-center justify-center text-muted-foreground min-h-[60vh] w-full gap-2">
+          <Loader2 className="h-[3rem] w-[3rem] animate-spin" />
+          <div className="text-lg mb-2">{t('plugins.loadingExtensions')}</div>
+        </div>
+      ) : filteredExtensions.length === 0 ? (
+        <div className="flex flex-col items-center justify-center text-muted-foreground min-h-[60vh] w-full gap-2">
+          <Puzzle className="h-[3rem] w-[3rem]" />
+          <div className="text-lg mb-2">
+            {t('plugins.noExtensionInstalled')}
           </div>
-        ) : (
-          <div className={`${styles.pluginListContainer}`}>
-            {pluginList.map((vo, index) => {
-              return (
-                <div key={index}>
-                  <PluginCardComponent
-                    cardVO={vo}
-                    onCardClick={() => handlePluginClick(vo)}
-                    onDeleteClick={() => handlePluginDelete(vo)}
-                    onUpgradeClick={() => handlePluginUpdate(vo)}
-                  />
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </>
-    );
-  },
-);
+        </div>
+      ) : showGrouped ? (
+        <div className="flex flex-col gap-4 pb-4">
+          {groupedExtensions.map((group) => (
+            <div key={group.type} className="flex flex-col">
+              <div className="px-[0.8rem] flex items-center gap-2 mb-2">
+                <h3 className="text-sm font-semibold text-foreground">
+                  {t(group.labelKey)}
+                </h3>
+                <span className="text-xs text-muted-foreground">
+                  ({group.items.length})
+                </span>
+              </div>
+              <div className="px-[0.8rem] grid gap-5 sm:gap-8 [grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))] sm:[grid-template-columns:repeat(auto-fill,minmax(min(100%,28rem),1fr))] items-start">
+                {group.items.map((vo, index) => (
+                  <div key={vo.id || index}>
+                    <ExtensionCardComponent
+                      cardVO={vo}
+                      onCardClick={() => handleExtensionClick(vo)}
+                      onDeleteClick={() => handleExtensionDelete(vo)}
+                      onUpgradeClick={
+                        vo.type === 'plugin'
+                          ? () => handleExtensionUpdate(vo)
+                          : undefined
+                      }
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className={`${styles.pluginListContainer}`}>
+          {filteredExtensions.map((vo, index) => {
+            return (
+              <div key={vo.id || index}>
+                <ExtensionCardComponent
+                  cardVO={vo}
+                  onCardClick={() => handleExtensionClick(vo)}
+                  onDeleteClick={() => handleExtensionDelete(vo)}
+                  onUpgradeClick={
+                    vo.type === 'plugin'
+                      ? () => handleExtensionUpdate(vo)
+                      : undefined
+                  }
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
 
 export default PluginInstalledComponent;

web/src/app/home/plugins/components/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -60,6 +60,24 @@ export default function PluginCardComponent({
                   >
                     v{cardVO.version}
                   </Badge>
+                  {cardVO.type && (
+                    <Badge
+                      variant="outline"
+                      className={`text-[0.7rem] flex-shrink-0 ${
+                        cardVO.type === 'mcp'
+                          ? 'border-sky-500 text-sky-600 dark:border-sky-400 dark:text-sky-300'
+                          : cardVO.type === 'skill'
+                            ? 'border-emerald-500 text-emerald-600 dark:border-emerald-400 dark:text-emerald-300'
+                            : 'border-violet-500 text-violet-600 dark:border-violet-400 dark:text-violet-300'
+                      }`}
+                    >
+                      {cardVO.type === 'mcp'
+                        ? 'MCP'
+                        : cardVO.type === 'skill'
+                          ? t('common.skill')
+                          : t('market.typePlugin')}
+                    </Badge>
+                  )}
                   {cardVO.debug && (
                     <Badge
                       variant="outline"

web/src/app/home/plugins/components/plugin-installed/plugin-form/PluginForm.tsx

@@ -4,10 +4,16 @@ import { Plugin } from '@/app/infra/entities/plugin';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
 import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
 import { toast } from 'sonner';
-import { extractI18nObject } from '@/i18n/I18nProvider';
 import { useTranslation } from 'react-i18next';
-import PluginComponentList from '@/app/home/plugins/components/plugin-installed/PluginComponentList';
 
 export default function PluginForm({
   pluginAuthor,
@@ -36,7 +42,6 @@ export default function PluginForm({
       setPluginConfig(res);
 
       // 提取初始配置中的所有文件 key
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const extractFileKeys = (obj: any): string[] => {
         const keys: string[] = [];
         if (obj && typeof obj === 'object') {
@@ -71,7 +76,6 @@ export default function PluginForm({
       );
 
       // 提取最终保存的配置中的所有文件 key
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const extractFileKeys = (obj: any): string[] => {
         const keys: string[] = [];
         if (obj && typeof obj === 'object') {
@@ -137,65 +141,34 @@ export default function PluginForm({
   }
 
   return (
-    <div>
-      <div className="space-y-2">
-        <div className="text-lg font-medium">
-          {extractI18nObject(pluginInfo.manifest.manifest.metadata.label)}
-        </div>
-        <div className="text-sm text-gray-500 pb-2">
-          {extractI18nObject(
-            pluginInfo.manifest.manifest.metadata.description ?? {
-              en_US: '',
-              zh_Hans: '',
-            },
+    <div className="min-w-0 max-w-full space-y-4">
+      <Card className="min-w-0 overflow-x-hidden">
+        <CardHeader>
+          <CardTitle>{t('plugins.pluginConfig')}</CardTitle>
+          <CardDescription>{t('plugins.saveConfig')}</CardDescription>
+        </CardHeader>
+        <CardContent className="min-w-0 overflow-x-hidden">
+          {pluginInfo.manifest.manifest.spec.config.length > 0 ? (
+            <DynamicFormComponent
+              itemConfigList={pluginInfo.manifest.manifest.spec.config}
+              initialValues={pluginConfig.config as Record<string, object>}
+              onSubmit={(values) => {
+                // 只保存表单值的引用,不触发状态更新
+                currentFormValues.current = values;
+              }}
+              onFileUploaded={(fileKey) => {
+                // 追踪上传的文件
+                uploadedFileKeys.current.add(fileKey);
+              }}
+            />
+          ) : (
+            <div className="text-sm text-muted-foreground">
+              {t('plugins.pluginNoConfig')}
+            </div>
           )}
-        </div>
-
-        <div className="mb-4 flex flex-row items-center justify-start gap-[0.4rem]">
-          <PluginComponentList
-            components={(() => {
-              const componentKindCount: Record<string, number> = {};
-              for (const component of pluginInfo.components) {
-                const kind = component.manifest.manifest.kind;
-                if (componentKindCount[kind]) {
-                  componentKindCount[kind]++;
-                } else {
-                  componentKindCount[kind] = 1;
-                }
-              }
-              return componentKindCount;
-            })()}
-            showComponentName={true}
-            showTitle={false}
-            useBadge={true}
-            t={t}
-          />
-        </div>
-
+        </CardContent>
         {pluginInfo.manifest.manifest.spec.config.length > 0 && (
-          <DynamicFormComponent
-            itemConfigList={pluginInfo.manifest.manifest.spec.config}
-            initialValues={pluginConfig.config as Record<string, object>}
-            onSubmit={(values) => {
-              // 只保存表单值的引用,不触发状态更新
-              currentFormValues.current = values;
-            }}
-            onFileUploaded={(fileKey) => {
-              // 追踪上传的文件
-              uploadedFileKeys.current.add(fileKey);
-            }}
-          />
-        )}
-        {pluginInfo.manifest.manifest.spec.config.length === 0 && (
-          <div className="text-sm text-gray-500">
-            {t('plugins.pluginNoConfig')}
-          </div>
-        )}
-      </div>
-
-      {pluginInfo.manifest.manifest.spec.config.length > 0 && (
-        <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
-          <div className="flex justify-end gap-2">
+          <CardFooter className="justify-end">
             <Button
               type="submit"
               onClick={() => handleSubmit()}
@@ -203,9 +176,9 @@ export default function PluginForm({
             >
               {isSaving ? t('plugins.saving') : t('plugins.saveConfig')}
             </Button>
-          </div>
-        </div>
-      )}
+          </CardFooter>
+        )}
+      </Card>
     </div>
   );
 }

web/src/app/home/plugins/components/plugin-market/PluginComponentList.tsx

@@ -0,0 +1,75 @@
+import { Fragment } from 'react';
+import { TFunction } from 'i18next';
+import { Wrench, AudioWaveform, Hash, Book, FileText } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+
+export default function PluginComponentList({
+  components,
+  showComponentName,
+  showTitle,
+  useBadge,
+  t,
+  responsive = false,
+}: {
+  components: Record<string, number>;
+  showComponentName: boolean;
+  showTitle: boolean;
+  useBadge: boolean;
+  t: TFunction;
+  responsive?: boolean;
+}) {
+  const kindIconMap: Record<string, React.ReactNode> = {
+    Tool: <Wrench className="w-5 h-5" />,
+    EventListener: <AudioWaveform className="w-5 h-5" />,
+    Command: <Hash className="w-5 h-5" />,
+    KnowledgeEngine: <Book className="w-5 h-5" />,
+    Parser: <FileText className="w-5 h-5" />,
+  };
+
+  const componentKindList = Object.keys(components || {});
+
+  return (
+    <>
+      {showTitle && <div>{t('market.componentsList')}</div>}
+      {componentKindList.length > 0 && (
+        <>
+          {componentKindList.map((kind) => {
+            return (
+              <Fragment key={kind}>
+                {useBadge && (
+                  <Badge variant="outline" className="flex items-center gap-1">
+                    {kindIconMap[kind]}
+                    {responsive ? (
+                      <span className="hidden md:inline">
+                        {t('market.componentName.' + kind)}
+                      </span>
+                    ) : (
+                      showComponentName && t('market.componentName.' + kind)
+                    )}
+                    <span className="ml-1">{components[kind]}</span>
+                  </Badge>
+                )}
+
+                {!useBadge && (
+                  <div className="flex flex-row items-center justify-start gap-[0.2rem]">
+                    {kindIconMap[kind]}
+                    {responsive ? (
+                      <span className="hidden md:inline">
+                        {t('market.componentName.' + kind)}
+                      </span>
+                    ) : (
+                      showComponentName && t('market.componentName.' + kind)
+                    )}
+                    <span className="ml-1">{components[kind]}</span>
+                  </div>
+                )}
+              </Fragment>
+            );
+          })}
+        </>
+      )}
+
+      {componentKindList.length === 0 && <div>{t('market.noComponents')}</div>}
+    </>
+  );
+}

web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx

@@ -8,6 +8,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Separator } from '@/components/ui/separator';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import {
   Search,
@@ -16,22 +22,33 @@ import {
   Hash,
   Book,
   FileText,
-  PanelTop,
+  AppWindow,
+  SlidersHorizontal,
+  X,
+  Info,
 } from 'lucide-react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import PluginMarketCardComponent from './plugin-market-card/PluginMarketCardComponent';
 import { PluginMarketCardVO } from './plugin-market-card/PluginMarketCardVO';
-import { getCloudServiceClientSync } from '@/app/infra/http';
+import { RecommendationLists } from './RecommendationLists';
+import type { RecommendationList } from './RecommendationLists';
+import {
+  getCloudServiceClient,
+  getCloudServiceClientSync,
+} from '@/app/infra/http';
 import { useTranslation } from 'react-i18next';
-import { PluginV4 } from '@/app/infra/entities/plugin';
+import { PluginV4, PluginV4Status } from '@/app/infra/entities/plugin';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { toast } from 'sonner';
 import { ApiRespMarketplacePlugins } from '@/app/infra/entities/api';
 import { LoadingSpinner } from '@/components/ui/loading-spinner';
-import { TagsFilter } from './TagsFilter';
+import { Button } from '@/components/ui/button';
 import { PluginTag } from '@/app/infra/http/CloudServiceClient';
 
-import { RecommendationLists, RecommendationList } from './RecommendationLists';
-
 interface SortOption {
   value: string;
   label: string;
@@ -39,45 +56,91 @@ interface SortOption {
   sortOrder: string;
 }
 
+// Persist the market filter conditions (type / component / tags / sort) across
+// visits via localStorage.
+const MARKET_FILTERS_KEY = 'langbot_market_filters';
+interface MarketFilters {
+  typeFilter?: string;
+  componentFilter?: string;
+  selectedTags?: string[];
+  sortOption?: string;
+}
+function loadMarketFilters(): MarketFilters {
+  try {
+    return JSON.parse(localStorage.getItem(MARKET_FILTERS_KEY) || '{}');
+  } catch {
+    return {};
+  }
+}
+
 // 内部组件，用于处理搜索参数
 function MarketPageContent({
   installPlugin,
+  headerActions,
 }: {
   installPlugin: (plugin: PluginV4) => void;
+  headerActions?: React.ReactNode;
 }) {
   const { t } = useTranslation();
   const [searchParams] = useSearchParams();
 
-  const validCategories = [
-    'Tool',
-    'Command',
-    'EventListener',
-    'KnowledgeEngine',
-    'Parser',
-    'Page',
+  const validTypes = ['plugin', 'mcp', 'skill'];
+
+  const extensionTypeOptions = [
+    { value: 'all', label: t('market.filters.allFormats'), icon: null },
+    { value: 'plugin', label: t('market.typePlugin'), icon: Wrench },
+    { value: 'mcp', label: t('market.typeMCP'), icon: AudioWaveform },
+    { value: 'skill', label: t('market.typeSkill'), icon: Book },
   ];
 
   const [searchQuery, setSearchQuery] = useState('');
-  const [componentFilter, setComponentFilter] = useState<string>(() => {
-    const category = searchParams.get('category');
-    if (category && validCategories.includes(category)) {
-      return category;
+  const [componentFilter, setComponentFilter] = useState<string>(
+    () => loadMarketFilters().componentFilter ?? 'all',
+  );
+  const [typeFilter, setTypeFilter] = useState<string>(() => {
+    const type = searchParams.get('type');
+    if (type && validTypes.includes(type)) {
+      return type;
     }
-    return 'all';
+    const saved = loadMarketFilters().typeFilter;
+    return saved && validTypes.includes(saved) ? saved : 'all';
   });
-  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const activeAdvancedFilters =
+    (typeFilter === 'all' ? 0 : 1) + (componentFilter === 'all' ? 0 : 1);
+  const [selectedTags, setSelectedTags] = useState<string[]>(
+    () => loadMarketFilters().selectedTags ?? [],
+  );
   const [availableTags, setAvailableTags] = useState<PluginTag[]>([]);
   const [tagNames, setTagNames] = useState<Record<string, string>>({});
+  const [recommendationLists, setRecommendationLists] = useState<
+    RecommendationList[]
+  >([]);
   const [plugins, setPlugins] = useState<PluginMarketCardVO[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [total, setTotal] = useState(0);
-  const [sortOption, setSortOption] = useState('install_count_desc');
-  const [recommendationLists, setRecommendationLists] = useState<
-    RecommendationList[]
-  >([]);
+  const [sortOption, setSortOption] = useState<string>(
+    () => loadMarketFilters().sortOption ?? 'install_count_desc',
+  );
+
+  // Persist filter conditions so they survive navigation / reload.
+  useEffect(() => {
+    try {
+      localStorage.setItem(
+        MARKET_FILTERS_KEY,
+        JSON.stringify({
+          typeFilter,
+          componentFilter,
+          selectedTags,
+          sortOption,
+        }),
+      );
+    } catch {
+      // ignore storage errors
+    }
+  }, [typeFilter, componentFilter, selectedTags, sortOption]);
 
   const pageSize = 12; // 每页12个
   const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -112,6 +175,32 @@ function MarketPageContent({
     },
   ];
 
+  const componentOptions = [
+    { value: 'all', label: t('market.allComponents'), icon: null },
+    { value: 'Tool', label: t('market.componentName.Tool'), icon: Wrench },
+    { value: 'Command', label: t('market.componentName.Command'), icon: Hash },
+    {
+      value: 'EventListener',
+      label: t('market.componentName.EventListener'),
+      icon: AudioWaveform,
+    },
+    {
+      value: 'KnowledgeEngine',
+      label: t('market.componentName.KnowledgeEngine'),
+      icon: Book,
+    },
+    {
+      value: 'Parser',
+      label: t('market.componentName.Parser'),
+      icon: FileText,
+    },
+    {
+      value: 'Page',
+      label: t('market.componentName.Page'),
+      icon: AppWindow,
+    },
+  ];
+
   // 获取当前排序参数
   const getCurrentSort = useCallback(() => {
     const option = sortOptions.find((opt) => opt.value === sortOption);
@@ -121,29 +210,43 @@ function MarketPageContent({
   }, [sortOption]);
 
   // 将API响应转换为VO对象
-  const transformToVO = useCallback((plugin: PluginV4): PluginMarketCardVO => {
-    return new PluginMarketCardVO({
-      pluginId: plugin.author + ' / ' + plugin.name,
-      author: plugin.author,
-      pluginName: plugin.name,
-      label: extractI18nObject(plugin.label),
-      description:
-        extractI18nObject(plugin.description) || t('market.noDescription'),
-      installCount: plugin.install_count,
-      iconURL: getCloudServiceClientSync().getPluginIconURL(
-        plugin.author,
-        plugin.name,
-      ),
-      githubURL: plugin.repository,
-      version: plugin.latest_version,
-      components: plugin.components,
-      tags: plugin.tags || [],
-    });
-  }, []);
+  const transformToVO = useCallback(
+    (plugin: PluginV4): PluginMarketCardVO => {
+      const cloudClient = getCloudServiceClientSync();
+      const iconURL =
+        plugin.type === 'mcp'
+          ? cloudClient.getMCPMarketplaceIconURL(plugin.author, plugin.name)
+          : plugin.type === 'skill'
+            ? cloudClient.getSkillMarketplaceIconURL(plugin.author, plugin.name)
+            : cloudClient.getPluginIconURL(plugin.author, plugin.name);
+
+      return new PluginMarketCardVO({
+        pluginId: plugin.author + ' / ' + plugin.name,
+        author: plugin.author,
+        pluginName: plugin.name,
+        label: extractI18nObject(plugin.label),
+        description:
+          extractI18nObject(plugin.description) || t('market.noDescription'),
+        installCount: plugin.install_count || 0,
+        iconURL,
+        githubURL: plugin.repository,
+        version: plugin.latest_version,
+        components: plugin.components || {},
+        tags: plugin.tags || [],
+        type: plugin.type,
+      });
+    },
+    [t],
+  );
 
   // 获取插件列表
   const fetchPlugins = useCallback(
-    async (page: number, isSearch: boolean = false, reset: boolean = false) => {
+    async (
+      page: number,
+      isSearch: boolean = false,
+      reset: boolean = false,
+      queryOverride?: string,
+    ) => {
       if (page === 1) {
         setIsLoading(true);
       } else {
@@ -152,31 +255,23 @@ function MarketPageContent({
 
       try {
         const { sortBy, sortOrder } = getCurrentSort();
-        const filterValue =
-          componentFilter === 'all' ? undefined : componentFilter;
+        const query = (queryOverride ?? searchQuery).trim();
 
-        // Always use searchMarketplacePlugins to support component filtering and tags filtering
         const response =
-          await getCloudServiceClientSync().searchMarketplacePlugins(
-            isSearch && searchQuery.trim() ? searchQuery.trim() : '',
+          await getCloudServiceClientSync().searchMarketplaceExtensions({
+            query: isSearch ? query : '',
             page,
-            pageSize,
-            sortBy,
-            sortOrder,
-            filterValue,
-            selectedTags.length > 0 ? selectedTags : undefined,
-          );
+            page_size: pageSize,
+            sort_by: sortBy,
+            sort_order: sortOrder,
+            type_filter: typeFilter === 'all' ? undefined : typeFilter,
+            component_filter:
+              componentFilter === 'all' ? undefined : componentFilter,
+            tags_filter: selectedTags.length > 0 ? selectedTags : undefined,
+          });
 
         const data: ApiRespMarketplacePlugins = response;
-        const newPlugins = data.plugins
-          .filter((plugin) => {
-            // Hide plugins that only contain deprecated KnowledgeRetriever components
-            const keys = Object.keys(plugin.components || {});
-            return !(
-              keys.length > 0 && keys.every((k) => k === 'KnowledgeRetriever')
-            );
-          })
-          .map(transformToVO);
+        const newPlugins = data.plugins.map(transformToVO);
         const total = data.total;
 
         if (reset || page === 1) {
@@ -187,8 +282,10 @@ function MarketPageContent({
 
         setTotal(total);
         setHasMore(
-          data.plugins.length === pageSize &&
-            plugins.length + newPlugins.length < total,
+          newPlugins.length > 0 &&
+            (reset || page === 1
+              ? newPlugins.length
+              : plugins.length + newPlugins.length) < total,
         );
       } catch (error) {
         console.error('Failed to fetch plugins:', error);
@@ -206,16 +303,35 @@ function MarketPageContent({
       transformToVO,
       plugins.length,
       getCurrentSort,
+      typeFilter,
     ],
   );
 
   // 初始加载
   useEffect(() => {
-    fetchPlugins(1, false, true);
-    fetchAvailableTags();
+    // Resolve the cloud service base URL (from system info) before any
+    // marketplace fetch — otherwise the sync client may still hold the default
+    // URL and hit space.langbot.app instead of the configured instance.
+    (async () => {
+      await getCloudServiceClient();
+      fetchPlugins(1, false, true);
+      fetchAvailableTags();
+      fetchRecommendationLists();
+    })();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // 获取推荐列表（精选，混合插件/MCP/Skill）
+  const fetchRecommendationLists = async () => {
+    try {
+      const client = await getCloudServiceClient();
+      const { lists } = await client.getRecommendationLists();
+      setRecommendationLists(lists || []);
+    } catch (error) {
+      console.error('Failed to fetch recommendation lists:', error);
+    }
+  };
+
   // 获取可用标签
   const fetchAvailableTags = async () => {
     try {
@@ -240,27 +356,13 @@ function MarketPageContent({
     }
   };
 
-  // Fetch recommendation lists
-  useEffect(() => {
-    async function fetchRecommendationLists() {
-      try {
-        const response =
-          await getCloudServiceClientSync().getRecommendationLists();
-        setRecommendationLists(response.lists || []);
-      } catch (error) {
-        console.error('Failed to fetch recommendation lists:', error);
-      }
-    }
-    fetchRecommendationLists();
-  }, []);
-
   // 搜索功能
   const handleSearch = useCallback(
     (query: string) => {
       setSearchQuery(query);
       setCurrentPage(1);
       setPlugins([]);
-      fetchPlugins(1, !!query.trim(), true);
+      fetchPlugins(1, !!query.trim(), true, query);
     },
     [fetchPlugins],
   );
@@ -292,33 +394,52 @@ function MarketPageContent({
     setSortOption(value);
     setCurrentPage(1);
     setPlugins([]);
-    // fetchPlugins will be called by useEffect when sortOption changes
   }, []);
 
-  // 组件筛选变化处理
-  const handleComponentFilterChange = useCallback((value: string) => {
-    setComponentFilter(value);
+  // Handle type filter change
+  const handleTypeFilterChange = useCallback((value: string) => {
+    setTypeFilter(value);
+    if (value !== 'plugin') {
+      setComponentFilter('all');
+    }
     setCurrentPage(1);
+    setSelectedTags([]);
     setPlugins([]);
 
     // Update URL query param to keep it in sync
     const params = new URLSearchParams(window.location.search);
     if (value === 'all') {
-      params.delete('category');
+      params.delete('type');
     } else {
-      params.set('category', value);
+      params.set('type', value);
     }
     const newUrl = params.toString()
       ? `${window.location.pathname}?${params.toString()}`
       : window.location.pathname;
     window.history.replaceState({}, '', newUrl);
-    // fetchPlugins will be called by useEffect when componentFilter changes
   }, []);
 
-  // 当排序选项或组件筛选变化时重新加载数据
+  const handleComponentFilterChange = useCallback((value: string) => {
+    setComponentFilter(value);
+    setCurrentPage(1);
+    setPlugins([]);
+
+    if (value !== 'all') {
+      setTypeFilter('plugin');
+
+      const params = new URLSearchParams(window.location.search);
+      params.set('type', 'plugin');
+      const newUrl = params.toString()
+        ? `${window.location.pathname}?${params.toString()}`
+        : window.location.pathname;
+      window.history.replaceState({}, '', newUrl);
+    }
+  }, []);
+
+  // 当排序选项或组件筛选或类型筛选变化时重新加载数据
   useEffect(() => {
     fetchPlugins(1, !!searchQuery.trim(), true);
-  }, [sortOption, componentFilter]);
+  }, [sortOption, componentFilter, typeFilter]);
 
   // Tags 筛选变化时重新搜索
   useEffect(() => {
@@ -336,13 +457,56 @@ function MarketPageContent({
 
   // 处理安装插件
   const handleInstallPlugin = useCallback(
-    async (author: string, pluginName: string) => {
+    async (cardVO: PluginMarketCardVO) => {
       try {
-        // Fetch full plugin details to get PluginV4 object
+        if (cardVO.type === 'mcp' || cardVO.type === 'skill') {
+          // For MCP and Skill, directly pass the data - backend will fetch from Space
+          const pluginV4: PluginV4 = {
+            id: 0,
+            plugin_id: `${cardVO.author}/${cardVO.pluginName}`,
+            mcp_id:
+              cardVO.type === 'mcp'
+                ? `${cardVO.author}/${cardVO.pluginName}`
+                : undefined,
+            skill_id:
+              cardVO.type === 'skill'
+                ? `${cardVO.author}/${cardVO.pluginName}`
+                : undefined,
+            author: cardVO.author,
+            name: cardVO.pluginName,
+            label: { en_US: cardVO.label, zh_Hans: cardVO.label },
+            description: {
+              en_US: cardVO.description,
+              zh_Hans: cardVO.description,
+            },
+            icon: cardVO.iconURL,
+            repository: cardVO.githubURL,
+            tags: cardVO.tags || [],
+            install_count: cardVO.installCount,
+            latest_version: cardVO.version,
+            components: cardVO.components || {},
+            status: PluginV4Status.Live,
+            type: cardVO.type,
+            created_at: '',
+            updated_at: '',
+          };
+          installPlugin(pluginV4);
+          return;
+        }
+
+        // For plugin type, fetch full details via API
         const response = await getCloudServiceClientSync().getPluginDetail(
-          author,
-          pluginName,
+          cardVO.author,
+          cardVO.pluginName,
         );
+        if (!response?.plugin) {
+          console.error('Failed to install plugin: plugin not found', {
+            author: cardVO.author,
+            pluginName: cardVO.pluginName,
+          });
+          toast.error(t('market.installFailed'));
+          return;
+        }
         const pluginV4: PluginV4 = response.plugin;
 
         // Call the install function passed from parent
@@ -352,7 +516,7 @@ function MarketPageContent({
         toast.error(t('market.installFailed'));
       }
     },
-    [plugins, installPlugin, t],
+    [installPlugin, t],
   );
 
   // 清理定时器
@@ -429,11 +593,11 @@ function MarketPageContent({
 
   return (
     <div className="h-full flex flex-col">
-      {/* Fixed header with search and sort controls */}
-      <div className="flex-shrink-0 space-y-4 px-3 sm:px-4 py-4 sm:py-6">
-        {/* Search box and Tags filter */}
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-          <div className="relative w-full max-w-2xl">
+      {/* Fixed header section with search, sort, and status */}
+      <div className="flex-none px-3 sm:px-4 py-2 sm:py-4 space-y-4 sm:space-y-6 container mx-auto">
+        {/* 搜索、排序和筛选入口 */}
+        <div className="flex w-full items-center justify-center gap-2 sm:gap-3">
+          <div className="relative min-w-0 flex-1 lg:max-w-xl">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
             <Input
               placeholder={t('market.searchPlaceholder')}
@@ -448,109 +612,19 @@ function MarketPageContent({
               }}
               onKeyPress={(e) => {
                 if (e.key === 'Enter') {
-                  // Immediately search, clear debounce timer
                   if (searchTimeoutRef.current) {
                     clearTimeout(searchTimeoutRef.current);
                   }
                   handleSearch(searchQuery);
                 }
               }}
-              className="pl-10 pr-4 text-sm sm:text-base"
+              className="min-w-0 pl-10 pr-4 text-sm sm:text-base"
             />
           </div>
 
-          {/* Tags filter */}
-          <TagsFilter
-            availableTags={availableTags}
-            selectedTags={selectedTags}
-            onTagsChange={handleTagsChange}
-          />
-        </div>
-
-        {/* Component filter and sort */}
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 px-3 sm:px-4">
-          {/* Component filter */}
-          <div className="flex flex-col sm:flex-row items-center gap-2 min-w-0 max-w-full">
-            <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
-              {t('market.filterByComponent')}:
-            </span>
-            <div className="overflow-x-auto max-w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
-              <ToggleGroup
-                type="single"
-                spacing={2}
-                size="sm"
-                value={componentFilter}
-                onValueChange={(value) => {
-                  if (value) handleComponentFilterChange(value);
-                }}
-                className="justify-start flex-nowrap"
-              >
-                <ToggleGroupItem
-                  value="all"
-                  aria-label="All components"
-                  className="text-xs sm:text-sm cursor-pointer"
-                >
-                  {t('market.allComponents')}
-                </ToggleGroupItem>
-                <ToggleGroupItem
-                  value="Tool"
-                  aria-label="Tool"
-                  className="text-xs sm:text-sm cursor-pointer"
-                >
-                  <Wrench className="h-4 w-4 mr-1" />
-                  {t('plugins.componentName.Tool')}
-                </ToggleGroupItem>
-                <ToggleGroupItem
-                  value="Command"
-                  aria-label="Command"
-                  className="text-xs sm:text-sm cursor-pointer"
-                >
-                  <Hash className="h-4 w-4 mr-1" />
-                  {t('plugins.componentName.Command')}
-                </ToggleGroupItem>
-                <ToggleGroupItem
-                  value="EventListener"
-                  aria-label="EventListener"
-                  className="text-xs sm:text-sm cursor-pointer"
-                >
-                  <AudioWaveform className="h-4 w-4 mr-1" />
-                  {t('plugins.componentName.EventListener')}
-                </ToggleGroupItem>
-                <ToggleGroupItem
-                  value="KnowledgeEngine"
-                  aria-label="KnowledgeEngine"
-                  className="text-xs sm:text-sm cursor-pointer"
-                >
-                  <Book className="h-4 w-4 mr-1" />
-                  {t('plugins.componentName.KnowledgeEngine')}
-                </ToggleGroupItem>
-                <ToggleGroupItem
-                  value="Parser"
-                  aria-label="Parser"
-                  className="text-xs sm:text-sm cursor-pointer"
-                >
-                  <FileText className="h-4 w-4 mr-1" />
-                  {t('plugins.componentName.Parser')}
-                </ToggleGroupItem>
-                <ToggleGroupItem
-                  value="Page"
-                  aria-label="Page"
-                  className="text-xs sm:text-sm cursor-pointer"
-                >
-                  <PanelTop className="h-4 w-4 mr-1" />
-                  {t('plugins.componentName.Page')}
-                </ToggleGroupItem>
-              </ToggleGroup>
-            </div>
-          </div>
-
-          {/* Sort dropdown */}
-          <div className="flex items-center gap-2 sm:gap-3">
-            <span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">
-              {t('market.sortBy')}:
-            </span>
+          <div className="flex shrink-0 items-center gap-2">
             <Select value={sortOption} onValueChange={handleSortChange}>
-              <SelectTrigger className="w-40 sm:w-48 text-xs sm:text-sm">
+              <SelectTrigger className="w-28 shrink-0 text-xs sm:w-40 sm:text-sm">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
@@ -561,10 +635,151 @@ function MarketPageContent({
                 ))}
               </SelectContent>
             </Select>
+
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  className="relative shrink-0 px-3 sm:px-4"
+                >
+                  <SlidersHorizontal className="h-4 w-4" />
+                  <span className="hidden sm:inline">
+                    {t('market.filters.more')}
+                  </span>
+                  {activeAdvancedFilters > 0 && (
+                    <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] leading-none text-primary-foreground">
+                      {activeAdvancedFilters}
+                    </span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent align="end" className="w-[320px] space-y-4">
+                <div>
+                  <div className="text-sm font-medium">
+                    {t('market.filters.advancedTitle')}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {t('market.filters.advancedDescription')}
+                  </div>
+                </div>
+                <Separator />
+                <div className="space-y-2">
+                  <div className="text-xs font-medium text-muted-foreground">
+                    {t('market.filters.technicalType')}
+                  </div>
+                  <ToggleGroup
+                    type="single"
+                    spacing={2}
+                    size="sm"
+                    value={typeFilter}
+                    onValueChange={(value) => {
+                      if (value) handleTypeFilterChange(value);
+                    }}
+                    className="flex flex-wrap justify-start gap-2"
+                  >
+                    {extensionTypeOptions.map((option) => {
+                      const Icon = option.icon;
+                      return (
+                        <ToggleGroupItem
+                          key={option.value}
+                          value={option.value}
+                          aria-label={option.label}
+                          className="cursor-pointer text-xs"
+                        >
+                          {Icon && <Icon className="mr-1 h-3.5 w-3.5" />}
+                          {option.label}
+                        </ToggleGroupItem>
+                      );
+                    })}
+                  </ToggleGroup>
+                </div>
+                <Separator />
+                <div className="space-y-2">
+                  <div className="flex items-center gap-1 text-xs font-medium text-muted-foreground">
+                    {t('market.filterByComponent')}
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className="inline-flex text-muted-foreground/70 hover:text-foreground"
+                          aria-label={t('market.filterByComponentHint')}
+                        >
+                          <Info className="size-3.5" />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent side="top" className="max-w-64">
+                        {t('market.filterByComponentHint')}
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                  <ToggleGroup
+                    type="single"
+                    spacing={2}
+                    size="sm"
+                    value={componentFilter}
+                    onValueChange={(value) => {
+                      if (value) handleComponentFilterChange(value);
+                    }}
+                    className="flex flex-wrap justify-start gap-2"
+                  >
+                    {componentOptions.map((option) => {
+                      const Icon = option.icon;
+                      return (
+                        <ToggleGroupItem
+                          key={option.value}
+                          value={option.value}
+                          aria-label={option.label}
+                          className="cursor-pointer text-xs"
+                        >
+                          {Icon && <Icon className="mr-1 h-3.5 w-3.5" />}
+                          {option.label}
+                        </ToggleGroupItem>
+                      );
+                    })}
+                  </ToggleGroup>
+                </div>
+              </PopoverContent>
+            </Popover>
+
+            {headerActions}
           </div>
         </div>
 
-        {/* Search results stats */}
+        {/* 用真实标签做快速筛选 */}
+        <div className="mx-auto flex w-full max-w-4xl items-center gap-2 overflow-x-auto pb-1 sm:flex-wrap sm:justify-center sm:overflow-visible">
+          <Button
+            type="button"
+            variant={selectedTags.length === 0 ? 'secondary' : 'ghost'}
+            size="sm"
+            className="h-8 shrink-0"
+            onClick={() => handleTagsChange([])}
+          >
+            {t('market.allExtensions')}
+          </Button>
+          {availableTags.map((tag) => {
+            const selected = selectedTags.includes(tag.tag);
+            return (
+              <Button
+                key={tag.tag}
+                type="button"
+                variant={selected ? 'secondary' : 'ghost'}
+                size="sm"
+                className="h-8 shrink-0"
+                onClick={() => {
+                  const newTags = selected
+                    ? selectedTags.filter((t) => t !== tag.tag)
+                    : [...selectedTags, tag.tag];
+                  handleTagsChange(newTags);
+                }}
+              >
+                {tagNames[tag.tag] || tag.tag}
+                {selected && <X className="h-3.5 w-3.5" />}
+              </Button>
+            );
+          })}
+        </div>
+
+        {/* 搜索结果统计 */}
         {total > 0 && (
           <div className="text-center text-muted-foreground text-sm">
             {searchQuery
@@ -574,22 +789,21 @@ function MarketPageContent({
         )}
       </div>
 
-      {/* Scrollable content area */}
+      {/* Scrollable extension list section */}
       <div
         ref={scrollContainerRef}
-        className="flex-1 overflow-y-auto px-3 sm:px-4"
+        className="flex-1 overflow-y-auto px-3 sm:px-4 pb-6 container mx-auto"
       >
-        {/* Recommendation Lists */}
+        {/* 推荐列表（仅在无搜索/筛选时展示，混合插件/MCP/Skill） */}
         {!searchQuery &&
+          typeFilter === 'all' &&
           componentFilter === 'all' &&
           selectedTags.length === 0 && (
-            <div className="pt-4">
-              <RecommendationLists
-                lists={recommendationLists}
-                tagNames={tagNames}
-                onInstall={handleInstallPlugin}
-              />
-            </div>
+            <RecommendationLists
+              lists={recommendationLists}
+              tagNames={tagNames}
+              onInstall={handleInstallPlugin}
+            />
           )}
 
         {isLoading ? (
@@ -611,7 +825,7 @@ function MarketPageContent({
           </div>
         ) : (
           <>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 pb-6 pt-4">
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,22rem),1fr))] gap-6 mt-6">
               {visiblePlugins.map((plugin) => (
                 <PluginMarketCardComponent
                   key={plugin.pluginId}
@@ -654,8 +868,10 @@ function MarketPageContent({
 // 主组件，包装在 Suspense 中
 export default function MarketPage({
   installPlugin,
+  headerActions,
 }: {
   installPlugin: (plugin: PluginV4) => void;
+  headerActions?: React.ReactNode;
 }) {
   return (
     <Suspense
@@ -667,7 +883,10 @@ export default function MarketPage({
         </div>
       }
     >
-      <MarketPageContent installPlugin={installPlugin} />
+      <MarketPageContent
+        installPlugin={installPlugin}
+        headerActions={headerActions}
+      />
     </Suspense>
   );
 }

web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx

@@ -22,6 +22,15 @@ function pluginToVO(
   plugin: PluginV4,
   t: (key: string) => string,
 ): PluginMarketCardVO {
+  const cloudClient = getCloudServiceClientSync();
+  // Recommendation lists are mixed-type; resolve the icon per extension type.
+  const iconURL =
+    plugin.type === 'mcp'
+      ? cloudClient.getMCPMarketplaceIconURL(plugin.author, plugin.name)
+      : plugin.type === 'skill'
+        ? cloudClient.getSkillMarketplaceIconURL(plugin.author, plugin.name)
+        : cloudClient.getPluginIconURL(plugin.author, plugin.name);
+
   return new PluginMarketCardVO({
     pluginId: plugin.author + ' / ' + plugin.name,
     author: plugin.author,
@@ -30,14 +39,12 @@ function pluginToVO(
     description:
       extractI18nObject(plugin.description) || t('market.noDescription'),
     installCount: plugin.install_count,
-    iconURL: getCloudServiceClientSync().getPluginIconURL(
-      plugin.author,
-      plugin.name,
-    ),
+    iconURL,
     githubURL: plugin.repository,
     version: plugin.latest_version,
     components: plugin.components,
     tags: plugin.tags || [],
+    type: plugin.type,
   });
 }
 
@@ -49,7 +56,7 @@ function RecommendationListRow({
 }: {
   list: RecommendationList;
   tagNames: Record<string, string>;
-  onInstall: (author: string, pluginName: string) => void;
+  onInstall: (cardVO: PluginMarketCardVO) => void;
   isLast: boolean;
 }) {
   const { t } = useTranslation();
@@ -161,7 +168,7 @@ export function RecommendationLists({
 }: {
   lists: RecommendationList[];
   tagNames: Record<string, string>;
-  onInstall: (author: string, pluginName: string) => void;
+  onInstall: (cardVO: PluginMarketCardVO) => void;
 }) {
   if (!lists || lists.length === 0) return null;
 

web/src/app/home/plugins/components/plugin-market/TagsFilter.tsx

@@ -44,7 +44,7 @@ export function TagsFilter({
 
   return (
     <Select open={open} onOpenChange={setOpen}>
-      <SelectTrigger className="w-[140px]">
+      <SelectTrigger className="w-[140px] cursor-pointer">
         <div className="flex items-center gap-2 w-full">
           <TagIcon className="h-4 w-4 flex-shrink-0" />
           {selectedTags.length === 0 ? (

web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx

@@ -1,16 +1,15 @@
 import { PluginMarketCardVO } from './PluginMarketCardVO';
+import { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import PluginComponentList from '../PluginComponentList';
 import { Badge } from '@/components/ui/badge';
+import { Info, Package, ExternalLink } from 'lucide-react';
 import {
-  Wrench,
-  AudioWaveform,
-  Hash,
-  Download,
-  ExternalLink,
-  Book,
-  FileText,
-} from 'lucide-react';
-import { useState, useRef, useEffect } from 'react';
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { Button } from '@/components/ui/button';
 
 export default function PluginMarketCardComponent({
@@ -19,15 +18,40 @@ export default function PluginMarketCardComponent({
   tagNames = {},
 }: {
   cardVO: PluginMarketCardVO;
-  onInstall?: (author: string, pluginName: string) => void;
+  onInstall?: (cardVO: PluginMarketCardVO) => void;
   tagNames?: Record<string, string>;
 }) {
   const { t } = useTranslation();
-  const [isHovered, setIsHovered] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
   const [visibleTags, setVisibleTags] = useState(2);
+  const [iconFailed, setIconFailed] = useState(!cardVO.iconURL);
+
+  const pluginDetailUrl = `https://space.langbot.app/market/${cardVO.author}/${cardVO.pluginName}`;
+
+  const isDeprecated = (() => {
+    if (!cardVO.components) return false;
+    const keys = Object.keys(cardVO.components);
+    return keys.length > 0 && keys.every((k) => k === 'KnowledgeRetriever');
+  })();
+
+  const showTypeBadge = cardVO.type;
+  const typeLabel =
+    cardVO.type === 'mcp'
+      ? t('market.typeMCP')
+      : cardVO.type === 'skill'
+        ? t('market.typeSkill')
+        : t('market.typePlugin');
+  const typeDotClass =
+    cardVO.type === 'mcp'
+      ? 'bg-sky-500/70'
+      : cardVO.type === 'skill'
+        ? 'bg-emerald-500/70'
+        : 'bg-violet-500/70';
+
+  useEffect(() => {
+    setIconFailed(!cardVO.iconURL);
+  }, [cardVO.iconURL]);
 
-  // Measure how many tags fit in the bottom row
   useEffect(() => {
     const tags = cardVO.tags;
     if (!bottomRef.current || !tags || tags.length === 0) return;
@@ -61,44 +85,43 @@ export default function PluginMarketCardComponent({
   }, [cardVO.tags]);
 
   const remainingTags = cardVO.tags ? cardVO.tags.length - visibleTags : 0;
-
-  function handleInstallClick(e: React.MouseEvent) {
-    e.stopPropagation();
-    if (onInstall) {
-      onInstall(cardVO.author, cardVO.pluginName);
-    }
-  }
-
-  function handleViewDetailsClick(e: React.MouseEvent) {
-    e.stopPropagation();
-    const detailUrl = `https://space.langbot.app/market/${cardVO.author}/${cardVO.pluginName}`;
-    window.open(detailUrl, '_blank');
-  }
-
-  const kindIconMap: Record<string, React.ReactNode> = {
-    Tool: <Wrench className="w-4 h-4" />,
-    EventListener: <AudioWaveform className="w-4 h-4" />,
-    Command: <Hash className="w-4 h-4" />,
-    KnowledgeEngine: <Book className="w-4 h-4" />,
-    Parser: <FileText className="w-4 h-4" />,
+  const handleInstallClick = () => {
+    onInstall?.(cardVO);
   };
 
   return (
     <div
-      className="w-[100%] h-auto min-h-[8rem] sm:min-h-[9rem] bg-white rounded-[10px] border border-[#e4e4e7] dark:border-[#27272a] p-3 sm:p-[1rem] hover:border-[#a1a1aa] dark:hover:border-[#3f3f46] transition-all duration-200 dark:bg-[#1f1f22] relative"
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      role="button"
+      tabIndex={0}
+      aria-label={t('market.installCard', { name: cardVO.label })}
+      className="w-[100%] h-[10rem] cursor-pointer bg-white rounded-[10px] shadow-[0px_0px_4px_0_rgba(0,0,0,0.2)] p-3 sm:p-[1rem] hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.15)] transition-shadow duration-200 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-[#1f1f22] dark:shadow-[0px_0px_4px_0_rgba(255,255,255,0.1)] dark:hover:shadow-[0px_2px_8px_0_rgba(255,255,255,0.15)] relative"
+      onClick={handleInstallClick}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          handleInstallClick();
+        }
+      }}
     >
-      <div className="w-full h-full flex flex-col justify-between gap-3">
-        {/* 上部分：插件信息 */}
-        <div className="flex flex-row items-start justify-start gap-2 sm:gap-[1.2rem] min-h-0">
-          <img
-            src={cardVO.iconURL}
-            alt="plugin icon"
-            className="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 rounded-[8%]"
-          />
+      <div className="w-full h-full flex flex-col justify-between">
+        <div className="flex flex-row items-start justify-start gap-2 sm:gap-[1.2rem] min-h-0 flex-1 overflow-hidden">
+          {iconFailed ? (
+            <div className="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 rounded-[8%] border bg-muted text-muted-foreground flex items-center justify-center">
+              <Package className="w-6 h-6 sm:w-8 sm:h-8" />
+            </div>
+          ) : (
+            <img
+              src={cardVO.iconURL}
+              alt="plugin icon"
+              className="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 rounded-[8%] object-cover"
+              loading="lazy"
+              decoding="async"
+              fetchPriority="low"
+              onError={() => setIconFailed(true)}
+            />
+          )}
 
-          <div className="flex-1 flex flex-col items-start justify-start gap-[0.4rem] sm:gap-[0.6rem] min-w-0 overflow-hidden">
+          <div className="flex-1 flex flex-col items-start justify-start gap-[0.4rem] sm:gap-[0.6rem] min-w-0 pr-1 overflow-hidden">
             <div className="flex flex-col items-start justify-start w-full min-w-0">
               <div className="text-[0.65rem] sm:text-[0.7rem] text-[#666] dark:text-[#999] truncate w-full">
                 {cardVO.pluginId}
@@ -107,6 +130,44 @@ export default function PluginMarketCardComponent({
                 <div className="text-base sm:text-[1.2rem] text-black dark:text-[#f0f0f0] truncate">
                   {cardVO.label}
                 </div>
+                {isDeprecated && (
+                  <TooltipProvider delayDuration={200}>
+                    <Tooltip>
+                      <TooltipTrigger
+                        asChild
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }}
+                      >
+                        <Badge
+                          variant="outline"
+                          className="text-[0.6rem] px-1.5 py-0 h-4 flex-shrink-0 border-red-400 text-red-500 dark:border-red-500 dark:text-red-400 gap-0.5 cursor-help"
+                        >
+                          {t('market.deprecated')}
+                          <Info className="w-2.5 h-2.5" />
+                        </Badge>
+                      </TooltipTrigger>
+                      <TooltipContent
+                        side="top"
+                        className="max-w-[240px] text-xs"
+                      >
+                        {t('market.deprecatedTooltip')}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                )}
+                {showTypeBadge && (
+                  <Badge
+                    variant="outline"
+                    className="h-4 max-w-[4.5rem] flex-shrink-0 gap-1 border-border/60 bg-muted/30 px-1.5 py-0 text-[0.58rem] font-normal text-muted-foreground"
+                  >
+                    <span
+                      className={`h-1.5 w-1.5 flex-shrink-0 rounded-full ${typeDotClass}`}
+                    />
+                    <span className="truncate">{typeLabel}</span>
+                  </Badge>
+                )}
               </div>
             </div>
 
@@ -115,31 +176,53 @@ export default function PluginMarketCardComponent({
             </div>
           </div>
 
-          <div className="flex flex-row items-start justify-center gap-[0.4rem] flex-shrink-0">
+          <div className="flex flex-row items-start justify-center gap-1 flex-shrink-0">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              title={t('market.viewDetails')}
+              aria-label={t('market.viewDetails')}
+              className="h-7 w-7 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground"
+              onClick={(e) => {
+                e.stopPropagation();
+                window.open(pluginDetailUrl, '_blank');
+              }}
+            >
+              <ExternalLink className="h-4 w-4" />
+            </Button>
             {cardVO.githubURL && (
-              <svg
-                className="w-5 h-5 sm:w-[1.4rem] sm:h-[1.4rem] text-black cursor-pointer hover:text-gray-600 dark:text-[#f0f0f0] flex-shrink-0"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                title="GitHub"
+                aria-label="GitHub"
+                className="h-7 w-7 rounded-md text-foreground hover:bg-muted hover:text-foreground"
                 onClick={(e) => {
+                  e.preventDefault();
                   e.stopPropagation();
                   window.open(cardVO.githubURL, '_blank');
                 }}
               >
-                <path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"></path>
-              </svg>
+                <svg
+                  className="h-4 w-4"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"></path>
+                </svg>
+              </Button>
             )}
           </div>
         </div>
 
-        {/* 下部分：下载量、标签和组件列表 */}
         <div
           ref={bottomRef}
           className="w-full flex flex-row items-center justify-between gap-2 px-0 sm:px-[0.4rem] flex-shrink-0 overflow-hidden"
         >
           <div className="flex flex-row items-center justify-start gap-2 min-w-0 overflow-hidden">
-            {/* 下载数量 */}
             <div className="flex flex-row items-center gap-[0.3rem] sm:gap-[0.4rem] flex-shrink-0">
               <svg
                 className="w-4 h-4 sm:w-[1.2rem] sm:h-[1.2rem] text-[#2563eb] dark:text-[#5b8def] flex-shrink-0"
@@ -158,7 +241,6 @@ export default function PluginMarketCardComponent({
               </div>
             </div>
 
-            {/* Tags - adaptive */}
             {cardVO.tags && cardVO.tags.length > 0 && visibleTags > 0 && (
               <div className="flex flex-row items-center gap-1.5 overflow-hidden flex-shrink min-w-0">
                 {cardVO.tags.slice(0, visibleTags).map((tag) => (
@@ -197,52 +279,20 @@ export default function PluginMarketCardComponent({
             )}
           </div>
 
-          {/* 组件列表 */}
           {cardVO.components && Object.keys(cardVO.components).length > 0 && (
-            <div className="flex flex-row items-center gap-1">
-              {Object.entries(cardVO.components).map(([kind, count]) => (
-                <Badge
-                  key={kind}
-                  variant="outline"
-                  className="flex items-center gap-1"
-                >
-                  {kindIconMap[kind]}
-                  <span className="ml-1">{count}</span>
-                </Badge>
-              ))}
+            <div className="flex flex-row items-center gap-1 flex-shrink-0">
+              <PluginComponentList
+                components={cardVO.components}
+                showComponentName={false}
+                showTitle={false}
+                useBadge={true}
+                t={t}
+                responsive={false}
+              />
             </div>
           )}
         </div>
       </div>
-
-      {/* Hover overlay with action buttons */}
-      <div
-        className={`absolute inset-0 bg-gray-100/55 dark:bg-black/35 rounded-[10px] flex items-center justify-center gap-3 transition-all duration-200 ${
-          isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'
-        }`}
-      >
-        <Button
-          onClick={handleInstallClick}
-          className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 transition-all duration-200 ${
-            isHovered ? 'translate-y-0 opacity-100' : 'translate-y-1 opacity-0'
-          }`}
-          style={{ transitionDelay: isHovered ? '10ms' : '0ms' }}
-        >
-          <Download className="w-4 h-4" />
-          {t('market.install')}
-        </Button>
-        <Button
-          onClick={handleViewDetailsClick}
-          variant="outline"
-          className={`bg-white hover:bg-gray-100 text-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:text-gray-900 px-4 py-2 rounded-lg shadow-sm flex items-center gap-2 transition-all duration-200 ${
-            isHovered ? 'translate-y-0 opacity-100' : 'translate-y-1 opacity-0'
-          }`}
-          style={{ transitionDelay: isHovered ? '20ms' : '0ms' }}
-        >
-          <ExternalLink className="w-4 h-4" />
-          {t('market.viewDetails')}
-        </Button>
-      </div>
     </div>
   );
 }

web/src/app/home/plugins/components/plugin-market/plugin-market-card/PluginMarketCardVO.ts

@@ -10,6 +10,7 @@ export interface IPluginMarketCardVO {
   version: string;
   components?: Record<string, number>;
   tags?: string[];
+  type?: 'plugin' | 'mcp' | 'skill';
 }
 
 export class PluginMarketCardVO implements IPluginMarketCardVO {
@@ -24,6 +25,7 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
   version: string;
   components?: Record<string, number>;
   tags?: string[];
+  type?: 'plugin' | 'mcp' | 'skill';
 
   constructor(prop: IPluginMarketCardVO) {
     this.description = prop.description;
@@ -37,5 +39,6 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
     this.version = prop.version;
     this.components = prop.components;
     this.tags = prop.tags;
+    this.type = prop.type;
   }
 }

web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx

@@ -3,6 +3,7 @@ import MCPCardComponent from '@/app/home/plugins/mcp-server/mcp-card/MCPCardComp
 import { MCPCardVO } from '@/app/home/plugins/mcp-server/MCPCardVO';
 import { useTranslation } from 'react-i18next';
 import { MCPSessionStatus } from '@/app/infra/entities/api';
+import { Hexagon } from 'lucide-react';
 
 import { httpClient } from '@/app/infra/http/HttpClient';
 
@@ -79,14 +80,7 @@ export default function MCPComponent({
           </div>
         ) : installedServers.length === 0 ? (
           <div className="flex flex-col items-center justify-center text-gray-500 min-h-[60vh] w-full gap-2">
-            <svg
-              className="h-[3rem] w-[3rem]"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path d="M4.5 7.65311V16.3469L12 20.689L19.5 16.3469V7.65311L12 3.311L4.5 7.65311ZM12 1L21.5 6.5V17.5L12 23L2.5 17.5V6.5L12 1ZM6.49896 9.97065L11 12.5765V17.625H13V12.5765L17.501 9.97066L16.499 8.2398L12 10.8445L7.50104 8.2398L6.49896 9.97065Z"></path>
-            </svg>
+            <Hexagon className="h-[3rem] w-[3rem]" />
             <div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div>
           </div>
         ) : (

web/src/app/home/plugins/mcp-server/mcp-card/MCPCardComponent.tsx

@@ -6,7 +6,14 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
-import { RefreshCcw, Wrench, Ban, AlertCircle, Loader2 } from 'lucide-react';
+import {
+  RefreshCcw,
+  Wrench,
+  Ban,
+  AlertCircle,
+  Loader2,
+  Link,
+} from 'lucide-react';
 import { MCPSessionStatus } from '@/app/infra/entities/api';
 
 export default function MCPCardComponent({
@@ -88,15 +95,10 @@ export default function MCPCardComponent({
       onClick={onCardClick}
     >
       <div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          width="64"
-          height="64"
-          fill="rgba(70,146,221,1)"
-        >
-          <path d="M17.6567 14.8284L16.2425 13.4142L17.6567 12C19.2188 10.4379 19.2188 7.90524 17.6567 6.34314C16.0946 4.78105 13.5619 4.78105 11.9998 6.34314L10.5856 7.75736L9.17139 6.34314L10.5856 4.92893C12.9287 2.58578 16.7277 2.58578 19.0709 4.92893C21.414 7.27208 21.414 11.0711 19.0709 13.4142L17.6567 14.8284ZM14.8282 17.6569L13.414 19.0711C11.0709 21.4142 7.27189 21.4142 4.92875 19.0711C2.5856 16.7279 2.5856 12.9289 4.92875 10.5858L6.34296 9.17157L7.75717 10.5858L6.34296 12C4.78086 13.5621 4.78086 16.0948 6.34296 17.6569C7.90506 19.2189 10.4377 19.2189 11.9998 17.6569L13.414 16.2426L14.8282 17.6569ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path>
-        </svg>
+        <Link
+          className="w-16 h-16 flex-shrink-0"
+          style={{ color: 'rgba(70,146,221,1)' }}
+        />
 
         <div className="w-full h-full flex flex-col items-start justify-between gap-[0.6rem]">
           <div className="flex flex-col items-start justify-start gap-[0.3rem]">
@@ -127,22 +129,22 @@ export default function MCPCardComponent({
                   {t('mcp.toolCount', { count: toolsCount })}
                 </div>
               </div>
-            ) : status === MCPSessionStatus.CONNECTING ? (
-              // 连接中 - 蓝色加载
-              <div className="flex flex-row items-center gap-[0.4rem]">
-                <Loader2 className="w-4 h-4 text-blue-500 dark:text-blue-400 animate-spin" />
-                <div className="text-sm text-blue-500 dark:text-blue-400 font-medium">
-                  {t('mcp.connecting')}
-                </div>
-              </div>
-            ) : (
-              // 连接失败 - 红色
+            ) : status === MCPSessionStatus.ERROR ? (
+              // 连接失败 - 红色（仅在明确报错时）
               <div className="flex flex-row items-center gap-[0.4rem]">
                 <AlertCircle className="w-4 h-4 text-red-500 dark:text-red-400" />
                 <div className="text-sm text-red-500 dark:text-red-400 font-medium">
                   {t('mcp.connectionFailedStatus')}
                 </div>
               </div>
+            ) : (
+              // 连接中 - 蓝色加载（CONNECTING 或初始/未知状态，避免误报失败）
+              <div className="flex flex-row items-center gap-[0.4rem]">
+                <Loader2 className="w-4 h-4 text-blue-500 dark:text-blue-400 animate-spin" />
+                <div className="text-sm text-blue-500 dark:text-blue-400 font-medium">
+                  {t('mcp.connecting')}
+                </div>
+              </div>
             )}
           </div>
         </div>

web/src/app/home/plugins/mcp-server/mcp-form/MCPFormDialog.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Loader2, XCircle, Trash2 } from 'lucide-react';
 import { Resolver, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -46,6 +47,8 @@ import {
   MCPServerExtraArgsStdio,
 } from '@/app/infra/entities/api';
 import { CustomApiError } from '@/app/infra/entities/common';
+import { BoxUnavailableNotice } from '@/app/home/components/BoxUnavailableNotice';
+import { useBoxStatus } from '@/app/infra/hooks/useBoxStatus';
 
 // Status Display Component - 在测试中、连接中或连接失败时使用
 function StatusDisplay({
@@ -60,26 +63,7 @@ function StatusDisplay({
   if (testing) {
     return (
       <div className="flex items-center gap-2 text-blue-600">
-        <svg
-          className="w-5 h-5 animate-spin"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
+        <Loader2 className="w-5 h-5 animate-spin" />
         <span className="font-medium">{t('mcp.testing')}</span>
       </div>
     );
@@ -89,49 +73,43 @@ function StatusDisplay({
   if (runtimeInfo.status === MCPSessionStatus.CONNECTING) {
     return (
       <div className="flex items-center gap-2 text-blue-600">
-        <svg
-          className="w-5 h-5 animate-spin"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
+        <Loader2 className="w-5 h-5 animate-spin" />
         <span className="font-medium">{t('mcp.connecting')}</span>
       </div>
     );
   }
 
+  // Stdio MCP refused because Box is disabled / unreachable. The backend
+  // marks the phase so we can show a localized, actionable message instead
+  // of the raw "box_disabled_in_config" / "box_unavailable" marker.
+  if (runtimeInfo.error_phase === 'box_unavailable') {
+    const isDisabledByConfig =
+      runtimeInfo.error_message === 'box_disabled_in_config';
+    return (
+      <div className="space-y-1">
+        <div className="flex items-center gap-2 text-red-600">
+          <XCircle className="w-5 h-5" />
+          <span className="font-medium">{t('mcp.connectionFailed')}</span>
+        </div>
+        <div className="text-sm text-red-500 pl-7 space-y-0.5">
+          <div>
+            {isDisabledByConfig
+              ? t('mcp.boxDisabledStdioRefused')
+              : t('mcp.boxUnavailableStdioRefused')}
+          </div>
+          <div className="text-muted-foreground">
+            {t('mcp.boxStdioRefusedSuggestion')}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   // 连接失败
   return (
     <div className="space-y-1">
       <div className="flex items-center gap-2 text-red-600">
-        <svg
-          className="w-5 h-5"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
+        <XCircle className="w-5 h-5" />
         <span className="font-medium">{t('mcp.connectionFailed')}</span>
       </div>
       {runtimeInfo.error_message && (
@@ -261,6 +239,14 @@ export default function MCPFormDialog({
   const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const watchMode = form.watch('mode');
+  const {
+    available: boxAvailable,
+    hint: boxHint,
+    reason: boxReason,
+  } = useBoxStatus();
+  // stdio mode requires the Box sandbox at runtime. Block creation here
+  // so users aren't surprised by a connection failure on the detail page.
+  const stdioBlockedByBox = watchMode === 'stdio' && !boxAvailable;
 
   // Load server data when editing
   useEffect(() => {
@@ -384,6 +370,12 @@ export default function MCPFormDialog({
   }
 
   async function handleFormSubmit(value: z.infer<typeof formSchema>) {
+    // Belt-and-suspenders: Save button is also disabled in this case, but
+    // a programmatic submit (e.g. Enter key) should still be refused.
+    if (value.mode === 'stdio' && !boxAvailable) {
+      toast.error(t('mcp.stdioBlockedByBoxToast'));
+      return;
+    }
     try {
       let serverConfig: MCPServer;
 
@@ -676,10 +668,24 @@ export default function MCPFormDialog({
                       </FormControl>
                       <SelectContent>
                         <SelectItem value="http">{t('mcp.http')}</SelectItem>
-                        <SelectItem value="stdio">{t('mcp.stdio')}</SelectItem>
+                        <SelectItem value="stdio" disabled={!boxAvailable}>
+                          {t('mcp.stdio')}
+                          {!boxAvailable && (
+                            <span className="ml-2 text-xs text-muted-foreground">
+                              ({t('mcp.boxRequired')})
+                            </span>
+                          )}
+                        </SelectItem>
                         <SelectItem value="sse">{t('mcp.sse')}</SelectItem>
                       </SelectContent>
                     </Select>
+                    {stdioBlockedByBox && (
+                      <BoxUnavailableNotice
+                        hint={boxHint}
+                        reason={boxReason}
+                        className="mt-2"
+                      />
+                    )}
                     <FormMessage />
                   </FormItem>
                 )}
@@ -780,14 +786,7 @@ export default function MCPFormDialog({
                             className="p-2 hover:bg-gray-100 rounded"
                             onClick={() => removeStdioArg(index)}
                           >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24"
-                              fill="currentColor"
-                              className="w-5 h-5 text-red-500"
-                            >
-                              <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
-                            </svg>
+                            <Trash2 className="w-5 h-5 text-red-500" />
                           </button>
                         </div>
                       ))}
@@ -851,14 +850,7 @@ export default function MCPFormDialog({
                         className="p-2 hover:bg-gray-100 rounded"
                         onClick={() => removeExtraArg(index)}
                       >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          viewBox="0 0 24 24"
-                          fill="currentColor"
-                          className="w-5 h-5 text-red-500"
-                        >
-                          <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
-                        </svg>
+                        <Trash2 className="w-5 h-5 text-red-500" />
                       </button>
                     </div>
                   ))}
@@ -885,7 +877,7 @@ export default function MCPFormDialog({
                   </Button>
                 )}
 
-                <Button type="submit">
+                <Button type="submit" disabled={stdioBlockedByBox}>
                   {isEditMode ? t('common.save') : t('common.submit')}
                 </Button>
 

web/src/app/home/plugins/plugins.module.css

@@ -14,8 +14,15 @@
   padding-top: 2rem;
   padding-bottom: 2rem;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
-  gap: 2rem;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
+  gap: 1.25rem;
   justify-items: stretch;
   align-items: start;
 }
+
+@media (min-width: 640px) {
+  .pluginListContainer {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
+    gap: 2rem;
+  }
+}

web/src/app/home/skills/SkillDetailContent.tsx

@@ -0,0 +1,220 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import SkillForm from '@/app/home/skills/components/skill-form/SkillForm';
+import { BoxUnavailableNotice } from '@/app/home/components/BoxUnavailableNotice';
+import { useBoxStatus } from '@/app/infra/hooks/useBoxStatus';
+import { Sparkles, Trash2 } from 'lucide-react';
+
+export default function SkillDetailContent({ id }: { id: string }) {
+  const isCreateMode = id === 'new';
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  const { refreshSkills, skills, setDetailEntityName } = useSidebarData();
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const skill = skills.find((item) => item.id === id);
+  const {
+    available: boxAvailable,
+    hint: boxHint,
+    reason: boxReason,
+  } = useBoxStatus();
+
+  useEffect(() => {
+    if (isCreateMode) {
+      setDetailEntityName(t('skills.createSkill'));
+    } else {
+      setDetailEntityName(skill?.name ?? id);
+    }
+    return () => setDetailEntityName(null);
+  }, [id, isCreateMode, setDetailEntityName, skill, t]);
+
+  function handleImportedSkills(skillNames: string[]) {
+    void refreshSkills();
+    const primarySkill = skillNames[0];
+    if (primarySkill) {
+      navigate(`/home/skills?id=${encodeURIComponent(primarySkill)}`);
+      return;
+    }
+    navigate('/home/skills');
+  }
+
+  function handleSkillUpdated() {
+    void refreshSkills();
+  }
+
+  async function confirmDelete() {
+    try {
+      await httpClient.deleteSkill(id);
+      toast.success(t('skills.deleteSuccess'));
+      setShowDeleteConfirm(false);
+      void refreshSkills();
+      navigate('/home/skills');
+    } catch (error) {
+      toast.error(t('skills.deleteError') + String(error));
+    }
+  }
+
+  if (isCreateMode) {
+    return (
+      <div className="flex h-full flex-col">
+        <div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0 space-y-1">
+            <div className="flex min-w-0 items-center gap-3">
+              <h1 className="truncate text-xl font-semibold">
+                {t('skills.createSkill')}
+              </h1>
+              <Badge variant="outline" className="shrink-0 text-[0.7rem]">
+                <Sparkles className="size-3.5" />
+                {t('skills.title')}
+              </Badge>
+            </div>
+          </div>
+          <Button
+            type="submit"
+            form="skill-form"
+            className="shrink-0"
+            disabled={!boxAvailable}
+          >
+            {t('common.save')}
+          </Button>
+        </div>
+
+        {!boxAvailable && (
+          <div className="pb-4 shrink-0">
+            <BoxUnavailableNotice hint={boxHint} reason={boxReason} />
+          </div>
+        )}
+
+        <div className="min-h-0 flex-1">
+          <SkillForm
+            key="new-skill"
+            initSkillName={undefined}
+            layout="split"
+            onNewSkillCreated={(skillName) => handleImportedSkills([skillName])}
+            onSkillUpdated={() => {}}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  const editActions = (
+    <Card className="border-destructive/50">
+      <CardHeader>
+        <CardTitle className="text-destructive">
+          {t('skills.dangerZone')}
+        </CardTitle>
+        <CardDescription>{t('skills.dangerZoneDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div className="space-y-1">
+            <p className="text-sm font-medium">{t('skills.delete')}</p>
+            <p className="text-sm text-muted-foreground">
+              {t('skills.deleteConfirmation')}
+            </p>
+          </div>
+          <Button
+            variant="destructive"
+            type="button"
+            size="sm"
+            onClick={() => setShowDeleteConfirm(true)}
+            className="shrink-0"
+          >
+            <Trash2 className="mr-1.5 size-4" />
+            {t('common.delete')}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+
+  return (
+    <>
+      <div className="flex h-full flex-col">
+        <div className="flex shrink-0 flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0 space-y-1">
+            <div className="flex min-w-0 items-center gap-3">
+              <h1 className="truncate text-xl font-semibold">
+                {skill?.name ?? id}
+              </h1>
+              <Badge variant="outline" className="shrink-0 text-[0.7rem]">
+                <Sparkles className="size-3.5" />
+                {t('skills.title')}
+              </Badge>
+            </div>
+            {skill?.description && (
+              <p className="line-clamp-2 text-sm text-muted-foreground">
+                {skill.description}
+              </p>
+            )}
+          </div>
+          <Button
+            type="submit"
+            form="skill-form"
+            className="shrink-0"
+            disabled={!boxAvailable}
+          >
+            {t('common.save')}
+          </Button>
+        </div>
+
+        {!boxAvailable && (
+          <div className="pb-4 shrink-0">
+            <BoxUnavailableNotice hint={boxHint} reason={boxReason} />
+          </div>
+        )}
+
+        <div className="min-h-0 flex-1">
+          <SkillForm
+            key={id}
+            initSkillName={id}
+            layout="split"
+            sideFooter={editActions}
+            onNewSkillCreated={(skillName) => handleImportedSkills([skillName])}
+            onSkillUpdated={handleSkillUpdated}
+          />
+        </div>
+      </div>
+
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent className="max-h-[min(420px,80vh)] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">{t('skills.deleteConfirmation')}</div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteConfirm(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              {t('common.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

web/src/app/home/skills/components/SkillZipPreviewPanel.tsx

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+import { BookOpen, FileArchive, Loader2, PackageOpen } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import type { Skill } from '@/app/infra/entities/api';
+import { cn } from '@/lib/utils';
+
+interface PreviewSkill extends Skill {
+  source_path?: string;
+}
+
+interface SkillZipPreviewPanelProps {
+  file: File;
+  onImported: (skillNames: string[]) => void;
+  onCancel?: () => void;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];
+}
+
+function previewPath(skill: PreviewSkill): string {
+  return skill.source_path ?? '';
+}
+
+function displayPreviewPath(skill: PreviewSkill): string {
+  return previewPath(skill) || skill.name;
+}
+
+function truncateInstructions(instructions?: string): string {
+  if (!instructions) return '';
+  const trimmed = instructions.trim();
+  if (trimmed.length <= 900) return trimmed;
+  return trimmed.slice(0, 900).trimEnd() + '\n...';
+}
+
+export default function SkillZipPreviewPanel({
+  file,
+  onImported,
+  onCancel,
+}: SkillZipPreviewPanelProps) {
+  const { t } = useTranslation();
+  const [previewSkills, setPreviewSkills] = useState<PreviewSkill[]>([]);
+  const [selectedPaths, setSelectedPaths] = useState<string[]>([]);
+  const [activePath, setActivePath] = useState('');
+  const [previewing, setPreviewing] = useState(false);
+  const [installing, setInstalling] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const lastPreviewSignatureRef = useRef('');
+  const previewFileSignature = `${file.name}:${file.size}:${file.lastModified}`;
+
+  const activeSkill = useMemo(
+    () =>
+      previewSkills.find((skill) => previewPath(skill) === activePath) ||
+      previewSkills[0] ||
+      null,
+    [activePath, previewSkills],
+  );
+
+  const loadPreview = useCallback(async () => {
+    setPreviewing(true);
+    setPreviewSkills([]);
+    setSelectedPaths([]);
+    setActivePath('');
+    setErrorMessage(null);
+
+    try {
+      const resp = await httpClient.previewSkillInstallFromUpload(file);
+      const skills = (resp.skills || []) as PreviewSkill[];
+      setPreviewSkills(skills);
+      const paths = skills.map(previewPath);
+      setSelectedPaths(paths);
+      setActivePath(paths[0] || '');
+      if (skills.length === 0) {
+        setErrorMessage(t('skills.noSkillMdInDirectory'));
+      } else {
+        setErrorMessage(null);
+      }
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : typeof error === 'object' && error && 'msg' in error
+            ? String((error as { msg?: string }).msg || '')
+            : String(error);
+      setErrorMessage(message || t('skills.previewLoadError'));
+    } finally {
+      setPreviewing(false);
+    }
+  }, [file, t]);
+
+  useEffect(() => {
+    if (lastPreviewSignatureRef.current === previewFileSignature) return;
+    lastPreviewSignatureRef.current = previewFileSignature;
+    void loadPreview();
+  }, [loadPreview, previewFileSignature]);
+
+  function toggleSelection(path: string) {
+    setSelectedPaths((current) => {
+      if (current.includes(path)) {
+        const next = current.filter((item) => item !== path);
+        if (activePath === path) {
+          setActivePath(next[0] || path);
+        }
+        return next;
+      }
+      setActivePath(path);
+      return [...current, path];
+    });
+  }
+
+  async function handleInstall() {
+    if (selectedPaths.length === 0) return;
+
+    setInstalling(true);
+    setErrorMessage(null);
+    try {
+      const resp = await httpClient.installSkillFromUpload(file, selectedPaths);
+      toast.success(t('skills.installSuccess'));
+      onImported(resp.skills.map((skill) => skill.name));
+    } catch (error: unknown) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : typeof error === 'object' && error && 'msg' in error
+            ? String((error as { msg?: string }).msg || '')
+            : String(error);
+      setErrorMessage(message || t('skills.installError'));
+    } finally {
+      setInstalling(false);
+    }
+  }
+
+  const activeInstructions = truncateInstructions(activeSkill?.instructions);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-start gap-3 rounded-md bg-muted/40 px-3 py-3">
+        <div className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md bg-background text-muted-foreground">
+          {previewing ? (
+            <Loader2 className="size-4 animate-spin" />
+          ) : (
+            <FileArchive className="size-4" />
+          )}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium">
+            {previewing ? t('skills.loading') : t('skills.preview')}
+          </div>
+          <div className="mt-1 break-all text-xs text-muted-foreground">
+            {file.name} · {formatFileSize(file.size)}
+          </div>
+        </div>
+      </div>
+
+      {previewSkills.length > 0 && (
+        <div
+          className={cn(
+            'grid gap-4',
+            previewSkills.length > 1 && 'md:grid-cols-[240px_minmax(0,1fr)]',
+          )}
+        >
+          {previewSkills.length > 1 && (
+            <div className="space-y-2">
+              {previewSkills.map((skill) => {
+                const path = previewPath(skill);
+                const displayPath = displayPreviewPath(skill);
+                const selected = selectedPaths.includes(path);
+                const active = activePath === path;
+
+                return (
+                  <button
+                    key={`${path}:${skill.name}`}
+                    type="button"
+                    className={cn(
+                      'flex w-full items-start gap-2 rounded-md px-3 py-2 text-left transition-colors',
+                      active ? 'bg-accent' : 'bg-muted/30 hover:bg-accent/70',
+                    )}
+                    onClick={() => setActivePath(path)}
+                  >
+                    <Checkbox
+                      checked={selected}
+                      onCheckedChange={() => toggleSelection(path)}
+                      onClick={(event) => event.stopPropagation()}
+                      className="mt-0.5"
+                    />
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm font-medium">
+                        {skill.display_name || skill.name}
+                      </span>
+                      {path && (
+                        <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                          {displayPath}
+                        </span>
+                      )}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          {activeSkill && (
+            <div className="min-w-0 space-y-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <BookOpen className="size-4 text-muted-foreground" />
+                <h3 className="min-w-0 truncate text-base font-semibold">
+                  {activeSkill.display_name || activeSkill.name}
+                </h3>
+              </div>
+
+              {activeSkill.description && (
+                <p className="text-sm leading-6 text-muted-foreground">
+                  {activeSkill.description}
+                </p>
+              )}
+
+              {activeInstructions && (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">
+                    {t('skills.previewInstructions')}
+                  </div>
+                  <div className="max-h-56 overflow-y-auto rounded-md bg-muted/40 p-3 font-mono text-xs leading-5 whitespace-pre-wrap">
+                    {activeInstructions}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {errorMessage && (
+        <div className="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive">
+          {errorMessage}
+        </div>
+      )}
+
+      <div className="flex justify-end gap-2">
+        {onCancel && (
+          <Button variant="outline" onClick={onCancel} disabled={installing}>
+            {t('common.cancel')}
+          </Button>
+        )}
+        <Button
+          type="button"
+          onClick={handleInstall}
+          disabled={
+            previewing ||
+            installing ||
+            previewSkills.length === 0 ||
+            selectedPaths.length === 0
+          }
+        >
+          {installing ? (
+            <>
+              <Loader2 className="size-4 animate-spin" />
+              {t('skills.installing')}
+            </>
+          ) : (
+            <>
+              <PackageOpen className="size-4" />
+              {t('skills.confirmInstall')}
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}

web/src/app/home/skills/page.tsx

@@ -0,0 +1,85 @@
+import { useEffect } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import SkillDetailContent from '@/app/home/skills/SkillDetailContent';
+import SkillForm from '@/app/home/skills/components/skill-form/SkillForm';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
+import { BoxUnavailableNotice } from '@/app/home/components/BoxUnavailableNotice';
+import { useBoxStatus } from '@/app/infra/hooks/useBoxStatus';
+
+export default function SkillsPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const detailId = searchParams.get('id');
+  const actionParam = searchParams.get('action');
+  const { refreshSkills } = useSidebarData();
+
+  const isCreateView = actionParam === 'create';
+  const {
+    available: boxAvailable,
+    hint: boxHint,
+    reason: boxReason,
+  } = useBoxStatus();
+
+  useEffect(() => {
+    if (!detailId && !isCreateView) {
+      navigate('/home/add-extension', { replace: true });
+    }
+  }, [detailId, isCreateView, navigate]);
+
+  if (detailId) {
+    return <SkillDetailContent id={detailId} />;
+  }
+
+  function handleCreatedSkill(skillName: string) {
+    void refreshSkills();
+    navigate(`/home/skills?id=${encodeURIComponent(skillName)}`, {
+      replace: true,
+    });
+  }
+
+  function handleCancel() {
+    navigate('/home/add-extension');
+  }
+
+  if (!isCreateView) {
+    return null;
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="flex items-center justify-between pb-4 shrink-0">
+        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+          <h1 className="text-xl font-semibold">{t('skills.createSkill')}</h1>
+          <p className="text-sm text-muted-foreground">
+            {t('skills.createSkillDescription')}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={handleCancel}>
+            {t('common.cancel')}
+          </Button>
+          <Button type="submit" form="skill-form" disabled={!boxAvailable}>
+            {t('common.save')}
+          </Button>
+        </div>
+      </div>
+      {!boxAvailable && (
+        <div className="pb-4 shrink-0">
+          <BoxUnavailableNotice hint={boxHint} reason={boxReason} />
+        </div>
+      )}
+      <div className="min-h-0 flex-1">
+        <SkillForm
+          key="new-skill"
+          initSkillName={undefined}
+          layout="split"
+          onNewSkillCreated={handleCreatedSkill}
+          onSkillUpdated={() => {}}
+        />
+      </div>
+    </div>
+  );
+}

web/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx

@@ -1,27 +0,0 @@
-import styles from './createCartComponent.module.css';
-
-export default function CreateCardComponent({
-  height,
-  plusSize,
-  onClick,
-  width = '100%',
-}: {
-  height: string;
-  plusSize: string;
-  onClick: () => void;
-  width?: string;
-}) {
-  return (
-    <div
-      className={`${styles.cardContainer} ${styles.createCardContainer} `}
-      style={{
-        width: `${width}`,
-        height: `${height}`,
-        fontSize: `${plusSize}px`,
-      }}
-      onClick={onClick}
-    >
-      +
-    </div>
-  );
-}

web/src/app/infra/entities/api/index.ts

@@ -280,6 +280,15 @@ export interface ApiRespPlugins {
   plugins: Plugin[];
 }
 
+export type ExtensionItem =
+  | { type: 'plugin'; plugin: Plugin }
+  | { type: 'mcp'; server: MCPServer }
+  | { type: 'skill'; skill: Skill };
+
+export interface ApiRespExtensions {
+  extensions: ExtensionItem[];
+}
+
 export interface ApiRespPlugin {
   plugin: Plugin;
 }
@@ -351,6 +360,37 @@ export interface ApiRespPluginSystemStatus {
   plugin_connector_error: string;
 }
 
+export interface ApiRespBoxStatus {
+  available: boolean;
+  /** Whether ``box.enabled`` is true in config. When false, the sandbox
+   * is deliberately disabled — distinct from "configured but failed". */
+  enabled?: boolean;
+  profile: string;
+  recent_error_count: number;
+  connector_error?: string;
+  backend?: {
+    name: string;
+    available: boolean;
+  };
+  active_sessions?: number;
+  managed_processes?: number;
+  session_ttl_sec?: number;
+}
+
+export interface BoxSessionInfo {
+  session_id: string;
+  backend_name: string;
+  image: string;
+  network: string;
+  host_path: string | null;
+  host_path_mode: string;
+  mount_path: string;
+  cpus: number;
+  memory_mb: number;
+  created_at: string;
+  last_used_at: string;
+}
+
 export interface ApiRespAsyncTasks {
   tasks: AsyncTask[];
 }
@@ -489,8 +529,18 @@ export enum MCPSessionStatus {
 export interface MCPServerRuntimeInfo {
   status: MCPSessionStatus;
   error_message?: string;
+  /** Stage at which the session failed. Frontends key off this to render
+   *  a localized actionable message instead of the raw ``error_message``.
+   *  Notable values: ``box_unavailable`` (stdio MCP refused because Box is
+   *  disabled / unreachable). See ``MCPSessionErrorPhase`` (backend). */
+  error_phase?: string;
+  retry_count?: number;
   tool_count: number;
   tools: MCPTool[];
+  /** Optional ``box_session_id`` / ``box_enabled`` set when this stdio
+   *  server runs inside Box. Absent when Box is unavailable. */
+  box_session_id?: string;
+  box_enabled?: boolean;
 }
 
 export type MCPServer =
@@ -545,3 +595,23 @@ export interface ApiRespTools {
 export interface ApiRespToolDetail {
   tool: PluginTool;
 }
+
+// Skills
+export interface Skill {
+  name: string;
+  display_name?: string;
+  description: string;
+  instructions?: string;
+  package_root?: string;
+  is_builtin?: boolean;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface ApiRespSkills {
+  skills: Skill[];
+}
+
+export interface ApiRespSkill {
+  skill: Skill;
+}

web/src/app/infra/entities/form/dynamic.ts

@@ -16,7 +16,18 @@ export interface IDynamicFormItemSchema {
   type: DynamicFormItemType;
   description?: I18nObject;
   options?: IDynamicFormItemOption[];
+  /** When the condition matches, the field is rendered. Same evaluator as
+   *  ``disable_if`` — supports the ``__system.*`` namespace via
+   *  ``DynamicFormComponent.systemContext``. */
   show_if?: IShowIfCondition;
+  /** When the condition matches, the field is rendered as read-only/disabled
+   *  but stays visible. Use this when the operator needs to see that the
+   *  field exists but can't be edited under the current runtime state (e.g.
+   *  a sandbox-bound field when Box is disabled). Pair with
+   *  ``disabled_tooltip`` to explain why. */
+  disable_if?: IShowIfCondition;
+  /** Tooltip shown next to the field label when ``disable_if`` is active. */
+  disabled_tooltip?: I18nObject;
 
   /** when type is PLUGIN_SELECTOR, the scopes is the scopes of components(plugin contains), the default is all */
   scopes?: string[];

web/src/app/infra/entities/plugin/index.ts

@@ -31,6 +31,8 @@ export enum PluginV4Status {
 export interface PluginV4 {
   id: number;
   plugin_id: string;
+  mcp_id?: string;
+  skill_id?: string;
   author: string;
   name: string;
   label: I18nObject;
@@ -42,6 +44,7 @@ export interface PluginV4 {
   latest_version: string;
   components: Record<string, number>;
   status: PluginV4Status;
+  type?: 'plugin' | 'mcp' | 'skill';
   created_at: string;
   updated_at: string;
 }

web/src/app/infra/hooks/useBoxStatus.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import type { ApiRespBoxStatus } from '@/app/infra/entities/api';
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+/**
+ * Shared hook for Box runtime status — used by every UI surface that needs
+ * to gate behaviour on whether the sandbox is available. Returns:
+ *
+ *   - status: full payload (or null while loading / on error)
+ *   - available: convenience flag (status?.available === true)
+ *   - disabled: true iff Box is explicitly disabled by config
+ *               (status.enabled === false), distinguishing it from
+ *               "configured but currently failed"
+ *   - hint: a single i18n-key choice for the banner message —
+ *           'boxDisabled' / 'boxUnavailable' / null
+ *   - refresh: imperative re-fetch
+ *
+ * Polls every ``refreshMs`` (default 30s) so a flapping runtime is picked
+ * up without a page reload.
+ */
+export function useBoxStatus(refreshMs = 30_000) {
+  const [status, setStatus] = useState<ApiRespBoxStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(async () => {
+    try {
+      const data = await httpClient.getBoxStatus();
+      setStatus(data);
+    } catch {
+      // Keep last-known status; the dashboard polls separately so a
+      // transient failure here should not blank the UI for sandbox
+      // consumers.
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+    const id = setInterval(() => void refresh(), refreshMs);
+    return () => clearInterval(id);
+  }, [refresh, refreshMs]);
+
+  const available = status?.available === true;
+  const disabled = status?.available === false && status?.enabled === false;
+  const hint: 'boxDisabled' | 'boxUnavailable' | null = available
+    ? null
+    : disabled
+      ? 'boxDisabled'
+      : status
+        ? 'boxUnavailable'
+        : null;
+  // Specific reason from the backend (e.g.
+  // ``Configured sandbox backend "nsjail" is unavailable`` or
+  // ``docker daemon not running``). Surface this in the failed-state
+  // banner so the user sees WHY instead of a generic "unavailable".
+  // For the disabled-by-config case the boxDisabled i18n string already
+  // carries the reason, so we suppress the duplicate.
+  const reason =
+    hint === 'boxUnavailable' ? status?.connector_error?.trim() || null : null;
+
+  return { status, loading, available, disabled, hint, reason, refresh };
+}

web/src/app/infra/http/BackendClient.ts

@@ -15,6 +15,7 @@ import {
   ApiRespPlugins,
   ApiRespPlugin,
   ApiRespPluginConfig,
+  ApiRespExtensions,
   AsyncTaskCreatedResp,
   ApiRespSystemInfo,
   ApiRespAsyncTasks,
@@ -35,6 +36,8 @@ import {
   ApiRespProviderRerankModel,
   RerankModel,
   ApiRespPluginSystemStatus,
+  ApiRespBoxStatus,
+  BoxSessionInfo,
   ApiRespMCPServers,
   ApiRespMCPServer,
   MCPServer,
@@ -47,8 +50,12 @@ import {
   RagMigrationStatusResp,
   ApiRespTools,
   ApiRespToolDetail,
+  Skill,
+  ApiRespSkills,
+  ApiRespSkill,
 } from '@/app/infra/entities/api';
 import { Plugin } from '@/app/infra/entities/plugin';
+import type { I18nObject } from '@/app/infra/entities/common';
 import { GetBotLogsRequest } from '@/app/infra/http/requestParam/bots/GetBotLogsRequest';
 import { GetBotLogsResponse } from '@/app/infra/http/requestParam/bots/GetBotLogsResponse';
 
@@ -260,10 +267,13 @@ export class BackendClient extends BaseHttpClient {
   public getPipelineExtensions(uuid: string): Promise<{
     enable_all_plugins: boolean;
     enable_all_mcp_servers: boolean;
+    enable_all_skills: boolean;
     bound_plugins: Array<{ author: string; name: string }>;
     available_plugins: Plugin[];
     bound_mcp_servers: string[];
     available_mcp_servers: MCPServer[];
+    bound_skills: string[];
+    available_skills: Skill[];
   }> {
     return this.get(`/api/v1/pipelines/${uuid}/extensions`);
   }
@@ -274,12 +284,16 @@ export class BackendClient extends BaseHttpClient {
     bound_mcp_servers: string[],
     enable_all_plugins: boolean = true,
     enable_all_mcp_servers: boolean = true,
+    bound_skills: string[] = [],
+    enable_all_skills: boolean = true,
   ): Promise<object> {
     return this.put(`/api/v1/pipelines/${uuid}/extensions`, {
       bound_plugins,
       bound_mcp_servers,
       enable_all_plugins,
       enable_all_mcp_servers,
+      bound_skills,
+      enable_all_skills,
     });
   }
 
@@ -531,6 +545,11 @@ export class BackendClient extends BaseHttpClient {
     return this.get(`/api/v1/knowledge/parsers${params}`);
   }
 
+  // ============ Extensions API ============
+  public getExtensions(): Promise<ApiRespExtensions> {
+    return this.get('/api/v1/extensions');
+  }
+
   // ============ Plugins API ============
   public getPlugins(): Promise<ApiRespPlugins> {
     return this.get('/api/v1/plugins');
@@ -653,9 +672,12 @@ export class BackendClient extends BaseHttpClient {
       published_at: string;
       prerelease: boolean;
       draft: boolean;
+      source_type?: 'release' | 'tag' | 'branch';
+      archive_url?: string;
     }>;
     owner: string;
     repo: string;
+    source_subdir?: string;
   }> {
     return this.post('/api/v1/plugins/github/releases', { repo_url: repoUrl });
   }
@@ -664,6 +686,9 @@ export class BackendClient extends BaseHttpClient {
     owner: string,
     repo: string,
     releaseId: number,
+    releaseTag?: string,
+    sourceType?: 'release' | 'tag' | 'branch',
+    archiveUrl?: string,
   ): Promise<{
     assets: Array<{
       id: number;
@@ -677,6 +702,9 @@ export class BackendClient extends BaseHttpClient {
       owner,
       repo,
       release_id: releaseId,
+      release_tag: releaseTag,
+      source_type: sourceType,
+      archive_url: archiveUrl,
     });
   }
 
@@ -686,6 +714,83 @@ export class BackendClient extends BaseHttpClient {
     return this.postFile('/api/v1/plugins/install/local', formData);
   }
 
+  public previewPluginInstallFromLocal(file: File): Promise<{
+    filename: string;
+    size: number;
+    manifest: Record<string, unknown>;
+    metadata: {
+      author?: string;
+      name?: string;
+      version?: string;
+      label?: I18nObject;
+      description?: I18nObject;
+      repository?: string;
+    };
+    component_types: string[];
+    component_counts: Record<string, number>;
+    requirements: string[];
+    file_count: number;
+  }> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return this.postFile('/api/v1/plugins/install/local/preview', formData);
+  }
+
+  // ============ Skill Install API ============
+  public installSkillFromGithub(
+    assetUrl: string,
+    owner: string,
+    repo: string,
+    releaseTag: string,
+    sourcePaths?: string[],
+    sourceSubdir?: string,
+  ): Promise<ApiRespSkills> {
+    return this.post('/api/v1/skills/install/github', {
+      asset_url: assetUrl,
+      owner,
+      repo,
+      release_tag: releaseTag,
+      source_paths: sourcePaths,
+      source_subdir: sourceSubdir,
+    });
+  }
+
+  public previewSkillInstallFromGithub(
+    assetUrl: string,
+    owner: string,
+    repo: string,
+    releaseTag: string,
+    sourceSubdir?: string,
+  ): Promise<{ skills: Skill[] }> {
+    return this.post('/api/v1/skills/install/github/preview', {
+      asset_url: assetUrl,
+      owner,
+      repo,
+      release_tag: releaseTag,
+      source_subdir: sourceSubdir,
+    });
+  }
+
+  public previewSkillInstallFromUpload(
+    file: File,
+  ): Promise<{ skills: Skill[] }> {
+    const formData = new FormData();
+    formData.append('file', file);
+    return this.postFile('/api/v1/skills/install/upload/preview', formData);
+  }
+
+  public installSkillFromUpload(
+    file: File,
+    sourcePaths?: string[],
+  ): Promise<ApiRespSkills> {
+    const formData = new FormData();
+    formData.append('file', file);
+    for (const sourcePath of sourcePaths || []) {
+      formData.append('source_paths', sourcePath);
+    }
+    return this.postFile('/api/v1/skills/install/upload', formData);
+  }
+
   public installPluginFromMarketplace(
     author: string,
     name: string,
@@ -731,7 +836,7 @@ export class BackendClient extends BaseHttpClient {
   }
 
   public getMCPServer(serverName: string): Promise<ApiRespMCPServer> {
-    return this.get(`/api/v1/mcp/servers/${serverName}`);
+    return this.get(`/api/v1/mcp/servers/${encodeURIComponent(serverName)}`);
   }
 
   public createMCPServer(server: MCPServer): Promise<AsyncTaskCreatedResp> {
@@ -742,18 +847,21 @@ export class BackendClient extends BaseHttpClient {
     serverName: string,
     server: Partial<MCPServer>,
   ): Promise<AsyncTaskCreatedResp> {
-    return this.put(`/api/v1/mcp/servers/${serverName}`, server);
+    return this.put(
+      `/api/v1/mcp/servers/${encodeURIComponent(serverName)}`,
+      server,
+    );
   }
 
   public deleteMCPServer(serverName: string): Promise<AsyncTaskCreatedResp> {
-    return this.delete(`/api/v1/mcp/servers/${serverName}`);
+    return this.delete(`/api/v1/mcp/servers/${encodeURIComponent(serverName)}`);
   }
 
   public toggleMCPServer(
     serverName: string,
     target_enabled: boolean,
   ): Promise<AsyncTaskCreatedResp> {
-    return this.put(`/api/v1/mcp/servers/${serverName}`, {
+    return this.put(`/api/v1/mcp/servers/${encodeURIComponent(serverName)}`, {
       enable: target_enabled,
     });
   }
@@ -762,7 +870,10 @@ export class BackendClient extends BaseHttpClient {
     serverName: string,
     serverData: object,
   ): Promise<AsyncTaskCreatedResp> {
-    return this.post(`/api/v1/mcp/servers/${serverName}/test`, serverData);
+    return this.post(
+      `/api/v1/mcp/servers/${encodeURIComponent(serverName)}/test`,
+      serverData,
+    );
   }
 
   public installMCPServerFromGithub(
@@ -839,6 +950,14 @@ export class BackendClient extends BaseHttpClient {
     return this.get('/api/v1/plugins/debug-info');
   }
 
+  public getBoxStatus(): Promise<ApiRespBoxStatus> {
+    return this.get('/api/v1/box/status');
+  }
+
+  public getBoxSessions(): Promise<BoxSessionInfo[]> {
+    return this.get('/api/v1/box/sessions');
+  }
+
   // ============ User API ============
   public checkIfInited(): Promise<{ initialized: boolean }> {
     return this.get('/api/v1/user/init');
@@ -1133,6 +1252,98 @@ export class BackendClient extends BaseHttpClient {
   public dismissSurvey(surveyId: string): Promise<object> {
     return this.post('/api/v1/survey/dismiss', { survey_id: surveyId });
   }
+
+  // ============ Skills API ============
+
+  public getSkills(): Promise<ApiRespSkills> {
+    return this.get('/api/v1/skills');
+  }
+
+  public getSkill(name: string): Promise<ApiRespSkill> {
+    return this.get(`/api/v1/skills/${name}`);
+  }
+
+  public createSkill(
+    skill: Omit<Skill, 'name'> & { name: string },
+  ): Promise<ApiRespSkill> {
+    return this.post('/api/v1/skills', skill);
+  }
+
+  public updateSkill(
+    name: string,
+    skill: Partial<Skill>,
+  ): Promise<ApiRespSkill> {
+    return this.put(`/api/v1/skills/${name}`, skill);
+  }
+
+  public deleteSkill(name: string): Promise<object> {
+    return this.delete(`/api/v1/skills/${name}`);
+  }
+
+  public previewSkill(name: string): Promise<{ instructions: string }> {
+    return this.get(`/api/v1/skills/${name}/preview`);
+  }
+
+  public getSkillIndex(pipelineUuid?: string): Promise<{ index: string }> {
+    const params = pipelineUuid ? { pipeline_uuid: pipelineUuid } : {};
+    return this.get('/api/v1/skills/index', params);
+  }
+
+  public scanSkillDirectory(path: string): Promise<{
+    package_root: string;
+    name: string;
+    display_name?: string;
+    description: string;
+    instructions: string;
+  }> {
+    return this.get('/api/v1/skills/scan', { path });
+  }
+
+  public listSkillFiles(
+    skillName: string,
+    path: string = '.',
+    includeHidden: boolean = false,
+  ): Promise<{
+    skill: { name: string };
+    base_path: string;
+    entries: Array<{
+      path: string;
+      name: string;
+      is_dir: boolean;
+      size: number | null;
+    }>;
+    truncated: boolean;
+  }> {
+    return this.get(`/api/v1/skills/${skillName}/files`, {
+      path,
+      include_hidden: includeHidden,
+    });
+  }
+
+  public readSkillFile(
+    skillName: string,
+    filePath: string,
+  ): Promise<{
+    skill: { name: string };
+    path: string;
+    content: string;
+  }> {
+    return this.get(`/api/v1/skills/${skillName}/files/${filePath}`);
+  }
+
+  public writeSkillFile(
+    skillName: string,
+    filePath: string,
+    content: string,
+  ): Promise<{
+    skill: { name: string };
+    path: string;
+    bytes_written: number;
+  }> {
+    return this.put(`/api/v1/skills/${skillName}/files/${filePath}`, {
+      content,
+    });
+  }
 }
 
 export interface SurveyQuestion {

web/src/app/infra/http/CloudServiceClient.ts

@@ -38,7 +38,49 @@ export class CloudServiceClient extends BaseHttpClient {
     sort_order?: string,
     component_filter?: string,
     tags_filter?: string[],
+    type_filter?: string,
   ): Promise<ApiRespMarketplacePlugins> {
+    // Use different endpoints based on type_filter
+    if (type_filter === 'mcp') {
+      return this.post<{ mcps: PluginV4[]; total: number }>(
+        '/api/v1/marketplace/mcps/search',
+        {
+          query,
+          page,
+          page_size,
+          sort_by,
+          sort_order,
+          tags_filter,
+        },
+      ).then((resp) => ({
+        plugins: (resp?.mcps || []).map((mcp) => ({
+          ...mcp,
+          plugin_id: mcp.mcp_id || mcp.plugin_id,
+          type: 'mcp' as const,
+        })),
+        total: resp?.total || 0,
+      }));
+    } else if (type_filter === 'skill') {
+      return this.post<{ skills: PluginV4[]; total: number }>(
+        '/api/v1/marketplace/skills/search',
+        {
+          query,
+          page,
+          page_size,
+          sort_by,
+          sort_order,
+          tags_filter,
+        },
+      ).then((resp) => ({
+        plugins: (resp?.skills || []).map((skill) => ({
+          ...skill,
+          plugin_id: skill.skill_id || skill.plugin_id,
+          type: 'skill' as const,
+        })),
+        total: resp?.total || 0,
+      }));
+    }
+
     return this.post<ApiRespMarketplacePlugins>(
       '/api/v1/marketplace/plugins/search',
       {
@@ -49,10 +91,113 @@ export class CloudServiceClient extends BaseHttpClient {
         sort_order,
         component_filter,
         tags_filter,
+        type_filter,
       },
     );
   }
 
+  public searchMarketplaceExtensions(data: {
+    query?: string;
+    page: number;
+    page_size: number;
+    sort_by?: string;
+    sort_order?: string;
+    type_filter?: string;
+    component_filter?: string;
+    tags_filter?: string[];
+  }): Promise<ApiRespMarketplacePlugins> {
+    return this.post<{ extensions: PluginV4[]; total: number }>(
+      '/api/v1/marketplace/extensions/search',
+      data,
+    )
+      .then((resp) => ({
+        plugins: resp?.extensions || [],
+        total: resp?.total || 0,
+      }))
+      .catch(() => this.searchMarketplaceExtensionsLegacy(data));
+  }
+
+  private async searchMarketplaceExtensionsLegacy(data: {
+    query?: string;
+    page: number;
+    page_size: number;
+    sort_by?: string;
+    sort_order?: string;
+    type_filter?: string;
+    component_filter?: string;
+    tags_filter?: string[];
+  }): Promise<ApiRespMarketplacePlugins> {
+    const query = data.query || '';
+
+    if (
+      data.type_filter === 'plugin' ||
+      data.type_filter === 'mcp' ||
+      data.type_filter === 'skill' ||
+      data.component_filter
+    ) {
+      return this.searchMarketplacePlugins(
+        query,
+        data.page,
+        data.page_size,
+        data.sort_by,
+        data.sort_order,
+        data.component_filter,
+        data.tags_filter,
+        data.component_filter ? 'plugin' : data.type_filter,
+      ).catch((error) => {
+        if (data.type_filter === 'mcp' || data.type_filter === 'skill') {
+          return { plugins: [], total: 0 };
+        }
+        throw error;
+      });
+    }
+
+    const [pluginsResp, mcpsResp, skillsResp] = await Promise.all([
+      this.searchMarketplacePlugins(
+        query,
+        data.page,
+        data.page_size,
+        data.sort_by,
+        data.sort_order,
+        undefined,
+        data.tags_filter,
+        'plugin',
+      ).catch(() => ({ plugins: [], total: 0 })),
+      this.searchMarketplacePlugins(
+        query,
+        data.page,
+        data.page_size,
+        data.sort_by,
+        data.sort_order,
+        undefined,
+        data.tags_filter,
+        'mcp',
+      ).catch(() => ({ plugins: [], total: 0 })),
+      this.searchMarketplacePlugins(
+        query,
+        data.page,
+        data.page_size,
+        data.sort_by,
+        data.sort_order,
+        undefined,
+        data.tags_filter,
+        'skill',
+      ).catch(() => ({ plugins: [], total: 0 })),
+    ]);
+
+    return {
+      plugins: [
+        ...(pluginsResp.plugins || []),
+        ...(mcpsResp.plugins || []),
+        ...(skillsResp.plugins || []),
+      ],
+      total:
+        (pluginsResp.total || 0) +
+        (mcpsResp.total || 0) +
+        (skillsResp.total || 0),
+    };
+  }
+
   public getPluginDetail(
     author: string,
     pluginName: string,
@@ -77,6 +222,14 @@ export class CloudServiceClient extends BaseHttpClient {
     return `${this.baseURL}/api/v1/marketplace/plugins/${author}/${name}/resources/icon`;
   }
 
+  public getMCPMarketplaceIconURL(author: string, name: string): string {
+    return `${this.baseURL}/api/v1/marketplace/mcps/${author}/${name}/resources/icon`;
+  }
+
+  public getSkillMarketplaceIconURL(author: string, name: string): string {
+    return `${this.baseURL}/api/v1/marketplace/skills/${author}/${name}/resources/icon`;
+  }
+
   public getPluginAssetURL(
     author: string,
     pluginName: string,

web/src/app/infra/http/README.md

@@ -8,7 +8,7 @@ HTTP Client 已经重构为更清晰的架构，将通用方法与业务逻辑
 
 - **BaseHttpClient.ts** - 基础 HTTP 客户端类，包含所有通用的 HTTP 方法和拦截器配置
 - **BackendClient.ts** - 后端服务客户端，处理与后端 API 的所有交互
-- **CloudServiceClient.ts** - 云服务客户端，处理与 cloud service 的交互（如插件市场）
+- **CloudServiceClient.ts** - 云服务客户端，处理与 cloud service 的交互（如扩展市场）
 - **index.ts** - 主入口文件，管理客户端实例的创建和导出
 - **HttpClient.ts** - 仅用于向后兼容的文件（已废弃）
 

web/src/app/infra/http/index.ts

@@ -90,12 +90,17 @@ export const getCloudServiceClientSync = (): CloudServiceClient => {
  * 手动初始化系统信息
  * 可以在应用启动时调用此方法预先获取系统信息
  */
-export const initializeSystemInfo = async (): Promise<void> => {
+export const initializeSystemInfo = async (options?: {
+  throwOnError?: boolean;
+}): Promise<void> => {
   try {
     Object.assign(systemInfo, await backendClient.getSystemInfo());
     cloudServiceClient.updateBaseURL(systemInfo.cloud_service_url);
   } catch (error) {
     console.error('Failed to initialize system info:', error);
+    if (options?.throwOnError) {
+      throw error;
+    }
   }
 };
 

web/src/app/login/page.tsx

@@ -22,7 +22,14 @@ import {
 import { useEffect, useState } from 'react';
 import { httpClient, initializeUserInfo } from '@/app/infra/http';
 import { useNavigate } from 'react-router-dom';
-import { Mail, Lock, Loader2, AlertCircle, RefreshCw } from 'lucide-react';
+import {
+  Mail,
+  Lock,
+  Loader2,
+  AlertCircle,
+  RefreshCw,
+  Layers,
+} from 'lucide-react';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
@@ -75,9 +82,18 @@ export default function Login() {
       // Also check if already logged in
       checkIfAlreadyLoggedIn();
     } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : t('common.loginLoadError');
-      setLoadError(errorMessage);
+      let detail = '';
+      if (err instanceof Error) {
+        detail = err.message;
+      } else if (
+        err &&
+        typeof err === 'object' &&
+        'msg' in err &&
+        typeof (err as Record<string, unknown>).msg === 'string'
+      ) {
+        detail = (err as Record<string, unknown>).msg as string;
+      }
+      setLoadError(detail || t('common.loginLoadError'));
       setLoading(false);
     }
   }
@@ -146,8 +162,8 @@ export default function Login() {
   if (loadError) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-neutral-900">
-        <Card className="w-[375px] shadow-lg dark:shadow-white/10">
-          <CardHeader>
+        <Card className="w-[400px] shadow-lg dark:shadow-white/10">
+          <CardHeader className="pb-2">
             <div className="flex justify-between items-center mb-6">
               <ThemeToggle />
               <LanguageSelector />
@@ -161,20 +177,25 @@ export default function Login() {
               {t('common.welcome')}
             </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex flex-col items-center gap-3 py-4">
-              <AlertCircle className="h-10 w-10 text-destructive" />
-              <p className="text-sm text-center text-muted-foreground">
+          <CardContent>
+            <div className="flex flex-col items-center gap-4 rounded-lg border border-destructive/20 bg-destructive/5 p-5">
+              <div className="flex items-center gap-2 text-destructive">
+                <AlertCircle className="h-5 w-5 shrink-0" />
+                <span className="text-sm font-medium">
+                  {t('common.loginLoadError')}
+                </span>
+              </div>
+              <p className="text-sm text-center text-muted-foreground leading-relaxed">
                 {t('common.loginLoadErrorDesc')}
               </p>
-              <code className="text-xs bg-muted px-3 py-2 rounded max-w-full overflow-x-auto block text-center text-muted-foreground">
+              <code className="text-xs bg-muted/80 px-3 py-2 rounded-md max-w-full overflow-x-auto block text-center text-muted-foreground/80 break-all">
                 {loadError}
               </code>
               <Button
                 onClick={handleRetry}
                 disabled={retrying}
                 variant="outline"
-                className="mt-2 cursor-pointer"
+                className="w-full cursor-pointer"
               >
                 {retrying ? (
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -228,34 +249,7 @@ export default function Login() {
                 {spaceLoading ? (
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 ) : (
-                  <svg
-                    className="mr-2 h-4 w-4"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 2L2 7L12 12L22 7L12 2Z"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                    <path
-                      d="M2 17L12 22L22 17"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                    <path
-                      d="M2 12L12 17L22 12"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
+                  <Layers className="mr-2 h-4 w-4" />
                 )}
                 {t('common.loginWithSpace')}
               </Button>
@@ -348,6 +342,15 @@ export default function Login() {
 
           <p className="text-xs text-center text-muted-foreground">
             {t('common.agreementNotice')}{' '}
+            <a
+              href="https://langbot.app/terms"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline hover:text-foreground transition-colors"
+            >
+              {t('common.termsOfService')}
+            </a>
+            {'、'}
             <a
               href="https://langbot.app/privacy"
               target="_blank"

web/src/app/register/page.tsx

@@ -22,7 +22,7 @@ import {
 import { useEffect, useState } from 'react';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { useNavigate } from 'react-router-dom';
-import { Mail, Lock, Loader2, Info } from 'lucide-react';
+import { Mail, Lock, Loader2, Info, Layers } from 'lucide-react';
 import {
   Popover,
   PopoverContent,
@@ -138,34 +138,7 @@ export default function Register() {
               {spaceLoading ? (
                 <Loader2 className="mr-2 h-4 w-4 animate-spin" />
               ) : (
-                <svg
-                  className="mr-2 h-4 w-4"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 2L2 7L12 12L22 7L12 2Z"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M2 17L12 22L22 17"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M2 12L12 17L22 12"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
+                <Layers className="mr-2 h-4 w-4" />
               )}
               {t('register.initWithSpace')}
             </Button>