PicoBot/webui/src/pages/ToolsPage.svelte

<script>
  import { onMount } from "svelte";
  import { Tabs } from "bits-ui";
  import { api } from "../lib/api.js";
  import Icon from "../lib/Icon.svelte";

  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}><Icon name="refresh" size={16} />刷新</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"><Icon name="search" size={16} /><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; }
  .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: 12px; }
  .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: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  @media (max-width: 800px) {
    .tool-grid { grid-template-columns: 1fr; }
  }
</style>