diff --git a/webui/src/pages/ToolsPage.svelte b/webui/src/pages/ToolsPage.svelte
new file mode 100644
index 0000000..c26a89c
--- /dev/null
+++ b/webui/src/pages/ToolsPage.svelte
@@ -0,0 +1,185 @@
+<script>
+  import { onMount } from "svelte";
+  import { Tabs } from "bits-ui";
+  import { api } from "../lib/api.js";
+
+  let tab = $state("tools");
+  let tools = $state([]);
+  let skills = $state([]);
+  let servers = $state([]);
+  let loading = $state(true);
+  let error = $state("");
+  let query = $state("");
+  let filter = $state("all");
+
+  const filters = [
+    ["all", "全部"],
+    ["read_only", "只读"],
+    ["concurrency_safe", "可并发"],
+    ["side_effect", "有副作用"],
+    ["exclusive", "独占"]
+  ];
+
+  function matches(tool) {
+    if (filter === "read_only") return tool.read_only;
+    if (filter === "concurrency_safe") return tool.concurrency_safe;
+    if (filter === "side_effect") return !tool.read_only;
+    if (filter === "exclusive") return tool.exclusive;
+    return true;
+  }
+
+  const filtered = $derived.by(() => {
+    const q = query.trim().toLowerCase();
+    return tools.filter(
+      (tool) =>
+        matches(tool) &&
+        (!q || tool.name.toLowerCase().includes(q) || (tool.description || "").toLowerCase().includes(q))
+    );
+  });
+
+  const connected = $derived(servers.filter((server) => server.connected).length);
+
+  function schema(tool) {
+    return tool.parameters_schema ? JSON.stringify(tool.parameters_schema, null, 2) : "{}";
+  }
+
+  async function load() {
+    loading = true;
+    error = "";
+    try {
+      const [toolRes, skillRes, status] = await Promise.all([
+        api("/api/tools"),
+        api("/api/skills"),
+        api("/api/status")
+      ]);
+      tools = toolRes.tools || [];
+      skills = skillRes.skills || [];
+      servers = status.mcp || [];
+    } catch (caught) {
+      error = caught.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  function changeTab(value) {
+    tab = value;
+  }
+
+  onMount(load);
+</script>
+
+<section class="page active content-page">
+  <div class="toolbar">
+    <Tabs.Root value={tab} onValueChange={changeTab}>
+      <Tabs.List class="tabs" aria-label="工具与技能">
+        <Tabs.Trigger value="tools">工具</Tabs.Trigger>
+        <Tabs.Trigger value="skills">Skills</Tabs.Trigger>
+        <Tabs.Trigger value="mcp">MCP</Tabs.Trigger>
+      </Tabs.List>
+    </Tabs.Root>
+    <button class="secondary" onclick={load}>↻ 刷新</button>
+  </div>
+
+  {#if loading}
+    <div class="loading">加载中…</div>
+  {:else if error}
+    <div class="empty-card error-text">{error}</div>
+  {:else if tab === "tools"}
+    <form class="filters-bar" onsubmit={(event) => event.preventDefault()}>
+      <label class="search grow"><span>⌕</span><input bind:value={query} placeholder="搜索工具名称或描述" /></label>
+      <div class="chips">
+        {#each filters as [value, label]}
+          <button type="button" class="chip" class:active={filter === value} onclick={() => (filter = value)}>{label}</button>
+        {/each}
+      </div>
+    </form>
+    <div class="legend">
+      <span class="cap signal">◇ 只读</span>
+      <span class="cap info">⇉ 可并发</span>
+      <span class="cap accent">△ 有副作用</span>
+      <span class="cap danger">■ 独占</span>
+    </div>
+    <div class="tool-grid">
+      {#each filtered as tool (tool.name)}
+        <article class="card">
+          <div class="card-row">
+            <div>
+              <h3 class="mono">{tool.name}</h3>
+              <div class="meta"><span>{tool.call_count} 次调用</span></div>
+            </div>
+            <span class="badge" class:src-mcp={tool.source === "mcp"}>{tool.source}</span>
+          </div>
+          <p>{tool.description}</p>
+          <div class="cap-row">
+            {#if tool.read_only}<span class="cap signal">◇ 只读</span>{/if}
+            {#if tool.concurrency_safe}<span class="cap info">⇉ 可并发</span>{/if}
+            {#if !tool.read_only}<span class="cap accent">△ 有副作用</span>{/if}
+            {#if tool.exclusive}<span class="cap danger">■ 独占</span>{/if}
+          </div>
+          <details class="schema-wrap">
+            <summary>参数 schema</summary>
+            <pre class="mono">{schema(tool)}</pre>
+          </details>
+        </article>
+      {:else}
+        <div class="empty-card">没有匹配的工具</div>
+      {/each}
+    </div>
+  {:else if tab === "skills"}
+    <div class="cards">
+      {#each skills as skill (skill.name)}
+        <article class="card">
+          <div class="card-row">
+            <div>
+              <h3 class="mono">{skill.name}</h3>
+              <p>{skill.description}</p>
+              <div class="meta"><span>{skill.source}</span></div>
+            </div>
+            {#if skill.always}<span class="badge ok">always</span>{/if}
+          </div>
+        </article>
+      {:else}
+        <div class="empty-card">暂无 Skills</div>
+      {/each}
+    </div>
+  {:else}
+    <div class="metrics">
+      <div class="metric"><b>{servers.length}</b><small>MCP 服务器</small></div>
+      <div class="metric"><b>{connected}</b><small>已连接</small></div>
+      <div class="metric"><b>{servers.reduce((sum, server) => sum + (server.tools || 0), 0)}</b><small>工具总数</small></div>
+    </div>
+    <div class="cards">
+      {#each servers as server (server.name)}
+        <article class="card">
+          <div class="card-row">
+            <div>
+              <h3 class="mono">{server.name}</h3>
+              <div class="meta"><span>{server.tools || 0} 个工具</span></div>
+            </div>
+            <span class="badge" class:ok={server.connected} class:fail={!server.connected}>{server.connected ? "已连接" : "未连接"}</span>
+          </div>
+        </article>
+      {:else}
+        <div class="empty-card">暂无 MCP 服务器</div>
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .filters-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
+  .chips { display: flex; gap: 7px; flex-wrap: wrap; }
+  .chip { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 99px; padding: 6px 12px; font-size: 11px; cursor: pointer; }
+  .chip.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent); }
+  .legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
+  .tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
+  .cap-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
+  .badge.src-mcp { background: var(--info-soft); color: var(--info); }
+  .schema-wrap { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
+  .schema-wrap summary { cursor: pointer; color: var(--muted); font-size: 11px; }
+  .schema-wrap pre { max-height: 300px; margin: 8px 0 0; padding: 10px 11px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; color: var(--text-soft); background: var(--code-bg); font-size: 11px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
+  @media (max-width: 800px) {
+    .tool-grid { grid-template-columns: 1fr; }
+  }
+</style>